:root {

  color-scheme: light;

  font-family:

    Inter,

    system-ui,

    -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    sans-serif;



  --emc-bg: #f5f7fa;

  --emc-surface: #ffffff;

  --emc-surface-soft: #f8fafc;

  --emc-border: #dfe4ea;

  --emc-border-soft: #e9edf2;

  --emc-text: #18212f;

  --emc-text-muted: #667085;

  --emc-text-soft: #8a94a3;

  --emc-accent: #18212f;

  --emc-radius: 16px;

  --emc-sidebar-width: 272px;

  --emc-header-height: 72px;

  --emc-shadow:

    0 14px 40px

    rgba(20, 31, 48, 0.07);

}



* {

  box-sizing: border-box;

}



html,

body {

  margin: 0;

  min-height: 100%;

}



body {

  min-height: 100vh;

  background: var(--emc-bg);

  color: var(--emc-text);

}



button,

input,

select,

textarea {

  font: inherit;

}



button,

a {

  -webkit-tap-highlight-color:

    transparent;

}



a {

  color: inherit;

}



[hidden] {

  display: none !important;

}





/* ============================================================

   AUTHORIZATION / SYSTEM SCREENS

   ============================================================ */



.emc-system-screen {

  min-height: 100vh;

  display: grid;

  place-items: center;

  padding: 32px 20px;

}



.emc-system-card {

  width: min(680px, 100%);

  padding: 32px;

  border: 1px solid var(--emc-border);

  border-radius: 18px;

  background: var(--emc-surface);

  box-shadow: var(--emc-shadow);

}



.emc-eyebrow {

  margin: 0 0 8px;

  color: var(--emc-text-muted);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.1em;

  text-transform: uppercase;

}



.emc-system-card h1 {

  margin: 0 0 12px;

  font-size: clamp(28px, 5vw, 42px);

  line-height: 1.1;

}



.emc-system-card p {

  margin: 0;

  line-height: 1.6;

}



.emc-system-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 24px;

}



.emc-system-status {

  margin-top: 12px !important;

  color: var(--emc-text-muted);

  font-size: 14px;

}





/* ============================================================

   BUTTONS

   ============================================================ */



.emc-button {

  appearance: none;

  min-height: 42px;

  border: 1px solid transparent;

  border-radius: 10px;

  padding: 10px 16px;

  background: var(--emc-accent);

  color: #ffffff;

  font-weight: 700;

  cursor: pointer;

}



.emc-button:hover {

  opacity: 0.92;

}



.emc-button:focus-visible {

  outline: 3px solid

    rgba(24, 33, 47, 0.18);

  outline-offset: 2px;

}



.emc-button:disabled {

  cursor: wait;

  opacity: 0.6;

}



.emc-button-secondary {

  border-color: var(--emc-border);

  background: var(--emc-surface);

  color: var(--emc-text);

}





/* ============================================================

   APPLICATION SHELL

   ============================================================ */



.emc-app {

  min-height: 100vh;

}



.emc-sidebar {

  position: fixed;

  inset: 0 auto 0 0;

  z-index: 30;

  width: var(--emc-sidebar-width);

  overflow-y: auto;

  border-right:

    1px solid var(--emc-border);

  background: var(--emc-surface);

}



.emc-brand {

  display: flex;

  align-items: center;

  min-height: var(--emc-header-height);

  padding: 0 24px;

  border-bottom:

    1px solid var(--emc-border-soft);

}



.emc-brand-name {

  font-size: 21px;

  font-weight: 800;

  letter-spacing: -0.03em;

}



.emc-brand-product {

  margin-left: 8px;

  color: var(--emc-text-muted);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

}



.emc-navigation {

  padding: 20px 14px 32px;

}



.emc-nav-group + .emc-nav-group {

  margin-top: 24px;

}



.emc-nav-label {

  padding: 0 10px 8px;

  color: var(--emc-text-soft);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.09em;

  text-transform: uppercase;

}



.emc-nav-link {

  display: flex;

  align-items: center;

  min-height: 42px;

  margin: 2px 0;

  border-radius: 10px;

  padding: 9px 10px;

  color: #445064;

  font-size: 14px;

  font-weight: 650;

  text-decoration: none;

}



.emc-nav-link:hover {

  background: var(--emc-surface-soft);

  color: var(--emc-text);

}



.emc-nav-link.is-active {

  background: #eef1f5;

  color: var(--emc-text);

}



.emc-main {

  min-height: 100vh;

  margin-left:

    var(--emc-sidebar-width);

}



.emc-header {

  position: sticky;

  top: 0;

  z-index: 20;

  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: var(--emc-header-height);

  padding: 0 32px;

  border-bottom:

    1px solid var(--emc-border);

  background:

    rgba(255, 255, 255, 0.96);

  backdrop-filter:

    blur(12px);

}



.emc-header-title {

  min-width: 0;

}



.emc-header-title h1 {

  margin: 0;

  font-size: 20px;

  line-height: 1.25;

}



.emc-header-title p {

  margin: 4px 0 0;

  color: var(--emc-text-muted);

  font-size: 13px;

}



.emc-account {

  min-width: 0;

  text-align: right;

}



