/* ═══════════════════════════════════════════════════════════
   FAiA VOE Agent — Global Design System (TJX-style retheme)
   Brand primary: #4361ee  |  Topbar: #374151
   ═══════════════════════════════════════════════════════════ */

/* ── Utility: spinning icon (e.g. active refresh button) ── */
@keyframes faia-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.faia-spin { animation: faia-spin 1s linear infinite; }

/* ── Tokens ── */
:root {
  --bg:            #f0f2f5;
  --bg-card:       #ffffff;
  --bg-hover:      #f7fafc;
  --bg-active:     #eef0ff;

  --border:        #e2e8f0;
  --border-deep:   #cbd5e1;

  --text-primary:   #1a1a2e;
  --text-secondary: #4a5568;
  --text-muted:     #a0aec0;

  --topbar-bg:     #ffffff;   /* white — header and footer match design system */
  --topbar-text:   var(--text-primary);

  --sidebar-bg:           #ffffff;
  --sidebar-border:       #e2e8f0;
  --sidebar-text:         #4a5568;
  --sidebar-hover:        #f7fafc;
  --sidebar-active:       #eef0ff;
  --sidebar-active-border:#4361ee;
  --sidebar-active-text:  #3a56d4;
  --sidebar-done:         #16a34a;

  --accent:        #4361ee;
  --accent-hover:  #3a56d4;
  --accent-light:  #eef0ff;
  --accent-border: #c7d2fe;
  --success:       #38a169;
  --success-light: #f0fff4;
  --success-border:#c6f6d5;
  --warn:          #dd6b20;   /* design token: notify orange */
  --warn-light:    #fff7ed;
  --warn-border:   #fde68a;
  --danger:        #e53e3e;   /* design token: danger red */
  --danger-light:  #fff5f5;
  --danger-border: #fed7d7;

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --radius:     12px;
  --radius-sm:  8px;
  --radius-lg:  14px;
}

/* ── Base ── */
*,*::before,*::after { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   Full-app shell — replaces MudLayout / MudAppBar / MudDrawer
   ═══════════════════════════════════════════════════════════ */

/* Root wrapper — full viewport height flex column */
.faia-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Header: top-row (white sticky bar per design system spec) ──────── */
.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  min-height: 56px;
  padding: 0 2rem;
  background: #ffffff;
  border-bottom: 1px solid #dee2e6;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  flex-shrink: 0;
  color: var(--text-primary);   /* #1a1a2e — dark text on white header */
}

/* Left side: toggle + brand group */
.header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;   /* was 2.5rem — 40px gap separated live dot from title */
  flex: 1;
}

/* Brand group: title + live dot + Live label — one flex child of header-left */
.header-brand-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Brand logo in the header (replaces the "Flatworld VOE Agent · Live" text). FAIA source is 2000×1080 with the
   mark filling only the middle ~50% of its height, so it is rendered 80px tall (mark ≈ 40px) and the empty
   margins are pulled back in with negative margins to keep the 56px header bar unchanged. */
.header-logo-link { display:inline-flex; align-items:center; text-decoration:none; cursor:pointer; line-height:0; }
.header-logo-link:hover, .header-logo-link:focus-visible { text-decoration:none; }
.header-logo {
  height: 80px;
  width: auto;
  display: block;
  object-fit: contain;
  margin: -12px 0 -12px -18px;
}

/* Brand title text */
.header-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1a3c6e;   /* design token: brand navy */
  white-space: nowrap;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

/* Top header menu (e.g. Users) — sits in the right group, just before the avatar */
.header-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-right: 4rem;   /* gap between the menu and the profile avatar */
}
.header-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.header-nav-link:hover {
  background: #eef0ff;   /* design token: primary lighten */
  color: #4361ee;        /* design token: accent blue */
}
.header-nav-link.active {
  background: #eef0ff;
  color: #4361ee;
}
/* Chevron on a dropdown nav tab (Reports, Settings) — a touch of breathing room. */
.header-nav-chevron {
  margin-left: 2px;
  opacity: 0.7;
}

/* Dropdown panels for the navbar menus (Reports, Settings). One look for both: a soft white
   panel sitting just under the tab, rounded rows with a tinted icon chip, and the page you are
   on marked with the accent colour and a left bar — so reopening the menu says "you are here". */
.header-menu-popover {
  margin-top: 6px;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden;
}
.header-menu-list {
  min-width: 220px;
  padding: 8px;
}
.header-menu-list .header-menu-item.mud-list-item {
  position: relative;
  border-radius: 10px;
  padding: 8px 12px 8px 12px;
  margin: 2px 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
  transition: background 0.15s ease, color 0.15s ease;
}
/* Icon in a small tinted circle, like the report page chips. */
.header-menu-list .header-menu-item .mud-list-item-icon {
  min-width: 0;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  color: #64748b;
  transition: background 0.15s ease, color 0.15s ease;
}
.header-menu-list .header-menu-item .mud-list-item-icon .mud-icon-root {
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: inherit;
}
.header-menu-list .header-menu-item:hover {
  background: #f5f7ff;
  color: #4361ee;        /* design token: accent blue */
}
.header-menu-list .header-menu-item:hover .mud-list-item-icon {
  background: #e4e9ff;
  color: #4361ee;
}
/* Current page. */
.header-menu-list .header-menu-item.active {
  background: #eef0ff;   /* design token: primary lighten */
  color: #4361ee;
  font-weight: 700;
}
.header-menu-list .header-menu-item.active .mud-list-item-icon {
  background: #4361ee;
  color: #fff;
}
.header-menu-list .header-menu-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #4361ee;
}

/* ═══════════════════════════════════════════════════════════
   Registered organizations — card list (TenantManagement page)
   ═══════════════════════════════════════════════════════════ */
.org-card-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 18px 20px 20px;
}
.org-card-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.org-card-panel-title {
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
}
.org-card-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #eef0ff;
  color: #4361ee;
  font-size: 0.75rem;
  font-weight: 800;
}
.org-card-list { display: flex; flex-direction: column; gap: 10px; }
.org-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.org-card:hover {
  border-color: var(--accent-border);
  box-shadow: 0 4px 14px rgba(15,23,42,.07);
}
.org-card.is-active {
  border-color: var(--accent-border);
  background: linear-gradient(0deg, #f7f8ff, #ffffff);
  box-shadow: inset 3px 0 0 0 #4361ee;
}
.org-card-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.org-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-card-id {
  font-size: 0.78rem;
  color: #94a3b8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.org-card-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.org-chip-active {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.8rem;
  font-weight: 700;
}
.org-chip-active .mud-icon-root { font-size: 1rem; }
.org-switch-btn { border-radius: 8px; text-transform: none; font-weight: 700; }
.org-delete-btn { color: #cbd5e1; transition: color .12s ease, background .12s ease; }
.org-delete-btn:hover { color: #dc2626; background: #fef2f2; }

/* ── Add organization dialog ── */
.org-dialog .mud-dialog { border-radius: 16px; overflow: hidden; }
.org-dialog-head { display: flex; align-items: flex-start; gap: 13px; }
.org-dialog-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #eef0ff;
  color: #4361ee;
  flex-shrink: 0;
}
.org-dialog-head-text { display: flex; flex-direction: column; gap: 2px; }
.org-dialog-title { font-size: 1.05rem; font-weight: 800; color: #0f172a; line-height: 1.3; }
.org-dialog-sub { font-size: 0.8rem; color: #64748b; line-height: 1.4; }
.org-dialog-body { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; min-width: 380px; }
.org-dialog-id input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.org-dialog-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid var(--border);
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.45;
}
.org-dialog-hint .mud-icon-root { font-size: 1rem; color: #4361ee; flex-shrink: 0; margin-top: 1px; }
.org-dialog-cancel { text-transform: none; font-weight: 600; color: #64748b; }
.org-dialog-submit { text-transform: none; font-weight: 700; border-radius: 8px; }

/* Right side: hub icon + user pill */
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1;
}

/* ── Dashboard stat cards — full-width strip ── */
.dashboard-stat-strip {
  width: 100%;
}
.dashboard-stat-card {
  border-radius: var(--radius) !important;
  overflow: hidden;
  height: 100%;
}

/* Stat cards double as quick filters for the queue */
.dashboard-stat-clickable {
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.dashboard-stat-clickable:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, .10) !important;
  transform: translateY(-1px);
}
/* Queue tabs (Open / Completed): wider with more side padding, equal width, content centred.
   Height, font, icons and colours stay as .faia-tabs defines them. */
.faia-tabs.queue-tabs .mud-tab {
  min-width: 220px !important;
  padding: 0 40px !important;
  justify-content: center !important;
}

.dashboard-stat-selected {
  box-shadow: 0 0 0 2px #4361ee inset, 0 4px 12px rgba(67, 97, 238, .15) !important;
}

/* Body row: sidebar + main area sit side by side */
.faia-body {
  display: flex;
  flex: 1;
}

/* ── Left sidebar ── */
.faia-sidebar {
  width: 248px;
  min-width: 248px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  box-shadow: var(--shadow-sm);
  overflow-y: auto;
  overflow-x: hidden;
  position: sticky;
  top: 56px;           /* matches new explicit header height */
  height: calc(100vh - 56px);
  transition: width 0.22s ease, min-width 0.22s ease,
              border-right 0.22s ease, box-shadow 0.22s ease;
}

/* ── Main content area ── */
.faia-main {
  flex: 1;
  overflow-y: visible;             /* was auto — auto created a non-scrolling context that broke position:sticky descendants */
  background: var(--bg);
  min-width: 0;                    /* prevents flex blowout on long content */
  padding-bottom: 44px;            /* clears fixed footer */
  transition: flex 0.22s ease;     /* smooth expand when sidebar collapses */
}

/* Consistent gutter around every page — never lets content touch the sidebar or viewport edge. */
.content-wrap {
  padding: 28px 32px;
  min-height: 100%;
}

/* ── Review page: sticky source-document viewer (right column) ── */
.review-source-col {
  position: sticky;
  top: 76px;              /* 56px fixed header + 20px breathing room */
  align-self: flex-start;
}
.review-source-card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 130px);     /* 76px top offset + ~44px fixed footer + 10px gap */
  max-height: calc(100vh - 130px);
  width: 100%;
  box-sizing: border-box;
}
.review-source-frame-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  margin: 0;
}
.review-source-frame {
  width: 100%;
  min-width: 100%;
  height: 100%;
  border: none;
  flex: 1;
  margin: 0;
}

