/* ============================================================
   EPES — TailAdmin-style design system
   Primary: Teal (#008080)  ·  Secondary: Orange (#f97316)
   Status colors are semantic (green / amber / red / blue).
   Restyles the existing markup; no PHP changes required.
   ============================================================ */

:root {
  /* brand */
  --primary-50:  #e6f5f4;
  --primary-100: #c5eae8;
  --primary-500: #008080;
  --primary-600: #006a6a;
  --primary-700: #005757;
  --primary-900: #134e4a;
  --primary-950: #042f2e;
  --secondary-50:  #fff4ec;
  --secondary-100: #ffe4cc;
  --secondary-500: #f97316;
  --secondary-600: #ea580c;

  /* surfaces (TailAdmin light) */
  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --surface-raised: #ffffff;
  --ink: #1c2434;
  --muted: #64748b;
  --muted-2: #8a99af;
  --line: #e2e8f0;
  --line-soft: #eef2f6;

  /* semantic status */
  --good: #219653;   --good-bg: #e6f6ee;
  --warn: #b45309;   --warn-bg: #fdf1e0;
  --danger: #d34053; --danger-bg: #fbe6e9;
  --info: #2079c8;   --info-bg: #e7f2fc;

  /* sidebar — dark in both themes (TailAdmin signature) */
  --rail-bg: #1a222c;
  --rail-text: #dee4ee;
  --rail-muted: #8a99af;
  --rail-hover: #313d4a;
  --rail-active-bg: rgba(0, 128, 128, .22);
  --rail-active-text: #5eead4;

  --radius: 8px;
  --radius-sm: 8px;
  --shadow: 0 8px 13px -3px rgba(16, 24, 40, .07);
  --shadow-tight: 0 1px 2px rgba(16, 24, 40, .05);
}

/* KPI library workbench */
.kpi-workbench-tabs{display:flex;align-items:center;gap:4px;margin:18px 0 14px;padding:5px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-tight)}
.kpi-workbench-tabs button{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:700;cursor:pointer}
.kpi-workbench-tabs button:hover{background:var(--surface-soft);color:var(--ink)}
.kpi-workbench-tabs button.active{background:var(--primary-500);color:#fff;box-shadow:0 5px 14px rgba(0,128,128,.18)}
.kpi-workbench-tabs button b{min-width:22px;height:22px;display:inline-grid;place-items:center;padding:0 6px;background:color-mix(in srgb,currentColor 12%,transparent);font-size:11px}
.kpi-admin-panel{margin-top:0}
.kpi-admin-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.kpi-admin-panel>header>div{min-width:0}.kpi-admin-panel>header>.btn{flex:0 0 auto}
.vh-actions [data-position-add][hidden],[data-kpi-workbench-panel][hidden]{display:none!important}
.kpi-master-editor{margin:0 20px 20px;padding:20px;border:1px solid color-mix(in srgb,var(--primary-500) 28%,var(--line));background:color-mix(in srgb,var(--primary-500) 5%,var(--surface))}
.admin-form-grid .span-2{grid-column:span 2}
.kpi-formula-preview{padding:11px 13px;border:1px dashed var(--line);background:var(--surface-soft)}
.kpi-formula-preview>span{display:block;margin-bottom:4px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase}
.kpi-formula-preview p{margin:0;line-height:1.45}
.source-create-row{display:grid;grid-template-columns:minmax(140px,.65fr) minmax(240px,1.4fr) auto auto;align-items:end;gap:12px;padding:0 20px 20px}
.source-create-row>label:not(.check-field){display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:700}
.compact-check{min-height:38px;margin:0;justify-content:center}
.bulk-position-picker{display:grid;grid-template-columns:minmax(320px,1.25fr) minmax(260px,.75fr);gap:18px;padding:0 20px 20px}
.bulk-position-picker>label{display:grid;gap:7px;color:var(--muted);font-size:12px;font-weight:700}
.bulk-position-picker select{min-height:190px;padding:6px}
.bulk-position-picker option{padding:7px 9px}
.bulk-safeguard{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid color-mix(in srgb,var(--primary-500) 25%,var(--line));background:color-mix(in srgb,var(--primary-500) 6%,var(--surface))}
.bulk-safeguard>.material-symbols-rounded{color:var(--primary-500);font-size:28px}
.bulk-safeguard span{display:grid;gap:5px}.bulk-safeguard small{color:var(--muted);line-height:1.5}
.bulk-builder-footer{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px)}
.bulk-builder-footer>span{font-weight:800;color:var(--muted)}
.kpi-admin-panel .epes-data-table td{vertical-align:middle}

@media(max-width:900px){.kpi-workbench-tabs{overflow:auto;justify-content:flex-start}.kpi-workbench-tabs button{white-space:nowrap}.source-create-row,.bulk-position-picker{grid-template-columns:1fr}.admin-form-grid .span-2{grid-column:span 1}}

/* EWA Values respondent selection workbenches */
.grid-number { width: 74px; min-width: 64px; text-align: center; }
.small-value { font-size: 18px !important; line-height: 1.25; }
.check-line { display: flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 44px; }
.check-line input { width: 18px; height: 18px; accent-color: var(--primary, #087f79); }
.stat-cards.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
@media (max-width: 760px) { .stat-cards.compact { grid-template-columns: 1fr; } }

button:disabled,
.btn[disabled],
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: .5;
  filter: saturate(.35);
  box-shadow: none;
}

button:disabled:hover,
.btn[disabled]:hover {
  transform: none;
  box-shadow: none;
}

/* Enterprise workflow surfaces */
.block-muted {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.wrap-cell {
  min-width: 220px;
  max-width: 380px;
  white-space: normal !important;
  line-height: 1.5;
}

.workflow-focus {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(420px, 1.5fr) minmax(230px, .8fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-inline-start: 1px solid var(--primary-500);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-tight);
}

.workflow-focus-copy {
  align-self: center;
}

.workflow-focus-copy > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-700);
  font-size: 12px;
  font-weight: 700;
}

.workflow-focus-copy h2 {
  margin: 6px 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
}

.workflow-focus-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.workflow-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.workflow-metric {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.workflow-metric > .material-symbols-rounded {
  color: var(--info);
  font-size: 22px;
}

.workflow-metric.good > .material-symbols-rounded { color: var(--good); }
.workflow-metric.warn > .material-symbols-rounded { color: var(--warn); }
.workflow-metric.bad > .material-symbols-rounded { color: var(--danger); }
.workflow-metric.teal > .material-symbols-rounded { color: var(--primary-600); }

.workflow-metric div {
  display: grid;
  min-width: 0;
}

.workflow-metric strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

.workflow-metric span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.workflow-actions {
  display: grid;
  align-content: start;
  gap: 6px;
}

.workflow-action {
  display: grid;
  grid-template-columns: 22px 1fr 18px;
  gap: 8px;
  align-items: center;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.workflow-action:hover {
  border-color: var(--primary-500);
  color: var(--primary-700);
  background: var(--primary-50);
}

.workflow-action.priority {
  border-color: var(--secondary-100);
  background: var(--secondary-50);
}

.workflow-action .material-symbols-rounded { font-size: 18px; }

@media (max-width: 1180px) {
  .workflow-focus { grid-template-columns: minmax(220px, .8fr) minmax(400px, 1.4fr); }
  .workflow-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .workflow-focus { grid-template-columns: 1fr; padding: 14px; }
  .workflow-actions { grid-column: auto; grid-template-columns: 1fr; }
  .workflow-metrics { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px) {
  .workflow-metrics { grid-template-columns: 1fr; }
}

.row-action-stack {
  min-width: 230px;
  display: grid;
  gap: 8px;
}

.row-action-stack .cell-input {
  width: 100%;
}

.panel-footer-actions {
  display: flex;
  justify-content: flex-end;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.profile-form .span-2 {
  grid-column: 1 / -1;
}

.profile-form textarea {
  min-height: 92px;
  resize: vertical;
}

.profile-photo-form {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 0 18px 20px;
}

.profile-photo-form small {
  color: var(--muted);
  text-align: center;
}

.admin-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.admin-form-grid label,
.ack-grid label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.admin-form-grid .span-2 {
  grid-column: 1 / -1;
}

.admin-form-grid textarea,
.ack-grid textarea {
  min-height: 86px;
  resize: vertical;
}

.wide-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.check-field {
  display: flex !important;
  grid-template-columns: 20px 1fr;
  align-items: center;
  align-self: end;
  min-height: 42px;
}

.check-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-700);
}

.warning-note {
  border-color: color-mix(in srgb, var(--secondary-500) 45%, var(--line));
  background: color-mix(in srgb, var(--secondary-50) 72%, var(--surface));
}

.employee-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.employee-context > div:first-child {
  display: flex;
  align-items: center;
  gap: 14px;
}

.employee-context h2,
.employee-context p {
  margin: 0;
}

.employee-context p {
  margin-top: 4px;
  color: var(--muted);
}

.value-score-list,
.timeline {
  display: grid;
  padding: 6px 18px 18px;
}

.value-score-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.value-score-list strong {
  color: var(--primary-700);
  font-size: 18px;
}

.timeline > div:not(.empty-state) {
  position: relative;
  padding: 14px 0 14px 24px;
  border-inline-start: 1px solid var(--line);
}

[dir="rtl"] .timeline > div:not(.empty-state) {
  padding: 14px 24px 14px 0;
}

.timeline-dot {
  position: absolute;
  inset-inline-start: -5px;
  top: 20px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--primary-600);
}

.timeline p,
.timeline small {
  margin: 5px 0 0;
  color: var(--muted);
}

.ack-grid {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(320px, 1.3fr) auto;
  align-items: end;
  gap: 16px;
  padding: 18px;
}

.is-saving {
  opacity: .62;
  pointer-events: none;
}

@media (max-width: 980px) {
  .admin-split,
  .admin-form-grid,
  .wide-form,
  .ack-grid {
    grid-template-columns: 1fr;
  }

  .admin-form-grid .span-2 {
    grid-column: auto;
  }

  .employee-context {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* HR cycle launch workflow */
.cycle-context-banner {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(480px, 1.5fr) auto;
  gap: 22px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--primary-500) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-50) 54%, var(--surface));
}

.cycle-context-banner.compact {
  grid-template-columns: minmax(260px, .75fr) minmax(520px, 1.5fr);
}

.cycle-context-copy h2 {
  margin: 5px 0;
  color: var(--ink);
  font-size: 20px;
}

.cycle-context-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-700);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.section-kicker .material-symbols-rounded { font-size: 18px; }

.cycle-context-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  margin: 0;
  border-inline-start: 1px solid var(--line);
}

.cycle-context-values div {
  min-width: 0;
  padding-inline: 16px;
}

.cycle-context-values dt {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.cycle-context-values dd {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}

.cycle-context-values code {
  display: inline-block;
  direction: ltr;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--primary-700);
  font-size: 12px;
  white-space: nowrap;
}

.cycle-context-action {
  min-width: 170px;
  justify-content: center;
  text-align: center;
}

.cycle-launch-guide {
  display: grid;
  grid-template-columns: minmax(210px, .5fr) minmax(0, 1.5fr);
  gap: 20px 28px;
  padding-block: 6px 2px;
}

.cycle-launch-guide > header {
  align-self: start;
  position: sticky;
  top: 84px;
}

.cycle-launch-guide > header h2 {
  margin: 6px 0 12px;
  color: var(--ink);
  font-size: 20px;
}

.cycle-launch-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--line);
}

.cycle-launch-list li {
  display: grid;
  grid-template-columns: 34px minmax(220px, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 78px;
  padding-block: 12px;
  border-block-end: 1px solid var(--line);
}

.launch-step-number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-600);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.cycle-launch-list h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 14px;
}

.cycle-launch-list p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.launch-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
}

.cycle-setup-links {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.cycle-setup-links > a,
.cycle-setup-links > span {
  min-width: 0;
  min-height: 66px;
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 11px 12px;
  border-inline-end: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.cycle-setup-links > :last-child { border-inline-end: 0; }
.cycle-setup-links > a:hover { background: var(--surface-soft); }
.cycle-setup-links > .active { background: color-mix(in srgb, var(--primary-50) 64%, var(--surface)); }
.cycle-setup-links .material-symbols-rounded { flex: 0 0 auto; color: var(--primary-600); font-size: 21px; }
.cycle-setup-links b,
.cycle-setup-links small { display: block; }
.cycle-setup-links b { font-size: 12px; line-height: 1.3; }
.cycle-setup-links small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.3; }

.guarded-open-panel .check-field {
  grid-column: 1 / -1;
  align-items: flex-start;
}

.guarded-open-panel .check-field input {
  flex: 0 0 auto;
  margin-top: 2px;
}

.admin-form-grid label > small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 1180px) {
  .cycle-context-banner,
  .cycle-context-banner.compact { grid-template-columns: 1fr; }
  .cycle-context-values { border-inline-start: 0; }
  .cycle-setup-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cycle-setup-links > :nth-child(3) { border-inline-end: 0; }
  .cycle-setup-links > :nth-child(-n+3) { border-block-end: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .cycle-context-values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .cycle-context-values div { padding-inline: 0 12px; }
  .cycle-launch-guide { grid-template-columns: 1fr; }
  .cycle-launch-guide > header { position: static; }
  .cycle-launch-list li { grid-template-columns: 34px minmax(0, 1fr); }
  .cycle-launch-list li > .mini-btn,
  .cycle-launch-list li > .launch-actions { grid-column: 2; justify-self: start; justify-content: flex-start; }
  .cycle-setup-links { grid-template-columns: 1fr; }
  .cycle-setup-links > a,
  .cycle-setup-links > span { border-inline-end: 0; border-block-end: 1px solid var(--line); }
  .cycle-setup-links > :last-child { border-block-end: 0; }
}

@media (max-width: 640px) {
  .row-action-stack {
    min-width: 190px;
  }

  .panel-footer-actions .btn {
    width: 100%;
    min-height: 44px;
  }
}

.dark {
  --bg: #1a222c;
  --surface: #24303f;
  --surface-soft: #1f2a37;
  --surface-raised: #24303f;
  --ink: #ffffff;
  --muted: #aeb7c0;
  --muted-2: #8a99af;
  --line: #2e3a47;
  --line-soft: #2a3541;

  --good-bg: rgba(33, 150, 83, .16);
  --warn-bg: rgba(180, 83, 9, .18);
  --danger-bg: rgba(211, 64, 83, .16);
  --info-bg: rgba(37, 154, 230, .16);

  --rail-bg: #161e27;
  --shadow: 0 8px 13px -3px rgba(0, 0, 0, .35);
  --shadow-tight: 0 1px 2px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.font-en { font-family: "Century Gothic", CenturyGothic, AppleGothic, "Segoe UI", Arial, sans-serif; }
.font-ar { font-family: Tajawal, "Segoe UI", Arial, sans-serif; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
[x-cloak] { display: none !important; }
.material-symbols-rounded { font-size: 20px; line-height: 1; vertical-align: -4px; }
.btn .material-symbols-rounded,
.mini-btn .material-symbols-rounded,
.mode-banner .material-symbols-rounded,
.eyebrow .material-symbols-rounded { margin-inline-end: 7px; }

/* ===================== APP SHELL ===================== */
.app-grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
}
.app-grid.collapsed { grid-template-columns: 90px minmax(0, 1fr); }

/* ---- Sidebar (dark) ---- */
.epes-rail {
  min-height: 100vh;
  background: var(--rail-bg);
  color: var(--rail-text);
  padding: 20px 0 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  border-inline-end: 0;
}
.app-grid.collapsed .epes-rail { overflow-x: hidden; }
.rail-brand {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px 20px;
}
.app-grid.collapsed .rail-brand { justify-content: center; padding: 0 12px 20px; }
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--primary-500);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(0, 128, 128, .35);
}
.rail-toggle {
  margin-inline-start: auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: transparent;
  color: var(--rail-muted);
  cursor: pointer;
}
.rail-toggle:hover { color: #fff; background: var(--rail-hover); }
.app-grid.collapsed .rail-toggle {
  display: grid;
  position: absolute;
  inset-block-start: 74px;
  inset-inline-end: 10px;
  background: var(--rail-hover);
  color: #fff;
}
.rail-brand strong { display: block; font-size: 17px; font-weight: 800; color: #fff; }
.rail-brand span { display: block; color: var(--rail-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.app-grid.collapsed .rail-brand div:not(.brand-mark) { display: none; }

.rail-nav { padding: 0 14px; }
.rail-section { margin: 2px 0; }
.rail-section-toggle,
.rail-nav a {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border-inline-start: 0;
  color: var(--rail-text);
  font-size: 13px;
  font-weight: 500;
}
.rail-section-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: start;
  color: var(--rail-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  min-height: 34px;
  margin-top: 8px;
}
.rail-section-toggle:hover { color: #cfd6de; background: transparent; }
.rail-nav a:hover { background: var(--rail-hover); color: #fff; }
.rail-section-toggle small,
.rail-nav small { display: grid; place-items: center; opacity: .7; }
.rail-section-toggle small { transition: transform .16s ease; }
.rail-section-toggle small.rotated { transform: rotate(180deg); }
.rail-section-links { padding: 2px 0 4px; }
.rail-section-links:not(.is-open) { display: none; }
.rail-section-links.is-open { display: block; }
.rail-section-links a {
  min-height: 38px;
  padding-block: 9px;
  padding-inline-start: 22px;
  font-size: 12.5px;
}
[dir="rtl"] .rail-section-links a { padding-inline-start: 12px; padding-inline-end: 22px; }
.app-grid.collapsed .rail-section { display: grid; place-items: center; }
.app-grid.collapsed .rail-section-toggle,
.app-grid.collapsed .rail-nav a {
  width: 48px;
  height: 48px;
  min-height: 48px;
  margin: 4px auto;
  padding: 0;
  justify-content: center;
  border-radius: 10px;
}
.nav-label { min-width: 0; display: flex; align-items: center; gap: 11px; }
.nav-label .material-symbols-rounded { font-size: 19px; opacity: .92; }
.app-grid.collapsed .nav-label { justify-content: center; }
.app-grid.collapsed .epes-rail:not(.open) .nav-label span:last-child,
.app-grid.collapsed .epes-rail:not(.open) .rail-nav small,
.app-grid.collapsed .epes-rail:not(.open) .rail-section-links { display: none !important; }
.nav-label span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rail-nav small .material-symbols-rounded,
.rail-section-toggle small .material-symbols-rounded { font-size: 18px; }
.rail-nav a.active {
  background: var(--rail-active-bg);
  color: var(--rail-active-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary-500);
}
[dir="rtl"] .rail-nav a.active { box-shadow: inset -3px 0 0 var(--primary-500); }
.rail-nav a.active .material-symbols-rounded { opacity: 1; }

/* ===================== TOPBAR ===================== */
.epes-main { min-width: 0; }
.epes-topbar {
  min-height: 74px;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 12px 28px;
}
.mobile-menu { display: none; }
.top-title { min-width: 0; }
.top-title p {
  margin: 0;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.top-title h1 { margin: 3px 0 0; font-size: 22px; line-height: 1.12; font-weight: 800; color: var(--ink); }
.top-title span { display: none; }
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.top-actions input {
  width: 300px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  padding: 0 15px;
  outline: none;
}
.top-actions input:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 14%, transparent); }
.top-search { position: relative; display: flex; align-items: center; }
.top-search .material-symbols-rounded { position: absolute; inset-inline-start: 15px; color: var(--muted-2); font-size: 19px; }
.top-search input { padding-inline-start: 44px; }
.icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.icon-btn:hover { color: var(--primary-600); border-color: var(--primary-500); background: var(--surface-soft); }
.notif-dot {
  position: absolute;
  inset-block-start: -3px;
  inset-inline-end: -3px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--secondary-500);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border: 2px solid var(--surface);
}
.top-menu { position: relative; }
.dropdown-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 12px);
  width: 320px;
  z-index: 60;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.top-menu .dropdown-panel { display: none; }
.top-menu .dropdown-panel.is-open { display: block; }
.dropdown-panel header { display: flex; justify-content: space-between; gap: 12px; padding: 15px; border-bottom: 1px solid var(--line-soft); }
.dropdown-panel header strong { font-weight: 800; }
.dropdown-panel header a { color: var(--primary-600); font-size: 12px; font-weight: 700; }
.dropdown-empty { margin: 0; padding: 18px; color: var(--muted); }
.notice-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 11px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line-soft);
}
.notice-row:last-child { border-bottom: 0; }
.notice-row:hover { background: var(--surface-soft); }
.notice-row .material-symbols-rounded { color: var(--primary-600); }
.notice-row b, .notice-row small { display: block; }
.notice-row small { color: var(--muted); margin-top: 2px; }
.profile-chip {
  min-width: 210px;
  height: 46px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-inline-start: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding-inline-start: 14px;
  cursor: pointer;
  text-align: start;
}
.profile-chip img, .profile-summary img {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.profile-chip b, .profile-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-chip b { font-weight: 700; }
.profile-chip small { color: var(--muted); font-size: 11px; margin-top: 1px; }
.avatar-fallback {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--primary-500);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.avatar-fallback.large { width: 44px; height: 44px; }
.avatar-fallback.xlarge { width: 104px; height: 104px; font-size: 28px; }
.profile-panel { width: 280px; }
.profile-summary { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 11px; align-items: center; padding: 15px; border-bottom: 1px solid var(--line-soft); }
.profile-summary strong, .profile-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-summary small { color: var(--muted); margin-top: 2px; }
.profile-panel a, .profile-panel button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0 15px;
  cursor: pointer;
  text-align: start;
}
.profile-panel a:hover, .profile-panel button:hover { background: var(--surface-soft); color: var(--primary-600); }

/* ===================== BUTTONS ===================== */
.btn, .mini-btn {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  gap: 7px;
  transition: background .15s, border-color .15s;
}
.btn:hover { border-color: var(--primary-500); color: var(--primary-600); }
.btn.primary, .mini-btn {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(0, 128, 128, .5);
}
.btn.primary:hover, .mini-btn:hover { background: var(--primary-700); border-color: var(--primary-700); color: #fff; }
.btn.warm {
  background: var(--secondary-500);
  border-color: var(--secondary-500);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(249, 115, 22, .5);
}
.btn.warm:hover { background: var(--secondary-600); border-color: var(--secondary-600); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--primary-500); color: var(--primary-600); }

/* ===================== CONTENT ===================== */
.epes-content { width: min(1600px, 100%); margin: 0 auto; padding: 28px; display: grid; gap: 24px; }
.mode-banner {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow-tight);
}
.mode-banner strong { color: var(--ink); font-weight: 700; }
.mode-banner strong, .mode-banner span { display: inline-flex; align-items: center; }
.mode-banner span {
  border-radius: 999px;
  background: var(--primary-50);
  color: var(--primary-700);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}