.emc-account-name {

  display: block;

  max-width: 280px;

  overflow: hidden;

  font-size: 14px;

  font-weight: 750;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.emc-account-role {

  display: block;

  margin-top: 2px;

  color: var(--emc-text-muted);

  font-size: 12px;

}



.emc-content {

  width: min(1500px, 100%);

  margin: 0 auto;

  padding: 32px;

}





/* ============================================================

   PAGE CONTENT

   ============================================================ */



.emc-page-heading {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 24px;

  margin-bottom: 28px;

}



.emc-page-heading h2 {

  margin: 0;

  font-size: 28px;

  letter-spacing: -0.025em;

}



.emc-page-heading p {

  max-width: 760px;

  margin: 8px 0 0;

  color: var(--emc-text-muted);

  line-height: 1.6;

}



.emc-grid {

  display: grid;

  grid-template-columns:

    repeat(

      12,

      minmax(0, 1fr)

    );

  gap: 20px;

}



.emc-card {

  border: 1px solid var(--emc-border);

  border-radius: var(--emc-radius);

  background: var(--emc-surface);

  box-shadow:

    0 5px 18px

    rgba(20, 31, 48, 0.035);

}



.emc-card-body {

  padding: 22px;

}



.emc-card-title {

  margin: 0;

  font-size: 16px;

  font-weight: 750;

}



.emc-card-description {

  margin: 8px 0 0;

  color: var(--emc-text-muted);

  font-size: 14px;

  line-height: 1.55;

}



.emc-stat {

  grid-column:

    span 3;

}



.emc-stat-label {

  color: var(--emc-text-muted);

  font-size: 13px;

  font-weight: 650;

}



.emc-stat-value {

  margin-top: 10px;

  font-size: 30px;

  font-weight: 800;

  letter-spacing: -0.035em;

}



.emc-panel-wide {

  grid-column:

    span 8;

}



.emc-panel-side {

  grid-column:

    span 4;

}





/* ============================================================

   RESPONSIVE

   ============================================================ */



@media (max-width: 1100px) {

  :root {

    --emc-sidebar-width: 232px;

  }



  .emc-stat {

    grid-column:

      span 6;

  }



  .emc-panel-wide,

  .emc-panel-side {

    grid-column:

      span 12;

  }

}



@media (max-width: 760px) {

  .emc-sidebar {

    position: static;

    width: 100%;

    max-height: none;

    border-right: 0;

    border-bottom:

      1px solid var(--emc-border);

  }



  .emc-navigation {

    display: grid;

    grid-template-columns:

      repeat(

        2,

        minmax(0, 1fr)

      );

    gap: 14px;

  }



  .emc-nav-group + .emc-nav-group {

    margin-top: 0;

  }



  .emc-main {

    margin-left: 0;

  }



  .emc-header {

    position: static;

    gap: 18px;

    padding: 16px 20px;

  }



  .emc-content {

    padding: 24px 20px;

  }



  .emc-page-heading {

    display: block;

  }



  .emc-stat {

    grid-column:

      span 12;

  }

}



@media (max-width: 520px) {

  .emc-navigation {

    grid-template-columns:

      1fr;

  }



  .emc-header {

    align-items: flex-start;

    flex-direction: column;

  }



  .emc-account {

    text-align: left;

  }

}






/* ============================================================

   EMC HEADER TOOLS / PROFILE

   ============================================================ */



.emc-header-tools {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 24px;

  min-width: 0;

}



.emc-datetime {

  display: flex;

  align-items: baseline;

  gap: 10px;

  color: var(--emc-text-muted);

  white-space: nowrap;

}



.emc-date {

  font-size: 13px;

  font-weight: 650;

}



.emc-time {

  padding-left: 10px;

  border-left:

    1px solid var(--emc-border);

  color: var(--emc-text);

  font-size: 13px;

  font-weight: 750;

}



.emc-profile {

  position: relative;

}



.emc-profile-trigger {

  appearance: none;

  display: flex;

  align-items: center;

  gap: 11px;

  min-width: 0;

  border: 0;

  border-radius: 12px;

  padding: 7px 9px;

  background: transparent;

  color: inherit;

  text-align: left;

  cursor: pointer;

}



.emc-profile-trigger:hover,

.emc-profile-trigger[aria-expanded="true"] {

  background: var(--emc-surface-soft);

}



.emc-profile-trigger:focus-visible {

  outline: 3px solid

    rgba(24, 33, 47, 0.15);

  outline-offset: 2px;

}



.emc-profile-avatar {

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  width: 40px;

  height: 40px;

  border: 1px solid var(--emc-border);

  border-radius: 50%;

  background: #eef1f5;

  color: var(--emc-text);

  font-size: 13px;

  font-weight: 800;

  letter-spacing: 0.02em;

}



.emc-profile-copy {

  display: block;

  min-width: 0;

}



.emc-profile-copy .emc-account-name,

.emc-profile-copy .emc-account-role {

  text-align: left;

}



.emc-profile-chevron {

  flex: 0 0 auto;

  color: var(--emc-text-muted);

  font-size: 11px;

  transition:

    transform 160ms ease;

}



.emc-profile-trigger[aria-expanded="true"]

.emc-profile-chevron {

  transform:

    rotate(180deg);

}



.emc-profile-menu {

  position: absolute;

  top: calc(100% + 10px);

  right: 0;

  z-index: 60;

  width: 290px;

  overflow: hidden;

  border: 1px solid var(--emc-border);

  border-radius: 14px;

  background: var(--emc-surface);

  box-shadow:

    0 18px 50px

    rgba(20, 31, 48, 0.14);

}



.emc-profile-menu-identity {

  display: grid;

  gap: 4px;

  padding: 18px;

}



.emc-profile-menu-identity strong {

  overflow: hidden;

  font-size: 14px;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.emc-profile-menu-identity span {

  overflow: hidden;

  color: var(--emc-text-muted);

  font-size: 12px;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.emc-profile-menu-divider {

  height: 1px;

  background: var(--emc-border-soft);

}



.emc-profile-menu-item {

  appearance: none;

  display: block;

  width: 100%;

  border: 0;

  padding: 12px 18px;

  background: transparent;

  color: var(--emc-text);

  font: inherit;

  font-size: 14px;

  font-weight: 650;

  text-align: left;

  cursor: pointer;

}



.emc-profile-menu-item:hover,

.emc-profile-menu-item:focus-visible {

  background: var(--emc-surface-soft);

  outline: none;

}



.emc-profile-menu-status {

  margin: 0;

  padding: 12px 18px 16px;

  border-top:

    1px solid var(--emc-border-soft);

  color: var(--emc-text-muted);

  font-size: 12px;

  line-height: 1.45;

}





/* ============================================================

   HEADER RESPONSIVE

   ============================================================ */



@media (max-width: 980px) {

  .emc-header-tools {

    gap: 12px;

  }



  .emc-date {

    display: none;

  }



  .emc-time {

    padding-left: 0;

    border-left: 0;

  }



  .emc-profile-copy {

    display: none;

  }

}



@media (max-width: 760px) {

  .emc-header-tools {

    width: 100%;

    justify-content:

      space-between;

  }



  .emc-profile-copy {

    display: block;

  }



  .emc-profile-menu {

    right: auto;

    left: 0;

    width: min(

      290px,

      calc(100vw - 40px)

    );

  }

}



@media (max-width: 520px) {

  .emc-profile-copy {

    display: none;

  }

}






/* ============================================================

   EMC ACCORDION NAVIGATION

   Shared across every EMC page

   ============================================================ */



.emc-navigation {

  padding:

    14px 12px

    32px;

}



.emc-nav-group {

  margin: 0 0 6px;

}



.emc-nav-group + .emc-nav-group {

  margin-top: 6px;

}



.emc-nav-group-trigger {

  appearance: none;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  width: 100%;

  min-height: 40px;

  border: 0;

  border-radius: 10px;

  padding: 9px 10px;

  background: transparent;

  color: var(--emc-text-muted);

  font: inherit;

  cursor: pointer;

  text-align: left;

}



.emc-nav-group-trigger:hover {

  background:

    var(--emc-surface-soft);

  color:

    var(--emc-text);

}



.emc-nav-group-trigger:focus-visible {

  outline:

    3px solid

    rgba(24, 33, 47, 0.12);

  outline-offset: 1px;

}



.emc-nav-group-label {

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.085em;

  text-transform: uppercase;

}



.emc-nav-group-chevron {

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  width: 18px;

  height: 18px;

  transition:

    transform 160ms ease;

}



.emc-nav-group-chevron svg {

  width: 14px;

  height: 14px;

  fill: none;

  stroke: currentColor;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

}



.emc-nav-group.is-open

.emc-nav-group-chevron {

  transform:

    rotate(90deg);

}



.emc-nav-group-panel {

  display: grid;

  gap: 3px;

  padding:

    3px 0

    7px;

}



.emc-nav-group-panel[hidden] {

  display: none !important;

}





/* ============================================================

   EMC NAVIGATION LINKS + ICON TILES

   ============================================================ */



.emc-nav-link {

  display: flex;

  align-items: center;

  gap: 11px;

  min-height: 44px;

  margin: 0;

  border-radius: 11px;

  padding: 6px 9px;

  color: #445064;

  font-size: 14px;

  font-weight: 650;

  text-decoration: none;

}



.emc-nav-link:hover {

  background:

    var(--emc-surface-soft);

  color:

    var(--emc-text);

}



.emc-nav-link.is-active {

  background:

    #eef3f8;

  color:

    var(--emc-text);

  font-weight: 750;

}



.emc-nav-link-label {

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.emc-nav-icon {

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  width: 31px;

  height: 31px;

  border-radius: 9px;

}



.emc-nav-icon svg {

  width: 17px;

  height: 17px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

}





/* ============================================================

   EMC ICON COLOUR SYSTEM

   ============================================================ */



.emc-nav-icon--blue,

.emc-icon-tile--blue {

  background: #e8f1ff;

  color: #2563eb;

}



.emc-nav-icon--violet,

.emc-icon-tile--violet {

  background: #f0eaff;

  color: #7c3aed;

}



.emc-nav-icon--teal,

.emc-icon-tile--teal {

  background: #e4f7f5;

  color: #0f8f83;

}



.emc-nav-icon--cyan,

.emc-icon-tile--cyan {

  background: #e4f7fb;

  color: #0891b2;

}



.emc-nav-icon--indigo,

.emc-icon-tile--indigo {

  background: #e9edff;

  color: #4f46e5;

}



.emc-nav-icon--green,

.emc-icon-tile--green {

  background: #e9f8ee;

  color: #16803c;

}



.emc-nav-icon--emerald,

.emc-icon-tile--emerald {

  background: #e3f8ef;

  color: #059669;

}



.emc-nav-icon--lime,

.emc-icon-tile--lime {

  background: #f0f9df;

  color: #65a30d;

}



.emc-nav-icon--pink,

.emc-icon-tile--pink {

  background: #fdebf5;

  color: #db2777;

}



.emc-nav-icon--orange,

.emc-icon-tile--orange {

  background: #fff0df;

  color: #ea580c;

}



.emc-nav-icon--red,

.emc-icon-tile--red {

  background: #fde9e9;

  color: #dc2626;

}



.emc-nav-icon--purple,

.emc-icon-tile--purple {

  background: #f2eafd;

  color: #9333ea;

}



.emc-nav-icon--rose,

.emc-icon-tile--rose {

  background: #ffe8ee;

  color: #e11d48;

}



.emc-nav-icon--amber,

.emc-icon-tile--amber {

  background: #fff5d9;

  color: #d97706;

}



.emc-nav-icon--sky,

.emc-icon-tile--sky {

  background: #e5f5ff;

  color: #0284c7;

}



.emc-nav-icon--slate,

.emc-icon-tile--slate {

  background: #edf1f5;

  color: #475569;

}





/* ============================================================

   EMC CARD ICON GUIDELINE

   Every primary dashboard/action card may use these shared tiles.

   ============================================================ */



.emc-card-heading {

  display: flex;

  align-items: center;

  gap: 12px;

}



.emc-icon-tile {

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  width: 42px;

  height: 42px;

  border-radius: 11px;

}



.emc-icon-tile svg {

  width: 21px;

  height: 21px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

}



.emc-stat-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 14px;

}



.emc-stat-copy {

  min-width: 0;

}





/* ============================================================

   ACCORDION RESPONSIVE

   ============================================================ */



@media (max-width: 760px) {

  .emc-navigation {

    display: block;

    padding:

      14px 12px

      22px;

  }



  .emc-nav-group + .emc-nav-group {

    margin-top: 6px;

  }



  .emc-nav-group-panel {

    padding-bottom: 5px;

  }

}






/* ============================================================

   EMC ACCORDION SECTION HEADER EMPHASIS

   ============================================================ */



.emc-nav-group-trigger {

  color: #263548;

}



.emc-nav-group-label {

  color: #263548;

  font-weight: 850;

}



.emc-nav-group-chevron {

  color: #526174;

}



.emc-nav-group-trigger:hover {

  background: #f3f6f9;

  color: #111827;

}



.emc-nav-group-trigger:hover

.emc-nav-group-label {

  color: #111827;

}



.emc-nav-group-trigger:hover

.emc-nav-group-chevron {

  color: #263548;

}



.emc-nav-group.is-open

.emc-nav-group-trigger {

  color: #172235;

}



.emc-nav-group.is-open

.emc-nav-group-label {

  color: #172235;

}



.emc-nav-group.is-open

.emc-nav-group-chevron {

  color: #334155;

}






/* ============================================================

   EMC ACCORDION SECTION HEADER SURFACES

   ============================================================ */



.emc-nav-group-trigger {

  border:

    1px solid #e2e8f0;

  background:

    #f1f5f9;

  box-shadow:

    0 1px 2px

    rgba(15, 23, 42, 0.025);

}



.emc-nav-group-trigger:hover {

  border-color:

    #d5dee9;

  background:

    #eaf0f6;

}



.emc-nav-group.is-open

.emc-nav-group-trigger {

  border-color:

    #d3deea;

  background:

    #e7eef6;

  box-shadow:

    0 1px 3px

    rgba(15, 23, 42, 0.04);

}



.emc-nav-group.is-open

.emc-nav-group-trigger:hover {

  background:

    #e1eaf4;

}






/* ============================================================

   EMC MANAGEMENT WORKSPACES

   Shared filters, tables, badges and pagination

   ============================================================ */



.emc-employees-workspace {

  grid-column: 1 / -1;

  margin-top: 20px;

}



.emc-employee-filters {

  display: grid;

  grid-template-columns:

    minmax(240px, 2fr)

    repeat(3, minmax(150px, 1fr));

  gap: 16px;

  margin-top: 24px;

  padding: 20px;

  border: 1px solid var(--emc-border-soft);

  border-radius: 14px;

  background: var(--emc-surface-soft);

}



.emc-field {

  display: grid;

  align-content: start;

  gap: 7px;

  min-width: 0;

}



.emc-field-search {

  grid-column: span 2;

}



.emc-field-label {

  color: var(--emc-text-muted);

  font-size: 12px;

  font-weight: 750;

}



.emc-field input,

.emc-field select {

  width: 100%;

  min-height: 42px;

  border: 1px solid var(--emc-border);

  border-radius: 10px;

  padding: 9px 11px;

  background: var(--emc-surface);

  color: var(--emc-text);

  outline: none;

}



.emc-field input:focus,

.emc-field select:focus {

  border-color: #94a3b8;

  box-shadow:

    0 0 0 3px

    rgba(148, 163, 184, 0.16);

}



.emc-filter-actions {

  display: flex;

  align-items: end;

  gap: 10px;

}



.emc-list-status {

  min-height: 22px;

  margin-top: 20px;

  color: var(--emc-text-muted);

  font-size: 13px;

}



.emc-list-status.is-error {

  color: #b42318;

}



.emc-table-scroll {

  width: 100%;

  margin-top: 10px;

  overflow-x: auto;

  border: 1px solid var(--emc-border);

  border-radius: 14px;

}



.emc-table {

  width: 100%;

  min-width: 980px;

  border-collapse: collapse;

  background: var(--emc-surface);

}



.emc-table th,

.emc-table td {

  padding: 15px 16px;

  border-bottom:

    1px solid var(--emc-border-soft);

  text-align: left;

  vertical-align: middle;

}



.emc-table th {

  background: #f8fafc;

  color: var(--emc-text-muted);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.055em;

  text-transform: uppercase;

}



.emc-table tbody tr:last-child td {

  border-bottom: 0;

}



.emc-table tbody tr:hover td {

  background: #fbfcfd;

}



.emc-table-empty {

  padding: 34px 20px !important;

  color: var(--emc-text-muted);

  text-align: center !important;

}



.emc-employee-identity {

  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 240px;

}



.emc-employee-avatar {

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  width: 38px;

  height: 38px;

  border-radius: 10px;

  background: #e4f7fb;

  color: #0891b2;

  font-size: 12px;

  font-weight: 850;

}



.emc-employee-primary {

  min-width: 0;

}



.emc-employee-name {

  overflow: hidden;

  color: var(--emc-text);

  font-size: 14px;

  font-weight: 750;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.emc-employee-meta,

.emc-table-secondary {

  margin-top: 3px;

  color: var(--emc-text-muted);

  font-size: 12px;

  line-height: 1.4;

}



.emc-table-primary {

  color: var(--emc-text);

  font-size: 14px;

  font-weight: 700;

}



.emc-badge {

  display: inline-flex;

  align-items: center;

  min-height: 25px;

  border-radius: 999px;

  padding: 4px 9px;

  font-size: 11px;

  font-weight: 800;

  line-height: 1;

  white-space: nowrap;

}



.emc-badge--green {

  background: #e9f8ee;

  color: #16803c;

}



.emc-badge--amber {

  background: #fff5d9;

  color: #a15c00;

}



.emc-badge--red {

  background: #fde9e9;

  color: #b42318;

}



.emc-badge--slate {

  background: #edf1f5;

  color: #475569;

}



.emc-badge--indigo {

  background: #e9edff;

  color: #4f46e5;

}



.emc-role-list {

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 6px;

}



.emc-role-badge {

  display: inline-flex;

  border-radius: 7px;

  padding: 4px 7px;

  background: #f0eaff;

  color: #6d28d9;

  font-size: 10px;

  font-weight: 800;

  line-height: 1.1;

}



.emc-pagination {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  margin-top: 18px;

}



.emc-pagination-summary {

  color: var(--emc-text-muted);

  font-size: 13px;

}



.emc-pagination-actions {

  display: flex;

  gap: 10px;

}





/* ============================================================

   MANAGEMENT WORKSPACE RESPONSIVE

   ============================================================ */



@media (max-width: 1200px) {

  .emc-employee-filters {

    grid-template-columns:

      repeat(2, minmax(0, 1fr));

  }



  .emc-field-search {

    grid-column: span 2;

  }

}



@media (max-width: 760px) {

  .emc-employee-filters {

    grid-template-columns: 1fr;

  }



  .emc-field-search {

    grid-column: span 1;

  }



  .emc-filter-actions {

    align-items: stretch;

    flex-direction: column;

  }



  .emc-pagination {

    align-items: stretch;

    flex-direction: column;

  }



  .emc-pagination-actions {

    width: 100%;

  }



  .emc-pagination-actions .emc-button {

    flex: 1;

  }

}






/* ============================================================

   EMC MODALS

   Shared in-page dialog system

   ============================================================ */



.emc-page-actions {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 10px;

}



.emc-modal[hidden] {

  display: none !important;

}



.emc-modal {

  position: fixed;

  inset: 0;

  z-index: 100;

  display: grid;

  place-items: center;

  padding: 24px;

}



.emc-modal-backdrop {

  position: absolute;

  inset: 0;

  background:

    rgba(15, 23, 42, 0.56);

  backdrop-filter:

    blur(3px);

}



.emc-modal-dialog {

  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  width: min(680px, 100%);

  max-height:

    calc(100vh - 48px);

  overflow: hidden;

  border:

    1px solid

    rgba(226, 232, 240, 0.96);

  border-radius: 18px;

  background:

    var(--emc-surface);

  box-shadow:

    0 28px 80px

    rgba(15, 23, 42, 0.24);

}



.emc-modal-dialog--wide {

  width: min(960px, 100%);

}



.emc-modal-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 24px;

  flex: 0 0 auto;

  padding: 24px 26px 20px;

  border-bottom:

    1px solid

    var(--emc-border-soft);

}



.emc-modal-title {

  margin: 4px 0 0;

  color: var(--emc-text);

  font-size: 24px;

  line-height: 1.2;

  letter-spacing: -0.025em;

}



.emc-modal-description {

  max-width: 680px;

  margin: 8px 0 0;

  color: var(--emc-text-muted);

  font-size: 13px;

  line-height: 1.55;

}



.emc-modal-close {

  appearance: none;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  width: 38px;

  height: 38px;

  border:

    1px solid

    var(--emc-border);

  border-radius: 10px;

  background:

    var(--emc-surface);

  color:

    var(--emc-text-muted);

  font-size: 25px;

  line-height: 1;

  cursor: pointer;

}



.emc-modal-close:hover {

  background: #f8fafc;

  color: var(--emc-text);

}



.emc-modal-close:focus-visible {

  outline:

    3px solid

    rgba(24, 33, 47, 0.16);

  outline-offset: 2px;

}



.emc-modal-body {

  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;

  padding: 24px 26px;

}



.emc-modal-footer {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 10px;

  flex: 0 0 auto;

  padding: 18px 26px;

  border-top:

    1px solid

    var(--emc-border-soft);

  background: #fbfcfd;

}



.emc-modal-section + .emc-modal-section {

  margin-top: 28px;

  padding-top: 26px;

  border-top:

    1px solid

    var(--emc-border-soft);

}



.emc-modal-section-heading {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 18px;

  margin-bottom: 16px;

}



.emc-modal-section-heading h3 {

  margin: 0;

  color: var(--emc-text);

  font-size: 16px;

  line-height: 1.3;

}



.emc-modal-section-heading p {

  margin: 5px 0 0;

  color: var(--emc-text-muted);

  font-size: 12px;

  line-height: 1.5;

}





/* ============================================================

   EMC INLINE NOTICES

   ============================================================ */



.emc-inline-notice {

  border:

    1px solid

    var(--emc-border);

  border-radius: 12px;

  padding: 13px 15px;

  font-size: 12px;

  line-height: 1.55;

}



.emc-inline-notice strong {

  font-weight: 800;

}



.emc-inline-notice--info {

  border-color: #cfe3ff;

  background: #f2f7ff;

  color: #31577e;

}





/* ============================================================

   EMC USER PICKER

   ============================================================ */



.emc-user-picker-search-row {

  display: grid;

  grid-template-columns:

    minmax(0, 1fr)

    auto;

  gap: 10px;

}



.emc-user-picker-search-row input {

  width: 100%;

  min-height: 42px;

  border:

    1px solid

    var(--emc-border);

  border-radius: 10px;

  padding: 9px 11px;

  background:

    var(--emc-surface);

  color: var(--emc-text);

  outline: none;

}



.emc-user-picker-search-row input:focus {

  border-color: #94a3b8;

  box-shadow:

    0 0 0 3px

    rgba(148, 163, 184, 0.16);

}



.emc-user-picker-results {

  display: grid;

  gap: 8px;

  max-height: 300px;

  margin-top: 10px;

  overflow-y: auto;

}



.emc-user-option {

  appearance: none;

  width: 100%;

  display: grid;

  grid-template-columns:

    auto minmax(0, 1fr) auto;

  align-items: center;

  gap: 12px;

  border:

    1px solid

    var(--emc-border);

  border-radius: 12px;

  padding: 12px;

  background:

    var(--emc-surface);

  color: inherit;

  text-align: left;

}



button.emc-user-option {

  cursor: pointer;

}



button.emc-user-option:hover {

  border-color: #cbd5e1;

  background: #f8fafc;

}



button.emc-user-option:focus-visible {

  outline:

    3px solid

    rgba(24, 33, 47, 0.14);

  outline-offset: 2px;

}



.emc-user-option.is-unavailable {

  background: #f8fafc;

  opacity: 0.72;

}



.emc-user-option-avatar,

.emc-selected-user-avatar {

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width: 40px;

  height: 40px;

  border-radius: 11px;

  background: #e4f7fb;

  color: #0891b2;

  font-size: 12px;

  font-weight: 850;

}



.emc-user-option-copy {

  min-width: 0;

}



.emc-user-option-name {

  overflow: hidden;

  color: var(--emc-text);

  font-size: 13px;

  font-weight: 800;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.emc-user-option-email {

  overflow: hidden;

  margin-top: 3px;

  color: var(--emc-text-muted);

  font-size: 11px;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.emc-user-option-status {

  justify-self: end;

}





/* ============================================================

   EMPLOYEE HIRE / REHIRE STATES

   ============================================================ */



.emc-hire-state {

  display: inline-flex;

  align-items: center;

  min-height: 25px;

  border-radius: 999px;

  padding: 4px 9px;

  font-size: 10px;

  font-weight: 850;

  line-height: 1;

  white-space: nowrap;

}



.emc-hire-state--hire {

  background: #e9f8ee;

  color: #16803c;

}



.emc-hire-state--rehire {

  background: #fff5d9;

  color: #a15c00;

}



.emc-hire-state--unavailable {

  background: #edf1f5;

  color: #64748b;

}





/* ============================================================

   SELECTED USER

   ============================================================ */



.emc-selected-user[hidden] {

  display: none !important;

}



.emc-selected-user {

  display: grid;

  grid-template-columns:

    auto minmax(0, 1fr) auto;

  align-items: center;

  gap: 12px;

  margin-top: 14px;

  border:

    1px solid #cfe3ff;

  border-radius: 13px;

  padding: 13px;

  background: #f7faff;

}



.emc-selected-user-copy {

  display: grid;

  min-width: 0;

  gap: 3px;

}



.emc-selected-user-copy strong {

  overflow: hidden;

  color: var(--emc-text);

  font-size: 13px;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.emc-selected-user-copy > span {

  overflow: hidden;

  color: var(--emc-text-muted);

  font-size: 11px;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.emc-selected-user-state {

  font-weight: 750;

}





/* ============================================================

   EMPLOYEE MODAL FORM / REVIEW

   ============================================================ */



.emc-modal-form-grid {

  display: grid;

  grid-template-columns:

    repeat(2, minmax(0, 1fr));

  gap: 16px;

}



.emc-form-status {

  min-height: 18px;

  margin: 9px 0 0;

  color: var(--emc-text-muted);

  font-size: 11px;

  line-height: 1.45;

}



.emc-form-status.is-error {

  color: #b42318;

}



.emc-form-status.is-success {

  color: #16803c;

}



.emc-employee-review {

  border:

    1px solid

    var(--emc-border);

  border-radius: 12px;

  padding: 15px;

  background: #f8fafc;

  color: var(--emc-text-muted);

  font-size: 12px;

  line-height: 1.55;

}



.emc-employee-review-grid {

  display: grid;

  grid-template-columns:

    repeat(2, minmax(0, 1fr));

  gap: 12px 18px;

}



.emc-employee-review-item {

  min-width: 0;

}



.emc-employee-review-label {

  color: var(--emc-text-muted);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.045em;

  text-transform: uppercase;

}



.emc-employee-review-value {

  margin-top: 3px;

  overflow-wrap: anywhere;

  color: var(--emc-text);

  font-size: 12px;

  font-weight: 700;

}





/* Prevent page scroll while an EMC dialog is open. */



body.emc-modal-open {

  overflow: hidden;

}





/* ============================================================



   EMC ACCESS & ROLES



   Dedicated authorization controls. These styles intentionally

   do not alter the shared .emc-field input rules.



   ============================================================ */





.emc-access-role-grid {



  display: grid;



  grid-template-columns:



    minmax(0, 1fr);



  gap: 10px;



}





.emc-access-role-option {



  position: relative;



  display: grid;



  grid-template-columns:

    auto minmax(0, 1fr);



  align-items: start;



  gap: 11px;



  min-width: 0;



  border:

    1px solid

    var(--emc-border);



  border-radius: 12px;



  padding: 13px 14px;



  background:

    var(--emc-surface);



  cursor: pointer;



  transition:

    border-color 140ms ease,

    box-shadow 140ms ease,

    background 140ms ease;



}





.emc-access-role-option:hover {



  border-color: #b8c4d3;



  background: #fbfcff;



}





.emc-access-role-option:has(input:checked) {



  border-color: #a5b4fc;



  background: #f5f6ff;



  box-shadow:

    0 0 0 2px

    rgba(99, 102, 241, 0.08);



}





.emc-access-role-option:has(input:focus-visible) {



  outline:

    3px solid

    rgba(79, 70, 229, 0.14);



  outline-offset: 2px;



}





.emc-access-role-option input[type="checkbox"] {



  width: 17px;



  height: 17px;



  min-height: 0;



  margin: 2px 0 0;



  padding: 0;



  accent-color: #4f46e5;



  cursor: pointer;



}





.emc-access-role-copy {



  display: grid;



  min-width: 0;



  gap: 3px;



}





.emc-access-role-name {



  color: var(--emc-text);



  font-size: 12px;



  font-weight: 800;



  line-height: 1.35;



}





.emc-access-role-name-row {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 7px;

  min-width: 0;

}





.emc-access-role-status {

  display: inline-flex;

  align-items: center;

  min-height: 20px;

  border: 1px solid #f0c36a;

  border-radius: 999px;

  padding: 2px 7px;

  background: #fff8e6;

  color: #8a5708;

  font-size: 9px;

  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.02em;

  text-transform: uppercase;

  white-space: nowrap;

}





.emc-access-role-option[data-emc-access-role-status="inactive"] {

  border-color: #ead8ad;

  background: #fffdf7;

}





.emc-access-role-option[data-emc-access-role-status="inactive"]:hover {

  border-color: #ddc486;

  background: #fffaf0;

}





.emc-access-role-option[data-emc-access-role-status="inactive"][data-emc-access-role-removed="true"] {

  border-color: var(--emc-border);

  background: #f8fafc;

}





.emc-access-role-description {



  color: var(--emc-text-muted);



  font-size: 10.5px;



  line-height: 1.45;



}





.emc-access-permission-groups {



  display: grid;



  grid-template-columns:

    repeat(2, minmax(0, 1fr));



  gap: 14px;



}





.emc-access-permission-group {



  min-width: 0;



  border:

    1px solid

    var(--emc-border-soft);



  border-radius: 13px;



  background: #fbfcfd;



  overflow: hidden;



}





.emc-access-permission-group-header {



  display: flex;



  align-items: flex-start;



  justify-content: space-between;



  gap: 12px;



  padding: 13px 14px;



  border-bottom:

    1px solid

    var(--emc-border-soft);



  background: #f8fafc;



}





.emc-access-permission-group-heading {



  min-width: 0;



}





.emc-access-permission-group-title {



  margin: 0;



  color: var(--emc-text);



  font-size: 12px;



  font-weight: 850;



  line-height: 1.35;



}





.emc-access-permission-group-description {



  margin: 3px 0 0;



  color: var(--emc-text-muted);



  font-size: 10.5px;



  line-height: 1.45;



}





.emc-access-permission-count {



  flex: 0 0 auto;



  border-radius: 999px;



  padding: 3px 7px;



  background: #edf1f5;



  color: #64748b;



  font-size: 9.5px;



  font-weight: 800;



  white-space: nowrap;



}





.emc-access-permission-list {



  display: grid;



  gap: 0;



}





.emc-access-permission-option {



  display: grid;



  grid-template-columns:

    auto minmax(0, 1fr);



  align-items: start;



  gap: 10px;



  min-width: 0;



  padding: 10px 14px;



  border-bottom:

    1px solid

    var(--emc-border-soft);



  background:

    var(--emc-surface);



  cursor: pointer;



}





.emc-access-permission-option:last-child {



  border-bottom: 0;



}





.emc-access-permission-option:hover {



  background: #fafbfc;



}





.emc-access-permission-option:has(input:checked) {



  background: #f7f8ff;



}





.emc-access-permission-option:has(input:focus-visible) {



  outline:

    3px solid

    rgba(79, 70, 229, 0.12);



  outline-offset: -3px;



}





.emc-access-permission-option input[type="checkbox"] {



  width: 16px;



  height: 16px;



  min-height: 0;



  margin: 1px 0 0;



  padding: 0;



  accent-color: #4f46e5;



  cursor: pointer;



}





.emc-access-permission-copy {



  display: grid;



  min-width: 0;



  gap: 2px;



}





.emc-access-permission-name {



  color: var(--emc-text);



  font-size: 11px;



  font-weight: 750;



  line-height: 1.35;



}





.emc-access-permission-key {



  overflow-wrap: anywhere;



  color: var(--emc-text-muted);



  font-family:

    ui-monospace,

    SFMono-Regular,

    Menlo,

    Monaco,

    Consolas,

    "Liberation Mono",

    monospace;



  font-size: 9px;



  line-height: 1.4;



}





@media (max-width: 1100px) {



  .emc-access-role-grid {



    grid-template-columns:

      minmax(0, 1fr);



  }



}





@media (max-width: 760px) {



  .emc-access-role-grid,

  .emc-access-permission-groups {



    grid-template-columns: 1fr;



  }



}



/* ============================================================

   EMC MODAL RESPONSIVE

   ============================================================ */



@media (max-width: 760px) {



  .emc-page-heading {

    flex-direction: column;

  }



  .emc-page-actions {

    width: 100%;

    justify-content: stretch;

  }



  .emc-page-actions .emc-button {

    width: 100%;

  }



  .emc-modal {

    padding: 12px;

  }



  .emc-modal-dialog {

    max-height:

      calc(100vh - 24px);

    border-radius: 15px;

  }



  .emc-modal-header,

  .emc-modal-body,

  .emc-modal-footer {

    padding-left: 18px;

    padding-right: 18px;

  }



  .emc-modal-form-grid,

  .emc-employee-review-grid {

    grid-template-columns: 1fr;

  }



  .emc-user-picker-search-row {

    grid-template-columns: 1fr;

  }



  .emc-selected-user {

    grid-template-columns:

      auto minmax(0, 1fr);

  }



  .emc-selected-user .emc-button {

    grid-column: 1 / -1;

  }



  .emc-modal-footer {

    align-items: stretch;

    flex-direction: column-reverse;

  }



  .emc-modal-footer .emc-button {

    width: 100%;

  }



}






/* ============================================================

   EMPLOYEE IDENTITY MANAGEMENT

   ============================================================ */



.emc-field--full {

  grid-column: 1 / -1;

}





.emc-button-small {

  min-height: 34px;

  padding: 7px 10px;

  font-size: 12px;

  line-height: 1.2;

  white-space: nowrap;

}





.emc-employee-actions-cell {

  width: 1%;

  white-space: nowrap;

}





.emc-employee-actions {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}





.emc-choice-group {

  display: grid;

  grid-template-columns:

    repeat(2, minmax(0, 1fr));

  gap: 12px;

}





.emc-choice-card {

  display: flex;

  align-items: flex-start;

  gap: 11px;

  min-width: 0;

  border:

    1px solid

    var(--emc-border);

  border-radius: 12px;

  padding: 13px 14px;

  background:

    var(--emc-surface);

  color:

    var(--emc-text);

  cursor: pointer;

}





.emc-choice-card:hover {

  border-color: #94a3b8;

}





.emc-choice-card:focus-within {

  border-color: #94a3b8;

  box-shadow:

    0 0 0 3px

    rgba(148, 163, 184, 0.16);

}





.emc-choice-card input {

  flex: 0 0 auto;

  width: auto;

  min-height: 0;

  margin: 3px 0 0;

  accent-color:

    var(--emc-accent);

}





.emc-choice-card span {

  display: grid;

  gap: 4px;

  min-width: 0;

}





.emc-choice-card strong {

  color:

    var(--emc-text);

  font-size: 13px;

  line-height: 1.35;

}





.emc-choice-card small {

  color:

    var(--emc-text-muted);

  font-size: 11px;

  line-height: 1.45;

}





.emc-choice-card:has(input:checked) {

  border-color:

    var(--emc-accent);

  box-shadow:

    0 0 0 1px

    var(--emc-accent);

}





@media (max-width: 720px) {

  .emc-choice-group {

    grid-template-columns: 1fr;

  }





  .emc-employee-actions {

    align-items: stretch;

    flex-direction: column;

  }





  .emc-employee-actions .emc-button {

    width: 100%;

  }

}






/* Employee account-source radio normalization */



.emc-choice-card input[type="radio"] {

  appearance: auto;

  flex: 0 0 auto;

  width: 18px;

  height: 18px;

  min-height: 18px;

  margin: 1px 0 0;

  border: 0;

  border-radius: 50%;

  padding: 0;

  background: transparent;

  box-shadow: none;

  accent-color: var(--emc-accent);

}





.emc-choice-card input[type="radio"]:focus {

  border: 0;

  box-shadow: none;

}





.emc-choice-card input[type="radio"]:focus-visible {

  outline: 2px solid var(--emc-accent);

  outline-offset: 3px;

}






/* ============================================================

   EMPLOYEE MODAL SECTION ICONS / REQUIRED FIELDS

   ============================================================ */



.emc-modal-section-heading {

  justify-content: flex-start;

}



.emc-modal-section-heading > div {

  min-width: 0;

}



.emc-modal-section-icon {

  width: 36px;

  height: 36px;

  border-radius: 10px;

}



.emc-modal-section-icon svg {

  width: 18px;

  height: 18px;

}



.emc-required-marker {

  margin-left: 2px;

  color: #dc2626;

  font-weight: 800;

}



.emc-required-legend {

  display: flex;

  align-items: center;

  gap: 4px;

  margin-top: 7px !important;

  color: var(--emc-text-muted);

  font-size: 11px !important;

}



.emc-required-legend .emc-required-marker {

  margin-left: 0;

}



@media (max-width: 720px) {

  .emc-modal-section-icon {

    width: 34px;

    height: 34px;

  }



  .emc-modal-section-icon svg {

    width: 17px;

    height: 17px;

  }

}






/* ============================================================

   EMPLOYEE CORPORATE EMAIL VALIDATION

   ============================================================ */



.emc-field-validation {

  display: block;

  margin-top: 2px;

  color: #b42318;

  font-size: 11px;

  font-weight: 700;

  line-height: 1.45;

}



.emc-field-validation[hidden] {

  display: none;

}



.emc-field input.is-invalid {

  border-color: #d92d20;

  box-shadow:

    0 0 0 3px

    rgba(217, 45, 32, 0.10);

}



.emc-field input.is-invalid:focus {

  border-color: #d92d20;

  box-shadow:

    0 0 0 3px

    rgba(217, 45, 32, 0.14);

}






/* ============================================================

   AUTOMATIC EMPLOYEE NUMBER

   ============================================================ */



.emc-auto-value {

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 3px;

  min-height: 42px;

  padding: 8px 11px;

  border: 1px solid var(--emc-border);

  border-radius: 10px;

  background: var(--emc-surface-soft);

}



.emc-auto-value strong {

  color: var(--emc-text);

  font-size: 13px;

  font-weight: 800;

  line-height: 1.35;

}



.emc-auto-value span {

  color: var(--emc-text-muted);

  font-size: 11px;

  line-height: 1.4;

}




/* ============================================================

   EMPLOYEE PASSWORD CONTROLS

   ============================================================ */



.emc-password-input-row {

  display: grid;

  grid-template-columns:

    minmax(0, 1fr)

    auto;

  gap: 8px;

  align-items: stretch;

}



.emc-password-input-row .emc-password-toggle {

  min-width: 64px;

}



.emc-password-generate {

  justify-self: start;

  margin-top: 2px;

}



.emc-password-requirements {

  border:

    1px solid

    var(--emc-border);

  border-radius: 12px;

  padding: 13px 14px;

  background: var(--emc-surface-soft);

  color: var(--emc-text-muted);

  font-size: 11px;

  line-height: 1.45;

}



.emc-password-requirements > strong {

  display: block;

  margin-bottom: 8px;

  color: var(--emc-text);

  font-size: 12px;

  font-weight: 800;

}



.emc-password-requirements ul {

  display: grid;

  grid-template-columns:

    repeat(2, minmax(0, 1fr));

  gap: 6px 14px;

  margin: 0;

  padding: 0;

  list-style: none;

}



.emc-password-requirements li {

  position: relative;

  padding-left: 20px;

}



.emc-password-requirements li::before {

  content: "○";

  position: absolute;

  left: 0;

  top: 0;

  color: #64748b;

  font-weight: 800;

}



.emc-password-requirements li.is-met {

  color: #16803c;

  font-weight: 700;

}



.emc-password-requirements li.is-met::before {

  content: "✓";

  color: #16803c;

}



@media (max-width: 760px) {

  .emc-password-input-row {

    grid-template-columns: 1fr;

  }



  .emc-password-input-row .emc-password-toggle {

    width: 100%;

  }



  .emc-password-generate {

    width: 100%;

  }



  .emc-password-requirements ul {

    grid-template-columns: 1fr;

  }

}





/* ============================================================



   EMC ACCESS & ROLES TOAST



   ============================================================ */





.emc-access-toast[hidden] {



  display: none !important;



}





.emc-access-toast {



  position: fixed;



  right: 24px;



  bottom: 24px;



  z-index: 140;



  display: flex;



  align-items: flex-start;



  gap: 12px;



  width: min(420px, calc(100vw - 32px));



  border:



    1px solid



    var(--emc-border);



  border-radius: 14px;



  padding: 15px 17px;



  background:



    var(--emc-surface);



  box-shadow:



    0 18px 48px



    rgba(15, 23, 42, 0.18);



}





.emc-access-toast-icon {



  flex: 0 0 auto;



  display: grid;



  place-items: center;



  width: 30px;



  height: 30px;



  border-radius: 999px;



  background: #e9f8ee;



  color: #16803c;



  font-weight: 900;



}





.emc-access-toast-copy {



  min-width: 0;



}





.emc-access-toast-title {



  margin: 0;



  color: var(--emc-text);



  font-size: 14px;



  font-weight: 800;



  line-height: 1.35;



}





.emc-access-toast-message {



  margin: 3px 0 0;



  color: var(--emc-text-muted);



  font-size: 12px;



  line-height: 1.5;



}





.emc-access-toast--unchanged .emc-access-toast-icon {



  background: #eef2ff;



  color: #4f46e5;



}





@media (max-width: 760px) {



  .emc-access-toast {



    right: 16px;



    bottom: 16px;



    left: 16px;



    width: auto;



  }



}









/* ============================================================



   ENTERPRISE ACCESS TABLE — COMPACT MANAGEMENT VIEW



   Scoped to Access & Roles only



   ============================================================ */





.emc-access-workspace .emc-table-scroll {



  margin-top: 12px;



  border-radius: 12px;



}





.emc-access-workspace .emc-table {



  min-width: 900px;



  table-layout: fixed;



}





.emc-access-workspace .emc-table th,

.emc-access-workspace .emc-table td {



  padding: 11px 14px;



}





.emc-access-workspace .emc-table th {



  background: #fbfcfe;



  font-size: 10px;



  letter-spacing: 0.065em;



}





.emc-access-workspace .emc-table th:nth-child(1) {



  width: 24%;



}





.emc-access-workspace .emc-table th:nth-child(2) {



  width: 15%;



}





.emc-access-workspace .emc-table th:nth-child(3) {



  width: 10%;



}





.emc-access-workspace .emc-table th:nth-child(4) {



  width: 22%;



}





.emc-access-workspace .emc-table th:nth-child(5) {



  width: 11%;



}





.emc-access-workspace .emc-table th:nth-child(6) {



  width: 18%;



}





.emc-access-workspace .emc-employee-identity {



  gap: 10px;



  min-width: 0;



}





.emc-access-workspace .emc-employee-avatar {



  width: 34px;



  height: 34px;



  border-radius: 9px;



  font-size: 11px;



}





.emc-access-workspace .emc-employee-name {



  font-size: 13px;



  font-weight: 800;



}





.emc-access-workspace .emc-employee-meta,

.emc-access-workspace .emc-table-secondary {



  margin-top: 2px;



  font-size: 11px;



  line-height: 1.35;



}





.emc-access-workspace .emc-table-primary {



  font-size: 13px;



  font-weight: 750;



}





.emc-access-workspace .emc-badge {



  min-height: 23px;



  padding: 4px 8px;



  font-size: 10px;



}





.emc-access-workspace .emc-access-authorization-cell {



  min-width: 0;



}





.emc-access-workspace .emc-access-authorization-cell .emc-role-list {



  gap: 4px;



  margin-top: 0;



}





.emc-access-workspace .emc-access-authorization-cell .emc-role-badge {



  padding: 4px 7px;



  font-size: 9px;



}





.emc-access-workspace .emc-access-permission-summary {



  display: flex;



  align-items: center;



  gap: 6px;



  margin-top: 6px;



}





.emc-access-workspace .emc-access-permission-count {



  display: inline-flex;



  align-items: center;



  justify-content: center;



  min-width: 22px;



  height: 20px;



  border-radius: 999px;



  padding: 0 6px;



  background: #edf1f5;



  color: #475569;



  font-size: 10px;



  font-weight: 800;



}





.emc-access-workspace .emc-access-permission-summary .emc-table-secondary {



  margin-top: 0;



}





.emc-access-workspace .emc-access-updated-cell {



  white-space: nowrap;



}





.emc-access-workspace .emc-employee-actions-cell {



  width: auto;



  white-space: nowrap;



}





.emc-access-workspace .emc-employee-actions {



  gap: 6px;



  flex-wrap: nowrap;



  justify-content: flex-start;



}





.emc-access-workspace .emc-employee-actions .emc-button {



  min-height: 30px;



  border-radius: 8px;



  padding: 6px 9px;



  font-size: 11px;



  line-height: 1.1;



}





@media (max-width: 1100px) {



  .emc-access-workspace .emc-table {



    min-width: 860px;



  }





  .emc-access-workspace .emc-employee-actions {



    flex-wrap: wrap;



  }



}









/* ============================================================



   ENTERPRISE ACCESS ROW ACTION MENU



   ZCA / ZBA interaction pattern



   ============================================================ */





.emc-access-workspace .emc-access-row-menu {



  position: relative;



  flex: 0 0 auto;



}





.emc-access-workspace .emc-access-row-menu-trigger {



  appearance: none;



  display: inline-grid;



  place-items: center;



  width: 30px;



  height: 30px;



  min-width: 30px;



  padding: 0;



  border: 1px solid var(--emc-border);



  border-radius: 8px;



  background: var(--emc-surface);



  color: var(--emc-text-muted);



  font-size: 13px;



  font-weight: 900;



  line-height: 1;



  cursor: pointer;



}





.emc-access-workspace .emc-access-row-menu-trigger:hover,

.emc-access-workspace .emc-access-row-menu-trigger[aria-expanded="true"] {



  background: #f8fafc;



  border-color: #cbd5e1;



  color: var(--emc-text);



}





.emc-access-workspace .emc-access-row-menu-trigger:focus-visible {



  outline: 3px solid rgba(79, 70, 229, 0.16);



  outline-offset: 2px;



}





.emc-access-workspace .emc-access-row-menu-panel {



  position: fixed;



  z-index: 1200;



  display: none;



  width: 190px;



  padding: 7px;



  border: 1px solid var(--emc-border);



  border-radius: 12px;



  background: var(--emc-surface);



  box-shadow:



    0 18px 45px rgba(15, 23, 42, 0.16);



}





.emc-access-workspace .emc-access-row-menu-panel[data-open="true"] {



  display: grid;



  gap: 2px;



}





.emc-access-workspace .emc-access-row-menu-item {



  appearance: none;



  width: 100%;



  min-height: 34px;



  padding: 8px 10px;



  border: 0;



  border-radius: 8px;



  background: transparent;



  color: var(--emc-text);



  font: inherit;



  font-size: 12px;



  font-weight: 700;



  line-height: 1.25;



  text-align: left;



  cursor: pointer;



}





.emc-access-workspace .emc-access-row-menu-item:hover,

.emc-access-workspace .emc-access-row-menu-item:focus-visible {



  background: #f8fafc;



}





.emc-access-workspace .emc-access-row-menu-item:focus-visible {



  outline: 2px solid rgba(79, 70, 229, 0.18);



  outline-offset: -2px;



}





.emc-access-workspace .emc-access-row-menu-item--danger {



  color: #b42318;



}





.emc-access-workspace .emc-access-row-menu-item--danger:hover,

.emc-access-workspace .emc-access-row-menu-item--danger:focus-visible {



  background: #fff1f0;



  color: #912018;



}





@media (max-width: 760px) {



  .emc-access-workspace .emc-access-row-menu-panel {



    width: min(190px, calc(100vw - 24px));



  }



}









/* ============================================================



   ENTERPRISE ACCESS SEMANTIC STATUS BADGES



   ZCA / ZBA lifecycle language



   ============================================================ */





.emc-access-workspace .emc-access-status-badge {



  --emc-access-status-rgb:

    100, 116, 139;



  display: inline-flex;



  align-items: center;



  gap: 6px;



  min-height: 24px;



  padding: 4px 9px;



  border:

    1px solid

    rgba(

      var(--emc-access-status-rgb),

      0.30

    );



  border-radius: 999px;



  background:

    rgba(

      var(--emc-access-status-rgb),

      0.10

    );



  color:

    rgb(

      var(--emc-access-status-rgb)

    );



  font-size: 10px;



  font-weight: 800;



  line-height: 1;



  white-space: nowrap;



}





.emc-access-workspace .emc-access-status-badge::before {



  width: 6px;



  height: 6px;



  flex: 0 0 auto;



  border-radius: 50%;



  background: currentColor;



  box-shadow:

    0 0 5px

    rgba(

      var(--emc-access-status-rgb),

      0.42

    );



  content: "";



}





.emc-access-workspace

.emc-access-status-badge[data-kind="active"] {



  --emc-access-status-rgb:

    22, 128, 60;



}





.emc-access-workspace

.emc-access-status-badge[data-kind="suspended"] {



  --emc-access-status-rgb:

    180, 35, 24;



}





.emc-access-workspace

.emc-access-status-badge[data-kind="inactive"] {



  --emc-access-status-rgb:

    100, 116, 139;



}









/* ============================================================



   ENTERPRISE ACCESS DESCRIPTIVE ACTION POPUP



   ============================================================ */





.emc-access-workspace .emc-access-action-popup {



  width: 290px;



  padding: 0;



  overflow: hidden;



}





.emc-access-workspace .emc-access-action-popup-header {



  padding: 13px 14px 11px;



  border-bottom:

    1px solid

    var(--emc-border-soft);



  background: #fbfcfe;



}





.emc-access-workspace .emc-access-action-popup-title {



  color: var(--emc-text);



  font-size: 12px;



  font-weight: 850;



  line-height: 1.25;



}





.emc-access-workspace .emc-access-action-popup-subtitle {



  margin-top: 3px;



  overflow: hidden;



  color: var(--emc-text-muted);



  font-size: 10px;



  font-weight: 600;



  line-height: 1.35;



  text-overflow: ellipsis;



  white-space: nowrap;



}





.emc-access-workspace .emc-access-action-popup-options {



  display: grid;



  gap: 4px;



  padding: 8px;



}





.emc-access-workspace .emc-access-action-popup-option {



  appearance: none;



  display: grid;



  grid-template-columns:

    30px

    minmax(0, 1fr);



  align-items: start;



  gap: 9px;



  width: 100%;



  padding: 10px;



  border: 0;



  border-radius: 9px;



  background: transparent;



  color: var(--emc-text);



  font: inherit;



  text-align: left;



  cursor: pointer;



}





.emc-access-workspace .emc-access-action-popup-option:hover,

.emc-access-workspace .emc-access-action-popup-option:focus-visible {



  background: #f8fafc;



}





.emc-access-workspace .emc-access-action-popup-option:focus-visible {



  outline:

    2px solid

    rgba(79, 70, 229, 0.18);



  outline-offset: -2px;



}





.emc-access-workspace .emc-access-action-popup-option-icon {



  display: grid;



  place-items: center;



  width: 30px;



  height: 30px;



  border-radius: 8px;



  background: #edf1f5;



  color: #475569;



  font-size: 16px;



  font-weight: 800;



  line-height: 1;



}





.emc-access-workspace .emc-access-action-popup-option-copy {



  display: grid;



  gap: 3px;



  min-width: 0;



}





.emc-access-workspace .emc-access-action-popup-option-copy strong {



  color: inherit;



  font-size: 12px;



  font-weight: 800;



  line-height: 1.25;



}





.emc-access-workspace .emc-access-action-popup-option-copy span {

  white-space: normal;

  overflow-wrap: anywhere;



  color: var(--emc-text-muted);



  font-size: 10px;



  font-weight: 600;



  line-height: 1.4;



}





.emc-access-workspace



.emc-access-action-popup-option--warning {







  color: #a15c07;







}







.emc-access-workspace



.emc-access-action-popup-option--warning



.emc-access-action-popup-option-icon {







  background: #fff7e8;







  color: #a15c07;







}







.emc-access-workspace



.emc-access-action-popup-option--warning:hover,



.emc-access-workspace



.emc-access-action-popup-option--warning:focus-visible {







  background: #fffaf0;







}







.emc-access-workspace



.emc-access-action-popup-option--positive {







  color: #067647;







}







.emc-access-workspace



.emc-access-action-popup-option--positive



.emc-access-action-popup-option-icon {







  background: #ecfdf3;







  color: #067647;







}







.emc-access-workspace



.emc-access-action-popup-option--positive:hover,



.emc-access-workspace



.emc-access-action-popup-option--positive:focus-visible {







  background: #f3fff8;







}











.emc-access-workspace

.emc-access-action-popup-option--danger {



  color: #b42318;



}





.emc-access-workspace

.emc-access-action-popup-option--danger

.emc-access-action-popup-option-icon {



  background: #fff1f0;



  color: #b42318;



}





.emc-access-workspace

.emc-access-action-popup-option--danger:hover,

.emc-access-workspace

.emc-access-action-popup-option--danger:focus-visible {



  background: #fff7f6;



}





@media (max-width: 760px) {



  .emc-access-workspace .emc-access-action-popup {



    width:

      min(

        290px,

        calc(100vw - 24px)

      );



  }



}



/* ============================================================

   ENTERPRISE ACCESS SELF-READONLY MODAL STATE

   ============================================================ */



.emc-access-self-readonly-notice {

  margin-top: 12px;

}



.emc-inline-notice--warning {

  border-color: #f4d79c;

  background: #fff9ed;

  color: #8a5708;

}



.emc-access-role-option:has(input:disabled),

.emc-access-permission-option:has(input:disabled) {

  cursor: default;

}



.emc-access-role-option:has(input:disabled):hover {

  border-color: var(--emc-border);

  background: var(--emc-surface);

}



.emc-access-role-option:has(input:disabled):has(input:checked) {

  border-color: #cbd5e1;

  background: #f8fafc;

  box-shadow: none;

}



.emc-access-permission-option:has(input:disabled):hover {

  background: var(--emc-surface);

}



.emc-access-permission-option:has(input:disabled):has(input:checked) {

  background: #f8fafc;

}



.emc-access-role-option input[type="checkbox"]:disabled,

.emc-access-permission-option input[type="checkbox"]:disabled {

  cursor: default;

  opacity: 0.72;

}



.emc-access-role-option:has(input:disabled) .emc-access-role-copy,

.emc-access-permission-option:has(input:disabled) .emc-access-permission-copy {

  opacity: 0.88;

}



/* ============================================================

   ENTERPRISE ACCESS LIFECYCLE WARNING CONFIRMATION

   ============================================================ */



.emc-access-lifecycle-notice {

  display: grid;

  grid-template-columns: 38px minmax(0, 1fr);

  align-items: start;

  gap: 12px;

  margin-top: 2px;

  border: 1px solid;

  border-radius: 13px;

  padding: 14px 15px;

}



.emc-access-lifecycle-notice-icon {

  display: grid;

  place-items: center;

  width: 38px;

  height: 38px;

  border-radius: 10px;

  font-size: 18px;

  font-weight: 900;

  line-height: 1;

}



.emc-access-lifecycle-notice-copy {

  display: grid;

  gap: 4px;

  min-width: 0;

}



.emc-access-lifecycle-notice-copy strong {

  font-size: 13px;

  font-weight: 850;

  line-height: 1.3;

}



.emc-access-lifecycle-notice-copy span {

  font-size: 11px;

  font-weight: 600;

  line-height: 1.55;

}



.emc-access-lifecycle-notice[data-tone="warning"] {

  border-color: #f1ce86;

  background: #fff8e8;

  color: #805207;

}



.emc-access-lifecycle-notice[data-tone="warning"]

.emc-access-lifecycle-notice-icon {

  background: #ffedbd;

  color: #8f5a00;

}



.emc-access-lifecycle-notice[data-tone="positive"] {

  border-color: #a9dfbf;

  background: #f0fbf5;

  color: #08603d;

}



.emc-access-lifecycle-notice[data-tone="positive"]

.emc-access-lifecycle-notice-icon {

  background: #d9f5e5;

  color: #067647;

}



.emc-access-lifecycle-notice[data-tone="danger"] {

  border-color: #f2b8b5;

  background: #fff3f2;

  color: #9d2720;

}



.emc-access-lifecycle-notice[data-tone="danger"]

.emc-access-lifecycle-notice-icon {

  background: #ffe1df;

  color: #b42318;

}



#emc-access-lifecycle-modal #emc-access-lifecycle-submit[data-tone="warning"] {

  border-color: #b86e08;

  background: #b86e08;

  color: #ffffff;

}



#emc-access-lifecycle-modal #emc-access-lifecycle-submit[data-tone="positive"] {

  border-color: #067647;

  background: #067647;

  color: #ffffff;

}



#emc-access-lifecycle-modal #emc-access-lifecycle-submit[data-tone="danger"] {

  border-color: #b42318;

  background: #b42318;

  color: #ffffff;

}




/* ============================================================



   EMC ROLES & PERMISSIONS PAGE



   ============================================================ */





.emc-roles-summary {

  margin-bottom: 20px;

}





.emc-roles-workspace {

  display: grid;

  grid-template-columns:

    minmax(280px, 0.82fr)

    minmax(0, 2fr);

  gap: 20px;

  align-items: start;

}





.emc-roles-sidebar-card {

  position: sticky;

  top:

    calc(var(--emc-header-height) + 20px);

}





.emc-roles-toolbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 16px;

}





.emc-roles-search,

.emc-role-permission-search {

  width: 100%;

  min-height: 42px;

  border:

    1px solid

    var(--emc-border);

  border-radius: 10px;

  padding: 9px 11px;

  background:

    var(--emc-surface);

  color:

    var(--emc-text);

  outline: none;

}





.emc-roles-search:focus,

.emc-role-permission-search:focus {

  border-color: #94a3b8;

  box-shadow:

    0 0 0 3px

    rgba(148, 163, 184, 0.16);

}





.emc-role-selector-list {

  display: grid;

  gap: 8px;

}





.emc-role-selector {

  appearance: none;

  width: 100%;

  display: grid;

  grid-template-columns:

    minmax(0, 1fr)

    auto;

  gap: 10px;

  align-items: start;

  border:

    1px solid

    var(--emc-border);

  border-radius: 12px;

  padding: 13px 14px;

  background:

    var(--emc-surface);

  color: inherit;

  text-align: left;

  cursor: pointer;

}





.emc-role-selector:hover {

  border-color: #cbd5e1;

  background: #f8fafc;

}





.emc-role-selector.is-active {

  border-color: #a5b4fc;

  background: #f7f7ff;

  box-shadow:

    0 0 0 2px

    rgba(99, 102, 241, 0.08);

}





.emc-role-selector:focus-visible {

  outline:

    3px solid

    rgba(79, 70, 229, 0.14);

  outline-offset: 2px;

}





.emc-role-selector-copy {

  min-width: 0;

}





.emc-role-selector-title {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 6px;

  color:

    var(--emc-text);

  font-size: 13px;

  font-weight: 800;

}





.emc-role-selector-description {

  display: -webkit-box;

  margin-top: 5px;

  overflow: hidden;

  color:

    var(--emc-text-muted);

  font-size: 11px;

  line-height: 1.45;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

}





.emc-role-selector-count {

  min-width: 34px;

  border-radius: 999px;

  padding: 5px 8px;

  background: #f1f5f9;

  color: #475569;

  font-size: 10px;

  font-weight: 850;

  text-align: center;

}





.emc-role-editor-empty {

  padding: 70px 24px;

  color:

    var(--emc-text-muted);

  text-align: center;

}





.emc-role-editor-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 20px;

  padding-bottom: 20px;

  border-bottom:

    1px solid

    var(--emc-border-soft);

}





.emc-role-editor-heading {

  min-width: 0;

}





.emc-role-editor-heading h3 {

  margin: 0;

  color:

    var(--emc-text);

  font-size: 22px;

  line-height: 1.25;

  letter-spacing: -0.025em;

}





.emc-role-editor-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 9px;

}





.emc-role-editor-actions {

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 8px;

}





.emc-button-danger {

  border-color: #fecaca;

  background: #fff5f5;

  color: #b42318;

}





.emc-button-danger:hover {

  background: #feecec;

}





.emc-button-positive {

  border-color: #bbf7d0;

  background: #f0fdf4;

  color: #16803c;

}





.emc-button-positive:hover {

  background: #e8f9ed;

}





.emc-role-details-grid {

  display: grid;

  grid-template-columns:

    minmax(0, 1fr)

    minmax(0, 1fr)

    150px;

  gap: 14px;

  margin-top: 22px;

}





.emc-role-details-grid textarea,

.emc-role-create-grid textarea {

  width: 100%;

  min-height: 90px;

  resize: vertical;

  border:

    1px solid

    var(--emc-border);

  border-radius: 10px;

  padding: 10px 11px;

  background:

    var(--emc-surface);

  color:

    var(--emc-text);

  font: inherit;

  outline: none;

}





.emc-role-details-grid textarea:focus,

.emc-role-create-grid textarea:focus {

  border-color: #94a3b8;

  box-shadow:

    0 0 0 3px

    rgba(148, 163, 184, 0.16);

}





.emc-role-key-display {

  display: flex;

  align-items: center;

  min-height: 42px;

  border:

    1px solid

    var(--emc-border);

  border-radius: 10px;

  padding: 9px 11px;

  background: #f8fafc;

  color: #475569;

  font-family:

    ui-monospace,

    SFMono-Regular,

    Menlo,

    Monaco,

    Consolas,

    monospace;

  font-size: 12px;

}





.emc-role-permissions {

  margin-top: 28px;

  padding-top: 24px;

  border-top:

    1px solid

    var(--emc-border-soft);

}





.emc-role-permissions-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 18px;

  margin-bottom: 16px;

}