/* ── PDF.js highlight viewer (replaces the native iframe so extracted fields can be located) ── */
.pdfh-container {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: auto;
  background: #525659;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 0;
  box-sizing: border-box;
}
.pdfh-page {
  position: relative;
  margin: 0 auto 12px auto;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.pdfh-page canvas {
  display: block;
}
.pdfh-textlayer {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  line-height: 1;
  z-index: 2;
  text-align: initial;
}
.pdfh-textlayer > span {
  position: absolute;
  white-space: pre;
  color: transparent;
  cursor: text;
  transform-origin: 0 0;
}
.pdfh-textlayer .pdfh-highlight {
  background: rgba(255, 210, 0, 0.45);
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.7);
  color: transparent;
}

/* Overlay layer + boxes for AcroForm (fillable) field-value highlights */
.pdfh-annolayer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
}
.pdfh-anno-highlight {
  position: absolute;
  background: rgba(255, 210, 0, 0.40);
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.9);
  pointer-events: none;
}

/* Fields that can be located in the source document on click */
.field-locatable {
  cursor: pointer;
}

/* ── Form Integrity Check (returned-form alteration flags) ─────────────────────── */
.pdfh-integritylayer { z-index: 4; }
.pdfh-integrity-box {
  position: absolute;
  border-radius: 3px;
  pointer-events: none;
  box-sizing: border-box;
}
.pdfh-integrity-box.pdfh-sev-critical { background: rgba(239, 68, 68, 0.18);  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.95); }
.pdfh-integrity-box.pdfh-sev-warning  { background: rgba(245, 158, 11, 0.18); box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.95); }
.pdfh-integrity-box.pdfh-sev-info     { background: rgba(250, 204, 21, 0.22); box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.9); }
.pdfh-integrity-tag {
  position: absolute;
  top: -16px;
  left: -1px;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px 3px 3px 0;
  white-space: nowrap;
  color: #fff;
  letter-spacing: .02em;
}
.pdfh-sev-critical > .pdfh-integrity-tag { background: #dc2626; }
.pdfh-sev-warning  > .pdfh-integrity-tag { background: #d97706; }
.pdfh-sev-info     > .pdfh-integrity-tag { background: #ca8a04; }
.pdfh-integrity-pulse { animation: pdfhIntegrityPulse 1.1s ease-out 2; }
@keyframes pdfhIntegrityPulse {
  0%   { box-shadow: 0 0 0 2px rgba(220,38,38,0.95), 0 0 0 0 rgba(220,38,38,0.55); }
  70%  { box-shadow: 0 0 0 2px rgba(220,38,38,0.95), 0 0 0 14px rgba(220,38,38,0); }
  100% { box-shadow: 0 0 0 2px rgba(220,38,38,0.95), 0 0 0 0 rgba(220,38,38,0); }
}

/* Integrity summary banner + alteration cards (left column of the review modal) */
.integ-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: 9px; margin-bottom: 14px;
  border: 1.5px solid; font-size: 12.5px; line-height: 1.5;
}
.integ-banner .ib-icon { font-size: 18px; flex-shrink: 0; }
.integ-banner .ib-title { font-weight: 800; }
.integ-banner.is-high   { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.integ-banner.is-medium { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.integ-banner.is-low    { background: #fefce8; border-color: #fde68a; color: #854d0e; }
.integ-banner.is-none   { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }

.integ-recheck-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.integ-recheck {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: #2563eb;
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px;
  padding: 4px 12px; cursor: pointer;
}
.integ-recheck:hover { background: #dbeafe; }

.integ-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.integ-card {
  border: 1px solid #e2e8f0; border-left-width: 4px; border-radius: 8px;
  padding: 9px 11px; background: #fff;
}
.integ-card.is-critical { border-left-color: #dc2626; }
.integ-card.is-warning  { border-left-color: #d97706; }
.integ-card.is-info     { border-left-color: #ca8a04; }
.integ-card .ic-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.integ-card .ic-chip {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; color: #fff; white-space: nowrap;
}
.integ-card.is-critical .ic-chip { background: #dc2626; }
.integ-card.is-warning  .ic-chip { background: #d97706; }
.integ-card.is-info     .ic-chip { background: #ca8a04; }
.integ-card .ic-field { font-weight: 700; font-size: 13px; color: #0f172a; }
.integ-card .ic-desc  { font-size: 12px; color: #475569; margin-top: 3px; }
.integ-card .ic-values { font-size: 12px; margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.integ-card .ic-values .k { color: #64748b; }
.integ-card .ic-values .v { font-weight: 700; color: #0f172a; font-family: monospace; }
.integ-card .ic-show {
  margin-top: 6px; font-size: 12px; font-weight: 700; color: #2563eb;
  background: none; border: none; padding: 0; cursor: pointer;
}
.integ-card .ic-show:hover { text-decoration: underline; }

/* Coloured left border on an editable field that has an alteration flag */
.integ-field-flagged { border-left: 3px solid transparent; border-radius: 4px; padding-left: 8px; margin-left: -11px; }
.integ-field-flagged.is-critical { border-left-color: #dc2626; background: rgba(239,68,68,0.04); }
.integ-field-flagged.is-warning  { border-left-color: #d97706; background: rgba(245,158,11,0.05); }
.integ-field-flagged.is-info     { border-left-color: #ca8a04; background: rgba(250,204,21,0.06); }

/* Per-field inline chip on the editable review fields */
.integ-field-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
  margin-left: 6px; color: #fff; vertical-align: middle; cursor: pointer;
}
.integ-field-chip.is-critical { background: #dc2626; }
.integ-field-chip.is-warning  { background: #d97706; }
.integ-field-chip.is-info     { background: #ca8a04; }
/* chip label is the clickable "jump to form" part; ✕ dismisses the flag ("not an issue") */
.integ-field-chip .ifc-label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.integ-field-chip .ifc-dismiss {
  all: unset; cursor: pointer; margin-left: 2px; padding: 0 3px;
  font-size: 12px; line-height: 1; font-weight: 900; color: #fff; opacity: 0.75; border-radius: 999px;
}
.integ-field-chip .ifc-dismiss:hover { opacity: 1; background: rgba(0,0,0,0.22); }

/* ── Toasts (MudBlazor snackbar) — light card, bottom-right, one standard accent, no icons, X to dismiss ──
   Config lives in Program.cs (AddMudServices → SnackbarConfiguration). */
.mud-snackbar-location-bottom-right { bottom: 64px; right: 24px; }   /* clears the fixed ~48px footer so toasts never cover the Flatworld logo */
.mud-snackbar,
.mud-snackbar.mud-alert-text-success,
.mud-snackbar.mud-alert-text-error,
.mud-snackbar.mud-alert-text-warning,
.mud-snackbar.mud-alert-text-info,
.mud-snackbar.mud-alert-text-normal {
  background: linear-gradient(90deg, rgba(67, 97, 238, .06), #fff 55%) !important;
  color: #1e293b !important;
  border: 1px solid #e8edf3;
  border-left: 4px solid #4361ee;                                      /* single brand accent for every toast */
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16), 0 3px 10px rgba(15, 23, 42, 0.06);
  min-width: 300px; max-width: 440px;
  padding: 0;
  overflow: hidden;
}
.mud-snackbar .mud-snackbar-content-message {
  padding: 14px 14px 14px 16px;
  font-size: 13.5px; font-weight: 600; line-height: 1.45;
  letter-spacing: .005em;
  color: #1e293b;
}
/* the X — quiet by default, clearer on hover */
.mud-snackbar .mud-button-root.mud-icon-button {
  color: #94a3b8;
  margin: 4px 6px 4px 0;
  transition: color .15s, background .15s;
}
.mud-snackbar .mud-button-root.mud-icon-button:hover {
  color: #334155;
  background: rgba(100, 116, 139, .12);
}

/* ── VOE Type dropdown options (Review Extraction) ── */
.voe-type-list .mud-list-item { padding-top: 6px; padding-bottom: 6px; }
.voe-type-opt { display: flex; align-items: center; gap: 12px; min-width: 0; }
.voe-type-opt-code { min-width: 58px; text-align: center; font-size: 11px; letter-spacing: .02em; }
.voe-type-opt-name { font-size: 14px; font-weight: 600; color: #0f172a; line-height: 1.25; }
.voe-type-list .mud-selected-item .voe-type-opt-name { color: var(--accent, #4361ee); }

/* Soft plausibility hint under an amount field (display only — not a flag, never blocks) */
.amt-hint { font-size: 11px; color: #92400e; margin: 2px 0 0 2px; line-height: 1.35; }

/* ── Sidebar toggle button (inside header) ── */
.faia-sidebar-toggle {
  background: none;
  border: none;
  color: #4a5568;            /* dark text on white header */
  font-size: 1.25rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.15s;
  flex-shrink: 0;
  font-family: inherit;
}
.faia-sidebar-toggle:hover {
  background: #f1f5f9;
}

/* ── Footer powered-by text ── */
.footer-powered-text {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.85);   /* raised from 0.5 — was nearly invisible on charcoal bg */
}

/* ── Nav sidebar content wrapper ── */
.faia-nav-content {
  display: flex;
  flex-direction: column;
  min-height: 100%;   /* was height:100% — that blocked overflow-y scroll */
  padding: 12px 0 60px; /* 60px bottom ensures last item clears fixed footer */
}

/* Flex spacer between workflow steps and System section.
   Replaces margin-top:auto which prevented scrolling in a height:100% container. */
.sidebar-spacer {
  flex: 1;
  min-height: 16px;
}

/* ── Responsive: mobile sidebar overlay ── */
@media (max-width: 768px) {
  .faia-sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    height: calc(100vh - 56px);
    z-index: 300;
    width: 248px;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.18);
  }
  .faia-main {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════
   MudBlazor overrides — TJX palette
   ═══════════════════════════════════════════════════════════ */

/*
 * Appbar and footer colors are handled by MainLayout.razor.css (Blazor CSS
 * isolation) which wins via attribute+class specificity regardless of JS
 * theme injection timing. Do not add .mud-appbar overrides here — they will
 * lose to MudBlazor's runtime-injected style block.
 */

/* Drawer → white sidebar */
.mud-drawer {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Drawer inner content scroll */
.mud-drawer .mud-drawer-content {
  overflow-y: auto !important;
}

/* Main content area background */
.mud-main-content {
  background: var(--bg) !important;
}

/* Cards → TJX card style */
.mud-paper {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* MudButton primary → accent */
.mud-button-filled-primary {
  background-color: var(--accent) !important;
}
.mud-button-filled-primary:hover {
  background-color: var(--accent-hover) !important;
}

/* ── Native date input — replaces MudDatePicker to avoid its grid/layout bugs ── */
.faia-date-input {
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card, #fff);
  color: var(--text-primary, #1a1a2e);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  color-scheme: light;
}
.faia-date-input:focus  { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-border); }
.faia-date-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
.faia-date-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #a0aec0);
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 50%;
  transition: background .12s, color .12s;
  font-family: inherit;
}
.faia-date-clear:hover { background: var(--danger-light, #fff5f5); color: var(--danger, #e53e3e); }

/* ═══════════════════════════════════════════════════════════
   App Footer — white, fixed bottom, matches design system spec
   ═══════════════════════════════════════════════════════════ */
.app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 199;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 2rem;
  border-top: 1px solid #dee2e6;
  background: #ffffff !important;
  color: var(--text-secondary);
  box-shadow: 0 -1px 4px rgba(0,0,0,0.06);
}
/* Footer wordmark: "VOE Agent" set like a small logo — bold, brand blue on "VOE". */
.footer-code-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.02em;
  text-transform: none;
}
.footer-code-name .footer-wordmark-accent {
  color: #4361ee;
}
.footer-powered-by {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-powered-text {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.footer-logo {
  height: 30px;
  width: auto;
  object-fit: contain;
}

/* ═══════════════════════════════════════════════════════════
   Live dot
   ═══════════════════════════════════════════════════════════ */
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  animation: live-pulse 1.5s infinite;
}
@keyframes live-pulse {
  0%,100% { opacity:1; box-shadow:0 0 0 0 #22c55e55; }
  50%      { opacity:.7; box-shadow:0 0 0 5px #22c55e00; }
}

/* ═══════════════════════════════════════════════════════════
   Login / Auth pages (.login-shell, .login-card)
   ═══════════════════════════════════════════════════════════ */
.login-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: linear-gradient(160deg, #eef1f8 0%, #f6f7fb 55%, #eef0ff 100%);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.login-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(26, 60, 110, 0.12), 0 2px 6px rgba(15, 23, 42, 0.05);
  padding: 44px 40px;
  width: 100%;
  max-width: 430px;
}

/* Static field label above each input — avoids the floating-label-over-autofill overlap. */
.login-field { margin-bottom: 18px; }
.login-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}
.login-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
/* MSuite logo on the sign-in, forgot-password and set-password cards. */
.login-logo {
  height: 72px;
  width: auto;
  object-fit: contain;
}
.login-subtitle {
  font-size: 0.83rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 28px;
}
.login-form { display: flex; flex-direction: column; }
.login-forgot {
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: none;
}
.login-forgot:hover { text-decoration: underline; }
.login-error-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #991b1b;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════
   Workflow bar (WorkflowStepper) — top of every workflow page.
   Replaced the left sidebar: request context · six steps · Previous / Next.
   ═══════════════════════════════════════════════════════════ */
.wfb {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 16px;
  /* Pull the bar up toward the top navbar (content-wrap adds 28px) so the gap above the bar
     matches the gap below it — a small, equal margin on both sides. */
  margin-top: -14px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
/* Request context (replaces the sidebar's "Workflow — name / Loan" banner) */
.wfb-ctx { display: flex; flex-direction: column; min-width: 0; flex: 0 0 auto; max-width: 240px; padding-right: 14px; border-right: 1px solid var(--border); }
.wfb-ctx-k { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.wfb-ctx.is-new .wfb-ctx-k { color: var(--text-muted); }
.wfb-ctx-v { font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wfb-ctx-s { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Steps: equal width, joined by a line filled up to the current step */
.wfb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex: 1 1 auto; min-width: 0; }
.wfb-step { flex: 1 1 0; min-width: 0; position: relative; display: flex; justify-content: center; }
.wfb-step::before, .wfb-step::after { content: ''; position: absolute; top: 15px; width: 50%; height: 2px; background: var(--border); }
.wfb-step::before { left: 0; }
.wfb-step::after  { right: 0; }
.wfb-step:first-child::before, .wfb-step:last-child::after { display: none; }
.wfb-step.is-done::before, .wfb-step.is-done::after, .wfb-step.is-current::before { background: var(--accent); }
.wfb-step-link { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 6px 2px; border-radius: 8px; color: inherit; text-decoration: none; }
.wfb-step-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wfb-circle {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  background: #fff; border: 2px solid var(--border); color: var(--text-muted);
  transition: box-shadow .15s, background .15s, border-color .15s;
}
.wfb-step.is-done    .wfb-circle { background: var(--accent); border-color: var(--accent); color: #fff; }
.wfb-label { font-size: 12px; font-weight: 600; color: #475569; white-space: nowrap; line-height: 1.2; }
.wfb-step.is-upcoming .wfb-label { color: var(--text-muted); font-weight: 500; }

/* Current step — simply bigger so it stands out as "you are here" (no background chip). */
.wfb-step.is-current .wfb-circle {
  width: 40px; height: 40px; margin-top: -5px;   /* grows, shifted up so its centre stays on the line */
  font-size: 15px;
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.wfb-step.is-current .wfb-label { color: var(--accent); font-weight: 800; font-size: 13.5px; }
.wfb-step.is-upcoming .wfb-label { color: var(--text-muted); font-weight: 500; }
.wfb-hil { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; background: var(--warn-light); color: #92400e; border: 1px solid #fde68a; line-height: 1.5; }
.wfb-step.is-upcoming .wfb-hil { opacity: .55; }
.wfb-step-link:hover .wfb-circle { box-shadow: 0 0 0 4px var(--accent-light); }
.wfb-step-link:hover .wfb-label  { color: var(--accent); }

/* Previous / Next */
.wfb-nav { display: flex; gap: 8px; flex: 0 0 auto; padding-left: 14px; border-left: 1px solid var(--border); }

/* Narrow screens: context + arrows on the first line, circles on the second, current label only */
@media (max-width: 860px) {
  .wfb { flex-wrap: wrap; }
  .wfb-ctx, .wfb-nav { border: 0; padding: 0; }
  .wfb-nav { margin-left: auto; }
  .wfb-steps { flex-basis: 100%; order: 3; }
  .wfb-step:not(.is-current) .wfb-label, .wfb-step:not(.is-current) .wfb-hil { display: none; }
}

.stepper-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 6px;
  margin-bottom: 2px;
}
.stepper-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.stepper-back-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.stepper-prev-next { display: flex; gap: 8px; }
.stepper-prev,
.stepper-next {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--accent-border);
  transition: background 0.15s;
  font-family: inherit;
}
.stepper-prev:hover,
.stepper-next:hover { background: var(--accent-light); }

/* ═══════════════════════════════════════════════════════════
   Avatar (small — sidebar / cards)
   ═══════════════════════════════════════════════════════════ */
.faia-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   Header profile avatar-button + dropdown
   ═══════════════════════════════════════════════════════════ */
.faia-profile-wrap {
  position: relative;
}

.faia-avatar-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 2px solid transparent;
  border-radius: 50px;
  padding: 3px 8px 3px 3px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.faia-avatar-btn:hover,
.faia-avatar-btn.open {
  border-color: #4361ee;
  background: #eef0ff;
}
.faia-avatar-chevron {
  color: #718096;
  transition: transform .2s;
}
.faia-avatar-btn.open .faia-avatar-chevron {
  transform: rotate(180deg);
}

.faia-profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  z-index: 9999;
  overflow: hidden;
  animation: pdFadeIn .15s ease;
}
@keyframes pdFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.faia-profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}
.faia-profile-avatar-lg {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4361ee, #3a56d4);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.faia-profile-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.faia-profile-name {
  font-weight: 700;
  font-size: 0.875rem;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.faia-profile-role {
  font-size: 0.72rem;
  font-weight: 600;
  color: #4361ee;
  background: #eef0ff;
  border-radius: 4px;
  padding: 1px 6px;
  width: fit-content;
}
.faia-profile-email {
  font-size: 0.72rem;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.faia-profile-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 0;
}

/* ── Settings section inside the profile dropdown ── */
.faia-profile-section {
  padding: 6px;
}
.faia-profile-section-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ca3af;
  padding: 6px 10px 4px;
}
.faia-profile-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  text-align: left;
  transition: background .12s ease, color .12s ease;
}
.faia-profile-item > span {
  flex: 1 1 auto;
}
.faia-profile-item .mud-icon-root {
  font-size: 1.15rem;
  color: #6b7280;
  transition: color .12s ease;
}
.faia-profile-item:hover {
  background: #eef0ff;   /* design token: primary lighten */
  color: #4361ee;        /* design token: accent blue */
}
.faia-profile-item:hover .mud-icon-root {
  color: #4361ee;
}
.faia-profile-item.active {
  background: #eef0ff;
  color: #4361ee;
}
.faia-profile-item.active .mud-icon-root {
  color: #4361ee;
}

.faia-profile-signout {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: #e53e3e;
  cursor: pointer;
  transition: background .12s;
  text-align: left;
}
.faia-profile-signout:hover {
  background: #fff5f5;
}

/* ═══════════════════════════════════════════════════════════
   Sidebar nav items
   ═══════════════════════════════════════════════════════════ */
.faia-nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;      /* taller rows */
  margin: 7px 8px;         /* space between steps */
  border-left: 3px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  color: var(--sidebar-text);
  font-size: 16px;         /* larger label */
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.faia-nav-item:hover { background: var(--sidebar-hover); color: var(--text-primary); }
.faia-nav-item.active {
  background: var(--sidebar-active) !important;
  border-left-color: var(--sidebar-active-border) !important;
  color: var(--sidebar-active-text) !important;
  font-weight: 600;
}
.faia-nav-item.done { color: var(--sidebar-done); }

/* Nav icon inside step circles (replaces MudIcon) */
.nav-icon {
  font-size: 13px;
  line-height: 1;
}

/* Nav step circles */
.nav-step {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--text-muted);
}
.nav-step.step-active { background: var(--accent);  border-color: var(--accent);  color: #fff; }
.nav-step.step-done   { background: var(--success); border-color: var(--success); color: #fff; }
.nav-step.step-hil    { background: var(--warn);    border-color: var(--warn);    color: #fff; }

/* HIL badge (sidebar) */
.hil-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  background: var(--warn-light);
  color: #92400e;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid var(--warn-border);
}

/* Sidebar section labels */
.sidebar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-muted);
  padding: 14px 18px 6px;
  text-transform: uppercase;
}
.sidebar-divider { height: 1px; background: var(--border); margin: 10px 18px; }

/* ═══════════════════════════════════════════════════════════
   TJX-style page section shells  (.wl-section / .wl-step)
   Used on all pages for card-like content grouping
   ═══════════════════════════════════════════════════════════ */
.wl-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.wl-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.wl-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.wl-step.done  { background: var(--success); }
.wl-step.warn  { background: var(--warn); }
.wl-step.error { background: var(--danger); }

.wl-label {
  font-weight: 700;
  font-size: 0.93rem;
  margin: 0;
  color: var(--text-primary);
}
.wl-hint {
  color: #718096;
  font-size: 0.82rem;
  margin: 0 0 10px;
}

/* ═══════════════════════════════════════════════════════════
   Automation phase bar (top of every workflow page)
   One icon tile per pipeline phase, joined by a thin line. Each phase has its own
   pastel tone; completed tiles turn green with a check, the running tile keeps its
   tone and pulses, upcoming tiles are muted.
   ═══════════════════════════════════════════════════════════ */
.phase-bar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 14px 24px 10px;
  display: flex;
  align-items: center;
  overflow-x: auto;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.ph-row { list-style: none; margin: 0 auto; padding: 0; display: flex; flex: 1 1 auto; max-width: 1500px; min-width: 0; }
.ph-step { flex: 1 1 0; min-width: 0; position: relative; display: flex; justify-content: center; }
/* Connector: left and right halves so each phase owns the line around its own tile. */
.ph-step::before, .ph-step::after { content: ''; position: absolute; top: 22px; width: 50%; height: 1.5px; background: var(--border); }
.ph-step::before { left: 0; }
.ph-step::after  { right: 0; }
.ph-step:first-child::before, .ph-step:last-child::after { display: none; }
.ph-step.line-l::before, .ph-step.line-r::after { background: #a7f3d0; }
/* Small marker on the line just before the phase that is running (like a playhead). */
.ph-step.is-current:not(:first-child) .ph-item::before {
  content: ''; position: absolute; left: -18px; top: 18px; width: 8px; height: 8px; border-radius: 50%;
  background: #334155; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #cbd5e1;
}
.ph-step .mud-tooltip-root { display: block; }
.ph-item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px 2px; cursor: default; }
.ph-tile {
  position: relative;
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #94a3b8; border: 1px solid #e2e8f0;
  transition: transform .15s, box-shadow .15s;
}
.ph-tile > .mud-icon-root { font-size: 22px; }
.ph-item:hover .ph-tile { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15,23,42,.10); }
/* Per-phase tones: completed and running tiles keep their own colour; upcoming tiles stay muted. */
.ph-step.is-done.tone-amber  .ph-tile, .ph-step.is-current.tone-amber  .ph-tile { background: #fef3c7; color: #d97706; border-color: #fde68a; }
.ph-step.is-done.tone-indigo .ph-tile, .ph-step.is-current.tone-indigo .ph-tile { background: #e0e7ff; color: #4f46e5; border-color: #c7d2fe; }
.ph-step.is-done.tone-teal   .ph-tile, .ph-step.is-current.tone-teal   .ph-tile { background: #ccfbf1; color: #0d9488; border-color: #99f6e4; }
.ph-step.is-done.tone-orange .ph-tile, .ph-step.is-current.tone-orange .ph-tile { background: #ffedd5; color: #ea580c; border-color: #fed7aa; }
.ph-step.is-done.tone-purple .ph-tile, .ph-step.is-current.tone-purple .ph-tile { background: #ede9fe; color: #7c3aed; border-color: #ddd6fe; }
.ph-step.is-done.tone-green  .ph-tile, .ph-step.is-current.tone-green  .ph-tile { background: #dcfce7; color: #16a34a; border-color: #bbf7d0; }
.ph-step.is-done.tone-blue   .ph-tile, .ph-step.is-current.tone-blue   .ph-tile { background: #dbeafe; color: #2563eb; border-color: #bfdbfe; }
.ph-step.is-current .ph-tile { animation: ph-pulse 2s ease-out infinite; }
@keyframes ph-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(67,97,238,.28); }
  70%  { box-shadow: 0 0 0 9px rgba(67,97,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(67,97,238,0); }
}
/* Completed: small green check badge on the tile's corner. */
.ph-check {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #22c55e; color: #fff; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.18);
}
.ph-check .mud-icon-root { font-size: 12px; }
.ph-step.is-error   .ph-tile { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
.ph-step.is-skipped .ph-tile { border-style: dashed; opacity: .6; }
.ph-label { margin-top: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: #475569; max-width: 130px; }
.ph-step.is-current  .ph-label { color: #0f172a; font-weight: 800; }
.ph-step.is-error    .ph-label { color: #dc2626; font-weight: 800; }
.ph-step.is-upcoming .ph-label, .ph-step.is-skipped .ph-label { color: var(--text-muted); font-weight: 500; }
/* Sub-label: only the running (or failed) phase carries one. */
.ph-pill { margin-top: 4px; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 99px; line-height: 1.5; }
.ph-pill.running { background: var(--accent-light); color: var(--accent-hover); }
.ph-pill.error   { background: #fee2e2; color: #991b1b; }
/* "Phase 5 of 7" anchors the right edge of the bar. */
.ph-progress { flex-shrink: 0; margin-left: 20px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
/* One caption line for the phase in progress (or the one that failed). */
.ph-now { display: flex; align-items: center; gap: 8px; padding: 7px 24px; font-size: 12px; color: #3a56d4;
          background: #f5f7ff; border-bottom: 1px solid #e0e5ff; }
.ph-now strong { color: #4361ee; }
.ph-now.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.ph-now.error strong { color: #dc2626; }
.ph-now-dot { width: 7px; height: 7px; border-radius: 50%; background: #4361ee; flex-shrink: 0; animation: blink 1.4s infinite; }
.ph-now.error .ph-now-dot { background: #dc2626; animation: none; }

/* Narrow screens: keep the tiles and connector, show only the running phase's label. */
@media (max-width: 900px) {
  .ph-step:not(.is-current):not(.is-error) .ph-label { display: none; }
  .ph-progress { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   Status pills
   ═══════════════════════════════════════════════════════════ */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
}
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.s-pending  { background: #f1f5f9; color: #475569; }
.s-pending::before  { background: #94a3b8; }
.s-active   { background: var(--accent-light); color: var(--accent); }
.s-active::before   { background: var(--accent); animation: blink 1.5s infinite; }
.s-hil      { background: var(--warn-light);  color: #92400e; }
.s-hil::before      { background: #f59e0b; }
.s-done     { background: var(--success-light); color: #166534; }
.s-done::before     { background: #22c55e; }
.s-error    { background: var(--danger-light); color: #991b1b; }
.s-error::before    { background: #ef4444; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Dashboard "Stages" column — stage name + "Step N of 7" caption ── */
.stage-name { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.stage-meta { font-size: 11px; color: #94a3b8; margin-top: 3px; }

/* ═══════════════════════════════════════════════════════════
   Tags
   ═══════════════════════════════════════════════════════════ */
.tag        { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; }
.tag-blue   { background: var(--accent-light);   color: var(--accent); }
.tag-green  { background: var(--success-light);  color: #166534; }
.tag-yellow { background: var(--warn-light);     color: #92400e; }
.tag-red    { background: var(--danger-light);   color: #991b1b; }
.tag-gray   { background: #f1f5f9; color: #475569; }
.tag-purple { background: #ede9fe; color: #6d28d9; }

/* Excel badge (TJX style, reused in VOE page headers) */
.wl-badge-excel {
  background: var(--success-light);
  color: #276749;
  border: 1px solid var(--success-border);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════
   Action buttons (TJX wl-btn pattern)
   ═══════════════════════════════════════════════════════════ */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: .15s;
  white-space: nowrap;
}
.action-btn:disabled { opacity: .5; cursor: not-allowed; }
.action-btn-primary { background: var(--accent);  color: #fff; }
.action-btn-primary:hover { background: var(--accent-hover); }
.action-btn-warn    { background: var(--warn);    color: #fff; }
.action-btn-warn:hover { background: #b45309; }
.action-btn-success { background: var(--success); color: #fff; }
.action-btn-success:hover { background: #276749; }
.action-btn-ghost   { background: #fff; color: #475569; border: 1px solid var(--border); }
.action-btn-ghost:hover { background: var(--bg-hover); }
.action-btn-outline {
  background: #fff;
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.2s;
}
.action-btn-outline:hover:not(:disabled) { background: var(--accent-light); }
.action-btn-outline:disabled { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════
   Confidence bar
   ═══════════════════════════════════════════════════════════ */
.conf-wrap  { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.conf-bar   { flex: 1; height: 5px; background: var(--border); border-radius: 99px; overflow: hidden; max-width: 80px; }
.conf-fill  { height: 100%; border-radius: 99px; }
.conf-high  { background: #22c55e; }
.conf-med   { background: #f59e0b; }
.conf-low   { background: #ef4444; }
.conf-label { font-size: 11px; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   HIL banner
   ═══════════════════════════════════════════════════════════ */
.hil-banner {
  background: var(--warn-light);
  border: 2px solid var(--warn-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════
   Audit trail
   ═══════════════════════════════════════════════════════════ */
.audit-row  { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid #f1f5f9; font-size: 12px; }
.audit-time { color: var(--text-muted); font-family: monospace; flex-shrink: 0; min-width: 54px; }
.audit-desc { flex: 1; color: #334155; }
.audit-by   { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   Detail rows (VOE Summary card)
   ═══════════════════════════════════════════════════════════ */
.detail-row       { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid #f8fafc; font-size: 13px; }
.detail-row:last-child { border-bottom: none; }
.detail-key       { color: #64748b; }
.detail-val       { color: var(--text-primary); font-weight: 600; }
.detail-val.monospace { font-family: monospace; }

/* ═══════════════════════════════════════════════════════════
   Timeline badges
   ═══════════════════════════════════════════════════════════ */
.tl-badge         { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.tl-badge-done    { background: var(--success-light); color: #16a34a; }
.tl-badge-active  { background: var(--accent-light);  color: var(--accent); }
.tl-badge-wait    { background: #f1f5f9; color: #64748b; }
.tl-badge-error   { background: var(--danger-light);  color: var(--danger); }

/* ═══════════════════════════════════════════════════════════
   Page header
   ═══════════════════════════════════════════════════════════ */
.page-title  {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.page-subtitle {
  color: #718096;
  font-size: 0.85rem;
  margin-top: 0;
  margin-bottom: 20px;
}
.page-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.page-badge-warn    { background: var(--warn-light);  color: #92400e; }
.page-badge-primary { background: var(--accent-light); color: var(--accent); }

/* Section labels */
.section-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #334155;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Ensure MudSelect popovers open above custom full-screen modals (which use z-index 2000) */
.voe-modal-popover {
  z-index: 3000 !important;
}

/* ═══════════════════════════════════════════════════════════
   Row states
   ═══════════════════════════════════════════════════════════ */
.row-dim { opacity: .45; }

/* ═══════════════════════════════════════════════════════════
   Phase card progress animation
   ═══════════════════════════════════════════════════════════ */
@keyframes slide {
  from { transform: translateX(-20%); }
  to   { transform: translateX(20%);  }
}

/* ═══════════════════════════════════════════════════════════
   Misc utilities
   ═══════════════════════════════════════════════════════════ */
.monospace    { font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 12px; }
.text-muted   { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warn    { color: var(--warn); }
.text-danger  { color: var(--danger); }
.font-bold    { font-weight: 700; }
.font-semibold{ font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   Alert banners — TJX-style inline notification strips
   Used on Upload, ReviewExtraction, and other pages
   ═══════════════════════════════════════════════════════════ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  border-left: 4px solid transparent;
}
.alert-info {
  background: var(--accent-light);
  border-left-color: var(--accent);
  color: #1e3a8a;
}
.alert-warn {
  background: var(--warn-light);
  border-left-color: var(--warn);
  color: #92400e;
}
.alert-error {
  background: var(--danger-light);
  border-left-color: var(--danger);
  color: #7f1d1d;
}
.alert-success {
  background: var(--success-light);
  border-left-color: var(--success);
  color: #14532d;
}


/* ── Base ── */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
}

/* ── MudBlazor overrides to match design tokens ── */

/* Drawer → white sidebar */
.mud-drawer {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Drawer inner content must scroll so the last nav item isn't hidden by the fixed footer */
.mud-drawer .mud-drawer-content {
  overflow-y: auto !important;
  padding-bottom: 52px !important;
}

/* Main content area */
.mud-main-content { background: var(--bg) !important; }

/* Cards */
.mud-paper {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── Live dot ── */
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  animation: live-pulse 1.5s infinite;
}
@keyframes live-pulse {
  0%,100% { opacity:1; box-shadow:0 0 0 0 #22c55e55; }
  50%      { opacity:.7; box-shadow:0 0 0 5px #22c55e00; }
}

/* ── Avatar ── */
.faia-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);   /* same brand blue as the dropdown's large avatar */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* ── Sidebar nav items ── */
.faia-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-left: 3px solid transparent;
  text-decoration: none;
  color: var(--sidebar-text);
  font-size: 13.5px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.faia-nav-item:hover { background: var(--sidebar-hover); color: var(--text-primary); }
.faia-nav-item.active {
  background: var(--sidebar-active) !important;
  border-left-color: var(--sidebar-active-border) !important;
  color: var(--sidebar-active-text) !important;
  font-weight: 600;
}
.faia-nav-item.done  { color: var(--sidebar-done); }

/* ── Nav step circles ── */
.nav-step {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--text-muted);
}
.nav-step.step-active { background: var(--accent);  border-color: var(--accent);  color: #fff; }
.nav-step.step-done   { background: var(--success); border-color: var(--success); color: #fff; }
.nav-step.step-hil    { background: var(--warn);    border-color: var(--warn);    color: #fff; }

/* ── HIL badge (sidebar) ── */
.hil-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  background: #fef3c7;
  color: #92400e;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid #fde68a;
}

/* ── Sidebar section labels ── */
.sidebar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text-muted);
  padding: 14px 18px 6px;
  text-transform: uppercase;
}
.sidebar-divider { height: 1px; background: var(--border); margin: 10px 18px; }


/* ── Status pills ── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
}
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.s-pending  { background: #f1f5f9; color: #475569; }
.s-pending::before  { background: #94a3b8; }
.s-active   { background: #dbeafe; color: #1d4ed8; }
.s-active::before   { background: #3b82f6; animation: blink 1.5s infinite; }
.s-hil      { background: #fef3c7; color: #92400e; }
.s-hil::before      { background: #f59e0b; }
.s-done     { background: #dcfce7; color: #166534; }
.s-done::before     { background: #22c55e; }
.s-error    { background: #fee2e2; color: #991b1b; }
.s-error::before    { background: #ef4444; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Tags ── */
.tag { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; }
.tag-blue   { background: #dbeafe; color: #1d4ed8; }
.tag-green  { background: #dcfce7; color: #166534; }
.tag-yellow { background: #fef3c7; color: #92400e; }
.tag-red    { background: #fee2e2; color: #991b1b; }
.tag-gray   { background: #f1f5f9; color: #475569; }
.tag-purple { background: #ede9fe; color: #6d28d9; }

/* ── Confidence bar ── */
.conf-wrap { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.conf-bar  { flex: 1; height: 5px; background: #e2e8f0; border-radius: 99px; overflow: hidden; max-width: 80px; }
.conf-fill { height: 100%; border-radius: 99px; }
.conf-high { background: #22c55e; }
.conf-med  { background: #f59e0b; }
.conf-low  { background: #ef4444; }
.conf-label { font-size: 11px; font-weight: 700; }

/* ── Queue table action buttons ── */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: .15s;
  white-space: nowrap;
}
.action-btn-primary { background: var(--accent);  color: #fff; }
.action-btn-primary:hover { background: #1d4ed8; }
.action-btn-warn    { background: var(--warn);    color: #fff; }
.action-btn-warn:hover { background: #b45309; }
.action-btn-success { background: var(--success); color: #fff; }
.action-btn-success:hover { background: #15803d; }
.action-btn-ghost   { background: #fff; color: #475569; border: 1px solid #e2e8f0; }
.action-btn-ghost:hover { background: #f8fafc; }

/* ── HIL banner ── */
.hil-banner {
  background: #fffbeb;
  border: 2px solid #f59e0b;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* ── Audit trail ── */
.audit-row { display:flex; gap:12px; align-items:baseline; padding:5px 0; border-bottom:1px solid #f1f5f9; font-size:12px; }
.audit-time { color:#94a3b8; font-family:monospace; flex-shrink:0; min-width:54px; }
.audit-desc { flex:1; color:#334155; }
.audit-by   { color:#94a3b8; font-size:11px; flex-shrink:0; }

/* ── Detail rows (VOE Summary card) ── */
.detail-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid #f8fafc; font-size:13px; }
.detail-row:last-child { border-bottom:none; }
.detail-key { color:#64748b; }
.detail-val { color:#0f172a; font-weight:600; }
.detail-val.monospace { font-family:monospace; }

/* ── Timeline badges ── */
.tl-badge { display:inline-block; padding:1px 8px; border-radius:99px; font-size:11px; font-weight:700; }
.tl-badge-done   { background:#dcfce7; color:#16a34a; }
.tl-badge-active { background:#dbeafe; color:#1d4ed8; }
.tl-badge-wait   { background:#f1f5f9; color:#64748b; }
.tl-badge-error  { background:#fee2e2; color:#dc2626; }

/* ── Row dim for escalated/completed ── */
.row-dim { opacity: .45; }

/* ── Page header ── */
.page-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
}
.page-badge-warn    { background: var(--warn-light);   color: #92400e; }
.page-badge-primary { background: var(--accent-light); color: var(--accent); }

/* ── Section labels ── */
.section-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #334155;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ── Phase card progress animation ── */
@keyframes slide {
    from { transform: translateX(-20%); }
    to   { transform: translateX(20%);  }
}

/* ── Misc ── */
.monospace { font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 12px; }
.text-muted    { color: var(--text-muted); }
.text-success  { color: var(--success); }
.text-warn     { color: var(--warn); }
.text-danger   { color: var(--danger); }
.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }

/* Blazor FocusOnNavigate moves focus to the page <h1> after each navigation (for screen readers);
   browsers then paint a focus rectangle around the heading. Keep the focus, hide the box. */
h1:focus, h1:focus-visible { outline: none; box-shadow: none; }


/* ── Review Extraction: Employer Verification Evidence panel (details left · contacts right) ── */
.ev-panel { border: 2px solid #bfdbfe; background: #eff6ff; border-radius: 12px; margin-bottom: 20px; overflow: hidden; }
.ev-panel.is-warn { border-color: #fde68a; background: #fffbeb; }
.ev-banner { margin: 12px 18px 0; }
/* Unverified-employer notice: a slim strip, not an error box. Icon · title + body · links on the right. */
.ev-notice { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-radius: 10px; background: #fffbeb; border: 1px solid #fcd34d; }
.ev-notice-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: #fde68a; color: #92400e; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.ev-notice-text { flex: 1; min-width: 0; }
.ev-notice-title { font-size: 13px; font-weight: 800; color: #92400e; line-height: 1.3; }
.ev-notice-body { font-size: 12.5px; color: #78350f; line-height: 1.5; margin-top: 2px; }
.ev-notice-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.ev-notice-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #92400e; background: #fff; border: 1px solid #fcd34d; border-radius: 999px; padding: 4px 12px; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.ev-notice-link:hover { background: #fef3c7; border-color: #f59e0b; text-decoration: none; color: #78350f; }
@media (max-width: 900px) { .ev-notice { flex-wrap: wrap; } .ev-notice-actions { width: 100%; justify-content: flex-start; padding-left: 36px; } }
.ev-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; cursor: pointer; user-select: none; flex-wrap: wrap; }
.ev-title { font-size: 13.5px; font-weight: 800; color: #1e40af; }
.ev-panel.is-warn .ev-title { color: #92400e; }
.ev-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.ev-last { margin-left: auto; font-size: 11.5px; color: #64748b; }
.ev-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border-top: 1px solid #dbe4f3; background: #fff; }
.ev-panel.is-warn .ev-body { border-top-color: #fde68a; }
.ev-col { padding: 14px 18px; min-width: 0; }
.ev-col + .ev-col { border-left: 1px solid #e2e8f0; }
.ev-col-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ev-col-h .k { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.ev-col-h .s { font-size: 11.5px; color: #94a3b8; }
.ev-dl { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 14px; }
.ev-dl > div { padding: 7px 0; border-top: 1px solid #f1f5f9; min-width: 0; }
.ev-dl > div:nth-child(-n+2) { border-top: 0; }
.ev-dl .k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; align-self: center; }
.ev-dl .v { font-size: 13px; font-weight: 600; color: #0f172a; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.ev-dl .v.is-dim { color: #94a3b8; font-weight: 400; }
.ev-dl .v.mono { font-family: monospace; }
.ev-meter { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.ev-meter .bar { width: 90px; height: 6px; border-radius: 3px; background: #e2e8f0; overflow: hidden; }
.ev-meter .bar i { display: block; height: 100%; }
@media (max-width: 900px) {
  .ev-body { grid-template-columns: 1fr; }
  .ev-col + .ev-col { border-left: 0; border-top: 1px solid #e2e8f0; }
}

/* ── Review Extraction: right-hand document viewer with VOE Form / Borrower Authorization tabs ── */
.review-doc-card { padding: 0 !important; overflow: hidden; }
.doc-tabs { display: flex; padding: 0 12px; border-bottom: 1px solid #e2e8f0; flex-shrink: 0; }
.doc-tab { padding: 12px 14px 10px; font: inherit; font-size: 13px; font-weight: 700; color: #64748b; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.doc-tab:hover { color: #334155; }
.doc-tab.is-active { color: #2f4fd8; border-bottom-color: #2f4fd8; }
.doc-tab:focus-visible { outline: 2px solid #2f4fd8; outline-offset: -2px; }
.doc-tab-badge { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #dcfce7; color: #166534; }
.doc-tab-badge.is-missing { background: #fee2e2; color: #991b1b; }
.doc-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 10px 14px 10px; }
.doc-panel.is-scroll { overflow: auto; }
.doc-panel[hidden] { display: none !important; }
.doc-toolbar { display: flex; align-items: center; gap: 8px; margin: -10px -14px 10px; padding: 6px 14px; border-bottom: 1px solid #e2e8f0; font-size: 12px; color: #64748b; min-height: 46px; flex-wrap: wrap; flex-shrink: 0; }
.doc-toolbar .doc-fn { font-weight: 600; color: #0f172a; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-toolbar .sp { flex: 1; }
.doc-toolbar .doc-date .mud-input-control-input-container { margin-top: 0; }
.doc-caption { text-align: center; font-size: 11px; color: #94a3b8; margin-top: 6px; flex-shrink: 0; }
.doc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 10px; color: #94a3b8; font-size: 13px; text-align: center; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 24px; line-height: 1.6; }
.doc-empty strong { color: #475569; }

/* ── Evidence panel: "Check a number" ── */
.ev-check { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e2e8f0; }
/* On the VVOE confirm-contact card the wrapper already draws the amber separator — drop the component's own. */
.vvoe-check .ev-check { margin-top: 0; padding-top: 0; border-top: 0; }
.ev-check-row { display: flex; gap: 8px; align-items: center; }
.ev-check-row .ev-check-input { flex: 1; min-width: 0; max-width: 220px; }
.ev-check-row .ev-check-input .mud-input-control-input-container { margin-top: 0; }
.ev-check-result { margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.5; }
.ev-check-result .t { font-weight: 700; }
.ev-check-result .mono { font-family: monospace; }
.ev-check-result .d { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; }
.ev-check-result .d a { font-weight: 700; text-decoration: none; }
.ev-check-result.is-ok   { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.ev-check-result.is-ok .d a { color: #15803d; }
.ev-check-result.is-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.ev-check-result.is-bad  { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.ev-check-biz { margin-top: 6px; padding: 8px 10px; border-radius: 6px; background: #fff; border: 1px solid #fde68a; color: #0f172a; }
.ev-check-biz .n { font-weight: 700; }
.ev-check-biz .a { font-size: 12px; color: #475569; }
.ev-check-biz .m { display: flex; gap: 14px; font-size: 11.5px; color: #94a3b8; margin-top: 3px; }
.ev-check-biz .m a { color: #4361ee; font-weight: 600; text-decoration: none; }
/* ── Manual Call Result (shown when Intake:AutomatedCallReviewEnabled is false) ── */
.mcr { max-width: 720px; margin: 8px auto 0; }
/* Verbal VOEs: call result and follow-ups side by side, using the page width. */
.mcr.mcr--wide { max-width: 1320px; }
.mcr-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.mcr-split .mcr-fu { padding: 18px 20px !important; }
.mcr-split .mcr-fu .fu-indent { margin-left: 0; }
@media (max-width: 1100px) {
  .mcr-split { grid-template-columns: minmax(0, 1fr); }
}
.mcr-head { text-align: center; margin-bottom: 18px; }
.mcr-icon { width: 54px; height: 54px; border-radius: 16px; background: #e8edfb; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 10px; }
.mcr-sub { color: #64748b; font-size: 13px; margin-top: 2px; }
.mcr-card { padding: 24px 26px 22px !important; border-radius: 14px !important; }
.mcr-hint { display: flex; gap: 10px; align-items: flex-start; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 12px 14px; margin-bottom: 22px; font-size: 13px; color: #1e40af; line-height: 1.55; }
.mcr-hint-icon { font-size: 18px; flex-shrink: 0; }
.mcr-actions { margin-top: 22px; display: flex; justify-content: flex-end; }
.mcr-head .page-title { justify-content: center; text-align: center; }
.mcr-numbers { margin: -6px 0 20px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.mcr-numbers-k { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #64748b; margin-bottom: 8px; }
.mcr-numbers-list { display: flex; flex-wrap: wrap; gap: 8px; }
.mcr-number { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; background: #fff; border: 1px solid #e2e8f0; }
.mcr-number .mono { font-family: monospace; font-size: 14px; font-weight: 700; color: #0f172a; }
.mcr-number .lbl { font-size: 11px; font-weight: 700; color: #64748b; }
.mcr-number.is-primary { border-color: #86efac; background: #f0fdf4; }
.mcr-number.is-primary .lbl { color: #15803d; }
/* ── Dashboard: created-date range picker ── */
/* MudBlazor copies the picker's Class onto its inner inputs too — scope the width to the root only. */
.mud-picker.dash-date-range { width: 350px !important; min-width: 350px; max-width: 350px; flex: none !important; }
.dash-date-range .mud-input-slot { font-variant-numeric: tabular-nums; }
.dash-date-presets .mud-button { font-size: 12px; font-weight: 700; text-transform: none; padding: 4px 10px; min-width: 0; }
/* Compact single-month calendar: smaller day cells, tighter header, quick ranges as chips */
.dash-date-popover { border-radius: 12px !important; box-shadow: 0 12px 32px rgba(15, 23, 42, .18) !important; }
.dash-date-popover .mud-picker-calendar-container { padding: 6px 8px 2px; }
.dash-date-popover .mud-picker-calendar-header { padding: 4px 6px 0; }
.dash-date-popover .mud-picker-calendar-header-transition { font-size: 13px; font-weight: 700; color: #0f172a; }
.dash-date-popover .mud-picker-calendar-header-switch .mud-icon-button { width: 28px; height: 28px; padding: 2px; }
.dash-date-popover .mud-picker-calendar-header-day { width: 30px; min-width: 30px; font-size: 10.5px; font-weight: 700; color: #94a3b8; }
.dash-date-popover .mud-picker-calendar { min-width: 0; }
.dash-date-popover .mud-day { width: 30px; height: 30px; min-width: 30px; margin: 1px; font-size: 12px; border-radius: 8px; }
.dash-date-popover .mud-day.mud-selected { font-weight: 700; }
.dash-date-presets { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px 10px; border-top: 1px solid #eef2f7; width: 100%; }
.dash-date-presets .mud-button { font-size: 11.5px; font-weight: 700; text-transform: none; padding: 3px 10px; min-width: 0; border-radius: 999px; border: 1px solid #e2e8f0; background: #f8fafc; color: #334155; line-height: 1.4; }
.dash-date-presets .mud-button:hover { background: #e8edfb; border-color: #c7d2fe; color: #1e3a8a; }

/* Organisation next to the logo: a thin divider, then the name. Admins get it as a switcher;
   everyone else as plain text, since there is nothing for them to switch. */
.header-org-divider { display: inline-block; width: 1px; height: 22px; background: #e2e8f0; margin: 0 14px 0 10px; vertical-align: middle; }
.header-org-name { font-size: 0.9375rem; font-weight: 600; color: #334155; white-space: nowrap; letter-spacing: .005em; }
.header-org-switch { font-size: 0.9375rem; }

/* Organisation switcher menu: a small caption, a tick on the current one, a quiet separator. */
.header-menu-caption { padding: 6px 12px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.header-menu-sep { height: 1px; background: #eef1f6; margin: 6px 4px; }
.header-menu-list .header-menu-item .header-org-check { margin-left: auto; padding-left: 12px; color: #4361ee; }
.header-menu-list .header-menu-item .mud-list-item-text { display: flex; align-items: center; width: 100%; }

/* ── TPV verifier search (Call Review) — one scrollbar, compact rows, "Most used" tag ── */
.tpv-pop { max-height: 320px !important; overflow-y: auto !important; border-radius: 10px !important; box-shadow: 0 10px 30px rgba(15, 23, 42, .14) !important; }
.tpv-pop .tpv-list, .tpv-pop .mud-list { overflow: visible !important; max-height: none !important; padding: 4px 0 !important; }
.tpv-pop .mud-list-item { min-height: 36px !important; padding: 6px 14px !important; font-size: 13.5px !important; }

/* ── pdf.js form viewer (Review & Edit modal) — the annotation layer that turns AcroForm fields into inputs ── */
#voe-form-viewer .annotationLayer { position: absolute; top: 0; left: 0; pointer-events: none; transform-origin: 0 0; z-index: 2; }
#voe-form-viewer .annotationLayer section { position: absolute; text-align: initial; pointer-events: auto; box-sizing: border-box; transform-origin: 0 0; }
#voe-form-viewer .annotationLayer .textWidgetAnnotation input,
#voe-form-viewer .annotationLayer .textWidgetAnnotation textarea,
#voe-form-viewer .annotationLayer .choiceWidgetAnnotation select,
#voe-form-viewer .annotationLayer .buttonWidgetAnnotation.checkBox input,
#voe-form-viewer .annotationLayer .buttonWidgetAnnotation.radioButton input {
  background: rgba(67, 97, 238, 0.08); border: 1px solid transparent; box-sizing: border-box; color: #0f172a;
  font: calc(9px * var(--scale-factor)) Helvetica, Arial, sans-serif; height: 100%; margin: 0; padding: 0 2px; vertical-align: top; width: 100%;
}
#voe-form-viewer .annotationLayer .textWidgetAnnotation textarea { resize: none; line-height: 1.15; }
#voe-form-viewer .annotationLayer .textWidgetAnnotation input:hover,
#voe-form-viewer .annotationLayer .textWidgetAnnotation textarea:hover { border-color: #93a4f5; }
#voe-form-viewer .annotationLayer .textWidgetAnnotation input:focus,
#voe-form-viewer .annotationLayer .textWidgetAnnotation textarea:focus { background: #fff; border: 1.5px solid #4361ee; outline: none; }
#voe-form-viewer .annotationLayer .buttonWidgetAnnotation.checkBox input,
#voe-form-viewer .annotationLayer .buttonWidgetAnnotation.radioButton input {
  appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
  width: 100%; height: 100%; display: block; position: relative;
}
#voe-form-viewer .annotationLayer .buttonWidgetAnnotation.checkBox input:hover,
#voe-form-viewer .annotationLayer .buttonWidgetAnnotation.radioButton input:hover { background: rgba(67, 97, 238, 0.12); }
#voe-form-viewer .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
#voe-form-viewer .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::after {
  content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(8px * var(--scale-factor)); font-weight: 700; line-height: 1; color: #0f172a;
}
#voe-form-viewer .annotationLayer .buttonWidgetAnnotation.radioButton input[data-export="No"]:checked::after { content: "✗"; }
#voe-form-viewer .annotationLayer .popupAnnotation, #voe-form-viewer .annotationLayer .linkAnnotation { display: none; }

/* The form area always shows its scrollbar, so it is obvious the whole form (Part I–IV) is there to scroll. */
.voe-form-scroll { scrollbar-width: auto; scrollbar-color: #94a3b8 #e2e8f0; }
.voe-form-scroll::-webkit-scrollbar { width: 14px; }
.voe-form-scroll::-webkit-scrollbar-track { background: #e2e8f0; }
.voe-form-scroll::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 7px; border: 3px solid #e2e8f0; }
.voe-form-scroll::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ── Review & Edit modal toolbar: one compact row of Signature | 12B years | Remarks, then tools / zoom / Save ── */
.voe-tb { display: flex; align-items: center; gap: 8px; padding: 8px 20px; flex-shrink: 0; flex-wrap: wrap; }
.voe-tb-label { font-size: 12px; font-weight: 700; color: #334155; white-space: nowrap; }
.voe-tb-sep { width: 1px; height: 24px; background: #e2e8f0; margin: 0 4px; }
.voe-tb-input { min-height: 32px; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0 10px; font-size: 13px; font-family: inherit; background: #fff; }
.voe-tb-input:focus { outline: none; border-color: #4361ee; }
.voe-tb-apply { min-height: 32px; padding: 0 14px; border: 0; border-radius: 6px; background: #4361ee; color: #fff; font-weight: 700; font-size: 12px; font-family: inherit; cursor: pointer; }
.voe-tb-apply:disabled { opacity: .55; cursor: default; }
.voe-tb-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 12.5px; font-weight: 700; }
.voe-tb-chip--ellipsis { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 32px; }
.voe-tb-link { min-height: 28px; padding: 0 6px; border: 0; background: transparent; font-size: 12px; font-weight: 700; color: #4361ee; font-family: inherit; cursor: pointer; text-decoration: underline; }
.voe-tb-link--danger { color: #b91c1c; }
.voe-tb-save { min-height: 34px; padding: 0 18px; border: 0; border-radius: 6px; background: #16a34a; color: #fff; font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer; }
.voe-tb-save:disabled { opacity: .6; cursor: default; }
.voe-zoom { display: inline-flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; background: #fff; }
.voe-zoom > button { min-width: 34px; min-height: 32px; border: 0; background: #fff; font-size: 16px; font-weight: 700; color: #374151; font-family: inherit; cursor: pointer; }
.voe-zoom > button:disabled { color: #cbd5e1; cursor: default; }
.voe-zoom > span { min-width: 54px; text-align: center; font-size: 12px; font-weight: 700; color: #334155; border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; line-height: 32px; }
.voe-zoom > .voe-zoom-fit { font-size: 12px; padding: 0 10px; color: #4361ee; border-left: 1px solid #e2e8f0; }