.dark .mode-banner span { background: rgba(0, 128, 128, .18); color: #99f6e4; }

/* ---- stat strip (dashboard KPIs) ---- */
.score-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.score-strip article {
  min-height: 128px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.score-strip article:first-child {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
  border-color: transparent;
  color: #fff;
}
.score-strip span { color: var(--muted-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.score-strip article:first-child span { color: #bff3ef; }
.score-strip strong { font-size: 30px; font-weight: 800; }
.score-strip small {
  width: fit-content;
  border-radius: 999px;
  background: var(--secondary-50);
  color: var(--secondary-600);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}
.dark .score-strip small { background: rgba(249, 115, 22, .16); color: #fdba74; }
.score-strip article:first-child small { background: rgba(255, 255, 255, .18); color: #fff; }

/* ===================== PANELS / CARDS ===================== */
.dashboard-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 24px; align-items: start; }
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel.full { grid-column: 1 / -1; }
.panel.wide { min-height: 360px; }
.panel header { padding: 20px 22px; border-bottom: 1px solid var(--line-soft); }
.panel h2 { margin: 0; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.panel header span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.panel canvas { width: 100%; max-height: 310px; padding: 22px; }

/* heatmap / calibration */
.heatmap {
  padding: 20px;
  display: grid;
  grid-template-columns: 1.25fr repeat(4, 1fr);
  gap: 8px;
  min-width: 720px;
}
.heatmap b { color: var(--muted-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.heatmap strong { min-height: 46px; display: flex; align-items: center; font-weight: 700; }
.heatmap span {
  min-height: 46px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--primary-50);
  color: var(--primary-700);
  font-weight: 700;
}
.dark .heatmap span { background: rgba(0, 128, 128, .16); color: #99f6e4; }
.empty-state {
  min-height: 100px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--muted);
  text-align: center;
  font-weight: 600;
  padding: 16px;
}
.empty-state .material-symbols-rounded { color: var(--secondary-500); font-size: 30px; }
.empty-state.grid-empty { grid-column: 1 / -1; }
.heatmap .empty-state span { min-height: auto; display: block; background: transparent; color: var(--muted); }

/* task list */
.task-list { padding: 18px; display: grid; gap: 12px; }
.task-list > div {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--surface-soft);
  transition: border-color .15s;
}
.task-list > div:hover { border-color: var(--primary-500); }
.task-list b, .task-list span { display: block; }
.task-list b { font-weight: 700; }
.task-list span { color: var(--muted); font-size: 12px; margin-top: 3px; }
.task-list em, .status-pill {
  display: inline-flex;
  width: fit-content;
  margin-top: 9px;
  border-radius: 999px;
  padding: 3px 10px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}

/* status pills (semantic) */
.is-good { background: var(--good-bg); color: var(--good); }
.is-warn { background: var(--warn-bg); color: var(--warn); }
.is-bad  { background: var(--danger-bg); color: var(--danger); }
.is-muted { background: var(--info-bg); color: var(--info); }
.dark .is-good { color: #86efac; }
.dark .is-warn { color: #fdba74; }
.dark .is-bad  { color: #fca5a5; }
.dark .is-muted { color: #93c5fd; }

/* ===================== PAGE HERO / METRICS ===================== */
.page-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.page-hero h2 { margin: 10px 0 6px; font-size: 28px; line-height: 1.1; font-weight: 800; }
.page-hero p { margin: 0; color: var(--muted); max-width: 780px; }
.hero-kicker, .hero-side span, .metric-grid article span { display: inline-flex; align-items: center; gap: 7px; }
.hero-kicker { color: var(--primary-600); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.hero-side { min-width: 230px; display: grid; gap: 8px; text-align: end; }
.hero-side span { justify-content: flex-end; color: var(--muted); font-size: 12px; font-weight: 700; }
.hero-side strong { font-size: 20px; font-weight: 800; }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.metric-grid.embedded { padding: 18px 18px 0; gap: 16px; }
.metric-grid.embedded article { min-height: 104px; box-shadow: none; background: var(--surface-soft); }
.metric-grid article {
  min-height: 120px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.metric-grid article span { color: var(--muted-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.metric-grid article span .material-symbols-rounded { color: var(--primary-500); }
.metric-grid article strong { display: block; margin-top: 12px; font-size: 28px; font-weight: 800; color: var(--ink); }
.metric-grid article small { display: block; margin-top: 6px; color: var(--muted); font-weight: 600; }

.surface-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 24px; }

/* decision surface */
.decision-surface { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; padding: 18px; }
.decision-main, .decision-aside {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  padding: 18px;
}
.decision-main h3, .decision-aside h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.decision-aside { display: grid; align-content: start; gap: 10px; }
.decision-aside p { margin: 0 0 8px; color: var(--muted); }
.action-row {
  min-height: 60px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.action-row:last-child { border-bottom: 0; }
.action-row > .material-symbols-rounded { color: var(--primary-600); }
.action-row b, .action-row span { display: block; }
.action-row b { font-weight: 700; }
.action-row span { color: var(--muted); font-size: 12px; }
.action-row em { border-radius: 999px; padding: 3px 10px; font-style: normal; font-size: 11px; font-weight: 700; }

/* timeline / approval path */
.timeline-list { padding: 20px; display: grid; gap: 0; }
.timeline-list div { position: relative; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; padding-bottom: 22px; }
.timeline-list div::before {
  content: "";
  position: absolute;
  inset-inline-start: 11px;
  top: 24px;
  bottom: -2px;
  width: 2px;
  background: var(--line);
}
.timeline-list div:last-child::before { display: none; }
.timeline-list div > span {
  width: 24px;
  height: 24px;
  border: 2px solid var(--primary-600);
  border-radius: 999px;
  background: var(--surface);
}
.timeline-list .done > span { background: var(--primary-600); box-shadow: 0 0 0 4px var(--primary-50); }
.dark .timeline-list .done > span { box-shadow: 0 0 0 4px rgba(0, 128, 128, .18); }
.timeline-list b { font-size: 14px; font-weight: 700; }
.timeline-list small { grid-column: 2; color: var(--muted); }

/* workflow steps */
.workflow-steps { padding: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.workflow-steps div { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; background: var(--surface-soft); }
.workflow-steps span { color: var(--secondary-600); font-weight: 800; }
.workflow-steps b { display: block; margin-top: 10px; font-size: 16px; font-weight: 700; }
.workflow-steps p { margin: 8px 0 0; color: var(--muted); }

/* ===================== TABLES ===================== */
.table-wrap { padding: 8px; overflow: auto; }
table.epes-data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.epes-data-table th, table.epes-data-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-align: start;
  white-space: nowrap;
}
table.epes-data-table th {
  background: var(--surface-soft);
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
}
table.epes-data-table tbody tr:hover td { background: var(--surface-soft); }
.dt-container { color: var(--ink); }
.dt-container .dt-search input, .dt-container .dt-length select {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  padding: 8px 11px;
}
.dt-container .dt-paging .dt-paging-button.current {
  background: var(--primary-600);
  border-radius: 8px;
  color: #fff !important;
}

/* ===================== ACTION DRAWER ===================== */
.action-drawer { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 1fr min(420px, 92vw); }
.action-drawer:not(.is-open) { display: none; }
.drawer-backdrop { background: rgba(2, 6, 23, .62); backdrop-filter: blur(4px); }
.action-drawer aside { background: var(--surface); padding: 26px; box-shadow: -20px 0 60px rgba(0, 0, 0, .18); position: relative; }
.action-drawer aside h2 { font-weight: 800; }
.drawer-close {
  position: absolute;
  inset-inline-end: 16px;
  top: 16px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--ink);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
}
.drawer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.drawer-grid button {
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--primary-50);
  color: var(--primary-700);
  font-weight: 800;
  cursor: pointer;
  transition: background .15s;
}
.drawer-grid button:hover { background: var(--primary-100); }
.dark .drawer-grid button { background: rgba(0, 128, 128, .16); color: #99f6e4; }
.form-message { color: var(--danger); min-height: 20px; font-weight: 600; }

/* ===================== LOGIN ===================== */
.epes-login { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: #eef4f3; }
.dark .epes-login { background: #111827; }
.login-wrap {
  width: min(1080px, 100%);
  min-height: 640px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 30px 60px -30px rgba(2, 6, 23, .3);
}
.login-panel {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 28px;
  background: linear-gradient(160deg, #063b38, #012a28);
  color: #fff;
  padding: 38px;
}
.login-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 15% 10%, rgba(0, 128, 128, .35), transparent 60%),
    radial-gradient(50% 50% at 90% 90%, rgba(249, 115, 22, .28), transparent 55%);
  pointer-events: none;
}
.login-panel > * { position: relative; z-index: 1; }
.login-panel h1 { max-width: 520px; font-size: 40px; line-height: 1.06; margin: 14px 0; font-weight: 800; }
.login-panel p:not(.eyebrow) { max-width: 500px; color: #bceee8; font-weight: 600; }
.login-card { display: grid; align-content: center; padding: 48px; background: var(--surface); color: var(--ink); }
.login-card h2 { margin: 0 0 20px; font-size: 27px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
.login-card label { display: block; margin: 14px 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.login-card input {
  display: block;
  width: 100%;
  margin-top: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink);
  padding: 13px;
  outline: none;
}
.login-card input:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 15%, transparent); }
.login-card button {
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--primary-600);
  color: #fff;
  padding: 14px;
  margin-top: 10px;
  font-weight: 800;
  cursor: pointer;
}
.login-card button:hover { background: var(--primary-700); }
.login-card a { display: inline-block; margin-top: 16px; color: var(--primary-600); font-weight: 700; }
.eyebrow { color: #7fe3dd; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.login-capabilities, .login-system-state { display: grid; gap: 10px; }
.login-capabilities div, .login-system-state div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .07);
  color: #dffaf6;
  font-weight: 600;
}
.login-capabilities .material-symbols-rounded, .login-system-state .material-symbols-rounded { color: #7fe3dd; }
.login-system-state { grid-template-columns: 1fr 1fr; }

/* ===================== PROFILE ===================== */
.profile-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
.profile-card { overflow: hidden; }
.profile-cover { height: 112px; background: linear-gradient(135deg, var(--primary-600), var(--primary-500)); }
.profile-identity { display: grid; place-items: center; text-align: center; padding: 0 24px 24px; margin-top: -52px; }
.profile-identity img {
  width: 104px;
  height: 104px;
  object-fit: cover;
  border-radius: 999px;
  border: 4px solid var(--surface);
  background: var(--surface);
}
.profile-identity h2 { margin: 12px 0 4px; font-size: 22px; font-weight: 800; }
.profile-identity p { margin: 0; color: var(--muted); }
.profile-identity > span { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--primary-600); font-weight: 700; }
.profile-facts { display: grid; border-top: 1px solid var(--line-soft); }
.profile-facts div { padding: 15px 18px; border-bottom: 1px solid var(--line-soft); }
.profile-facts div:last-child { border-bottom: 0; }
.profile-facts span { display: flex; align-items: center; gap: 7px; color: var(--muted-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.profile-facts strong { display: block; margin-top: 5px; overflow-wrap: anywhere; }
.profile-form { padding: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.profile-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.profile-form input[type="text"], .profile-form input:not([type]) {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink);
  padding: 12px;
  outline: none;
}
.profile-form input { font-weight: 400; }
.profile-form input:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 15%, transparent); }
.profile-toggles, .profile-actions, .profile-form .form-message { grid-column: 1 / -1; }
.profile-toggles { display: flex; flex-wrap: wrap; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.profile-toggles label { display: flex; align-items: center; gap: 8px; }
.profile-actions { display: flex; gap: 10px; justify-content: flex-end; }

.signature-modal-card { width: min(1040px, 100%); }
[data-signature-modal][hidden] { display: none !important; }
.signature-modal-card header > div { min-width: 0; }
.signature-modal-card header h2 { display: flex; align-items: center; gap: 9px; }
.signature-modal-card header small { display: block; margin-top: 3px; color: var(--muted); }
.signature-modal-body { min-height: 0; display: grid; gap: 16px; padding: 18px; overflow-y: auto; }
.signature-readiness { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 13px 15px; border: 1px solid color-mix(in srgb, var(--primary-500) 28%, var(--line)); background: var(--primary-50); }
.signature-readiness > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--primary-700); }
.signature-readiness b,
.signature-readiness small { display: block; }
.signature-readiness small { margin-top: 3px; color: var(--muted); line-height: 1.45; }
.signature-sync-note { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 15px; border: 1px solid var(--line); background: var(--surface-soft); }
.signature-sync-note > span { width: 36px; height: 36px; display: grid; place-items: center; color: var(--secondary-700, #b54708); }
.signature-sync-note b,
.signature-sync-note small { display: block; }
.signature-sync-note small { margin-top: 3px; color: var(--muted); line-height: 1.45; }
.signature-sync-note a { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-700); font-size: 12px; font-weight: 700; white-space: nowrap; }
.signature-preview-frame { min-height: 234px; overflow: auto; padding: 18px; border: 1px solid var(--line); background: #eef2f3; }
.signature-preview-frame iframe { width: 792px; height: 198px; display: block; border: 0; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
.signature-modal-card footer { flex-wrap: wrap; }

@media (max-width: 760px) {
  .profile-actions { align-items: stretch; flex-direction: column; }
  .profile-actions .btn { width: 100%; justify-content: center; }
  .signature-modal-body { padding: 12px; }
  .signature-preview-frame { min-height: 226px; padding: 12px; }
  .signature-sync-note { grid-template-columns: 36px minmax(0, 1fr); }
  .signature-sync-note a { grid-column: 2; white-space: normal; }
  .signature-modal-card footer { align-items: stretch; flex-direction: column-reverse; }
  .signature-modal-card footer .btn { width: 100%; justify-content: center; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1180px) {
  .app-grid, .app-grid.collapsed { grid-template-columns: 1fr; }
  .epes-rail {
    position: fixed;
    z-index: 40;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(320px, 88vw);
    transform: translateX(-105%);
    transition: transform .2s ease;
  }
  [dir="rtl"] .epes-rail { transform: translateX(105%); }
  .epes-rail.open { transform: translateX(0); }
  .app-grid.collapsed .epes-rail { overflow: auto; }
  .app-grid.collapsed .rail-brand { justify-content: flex-start; padding: 0 22px 20px; }
  .app-grid.collapsed .rail-brand div:not(.brand-mark), .app-grid.collapsed .rail-toggle { display: grid; }
  .app-grid.collapsed .rail-section { display: block; }
  .app-grid.collapsed .rail-section-toggle,
  .app-grid.collapsed .rail-nav a {
    width: 100%;
    height: auto;
    min-height: 42px;
    margin: 0;
    padding: 10px 12px;
    justify-content: space-between;
    border-radius: 8px;
  }
  .app-grid.collapsed .rail-section-links:not(.is-open) { display: none; }
  .app-grid.collapsed .rail-section-links.is-open { display: block; }
  .app-grid.collapsed .nav-label span:last-child, .app-grid.collapsed .rail-nav small { display: grid; }
  .mobile-menu { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-weight: 600; }
  .epes-topbar { align-items: flex-start; }
  .top-actions input { width: 240px; }
  .score-strip, .dashboard-grid, .surface-grid, .decision-surface, .workflow-steps, .profile-layout { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .epes-topbar { display: grid; padding: 14px; }
  .top-actions { justify-content: stretch; }
  .top-actions input, .top-actions .btn { width: 100%; }
  .top-search, .profile-chip, .dropdown-panel { width: 100%; }
  .metric-grid { grid-template-columns: 1fr; }
  .profile-form { grid-template-columns: 1fr; }
  .epes-content { padding: 16px; }
  .login-wrap { grid-template-columns: 1fr; min-height: 0; }
  .login-panel, .login-card { padding: 26px; }
  .login-panel h1 { font-size: 30px; }
  .score-strip article { min-height: 112px; }
}

/* ============================================================
   WORKFLOW COMPONENT KIT (actor-specific screens)
   ============================================================ */

/* view header inside a page */
.view-head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.view-head .vh-main { min-width: 0; }
.view-head .vh-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--primary-600); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.view-head h2 { margin: 8px 0 4px; font-size: 22px; font-weight: 800; }
.view-head p { margin: 0; color: var(--muted); max-width: 70ch; }
.view-head .vh-actions { margin-inline-start: auto; display: flex; gap: 10px; flex-wrap: wrap; }

/* actor banner — "what you decide here" */
.actor-note {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: var(--radius-sm);
  background: var(--primary-50); color: var(--primary-900);
  border: 1px solid color-mix(in srgb, var(--primary-500) 22%, transparent);
  font-weight: 600;
}
.dark .actor-note { background: rgba(0,128,128,.12); color: #bff3ef; border-color: rgba(0,128,128,.28); }
.actor-note .material-symbols-rounded { color: var(--primary-600); }

/* stat-chip cards (TailAdmin CardDataStats) */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat-card {
  display: grid; gap: 4px; padding: 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
}
.stat-card .sc-chip { width: 48px; height: 48px; border-radius: 999px; display: grid; place-items: center; margin-bottom: 12px; background: var(--primary-50); color: var(--primary-600); }
.stat-card .sc-chip.g { background: var(--good-bg); color: var(--good); }
.stat-card .sc-chip.w { background: var(--warn-bg); color: var(--warn); }
.stat-card .sc-chip.b { background: var(--info-bg); color: var(--info); }
.stat-card .sc-chip.o { background: var(--secondary-50); color: var(--secondary-600); }
.dark .stat-card .sc-chip { background: rgba(0,128,128,.16); color: #7fe3dd; }
.stat-card .sc-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.stat-card .sc-v { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; }
.stat-card .sc-t { font-size: 13px; color: var(--muted); }
.stat-card .sc-d { font-size: 12px; font-weight: 700; }
.stat-card .sc-d.up { color: var(--good); } .stat-card .sc-d.dn { color: var(--danger); } .stat-card .sc-d.at { color: var(--warn); }

/* filter toolbar */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.toolbar .grow { flex: 1 1 160px; }
.ctl {
  height: 40px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-soft); color: var(--ink); padding: 0 12px; outline: none;
}
.ctl:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 14%, transparent); }
select.ctl { cursor: pointer; }
.toolbar .count { color: var(--muted); font-size: 12px; font-weight: 700; }

/* segmented tabs */
.seg { display: inline-flex; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; padding: 4px; gap: 4px; }
.seg a { padding: 8px 15px; border-radius: 7px; font-weight: 700; color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 7px; }
.seg a:hover { color: var(--primary-600); }
.seg a.active { background: var(--surface); color: var(--primary-700); box-shadow: var(--shadow-tight); }
.dark .seg a.active { background: var(--surface-raised); color: #7fe3dd; }

/* master-detail worklist */
.worklist { display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.worklist .wl-list { border-inline-end: 1px solid var(--line-soft); min-width: 0; overflow: auto; }
.worklist .wl-detail { padding: 20px; display: grid; gap: 16px; align-content: start; }
.wl-detail h3 { margin: 0; font-size: 16px; font-weight: 800; }
.wl-detail .muted { color: var(--muted); font-size: 13px; }

/* key/value list */
.kv-list { display: grid; }
.kv-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.kv-row:last-child { border-bottom: 0; }
.kv-row span { color: var(--muted); }
.kv-row b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* form fields */
.field { display: grid; gap: 6px; }
.field > span, .field > label { font-size: 12px; font-weight: 700; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-soft); color: var(--ink); padding: 11px 12px; outline: none;
}
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--primary-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 14%, transparent); }

/* inline table input */
.cell-input { width: 96px; height: 34px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); color: var(--ink); padding: 0 9px; outline: none; }
.cell-input:focus { border-color: var(--primary-500); }

/* 1-5 rating control */
.rating { display: flex; gap: 8px; flex-wrap: wrap; }
.rating label { cursor: pointer; }
.rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating span {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-soft); color: var(--muted); font-weight: 800;
}
.rating input:checked + span { background: var(--primary-600); color: #fff; border-color: var(--primary-600); box-shadow: 0 6px 14px -6px rgba(0,128,128,.5); }
.rating input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 25%, transparent); }

/* score bars */
.scorebar { display: flex; align-items: center; gap: 12px; font-size: 13px; margin-bottom: 11px; }
.scorebar:last-child { margin-bottom: 0; }
.scorebar .sb-label { width: 96px; color: var(--muted); font-weight: 600; }
.scorebar .sb-track { flex: 1; height: 8px; border-radius: 5px; background: var(--line); overflow: hidden; }
.scorebar .sb-track i { display: block; height: 100%; background: var(--primary-500); border-radius: 5px; }
.scorebar .sb-track i.warm { background: var(--secondary-500); }
.scorebar .sb-val { width: 48px; text-align: end; font-weight: 800; font-variant-numeric: tabular-nums; }

/* list group header */
.group-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  background: var(--surface-soft); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  font-weight: 700; font-size: 13px;
}
.group-head:first-child { border-top: 0; }
.group-head .g-count { margin-inline-start: auto; color: var(--muted); font-size: 12px; font-weight: 700; }

/* relationship / meta tag */
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--info-bg); color: var(--info); }
.tag.o { background: var(--secondary-50); color: var(--secondary-600); }
.tag.t { background: var(--primary-50); color: var(--primary-700); }
.dark .tag.t { background: rgba(0,128,128,.16); color: #7fe3dd; }

/* rating band pill */
.band { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; display: inline-block; }
.band.a { background: var(--good-bg); color: var(--good); }
.band.b { background: var(--primary-50); color: var(--primary-700); }
.band.c { background: var(--warn-bg); color: var(--warn); }
.band.d { background: var(--danger-bg); color: var(--danger); }
.dark .band.b { background: rgba(0,128,128,.16); color: #7fe3dd; }

/* Official EWA Values 1-5 reference */
.ewa-rating-reference { overflow: hidden; }
.ewa-rating-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--line-soft); background: var(--line-soft); gap: 1px; }
.ewa-rating-strip > span { min-width: 0; min-height: 88px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-content: center; align-items: center; gap: 3px 9px; padding: 12px; background: var(--surface); }
.ewa-rating-strip b { grid-row: 1 / span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-50); color: var(--primary-700); font-size: 14px; }
.ewa-rating-strip strong { min-width: 0; font-size: 12px; line-height: 1.3; }
.ewa-rating-strip small { width: max-content; max-width: 100%; padding: 3px 6px; border-radius: 999px; font-size: 9px; font-weight: 700; line-height: 1.25; }
.ewa-rating-strip .is-mandatory { background: var(--warn-bg); color: var(--warn); }
.ewa-rating-strip .is-recommended { background: var(--good-bg); color: var(--good); }
.ewa-rating-details summary { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; color: var(--primary-700); cursor: pointer; font-size: 12px; font-weight: 700; list-style: none; }
.ewa-rating-details summary::-webkit-details-marker { display: none; }
.ewa-rating-details summary .material-symbols-rounded:last-child { margin-inline-start: auto; transition: transform .15s ease; }
.ewa-rating-details[open] summary .material-symbols-rounded:last-child { transform: rotate(180deg); }
.ewa-rating-table-wrap { overflow-x: auto; border-top: 1px solid var(--line-soft); }
.ewa-rating-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 11px; line-height: 1.45; }
.ewa-rating-table th,
.ewa-rating-table td { padding: 10px 12px; border-inline-end: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); text-align: center; vertical-align: middle; }
.ewa-rating-table th:last-child,
.ewa-rating-table td:last-child { border-inline-end: 0; }
.ewa-rating-table th { background: var(--surface-soft); color: var(--muted); font-size: 10px; text-transform: uppercase; }
.ewa-rating-table td { color: var(--muted); }
.ewa-rating-table td strong { color: var(--ink); }
.ewa-rating-table td:first-child b { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--primary-50); color: var(--primary-700); }

@media (max-width: 760px) {
  .ewa-rating-strip { grid-template-columns: 1fr; }
  .ewa-rating-strip > span { min-height: 64px; grid-template-columns: 34px minmax(0, 1fr); }
  .ewa-rating-strip b { grid-row: 1 / span 2; }
  .ewa-rating-strip small { grid-column: 2; justify-self: start; }
}

/* table action buttons */
.btn-row { display: inline-flex; gap: 6px; }
.mini-btn.approve { background: var(--good); border-color: var(--good); }
.mini-btn.approve:hover { filter: brightness(.94); }
.mini-btn.return { background: var(--danger); border-color: var(--danger); }
.mini-btn.return:hover { filter: brightness(.94); }
.mini-btn.soft { background: transparent; border-color: var(--line); color: var(--primary-600); box-shadow: none; }
.mini-btn.soft:hover { border-color: var(--primary-500); }

/* horizontal pipeline stepper */
.pipeline { display: flex; padding: 24px 18px 28px; }
.pipeline .pstep { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.pipeline .pstep .node {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 14px; background: var(--surface-soft);
  border: 2px solid var(--line); color: var(--muted-2); z-index: 1;
}
.pipeline .pstep.done .node { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.pipeline .pstep.active .node { background: var(--primary-600); border-color: var(--primary-600); color: #fff; box-shadow: 0 0 0 5px var(--primary-50); }
.dark .pipeline .pstep.active .node { box-shadow: 0 0 0 5px rgba(0,128,128,.18); }
.pipeline .pstep::before, .pipeline .pstep::after { content: ""; position: absolute; top: 20px; height: 2px; background: var(--line); width: 50%; }
.pipeline .pstep::before { inset-inline-start: 0; } .pipeline .pstep::after { inset-inline-end: 0; }
.pipeline .pstep:first-child::before, .pipeline .pstep:last-child::after { display: none; }
.pipeline .pstep.done::before, .pipeline .pstep.done::after, .pipeline .pstep.active::before { background: var(--good); }
.pipeline .pstep .nm { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 10px; }
.pipeline .pstep .ct { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* progress ring row */
.ring-row { display: flex; align-items: center; gap: 18px; padding: 20px; }
.ring-row .rr-text b { font-size: 18px; font-weight: 800; display: block; }
.ring-row .rr-text p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }

/* checklist tasks (employee) */
.checklist { display: grid; gap: 12px; padding: 18px; }
.checklist .ck {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.checklist .ck .box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line); flex: none; display: grid; place-items: center; color: transparent; }
.checklist .ck.done { opacity: .62; }
.checklist .ck.done .box { background: var(--good); border-color: var(--good); color: #fff; }
.checklist .ck.due .box { border-color: var(--secondary-500); }
.checklist .ck .ck-tx { flex: 1; min-width: 0; }
.checklist .ck .ck-tx b { font-weight: 700; display: block; }
.checklist .ck .ck-tx span { color: var(--muted); font-size: 12.5px; }

/* two-column content split */
.split-2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 24px; align-items: start; }

@media (max-width: 1000px) {
  .worklist { grid-template-columns: 1fr; }
  .worklist .wl-list { border-inline-end: 0; border-bottom: 1px solid var(--line-soft); }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .split-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .stat-cards { grid-template-columns: 1fr; } }

/* 360 respondent policy workbench */
.respondent-admin-head {
  align-items: center;
}

.respondent-workbench-tabs {
  margin-bottom: 0;
}

.respondent-workbench-panel {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.respondent-workbench-panel[hidden] {
  display: none !important;
}

.respondent-overview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.respondent-metric {
  min-width: 0;
  min-height: 104px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: start;
  box-shadow: var(--shadow-tight);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.respondent-metric:hover,
.respondent-metric:focus-visible {
  border-color: color-mix(in srgb, var(--primary-500) 55%, var(--line));
  box-shadow: 0 10px 24px rgba(15, 118, 110, .10);
  outline: none;
  transform: translateY(-1px);
}

.respondent-metric.is-active {
  border-color: var(--primary-500);
  background: color-mix(in srgb, var(--primary-50) 68%, var(--surface));
  box-shadow: inset 3px 0 0 var(--primary-500), var(--shadow-tight);
}

[dir="rtl"] .respondent-metric.is-active {
  box-shadow: inset -3px 0 0 var(--primary-500), var(--shadow-tight);
}

.respondent-metric > .material-symbols-rounded:last-child {
  color: var(--muted);
  font-size: 19px;
}

[dir="rtl"] .respondent-metric > .material-symbols-rounded:last-child {
  transform: rotate(180deg);
}

.respondent-metric-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.respondent-metric-copy > b {
  color: var(--ink);
  font-size: 25px;
  line-height: 1;
}

.respondent-metric-copy > strong {
  font-size: 12px;
}

.respondent-metric-copy > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.respondent-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 18px;
  min-width: 0;
}

.coverage-chart-wrap {
  position: relative;
  height: 270px;
  padding: 16px 20px 20px;
}

.coverage-priority-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 4px 18px 12px;
  list-style: none;
}

.coverage-priority-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}

.coverage-priority-list li:last-child { border-bottom: 0; }

.coverage-priority-list li > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-50);
  color: var(--primary-700);
  font-size: 11px;
  font-weight: 800;
}

.coverage-priority-list div { display: grid; gap: 4px; }
.coverage-priority-list b { font-size: 12px; }
.coverage-priority-list small { color: var(--muted); font-size: 11px; line-height: 1.45; }

.insight-filter-pill {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  border: 1px solid color-mix(in srgb, var(--primary-500) 35%, var(--line));
  border-radius: 999px;
  background: var(--primary-50);
  color: var(--primary-700);
  font-size: 11px;
  font-weight: 700;
}

.insight-filter-pill[hidden] { display: none !important; }
.insight-filter-pill > .material-symbols-rounded { font-size: 16px; }

.insight-filter-pill button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.insight-filter-pill button:hover { background: color-mix(in srgb, var(--primary-500) 12%, transparent); }
.insight-filter-pill button .material-symbols-rounded { font-size: 15px; }

.coverage-count {
  display: inline-grid;
  gap: 2px;
  min-width: 72px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  text-align: start;
}

.coverage-count.is-ready { border-color: color-mix(in srgb, var(--good) 30%, var(--line)); }
.coverage-count.has-gap { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.coverage-count b { font-size: 16px; }
.coverage-count small { color: var(--muted); font-size: 10px; white-space: nowrap; }

.coverage-health {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 150px;
}

.coverage-health-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

.coverage-gap-detail {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  max-width: 230px;
  color: var(--text);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.coverage-gap-detail .material-symbols-rounded {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--warn);
  font-size: 15px;
}

.respondent-coverage-register .row-actions {
  min-width: 124px;
  display: grid;
  gap: 6px;
}

.respondent-coverage-register .row-actions .mini-btn {
  width: 100%;
  min-height: 32px;
  padding-inline: 9px;
  white-space: nowrap;
}

.respondent-coverage-register th:last-child,
.respondent-coverage-register td:last-child {
  position: sticky;
  inset-inline-end: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: -10px 0 16px -16px rgba(15, 23, 42, .55);
}

.respondent-coverage-register th:last-child { z-index: 4; }

[dir="rtl"] .respondent-coverage-register th:last-child,
[dir="rtl"] .respondent-coverage-register td:last-child {
  box-shadow: 10px 0 16px -16px rgba(15, 23, 42, .55);
}

@media (max-width: 1100px) {
  .respondent-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .respondent-overview-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .respondent-overview-metrics { grid-template-columns: minmax(0, 1fr); }
  .respondent-metric-copy > small { white-space: normal; }
  .coverage-chart-wrap { height: 250px; padding-inline: 10px; }
}

.respondent-policy-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.respondent-policy-guide > div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 16px 18px;
}

.respondent-policy-guide > div + div {
  border-inline-start: 1px solid var(--line);
}

.respondent-policy-guide > div > .material-symbols-rounded {
  color: var(--primary-500);
  font-size: 23px;
}

.respondent-policy-guide span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.respondent-policy-guide b {
  font-size: 13px;
}

.respondent-policy-guide small,
.employee-exception-grid label > small,
.policy-check small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.respondent-rule-editor {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--primary-500) 4%, var(--surface));
}

.respondent-rule-editor[hidden] {
  display: none !important;
}

.respondent-rule-editor > label,
.employee-exception-grid > label,
.appraisal-picker-grid > label,
.assignment-add-form > label,
.external-invite-form > label {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.respondent-rule-editor select,
.respondent-rule-editor input,
.employee-exception-grid select,
.employee-exception-grid textarea,
.appraisal-picker-grid select,
.appraisal-picker-grid input,
.assignment-add-form select,
.assignment-add-form input,
.external-invite-form select,
.external-invite-form input,
.external-invite-form textarea {
  width: 100%;
  min-height: 42px;
}

.policy-check {
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: flex-start;
  gap: 10px !important;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.policy-check input {
  width: 18px;
  min-height: 18px;
  margin-top: 2px;
  accent-color: var(--primary-500);
}

.policy-check span {
  display: grid;
  gap: 3px;
}

.respondent-rule-editor-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.respondent-rule-filter {
  display: flex;
  justify-content: flex-end;
  padding: 14px 18px 0;
}

.respondent-rule-filter label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.respondent-rule-filter select {
  min-width: 230px;
}

.respondent-rules-table {
  min-width: 1320px;
}

.respondent-rules-table th,
.respondent-rules-table td {
  text-align: center !important;
  vertical-align: middle !important;
}

.respondent-rules-table td:first-child,
.respondent-rules-table td:nth-child(2) {
  min-width: 150px;
}

.respondent-rules-table td:nth-child(5) {
  min-width: 250px;
}

.respondent-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-500) 10%, var(--surface));
  color: var(--primary-700);
  font-size: 11px;
  font-weight: 800;
}