.emc-role-permissions-header h4 {

  margin: 0;

  color:

    var(--emc-text);

  font-size: 16px;

}





.emc-role-permissions-header p {

  margin: 5px 0 0;

  color:

    var(--emc-text-muted);

  font-size: 12px;

  line-height: 1.5;

}





.emc-role-permission-search {

  width: min(320px, 100%);

}





.emc-role-permission-groups {

  display: grid;

  gap: 14px;

}





.emc-role-permission-group {

  border:

    1px solid

    var(--emc-border);

  border-radius: 13px;

  overflow: hidden;

  background:

    var(--emc-surface);

}





.emc-role-permission-group-header {

  padding: 13px 15px;

  border-bottom:

    1px solid

    var(--emc-border-soft);

  background: #f8fafc;

}





.emc-role-permission-group-header strong {

  display: block;

  color:

    var(--emc-text);

  font-size: 13px;

}





.emc-role-permission-group-header span {

  display: block;

  margin-top: 3px;

  color:

    var(--emc-text-muted);

  font-size: 11px;

  line-height: 1.45;

}





.emc-role-permission-list {

  display: grid;

  grid-template-columns:

    repeat(2, minmax(0, 1fr));

}





.emc-role-permission-option {

  display: grid;

  grid-template-columns:

    auto minmax(0, 1fr);

  gap: 10px;

  align-items: start;

  padding: 12px 15px;

  border-bottom:

    1px solid

    var(--emc-border-soft);

}





