/* ============================================================
   FAIA / Flatworld AI — wl-* Design System
   Source: FAIA-UI-DesignSystem.md
   Tokens:
     #1a3c6e  navy      brand / active nav
     #4361ee  blue      primary accent / buttons
     #dd6b20  orange    notify / warning
     #e53e3e  red       danger / destructive
     #38a169  green     success
     #f0f2f5            page background
     #ffffff / #e2e8f0  card background / border
     #1a1a2e            heading text
     #718096            muted text / hints
   ============================================================ */

/* ── Page headings ── */
.wl-page-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wl-page-subtitle {
    font-size: 0.82rem;
    color: #718096;
    margin: 0 0 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ── Section card ── */
.wl-section {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 20px 24px;
    margin-bottom: 16px;
}
.wl-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.wl-section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
}

/* ── Step circle ── */
.wl-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #4361ee;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ── Typography helpers ── */
.wl-label {
    font-weight: 700;
    font-size: 0.93rem;
    margin: 0;
    color: #1a1a2e;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wl-hint {
    color: #718096;
    font-size: 0.82rem;
    margin: 0 0 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wl-required {
    color: #e53e3e;
    font-weight: 700;
    font-size: 0.95rem;
    margin-left: 3px;
}
.wl-divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 16px 0;
}

/* ── Badges ── */
.wl-badge-excel {
    background: #c6f6d5;
    color: #276749;
    border: 1px solid #9ae6b4;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wl-badge-optional {
    background: #ebf8ff;
    color: #2b6cb0;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wl-badge-required {
    background: #fff5f5;
    color: #e53e3e;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wl-badge-checking {
    background: #fffbeb;
    color: #92400e;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ── Tags ── */
.wl-tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 0.83rem;
    margin-top: 8px;
    margin-right: 6px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wl-tag-excel {
    background: #c6f6d5;
    color: #276749;
}

/* ── Buttons ── */
.wl-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.wl-btn {
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    font-size: 0.93rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
}
.wl-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.wl-btn-primary {
    background: #4361ee;
    color: #ffffff;
}
.wl-btn-primary:hover:not(:disabled) {
    background: #3a56d4;
}
.wl-btn-primary:active:not(:disabled) {
    transform: scale(0.98);
}
.wl-btn-secondary {
    background: #e2e8f0;
    color: #4a5568;
}
.wl-btn-secondary:hover:not(:disabled) {
    background: #cbd5e1;
}
.wl-btn-danger {
    background: #ffffff;
    color: #e53e3e;
    border: 1.5px solid #e53e3e;
}
.wl-btn-danger:hover:not(:disabled) {
    background: #fff5f5;
}
.wl-btn-notify {
    background: #dd6b20;
    color: #ffffff;
}
.wl-btn-notify:hover:not(:disabled) {
    background: #c05621;
}
.wl-btn-upload-all {
    width: 100%;
    padding: 12px;
    background: #4361ee;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.93rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wl-btn-upload-all:hover { background: #3a56d4; }
.wl-btn-upload-all:active { transform: scale(0.98); }
.wl-btn-upload-all:disabled { background: #a0aec0; cursor: not-allowed; }
.wl-btn-dl {
    display: inline-block;
    margin-top: 6px;
    padding: 10px 20px;
    background: #4361ee;
    color: #ffffff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wl-btn-dl:hover { background: #3a56d4; }

/* ── Input / Select ── */
.wl-select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    background: #ffffff;
    color: #2d3748;
    margin-bottom: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wl-select:focus {
    outline: none;
    border-color: #4361ee;
    box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.15);
}

/* ── Progress bar ── */
.wl-progress { margin: 10px 0; display: none; }
.wl-progress.visible { display: block; }
.wl-progress-track {
    width: 100%;
    height: 7px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}
.wl-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
    width: 0%;
    background: linear-gradient(90deg, #4361ee, #6c8cff);
}
.wl-progress-fill.ok  { background: linear-gradient(90deg, #38a169, #68d391); }
.wl-progress-fill.err { background: linear-gradient(90deg, #e53e3e, #fc8181); }
.wl-progress-text {
    margin-top: 5px;
    font-size: 0.8rem;
    color: #4a5568;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ── Alerts ── */
.wl-alert {
    font-size: 0.82rem;
    padding: 8px 12px;
    border-radius: 6px;
    display: none;
    margin-top: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wl-alert.visible { display: block; }
.wl-alert-ok   { background: #f0fff4; border: 1px solid #c6f6d5; color: #276749; }
.wl-alert-info { background: #ebf5ff; border: 1px solid #bee3f8; color: #2b6cb0; }
.wl-alert-err  { background: #fff5f5; border: 1px solid #fed7d7; color: #c53030; }

/* ── Upload area ── */
.wl-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 8px;
}
.wl-upload-area:hover            { border-color: #4361ee; background: #f7fafc; }
.wl-upload-area.has-file         { border-color: #38a169; background: #f0fff4; }
.wl-upload-area input[type=file] { display: none; }
.wl-upload-icon  { font-size: 1.6rem; line-height: 1; }
.wl-upload-label { font-size: 0.875rem; font-weight: 600; color: #4a5568; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.wl-upload-hint  { font-size: 0.75rem; color: #a0aec0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* ── Drop zone ── */
.wl-drop-zone {
    border: 3px dashed #93a3d1;
    border-radius: 12px;
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
    margin-bottom: 14px;
    background: #f8faff;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.wl-drop-zone:hover     { border-color: #4361ee; background: #eef2ff; }
.wl-drop-zone.drag-over { border-color: #38a169; background: #e6ffed; border-style: solid; transform: scale(1.01); }
.wl-drop-zone.has-files { border-color: #38a169; background: #f0fff4; border-style: solid; }
.wl-drop-icon     { font-size: 2.5rem; margin-bottom: 6px; }
.wl-drop-label    { font-size: 0.95rem; color: #2d3748; font-weight: 700; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.wl-drop-sublabel { font-size: 0.78rem; color: #718096; margin-top: 4px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.wl-drop-hint     { font-size: 0.72rem; color: #a0aec0; margin-top: 8px; padding: 4px 12px; background: #edf2f7; border-radius: 6px; display: inline-block; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* ── File tree ── */
.wl-file-tree {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 0.78rem;
    background: #fafbfc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wl-file-tree:empty { display: none; }
.wl-tree-folder { font-weight: 700; color: #2b6cb0; margin-top: 6px; font-size: 0.78rem; }
.wl-tree-folder:first-child { margin-top: 0; }
.wl-tree-file {
    padding-left: 18px;
    color: #4a5568;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 0.72rem;
}
.wl-tree-file .size { color: #a0aec0; font-size: 0.68rem; }
.wl-tree-file .remove-btn { background: none; border: none; color: #e53e3e; cursor: pointer; font-size: 0.9rem; padding: 0 3px; font-weight: 700; }
.wl-tree-summary { font-size: 0.8rem; color: #4a5568; margin-bottom: 6px; font-weight: 600; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* ── Panel toggle ── */
.wl-panel-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f7fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
}
.wl-panel-toggle input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: #4361ee; flex-shrink: 0; }
.wl-panel-toggle span { font-size: 0.875rem; font-weight: 600; color: #2d3748; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.wl-panel-disabled { opacity: 0.42; pointer-events: none; user-select: none; }

/* ── Pipeline / step dots ── */
.wl-pipeline { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.wl-pipeline .step { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #4a5568; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.wl-step-dot { width: 12px; height: 12px; border-radius: 50%; background: #e2e8f0; flex-shrink: 0; transition: background 0.3s; }
.wl-step-dot.active { background: #4361ee; animation: wl-pulse 1.2s infinite; }
.wl-step-dot.done   { background: #38a169; }
.wl-step-dot.fail   { background: #e53e3e; }
@keyframes wl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.wl-proc-track { width: 100%; height: 7px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-top: 10px; }
.wl-proc-fill { height: 100%; border-radius: 4px; transition: width 0.3s; width: 0%; background: linear-gradient(90deg, #4361ee, #6c8cff); }
.wl-proc-fill.done { background: linear-gradient(90deg, #38a169, #68d391); }
.wl-proc-fill.fail { background: linear-gradient(90deg, #e53e3e, #fc8181); }

/* ── Result card ── */
.wl-result-card { padding: 16px; border-radius: 10px; margin-top: 14px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.wl-result-card.success { background: #f0fff4; border: 1px solid #c6f6d5; }
.wl-result-card.error   { background: #fff5f5; border: 1px solid #fed7d7; color: #c53030; }
.wl-result-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 3px 0; }
.wl-result-row .label { color: #718096; }

/* ── Notify row ── */
.wl-notify-row  { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 12px 16px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; }
.wl-notify-hint { font-size: 0.78rem; color: #718096; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* ── Utility ── */
.hidden { display: none !important; }

/* ============================================================
   Cycle Time tab — time per step, per processor
   ------------------------------------------------------------
   Deliberately NOT a heatmap: there is no colour scale and no
   peer comparison. Every cell is one flat tone and the printed
   duration carries the meaning, so a number is never read as a
   judgement of the person in that row.
   ============================================================ */

/* One tone for every measured cell — still no scale and no peer comparison, just a
   softly-lit surface with a hairline so each duration reads as its own chip rather than
   a flat wash. */
.ct-cell--value {
    background: linear-gradient(180deg, #f5f7ff 0%, #e8edfd 100%);
    color: #1e293b;
    box-shadow: inset 0 0 0 1px rgba(67, 97, 238, .14);
}

/* Horizontal scroll is confined here — the page body never scrolls sideways. */
.ct-matrix-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
}

.ct-matrix {
    display: grid;
    /* 2px surface gap between fills — a gap, never a border drawn on the marks. */
    gap: 2px;
    min-width: 720px;
    align-items: stretch;
}

.ct-head {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 0 4px 8px;
    text-align: center;
    align-self: end;
    line-height: 1.3;
}
.ct-head--left  { text-align: left; }
.ct-head--auto  { color: #cbd5e1; font-style: italic; }

.ct-rowlabel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px 0 2px;
    min-width: 0;
}
.ct-rowlabel-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ct-rowlabel-sub {
    font-size: 10.5px;
    color: #94a3b8;
    white-space: nowrap;
}

.ct-cell {
    border: 0;
    border-radius: 4px;
    /* Clips the estimated-value corner wedge to the rounded corner. Safe here because the
       cell's only text is a short centred duration that never reaches the edge. */
    overflow: hidden;
    padding: 9px 4px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
    transition: outline-color .12s ease, transform .12s ease;
    outline: 2px solid transparent;
    outline-offset: -2px;
}
/* Hover relief is a surface ring on the mark, not a border between marks. */
.ct-cell:hover,
.ct-cell:focus-visible {
    outline-color: #ffffff;
    transform: scale(1.04);
    z-index: 2;
    position: relative;
}
.ct-cell--empty {
    background: transparent;
    border: 1px dashed #e2e8f0;
    color: #cbd5e1;
    font-weight: 500;
    cursor: default;
}
.ct-cell--empty:hover { outline-color: transparent; transform: none; }

/* The automated Pipeline column is context, not performance — recede it. */
.ct-cell--auto { opacity: .55; cursor: default; }
.ct-cell--auto:hover { outline-color: transparent; transform: none; }

/* The row total is a summary, not another step. Set apart the same way the AI Accuracy
   Overall column is: a gap, a rule, brand colour and heavier type — so it is never scanned
   as an eighth step. */
/* A filled chip here read as a button — it sat in a grid of clickable cells wearing the
   accent colour and a drop shadow, so it looked like the one thing to press when it is the
   one thing that does nothing. The total now separates itself the way a spreadsheet total
   does: a rule, heavier type and brand ink, with no fill to press. */
.ct-cell--total {
    margin-left: 12px;
    padding: 9px 10px 9px 12px;
    /* Solid accent edge that fades into the row, rounded on the outer side only. The
       asymmetry is what keeps it from reading as a control: buttons are symmetrical and
       filled, a summary band is anchored to one edge and lets the row show through. */
    border-left: 3px solid #4361ee;
    background: linear-gradient(90deg, rgba(67, 97, 238, .13) 0%, rgba(67, 97, 238, .02) 100%);
    color: #2b3ea8;
    border-radius: 0 5px 5px 0;
    font-weight: 800;
    font-size: 14.5px;
    letter-spacing: -.015em;
    cursor: default;
    box-shadow: none;
}

/* Header above the total: same anchored edge, so the column reads as one band from
   header to figure rather than a floating label above a tinted cell. */
.ct-head--total {
    margin-left: 12px;
    padding-left: 15px;
    border-left: 3px solid transparent;
    color: #3a56d4;
    font-weight: 800;
    letter-spacing: .04em;
}
.ct-cell--total:hover { outline-color: transparent; transform: none; }

/* Estimated (backfilled) values carry a corner wedge so they are never mistaken for
   measured ones. Sized and inked to stay legible on the palest ramp step — a marker
   that only reads on dark cells would be invisible exactly where backfilled data
   tends to land. The legend shows the same wedge on a real cell. */
.ct-est { position: relative; }
.ct-est::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 0; height: 0;
    border-top: 8px solid currentColor;
    border-left: 8px solid transparent;
    border-top-right-radius: 4px;
    opacity: .85;
}

/* ── Scale legend ── */
.ct-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #718096;
}



/* ── Drill-down panel ── */
.ct-detail {
    border-top: 1px solid #e2e8f0;
    margin-top: 18px;
    padding-top: 14px;
}
.ct-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.ct-detail-table th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 6px 8px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}
.ct-detail-table td {
    padding: 7px 8px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}
.ct-detail-table td.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: 600;
    color: #0f172a;
}
.ct-detail-table tbody tr:hover { background: #f8fafc; }

/* Legend keys that mirror the real marks rather than approximating them with glyphs —
   so "no data" and "estimated" are recognisable in the matrix at a glance. */
.ct-legend-key {
    width: 24px;
    height: 15px;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
    flex: none;
}
.ct-legend-key--empty {
    background: transparent;
    border: 1px dashed #e2e8f0;
}
.ct-legend-key--est {
    background: #c0d0fb;
    color: #0f172a;
    position: relative;
}
.ct-legend-key--est::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 0; height: 0;
    border-top: 7px solid currentColor;
    border-left: 7px solid transparent;
    border-top-right-radius: 3px;
    opacity: .85;
}
.ct-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ── Cycle Time: clearing timing records ──
   Destructive, so it stays recessive until hovered and always asks first. These clear
   measurements only — never the VOE request, never the user account. */
.ct-row-del {
    background: none;
    border: 0;
    padding: 0 2px;
    margin-left: 6px;
    color: #cbd5e1;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease;
}
.ct-row-del:hover { color: #d03b3b; }

.ct-confirm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: #d03b3b;
    white-space: nowrap;
}
.ct-confirm-yes,
.ct-confirm-no {
    border: 1px solid;
    border-radius: 3px;
    padding: 1px 6px;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.4;
}
.ct-confirm-yes {
    background: #d03b3b;
    border-color: #d03b3b;
    color: #ffffff;
}
.ct-confirm-yes:hover:not(:disabled) { background: #b32f2f; }
.ct-confirm-no {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #475569;
}
.ct-confirm-no:hover:not(:disabled) { background: #f1f5f9; }
.ct-confirm-yes:disabled,
.ct-confirm-no:disabled { opacity: .5; cursor: not-allowed; }

/* ── AI Accuracy tab ──
   A meter, not a comparison: each bar is one ratio against its own 100%, so a row says
   "the AI got this right N% of the time" without ranking anyone against anyone else. */
.ai-meter {
    position: relative;
    height: 18px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    min-width: 130px;
}
.ai-meter-fill {
    height: 100%;
    border-radius: 3px 0 0 3px;
    transition: width .2s ease;
    /* Band colour is applied by the fill's own width via the wrapper class; default is the
       mid band so a meter is never unstyled. */
    background: #fab219;
}
.ai-meter[data-band="good"] .ai-meter-fill { background: #0ca30c; }
.ai-meter[data-band="warn"] .ai-meter-fill { background: #fab219; }
.ai-meter[data-band="bad"]  .ai-meter-fill { background: #d03b3b; }
/* The value sits BESIDE the bar, not on it. On the fill it would be dark ink over a
   saturated green or red — around 3:1, under the 4.5:1 text floor — and a text-shadow only
   disguises that. Out here it always has the full contrast of the card surface. */
.ai-meter-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 150px;
}
.ai-meter-wrap .ai-meter { flex: 1; }
.ai-meter-value {
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
    min-width: 46px;
    text-align: right;
    flex: none;
}

/* The AI's value when it was corrected — struck through, so the change is visible at a glance. */
.ai-was {
    text-decoration: line-through;
    color: #94a3b8;
}

.ai-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.ai-tag--kept    { background: #dcfce7; color: #166534; }
.ai-tag--changed { background: #fee2e2; color: #991b1b; }


/* ── AI Accuracy: processor x field matrix ──
   Cells are banded against FIXED thresholds (90 / 70), not against each other — a processor's
   colour never moves because a colleague's numbers changed. Every cell also prints its
   percentage, so the band is a second read of the same fact rather than the only one. */
.ai-matrix {
    display: grid;
    gap: 2px;
    min-width: 720px;
    align-items: stretch;
}

.ai-cell {
    border-radius: 4px;
    padding: 9px 4px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* Steps chosen so the printed number clears 4.5:1 on its own band. */
.ai-cell--good  { background: #dcfce7; color: #14532d; }
.ai-cell--warn  { background: #fef3c7; color: #78350f; }
.ai-cell--bad   { background: #fee2e2; color: #7f1d1d; }
.ai-cell--empty {
    background: transparent;
    border: 1px dashed #e2e8f0;
    color: #cbd5e1;
    font-weight: 500;
}

.ai-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #718096;
}
.ai-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ai-key {
    width: 22px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
    flex: none;
}
.ai-key--good { background: #dcfce7; border: 1px solid #86efac; }
.ai-key--warn { background: #fef3c7; border: 1px solid #fcd34d; }
.ai-key--bad  { background: #fee2e2; border: 1px solid #fca5a5; }
.ai-key--none { background: transparent; border: 1px dashed #e2e8f0; }

/* ── AI Accuracy: donut gauge + type badge ── */
.ai-donut {
    width: 78px;
    height: 78px;
    flex: none;
}
.ai-donut-value {
    text-anchor: middle;
    dominant-baseline: central;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 26px;
    font-weight: 800;
    fill: #0f172a;
}

/* VOE type badge in the processor matrix. */
.ai-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
}

/* Cells that open the value comparison get the affordance; blank ones do not. */
.ai-cell--click {
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color .12s ease, transform .12s ease;
}
.ai-cell--click:hover,
.ai-cell--click:focus-visible {
    outline-color: #ffffff;
    transform: scale(1.04);
    position: relative;
    z-index: 2;
}

/* ── Cost tab: money columns ──
   Costs land in fractions of a cent, so the digits must line up to be scannable — tabular
   figures give every digit the same width regardless of value. */
.cost-table td.num,
.cost-table th {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cost-table tbody tr:hover { background: #f8fafc; }

/* ============================================================
   Tab strip (.faia-tabs)
   ------------------------------------------------------------
   MudBlazor's Color="Primary" + ApplyEffectsToContainer paints the whole
   toolbar solid blue and then draws the ACTIVE tab as a white block on top
   of it — the active tab ends up looking like a hole in the bar, and the
   inactive one like the selected one.

   Instead the strip sits on the page surface and the active tab is the only
   blue element: selection reads as "this one is filled in", which is the
   same convention as the buttons elsewhere in the app.
   ============================================================ */

.faia-tabs .mud-tabs-toolbar {
    background: transparent !important;
    border-bottom: 1px solid #e2e8f0;
    min-height: 0;
    padding: 0;
}

.faia-tabs .mud-tabs-toolbar-inner {
    gap: 4px;
    min-height: 0;
}

/* MudBlazor's moving underline is redundant once the active tab is filled. */
.faia-tabs .mud-tab-slider { display: none !important; }

.faia-tabs .mud-tab {
    min-height: 38px;
    min-width: 0;
    padding: 0 18px;
    margin: 0;
    /* A tab renders as a <button>; without this the UA's default border shows through
       wherever MudBlazor's own reset does not reach. */
    border: 0;
    border-radius: 8px 8px 0 0;
    text-transform: none;
    letter-spacing: .01em;
    font-size: 13px;
    font-weight: 600;
    color: #718096;
    background: transparent;
    opacity: 1;
    transition: background-color .15s ease, color .15s ease;
}

.faia-tabs .mud-tab:hover {
    background: #eef2ff;
    color: #4361ee;
}

/* The one filled element — white on brand blue clears 4.5:1. */
.faia-tabs .mud-tab.mud-tab-active {
    background: #4361ee;
    color: #ffffff;
}
.faia-tabs .mud-tab.mud-tab-active:hover {
    background: #3a56d4;
    color: #ffffff;
}

/* Icons inherit the tab's colour rather than MudBlazor's own palette. */
.faia-tabs .mud-tab .mud-icon-root {
    color: inherit;
    font-size: 17px;
    margin-right: 7px;
}

/* Keyboard focus stays visible against both the filled and unfilled states. */
.faia-tabs .mud-tab:focus-visible {
    outline: 2px solid #4361ee;
    outline-offset: -2px;
}

/* Panel content sits on the page, not in a nested white slab. */
.faia-tabs .mud-tabs-panels { background: transparent; }

/* ── Cost page ── */

/* Money reads as chips rather than loose text, matching the Cycle Time matrix. No scale and
   no comparison — every figure looks the same whatever its size. */
.cost-table td.num {
    padding: 7px 6px;
}
.cost-table td.num > span.money {
    display: inline-block;
    min-width: 62px;
    padding: 4px 8px;
    border-radius: 4px;
    background: linear-gradient(180deg, #f5f7ff 0%, #e8edfd 100%);
    box-shadow: inset 0 0 0 1px rgba(67, 97, 238, .14);
    color: #1e293b;
    font-weight: 700;
    text-align: right;
}

/* The total is a summary, not another component — same branded treatment as the Cycle Time
   row total, so the two pages read the same way. */
.cost-table td.total-cell > span.money {
    background: linear-gradient(180deg, #4361ee 0%, #3a56d4 100%);
    box-shadow: 0 1px 3px rgba(67, 97, 238, .28);
    color: #ffffff;
    font-weight: 800;
}

/* Cost per request — the number worth acting on, so it is called out without competing
   with the total. */
.cost-table td.per-req > span.money {
    background: #ffffff;
    box-shadow: inset 0 0 0 1.5px #4361ee;
    color: #3a56d4;
    font-weight: 800;
}

/* A component with no spend recedes rather than competing with real figures. */
.cost-table td.zero {
    color: #cbd5e1;
    font-weight: 500;
}
.cost-table td.zero > span.money { display: none; }

.cost-table thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.cost-table tbody tr { transition: background .12s ease; }

.cost-row-label {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 700;
}

/* ── AI Accuracy: the Overall column ──
   A row summary, not another field. Without a distinction it reads as a seventh
   field and gets scanned as a peer of the others. Keeps its band colour — the
   score still matters — but is set apart by a gap, a rule, and heavier type. */
.ai-cell--overall {
    margin-left: 10px;
    border-left: 2px solid #cbd5e1;
    border-radius: 0 4px 4px 0;
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: -.01em;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}
/* The header above it gets the same separation so the column reads as one unit. */
.ct-head--summary {
    margin-left: 10px;
    color: #475569;
    font-weight: 800;
}

/* ── Infrastructure (Cost page) ─────────────────────────────────────────────
   Visually separated from the per-request tables above it, because it answers a
   different question. Those figures scale with volume; these do not. A shared
   card style would invite reading them as one continuous total. */
.infra-block { margin-top: 28px; }
.infra-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.infra-title { font-size: 17px; font-weight: 800; color: #1a1a2e; margin: 0; letter-spacing: -.01em; }
.infra-sub { font-size: 12.5px; color: #718096; margin: 4px 0 0; max-width: 70ch; line-height: 1.5; }
.infra-stamp {
    font-size: 11px; color: #64748b; background: #f1f5f9;
    border: 1px solid #e2e8f0; border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}

.infra-empty {
    display: flex; gap: 14px; align-items: flex-start;
    background: #fff; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 18px 20px;
}
.infra-empty-title { font-weight: 700; color: #475569; font-size: 13.5px; }
.infra-empty-body { font-size: 12.5px; color: #718096; margin-top: 3px; max-width: 72ch; line-height: 1.5; }

.infra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.infra-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 18px 20px 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
/* The environment that serves real traffic carries the brand edge — it is the one whose
   per-verification figure means anything. */
.infra-card--primary { border-top: 3px solid #4361ee; }
.infra-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; }
.infra-env { font-size: 13px; font-weight: 800; color: #1a1a2e; letter-spacing: .01em; }
.infra-badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #3a56d4; background: #eef0ff; border-radius: 999px; padding: 3px 9px;
}
.infra-total {
    font-size: 26px; font-weight: 800; color: #1a1a2e;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.infra-total-cap { font-size: 11.5px; color: #94a3b8; margin: 2px 0 14px; }

/* Each service gets a bar as well as a figure, so where the money goes reads at a glance
   instead of requiring the numbers to be compared. */
.infra-line {
    display: grid; grid-template-columns: minmax(0, 1fr) 74px 68px;
    align-items: center; gap: 10px; padding: 5px 0;
}
.infra-line--none { display: block; font-size: 12px; color: #94a3b8; font-style: italic; }
.infra-line-name {
    font-size: 12.5px; color: #475569;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.infra-line-bar { height: 6px; background: #eef2f7; border-radius: 3px; overflow: hidden; }
.infra-line-bar > span { display: block; height: 100%; background: #7f9cf5; border-radius: 3px; }
.infra-line-cost {
    font-size: 12.5px; font-weight: 700; color: #1a1a2e;
    text-align: right; font-variant-numeric: tabular-nums;
}

.infra-per { margin-top: 14px; padding-top: 12px; border-top: 1px solid #edf1f6; }
.infra-per-val {
    font-size: 16px; font-weight: 800; color: #3a56d4;
    font-variant-numeric: tabular-nums; margin-right: 7px;
}
.infra-per-cap { font-size: 11.5px; color: #94a3b8; }

/* The headline: usage alone understates a verification, sometimes by an order of magnitude. */
.infra-allin {
    margin-top: 16px; border-radius: 10px; padding: 18px 22px;
    background: linear-gradient(135deg, #1a3c6e 0%, #26518c 100%);
    color: #fff; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center;
    justify-content: space-between;
}
.infra-allin-label {
    display: block; font-size: 11px; text-transform: uppercase;
    letter-spacing: .08em; color: rgba(255, 255, 255, .72); font-weight: 700;
}
.infra-allin-val {
    font-size: 30px; font-weight: 800; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; line-height: 1.15;
}
.infra-allin-break { display: block; font-size: 12px; color: rgba(255, 255, 255, .8); margin-top: 2px; }
.infra-scale-cap { font-size: 11.5px; color: rgba(255, 255, 255, .72); display: block; margin-bottom: 8px; max-width: 46ch; }
.infra-scale-row { display: flex; flex-wrap: wrap; gap: 8px; }
.infra-scale-item {
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 7px; padding: 7px 12px; text-align: center; min-width: 84px;
}
.infra-scale-n { display: block; font-size: 10.5px; color: rgba(255, 255, 255, .7); letter-spacing: .03em; }
.infra-scale-v { display: block; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .infra-allin { flex-direction: column; align-items: flex-start; }
    .infra-line { grid-template-columns: minmax(0, 1fr) 56px; }
    .infra-line-bar { display: none; }
}

/* ── Rate reference (Cost page) ─────────────────────────────────────────────
   Visually distinct from the spend tables above: these are rate cards and
   projections, not money that left the account. A shared style would invite
   reading a forecast as an invoice. */
.rate-block { margin-top: 28px; display: grid; gap: 14px; }
.rate-head { margin-bottom: 2px; }
.rate-title { font-size: 17px; font-weight: 800; color: #1a1a2e; margin: 0; letter-spacing: -.01em; }
.rate-sub { font-size: 12.5px; color: #718096; margin: 4px 0 0; max-width: 78ch; line-height: 1.5; }

.rate-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #94a3b8;   /* grey rail, not brand blue — this is not spend */
    border-radius: 8px;
    overflow: hidden;
}
.rate-card-head { padding: 14px 18px 10px; }
.rate-card-title { display: block; font-size: 13.5px; font-weight: 800; color: #1a1a2e; }
.rate-card-note { display: block; font-size: 11.5px; color: #718096; margin-top: 3px; line-height: 1.5; max-width: 84ch; }

.rate-tblwrap { overflow-x: auto; }
.rate-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.rate-table thead th {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
    color: #64748b; font-weight: 700; text-align: left;
    padding: 8px 18px; background: #f8fafc; border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #e2e8f0; white-space: nowrap;
}
.rate-table td {
    padding: 11px 18px; border-bottom: 1px solid #f1f5f9;
    font-size: 12.5px; color: #475569; vertical-align: top;
}
.rate-table tbody tr:last-child td { border-bottom: 0; }
.rate-table .num {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
    font-weight: 700; color: #1a1a2e;
}
.rate-name { display: block; font-weight: 700; color: #1a1a2e; font-size: 12.5px; }
.rate-note { display: block; font-size: 11px; color: #94a3b8; margin-top: 2px; line-height: 1.45; max-width: 52ch; }
.rate-badge {
    display: inline-block; margin-left: 7px; vertical-align: 1px;
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #276749; background: #d5f5e3; border-radius: 999px; padding: 2px 8px;
}
/* The provider actually in use is the baseline everything else is read against. */
.rate-row--current td { background: #fbfdff; }
.rate-row--delta td {
    background: #f8fafc; border-top: 1px solid #e2e8f0;
    color: #475569; font-style: italic;
}
.rate-row--delta .num { color: #b45309; font-style: normal; }

@media (max-width: 640px) {
    .rate-table thead th, .rate-table td { padding-left: 12px; padding-right: 12px; }
}

/* The middle column is all-time volume, not the page's period filter — labelled in the
   header so it is never read as belonging to the selected date range. */
.rate-th-sub {
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #94a3b8;
    text-transform: none;
    margin-top: 1px;
}

/* ── Drill-down: making the result visible ──────────────────────────────────
   The panel used to open below every table on the page, so a click produced no
   visible change without scrolling — it read as nothing having happened. It now
   opens directly under the table that was clicked, and these rules connect the
   two so the link between click and result is obvious. */

/* The cell or row that produced the panel stays selected. Without this, an open
   panel has no visible origin once you have clicked a few. */
.ct-cell--active {
    outline: 2px solid #4361ee !important;
    outline-offset: -2px;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, .16);
    position: relative;
    z-index: 1;
}
.cost-row--active > td {
    background: #eef0ff !important;
    box-shadow: inset 3px 0 0 #4361ee;
}

/* A short reveal — enough to catch the eye and say "this is new", not enough to
   make the reader wait for it. */
@keyframes faia-detail-in {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: none; }
}
.ct-detail--open,
.cost-detail--open {
    animation: faia-detail-in .18s ease-out;
    border-top: 3px solid #4361ee;
}
@media (prefers-reduced-motion: reduce) {
    .ct-detail--open,
    .cost-detail--open { animation: none; }
}

/* A notch pointing back at the table above, so the panel reads as belonging to
   it rather than as a separate card that happens to follow. */
.ct-detail--open { position: relative; margin-top: 14px; }
.ct-detail--open::before {
    content: '';
    position: absolute;
    top: -8px; left: 26px;
    width: 12px; height: 12px;
    background: #fff;
    border-left: 3px solid #4361ee;
    border-top: 3px solid #4361ee;
    transform: rotate(45deg);
}

/* ── Automatic follow-up opt-in (Call Review) ───────────────────────────────
   Authorising repeat calls to a customer deserves more visual weight than a
   plain checkbox, and the state has to be readable at a glance — the cost of
   misreading it is an employer being rung four more times. */
.afu-box {
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 16px 14px;
    margin-bottom: 12px;
    transition: border-color .15s, background .15s;
}
/* On is the state that causes calls, so it is the one that stands out. */
.afu-box--on {
    border-color: #f6c177;
    background: #fffbeb;
}
.afu-title { font-weight: 700; color: #1a1a2e; font-size: 13px; }
.afu-body {
    display: flex; flex-direction: column; gap: 5px;
    margin-left: 32px; margin-top: -2px;
    font-size: 11.5px; color: #64748b; line-height: 1.5;
}
.afu-on  { font-weight: 700; color: #b45309; }
.afu-off { font-weight: 700; color: #475569; }
.afu-steps { margin: 2px 0 2px 16px; padding: 0; }
.afu-steps li { margin: 2px 0; }
.afu-err { color: #e53e3e; font-weight: 600; }

/* Call count in the Cycle Time drill-down. A Call step spanning several attempts otherwise
   reads as one very long call, which says something quite different about the request. */
.ct-calls {
    display: inline-block; min-width: 20px;
    font-weight: 700; font-variant-numeric: tabular-nums; color: #475569;
}
/* More than one attempt is the case worth noticing. */
.ct-calls--many {
    color: #b45309; background: #fffbeb;
    border: 1px solid #fde68a; border-radius: 999px; padding: 1px 8px;
}

/* ── Employer phone candidates (Call Review) ────────────────────────────────
   A read-only record of which numbers were tried for an employer and how each
   fared — so a processor is never guessing whether a number has been called. */
.pc-box {
    border: 1.5px solid #e2e8f0; border-radius: 10px;
    padding: 12px 16px 14px; margin-bottom: 12px; background: #fbfdff;
}
.pc-title { font-weight: 700; color: #1a1a2e; font-size: 13px; }
.pc-sub   { font-size: 11.5px; color: #718096; margin-top: 2px; margin-bottom: 8px; }
.pc-tblwrap { overflow-x: auto; }
.pc-table { width: 100%; border-collapse: collapse; min-width: 460px; font-size: 12px; }
.pc-table thead th {
    text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
    color: #64748b; font-weight: 700; padding: 6px 10px; border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}
.pc-table td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; color: #475569; }
.pc-table tbody tr:last-child td { border-bottom: 0; }
.pc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pc-row--good td { background: #f0fdf4; }
.pc-related { display: block; font-size: 10.5px; color: #94a3b8; }
.pc-status { font-weight: 700; font-size: 11px; }
.pc-status--reachedhr   { color: #16a34a; }
.pc-status--untried     { color: #64748b; }
.pc-status--noanswer,
.pc-status--voicemail   { color: #b45309; }
.pc-status--wrongnumber,
.pc-status--busy        { color: #dc2626; }

/* Stage 2/3 actions on the employer-numbers panel. */
.pc-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.pc-find {
    font-size: 12px; font-weight: 700; color: #fff; background: #4361ee;
    border: 0; border-radius: 6px; padding: 6px 14px; cursor: pointer;
}
.pc-find:hover:not(:disabled) { background: #3a56d4; }
.pc-find:disabled { opacity: .6; cursor: default; }
.pc-find-hint { font-size: 11px; color: #94a3b8; }
.pc-msg { font-size: 11.5px; color: #b45309; font-weight: 600; }
.pc-approve {
    display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 700;
    color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 999px;
    padding: 2px 9px; cursor: pointer;
}
.pc-approve:hover:not(:disabled) { background: #fef3c7; }
.pc-approve:disabled { opacity: .6; cursor: default; }
.pc-status--needsapproval { color: #b45309; }

/* "Call this number" per-candidate action. */
.pc-call {
    display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 700;
    color: #fff; background: #38a169; border: 0; border-radius: 999px;
    padding: 2px 10px; cursor: pointer;
}
.pc-call:hover:not(:disabled) { background: #2f855a; }
.pc-call:disabled { opacity: .6; cursor: default; }
.pc-status--found { color: #2b6cb0; }

/* ── Report tables (Cost, Cycle Time) ──────────────────────────────────────
   One table style for every report: plain right-aligned figures (no chips — a tinted,
   bordered number read as a button in a grid of clickable cells), grouped column headers,
   a chevron on every row that expands, the expansion rendered inline under its row, and a
   totals row. Numbers use tabular figures so columns line up. */
.rpt-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; }
.rpt-card-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rpt-title { font-size: 16px; font-weight: 800; color: #0f172a; }
.rpt-sub { font-size: 12.5px; color: #64748b; margin-top: 2px; line-height: 1.5; }
.rpt-foot { font-size: 12px; color: #64748b; margin-top: 10px; line-height: 1.5; }
.rpt-scroll { overflow-x: auto; }
.rpt-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.rpt-table th {
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #64748b; font-weight: 700;
    text-align: right; padding: 9px 12px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; background: #fff;
    vertical-align: bottom;
}
.rpt-table th.l, .rpt-table td.l { text-align: left; }
.rpt-table th.c, .rpt-table td.c { text-align: center; }
.rpt-table th.grp { text-align: center; padding: 6px 12px; border-bottom: none; font-size: 10.5px; color: #475569; }
.rpt-table th.grp-a { background: #f5f7ff; color: #3730a3; border-radius: 8px 8px 0 0; }
.rpt-table th.a { background: #f5f7ff; color: #3730a3; }
.rpt-table th.auto { color: #a5b4fc; font-style: italic; }
.rpt-table td {
    padding: 12px; border-bottom: 1px solid #eef2f7; font-size: 13px; text-align: right; white-space: nowrap;
    color: #1e293b; font-variant-numeric: tabular-nums; vertical-align: middle;
}
.rpt-table td.a { background: #fbfcff; }
.rpt-table td.num { font-weight: 600; }
.rpt-table td.dim { color: #cbd5e1; font-weight: 500; }
.rpt-table td.tiny { color: #64748b; font-weight: 500; }
.rpt-table td.slow { color: #b45309; font-weight: 800; }
.rpt-table td.auto { color: #94a3b8; font-weight: 500; }
.rpt-table td.none { color: #cbd5e1; font-weight: 500; font-style: italic; }
.rpt-table td.total { font-weight: 800; font-size: 14px; border-left: 3px solid #4361ee; padding-left: 14px; }
.rpt-table th.total { border-left: 3px solid transparent; padding-left: 14px; color: #1e293b; }
.rpt-table td.per { font-weight: 700; font-size: 14px; }
.rpt-table tr.rpt-row { cursor: pointer; transition: background .12s ease; }
.rpt-table tr.rpt-row:hover td { background: #f8fafc; }
.rpt-table tr.rpt-row:hover td.a { background: #f3f5ff; }
.rpt-table tr.rpt-row.open td { background: #f5f7ff; border-bottom-color: #e0e7ff; }
.rpt-table tr.rpt-total td { font-weight: 700; background: #f8fafc; border-top: 1px solid #e2e8f0; border-bottom: none; }
.rpt-table tr.rpt-sub td { background: #fafbff; font-size: 12.5px; padding: 9px 12px; color: #334155; }
.rpt-table tr.rpt-sub td.a { background: #f8f9ff; }
.rpt-table tr.rpt-sub td.l { padding-left: 46px; }
.rpt-table tr.rpt-sub.clickable { cursor: pointer; }
.rpt-table tr.rpt-sub.clickable:hover td { background: #f1f4ff; }
.rpt-table tr.rpt-subhead td { background: #fafbff; padding: 6px 12px 2px; border-bottom: none; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; font-weight: 700; }
.rpt-table tr.rpt-subhead td.l { padding-left: 46px; }
.rpt-table tr.rpt-more td { background: #fafbff; padding: 8px 12px 12px 46px; text-align: left; font-size: 12.5px; border-bottom: 1px solid #e0e7ff; color: #64748b; }
.rpt-table tr.rpt-more td a { font-weight: 700; text-decoration: none; }
.rpt-chev {
    display: inline-flex; width: 22px; height: 22px; border-radius: 6px; align-items: center; justify-content: center;
    color: #94a3b8; margin-right: 10px; vertical-align: middle; transition: transform .15s ease, background .15s ease; flex: none;
}
.rpt-chev svg { width: 14px; height: 14px; }
.rpt-chev.open { transform: rotate(90deg); color: #4361ee; background: #e0e7ff; }
.rpt-who { display: inline-flex; flex-direction: column; gap: 2px; vertical-align: middle; text-align: left; }
.rpt-who b { font-weight: 700; color: #0f172a; }
.rpt-who span { font-size: 11.5px; color: #64748b; }
.rpt-req { display: inline-flex; flex-direction: column; gap: 2px; text-align: left; }
.rpt-req b { font-weight: 600; color: #0f172a; }
.rpt-req span { font-size: 11.5px; color: #64748b; }
.rpt-tag { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .02em; background: #e0e7ff; color: #3730a3; }
.rpt-av { width: 26px; height: 26px; border-radius: 999px; background: #e0e7ff; color: #3730a3; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; vertical-align: middle; flex: none; }
.rpt-av--none { background: #f1f5f9; color: #64748b; }
.rpt-share { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 96px; }
.rpt-share i { display: block; height: 4px; border-radius: 99px; background: #e2e8f0; width: 72px; overflow: hidden; position: relative; }
.rpt-share i b { position: absolute; left: 0; top: 0; bottom: 0; background: #4361ee; border-radius: 99px; }
.rpt-step { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #475569; }
.rpt-step i { width: 8px; height: 8px; border-radius: 999px; background: #4361ee; display: inline-block; }
.rpt-step i.slow { background: #f59e0b; }
.rpt-legend { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; font-size: 12px; color: #64748b; margin-top: 10px; }
.rpt-legend b { font-weight: 800; }
.rpt-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.rpt-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid #e2e8f0; background: #fff; color: #334155; }
/* KPI cards: a label, one figure, one line of context. Optional share bar for the driver card. */
.rpt-kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; height: 100%; box-sizing: border-box; }
.rpt-kpi--warn { background: #fffbeb; border-color: #fde68a; }
.rpt-kpi--warn .rpt-kpi-k, .rpt-kpi--warn .rpt-kpi-v, .rpt-kpi--warn .rpt-kpi-s { color: #92400e; }
.rpt-kpi-k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #64748b; font-weight: 700; }
.rpt-kpi-v { font-size: 30px; font-weight: 700; line-height: 1.1; color: #0f172a; font-variant-numeric: tabular-nums; }
.rpt-kpi-v--text { font-size: 22px; font-weight: 800; }
.rpt-kpi-s { font-size: 12.5px; color: #64748b; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rpt-kpi-bar { flex: 1; height: 6px; border-radius: 99px; background: #e2e8f0; overflow: hidden; min-width: 60px; }
.rpt-kpi-bar b { display: block; height: 100%; background: #4361ee; }
/* A one-line plain-language note under the cards. */
.rpt-note { display: flex; gap: 14px; align-items: flex-start; padding: 14px 20px; background: #f8faff; border: 1px solid #dbe3ff; border-radius: 14px; margin-bottom: 16px; font-size: 13.5px; line-height: 1.55; color: #1e293b; }
.rpt-note-ic { width: 28px; height: 28px; border-radius: 999px; background: #e0e7ff; color: #3730a3; display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* Accuracy meter and score text (AI Accuracy tab) — colour in the text and the bar only. */
.rpt-acc { display: inline-flex; align-items: center; gap: 10px; min-width: 200px; justify-content: flex-end; }
.rpt-acc i { display: block; width: 140px; height: 8px; border-radius: 99px; background: #eef2f7; overflow: hidden; position: relative; }
.rpt-acc i b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: #16a34a; }
.rpt-acc i b.mid { background: #f59e0b; }
.rpt-acc i b.low { background: #dc2626; }
.rpt-acc span { font-weight: 700; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.rpt-table td.score { font-weight: 700; text-align: center; font-size: 13.5px; }
.rpt-table td.score.ok { color: #15803d; }
.rpt-table td.score.mid { color: #b45309; }
.rpt-table td.score.low { color: #b91c1c; }
.rpt-table td.score.none { color: #cbd5e1; font-weight: 500; }
.rpt-table td.score.total { text-align: center; }
.rpt-res { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.rpt-res.ok { background: #dcfce7; color: #166534; }
.rpt-res.bad { background: #fef3c7; color: #92400e; }
.rpt-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.rpt-badge.live { background: #dcfce7; color: #166534; }
.rpt-badge.live i { width: 7px; height: 7px; border-radius: 999px; background: #16a34a; display: inline-block; }
.rpt-badge.quiet { background: #f1f5f9; color: #475569; }
.rpt-badge.inuse { background: #dcfce7; color: #166534; font-size: 10px; padding: 1px 8px; margin-left: 8px; vertical-align: 1px; }
.rate-table tr.rate-row--current td { background: #f5f7ff; }
.rate-table tr.rate-row--current td:first-child { box-shadow: inset 3px 0 0 #4361ee; }
.rate-table tr.rate-row--delta td { background: #fffbeb; color: #92400e; font-weight: 600; }
.rate-table tr.rate-row--delta td .rate-name { color: #92400e; }
@media (max-width: 900px) { .rpt-share i { display: none; } }
.rpt-table td.clickable { cursor: pointer; }
.rpt-table td.clickable:hover { text-decoration: underline; text-decoration-color: #c7d2fe; text-underline-offset: 3px; }
.rpt-table td.active { box-shadow: inset 0 0 0 2px #4361ee; border-radius: 6px; }
.rpt-reqgrid { display: grid; grid-template-columns: 110px minmax(0, 1fr) 72px 150px 140px 140px 56px 80px; gap: 12px; align-items: center; min-width: 900px; }
.rpt-table--inner th { padding: 6px 10px; }
.rpt-table--inner td { padding: 8px 10px; }
.rpt-table--inner tr.rpt-sub td { background: #fff; }
.rpt-table--inner tr.rpt-sub td.l { padding-left: 10px; }
.rpt-table--inner tr.rpt-sub.clickable:hover td { background: #f8fafc; }
/* ── Report page header: title + scope left, filter pills right, segmented tabs ── */
.rpt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.rpt-scope { color: #334155; font-weight: 600; }
.rpt-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rpt-filter {
    display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 4px 0 12px;
    border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; font-size: 12.5px; color: #334155; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.rpt-filter:hover { border-color: #c7d2fe; background: #fafbff; }
.rpt-filter-k { font-weight: 600; color: #64748b; white-space: nowrap; }
.rpt-filter .mud-input-control { margin: 0 !important; padding: 0 !important; min-width: 0; }
.rpt-filter .mud-input-control-input-container { margin: 0 !important; }
.rpt-filter .mud-input { font-size: 12.5px !important; font-weight: 700; color: #1e293b; margin-top: 0 !important; min-height: 0; }
.rpt-filter .mud-input.mud-input-text { padding: 0 !important; }
.rpt-filter .mud-input-slot, .rpt-filter .mud-select-input { padding: 0 2px 0 4px !important; min-height: 0 !important; height: 32px !important; line-height: 32px !important; }
.rpt-filter .mud-input-adornment { margin: 0 !important; }
.rpt-filter .mud-input-adornment .mud-icon-root { font-size: 18px; color: #64748b; }
.rpt-filter .mud-input-label { display: none; }
.rpt-filter .mud-input-helper-text { display: none; }
.rpt-refresh {
    width: 34px; height: 34px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff;
    display: inline-flex; align-items: center; justify-content: center; color: #4361ee; cursor: pointer;
    transition: background .15s ease;
}
.rpt-refresh:hover { background: #eef2ff; }
/* Segmented tabs (MudBlazor 8 class names: tabbar > tabbar-content > tabbar-wrapper > tabbar-inner > tabs,
   with the <Header> as .mud-tabs-header-after). The strip itself is transparent; the wrapper is the grey
   track; the active tab is the one filled element; "Updated" sits at the far right, vertically centred. */
.faia-tabs.rpt-tabs .mud-tabs-tabbar { background: transparent !important; border: 0 !important; box-shadow: none !important; min-height: 0; padding: 0; }
.faia-tabs.rpt-tabs .mud-tabs-tabbar-inner { display: flex; align-items: center; gap: 12px; min-height: 0; }
.faia-tabs.rpt-tabs .mud-tabs-tabbar-content { flex: 1 1 auto; min-height: 0; overflow: visible; }
.faia-tabs.rpt-tabs .mud-tabs-tabbar-wrapper { background: #eef2f7; border-radius: 10px; padding: 3px; gap: 2px; width: max-content; min-height: 0; }
.faia-tabs.rpt-tabs .mud-tab { min-height: 32px; padding: 0 16px; border-radius: 8px; font-weight: 700; color: #475569; }
.faia-tabs.rpt-tabs .mud-tab:hover { background: #e2e8f0; color: #1e293b; }
.faia-tabs.rpt-tabs .mud-tab.mud-tab-active { background: #4361ee; color: #fff; box-shadow: 0 1px 2px rgba(67, 97, 238, .3); }
.faia-tabs.rpt-tabs .mud-tab.mud-tab-active:hover { background: #3a56d4; color: #fff; }
.faia-tabs.rpt-tabs .mud-tab.mud-tab-active .mud-icon-root { color: #fff; }
.faia-tabs.rpt-tabs .mud-tabs-header { display: flex; align-items: center; margin-left: auto; padding: 0; }
/* Only one tab left (AI Accuracy hidden while automated calls are off): hide the tab buttons, keep the "Updated" text. */
.faia-tabs.rpt-tabs.rpt-tabs--single .mud-tabs-tabbar-content { display: none; }
.faia-tabs.rpt-tabs .mud-tabs-panels { background: transparent; }
.rpt-updated { font-size: 12.5px; color: #64748b; white-space: nowrap; }
@media (max-width: 720px) { .rpt-head { align-items: flex-start; } .rpt-filters { width: 100%; } }
/* Filter pill dropdown panel: sized to its content, not to the narrow pill; roomy rows; one highlighted choice. */
.mud-popover.rpt-filter-popover { min-width: 190px; margin-top: 6px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 12px 28px rgba(15, 23, 42, .12); padding: 6px; }
.mud-popover.rpt-filter-popover .mud-list { padding: 0; }
/* One scrollbar only: the popover scrolls, the list inside it never does (two nested scroll areas
   showed two bars side by side on the long Staff list). Slim, quiet bar. */
.mud-popover.rpt-filter-popover { max-height: 320px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.mud-popover.rpt-filter-popover .mud-list,
.mud-popover.rpt-filter-popover .mud-list .mud-list { max-height: none !important; overflow: visible !important; }
.mud-popover.rpt-filter-popover::-webkit-scrollbar { width: 6px; }
.mud-popover.rpt-filter-popover::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.mud-popover.rpt-filter-popover::-webkit-scrollbar-track { background: transparent; }
.mud-popover.rpt-filter-popover .mud-list-item { border-radius: 8px; padding: 9px 12px; min-height: 0; }
.mud-popover.rpt-filter-popover .mud-list-item-text, .mud-popover.rpt-filter-popover .mud-typography { font-size: 13px; font-weight: 600; color: #1e293b; white-space: nowrap; }
.mud-popover.rpt-filter-popover .mud-list-item:hover { background: #f1f5f9; }
.mud-popover.rpt-filter-popover .mud-list-item.mud-selected-item { background: #eef2ff; }
.mud-popover.rpt-filter-popover .mud-list-item.mud-selected-item .mud-list-item-text, .mud-popover.rpt-filter-popover .mud-list-item.mud-selected-item .mud-typography { color: #3730a3; font-weight: 700; }
.mud-popover.rpt-filter-popover .mud-list-item .mud-checkbox { margin-right: 4px; }

/* ═══════════════════════════════════════════════════════════
   Cost tables — grouped columns (who bills it), plain names with a
   one-line hint, a per-step split for each request. Fixed column
   widths so the whole table fits the page with no sideways scroll.
   ═══════════════════════════════════════════════════════════ */
.cost-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.cost-summary { font-size: 13px; color: #475569; }
.cost-summary b { color: #0f172a; }

.spend-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; }
.spend-table th, .spend-table td { padding: 0 8px; }
.spend-table thead th { cursor: help; text-align: right; vertical-align: bottom; font-weight: 600; color: #334155; font-size: 12px; line-height: 1.3;
                       padding-top: 4px; padding-bottom: 10px; border-bottom: 1px solid #e4e8f0; text-transform: none; letter-spacing: 0; }
.spend-table thead th small { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 500; color: #64748b; line-height: 1.3; }
.spend-table th.l, .spend-table td.l { text-align: left; }
.spend-table .first { padding-left: 12px; }
.spend-table tr.band th { padding: 12px 8px 8px; border-bottom: 0; text-align: left; font-size: 10.5px; letter-spacing: .06em;
                         text-transform: uppercase; font-weight: 800; }
.spend-table .bx { display: flex; align-items: center; flex-wrap: wrap; column-gap: 7px; row-gap: 2px; white-space: nowrap; padding-bottom: 7px; border-bottom: 2px solid currentColor; }
/* Who bills it sits on its own line under the group name, so a one-column group never clips or overlaps. */
.spend-table .bx em { flex-basis: 100%; padding-left: 15px; font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: #64748b; font-size: 11px; }
.spend-table .bx .dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: currentColor; display: inline-block; }
.spend-table .g-call   { color: #4361ee; }
.spend-table .g-ai     { color: #7c3aed; }
.spend-table .g-doc    { color: #0f766e; }
.spend-table .g-search { color: #b45309; }
.spend-table .g-other  { color: #475569; }

.spend-table tbody td { height: 56px; text-align: right; border-bottom: 1px solid #eef1f6; font-variant-numeric: tabular-nums; color: #1e293b; }
.spend-table td.dash { color: #a3afc2; }
.spend-table .sep { border-left: 1px solid #eef1f6; }
.spend-table th.total { border-left: 2px solid #4361ee; color: #0f172a; font-weight: 800; }
.spend-table td.total { border-left: 2px solid #4361ee; background: #fafbff; font-weight: 800; font-size: 14px; color: #0f172a; }
.spend-table td.per { font-weight: 600; color: #334155; }
.spend-table .who { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spend-table .cnt { display: block; font-size: 11.5px; color: #64748b; margin: 3px 0 0 30px; white-space: nowrap; }

.cost-row { cursor: pointer; }
.cost-row:hover td { background: #f8f9ff; }
.cost-row:hover td.total { background: #f1f3ff; }
.cost-row.open td { background: #f6f7ff; }
.cost-foot td { height: 50px; font-weight: 700; color: #0f172a; background: #f8fafc; border-bottom: 0; }
.cost-foot td.total { background: #eef1ff; }

.cost-detail > td { height: auto !important; padding: 0 12px !important; background: #f6f7ff; border-bottom: 1px solid #eef1f6; text-align: left !important; }
.cost-inner { margin: 4px 0 14px 30px; border: 1px solid #e4e8f0; border-radius: 12px; overflow: hidden; background: #fff; }
.cost-inner table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
.spend-table .cost-inner th { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: #475569; font-weight: 700; text-align: right;
                 padding: 9px 12px; background: #f8fafc; border-bottom: 1px solid #e4e8f0; line-height: 1.3; }
.spend-table .cost-inner th.l, .spend-table .cost-inner td.l { text-align: left; }
.spend-table .cost-inner td { height: auto; padding: 10px 12px; text-align: right; border-bottom: 1px solid #f0f2f7; border-left: 0; font-variant-numeric: tabular-nums; vertical-align: top; color: #1e293b; background: transparent; }
.spend-table .cost-inner tr:last-child td { border-bottom: 0; }
.cost-inner tr.clickable { cursor: pointer; }
.spend-table .cost-inner tr.clickable:hover td { background: #f8f9ff; }
.cost-inner .loan { display: block; color: #0f172a; font-weight: 700; }
.cost-inner .amt { display: block; color: #0f172a; font-weight: 700; }
.cost-inner .amt.none { color: #a3afc2; font-weight: 500; }
.cost-inner .note { display: block; font-size: 11px; color: #64748b; margin-top: 2px; line-height: 1.35; }
.cost-inner-more { padding: 9px 12px; font-size: 12px; color: #64748b; border-top: 1px solid #eef1f6; background: #fbfcfe; }
.cost-inner-msg { padding: 14px 12px 14px 42px; font-size: 12.5px; color: #64748b; }

/* ═══════════════════════════════════════════════════════════
   Users page — list with filters, add / edit / remove dialogs
   ═══════════════════════════════════════════════════════════ */
.usr-page { width: 100%; margin: 0; padding: 4px 0 48px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; }
.usr-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.usr-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; color: #0f172a; }
.usr-lede { margin: 6px 0 0; font-size: 14px; color: #64748b; }

.usr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 10px;
           font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.usr-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.usr-btn--primary { background: #4361ee; color: #fff; box-shadow: 0 4px 12px rgba(67, 97, 238, .25); }
.usr-btn--primary:hover:not(:disabled) { background: #3651d4; }
.usr-btn--ghost { background: #fff; color: #334155; border-color: #d7dde8; }
.usr-btn--ghost:hover:not(:disabled) { background: #f8fafc; }
.usr-btn--danger { background: #dc2626; color: #fff; }
.usr-btn--danger:hover:not(:disabled) { background: #b91c1c; }

.usr-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.usr-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: #e9ecf4; border-radius: 12px; }
.usr-seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; font-family: inherit; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.usr-seg button b { font-weight: 700; color: #64748b; font-size: 12px; }
.usr-seg button.on { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.usr-seg button.on b { color: #4361ee; }
.usr-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; flex: 0 1 340px; min-width: 220px; }
.usr-search:focus-within { border-color: #4361ee; box-shadow: 0 0 0 3px rgba(67, 97, 238, .15); }
.usr-search input { border: 0; outline: 0; font-family: inherit; font-size: 14px; flex: 1; background: transparent; color: #0f172a; min-width: 0; }

.usr-card { background: #fff; border: 1px solid #e4e8f0; border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); overflow: hidden; }
.usr-scroll { overflow-x: auto; }
.usr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 760px; }
.usr-table th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #64748b; font-weight: 700; text-align: left; padding: 12px 16px; border-bottom: 1px solid #e4e8f0; background: #fafbfd; }
.usr-table td { padding: 12px 16px; border-bottom: 1px solid #eef1f6; vertical-align: middle; color: #1e293b; }
.usr-table tr:last-child td { border-bottom: 0; }
.usr-table tbody tr:hover td { background: #f8f9ff; }
.usr-table .r { text-align: right; }
.usr-empty { text-align: center; color: #64748b; padding: 32px 16px !important; }
.usr-foot { padding: 12px 16px; border-top: 1px solid #eef1f6; font-size: 12.5px; color: #64748b; }

.usr-who { display: flex; align-items: center; gap: 12px; }
.usr-name { font-weight: 600; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-email { font-size: 12.5px; color: #64748b; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-av { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex: none; }
.usr-av--sm { width: 32px; height: 32px; font-size: 11px; }
.usr-av--lg { width: 48px; height: 48px; font-size: 15px; }
.usr-av.av0 { background: #e0e7ff; color: #3730a3; }
.usr-av.av1 { background: #ccfbf1; color: #115e59; }
.usr-av.av2 { background: #fef3c7; color: #92400e; }
.usr-av.av3 { background: #fce7f3; color: #9d174d; }
.usr-av.av4 { background: #ede9fe; color: #5b21b6; }

.usr-role { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; margin: 2px 6px 2px 0; }
.usr-role.r-admin { background: #ede9fe; color: #5b21b6; }
.usr-role.r-sup   { background: #ccfbf1; color: #115e59; }
.usr-role.r-lead  { background: #fef3c7; color: #92400e; }
.usr-role.r-proc  { background: #e0e7ff; color: #3730a3; }
.usr-role.r-other { background: #f1f5f9; color: #475569; }
.usr-sign { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #475569; }
.usr-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #475569; }
.usr-status i { width: 8px; height: 8px; border-radius: 999px; display: inline-block; background: #94a3b8; }
.usr-status.usr-st-active { color: #166534; }
.usr-status.usr-st-active i { background: #22c55e; }
.usr-status.usr-st-pending { color: #92400e; }
.usr-status.usr-st-pending i { background: #f59e0b; }
.usr-status.usr-st-disabled { color: #64748b; }
.usr-status.usr-st-disabled i { background: #94a3b8; }
.usr-link { background: none; border: 0; padding: 0; margin-top: 4px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #4361ee; cursor: pointer; }
.usr-link:hover { text-decoration: underline; }
.usr-icon { width: 34px; height: 34px; border-radius: 9px; border: 1px solid transparent; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: #64748b; cursor: pointer; }
.usr-icon:hover { background: #f1f5f9; border-color: #e2e8f0; color: #0f172a; }
.usr-icon--del:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* Dialogs */
.mud-dialog.usr-dialog { border-radius: 18px !important; overflow: hidden; }
.mud-dialog.usr-dialog .mud-dialog-title { padding: 22px 24px 8px; }
.mud-dialog.usr-dialog .mud-dialog-content { padding: 8px 24px 20px; }
.mud-dialog.usr-dialog .mud-dialog-actions { padding: 14px 24px; border-top: 1px solid #eef1f6; background: #fafbfd; }
.usr-dlg-head { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.usr-dlg-ic { width: 42px; height: 42px; border-radius: 12px; background: #eef2ff; color: #4361ee; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.usr-dlg-title { font-size: 18px; font-weight: 800; color: #0f172a; line-height: 1.3; }
.usr-dlg-sub { font-size: 13px; color: #64748b; margin-top: 3px; font-weight: 400; }
.usr-dlg-actions { display: flex; justify-content: flex-end; gap: 10px; width: 100%; }
.usr-form { display: flex; flex-direction: column; gap: 16px; }
.usr-lbl { font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 6px; }
.usr-opt { font-weight: 500; color: #64748b; }
.usr-hint { font-size: 12px; color: #64748b; margin-top: 6px; }
.usr-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #64748b; margin-top: 8px; }
.usr-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.usr-results { margin-top: 8px; border: 1px solid #e4e8f0; border-radius: 12px; padding: 4px; display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.usr-res { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; border: 0; background: transparent; text-align: left; cursor: pointer; font-family: inherit; width: 100%; }
.usr-res:hover:not(:disabled) { background: #f8f9ff; }
.usr-res.sel { background: #eef2ff; box-shadow: inset 0 0 0 1px #c7d2fe; }
.usr-res.off { opacity: .6; cursor: default; }
.usr-res-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.usr-res-text b { font-size: 13.5px; font-weight: 600; color: #0f172a; }
.usr-res-text span { font-size: 12px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-pill { font-size: 11.5px; font-weight: 600; color: #64748b; background: #f1f5f9; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.usr-ok { margin-top: 10px; display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: #0f766e; background: #f0fdfa; border: 1px solid #ccfbf1; border-radius: 10px; padding: 9px 12px; }
.usr-or { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #64748b; text-transform: uppercase; }
.usr-or::before, .usr-or::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }
.usr-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.usr-rolecard { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; cursor: pointer; text-align: left; font-family: inherit; }
.usr-rolecard:hover { border-color: #c7d2fe; }
.usr-rolecard.on { border-color: #4361ee; background: #f5f7ff; box-shadow: inset 0 0 0 1px #4361ee; }
.usr-rolecard b { display: block; font-size: 13.5px; color: #0f172a; }
.usr-rolecard small { display: block; font-size: 12px; color: #64748b; margin-top: 2px; line-height: 1.35; }
.usr-radio { width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid #94a3b8; background: #fff; flex: none; box-sizing: border-box; }
.usr-rolecard.on .usr-radio { border: 5px solid #4361ee; }
.usr-warn { font-size: 12.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 9px 12px; }
.usr-toggle-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 12px; }
.usr-badge { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 2px 8px; border-radius: 999px; }
.usr-badge.ok { color: #0f766e; background: #f0fdfa; border-color: #ccfbf1; }
.usr-linkbox { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 12px; font-size: 12.5px; }
.usr-linkinput { flex: 1; min-width: 0; height: 36px; border: 1px solid #d7dde8; border-radius: 8px; padding: 0 10px; font-family: inherit; font-size: 12.5px; color: #334155; background: #fff; }
.usr-del { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-top: 18px; }
.usr-del-ic { width: 52px; height: 52px; border-radius: 999px; background: #fef2f2; color: #dc2626; display: inline-flex; align-items: center; justify-content: center; }
.usr-del-card { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fafbfd; max-width: 100%; }
.usr-del-text { margin: 4px 0 0; font-size: 13.5px; color: #475569; line-height: 1.5; max-width: 380px; }
@media (max-width: 600px) {
  .usr-grid2, .usr-roles { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   Follow-up notes — Employer Response section and Dashboard panel
   ═══════════════════════════════════════════════════════════ */
.fu { display: flex; flex-direction: column; gap: 12px; }
.fu-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fu-head-text { min-width: 0; margin-right: 12px; }
.fu-ic { width: 28px; height: 28px; border-radius: 999px; background: #fff7ed; color: #c2410c; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fu-title { font-size: 13px; font-weight: 800; color: #1e293b; }
.fu-sub { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.fu-wait { color: #c2410c; }
.fu-indent { margin-left: 40px; }
.fu-btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border-radius: 10px; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.fu-btn:disabled { opacity: .55; cursor: not-allowed; }
.fu-btn--primary { background: #4361ee; color: #fff; }
.fu-btn--primary:hover:not(:disabled) { background: #3651d4; }
.fu-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.fu-btn--ghost { background: #fff; color: #334155; border-color: #d7dde8; }
.fu-form { border: 1px solid #e2e8f0; background: #fafbfd; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.fu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fu-form-title { font-size: 14px; font-weight: 800; color: #0f172a; }
/* Who / How: one segmented bar each, equal parts, the chosen one raised in white. */
.fu-seg { display: grid; gap: 4px; padding: 4px; background: #eef1f6; border-radius: 11px; }
.fu-seg button { height: 34px; border: 0; border-radius: 8px; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: #475569; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.fu-seg button:hover:not(.on) { color: #0f172a; }
.fu-seg button.on { background: #fff; color: #3730a3; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
/* What happened: equal tiles in a 3-by-2 grid, each with a coloured dot. */
.fu-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fu-tile { height: 40px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; font-family: inherit; font-size: 13px; font-weight: 600; color: #334155; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 0 12px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-tile:hover:not(.on) { border-color: #c7d2fe; }
.fu-tile.on { border-color: #4361ee; background: #f5f7ff; color: #3730a3; box-shadow: inset 0 0 0 1px #4361ee; }
.fu-tile i { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.fu-d-good { background: #22c55e; } .fu-d-warn { background: #f59e0b; } .fu-d-blue { background: #4361ee; } .fu-d-grey { background: #94a3b8; }
.fu-form { max-width: 620px; }
/* Employer Response, while adding: the form on the left, the history card on the right. */
.fu-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.fu-split .fu-form { max-width: none; }
.fu-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
.fu-stack { display: flex; flex-direction: column; gap: 16px; }
.fu-history { border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 18px; background: #fff; max-height: 520px; overflow-y: auto; }
.fu-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.fu-history-head span { font-size: 14px; font-weight: 800; color: #0f172a; }
.fu-history-head small { font-size: 12px; color: #64748b; }
.fu-history .fu-meta { margin-left: 0; width: 100%; }
.fu-empty { font-size: 13px; color: #64748b; padding: 18px 0 8px; }
@media (max-width: 1100px) {
  .fu-split, .fu-pair { grid-template-columns: minmax(0, 1fr); }
}
.fu-lbl { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 6px; }
.fu-opt { font-weight: 500; color: #64748b; }
.fu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fu-chip { height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid #d7dde8; background: #fff; font-family: inherit; font-size: 13px; font-weight: 600; color: #334155; cursor: pointer; }
.fu-chip:hover { border-color: #a5b4fc; }
.fu-chip.on { background: #4361ee; border-color: #4361ee; color: #fff; }
.fu-note { width: 100%; box-sizing: border-box; border: 1px solid #d7dde8; border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 14px; resize: vertical; background: #fff; color: #0f172a; }
.fu-note:focus { outline: none; border-color: #4361ee; box-shadow: 0 0 0 3px rgba(67, 97, 238, .15); }
.fu-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fu-link { background: none; border: 0; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #4361ee; cursor: pointer; }
.fu-link:hover { text-decoration: underline; }
.fu-list { display: flex; flex-direction: column; }
.fu-entry { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid #eef1f6; }
.fu-entry:first-child { border-top: 0; }
.fu-mi { width: 30px; height: 30px; border-radius: 999px; background: #e0e7ff; color: #3730a3; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fu-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: #0f172a; }
.fu-meta { margin-left: auto; font-size: 12px; color: #64748b; }
.fu-text { font-size: 13.5px; color: #334155; margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.fu-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.fu-t-good { background: #dcfce7; color: #166534; }
.fu-t-warn { background: #fef3c7; color: #92400e; }
.fu-t-blue { background: #e0e7ff; color: #3730a3; }
.fu-t-grey { background: #f1f5f9; color: #475569; }
@media (max-width: 900px) {
  .fu-grid { grid-template-columns: minmax(0, 1fr); }
  .fu-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fu-indent { margin-left: 0; }
  .fu-meta { margin-left: 0; width: 100%; }
}

/* Dashboard: Follow-ups button in each row, and the side panel it opens */
.fu-rowbtn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid #d7dde8; background: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #334155; cursor: pointer; white-space: nowrap; max-width: 100%; }
.fu-rowbtn:hover { border-color: #4361ee; color: #4361ee; }
.fu-rowbtn b { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 11px; }
.fu-rowbtn small { font-weight: 500; color: #64748b; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.fu-rowbtn.none { border-style: dashed; border-color: #f59e0b; background: #fffbeb; color: #92400e; }
.fu-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 1400; }
.fu-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(500px, 100vw); background: #fff; box-shadow: -12px 0 32px rgba(15, 23, 42, .18); z-index: 1401; display: flex; flex-direction: column; }
.fu-panel-head { padding: 20px 22px 16px; border-bottom: 1px solid #eef1f6; display: flex; gap: 12px; align-items: flex-start; }
.fu-panel-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.fu-panel-title { font-size: 17px; font-weight: 800; color: #0f172a; margin-top: 4px; }
.fu-panel-sub { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.fu-panel-close { width: 34px; height: 34px; border-radius: 9px; border: 0; background: #f1f5f9; color: #475569; cursor: pointer; font-size: 18px; line-height: 1; }
.fu-panel-body { flex: 1; overflow-y: auto; padding: 16px 22px; }
.fu-panel-body .fu-grid { grid-template-columns: minmax(0, 1fr); }
.fu-panel-foot { padding: 14px 22px; border-top: 1px solid #eef1f6; display: flex; justify-content: space-between; align-items: center; }

/* Dashboard row: a small follow-up chip under the stage name, so rows stay compact. */
.fu-chip-sm { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid #dbe2ff; background: #f5f7ff; color: #3730a3; font-family: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; line-height: 1; }
.fu-chip-sm:hover { border-color: #4361ee; }
.fu-chip-sm.none { border: 1px dashed #f59e0b; background: #fffbeb; color: #92400e; }
.fu-chip-sm.none:hover { border-color: #d97706; }