.respondent-kind.kind-external {
  background: color-mix(in srgb, var(--secondary-500) 14%, var(--surface));
  color: color-mix(in srgb, var(--secondary-500) 72%, var(--text));
}

.respondent-kind.kind-trainee {
  background: color-mix(in srgb, #2878d0 12%, var(--surface));
  color: #2868a8;
}

.table-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.table-toggle input {
  width: 17px;
  height: 17px;
  accent-color: var(--primary-500);
}

.range-inputs {
  display: grid;
  grid-template-columns: repeat(2, 66px);
  gap: 6px;
  justify-content: center;
}

.range-inputs label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.range-inputs input {
  width: 66px;
  text-align: center;
}

.appraisal-picker-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
}

.employee-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.employee-combobox {
  position: relative;
  width: 100%;
  min-width: 0;
}

.employee-combobox-input {
  width: 100%;
  min-height: 42px;
  padding-inline-end: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

[dir="rtl"] .employee-combobox-input {
  background-position: 18px 18px, 13px 18px;
  padding-inline-start: 42px;
  padding-inline-end: 12px;
}

.employee-combobox-list {
  position: fixed;
  z-index: 2147483400;
  box-sizing: border-box;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
}

.employee-combobox-list[hidden] {
  display: none !important;
}

.employee-combobox-option {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-align: start;
  cursor: pointer;
}

.employee-combobox-option:hover,
.employee-combobox-option:focus-visible,
.employee-combobox-option.is-active {
  outline: none;
  background: color-mix(in srgb, var(--primary-500) 10%, var(--surface));
  color: var(--primary-700);
}

.employee-combobox-empty {
  display: block;
  padding: 14px 10px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.appraisal-search {
  position: relative;
}

.appraisal-search > .material-symbols-rounded {
  position: absolute;
  inset-inline-start: 12px;
  bottom: 10px;
  z-index: 1;
  color: var(--muted);
  font-size: 20px;
}

.appraisal-search input {
  padding-inline-start: 40px;
}

.employee-policy-context {
  display: grid;
  grid-template-columns: minmax(300px, 1.5fr) repeat(3, minmax(150px, .7fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.employee-policy-context > div {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 16px 18px;
}

.employee-policy-context > div + div {
  border-inline-start: 1px solid var(--line);
}

.employee-policy-context > div > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.employee-policy-context > div > b {
  font-size: 16px;
}

.employee-policy-context small {
  color: var(--muted);
  font-size: 11px;
}

.employee-policy-context .employee-policy-identity {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
}

.employee-policy-identity > span:last-child {
  display: grid;
  gap: 3px;
}

.employee-exception-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
}

.employee-exception-grid .exception-notes {
  grid-column: 1 / -1;
}

.employee-exception-grid textarea {
  min-height: 90px;
  resize: vertical;
}

.employee-exception-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.employee-exception-actions > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.assignment-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.assignment-context-bar > span {
  display: grid;
  gap: 3px;
}

.assignment-context-bar small {
  color: var(--muted);
}

.assignment-add-form,
.external-invite-form {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(180px, .8fr) minmax(260px, 1.2fr) auto;
  align-items: end;
  gap: 12px;
  padding: 16px 18px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--canvas) 55%, var(--surface));
}

.external-invite-form {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.external-invite-form .third {
  grid-column: span 4;
}

.external-invite-form .half {
  grid-column: span 6;
}

.external-invite-form .wide {
  grid-column: 1 / -1;
}

.external-invite-form textarea {
  min-height: 88px;
}

.external-invite-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.inline-metrics {
  display: flex;
  gap: 0;
  padding: 0 18px 18px;
}

.inline-metrics span {
  display: grid;
  gap: 2px;
  min-width: 130px;
  padding: 12px 18px;
  border-inline-start: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.inline-metrics span:first-child {
  border-inline-start: 0;
}

.inline-metrics b {
  color: var(--text);
  font-size: 22px;
}

@media (max-width: 1100px) {
  .respondent-rule-editor,
  .external-invite-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .external-invite-form .third,
  .external-invite-form .half {
    grid-column: span 1;
  }

  .external-invite-form .wide,
  .external-invite-actions {
    grid-column: 1 / -1;
  }

  .employee-policy-context {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .employee-policy-context .employee-policy-identity {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--line);
  }

  .employee-policy-context > div:nth-child(2) {
    border-inline-start: 0;
  }

  .assignment-add-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .respondent-policy-guide,
  .respondent-rule-editor,
  .appraisal-picker-grid,
  .employee-policy-context,
  .employee-exception-grid,
  .assignment-add-form,
  .external-invite-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .respondent-policy-guide > div + div,
  .employee-policy-context > div + div {
    border-inline-start: 0;
    border-top: 1px solid var(--line);
  }

  .respondent-rule-filter,
  .respondent-rule-filter label,
  .respondent-rule-filter select {
    width: 100%;
  }

  .respondent-rule-filter label {
    align-items: stretch;
    flex-direction: column;
  }

  .employee-policy-context .employee-policy-identity,
  .employee-exception-grid .exception-notes,
  .external-invite-form .third,
  .external-invite-form .half,
  .external-invite-form .wide,
  .external-invite-actions {
    grid-column: auto;
  }

  .employee-policy-context > div:nth-child(2) {
    border-top: 1px solid var(--line);
  }

  .employee-exception-actions,
  .assignment-context-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .employee-exception-actions .btn,
  .assignment-context-bar .btn,
  .assignment-add-form .btn,
  .external-invite-form .btn {
    width: 100%;
    justify-content: center;
  }

  .inline-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0 12px 14px;
  }

  .inline-metrics span {
    min-width: 0;
    padding: 10px;
  }
}

/* ============================================================
   IMPECCABLE + STITCH PRODUCTION PASS
   Shared enterprise styling for the real PHP/Oracle pages.
   ============================================================ */

:root {
  --bg: #f8fafb;
  --surface: #ffffff;
  --surface-soft: #f2f4f5;
  --surface-raised: #ffffff;
  --ink: #191c1d;
  --muted: #3e4949;
  --muted-2: #6e7979;
  --line: #bdc9c8;
  --line-soft: #e1e7e6;
  --primary-50: #e3fffe;
  --primary-100: #c8f3f2;
  --primary-500: #008080;
  --primary-600: #006565;
  --primary-700: #004f4f;
  --primary-900: #002020;
  --secondary-50: #fff3e6;
  --secondary-100: #ffdcc3;
  --secondary-500: #fd8b00;
  --secondary-600: #904d00;
  --rail-bg: #ffffff;
  --rail-text: #191c1d;
  --rail-muted: #6e7979;
  --rail-hover: #eef5f4;
  --rail-active-bg: rgba(0, 128, 128, .08);
  --rail-active-text: #006565;
  --radius: 8px;
  --radius-sm: 8px;
  --shadow: none;
  --shadow-tight: none;
}

.dark {
  --bg: #121819;
  --surface: #1d2426;
  --surface-soft: #252d2f;
  --surface-raised: #20282a;
  --ink: #eff6f6;
  --muted: #c0cccb;
  --muted-2: #91a2a1;
  --line: #40504f;
  --line-soft: #31403f;
  --rail-bg: #171f21;
  --rail-text: #eaf1f1;
  --rail-muted: #9aa9a8;
  --rail-hover: #223033;
  --rail-active-bg: rgba(118, 214, 213, .12);
  --rail-active-text: #76d6d5;
}

body {
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
}

.font-en,
.font-en button,
.font-en input,
.font-en select,
.font-en textarea {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, "Segoe UI", Arial, sans-serif;
}

.font-ar,
.font-ar button,
.font-ar input,
.font-ar select,
.font-ar textarea {
  font-family: Tajawal, "Segoe UI", Arial, sans-serif;
}

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--line) 78%, var(--muted-2)); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-500); }