.emc-role-permission-option:nth-child(odd) {

  border-right:

    1px solid

    var(--emc-border-soft);

}





.emc-role-permission-option input {

  margin-top: 2px;

}





.emc-role-permission-copy {

  min-width: 0;

}





.emc-role-permission-label {

  display: block;

  color:

    var(--emc-text);

  font-size: 12px;

  font-weight: 750;

}





.emc-role-permission-key {

  display: block;

  margin-top: 3px;

  overflow-wrap: anywhere;

  color:

    var(--emc-text-muted);

  font-family:

    ui-monospace,

    SFMono-Regular,

    Menlo,

    Monaco,

    Consolas,

    monospace;

  font-size: 10px;

}





.emc-role-history {

  margin-top: 20px;

}





.emc-role-history-list {

  display: grid;

  gap: 9px;

  margin-top: 14px;

}





.emc-role-history-item {

  display: grid;

  grid-template-columns:

    auto minmax(0, 1fr);

  gap: 12px;

  align-items: start;

  border:

    1px solid

    var(--emc-border-soft);

  border-radius: 11px;

  padding: 12px 13px;

  background: #fbfcfd;

}





.emc-role-history-marker {

  width: 9px;

  height: 9px;

  margin-top: 5px;

  border-radius: 50%;

  background: #6366f1;

}





.emc-role-history-title {

  color:

    var(--emc-text);

  font-size: 12px;

  font-weight: 800;

}





.emc-role-history-meta {

  margin-top: 3px;

  color:

    var(--emc-text-muted);

  font-size: 11px;

  line-height: 1.45;

}







/* ============================================================

   EMC DETAILED ROLE HISTORY

   ============================================================ */



.emc-role-history-content {

  min-width: 0;

  width: 100%;

}



.emc-role-history-summary {

  margin-top: 6px;

  color: var(--emc-text);

  font-size: 12px;

  line-height: 1.6;

  overflow-wrap: anywhere;

}



.emc-role-history-details {

  margin-top: 12px;

  border-top: 1px solid var(--emc-border-soft);

  padding-top: 10px;

}



.emc-role-history-details > summary {

  cursor: pointer;

  color: var(--emc-accent);

  font-size: 12px;

  font-weight: 700;

  line-height: 1.5;

}



.emc-role-history-details > summary:focus-visible {

  outline: 2px solid var(--emc-accent);

  outline-offset: 4px;

  border-radius: 4px;

}



.emc-role-history-details-body {

  display: grid;

  gap: 14px;

  margin-top: 14px;

  min-width: 0;

}



.emc-role-history-change {

  display: grid;

  gap: 8px;

  border: 1px solid var(--emc-border-soft);

  border-radius: 9px;

  padding: 12px;

  background: var(--emc-surface);

  min-width: 0;

}