.app-grid { grid-template-columns: 270px minmax(0, 1fr); background: var(--bg); }
.app-grid.collapsed { grid-template-columns: 76px minmax(0, 1fr); }

.epes-rail {
  border-inline-end: 1px solid var(--line-soft);
  box-shadow: none;
  padding-block: 18px 14px;
}

.rail-brand {
  min-height: 58px;
  padding: 0 20px 18px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 8px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--primary-600);
  box-shadow: none;
}

.brand-mark .material-symbols-rounded { font-size: 23px; }
.rail-brand strong { color: var(--primary-700); font-size: 18px; line-height: 1; }
.dark .rail-brand strong { color: var(--primary-100); }
.rail-brand span,
.top-title p,
.hero-kicker,
.rail-section-toggle,
.metric-grid article span,
.stat-card .sc-t,
table.epes-data-table th {
  letter-spacing: 0;
}

.rail-toggle {
  background: var(--surface-soft);
  color: var(--muted-2);
  border-color: var(--line-soft);
}

.rail-toggle:hover {
  color: var(--primary-600);
  background: var(--primary-50);
  border-color: var(--primary-100);
}

.rail-nav { padding: 8px 12px 0; }
.rail-section { margin: 6px 0; }
.rail-section-toggle {
  min-height: 34px;
  padding: 8px 10px;
  color: var(--rail-muted);
  font-size: 11px;
}

.rail-section-toggle:hover { color: var(--rail-text); background: var(--rail-hover); }

.rail-nav a {
  min-height: 42px;
  padding: 10px 12px;
  color: var(--rail-text);
  border-radius: 8px;
}

.rail-section-links a { padding-inline-start: 18px; }
.rail-nav a:hover { color: var(--primary-700); background: var(--rail-hover); }
.dark .rail-nav a:hover { color: var(--primary-100); }

.rail-nav a.active {
  background: var(--rail-active-bg);
  color: var(--rail-active-text);
  box-shadow: inset 4px 0 0 var(--primary-500);
}

[dir="rtl"] .rail-nav a.active { box-shadow: inset -4px 0 0 var(--primary-500); }
.app-grid.collapsed .rail-toggle { inset-block-start: 68px; inset-inline-end: 8px; }

.epes-topbar {
  min-height: 64px;
  padding: 8px 28px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(12px);
}

.top-title p {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 700;
}

.top-title h1 {
  margin-top: 2px;
  color: var(--primary-700);
  font-size: 21px;
  font-weight: 800;
}

.dark .top-title h1 { color: var(--primary-100); }

.top-actions { gap: 8px; }
.top-actions input {
  width: min(32vw, 320px);
  height: 40px;
  border-radius: 999px;
  border-color: var(--line-soft);
  background: var(--surface-soft);
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-color: transparent;
  background: transparent;
}

.icon-btn:hover {
  border-color: var(--line-soft);
  color: var(--primary-600);
  background: var(--surface-soft);
}

.profile-chip {
  min-width: 218px;
  height: 44px;
  border-inline-start-color: var(--line-soft);
  padding-inline-start: 12px;
}

.profile-chip img,
.profile-summary img,
.avatar-fallback {
  width: 36px;
  height: 36px;
}

.dropdown-panel {
  top: calc(100% + 10px);
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
}

.dark .dropdown-panel { box-shadow: 0 18px 42px rgba(0, 0, 0, .35); }

.dropdown-panel header,
.profile-summary {
  background: var(--surface-soft);
}

.notice-row {
  grid-template-columns: 34px 1fr;
  padding: 14px 15px;
}

.notice-row > .material-symbols-rounded {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-50);
}

.dark .notice-row > .material-symbols-rounded { background: rgba(118, 214, 213, .12); }

.btn,
.mini-btn,
.ctl,
.cell-input,
.field input,
.field textarea,
.field select {
  border-radius: 8px;
}

.btn {
  min-height: 40px;
  padding-inline: 15px;
  box-shadow: none;
}

.btn.primary,
.mini-btn {
  background: var(--primary-600);
  border-color: var(--primary-600);
  box-shadow: none;
}

.btn.warm {
  background: var(--secondary-500);
  border-color: var(--secondary-500);
  box-shadow: none;
}

.epes-content {
  width: min(1500px, 100%);
  padding: 24px 28px 34px;
  gap: 18px;
}

.mode-banner {
  min-height: 52px;
  padding: 12px 16px;
  border-color: var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: inset 0 3px 0 var(--primary-500);
}

.mode-banner span {
  background: var(--surface-soft);
  color: var(--muted);
  border: 1px solid var(--line-soft);
}

.mode-banner span:nth-of-type(1) {
  background: var(--primary-50);
  color: var(--primary-700);
  border-color: var(--primary-100);
}

.dark .mode-banner span:nth-of-type(1) {
  background: rgba(118, 214, 213, .12);
  color: var(--primary-100);
  border-color: rgba(118, 214, 213, .2);
}

.score-strip,
.stat-cards,
.metric-grid {
  gap: 16px;
}

.score-strip article,
.metric-grid article,
.stat-card,
.panel,
.page-hero {
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: none;
  background: var(--surface);
}

.score-strip article {
  min-height: 118px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}

.score-strip article::before,
.stat-card::before,
.metric-grid article::before {
  content: "";
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: var(--primary-500);
  position: absolute;
  inset-inline-start: 20px;
  inset-block-start: 0;
}

.score-strip article:first-child {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

.score-strip article:nth-child(5)::before,
.stat-card:has(.sc-chip.w)::before {
  background: var(--secondary-500);
}

.score-strip span,
.score-strip article:first-child span {
  color: var(--muted-2);
  font-size: 11px;
}

.score-strip strong {
  font-size: 25px;
  color: var(--ink);
}

.score-strip small,
.score-strip article:first-child small {
  background: var(--surface-soft);
  color: var(--muted);
  border: 1px solid var(--line-soft);
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1.8fr) minmax(320px, .9fr);
  gap: 18px;
}

.panel header {
  min-height: 64px;
  padding: 17px 20px;
  background: var(--surface);
}

.panel h2 {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.panel header span {
  color: var(--muted);
  font-size: 12.5px;
}

.heatmap {
  padding: 18px 20px 22px;
  gap: 10px;
}

.heatmap b {
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: 0;
}

.heatmap span {
  border-radius: 4px;
  background: color-mix(in srgb, var(--primary-500) 20%, var(--surface-soft));
  color: var(--primary-900);
}

.heatmap span:nth-of-type(4n+1) { background: color-mix(in srgb, var(--primary-500) 78%, white); color: #fff; }
.heatmap span:nth-of-type(4n+2) { background: color-mix(in srgb, var(--primary-500) 50%, white); color: var(--primary-900); }
.heatmap span:nth-of-type(4n+3) { background: color-mix(in srgb, var(--primary-500) 26%, white); color: var(--primary-900); }
.heatmap span:nth-of-type(4n+4) { background: color-mix(in srgb, var(--line) 44%, white); color: var(--muted); }

.task-list { padding: 16px; }
.task-list > div,
.checklist .ck,
.decision-main,
.decision-aside,
.workflow-steps div {
  border-color: var(--line);
  background: var(--surface);
}

.task-list > div {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary-500) 7%, transparent), transparent 42%),
    var(--surface);
}

.empty-state {
  min-height: 120px;
  border-radius: 8px;
  background: var(--surface-soft);
  border-color: var(--line);
}

.view-head {
  min-height: 66px;
  align-items: center;
}

.view-head h2 {
  margin: 4px 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.18;
}

.view-head p {
  color: var(--muted);
  font-size: 13px;
}

.view-head .vh-kicker,
.hero-kicker {
  color: var(--primary-600);
  font-size: 11px;
}

.actor-note {
  min-height: 48px;
  background: var(--primary-50);
  color: var(--primary-900);
  border-color: var(--primary-100);
}

.dark .actor-note {
  background: rgba(118, 214, 213, .1);
  color: var(--primary-100);
}

.stat-card {
  min-height: 130px;
  position: relative;
  padding: 18px;
}

.stat-card .sc-chip {
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 8px;
}

.stat-card .sc-v {
  font-size: 25px;
}

.stat-card .sc-t {
  margin-top: 4px;
  color: var(--muted);
}

.toolbar {
  padding: 12px 16px;
  background: var(--surface);
}

.seg {
  border-radius: 999px;
  background: var(--surface-soft);
}

.seg a {
  border-radius: 999px;
  padding: 8px 13px;
}

.seg a.active {
  color: var(--primary-700);
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}

.table-wrap { padding: 0; }

table.epes-data-table {
  font-size: 13px;
}

table.epes-data-table th,
table.epes-data-table td {
  min-height: 48px;
  padding: 12px 16px;
}

table.epes-data-table th {
  background: var(--surface-soft);
  color: var(--muted-2);
  font-size: 11px;
}

table.epes-data-table th .th-filter {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  margin-inline-start: 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted-2);
  vertical-align: middle;
  cursor: pointer;
}

table.epes-data-table th .th-filter:hover {
  border-color: var(--line);
  background: var(--surface);
  color: var(--primary-600);
}

table.epes-data-table th .th-filter .material-symbols-rounded {
  font-size: 16px;
}

table.epes-data-table tbody tr:hover td {
  background: color-mix(in srgb, var(--primary-500) 5%, var(--surface));
}

.status-pill,
.band,
.tag {
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.scorebar .sb-track {
  height: 7px;
  background: var(--surface-soft);
}

.scorebar .sb-track i {
  background: var(--primary-600);
}

.scorebar .sb-track i.warm {
  background: var(--secondary-500);
}

.pipeline {
  padding: 22px 18px 26px;
}

.pipeline .pstep .node {
  width: 38px;
  height: 38px;
}

.pipeline .pstep.active .node {
  box-shadow: 0 0 0 5px var(--primary-50);
}

.action-drawer aside {
  border-inline-start: 1px solid var(--line);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .22);
}

/* Login: premium split screen while keeping the real PHP form. */
.epes-login {
  padding: 0;
  place-items: stretch;
  background:
    linear-gradient(90deg, var(--primary-600) 0 58%, var(--surface) 58% 100%);
}

.login-wrap {
  width: 100%;
  min-height: 100vh;
  grid-template-columns: minmax(0, 1.35fr) minmax(390px, .65fr);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.login-panel {
  padding: 56px;
  background:
    linear-gradient(145deg, #006565, #004f4f 62%, #002020);
}

.login-panel::after {
  display: none;
}

.login-panel h1 {
  max-width: 620px;
  font-size: 48px;
  line-height: 1.02;
}

.login-panel p:not(.eyebrow) {
  color: #d6fffb;
  font-size: 16px;
}

.login-card {
  padding: 56px;
  align-content: center;
}

.login-card::before {
  content: "EPES";
  display: block;
  color: var(--primary-700);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 34px;
}

.dark .login-card::before { color: var(--primary-100); }

.login-card h2 {
  font-size: 31px;
}

.login-card label {
  color: var(--muted);
  font-size: 12px;
}

.login-card input {
  min-height: 52px;
  border-color: var(--line);
  background: var(--surface);
}

.login-card button {
  min-height: 52px;
  border-radius: 8px;
  background: var(--primary-600);
}

.login-card a {
  color: var(--primary-700);
}

.login-capabilities div,
.login-system-state div {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
}

.profile-cover {
  background: var(--primary-600);
}

@media (max-width: 1180px) {
  .epes-topbar {
    padding: 12px 16px;
  }

  .top-actions input {
    width: 240px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* ===================== ENTERPRISE TABLE ACTIONS ===================== */
.epes-table-tools {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}

.epes-table-search-group {
  flex: 1;
  min-width: min(420px, 100%);
  display: grid;
  gap: 8px;
}

.epes-table-search {
  min-width: min(340px, 100%);
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.epes-table-search .material-symbols-rounded {
  position: absolute;
  inset-inline-start: 13px;
  z-index: 1;
  color: var(--muted-2);
  font-size: 19px;
  pointer-events: none;
}

.epes-table-search input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  padding-block: 0;
  padding-inline-start: 42px;
  padding-inline-end: 14px;
  font-weight: 400;
  outline: none;
}

.epes-table-search input:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 14%, transparent);
}

.epes-table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.epes-table-actions .btn small {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  font-size: 11px;
}

.epes-table-menu-wrap {
  position: relative;
  flex: none;
}

.epes-table-menu {
  position: fixed;
  inset-inline-end: auto;
  top: 0;
  left: 0;
  z-index: 2147482500;
  width: 220px;
  max-height: min(560px, 70vh);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
  padding: 6px;
}

.epes-table-menu button {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  text-align: start;
  padding: 0 10px;
  cursor: pointer;
}

.epes-table-menu button:hover {
  background: var(--surface-soft);
  color: var(--primary-600);
}

.table-action-pills,
.hidden-col-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.table-action-pill,
.hidden-col-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 0 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.table-action-pill:hover,
.hidden-col-pill:hover {
  color: var(--primary-600);
  border-color: var(--primary-500);
}

.table-action-pill .material-symbols-rounded,
.hidden-col-pill .material-symbols-rounded {
  font-size: 15px;
}

.epes-table-popover {
  position: absolute;
  z-index: 80;
  width: 280px;
  max-height: min(520px, 70vh);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
  padding: 12px;
}

.epes-table-popover strong {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
}

.epes-table-popover label {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.epes-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.epes-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .54);
  backdrop-filter: blur(4px);
}

.epes-modal-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(720px, 92vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .24);
  overflow: hidden;
}

.epes-modal-card header,
.epes-modal-card footer {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.epes-modal-card footer {
  justify-content: flex-end;
  border-top: 1px solid var(--line-soft);
  border-bottom: 0;
}

.epes-modal-card h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.epes-modal-card header button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  cursor: pointer;
}

.epes-modal-body {
  overflow: auto;
  padding: 18px;
}

.modal-field-stack {
  display: grid;
  gap: 8px;
}

/* Appraisal-year switcher on Employee Appraisal Detail */
.year-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.year-switch .ys-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-inline-end: 4px;
}
.year-switch .ys-label .material-symbols-rounded {
  font-size: 18px;
}
.ys-pill {
  display: inline-flex;
  align-items: center;
  min-width: 52px;
  justify-content: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ys-pill:hover {
  border-color: var(--primary);
}
.ys-pill.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Provisional (not-yet-approved) figure badge */
.prov-badge {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--warn-bg, #fff4e5);
  color: var(--warn, #b26a00);
  vertical-align: middle;
}
table.epes-data-table tfoot td {
  border-top: 2px solid var(--border);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.modal-field,
.check-row {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.check-row {
  grid-template-columns: 18px 1fr;
  align-items: center;
  min-height: 34px;
}

.modal-field input,
.modal-field select {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  padding: 0 11px;
  outline: none;
}

.modal-field input:focus,
.modal-field select:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 14%, transparent);
}

.modal-help {
  margin: 0 0 14px;
  color: var(--muted);
}

.modal-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.modal-action-grid button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
}

.modal-action-grid button:hover {
  border-color: var(--primary-500);
  color: var(--primary-600);
  background: var(--primary-50);
}

tr.is-dirty td,
.js-unit.is-dirty {
  background: color-mix(in srgb, var(--secondary-500) 8%, var(--surface));
}

tr.is-saving td {
  opacity: .7;
}

table.epes-data-table.compact th,
table.epes-data-table.compact td {
  padding: 10px 12px;
}

table.epes-data-table tbody tr.is-selected td {
  background: var(--primary-50);
  color: var(--primary-900);
}

.dark table.epes-data-table tbody tr.is-selected td {
  background: rgba(118, 214, 213, .1);
  color: var(--primary-100);
}

/* ===================== POSITION KPI WORKBENCH ===================== */
.position-workbench > header {
  border-bottom: 1px solid var(--line-soft);
}

.position-layout {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
  min-height: 720px;
}

.position-master {
  min-width: 0;
  border-inline-end: 1px solid var(--line-soft);
  background: var(--surface);
}

.position-summary {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-soft);
}