.emc-role-history-change > strong {

  color: var(--emc-text);

  font-size: 12px;

}



.emc-role-history-change > p {

  margin: 4px 0 0;

  color: var(--emc-text-muted);

  font-size: 11px;

  font-weight: 700;

}



.emc-role-history-comparison {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 10px;

}



.emc-role-history-comparison > div {

  display: grid;

  gap: 6px;

  min-width: 0;

  padding: 10px;

  border-radius: 7px;

  border: 1px solid var(--emc-border-soft);

  background: #fbfcfd;

  font-size: 12px;

  line-height: 1.6;

  overflow-wrap: anywhere;

  white-space: pre-wrap;

}



.emc-role-history-comparison > div > span {

  color: var(--emc-text-muted);

  font-size: 10px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 0.04em;

}



.emc-role-history-permissions {

  display: grid;

  gap: 6px;

  margin: 0;

  padding-left: 18px;

}



.emc-role-history-permissions li {

  line-height: 1.6;

  font-size: 12px;

  overflow-wrap: anywhere;

}



.emc-role-history-permissions strong {

  margin-right: 7px;

}



.emc-role-history-permissions code {

  color: var(--emc-text-muted);

  font-size: 11px;

  overflow-wrap: anywhere;

}



.emc-role-history-identifiers {

  display: grid;

  gap: 5px;

  padding-top: 10px;

  border-top: 1px solid var(--emc-border-soft);

  color: var(--emc-text-muted);

  font-size: 11px;

  line-height: 1.6;

  overflow-wrap: anywhere;

}



@media (max-width: 640px) {

  .emc-role-history-comparison {

    grid-template-columns: minmax(0, 1fr);

  }



  .emc-role-history-item {

    gap: 9px;

    padding: 11px;

  }

}





/* ============================================================

   EMC COMPACT ROLE PERMISSIONS AND AUDIT IDENTITY

   ============================================================ */



.emc-role-permission-group > summary {

  display: block;

  cursor: pointer;

  list-style: none;

}



.emc-role-permission-group > summary::-webkit-details-marker {

  display: none;

}



.emc-role-permission-group > summary::before {

  content: "▸";

  display: inline-block;

  margin-right: 9px;

  color: var(--emc-accent);

  font-weight: 800;

  transition: transform 0.15s ease;

}



.emc-role-permission-group[open] > summary::before {

  transform: rotate(90deg);

}



.emc-role-permission-group > summary:focus-visible {

  outline: 2px solid var(--emc-accent);

  outline-offset: -3px;

}



.emc-role-permission-group:not([open]) > summary {

  border-bottom: 0;

}



.emc-role-permission-group > summary:hover {

  background: #eef3fa;

}



.emc-role-permission-count {

  display: inline-block;

  margin-top: 7px;

  padding: 4px 9px;

  border-radius: 999px;

  background: var(--emc-surface);

  border: 1px solid var(--emc-border);

  color: var(--emc-text);

  font-size: 11px;

  font-weight: 700;

}



.emc-role-history-affected-role {

  display: grid;

  gap: 3px;

  margin-bottom: 10px;

  padding-bottom: 10px;

  border-bottom: 1px solid var(--emc-border-soft);

  min-width: 0;

}



.emc-role-history-role-caption {

  color: var(--emc-text-muted);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.05em;

  text-transform: uppercase;

}



.emc-role-history-affected-role > strong {

  color: var(--emc-text);

  font-size: 13px;

  overflow-wrap: anywhere;

}



.emc-role-history-affected-role > code {

  width: fit-content;

  max-width: 100%;

  color: var(--emc-text-muted);

  font-size: 11px;

  overflow-wrap: anywhere;

}



.emc-role-history-role-note {

  font-size: 11px;

  color: var(--emc-text-muted);

  line-height: 1.5;

}



@media (prefers-reduced-motion: reduce) {

  .emc-role-permission-group > summary::before {

    transition: none;

  }

}



.emc-role-create-grid {

  display: grid;

  grid-template-columns:

    minmax(0, 1fr)

    minmax(0, 1fr);

  gap: 14px;

}





.emc-role-create-grid .emc-field-full {

  grid-column: 1 / -1;

}





.emc-role-modal-permissions {

  margin-top: 20px;

}





.emc-role-modal-permission-list {

  display: grid;

  grid-template-columns:

    repeat(2, minmax(0, 1fr));

  gap: 8px;

  margin-top: 12px;

}





.emc-role-modal-permission {

  display: grid;

  grid-template-columns:

    auto minmax(0, 1fr);

  gap: 9px;

  align-items: start;

  border:

    1px solid

    var(--emc-border-soft);

  border-radius: 10px;

  padding: 10px;

  background: #fbfcfd;

}





.emc-role-modal-permission strong {

  display: block;

  color:

    var(--emc-text);

  font-size: 11px;

}





.emc-role-modal-permission span {

  display: block;

  margin-top: 3px;

  overflow-wrap: anywhere;

  color:

    var(--emc-text-muted);

  font-family:

    ui-monospace,

    SFMono-Regular,

    Menlo,

    Monaco,

    Consolas,

    monospace;

  font-size: 9px;

}





.emc-role-lifecycle-warning {

  margin-top: 16px;

}





.emc-role-toast {

  position: fixed;

  right: 24px;

  bottom: 24px;

  z-index: 140;

  width: min(380px, calc(100vw - 48px));

  border:

    1px solid

    var(--emc-border);

  border-radius: 13px;

  padding: 14px 16px;

  background:

    var(--emc-surface);

  box-shadow:

    0 18px 48px

    rgba(15, 23, 42, 0.16);

}





.emc-role-toast[hidden] {

  display: none !important;

}





.emc-role-toast strong {

  display: block;

  color:

    var(--emc-text);

  font-size: 12px;

}





.emc-role-toast span {

  display: block;

  margin-top: 4px;

  color:

    var(--emc-text-muted);

  font-size: 11px;

  line-height: 1.45;

}





@media (max-width: 1050px) {



  .emc-roles-workspace {

    grid-template-columns: 1fr;

  }



  .emc-roles-sidebar-card {

    position: static;

  }



}





@media (max-width: 760px) {



  .emc-role-editor-header,

  .emc-role-permissions-header {

    align-items: stretch;

    flex-direction: column;

  }



  .emc-role-editor-actions {

    justify-content: stretch;

  }



  .emc-role-editor-actions .emc-button {

    flex: 1;

  }



  .emc-role-details-grid,

  .emc-role-create-grid,

  .emc-role-permission-list,

  .emc-role-modal-permission-list {

    grid-template-columns: 1fr;

  }



  .emc-role-permission-option:nth-child(odd) {

    border-right: 0;

  }



}

/* ============================================================

   EMC GLOBAL ROLE HISTORY TABS AND FILTERS

   ============================================================ */



.emc-role-view-tabs {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin: 0 0 18px;

  padding: 5px;

  border: 1px solid var(--emc-border);

  border-radius: 12px;

  background: var(--emc-surface);

}



.emc-role-view-tab {

  appearance: none;

  border: 1px solid transparent;

  border-radius: 8px;

  background: transparent;

  color: var(--emc-text-muted);

  padding: 11px 16px;

  min-height: 42px;

  font: inherit;

  font-weight: 700;

  cursor: pointer;

  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;

}



.emc-role-view-tab:hover {

  color: var(--emc-text);

  background: rgba(127, 127, 127, 0.08);

}



.emc-role-view-tab.is-active {

  color: var(--emc-text);

  background: var(--emc-surface-raised, #fff);

  border-color: var(--emc-border);

  box-shadow: 0 1px 2px rgba(20, 35, 55, 0.07);

}



.emc-role-view-tab:focus-visible,

.emc-global-history-pagination button:focus-visible {

  outline: 2px solid var(--emc-accent);

  outline-offset: 2px;

}



.emc-global-history-filters {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 14px;

  align-items: end;

  margin: 20px 0 14px;

  padding: 16px;

  border: 1px solid var(--emc-border);

  border-radius: 12px;

  background: var(--emc-surface);

}



.emc-global-history-filters .emc-field {

  min-width: 0;

  margin: 0;

}



.emc-global-history-filters input,

.emc-global-history-filters select {

  box-sizing: border-box;

  width: 100%;

  max-width: 100%;

}



.emc-global-history-filter-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  align-items: center;

}