.position-summary span {
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.position-summary strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.position-summary small {
  color: var(--muted);
  font-weight: 700;
}

.position-detail {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 16px;
  background: var(--bg);
}

.panel.nested-flat {
  box-shadow: none;
}

.template-add-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.template-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
}

.template-form-grid .wide {
  grid-column: span 2;
}

.template-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cell-input.wide {
  width: 180px;
}

.cell-input.xwide {
  width: min(360px, 42vw);
}

@media (max-width: 1180px) {
  .position-layout {
    grid-template-columns: 1fr;
  }

  .position-master {
    border-inline-end: 0;
    border-bottom: 1px solid var(--line-soft);
  }
}

@media (max-width: 760px) {
  .epes-table-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .epes-table-search,
  .epes-table-search-group,
  .epes-table-actions,
  .epes-table-menu-wrap,
  .epes-table-menu-wrap .btn {
    width: 100%;
  }

  .epes-table-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .epes-table-menu {
    position: static;
    width: 100%;
    margin-top: 8px;
  }

  .template-form-grid {
    grid-template-columns: 1fr;
  }

  .template-form-grid .wide {
    grid-column: auto;
  }

  .cell-input.xwide,
  .cell-input.wide {
    width: 180px;
  }
}

/* ===================== EWA VALUES 360 WORK QUEUE ===================== */
.relationship-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.relationship-selector button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 0 12px;
  font-weight: 800;
  cursor: pointer;
}

.relationship-selector button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.relationship-selector button.active {
  border-color: color-mix(in srgb, var(--primary-500) 36%, transparent);
  background: var(--primary-50);
  color: var(--primary-700);
}

.relationship-selector .material-symbols-rounded {
  font-size: 19px;
}

.relationship-selector button > span:not(.material-symbols-rounded) {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 11px;
}

.relationship-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.relationship-card {
  min-height: 126px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.relationship-card .rel-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--primary-50);
  color: var(--primary-600);
}

.relationship-card h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.relationship-card p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.relationship-task-region {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.relationship-task-region[hidden] {
  display: none !important;
}

.relationship-region-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.relationship-region-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}

.relationship-region-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.values-grid .rating-compact {
  flex-wrap: nowrap;
  gap: 5px;
}

.values-grid .rating-compact span {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.values-grid .grid-comment {
  width: min(320px, 36vw);
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  padding: 9px 10px;
  resize: vertical;
}

.values-grid .grid-comment:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 14%, transparent);
  outline: none;
}

.values-grid .comment-rule {
  display: none;
  margin-top: 5px;
  color: var(--secondary-600);
  font-size: 11px;
  font-weight: 700;
}

.values-grid tr.needs-comment td {
  background: color-mix(in srgb, var(--secondary-500) 8%, var(--surface));
}

.values-grid tr.needs-comment .comment-rule {
  display: block;
}

.values-grid tr.needs-comment .grid-comment {
  border-color: var(--secondary-500);
  background: var(--secondary-50);
}

.values-grid tr.is-saved td {
  background: color-mix(in srgb, var(--primary-500) 5%, var(--surface));
}

@media (max-width: 1180px) {
  .relationship-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .relationship-grid {
    grid-template-columns: 1fr;
  }

  .relationship-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .relationship-card .mini-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .values-grid .grid-comment {
    width: 220px;
  }

  .modal-action-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .epes-login {
    background: var(--surface);
  }

  .login-wrap {
    grid-template-columns: 1fr;
  }

  .login-panel {
    min-height: 280px;
  }

  .login-panel::after {
    width: 70vw;
    opacity: .42;
  }

  .top-actions {
    gap: 8px;
  }

  .profile-chip {
    min-width: 100%;
  }

  .seg {
    width: 100%;
    overflow: auto;
    justify-content: flex-start;
  }

  .view-head .vh-actions {
    width: 100%;
    margin-inline-start: 0;
  }
}

/* ===================== DESIGN TASTE ENTERPRISE REDESIGN =====================
   Targeted evolution for a dense HR/KPI product. The intent is a calm
   Fluent/Carbon-inspired operational shell while preserving the existing
   PHP routes, DataTables, Chart.js, Material Icons, teal brand, and orange
   warning accent.
   ========================================================================== */
:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-raised: #ffffff;
  --ink: #111827;
  --muted: #5f6b7a;
  --muted-2: #7b8794;
  --line: #dce3ea;
  --line-soft: #edf1f5;
  --primary-50: #e7f5f3;
  --primary-100: #c7ebe7;
  --primary-500: #008080;
  --primary-600: #006f6f;
  --primary-700: #005c5c;
  --secondary-50: #fff3ea;
  --secondary-100: #fedfc2;
  --secondary-500: #f97316;
  --secondary-600: #d95b09;
  --rail-bg: #17212b;
  --rail-text: #ecf2f7;
  --rail-muted: #9aa8b6;
  --rail-hover: rgba(255, 255, 255, .07);
  --rail-active-bg: rgba(0, 128, 128, .18);
  --rail-active-text: #9ff0e8;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 16px 34px rgba(15, 23, 42, .07);
  --shadow-tight: 0 1px 2px rgba(15, 23, 42, .06);
  --focus-ring: 0 0 0 3px rgba(0, 128, 128, .18);
}

.dark {
  --bg: #111820;
  --surface: #18222d;
  --surface-soft: #121b24;
  --surface-raised: #1d2935;
  --ink: #f8fafc;
  --muted: #b2beca;
  --muted-2: #8f9daa;
  --line: #2b3947;
  --line-soft: #22303d;
  --primary-50: rgba(0, 128, 128, .17);
  --primary-100: rgba(0, 128, 128, .25);
  --secondary-50: rgba(249, 115, 22, .16);
  --secondary-100: rgba(249, 115, 22, .24);
  --rail-bg: #101820;
  --rail-hover: rgba(255, 255, 255, .08);
  --shadow: 0 16px 34px rgba(0, 0, 0, .26);
}

body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, white) 0, var(--bg) 360px),
    var(--bg);
}

.dark body,
body:has(.dark) {
  background: var(--bg);
}

.app-grid {
  grid-template-columns: 276px minmax(0, 1fr);
}

.app-grid.collapsed {
  grid-template-columns: 82px minmax(0, 1fr);
}

.epes-rail {
  padding: 16px 10px 12px;
  border-inline-end: 1px solid rgba(255, 255, 255, .08);
}

.rail-brand {
  min-height: 60px;
  padding: 0 10px 14px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 10px 22px rgba(0, 128, 128, .22);
}

.rail-brand strong {
  color: #fff;
  font-size: 17px;
  letter-spacing: 0;
}

.rail-brand span {
  color: var(--rail-muted);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
}

.rail-toggle {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--rail-muted);
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .08);
}

.rail-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

.rail-nav {
  padding: 2px 0 0;
}

.rail-section-toggle,
.rail-nav a {
  border-radius: 8px;
}

.rail-section-toggle {
  margin: 10px 0 4px;
  padding: 8px 10px;
  color: var(--rail-muted);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.rail-section-toggle:hover {
  background: rgba(255, 255, 255, .04);
  color: #fff;
}

.rail-section-links a {
  min-height: 40px;
  padding: 9px 10px;
  font-size: 12.5px;
  color: rgba(236, 242, 247, .88);
}

.rail-nav a:hover {
  background: var(--rail-hover);
  color: #fff;
}

.rail-nav a.active {
  background: var(--rail-active-bg);
  color: var(--rail-active-text);
  box-shadow: inset 3px 0 0 var(--primary-500);
}

[dir="rtl"] .rail-nav a.active {
  box-shadow: inset -3px 0 0 var(--primary-500);
}

.nav-label .material-symbols-rounded {
  font-size: 20px;
}

.epes-topbar {
  min-height: 68px;
  padding: 10px 24px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.top-title p {
  color: var(--muted-2);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.top-title h1 {
  margin-top: 2px;
  color: var(--ink);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0;
}

.top-actions {
  gap: 8px;
}

.top-search input,
.epes-table-search input,
.ctl,
.cell-input,
.field input,
.field textarea,
.field select,
.modal-field input,
.modal-field select,
.modal-field textarea,
.login-card input {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, .02);
}

.dark .top-search input,
.dark .epes-table-search input,
.dark .ctl,
.dark .cell-input,
.dark .field input,
.dark .field textarea,
.dark .field select,
.dark .modal-field input,
.dark .modal-field select,
.dark .modal-field textarea,
.dark .login-card input {
  background: var(--surface-soft);
}

.top-search input:focus,
.epes-table-search input:focus,
.ctl:focus,
.cell-input:focus,
.field input:focus,
.field textarea:focus,
.field select:focus,
.modal-field input:focus,
.modal-field select:focus,
.modal-field textarea:focus,
.login-card input:focus {
  border-color: var(--primary-500);
  box-shadow: var(--focus-ring);
}

.icon-btn,
.profile-chip,
.btn,
.mini-btn,
.relationship-selector button,
.table-action-pill,
.hidden-col-pill {
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease;
}

.icon-btn:active,
.profile-chip:active,
.btn:active,
.mini-btn:active,
.relationship-selector button:active,
.table-action-pill:active {
  transform: translateY(1px);
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border-color: var(--line);
  background: var(--surface);
  color: var(--muted);
}

.icon-btn:hover {
  border-color: var(--primary-100);
  background: var(--primary-50);
  color: var(--primary-700);
}

.notif-dot {
  box-shadow: 0 0 0 2px var(--surface);
}

.profile-chip {
  min-width: 232px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 4px 8px;
}

.profile-chip:hover {
  border-color: var(--primary-100);
  background: var(--surface-soft);
}

.profile-chip img,
.profile-summary img,
.avatar-fallback {
  border-radius: 8px;
}

.dropdown-panel {
  border-radius: 8px;
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.dropdown-panel header,
.profile-summary {
  background: var(--surface-soft);
}

.epes-content {
  width: auto;
  max-width: 1560px;
  padding: 22px 24px 32px;
  gap: 18px;
}

.epes-main {
  min-width: 0;
  overflow-x: hidden;
}

.mode-banner {
  min-height: 48px;
  border-radius: 8px;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
  padding: 10px 12px;
}

.mode-banner strong {
  color: var(--ink);
  font-weight: 800;
}

.mode-banner span {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
}

.mode-banner span:nth-of-type(1) {
  border-color: var(--primary-100);
  background: var(--primary-50);
  color: var(--primary-700);
}

.view-head,
.page-hero {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary-500) 7%, transparent), transparent 55%),
    var(--surface);
}

.view-head h2,
.page-hero h2 {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.15;
}

.view-head p,
.page-hero p {
  color: var(--muted);
}

.view-head .vh-kicker,
.hero-kicker {
  color: var(--primary-700);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.actor-note {
  border-radius: 8px;
  border-color: color-mix(in srgb, var(--primary-500) 24%, transparent);
  background: color-mix(in srgb, var(--primary-50) 80%, var(--surface));
  color: var(--primary-900);
  box-shadow: none;
}

.dark .actor-note {
  color: #b8fff7;
}

.score-strip,
.stat-cards,
.metric-grid {
  gap: 14px;
}

.score-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stat-card,
.score-strip article,
.metric-grid article,
.panel,
.relationship-card,
.template-add-panel {
  border-radius: 8px;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-tight);
}

.stat-card-action {
  width: 100%;
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.stat-card-action:hover,
.stat-card-action:focus-visible {
  border-color: color-mix(in srgb, var(--primary-500) 55%, var(--line));
  box-shadow: 0 10px 24px rgba(15, 118, 110, .10);
  outline: none;
  transform: translateY(-1px);
}

.stat-card-action.is-active {
  border-color: var(--primary-500);
  box-shadow: inset 3px 0 0 var(--primary-500), var(--shadow-tight);
}

[dir="rtl"] .stat-card-action.is-active {
  box-shadow: inset -3px 0 0 var(--primary-500), var(--shadow-tight);
}

.panel {
  overflow: clip;
  min-width: 0;
  max-width: 100%;
}

.panel header {
  min-height: 62px;
  padding: 16px 18px;
  border-bottom-color: var(--line-soft);
  background: linear-gradient(180deg, var(--surface), var(--surface-soft));
}

.panel h2 {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.panel header span {
  color: var(--muted);
}

.score-strip article,
.stat-card {
  min-height: 118px;
  padding: 18px;
  position: relative;
}

.score-strip article::before,
.stat-card::before,
.metric-grid article::before {
  width: 36px;
  height: 3px;
  inset-inline-start: 18px;
  background: var(--primary-500);
}

.score-strip article:nth-child(5)::before,
.stat-card:has(.sc-chip.w)::before {
  background: var(--secondary-500);
}

.score-strip article:first-child {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--primary-500) 22%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary-50) 72%, var(--surface)), var(--surface));
}

.score-strip strong,
.stat-card .sc-v {
  color: var(--ink);
  font-size: 26px;
  letter-spacing: 0;
}

.score-strip span,
.score-strip article:first-child span,
.stat-card .sc-t,
.metric-grid article span {
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

.score-strip small,
.score-strip article:first-child small {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
}

.stat-card .sc-chip {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--primary-50);
  color: var(--primary-700);
}

.stat-card .sc-chip.o,
.stat-card .sc-chip.w {
  background: var(--secondary-50);
  color: var(--secondary-600);
}

.stat-card .sc-chip.g {
  background: var(--good-bg);
  color: var(--good);
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, .9fr);
  gap: 18px;
}

.heatmap {
  gap: 8px;
}

.heatmap b {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.heatmap span {
  min-height: 36px;
  border-radius: 6px;
}

.task-list > div,
.checklist .ck,
.decision-main,
.decision-aside,
.workflow-steps div {
  border-radius: 8px;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}

.task-list > div:hover,
.checklist .ck:hover {
  border-color: color-mix(in srgb, var(--primary-500) 24%, var(--line));
  background: color-mix(in srgb, var(--primary-50) 30%, var(--surface));
}

.btn,
.mini-btn {
  border-radius: 8px;
  font-weight: 800;
}

.btn.primary,
.mini-btn:not(.soft) {
  color: #fff;
  background: var(--primary-600);
  border-color: var(--primary-600);
}

.btn.primary:hover,
.mini-btn:not(.soft):hover {
  background: var(--primary-700);
  border-color: var(--primary-700);
}

.btn.warm {
  color: #fff;
  background: var(--secondary-600);
  border-color: var(--secondary-600);
}

.mini-btn.soft,
.btn.ghost {
  color: var(--primary-700);
  background: var(--surface);
  border-color: var(--line);
}

.mini-btn.soft:hover,
.btn.ghost:hover {
  color: var(--primary-700);
  border-color: var(--primary-100);
  background: var(--primary-50);
}

.table-wrap {
  background: var(--surface);
}

.epes-table-tools {
  min-height: 58px;
  padding: 12px;
  background: var(--surface);
  border-bottom-color: var(--line);
}

.epes-table-search input {
  height: 40px;
  border-radius: 8px;
}

.epes-table-menu {
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.table-action-pill,
.hidden-col-pill {
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
}

.table-action-pill:hover,
.hidden-col-pill:hover {
  color: var(--primary-700);
  background: var(--primary-50);
}

table.epes-data-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

table.epes-data-table th,
table.epes-data-table td {
  min-height: 46px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}

table.epes-data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

table.epes-data-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface-soft) 44%, var(--surface));
}

table.epes-data-table tbody tr:hover td {
  background: color-mix(in srgb, var(--primary-50) 54%, var(--surface));
}

table.epes-data-table th .th-filter {
  border-radius: 6px;
}

.dt-container .dt-info,
.dt-container .dt-paging {
  padding: 10px 12px;
  color: var(--muted);
}

.dt-container .dt-paging .dt-paging-button {
  border-radius: 6px !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button:hover {
  border-color: var(--primary-100) !important;
  background: var(--primary-50) !important;
  color: var(--primary-700) !important;
}

.status-pill,
.band,
.tag {
  border-radius: 999px;
  font-weight: 800;
}

.scorebar .sb-track {
  height: 7px;
  background: color-mix(in srgb, var(--line) 80%, var(--surface-soft));
}

.scorebar .sb-track i {
  background: var(--primary-500);
}

.scorebar .sb-track i.warm {
  background: var(--secondary-500);
}

.relationship-selector {
  gap: 6px;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-tight);
}

.relationship-selector button {
  border-radius: 8px;
  color: var(--muted);
}

.relationship-selector button.active {
  border-color: color-mix(in srgb, var(--primary-500) 26%, var(--line));
  background: var(--primary-50);
  color: var(--primary-700);
}

.relationship-card {
  min-height: 118px;
}

.relationship-card .rel-icon {
  border-radius: 8px;
  background: var(--primary-50);
  color: var(--primary-700);
}

.relationship-region-head {
  padding: 2px 2px 0;
}

.values-grid .rating-compact span {
  border-radius: 8px;
}

.values-grid .grid-comment {
  border-radius: 8px;
  background: var(--surface);
}

.epes-modal-layer {
  padding: 22px;
}

.epes-modal-card {
  border-radius: 8px;
  border: 1px solid var(--line);
  box-shadow: 0 28px 80px rgba(15, 23, 42, .26);
}

.epes-modal-card header,
.epes-modal-card footer {
  background: var(--surface-soft);
}

.action-drawer {
  z-index: 2147482000;
}

.action-drawer aside {
  background: var(--surface);
}

.empty-state {
  border-radius: 8px;
  color: var(--muted);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary-50) 40%, transparent), transparent),
    var(--surface-soft);
}

.login-wrap {
  width: min(1120px, calc(100% - 32px));
  min-height: 680px;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.epes-login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(0, 128, 128, .08), transparent 36%),
    linear-gradient(315deg, rgba(249, 115, 22, .07), transparent 32%),
    var(--bg);
}