.emc-global-history-pagination {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  align-items: center;

  justify-content: center;

  margin-top: 20px;

  padding-top: 16px;

  border-top: 1px solid var(--emc-border);

}



.emc-global-history-pagination button:disabled {

  opacity: 0.5;

  cursor: not-allowed;

}



#emc-global-history-page {

  color: var(--emc-text-muted);

  font-size: 12px;

  font-weight: 700;

  text-align: center;

}



#emc-role-global-history-view[hidden],

#emc-role-manage-view[hidden] {

  display: none !important;

}



@media (max-width: 900px) {

  .emc-global-history-filters {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



@media (max-width: 560px) {

  .emc-role-view-tabs {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .emc-role-view-tab {

    padding: 10px 8px;

  }



  .emc-global-history-filters {

    grid-template-columns: minmax(0, 1fr);

    padding: 12px;

  }



  .emc-global-history-filter-actions {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .emc-global-history-filter-actions .emc-button {

    width: 100%;

  }

}



@media (prefers-reduced-motion: reduce) {

  .emc-role-view-tab {

    transition: none;

  }

}

/* ============================================================

   EMC ZOOPEM COLOURFUL ROLES AND HISTORY ICONS

   ============================================================ */

.emc-page-title,.emc-heading-with-icon{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.emc-page-title-icon,.emc-heading-icon{width:40px;height:40px;border-radius:11px}

.emc-page-title-icon svg,.emc-heading-icon svg{width:21px;height:21px}

.emc-stat-heading{display:flex;align-items:center;gap:10px;min-width:0}

.emc-stat-icon{width:36px;height:36px;border-radius:10px}

.emc-stat-icon svg{width:20px;height:20px}

.emc-stat-label{min-width:0}

.emc-role-view-tab{display:inline-flex;align-items:center;justify-content:center;gap:9px}

.emc-view-tab-icon{width:28px;height:28px;border-radius:8px}

.emc-view-tab-icon svg{width:17px;height:17px}

#emc-role-manage-tab{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}

#emc-role-manage-tab:hover{background:#dbeafe;border-color:#93c5fd}

#emc-role-manage-tab.is-active{color:#1e40af;background:#dbeafe;border-color:#60a5fa;box-shadow:0 1px 3px rgba(37,99,235,.14)}

#emc-role-global-history-tab{color:#6d28d9;background:#f5f3ff;border-color:#ddd6fe}

#emc-role-global-history-tab:hover{background:#ede9fe;border-color:#c4b5fd}

#emc-role-global-history-tab.is-active{color:#5b21b6;background:#ede9fe;border-color:#a78bfa;box-shadow:0 1px 3px rgba(109,40,217,.14)}

.emc-role-selector-icon{flex:0 0 38px;width:38px;height:38px;border-radius:10px}

.emc-role-selector-icon svg{width:21px;height:21px}

.emc-global-history-filters .emc-filter-label{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-weight:700}

.emc-filter-icon{width:27px;height:27px;border-radius:8px}

.emc-filter-icon svg{width:15px;height:15px}

.emc-inline-action-icon{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:7px;vertical-align:middle}

.emc-inline-action-icon svg{width:18px;height:18px}

.emc-inline-action-icon--blue{color:#2563eb}

.emc-inline-action-icon--rose{color:#e11d48}

.emc-inline-action-icon--slate{color:#475569}

.emc-inline-action-icon--green{color:#16803c}

.emc-inline-action-icon--amber{color:#d97706}

.emc-role-history-title{display:flex;align-items:center;gap:10px}

.emc-history-event-icon{flex:0 0 32px;width:32px;height:32px;border-radius:9px}

.emc-history-event-icon svg{width:18px;height:18px}

.emc-global-history-pagination button{display:inline-flex;align-items:center;justify-content:center}

.emc-global-history-pagination .emc-inline-action-icon{margin-right:4px}

.emc-role-view-tab:focus-visible,.emc-global-history-pagination button:focus-visible{outline:2px solid var(--emc-accent,#4f46e5);outline-offset:2px}

@media(max-width:560px){.emc-page-title-icon,.emc-heading-icon{width:34px;height:34px}.emc-stat-icon{width:31px;height:31px}.emc-role-view-tab{gap:6px;padding:9px 7px}.emc-view-tab-icon{width:24px;height:24px}}

@media(prefers-reduced-motion:reduce){.emc-role-view-tab{transition:none}}

/* ============================================================

   EMC ROLE CARD THREE-COLUMN ICON ALIGNMENT FIX

   ============================================================ */



.emc-role-selector {

  grid-template-columns: 38px minmax(0, 1fr) auto;

  align-items: start;

  column-gap: 10px;

}



.emc-role-selector > .emc-role-selector-icon {

  grid-column: 1;

  grid-row: 1;

  justify-self: center;

  align-self: start;

  margin-top: 1px;

}



.emc-role-selector > .emc-role-selector-copy {

  grid-column: 2;

  grid-row: 1;

  min-width: 0;

  width: 100%;

}



.emc-role-selector > .emc-role-selector-count {

  grid-column: 3;

  grid-row: 1;

  align-self: start;

  justify-self: end;

}



.emc-role-selector-title,

.emc-role-selector-description {

  min-width: 0;

  overflow-wrap: anywhere;

}



@media (max-width: 420px) {

  .emc-role-selector {

    grid-template-columns: 32px minmax(0, 1fr);

    column-gap: 8px;

  }



  .emc-role-selector > .emc-role-selector-icon {

    grid-column: 1;

    grid-row: 1;

    width: 32px;

    height: 32px;

  }



  .emc-role-selector > .emc-role-selector-copy {

    grid-column: 2;

    grid-row: 1;

  }



  .emc-role-selector > .emc-role-selector-count {

    grid-column: 2;

    grid-row: 2;

    justify-self: start;

    margin-top: 8px;

  }

}




/* ============================================================

   EMC AUDIT CARD V2

   Shared Selected Role and Global Role History presentation

   ============================================================ */



.emc-audit-card-v2 {

  display: block;

  padding: 20px 22px;

  border: 1px solid #dbe3ef;

  border-left: 4px solid #6366f1;

  border-radius: 14px;

  background: var(--emc-surface-raised, #fff);

  box-shadow: 0 3px 12px rgba(30, 41, 59, .045);

}



.emc-audit-card-v2 .emc-role-history-content {

  width: 100%;

  min-width: 0;

}



.emc-audit-card-v2 .emc-role-history-affected-role {

  gap: 6px;

  margin-bottom: 16px;

  padding-bottom: 16px;

  border-bottom: 1px solid #e2e8f0;

}



.emc-audit-card-v2 .emc-role-history-role-caption {

  color: #6d28d9;

  font-size: 11px;

  font-weight: 850;

  letter-spacing: .075em;

  text-transform: uppercase;

}



.emc-audit-card-v2 .emc-role-history-affected-role > strong {

  color: #4c1d95;

  font-size: 19px;

  font-weight: 800;

  line-height: 1.35;

}



.emc-audit-card-v2 .emc-role-history-affected-role > code {

  font-size: 11px;

  padding: 4px 8px;

  border-radius: 6px;

  background: #f5f3ff;

  color: #6d28d9;

}



.emc-audit-action {

  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 16px;

  padding: 11px 13px;

  border: 1px solid #c7d2fe;

  border-radius: 10px;

  background: #eef2ff;

  color: #3730a3;

}



.emc-audit-action > div {

  display: grid;

  gap: 3px;

  min-width: 0;

}



.emc-audit-action strong {

  font-size: 14px;

  font-weight: 800;

}



.emc-audit-action--role_created,

.emc-audit-action--role_reactivated {

  background: #ecfdf5;

  border-color: #a7f3d0;

  color: #065f46;

}



.emc-audit-action--role_deactivated {

  background: #fff1f2;

  border-color: #fecdd3;

  color: #9f1239;

}



.emc-audit-action--role_metadata_changed {

  background: #eff6ff;

  border-color: #bfdbfe;

  color: #1d4ed8;

}



.emc-audit-action--role_seeded {

  background: #ecfeff;

  border-color: #a5f3fc;

  color: #155e75;

}



.emc-audit-info-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

  margin-bottom: 15px;

}



.emc-audit-info-field {

  display: grid;

  align-content: start;

  gap: 5px;

  min-width: 0;

  padding: 13px 15px;

  border: 1px solid #e2e8f0;

  border-radius: 10px;

  background: #f8fafc;

}



.emc-audit-field-label {

  display: block;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .055em;

  text-transform: uppercase;

  color: #475569;

}



.emc-audit-info-field > strong {

  font-size: 14px;

  font-weight: 800;

  color: #0f172a;

  overflow-wrap: anywhere;

}



.emc-audit-employee-number {

  width: fit-content;

  padding: 3px 8px;

  border-radius: 6px;

  background: #e0e7ff;

  color: #3730a3;

  font-size: 12px;

  font-weight: 800;

}



.emc-audit-identity-note {

  font-size: 11px;

  line-height: 1.5;

  color: #92400e;

  overflow-wrap: anywhere;

}



.emc-audit-card-v2 .emc-role-history-summary {

  margin: 12px 0;

  font-size: 13px;

  line-height: 1.65;

  font-weight: 600;

}



.emc-audit-permission-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;

  margin: 14px 0;

}



.emc-audit-permission-section {

  min-width: 0;

  padding: 14px;

  border: 1px solid;

  border-radius: 11px;

}



.emc-audit-permission-section--added {

  background: #f0fdf4;

  border-color: #bbf7d0;

  color: #166534;

}



.emc-audit-permission-section--removed {

  background: #fff1f2;

  border-color: #fecdd3;

  color: #9f1239;

}



.emc-audit-permission-section--initial {

  margin: 14px 0;

  background: #eff6ff;

  border-color: #bfdbfe;

  color: #1d4ed8;

}



.emc-audit-permission-heading {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 11px;

}



.emc-audit-permission-heading strong {

  font-size: 13px;

  font-weight: 800;

}



.emc-audit-permission-count {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 25px;

  padding: 3px 8px;

  border: 1px solid currentColor;

  border-radius: 999px;

  font-size: 11px;

  font-weight: 800;

}



.emc-audit-permission-chips {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

}



.emc-audit-permission-chip {

  display: inline-block;

  max-width: 100%;

  padding: 6px 9px;

  border: 1px solid currentColor;

  border-radius: 7px;

  background: rgba(255,255,255,.78);

  color: inherit;

  font-size: 12px;

  font-weight: 700;

  line-height: 1.4;

  overflow-wrap: anywhere;

}



.emc-audit-permission-empty {

  font-size: 12px;

  font-weight: 600;

}



.emc-audit-source {

  margin-top: 12px;

  color: var(--emc-text-muted);

  font-size: 11px;

  overflow-wrap: anywhere;

}



.emc-audit-source strong {

  font-weight: 800;

}



.emc-audit-card-v2 .emc-role-history-details {

  margin-top: 15px;

  padding-top: 13px;

}



.emc-audit-card-v2 .emc-role-history-details > summary {

  font-size: 13px;

  font-weight: 800;

}



@media (max-width: 640px) {

  .emc-audit-card-v2 {

    padding: 15px;

  }



  .emc-audit-info-grid,

  .emc-audit-permission-grid {

    grid-template-columns: minmax(0, 1fr);

  }



  .emc-audit-card-v2 .emc-role-history-affected-role > strong {

    font-size: 17px;

  }

}



@media (prefers-reduced-motion: reduce) {

  .emc-audit-card-v2 * {

    scroll-behavior: auto;

  }

}