.login-panel {
  padding: 56px;
  background:
    linear-gradient(135deg, rgba(0, 128, 128, .22), transparent 36%),
    linear-gradient(160deg, #073f3f 0, #052d34 58%, #111827 100%);
}

.login-panel::after {
  display: none;
}

.login-panel h1 {
  max-width: 620px;
  font-size: 48px;
  line-height: 1.06;
  letter-spacing: 0;
}

.login-panel p:not(.eyebrow) {
  color: #d9fffb;
  font-size: 16px;
}

.login-capabilities div,
.login-system-state div {
  border-color: rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
}

.login-card {
  padding: 56px;
}

.login-card::before {
  margin-bottom: 28px;
  color: var(--primary-700);
}

.login-card h2 {
  font-size: 30px;
  letter-spacing: 0;
}

.login-card input,
.login-card button {
  min-height: 50px;
  border-radius: 8px;
}

.login-card button {
  background: var(--primary-600);
  color: #fff;
}

.login-card button:hover {
  background: var(--primary-700);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 360 invitation communications */
.communication-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.communication-metric {
  min-width: 0;
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.communication-metric:hover,
.communication-metric:focus-visible,
.communication-metric.is-active {
  border-color: var(--primary-500);
  background: color-mix(in srgb, var(--primary-50) 70%, var(--surface));
  outline: none;
}

.communication-metric:hover { transform: translateY(-1px); }
.communication-metric > .material-symbols-rounded { color: var(--primary-600); font-size: 24px; }
.communication-metric span { min-width: 0; display: grid; gap: 3px; }
.communication-metric b { font-size: 23px; line-height: 1; }
.communication-metric small { color: var(--muted); font-size: 11px; font-weight: 700; }

.template-language-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.template-language-switch a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.template-language-switch a.active { background: var(--surface); color: var(--primary-700); box-shadow: var(--shadow-tight); }

.email-template-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, .92fr);
  gap: 22px;
  padding: 20px;
  border-top: 1px solid var(--line-soft);
}

.email-template-editor {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 14px;
}

.email-template-editor > label {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}

.email-template-editor .wide,
.template-placeholders,
.email-template-actions { grid-column: 1 / -1; }
.email-template-editor textarea { min-height: 104px; resize: vertical; }
.email-template-editor textarea.compact { min-height: 76px; }

.template-placeholders {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.template-placeholders > span { margin-inline-end: 3px; color: var(--muted); font-size: 10px; font-weight: 700; }
.template-placeholders code { padding: 4px 6px; border-radius: 5px; background: var(--surface); color: var(--primary-700); font-size: 9px; overflow-wrap: anywhere; }

.email-template-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 2px;
}

.email-template-actions > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.email-template-actions > span .material-symbols-rounded { color: var(--primary-600); font-size: 17px; }

.email-live-preview { min-width: 0; align-self: start; padding: 14px; border-radius: 8px; background: #eaf1f0; color: #17312f; }
.email-preview-subject { display: grid; gap: 3px; margin-bottom: 10px; padding: 0 3px; }
.email-preview-subject small { color: #667978; font-size: 9px; font-weight: 700; }
.email-preview-subject b { overflow-wrap: anywhere; font-size: 11px; }
.email-preview-card { overflow: hidden; border: 1px solid #d8e5e3; border-radius: 8px; background: #fff; box-shadow: 0 14px 36px rgba(20, 55, 54, .12); }
.email-preview-accent { height: 4px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(72px, 1fr); }
.email-preview-accent span:first-child { background: #008080; }
.email-preview-accent span:last-child { background: #e87800; }
.email-preview-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid #e2ecea; }
.email-preview-logo { color: #007f7a; font-size: 17px; font-weight: 800; }
.email-preview-card > header > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.email-preview-card > header b { color: #006565; font-size: 12px; }
.email-preview-card > header small { color: #718381; font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-preview-card > header > .material-symbols-rounded { color: #007f7a; font-size: 17px; }
.email-preview-card > main { display: block; padding: 18px 16px; }
.email-preview-card > main > b { display: block; margin-bottom: 9px; font-size: 12px; }
.email-preview-card > main > p { min-height: 48px; margin: 0; color: #566d6b; font-size: 10px; line-height: 1.6; white-space: pre-line; }
.email-preview-identities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 14px 0; border: 1px solid #d8e5e3; border-radius: 7px; }
.email-preview-identities > span { min-width: 0; display: grid; gap: 3px; padding: 11px; }
.email-preview-identities > span + span { border-inline-start: 1px solid #d8e5e3; }
.email-preview-identities small { color: #718381; font-size: 8px; font-weight: 700; }
.email-preview-identities b { overflow-wrap: anywhere; font-size: 10px; }
.email-preview-identities em { color: #718381; font-size: 8px; font-style: normal; overflow-wrap: anywhere; }
.email-preview-card > main > button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 6px; background: #007f7a; color: #fff; font-size: 10px; font-weight: 700; pointer-events: none; }
.email-preview-security { display: flex; align-items: flex-start; gap: 6px; margin-top: 12px; padding: 9px 10px; border: 1px solid #cce9e6; border-radius: 6px; background: #eef8f7; color: #41615e; font-size: 8px; line-height: 1.5; }
.email-preview-security .material-symbols-rounded { flex: 0 0 auto; color: #007f7a; font-size: 14px; }
.email-preview-card > footer { min-height: 42px; padding: 12px 16px; border-top: 1px solid #e2ecea; color: #718381; font-size: 8px; line-height: 1.5; white-space: pre-line; }

.email-log-panel .block-muted { max-width: 230px; margin-inline: auto; overflow-wrap: anywhere; white-space: normal; }

@media (max-width: 1120px) {
  .email-template-workbench { grid-template-columns: minmax(0, 1fr); }
  .email-live-preview { width: min(100%, 640px); justify-self: center; }
}

@media (max-width: 820px) {
  .communication-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .communication-metrics,
  .email-template-editor { grid-template-columns: minmax(0, 1fr); }
  .email-template-editor .wide,
  .template-placeholders,
  .email-template-actions { grid-column: auto; }
  .email-template-workbench { padding: 14px; }
  .email-template-actions { align-items: stretch; flex-direction: column; }
  .email-template-actions .btn { width: 100%; }
  .email-live-preview { padding: 8px; }
  .email-preview-identities { grid-template-columns: minmax(0, 1fr); }
  .email-preview-identities > span + span { border-inline-start: 0; border-top: 1px solid #d8e5e3; }
}

/* Shared enterprise form contract */
:where(.epes-main, .epes-modal-layer) :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not(.cell-input):not(.dt-input):not(.epes-table-search-input),
  select:not(.cell-input):not(.dt-input):not(.employee-select-native),
  textarea:not(.cell-input):not(.dt-input)
) {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.35;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, .02);
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

:where(.epes-main, .epes-modal-layer) textarea:not(.cell-input):not(.dt-input) {
  min-height: 88px;
  padding-block: 10px;
  resize: vertical;
}

:where(.epes-main, .epes-modal-layer) select:not(.employee-select-native) {
  cursor: pointer;
}

:where(.epes-main, .epes-modal-layer) :is(input, select, textarea)::placeholder {
  color: var(--muted-2);
  opacity: 1;
}

:where(.epes-main, .epes-modal-layer) :is(input, select, textarea):focus-visible,
:where(.epes-main, .epes-modal-layer) .employee-combobox-input[aria-expanded="true"] {
  border-color: var(--primary-500);
  box-shadow: var(--focus-ring);
}

:where(.epes-main, .epes-modal-layer) :is(input, select, textarea):disabled {
  background: var(--surface-soft);
}

:where(.epes-main, .epes-modal-layer) .has-required-field {
  position: relative;
  padding-block-start: 1px;
}

:where(.epes-main, .epes-modal-layer) .field-required-indicator {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  color: var(--danger);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
}

:where(.epes-main, .epes-modal-layer) .field-help {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

:where(.epes-main, .epes-modal-layer) .field-error-message {
  display: block;
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

:where(.epes-main, .epes-modal-layer) .was-validated :is(input, select, textarea):invalid,
:where(.epes-main, .epes-modal-layer) :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger-bg) 35%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent);
}

@media (max-width: 760px) {
  :where(.epes-main, .epes-modal-layer) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
    select,
    textarea
  ) {
    font-size: 16px;
  }
}

/* 360 nomination workspace */
.nomination-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.nomination-summary > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 15px 17px;
}

.nomination-summary > div + div {
  border-inline-start: 1px solid var(--line);
}

.nomination-summary > div > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.nomination-summary b {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.nomination-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nomination-summary .sc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-500) 10%, var(--surface));
  color: var(--primary-700);
}

.nomination-summary .sc-chip.o,
.nomination-summary .sc-chip.w {
  background: color-mix(in srgb, var(--secondary-500) 12%, var(--surface));
  color: var(--secondary-600);
}

.nomination-policy-note {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--primary-500) 28%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary-500) 5%, var(--surface));
}

.nomination-policy-note > .material-symbols-rounded {
  color: var(--primary-600);
  font-size: 22px;
}

.nomination-policy-note > span {
  display: grid;
  gap: 3px;
}

.nomination-policy-note b {
  font-size: 13px;
}

.nomination-policy-note small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.nomination-panel > header {
  align-items: flex-start;
}

.eligible-nominee-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 10px;
  border-top: 1px solid var(--line);
}

.eligible-nominee-heading > span:first-child {
  display: grid;
  gap: 2px;
}

.eligible-nominee-heading b {
  font-size: 13px;
}

.eligible-nominee-heading small {
  color: var(--muted);
  font-size: 11px;
}

.appraisal-search > .material-symbols-rounded {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.appraisal-picker-grid input,
.appraisal-picker-grid select {
  border-color: var(--line);
}

@media (max-width: 760px) {
  .respondent-workbench-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .respondent-workbench-tabs > button {
    width: 100%;
    justify-content: flex-start;
    white-space: normal;
  }

  .nomination-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .nomination-summary > div + div {
    border-inline-start: 0;
    border-top: 1px solid var(--line);
  }

  .nomination-summary small {
    white-space: normal;
  }

  .eligible-nominee-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

.editor-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.value-master-layout {
  grid-template-columns: minmax(340px, .82fr) minmax(620px, 1.38fr);
}

[data-record-editor] {
  scroll-margin-top: 92px;
  transition: background-color 180ms ease-out, box-shadow 180ms ease-out;
}

[data-record-editor].is-editing {
  background: color-mix(in srgb, var(--primary-500) 4%, var(--surface));
  box-shadow: 0 8px 24px rgba(0, 101, 101, .10);
}

@media (max-width: 760px) {
  .editor-actions {
    align-items: stretch;
  }

  .editor-actions .btn {
    flex: 1 1 150px;
  }
}

@media (max-width: 1180px) {
  .value-master-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .app-grid {
    grid-template-columns: 1fr;
  }

  .epes-rail {
    padding-inline: 10px;
  }

  .epes-content {
    padding: 18px;
  }

  .score-strip,
  .stat-cards,
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .epes-topbar {
    padding: 10px 14px;
  }

  .top-title h1 {
    font-size: 18px;
  }

  .epes-content {
    padding: 14px;
    gap: 14px;
  }

  .score-strip,
  .stat-cards,
  .metric-grid,
  .relationship-grid {
    grid-template-columns: 1fr;
  }

  .view-head,
  .page-hero {
    padding: 16px;
  }

  .view-head h2,
  .page-hero h2 {
    font-size: 21px;
  }

  .login-wrap {
    width: 100%;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    border: 0;
    border-radius: 0;
  }

  .login-panel {
    min-height: 300px;
    padding: 32px 24px;
  }

  .login-panel h1 {
    font-size: 36px;
  }

  .login-card {
    padding: 32px 24px;
  }
}

@media (max-width: 1180px) {
  .app-grid,
  .app-grid.collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .epes-main {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .epes-rail,
  .app-grid.collapsed .epes-rail:not(.open) {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(320px, 88vw);
    transform: translateX(-105%);
  }

  [dir="rtl"] .epes-rail,
  [dir="rtl"] .app-grid.collapsed .epes-rail:not(.open) {
    transform: translateX(105%);
  }

  .epes-rail.open,
  [dir="rtl"] .epes-rail.open {
    transform: translateX(0);
  }

  .app-grid.collapsed .epes-rail {
    overflow-y: auto;
  }
}

table.epes-data-table th,
table.epes-data-table td,
.dt-container table.dataTable th,
.dt-container table.dataTable td {
  text-align: center;
  vertical-align: middle;
}

table.epes-data-table th {
  justify-content: center;
}

table.epes-data-table th .th-filter {
  margin-inline: 6px 0;
  vertical-align: middle;
}

.notice-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.notice-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  color: inherit;
}

.notice-main > .material-symbols-rounded {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--primary-50);
  color: var(--primary-700);
}

.notice-main b,
.notice-main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notice-main b em {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  margin-inline-start: 6px;
  border-radius: 999px;
  background: var(--secondary-50);
  color: var(--secondary-700);
  font-style: normal;
  font-size: 11px;
}

.notice-read {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.notice-read:hover {
  border-color: var(--primary-100);
  background: var(--primary-50);
  color: var(--primary-700);
}

.notice-read .material-symbols-rounded {
  font-size: 18px;
}

.ck[data-notification-row] .notification-open + .mini-btn {
  display: none;
}

.approval-rule-editor {
  border-inline-start: 1px solid var(--primary-600);
}

.approval-rule-editor[hidden] {
  display: none !important;
}

[data-source-panel][hidden],
[data-target-panel][hidden] {
  display: none !important;
}

.route-form-grid {
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  align-items: end;
}

.route-form-grid .btn-row {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.route-form-grid .field-help {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

.route-sequence {
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  min-width: 28px;
  height: 28px;
  margin-inline-end: 8px;
  border: 1px solid var(--primary-100);
  border-radius: 50%;
  background: var(--primary-50);
  color: var(--primary-700);
  font-size: 12px;
  font-weight: 700;
}

.approval-route {
  position: relative;
  min-width: 170px;
}

.approval-route summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  cursor: pointer;
  list-style: none;
}

.approval-route summary::-webkit-details-marker {
  display: none;
}

.approval-route summary > .material-symbols-rounded {
  font-size: 18px;
  color: var(--muted);
  transition: transform .18s ease;
}

.approval-route[open] summary > .material-symbols-rounded {
  transform: rotate(180deg);
}

.approval-route-list {
  position: absolute;
  z-index: 80;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 50%;
  width: min(420px, 75vw);
  margin: 0;
  padding: 10px;
  transform: translateX(-50%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
  list-style: none;
}

[dir="rtl"] .approval-route-list {
  transform: translateX(50%);
}

.approval-route-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 6px;
  border-bottom: 1px solid var(--line-soft);
  text-align: start;
}

.approval-route-list li:last-child {
  border-bottom: 0;
}

.approval-route-list li > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.approval-route-list b,
.approval-route-list span,
.approval-route-list small {
  overflow-wrap: anywhere;
}

.approval-route-list small {
  color: var(--muted);
}

@media (max-width: 760px) {
  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
  }

  .epes-table-tools {
    position: sticky;
    inset-inline-start: 0;
    width: calc(100vw - 48px);
    max-width: 100%;
    padding: 12px;
    gap: 10px;
  }

  .epes-table-search input {
    height: 44px;
    border-radius: 8px;
  }

  .epes-table-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .epes-table-actions .btn,
  .epes-table-menu-wrap .btn {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
  }

  .epes-table-actions .btn .material-symbols-rounded,
  .epes-table-menu-wrap .btn .material-symbols-rounded {
    margin-inline-end: 0;
  }

  .epes-table-menu {
    position: fixed;
    inset-inline: 12px auto;
    top: 132px;
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 160px);
  }

  .panel header {
    min-width: 0;
  }

  .panel h2,
  .panel header span {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .route-form-grid {
    grid-template-columns: 1fr;
  }

  .approval-route-list {
    inset-inline-start: 0;
    width: min(360px, calc(100vw - 48px));
    transform: none;
  }

  [dir="rtl"] .approval-route-list {
    inset-inline: auto 0;
    transform: none;
  }
}

.task-status-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 12px;
  overflow-x: auto;
}

.task-status-strip button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 11px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.task-status-strip button.active {
  border-color: var(--primary-500);
  color: var(--primary-700);
  background: var(--primary-50);
}

.task-status-strip button span:last-child:not(.material-symbols-rounded) {
  min-width: 22px;
  text-align: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-soft);
}

.task-status-hidden { display: none !important; }
.position-health-hidden { display: none !important; }
.position-health-filter { margin: 10px 0 8px; padding: 0 2px; }
.selection-column { width: 42px; min-width: 42px; }
.selection-column input { width: 17px; height: 17px; accent-color: var(--primary-600); }
.kpi-work-grid .scorebar { min-width: 118px; margin: 0; }
.kpi-work-grid tr.save-failed td { box-shadow: inset 0 -2px 0 var(--danger); }

.decision-analytics-grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(560px, 1.6fr);
  gap: 14px;
  margin-bottom: 14px;
}

.chart-frame { height: 210px; padding: 4px 16px 10px; }
.distribution-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; padding: 0 18px 18px; }
.distribution-legend span { display: grid; grid-template-columns: 9px 28px 1fr; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.distribution-legend b { color: var(--text); font-size: 13px; }
.band-dot { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
.band-exceeds { background: #0f766e; }
.band-meets { background: #22a699; }
.band-developing { background: #f59e0b; }
.band-below { background: #dc4c64; }
.department-readiness .table-wrap { max-height: 340px; overflow: auto; }
.department-readiness .scorebar { margin: 0; min-width: 120px; }

@media (max-width: 980px) {
  .decision-analytics-grid { grid-template-columns: 1fr; }
}

/* Navigation hierarchy: the parent owns a visibly nested child branch. */
.rail-brand {
  gap: 10px;
}

.ewa-brand-mark {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ewa-brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-copy {
  min-width: 0;
  flex: 1;
}

.brand-copy strong,
.brand-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-section {
  position: relative;
  margin-block: 5px;
}

.rail-section-toggle {
  min-height: 42px;
  margin: 0;
  padding: 9px 10px;
  border: 1px solid transparent;
  color: rgba(236, 242, 247, .72);
  font-size: 12px;
  font-weight: 700;
}

.rail-section-toggle[aria-expanded="true"] {
  color: #fff;
  border-color: rgba(159, 240, 232, .14);
  background: rgba(255, 255, 255, .07);
}

.rail-section-toggle[aria-expanded="true"] .nav-label > .material-symbols-rounded {
  color: #9ff0e8;
}

.rail-section-toggle[aria-expanded="true"] small {
  color: #9ff0e8;
  opacity: 1;
}

.rail-section-links {
  position: relative;
  margin-block: 5px 9px;
  margin-inline: 18px 7px;
  padding-block: 3px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid rgba(159, 240, 232, .26);
}

.rail-section-links a {
  position: relative;
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 6px;
  color: rgba(236, 242, 247, .78);
  font-size: 12px;
  font-weight: 500;
}

.rail-section-links a::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: -15px;
  width: 10px;
  border-block-start: 1px solid rgba(159, 240, 232, .26);
}

.rail-section-links a .nav-label {
  gap: 8px;
}

.rail-section-links a .nav-label > .material-symbols-rounded {
  color: rgba(159, 240, 232, .72);
  font-size: 17px;
}

.rail-section-links a > small {
  opacity: .42;
}

.rail-section-links a:hover {
  background: rgba(255, 255, 255, .07);
}

.rail-section-links a.active {
  background: rgba(0, 128, 128, .3);
  color: #fff;
  box-shadow: none;
  font-weight: 700;
}

.rail-section-links a.active::before {
  border-color: #9ff0e8;
}

.rail-section-links a.active::after {
  content: "";
  position: absolute;
  inset-block-start: calc(50% - 3px);
  inset-inline-start: -18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9ff0e8;
  box-shadow: 0 0 0 3px var(--rail-bg);
}

[dir="rtl"] .rail-section-links a.active {
  box-shadow: none;
}

.app-grid.collapsed .ewa-brand-mark {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}

@media (max-width: 1180px) {
  .app-grid.collapsed .ewa-brand-mark {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .rail-section-links {
    margin-inline-start: 22px;
    margin-inline-end: 8px;
  }
}

/* ================= SELECTED READINESS MATRIX DIRECTION =================
   Light EWA navigation, compact cycle context, and an operations-first HR
   command center. These overrides intentionally sit last in the cascade.
   ====================================================================== */
:root {
  --bg: #f6f8f9;
  --surface: #ffffff;
  --surface-soft: #f7f9fa;
  --surface-raised: #ffffff;
  --ink: #101828;
  --muted: #5f6b7a;
  --muted-2: #7a8795;
  --line: #dfe5e8;
  --line-soft: #edf1f3;
  --primary-50: #eaf5f4;
  --primary-100: #d3ece9;
  --primary-500: #008080;
  --primary-600: #006f72;
  --primary-700: #005c62;
  --primary-900: #063f45;
  --secondary-50: #fff4e8;
  --secondary-100: #ffe1bd;
  --secondary-500: #f47c20;
  --secondary-600: #d9630d;
  --rail-bg: #f8fbfb;
  --rail-text: #344054;
  --rail-muted: #667085;
  --rail-hover: #f0f5f5;
  --rail-active-bg: #e8f2f2;
  --rail-active-text: #006f72;
  --danger: #d92d20;
  --danger-soft: #fff1f0;
  --shadow: 0 14px 32px rgba(16, 24, 40, .08);
  --shadow-tight: 0 1px 2px rgba(16, 24, 40, .04);
}

.dark {
  --bg: #0f171b;
  --surface: #172228;
  --surface-soft: #111b20;
  --surface-raised: #1d2a31;
  --ink: #f3f7f8;
  --muted: #b2bec4;
  --muted-2: #8f9da4;
  --line: #2b3a41;
  --line-soft: #223138;
  --primary-50: rgba(0, 128, 128, .17);
  --primary-100: rgba(0, 128, 128, .28);
  --primary-700: #8ee1dc;
  --secondary-50: rgba(244, 124, 32, .14);
  --secondary-100: rgba(244, 124, 32, .28);
  --rail-bg: #121b20;
  --rail-text: #e7eff1;
  --rail-muted: #a1adb3;
  --rail-hover: #1b2a30;
  --rail-active-bg: #16363a;
  --rail-active-text: #8ee1dc;
}

body,
.dark body,
body:has(.dark) {
  background: var(--bg);
}

.app-grid {
  grid-template-columns: 248px minmax(0, 1fr);
  background: var(--bg);
}

.app-grid.collapsed {
  grid-template-columns: 74px minmax(0, 1fr);
}

.epes-rail {
  padding: 14px 10px 12px;
  border-inline-end: 1px solid var(--line);
  background: var(--rail-bg);
  color: var(--rail-text);
  box-shadow: 3px 0 12px rgba(16, 24, 40, .025);
}

.dark .epes-rail {
  border-inline-end-color: #26343a;
  box-shadow: none;
}

.rail-brand {
  min-height: 76px;
  padding: 2px 10px 14px;
  border-bottom: 1px solid var(--line);
  gap: 10px;
}

.dark .rail-brand {
  border-bottom-color: #26343a;
}

.ewa-brand-mark {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}

.rail-brand strong {
  color: var(--primary-700);
  font-size: 14px;
  line-height: 1.2;
}

.rail-brand span {
  color: var(--rail-muted);
  font-size: 9px;
}

.dark .rail-brand strong {
  color: var(--rail-active-text);
}

.rail-toggle {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--rail-muted);
}

.rail-toggle:hover {
  border-color: var(--primary-100);
  background: var(--primary-50);
  color: var(--primary-700);
}

.dark .rail-toggle {
  border-color: #304048;
  background: #18252b;
}

.rail-nav {
  padding: 8px 0 0;
}

.rail-section {
  margin-block: 4px;
}

.rail-section-toggle {
  min-height: 40px;
  margin: 0;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--rail-text);
  font-size: 12px;
  font-weight: 700;
}

.rail-section-toggle:hover,
.rail-section-toggle[aria-expanded="true"] {
  border-color: transparent;
  background: var(--rail-hover);
  color: var(--primary-700);
}

.dark .rail-section-toggle:hover,
.dark .rail-section-toggle[aria-expanded="true"] {
  color: var(--rail-active-text);
}

.rail-section-toggle[aria-expanded="true"] .nav-label > .material-symbols-rounded,
.rail-section-toggle[aria-expanded="true"] small {
  color: var(--primary-600);
}

.dark .rail-section-toggle[aria-expanded="true"] .nav-label > .material-symbols-rounded,
.dark .rail-section-toggle[aria-expanded="true"] small {
  color: var(--rail-active-text);
}

.rail-section-links {
  margin-block: 2px 8px;
  margin-inline: 14px 3px;
  padding-block: 2px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid #cbd7d9;
}

.dark .rail-section-links {
  border-inline-start-color: #365057;
}

.rail-section-links a {
  min-height: 38px;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--rail-muted);
  font-size: 11.5px;
  font-weight: 500;
}

.rail-section-links a::before {
  inset-inline-start: -15px;
  width: 10px;
  border-color: #cbd7d9;
}

.dark .rail-section-links a::before {
  border-color: #365057;
}

.rail-section-links a .nav-label > .material-symbols-rounded {
  color: #65747c;
  font-size: 17px;
}

.dark .rail-section-links a .nav-label > .material-symbols-rounded {
  color: #91a4ab;
}

.rail-nav a:hover,
.rail-section-links a:hover {
  background: var(--rail-hover);
  color: var(--primary-700);
}

.rail-nav a.active,
.rail-section-links a.active {
  background: var(--rail-active-bg);
  color: var(--rail-active-text);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--primary-500);
}

[dir="rtl"] .rail-nav a.active,
[dir="rtl"] .rail-section-links a.active {
  box-shadow: inset -3px 0 0 var(--primary-500);
}

.rail-section-links a.active::before {
  border-color: var(--primary-500);
}

.rail-section-links a.active::after {
  display: none;
}

.epes-topbar {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto minmax(420px, 1fr);
  align-items: center;
  min-height: 76px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: none;
}

.top-title h1 {
  font-size: 20px;
  line-height: 1.15;
}

.dark .top-title h1 {
  color: var(--ink);
}

.top-title p {
  color: var(--muted-2);
  font-size: 11px;
}

.top-cycle-context {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.top-cycle-context > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border-inline-start: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
}

.top-cycle-context > span:first-child {
  border-inline-start: 0;
}

.top-cycle-context .material-symbols-rounded {
  color: var(--primary-600);
  font-size: 18px;
}

.top-cycle-context .cycle-period {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  font-weight: 800;
}

.top-cycle-context .cycle-state {
  min-height: 30px;
  border: 1px solid var(--primary-100);
  border-radius: 6px;
  background: var(--primary-50);
  color: var(--primary-700);
  font-weight: 700;
}

.top-cycle-context .cycle-state .material-symbols-rounded {
  font-size: 9px;
}

.top-cycle-context .cycle-state.is-inactive {
  border-color: #fecaca;
  background: #fff1f0;
  color: var(--danger);
}

.top-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.top-search input {
  width: clamp(190px, 18vw, 290px);
}

.profile-chip {
  min-width: 190px;
  max-width: 224px;
}

.epes-content {
  width: 100%;
  max-width: none;
  padding: 20px 22px 30px;
  gap: 16px;
}

body:has(.command-readiness-layout) .mode-banner {
  display: none;
}

.mode-banner,
.view-head,
.page-hero,
.panel header,
.score-strip article:first-child,
.login-card,
.login-shell {
  background-image: none;
}

.readiness-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-height: 78px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.readiness-metric {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  border-inline-start: 1px solid var(--line-soft);
}

.readiness-metric:first-child {
  border-inline-start: 0;
}

.readiness-metric > .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--primary-600);
  font-size: 28px;
}

.readiness-metric.is-review > .material-symbols-rounded {
  color: var(--secondary-500);
}

.readiness-metric.is-blocked > .material-symbols-rounded {
  color: var(--danger);
}

.readiness-metric div {
  min-width: 0;
}

.readiness-metric strong,
.readiness-metric span {
  display: block;
}

.readiness-metric strong {
  color: var(--ink);
  font-size: 21px;
  line-height: 1.1;
}

.readiness-metric span {
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.command-readiness-layout {
  display: grid;
  grid-template-columns: minmax(680px, 1fr) 272px;
  align-items: start;
  gap: 16px;
}

.readiness-workspace,
.cycle-review-action,
.action-queue,
.readiness-quick-links {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-tight);
}

.readiness-workspace {
  min-width: 0;
  overflow: hidden;
}

.readiness-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 70px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.readiness-head h2,
.cycle-review-action h2,
.action-queue h2,
.readiness-quick-links h2 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
}

.readiness-head p,
.cycle-review-action p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.readiness-legend {
  display: flex;
  align-items: center;
  gap: 6px;
}

.readiness-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 700;
}

.readiness-chip .material-symbols-rounded {
  font-size: 14px;
}

.readiness-chip.is-ready {
  border-color: #bfe5df;
  background: #effaf7;
  color: #08766f;
}

.readiness-chip.is-review {
  border-color: var(--secondary-100);
  background: var(--secondary-50);
  color: #b44d08;
}

.readiness-chip.is-blocked {
  border-color: #fecaca;
  background: var(--danger-soft);
  color: var(--danger);
}

.dark .readiness-chip.is-ready {
  border-color: rgba(71, 205, 190, .3);
  background: rgba(0, 128, 128, .16);
  color: #8ee1dc;
}

.dark .readiness-chip.is-review {
  border-color: rgba(244, 124, 32, .3);
  background: rgba(244, 124, 32, .14);
  color: #ffb36f;
}

.dark .readiness-chip.is-blocked {
  border-color: rgba(248, 113, 113, .3);
  background: rgba(217, 45, 32, .15);
  color: #fda29b;
}

.readiness-table-wrap {
  min-width: 0;
  overflow-x: auto;
}

.readiness-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.readiness-table thead th:first-child {
  width: 34%;
}

.readiness-table thead th:not(:first-child) {
  width: 13.2%;
}

.readiness-table thead th,
.readiness-table tbody th,
.readiness-table tbody td {
  height: 54px;
  padding: 9px 10px !important;
  border-inline-start: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  text-align: center !important;
  vertical-align: middle;
}

.readiness-table tbody th {
  overflow: hidden;
  white-space: normal !important;
}

.readiness-table thead th:first-child,
.readiness-table tbody th {
  border-inline-start: 0;
}

.readiness-table thead th {
  height: 62px;
  background: var(--surface-soft);
  color: #344054;
  font-size: 10.5px;
  font-weight: 800;
  white-space: normal !important;
}

.dark .readiness-table thead th {
  color: var(--ink);
}

.readiness-table thead th .material-symbols-rounded,
.readiness-table thead th span {
  display: inline-block;
  vertical-align: middle;
}

.readiness-table thead th .material-symbols-rounded {
  margin-inline-end: 5px;
  color: var(--primary-700);
  font-size: 18px;
}

.readiness-table tbody tr:hover td,
.readiness-table tbody tr:hover th {
  background: #fbfdfd;
}

.dark .readiness-table tbody tr:hover td,
.dark .readiness-table tbody tr:hover th {
  background: var(--surface-soft);
}

.department-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  color: var(--ink);
  font-size: 11px;
  text-align: start;
  overflow-wrap: anywhere;
  white-space: normal;
}

.department-name .material-symbols-rounded {
  color: var(--primary-600);
  font-size: 17px;
}

.readiness-empty {
  margin: 18px;
}

.readiness-side {
  display: grid;
  gap: 14px;
}

.cycle-review-action {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 16px;
}

.cycle-review-action > .material-symbols-rounded {
  color: var(--primary-600);
  font-size: 29px;
}

.cycle-review-action .btn {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 4px;
}

.action-queue > header,
.readiness-quick-links > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.action-queue > header span {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--primary-700);
  font-size: 11px;
  font-weight: 800;
}

.action-queue-list {
  display: grid;
}

.action-queue-item {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 65px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  text-decoration: none;
}

.action-queue-item:last-child {
  border-bottom: 0;
}

.action-queue-item:hover {
  background: var(--surface-soft);
}

.action-queue-item > .material-symbols-rounded {
  color: var(--secondary-500);
  font-size: 20px;
}

.action-queue-item.is-blocked > .material-symbols-rounded {
  color: var(--danger);
}

.action-queue-item.is-ready > .material-symbols-rounded {
  color: var(--primary-600);
}

.action-queue-item span {
  min-width: 0;
}

.action-queue-item strong,
.action-queue-item small {
  display: block;
}

.action-queue-item strong {
  color: var(--ink);
  font-size: 11px;
}

.action-queue-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.25;
}

.action-queue-item > b {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--secondary-100);
  border-radius: 999px;
  background: var(--secondary-50);
  color: var(--secondary-600);
  font-size: 11px;
}

.action-queue-item.is-blocked > b {
  border-color: #fecaca;
  background: var(--danger-soft);
  color: var(--danger);
}

.action-queue-item.is-ready > b {
  border-color: var(--primary-100);
  background: var(--primary-50);
  color: var(--primary-700);
}

.dark .action-queue-item.is-blocked > b {
  border-color: rgba(248, 113, 113, .3);
  background: rgba(217, 45, 32, .15);
  color: #fda29b;
}

.readiness-quick-links {
  overflow: hidden;
}

.readiness-quick-links > a {
  display: grid;
  grid-template-columns: 22px 1fr 18px;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 12px;
  color: var(--primary-700);
  font-size: 10.5px;
  font-weight: 700;
  text-decoration: none;
}

.readiness-quick-links > a:hover {
  background: var(--primary-50);
}

.readiness-quick-links .material-symbols-rounded {
  font-size: 17px;
}

.readiness-workspace .epes-report-toolbar {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

@media (max-width: 1380px) {
  .epes-topbar {
    grid-template-columns: minmax(210px, 1fr) auto minmax(360px, 1fr);
  }

  .top-search input {
    width: 190px;
  }

  .profile-chip {
    min-width: 168px;
  }

  .readiness-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .readiness-metric:nth-child(4) {
    border-inline-start: 0;
  }

  .readiness-metric:nth-child(n+4) {
    border-top: 1px solid var(--line-soft);
  }
}

@media (max-width: 1180px) {
  .epes-topbar {
    display: flex;
    flex-wrap: wrap;
  }

  .top-cycle-context {
    margin-inline-start: auto;
  }

  .top-actions {
    width: 100%;
  }

  .command-readiness-layout {
    grid-template-columns: 1fr;
  }

  .readiness-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .epes-topbar {
    display: grid;
    grid-template-columns: auto 1fr;
    padding: 9px 12px;
  }

  .top-cycle-context {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .top-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

  .epes-content {
    padding: 14px 12px 24px;
  }

  .readiness-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .readiness-metric:nth-child(odd) {
    border-inline-start: 0;
  }

  .readiness-metric:nth-child(n+3) {
    border-top: 1px solid var(--line-soft);
  }

  .readiness-metric {
    justify-content: flex-start;
    padding: 12px;
  }

  .readiness-metric span {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }

  .readiness-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .readiness-legend {
    width: 100%;
    overflow-x: auto;
  }

  .readiness-side {
    grid-template-columns: 1fr;
  }
}

/* Navigation fidelity pass for the selected light-rail reference. */
.epes-rail {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  padding: 12px 10px 10px;
  background: #fbfdfd;
  overflow: hidden;
}

.dark .epes-rail {
  background: var(--rail-bg);
}

.rail-brand {
  min-height: 82px;
  padding: 3px 9px 14px;
  gap: 9px;
}

.ewa-brand-mark {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
}

.ewa-brand-logo {
  object-fit: contain;
}

.brand-copy strong {
  color: #087681;
  font-size: 15px;
  font-weight: 800;
}

.brand-copy span {
  display: none;
}

.rail-brand .rail-toggle {
  width: 30px;
  height: 30px;
  border-color: #dfe7e9;
  background: #fff;
}

.rail-nav {
  flex: 1 1 auto;
  min-height: 0;
  padding: 9px 0 54px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd7d9 transparent;
}

.rail-section {
  margin-block: 2px;
}

.rail-section-toggle {
  min-height: 38px;
  padding: 7px 9px;
  background: transparent;
  color: #087681;
  font-size: 11.5px;
  font-weight: 800;
}

.rail-section-toggle .nav-label > .material-symbols-rounded {
  color: #087f88;
}

.rail-section-toggle:hover,
.rail-section-toggle[aria-expanded="true"] {
  border-color: transparent;
  background: transparent;
  color: #086d76;
}

.rail-section-toggle:focus-visible,
.rail-footer-toggle:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 1px;
}

.rail-section-toggle[aria-expanded="true"] .nav-label > .material-symbols-rounded,
.rail-section-toggle[aria-expanded="true"] small {
  color: #087f88;
}

.rail-section-links {
  margin-block: 0 7px;
  margin-inline: 14px 3px;
  padding-block: 0;
  padding-inline-start: 13px;
  border-inline-start-color: #d3dee0;
}

.rail-section-links a {
  min-height: 35px;
  padding: 6px 8px;
  border-radius: 5px;
  color: #344054;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.28;
}

.rail-section-links a::before {
  inset-inline-start: -14px;
  width: 9px;
  border-color: #d3dee0;
}

.rail-section-links a .nav-label {
  gap: 7px;
}

.rail-section-links a .nav-label > .material-symbols-rounded {
  color: #51606b;
  font-size: 16px;
}

.rail-section-links a > small {
  display: none;
}

.rail-nav a:hover,
.rail-section-links a:hover {
  background: #f2f6f6;
  color: #086d76;
}

.rail-nav a.active,
.rail-section-links a.active {
  background: #eef3f3;
  color: #086d76;
  box-shadow: inset 3px 0 0 #008b8b;
}

[dir="rtl"] .rail-nav a.active,
[dir="rtl"] .rail-section-links a.active {
  box-shadow: inset -3px 0 0 #008b8b;
}

.rail-section-links a.active .nav-label > .material-symbols-rounded {
  color: #087f88;
}

.dark .rail-section-toggle,
.dark .rail-section-toggle[aria-expanded="true"] {
  color: var(--rail-active-text);
}

.dark .rail-section-links a {
  color: var(--rail-text);
}

.dark .rail-nav a:hover,
.dark .rail-section-links a:hover {
  background: var(--rail-hover);
  color: var(--rail-active-text);
}

.dark .rail-nav a.active,
.dark .rail-section-links a.active {
  background: var(--rail-active-bg);
  color: var(--rail-active-text);
}

.rail-footer {
  position: absolute;
  z-index: 4;
  inset-inline: 10px;
  inset-block-end: 10px;
  padding: 10px 4px 0;
  border-top: 1px solid var(--line);
  background: #fbfdfd;
}

.rail-footer-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 7px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #475467;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}

.rail-footer-toggle:hover {
  background: #f2f6f6;
  color: #086d76;
}

.rail-footer-toggle .material-symbols-rounded {
  color: #52616b;
  font-size: 18px;
}

.dark .rail-footer-toggle {
  color: var(--rail-text);
}

.dark .rail-footer {
  background: var(--rail-bg);
}

.dark .rail-footer-toggle:hover {
  background: var(--rail-hover);
  color: var(--rail-active-text);
}

.app-grid.collapsed .rail-footer-toggle {
  justify-content: center;
}

.app-grid.collapsed .rail-footer-toggle span {
  display: none;
}

@media (max-width: 760px) {
  .rail-footer {
    display: none;
  }
}

/* Reference-led production topbar: compact tools, strong identity, useful search. */
.top-actions {
  gap: 5px;
}

.top-search {
  width: clamp(230px, 21vw, 330px);
  margin-inline-end: 8px;
}

.top-actions .top-search input {
  width: 100%;
  height: 40px;
  padding-inline: 39px 38px;
  border: 1px solid #e5e9ec;
  border-radius: 7px;
  background: #f7f9fa;
  font-size: 12px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.top-actions .top-search input:focus {
  border-color: #55aeb2;
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 13%, transparent);
}

.top-search > .material-symbols-rounded {
  position: absolute;
  z-index: 2;
  inset-inline-start: 13px;
  color: #738089;
  font-size: 18px;
  pointer-events: none;
}

.top-search kbd {
  position: absolute;
  z-index: 2;
  inset-inline-end: 11px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid #d8dee2;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  color: #7b8790;
  font: 700 11px/1 Century Gothic, Arial, sans-serif;
  pointer-events: none;
}

.global-search-panel {
  position: absolute;
  z-index: 2400;
  inset-block-start: calc(100% + 9px);
  inset-inline-start: 0;
  width: min(460px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 110px));
  overflow: hidden auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(20, 46, 50, .16), 0 2px 8px rgba(20, 46, 50, .08);
}

.global-search-panel[hidden] {
  display: none;
}

.global-search-panel .material-symbols-rounded {
  position: static;
  inset: auto;
}

.global-search-state {
  min-height: 78px;
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.global-search-state[hidden] {
  display: none;
}

.global-search-state.is-loading::before {
  content: '';
  width: 30px;
  height: 3px;
  margin-block-end: -6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-500) 0 45%, var(--line) 45% 100%);
  animation: search-loading 800ms ease-in-out infinite alternate;
}

@keyframes search-loading {
  to { transform: translateX(24px); }
}

.global-search-state.is-error {
  color: var(--danger);
}

.global-search-results {
  padding: 6px;
}

.global-search-group + .global-search-group {
  margin-block-start: 4px;
  padding-block-start: 4px;
  border-top: 1px solid var(--line-soft);
}

.global-search-group h3 {
  margin: 0;
  padding: 7px 9px 5px;
  color: var(--muted-2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.global-search-group > a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 6px 9px;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
}

.global-search-group > a:hover,
.global-search-group > a.is-active {
  background: var(--primary-50);
}

.global-search-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--primary-100);
  border-radius: 6px;
  background: var(--surface);
  color: var(--primary-700);
  font-size: 17px;
}

.global-search-copy,
.global-search-copy b,
.global-search-copy small {
  min-width: 0;
  display: block;
}

.global-search-copy b,
.global-search-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-copy b {
  font-size: 12px;
  font-weight: 700;
}

.global-search-copy small {
  margin-block-start: 2px;
  color: var(--muted);
  font-size: 10px;
}

.global-search-open {
  color: var(--muted-2);
  font-size: 15px;
}

.global-search-panel footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-soft);
  color: var(--muted-2);
  font-size: 9px;
}

.global-search-panel footer span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.global-search-panel footer .material-symbols-rounded {
  font-size: 13px;
}

.top-language-control,
.top-icon-control {
  min-width: 36px;
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #53616a;
}

.top-language-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-inline: 7px;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.top-language-control .material-symbols-rounded:first-child,
.top-icon-control .material-symbols-rounded {
  font-size: 20px;
}

.top-language-control .material-symbols-rounded:last-child {
  font-size: 14px;
  color: var(--muted-2);
}

.top-language-control:hover,
.top-icon-control:hover {
  border-color: transparent;
  background: var(--surface-soft);
  color: var(--primary-700);
}

.top-menu .profile-chip {
  min-width: 176px;
  max-width: 226px;
  height: 44px;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  gap: 8px;
  padding: 2px 0 2px 10px;
  border: 0;
  border-inline-start: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

[dir="rtl"] .top-menu .profile-chip {
  padding: 2px 10px 2px 0;
}

.top-menu .profile-chip:hover {
  border-inline-start-color: var(--line);
  background: transparent;
}

.top-menu .profile-chip img,
.top-menu .profile-chip .avatar-fallback {
  width: 36px;
  height: 36px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line);
}

.top-menu .profile-chip b {
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
}

.top-menu .profile-chip small {
  margin-block-start: 2px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 500;
}

.top-menu .profile-chip > .material-symbols-rounded {
  color: var(--muted-2);
  font-size: 16px;
}

.top-menu .dropdown-panel {
  z-index: 2400;
}

.dark .top-actions .top-search input,
.dark .top-search kbd,
.dark .global-search-icon {
  border-color: var(--line);
  background: var(--surface-soft);
}

@media (max-width: 1380px) {
  .top-search {
    width: 210px;
  }

  .top-menu .profile-chip {
    min-width: 154px;
  }
}

@media (max-width: 1180px) {
  .top-actions {
    width: 100%;
  }

  .top-search {
    flex: 1 1 280px;
    width: auto;
  }
}

@media (max-width: 760px) {
  .top-actions {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr);
    align-items: center;
  }

  .top-search {
    grid-column: 1 / -1;
    width: 100%;
    margin-inline-end: 0;
  }

  .top-menu:last-child {
    justify-self: end;
  }

  .top-menu .profile-chip {
    width: min(190px, 100%);
    min-width: 0;
  }

  .global-search-panel {
    width: calc(100vw - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-search-state.is-loading::before {
    animation: none;
  }
}

.ewa-cycle-control > header {
  align-items: flex-start;
}

.ewa-cycle-control > header h2 {
  margin: 0;
}

.ewa-cycle-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block: 1px solid var(--line-soft);
}

.ewa-cycle-metrics > div {
  min-width: 0;
  padding: 14px 16px;
  border-inline-start: 1px solid var(--line-soft);
}

.ewa-cycle-metrics > div:first-child {
  border-inline-start: 0;
}

.ewa-cycle-metrics span,
.ewa-cycle-metrics strong {
  display: block;
}

.ewa-cycle-metrics span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.ewa-cycle-metrics strong {
  margin-block-start: 5px;
  color: var(--ink);
  font-size: 24px;
}

.ewa-cycle-actions {
  gap: 0;
}

.ewa-cycle-actions > article {
  padding: 18px;
  border-inline-start: 1px solid var(--line-soft);
}

.ewa-cycle-actions > article:first-child {
  border-inline-start: 0;
}

.ewa-cycle-actions p {
  min-height: 48px;
  margin: 10px 0 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.ewa-cycle-actions label,
.ewa-cycle-actions label > span,
.ewa-cycle-actions label > small {
  display: block;
}

.ewa-cycle-actions label > span {
  margin-block-end: 6px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}

.ewa-cycle-actions label > small {
  margin-block: 6px 12px;
  color: var(--muted);
}

.btn.danger {
  border-color: #c9364b;
  background: #c9364b;
  color: #fff;
}

.btn.danger:hover {
  border-color: #a9253a;
  background: #a9253a;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.ewa-last-run {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-soft);
  color: var(--muted);
}

.ewa-last-run > .material-symbols-rounded {
  color: var(--primary-600);
}

.ewa-last-run b,
.ewa-last-run small {
  display: block;
}

.ewa-last-run b {
  color: var(--ink);
  font-size: 10px;
}

.ewa-last-run small {
  margin-block-start: 2px;
  font-size: 9px;
}

@media (max-width: 900px) {
  .ewa-cycle-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ewa-cycle-metrics > div:nth-child(odd) {
    border-inline-start: 0;
  }

  .ewa-cycle-metrics > div:nth-child(n+3) {
    border-top: 1px solid var(--line-soft);
  }

  .ewa-cycle-actions > article {
    border-inline-start: 0;
    border-top: 1px solid var(--line-soft);
  }
}
.template-publish-strip {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) minmax(260px, 1.2fr);
  gap: 12px;
  align-items: end;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-inline-start: 1px solid var(--primary-500);
  background: var(--surface);
}

.template-publish-context,
.template-publish-action {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.template-publish-context > span,
.template-publish-action label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.template-publish-context > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.template-publish-context strong {
  font-size: 19px;
}

.template-publish-context small {
  color: var(--muted);
  line-height: 1.45;
}

.template-publish-action label {
  display: grid;
  gap: 6px;
}

.publication-last-run {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12px;
}

.publication-last-run b {
  color: var(--text);
}

@media (max-width: 1100px) {
  .template-publish-strip { grid-template-columns: 1fr 1fr; }
  .template-publish-context { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .template-publish-strip { grid-template-columns: 1fr; }
  .template-publish-context { grid-column: auto; }
  .publication-last-run { align-items: flex-start; flex-wrap: wrap; }
}

/* ================= PRODUCTION RESPONSIVE + LOGIN PASS =================
   Final cascade layer: mobile structure, touch behavior, and EWA sign-in.
   ====================================================================== */
html {
  min-width: 320px;
  overflow-x: hidden;
}

body {
  min-width: 320px;
}

img,
canvas {
  max-width: 100%;
}

.mobile-rail-scrim {
  display: none;
}

/* Login is an identity and access surface, not a product brochure. */
.epes-login {
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: #eef4f4;
}

.dark .epes-login {
  background: #0d1519;
}

.login-wrap {
  width: min(1080px, 100%);
  min-height: 650px;
  grid-template-columns: minmax(0, 1.04fr) minmax(390px, .96fr);
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(21, 50, 53, .16);
}

.login-panel {
  min-width: 0;
  padding: 46px 50px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 36px;
  background: #20989b;
  color: #fff;
}

.login-panel::after,
.login-card::before {
  display: none;
}

.login-brand-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.login-brand-lockup img {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  object-fit: contain;
}

.login-brand-lockup strong,
.login-brand-lockup span {
  display: block;
}

.login-brand-lockup strong {
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
}

.login-brand-lockup span {
  max-width: 260px;
  margin-top: 8px;
  color: #e4ffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.login-intro {
  max-width: 520px;
}

.login-panel .login-intro h1 {
  max-width: 510px;
  margin: 0;
  color: #fff;
  font-size: 42px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0;
  text-wrap: balance;
}

.login-panel .login-intro p {
  max-width: 470px;
  margin: 20px 0 0;
  color: #e4ffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65;
}

.login-workflow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  color: #fff;
}

.login-workflow > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 11px;
}

.login-workflow > .material-symbols-rounded {
  color: #ffd2a6;
  font-size: 17px;
}

.login-workflow span .material-symbols-rounded {
  color: #fff;
  font-size: 19px;
}

.login-workflow b {
  white-space: nowrap;
}

.login-assurance {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #e4ffff;
  font-size: 11px;
  font-weight: 700;
}

.login-assurance .material-symbols-rounded {
  color: #ffd2a6;
}

.login-access {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 74px 58px 48px;
  background: var(--surface);
}

.login-utilities {
  position: absolute;
  z-index: 2;
  inset-block-start: 24px;
  inset-inline-end: 26px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.login-utilities a,
.login-utilities button {
  min-width: 40px;
  height: 40px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
}

.login-utilities a:hover,
.login-utilities button:hover {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--primary-700);
}

.login-utilities .material-symbols-rounded {
  font-size: 20px;
}

.login-card {
  width: min(100%, 390px);
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 0;
  background: transparent;
}

.login-form-heading {
  margin-bottom: 6px;
}

.login-security {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-700);
  font-size: 11px;
  font-weight: 800;
}

.login-security .material-symbols-rounded {
  font-size: 17px;
}

.login-card .login-form-heading h2 {
  display: block;
  margin: 14px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
}

.login-form-heading p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.login-card .login-field {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.login-card .login-field > label {
  color: inherit;
  font: inherit;
}

.login-input-shell {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-shell > .material-symbols-rounded {
  position: absolute;
  z-index: 1;
  inset-inline-start: 14px;
  color: var(--muted-2);
  font-size: 20px;
  pointer-events: none;
}

.login-card .login-input-shell input {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 46px;
  border: 1px solid #cfd8dd;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
}

.login-card .login-input-shell input:hover {
  border-color: #aebcc2;
}

.login-card .login-input-shell input:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(0, 128, 128, .13);
}

.login-card .login-password-toggle {
  position: absolute;
  z-index: 2;
  inset-inline-end: 6px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
}

.login-card .login-password-toggle:hover {
  background: var(--surface-soft);
  color: var(--primary-700);
}

.login-card .login-password-toggle .material-symbols-rounded {
  font-size: 20px;
}

.login-card .form-message {
  min-height: 20px;
  margin: -4px 0;
  color: var(--danger);
  font-size: 12px;
  line-height: 1.45;
}

.login-card .login-submit {
  width: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--primary-600);
  color: #fff;
  font-weight: 800;
}

.login-card .login-submit:hover {
  background: var(--primary-700);
}

.login-card .login-submit.is-loading .material-symbols-rounded {
  animation: login-pulse 900ms ease-in-out infinite alternate;
}

@keyframes login-pulse {
  to { opacity: .4; }
}

.login-help {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.login-help .material-symbols-rounded {
  margin-top: 1px;
  color: var(--primary-600);
  font-size: 17px;
}

.dark .login-access,
.dark .login-card .login-input-shell input {
  background: var(--surface);
}

.dark .login-card .login-input-shell input {
  border-color: var(--line);
}

@media (max-width: 1180px) {
  .app-grid,
  .app-grid.collapsed {
    width: 100%;
    min-width: 0;
    display: block;
  }

  .epes-main {
    width: 100%;
    min-width: 0;
  }

  .epes-rail,
  .app-grid.collapsed .epes-rail,
  .app-grid.collapsed .epes-rail:not(.open) {
    position: fixed;
    z-index: 2300;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(320px, 88vw);
    height: 100dvh;
    max-height: 100dvh;
    transform: translateX(-105%);
    transition: transform 190ms ease-out;
    box-shadow: 18px 0 44px rgba(15, 32, 35, .18);
  }

  [dir="rtl"] .epes-rail,
  [dir="rtl"] .app-grid.collapsed .epes-rail,
  [dir="rtl"] .app-grid.collapsed .epes-rail:not(.open) {
    transform: translateX(105%);
    box-shadow: -18px 0 44px rgba(15, 32, 35, .18);
  }

  .epes-rail.open,
  [dir="rtl"] .epes-rail.open {
    transform: translateX(0);
  }

  .mobile-rail-scrim {
    position: fixed;
    z-index: 2250;
    inset: 0;
    display: block;
    border: 0;
    background: rgba(10, 24, 27, .54);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 170ms ease-out, visibility 170ms ease-out;
  }

  .mobile-rail-scrim.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  .mobile-menu {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }

  .rail-brand .rail-toggle {
    display: grid;
  }
}

@media (max-width: 900px) {
  .login-wrap {
    width: min(720px, 100%);
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .login-panel {
    min-height: 230px;
    padding: 28px 34px;
    gap: 20px;
  }

  .login-brand-lockup img {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
  }

  .login-panel .login-intro h1 {
    font-size: 30px;
  }

  .login-panel .login-intro p,
  .login-workflow {
    display: none;
  }

  .login-access {
    min-height: 500px;
    padding: 72px 34px 34px;
  }
}

@media (max-width: 760px) {
  .epes-topbar {
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px 10px;
    padding: max(9px, env(safe-area-inset-top)) 12px 10px;
  }

  .mobile-menu span:not(.material-symbols-rounded) {
    display: none;
  }

  .top-title {
    min-width: 0;
  }

  .top-title p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-title h1 {
    margin-top: 2px;
    font-size: 17px;
    overflow-wrap: anywhere;
  }

  .top-cycle-context {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    gap: 4px;
    padding-bottom: 1px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .top-cycle-context::-webkit-scrollbar,
  .mode-banner::-webkit-scrollbar,
  .seg::-webkit-scrollbar,
  .kpi-workbench-tabs::-webkit-scrollbar {
    display: none;
  }

  .top-cycle-context > span {
    flex: 0 0 auto;
    min-height: 32px;
    padding-inline: 8px;
    font-size: 11px;
  }

  .top-actions {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(4, 44px);
    justify-content: end;
    gap: 4px;
  }

  .top-search {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 0 2px;
  }

  .top-actions > .top-language-control {
    grid-column: 2;
  }

  .top-actions > a.top-icon-control {
    grid-column: 3;
  }

  .top-actions > .top-menu:nth-of-type(2) {
    grid-column: 4;
  }

  .top-actions > .top-menu:nth-of-type(3) {
    grid-column: 5;
  }

  .top-actions .top-search input {
    width: 100%;
    height: 44px;
    font-size: 16px;
  }

  .top-language-control,
  .top-icon-control {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .top-language-control .material-symbols-rounded:last-child {
    display: none;
  }

  .top-menu .profile-chip {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 4px;
    border: 0;
  }

  .top-menu .profile-chip > span:not(.avatar-fallback),
  .top-menu .profile-chip > .material-symbols-rounded {
    display: none;
  }

  .top-menu .profile-chip img,
  .top-menu .profile-chip .avatar-fallback {
    width: 36px;
    height: 36px;
  }

  .top-menu .dropdown-panel {
    position: fixed;
    z-index: 2600;
    inset-inline: 12px;
    top: max(68px, calc(env(safe-area-inset-top) + 58px));
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
  }

  .global-search-panel {
    inset-inline: 0;
    width: 100%;
    max-height: min(64dvh, 520px);
  }

  .epes-content {
    width: 100%;
    min-width: 0;
    padding: 12px 12px max(28px, env(safe-area-inset-bottom));
    gap: 12px;
  }

  .mode-banner {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
  }

  .view-head,
  .page-hero {
    align-items: flex-start;
    padding: 16px;
  }

  .view-head h2,
  .page-hero h2 {
    font-size: 20px;
    overflow-wrap: anywhere;
  }

  .view-head .vh-actions,
  .page-hero .vh-actions {
    width: 100%;
    margin-inline-start: 0;
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .view-head .vh-actions > *,
  .page-hero .vh-actions > * {
    flex: 0 0 auto;
  }

  .panel,
  .position-workbench,
  .readiness-workspace,
  .readiness-panel {
    min-width: 0;
  }

  .panel > header,
  .panel header,
  .position-workbench > header {
    min-width: 0;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
  }

  .panel > header > *,
  .panel header > *,
  .position-workbench > header > * {
    min-width: 0;
    max-width: 100%;
  }

  .score-strip,
  .stat-cards,
  .stat-cards.compact,
  .metric-grid,
  .readiness-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .dashboard-grid,
  .surface-grid,
  .decision-surface,
  .workflow-steps,
  .profile-layout,
  .profile-form,
  .worklist,
  .split-2,
  .position-layout,
  .decision-analytics-grid,
  .command-readiness-layout,
  .readiness-side,
  .source-create-row,
  .bulk-position-picker,
  .admin-form-grid,
  .route-form-grid,
  .drawer-grid,
  .modal-action-grid,
  .workflow-focus,
  .workflow-actions,
  .cycle-context-banner.compact,
  .cycle-launch-guide,
  .cycle-setup-links,
  .template-publish-strip,
  .ewa-cycle-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-form-grid .span-2,
  .template-publish-context {
    grid-column: auto;
  }

  .seg,
  .kpi-workbench-tabs,
  .task-status-strip {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .seg > *,
  .kpi-workbench-tabs > *,
  .task-status-strip > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .table-wrap,
  .dt-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap > table,
  .table-wrap .dataTable,
  .dt-container > table {
    min-width: 720px;
  }

  .epes-table-tools {
    position: static;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .epes-table-search,
  .epes-table-search input,
  .epes-table-actions,
  .epes-table-menu-wrap,
  .epes-table-menu-wrap > .btn {
    width: 100%;
  }

  .epes-table-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .epes-table-actions .btn {
    flex: 1 1 140px;
  }

  .dt-layout-row {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .dt-search,
  .dt-length,
  .dt-info,
  .dt-paging {
    max-width: 100%;
  }

  .epes-modal-layer {
    padding: 12px;
  }

  .epes-modal-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 24px);
  }

  .epes-modal-card header,
  .epes-modal-card footer,
  .epes-modal-body {
    padding-inline: 16px;
  }

  .action-drawer {
    grid-template-columns: 1fr;
    align-items: end;
  }

  .action-drawer aside {
    width: 100%;
    max-height: 92dvh;
    padding: 20px 16px max(20px, env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: 12px 12px 0 0;
  }

  .drawer-backdrop {
    position: absolute;
    inset: 0;
  }

  .bulk-builder-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 12px;
  }

  .bulk-builder-footer .btn,
  .ewa-cycle-actions .btn {
    width: 100%;
  }

  .approval-route-list {
    position: fixed;
    z-index: 2700;
    inset-inline: 12px;
    top: 76px;
    width: auto;
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    transform: none;
  }

  [dir="rtl"] .approval-route-list {
    inset-inline: 12px;
    transform: none;
  }
}

@media (max-width: 520px) {
  .epes-login {
    display: block;
    padding: 0;
    background: var(--surface);
  }

  .login-wrap {
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    box-shadow: none;
  }

  .login-panel {
    min-height: 184px;
    padding: max(18px, env(safe-area-inset-top)) 22px 22px;
    justify-content: flex-start;
    gap: 13px;
  }

  .login-brand-lockup {
    gap: 11px;
  }

  .login-brand-lockup img {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
  }

  .login-brand-lockup strong {
    font-size: 20px;
  }

  .login-brand-lockup span {
    max-width: 220px;
    margin-top: 4px;
    font-size: 10px;
  }

  .login-panel .login-intro h1 {
    max-width: 330px;
    font-size: 23px;
    line-height: 1.2;
  }

  .login-assurance {
    display: none;
  }

  .login-access {
    flex: 1 1 auto;
    min-height: 0;
    display: block;
    padding: 70px 22px max(24px, env(safe-area-inset-bottom));
  }

  .login-utilities {
    inset-block-start: 16px;
    inset-inline-end: 18px;
  }

  .login-card {
    width: 100%;
    gap: 14px;
  }

  .login-card .login-form-heading h2 {
    margin-top: 9px;
    font-size: 25px;
  }

  .login-form-heading p {
    margin-top: 7px;
    font-size: 12px;
  }

  .login-card .login-input-shell input,
  .login-card .login-submit {
    min-height: 50px;
  }

  .score-strip,
  .stat-cards,
  .stat-cards.compact,
  .metric-grid,
  .readiness-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (pointer: coarse) {
  button,
  .btn,
  .mini-btn,
  .rail-section-toggle,
  .rail-section-links a,
  .dropdown-panel a,
  .dropdown-panel button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .epes-rail,
  .mobile-rail-scrim,
  .login-card .login-submit.is-loading .material-symbols-rounded {
    transition: none;
    animation: none;
  }
}