/* ============================================================
   BlazorCRM — Global Styles
   ============================================================ */

:root {
    /* CheckMyReq.
       Brand palette: navy #0B1F33 / #16324F, blue #3B82F6, green #10B981, gold #D4A017, near-white #F8FAFC. */
    --clr-bg: #ffffff;
    --clr-bg-secondary: #f4f7fb;
    --clr-bg-tertiary: #e9eff6;
    --clr-text: #0B1F33;
    --clr-text-secondary: #4a5b6f;
    --clr-text-muted: #8496a8;
    --clr-border: rgba(11,31,51,0.12);
    --clr-border-strong: rgba(11,31,51,0.22);
    --clr-primary: #3B82F6;
    --clr-primary-hover: #2563EB;
    --clr-danger: #E24B4A;
    --clr-danger-hover: #A32D2D;
    /* Semantic accents (text + translucent chip background) — reused by signal chips, gap flags, comp results. */
    --clr-success: #0f9d6e;
    --clr-success-bg: #e7f8f1;
    --clr-warn: #b07d0a;
    --clr-warn-bg: #fbf2df;
    --clr-gold: #a67c0c;
    --clr-gold-bg: #fbf2db;
    --clr-gold-border: #e6cf8b;
    --clr-danger-bg: #fdecea;
    --radius: 8px;
    --radius-lg: 12px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --q-navy: #16324F;
    --q-accent: #5f7288;
}

/* === DARK THEME ===
   Neutral charcoal, matched to the requisition-scoring pages (/occupations, /explore …) so both halves
   of the product read as one app in the dark. Those pages define their own scoped palette in
   fillability.css — the values below are that palette (--bg/--panel/--line/--text/--muted/--accent)
   mapped onto these variables, so keep the two in step. Deliberately NOT the brand navy: it made every
   surface blue. The whole palette flows from these variables, so dark mode is mostly a variable swap
   plus a handful of overrides for hardcoded light accents. */
[data-theme="dark"] {
    --clr-bg: #0f1115;
    --clr-bg-secondary: #171a21;
    --clr-bg-tertiary: #1f242e;
    --clr-text: #e7e9ee;
    --clr-text-secondary: #b4bcca;
    --clr-text-muted: #8b93a4;
    --clr-border: #262b36;
    --clr-border-strong: #39414f;
    --clr-primary: #60a5fa;
    --clr-primary-hover: #8cc2ff;
    --clr-danger: #f87171;
    --clr-danger-hover: #fca5a5;
    --clr-success: #34d399;
    --clr-success-bg: rgba(52,211,153,0.15);
    --clr-warn: #fbbf24;
    --clr-warn-bg: rgba(251,191,36,0.13);
    --clr-gold: #fbbf24;
    --clr-gold-bg: rgba(251,191,36,0.13);
    --clr-gold-border: rgba(251,191,36,0.40);
    --clr-danger-bg: rgba(248,113,113,0.15);
    --q-navy: #e7e9ee;
    --q-accent: #8b93a4;
    color-scheme: dark;
}

[data-theme="dark"] .nav-link.active { background: rgba(96,165,250,0.16); color: var(--clr-primary); }
[data-theme="dark"] .avatar-lg { background: rgba(96,165,250,0.20); }
[data-theme="dark"] .alert-danger {
    background: rgba(248,113,113,0.14);
    color: #fca5a5;
    border-color: rgba(248,113,113,0.40);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font);
    font-size: 14px;
    color: var(--clr-text);
    background: var(--clr-bg);
    line-height: 1.6;
}

/* === APP SHELL === */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid var(--clr-border);
    background: var(--clr-bg);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    transition: width 0.18s ease;
    height: 100vh;
    overflow-y: auto;
}

/* The logo image carries its own dark background, so the panel adds no padding. The colour below is
   sampled from the image itself — if it drifts from the asset, the logo shows as a visible rectangle. */
/* Logo + collapse button on one line. The button lives here rather than floating over the middle of the
   nav: it was position:fixed at top:50%, so it sat on whatever link happened to be at the vertical centre. */
.sidebar-brand-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 8px 4px;
}

/* An <a> since the logo is the way home for both sides — reset the link colour/underline it inherits.
   min-width:0 so the logo yields to the button instead of pushing it out of the sidebar. */
.sidebar-brand {
    padding: 0;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #011122;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}
.brand-mark { width: auto; height: 46px; flex: none; }

/* Sidebar collapse / expand toggles */
.sidebar-toggle {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--clr-border);
    background: var(--clr-bg);
    color: var(--clr-text-secondary);
    border-radius: var(--radius);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.sidebar-toggle:hover { color: var(--clr-text); background: var(--clr-bg-secondary); border-color: var(--clr-border-strong); }
/* Collapse: sits in the brand row at the top of the sidebar, so it is in normal flow and cannot overlap a
   nav link. It used to be position:fixed at top:50% — "the vertical middle of the sidebar" — which meant it
   floated over whichever link happened to be at the centre of the list. Kept as a plain flex child; the
   [data-sidebar="collapsed"] rule below still hides it, and the sidebar's own overflow:hidden would anyway. */
.sidebar-collapse { flex: none; }
/* Expand: floats at the left edge, vertically centered; only appears once collapsed. It stays fixed because
   there is no sidebar left to sit in — the whole panel is width:0 at that point. */
.sidebar-expand {
    position: fixed;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    z-index: 40;
    display: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.14);
}

[data-sidebar="collapsed"] .sidebar {
    width: 0;
    min-width: 0;
    border-right: none;
    overflow: hidden;
}
[data-sidebar="collapsed"] .sidebar-collapse { display: none; }
[data-sidebar="collapsed"] .sidebar-expand { display: flex; }

.brand-icon { color: var(--clr-primary); font-size: 20px; }
/* Full-bleed inside .sidebar-brand. No max-height: the image is letterboxed by object-fit the moment a
   height cap fights width:100%, which shows the panel colour as bars down both sides. */
.brand-logo { display: block; width: 100%; height: auto; }

.nav-list {
    list-style: none;
    padding: 0 8px;
    flex: 1;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius);
    color: var(--clr-text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 450;
    transition: all 0.15s;
    margin-bottom: 2px;
}

.nav-link:hover { background: var(--clr-bg-secondary); color: var(--clr-text); }
.nav-link.active { background: #E8F1FE; color: var(--clr-primary); font-weight: 500; }

.nav-icon { font-size: 16px; width: 20px; text-align: center; }
.nav-separator { height: 1px; background: var(--clr-border); margin: 8px 12px; }

/* Grouped-nav section labels — strong, uppercase group headers that stand out from the links beneath
   (adapts to light/dark via --clr-text). The label is a full-width toggle button that shows/hides its group. */
.nav-group { list-style: none; }
.nav-group-items { list-style: none; padding: 0; margin: 0; }
.nav-group.collapsed .nav-group-items { display: none; }

/* A nav item with no section header — currently the seeker's "My Day". Matches the top padding a
   first-child .nav-section gets, so it sits at the same height a heading would have. */
.nav-solo { list-style: none; padding-top: 4px; }

.nav-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 14px 12px 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--clr-text);
    user-select: none;
}
.nav-section:hover { color: var(--clr-primary); }
.nav-group:first-child .nav-section { padding-top: 4px; }

.nav-chevron { font-size: 9px; transition: transform 0.15s ease; }
.nav-group:not(.collapsed) .nav-chevron { transform: rotate(90deg); }

.sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--clr-border);
}

/* Seeker account links stacked above the identity line. Sized between .nav-link and .user-name: these are
   real destinations, not chrome, but they should not compete with the sections above. */
.sidebar-account { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.acct-link {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--clr-text-secondary);
    text-decoration: none;
    padding: 4px 0;
    border-radius: 6px;
}
.acct-link:hover { color: var(--clr-text); }
.acct-link.active { color: var(--clr-primary); font-weight: 500; }

.user-info { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.user-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--clr-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 500;
}
.user-name { font-size: 12px; color: var(--clr-text-secondary); }

.btn-logout, .btn-login {
    font-size: 12px; color: var(--clr-text-muted);
    background: none; border: none; cursor: pointer; padding: 0;
    text-decoration: none;
}
.btn-logout:hover, .btn-login:hover { color: var(--clr-text); }

.main-content {
    flex: 1;
    padding: 28px 32px;
    min-width: 0;   /* fill the remaining width; flex handles shrinking on smaller screens */
}

/* === TYPOGRAPHY === */
h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
/* FocusOnNavigate focuses the page <h1> for screen readers on each load; headings aren't
   interactive, so hide the visible focus box it draws (e.g. around the Q logo). */
h1:focus { outline: none; }
h2 { font-size: 16px; font-weight: 500; margin-bottom: 4px; }

.page-description { color: var(--clr-text-secondary); margin-bottom: 20px; }
.subtitle { color: var(--clr-text-secondary); font-size: 13px; }

/* === PAGE HEADER === */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--clr-border-strong);
    background: var(--clr-bg);
    color: var(--clr-text);
    transition: all 0.15s;
    font-family: var(--font);
    white-space: nowrap;
}
.btn:hover { background: var(--clr-bg-secondary); }

.btn-primary {
    background: var(--clr-primary);
    color: #fff;
    border-color: var(--clr-primary);
}
.btn-primary:hover { background: var(--clr-primary-hover); border-color: var(--clr-primary-hover); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secondary { background: var(--clr-bg); }

.btn-danger {
    background: var(--clr-bg);
    color: var(--clr-danger);
    border-color: var(--clr-danger);
}
.btn-danger:hover { background: var(--clr-danger); color: #fff; }

/* A button at TABLE-ROW scale. The .btn above is sized for a toolbar (7px 16px), which is a lot of furniture
   to repeat down a hundred-row table — this is that same button, smaller, and nothing else. Used by the
   seeker's "add to backlog" control in the /jobs and company-detail listing tables. */
.btn-row { padding: 3px 9px; font-size: 12px; margin-right: 10px; text-decoration: none; }
a.btn-row:hover { text-decoration: none; }

/* The trailing action cell of a data-table: right-aligned, never wrapped, everything on one baseline. */
.cell-actions { text-align: right; white-space: nowrap; }
.cell-actions > * { vertical-align: middle; }

/* === TOOLBAR === */
.toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.search-input {
    flex: 1;
    min-width: 200px;
    padding: 7px 12px;
    border: 1px solid var(--clr-border-strong);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font);
    background: var(--clr-bg);
    color: var(--clr-text);
}
.search-input:focus { outline: 2px solid var(--clr-primary); outline-offset: -1px; }

.filter-select {
    padding: 7px 12px;
    border: 1px solid var(--clr-border-strong);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font);
    background: var(--clr-bg);
    color: var(--clr-text);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--clr-text-secondary);
    cursor: pointer;
}

/* === DATA TABLE === */
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--clr-text-muted);
    border-bottom: 1px solid var(--clr-border);
    white-space: nowrap;
}
/* Click-to-sort (global, handled in app.js). Non-sortable columns opt out with data-no-sort. */
.data-table thead th { cursor: pointer; user-select: none; }
.data-table thead th[data-no-sort], .data-table thead th:empty { cursor: default; }
.data-table thead th:not([data-no-sort]):not(:empty):hover { color: var(--clr-text-secondary); }
.data-table thead th[aria-sort]::after { content: " ▲"; font-size: 9px; }
.data-table thead th[aria-sort="descending"]::after { content: " ▼"; }
.data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--clr-border);
    font-size: 13px;
}
.data-table tbody tr:hover td { background: var(--clr-bg-secondary); }
.clickable-row { cursor: pointer; }
.cell-primary { font-weight: 500; color: var(--clr-primary); }
.cell-muted { color: var(--clr-text-muted); font-size: 12px; }
/* Placeholder for null/empty cells in result tables — reads as "empty", not data. */
.cell-null { color: var(--clr-text-muted); opacity: 0.6; user-select: none; }

.table-scroll { overflow-x: auto; }

/* === BADGES === */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 500;
}
.badge-success { background: #EAF3DE; color: #3B6D11; }
.badge-warning { background: #FAEEDA; color: #854F0B; }
.badge-danger { background: #FCEBEB; color: #A32D2D; }
.badge-info { background: #EEEDFE; color: #534AB7; }
.badge-muted { background: var(--clr-bg-tertiary); color: var(--clr-text-muted); }
.badge-default { background: var(--clr-bg-secondary); color: var(--clr-text-secondary); }

/* === ACCESS GATE (pending / deactivated full-screen) === */
.access-gate {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--clr-bg-secondary);
}
.access-gate-card {
    max-width: 440px;
    width: 100%;
    text-align: center;
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}
.access-gate-card h2 { margin-bottom: 12px; }
.access-gate-card p { color: var(--clr-text-secondary); margin-bottom: 12px; }
.access-gate-card .btn { margin-top: 8px; }

/* === "SEE MORE" INLINE LINK === */
.see-more-link {
    color: var(--clr-primary);
    cursor: pointer;
    white-space: nowrap;
    font-size: 12px;
}
.see-more-link:hover { text-decoration: underline; }

/* === NAV "NEW" BADGE === */
.nav-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clr-danger, #d9534f);
    margin-left: 6px;
    vertical-align: middle;
}

/* === AI COST COUNTER === */
.ai-cost-counter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--clr-bg-tertiary);
    border: 1px solid var(--clr-border);
    font-size: 13px;
    color: var(--clr-text-secondary);
}
.ai-cost-counter strong { color: var(--clr-text); }

/* === METRICS === */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}
.metric-card {
    background: var(--clr-bg-secondary);
    border-radius: var(--radius);
    padding: 16px;
}
.metric-label {
    font-size: 12px;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.metric-value {
    display: block;
    font-size: 28px;
    font-weight: 600;
    margin-top: 4px;
}
/* Qualifier under a headline figure (e.g. the postings behind a job count). Reserves its line whether or not
   it has text, so one card carrying a qualifier doesn't stand taller than its neighbours in the same row. */
.metric-sub {
    display: block;
    min-height: 1em;
    margin-top: 2px;
    font-size: 12px;
    color: var(--clr-text-muted);
}

/* === DASHBOARD PANELS === */
.dash-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}
@media (max-width: 900px) { .dash-row { grid-template-columns: 1fr; } }
.dash-panel {
    background: var(--clr-bg-secondary);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.dash-panel h2 { margin-top: 0; }
.dash-panel .data-table { margin-bottom: 0; }
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.period-toggle { display: inline-flex; gap: 4px; }
.period-btn {
    border: 1px solid var(--clr-border);
    background: var(--clr-bg);
    color: var(--clr-text-muted);
    border-radius: var(--radius);
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
}
.period-btn.active {
    background: var(--clr-primary, #6c5ce7);
    border-color: var(--clr-primary, #6c5ce7);
    color: #fff;
}

/* === HIRING CHART (pure CSS bar chart) === */
.hiring-chart { margin-top: 12px; }
.chart-area { display: flex; gap: 8px; }
.chart-yaxis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 170px;
    padding-bottom: 22px; /* aligns the 0 tick with the bar baseline (above the labels row) */
    font-size: 10px;
    color: var(--clr-text-muted);
    text-align: right;
    min-width: 18px;
}
.chart-empty {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 170px;
    flex: 1;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--clr-border);
    background-image: repeating-linear-gradient(to top, transparent, transparent 33px, var(--clr-border) 33px, var(--clr-border) 34px);
    background-position: bottom;
}
.chart-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}
.chart-bar-set {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 140px;
}
.chart-bar {
    position: relative;
    width: 16px;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    transition: height 0.2s ease;
    cursor: pointer;
}
.chart-bar:hover { filter: brightness(1.18); }
.chart-bar.bar-selected { box-shadow: 0 0 0 2px var(--clr-bg), 0 0 0 4px var(--clr-text); }
.bar-val {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 600;
    color: var(--clr-text);
}
.chart-bar.sub  { background: #6c5ce7; }
.chart-bar.int  { background: #e67e22; }
.chart-bar.hire { background: #27ae60; }

/* Hiring-overview drill-down (candidates behind a clicked bar) */
.hiring-drilldown { margin-top: 16px; border-top: 1px solid var(--clr-border); padding-top: 12px; }
.drilldown-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.drilldown-head .btn-icon { margin-left: auto; }
.drilldown-list { max-height: 300px; overflow: auto; }
.chart-label {
    font-size: 11px;
    color: var(--clr-text-muted);
    margin-top: 6px;
    text-align: center;
}
.chart-legend {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--clr-text-muted);
}
.chart-legend .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
}
.chart-legend .dot.sub  { background: #6c5ce7; }
.chart-legend .dot.int  { background: #e67e22; }
.chart-legend .dot.hire { background: #27ae60; }

/* === DETAIL CARD === */
.detail-card {
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 20px;
}
/* === COLLAPSIBLE SETTINGS GROUPS === */
.settings-group > .settings-group-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    margin: -20px -24px 0;
    padding: 16px 24px;
    border-radius: var(--radius-lg);
}
.settings-group[open] > .settings-group-summary {
    margin-bottom: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.settings-group > .settings-group-summary:hover {
    background: var(--clr-bg-hover, rgba(255,255,255,0.03));
}
.settings-group-summary::-webkit-details-marker { display: none; }
.settings-group-summary h2 { margin: 0; }
.settings-group-summary::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--clr-text-secondary);
    border-bottom: 2px solid var(--clr-text-secondary);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
    flex: 0 0 auto;
}
.settings-group[open] > .settings-group-summary::before {
    transform: rotate(45deg);
}

.detail-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.detail-header h1 { margin-bottom: 0; }
.detail-actions { margin-left: auto; display: flex; gap: 8px; }

.avatar-lg {
    width: 52px; height: 52px; border-radius: 50%;
    background: #EEEDFE; color: var(--clr-primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 18px; flex-shrink: 0;
    overflow: hidden;
}
.avatar-lg .avatar-photo {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
    display: block;
}
.avatar-lg--clickable { cursor: pointer; }
.avatar-lg--clickable:hover { box-shadow: 0 0 0 3px var(--clr-primary); }

/* Full-screen lightbox for the enlarged avatar. Click anywhere to dismiss. */
.avatar-lightbox {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.72);
    cursor: zoom-out;
    padding: 24px;
}
.avatar-lightbox-img {
    max-width: min(90vw, 440px);
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    background: #fff;
}

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    font-size: 13px;
}
.field-grid .full-width { grid-column: 1 / -1; }
.field-label {
    font-size: 12px;
    color: var(--clr-text-muted);
    margin-bottom: 2px;
}

.back-link {
    display: inline-block;
    font-size: 13px;
    color: var(--clr-primary);
    text-decoration: none;
    margin-bottom: 16px;
}
.back-link:hover { text-decoration: underline; }

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0 10px;
}

/* === DUAL-THUMB RANGE SLIDER === */
.range-dual { position: relative; height: 26px; }
.range-dual-track {
    position: absolute; top: 50%; left: 0; right: 0; height: 6px;
    transform: translateY(-50%); background: var(--clr-bg-tertiary); border-radius: 999px;
}
.range-dual-fill {
    position: absolute; top: 50%; height: 6px;
    transform: translateY(-50%); background: var(--clr-primary); border-radius: 999px;
}
/* Two range inputs stacked over the same track; only their thumbs are interactive so both are grabbable. */
.range-dual input.range-thumb {
    position: absolute; top: 0; left: 0; width: 100%; height: 26px; margin: 0;
    background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none;
}
.range-dual input.range-thumb::-webkit-slider-runnable-track { background: transparent; border: none; }
.range-dual input.range-thumb::-moz-range-track { background: transparent; border: none; }
.range-dual input.range-thumb::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; height: 16px; width: 16px; border-radius: 50%;
    background: #fff; border: 2px solid var(--clr-primary); cursor: pointer; pointer-events: auto; margin-top: -5px;
}
.range-dual input.range-thumb::-moz-range-thumb {
    height: 16px; width: 16px; border-radius: 50%; background: #fff;
    border: 2px solid var(--clr-primary); cursor: pointer; pointer-events: auto;
}

/* Selected state outline on the maps — Seahawks "Action Green" neon highlight */
/* Selected-state outline, drawn as a separate overlay path AFTER all states so the gold glow
   renders on top of neighboring states (paint order) instead of being covered on shared borders. */
.map-selection-glow { fill: none; stroke: #F4C542; stroke-width: 2.5; pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(244, 197, 66, 0.95)) drop-shadow(0 0 7px rgba(244, 197, 66, 0.55)); }
/* Hovered-state outline, same overlay trick as the selection glow: drawn after every state so the highlight
   isn't clipped by neighbors painted later. Matches the .us-state:hover stroke it sits on top of. */
.map-hover-outline { fill: none; stroke: var(--clr-text); stroke-width: 1.25; pointer-events: none; }

/* === JOBS BAR CHARTS === */
.jobs-bar-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.jobs-bar-label { flex: 0 0 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.jobs-bar-track { flex: 1; height: 10px; border-radius: 999px; background: var(--clr-bg-tertiary); overflow: hidden; }
.jobs-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--clr-primary); }
.jobs-bar-fill.alt { background: var(--q-accent); }
.jobs-bar-count { flex: 0 0 auto; min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: var(--clr-text-secondary); font-size: 13px; }

/* === AI PROGRESS INDICATOR === */
.ai-progress {
    margin-bottom: 12px;
}
.ai-progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ai-progress-word {
    font-weight: 600;
    color: var(--clr-primary);
}
.ai-progress-track {
    height: 6px;
    border-radius: 999px;
    background: var(--clr-bg-tertiary);
    overflow: hidden;
}
.ai-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--clr-primary), var(--clr-primary-hover));
    transition: width 0.2s linear;
    /* Subtle animated sheen so the bar reads as "working" even while width is between ticks. */
    background-size: 200% 100%;
    animation: ai-progress-sheen 1.4s ease-in-out infinite;
}
@keyframes ai-progress-sheen {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* === COLLAPSIBLE PAGE SECTIONS === */
.collapsible-section > .collapsible-summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.collapsible-section > .collapsible-summary::-webkit-details-marker { display: none; }
.collapsible-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}
.collapsible-heading::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--clr-text-secondary);
    border-bottom: 2px solid var(--clr-text-secondary);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
    flex: 0 0 auto;
}
.collapsible-section[open] > .collapsible-summary .collapsible-heading::before {
    transform: rotate(45deg);
}

.empty-state {
    text-align: center;
    padding: 32px;
    color: var(--clr-text-muted);
    font-size: 13px;
}

/* === FORMS === */
.entity-form { max-width: 720px; }
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}
.form-grid .full-width { grid-column: 1 / -1; }
.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--clr-text-secondary);
    margin-bottom: 4px;
}
.form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--clr-border-strong);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font);
    background: var(--clr-bg);
    color: var(--clr-text);
}
.form-control:focus { outline: 2px solid var(--clr-primary); outline-offset: -1px; }
textarea.form-control { resize: vertical; }

.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--clr-border);
}

.validation-message { color: var(--clr-danger); font-size: 12px; margin-top: 2px; }

/* === ACTIVITY FEED === */
.activity-feed { margin-bottom: 20px; }
.activity-row {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--clr-border);
}
.activity-type-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--clr-bg-tertiary);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.activity-subject { font-size: 13px; font-weight: 450; }
.activity-meta { font-size: 12px; color: var(--clr-text-muted); margin-top: 2px; }
.activity-notes { font-size: 12px; color: var(--clr-text-secondary); margin-top: 4px; font-style: italic; }

/* === MODAL === */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
}
.modal-dialog {
    background: var(--clr-bg);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 440px;
    width: 90%;
}
.modal-dialog h3 { margin-bottom: 8px; }
.share-user-list { max-height: 320px; overflow: auto; border: 1px solid var(--clr-border); border-radius: var(--radius); }
.share-user-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; font-size: 13px; }
.share-user-row:hover { background: var(--clr-bg-secondary); }
.share-user-row + .share-user-row { border-top: 1px solid var(--clr-border); }
.modal-dialog p { color: var(--clr-text-secondary); font-size: 13px; margin-bottom: 20px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* === ALERTS === */
.alert { padding: 12px 16px; border-radius: var(--radius); font-size: 13px; margin: 12px 0; }
.alert-danger { background: #FCEBEB; color: #791F1F; border: 1px solid #F09595; }
.alert-warn { background: var(--clr-warn-bg); color: var(--clr-warn); border: 1px solid var(--clr-warn); }

/* === FUTURE-ACTIVITY COMMITMENT PANEL === */
.commitment-panel {
    margin: 16px 0;
    padding: 14px 16px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    background: var(--clr-bg-secondary);
}
.commitment-panel.commitment-missing { border-color: #F09595; background: #FCEBEB; }
/* Owner/status/stage grid on the left, "Next action" panel to the right (top header area). */
.detail-topgrid { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.detail-topgrid > .commitment-grid { flex: 1 1 340px; }
.detail-topgrid-next { margin: 0; flex: 0 1 auto; min-width: 300px; align-self: flex-start; }
.commitment-banner { color: #791F1F; font-size: 13px; font-weight: 500; margin-bottom: 12px; }
.commitment-grid {
    display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end;
}
.commitment-action { margin-left: auto; }
.badge-overdue {
    margin-left: 6px; padding: 1px 7px; border-radius: 10px;
    background: #791F1F; color: #fff; font-size: 11px; font-weight: 600;
}

.metric-card.metric-alert { border: 1px solid #F09595; background: #FCEBEB; }
.metric-card.metric-alert .metric-value { color: #791F1F; }
.count-flag { font-weight: 600; }
.count-flag-red {
    padding: 1px 9px; border-radius: 10px;
    background: #791F1F; color: #fff; font-size: 12px;
}

/* === DAILY TASKS === */
.dt-progress-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dt-alldone { color: var(--clr-primary); font-weight: 600; }
.dt-progress-bar { height: 8px; border-radius: 6px; background: var(--clr-bg-tertiary); overflow: hidden; margin-bottom: 16px; }
.dt-progress-fill { height: 100%; background: var(--clr-primary); border-radius: 6px; transition: width .35s ease; }
.dt-task-list { list-style: none; margin: 0; padding: 0; }
.dt-task { display: flex; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--clr-border); }
.dt-task:first-child { border-top: none; }
.dt-task-body { flex: 1; min-width: 0; }
.dt-task-title { font-weight: 500; }
.dt-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 3px; font-size: 12px; color: var(--clr-text-muted); }
.dt-task-desc { font-size: 12px; color: var(--clr-text-secondary); margin-top: 4px; }
.dt-overdue { color: #C0392B; font-weight: 600; }
.dt-overdue-count { color: #C0392B; font-weight: 600; }
.dt-task-overdue { border-left: 3px solid #C0392B; padding-left: 12px; }
.dt-overdue-pill {
    display: inline-block; margin-left: 8px; vertical-align: middle;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    background: #C0392B; color: #fff; border-radius: 9px; padding: 1px 7px;
}
.dt-link { font-size: 12px; }
.dt-done .dt-task-title { text-decoration: line-through; color: var(--clr-text-muted); }

/* Read-only completion indicator (tasks auto-complete from activity, not clicks) */
.dt-checkmark {
    position: relative; flex-shrink: 0; width: 24px; height: 24px; margin-top: 1px;
    border: 2px solid var(--clr-border-strong); border-radius: 7px; transition: all .15s ease;
}
.dt-checkmark.dt-checked { background: var(--clr-primary); border-color: var(--clr-primary); }
.dt-checkmark.dt-checked::after {
    content: "✓"; color: #fff; font-size: 15px; font-weight: 700;
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.dt-hint { font-size: 12px; color: var(--clr-text-muted); margin-top: 4px; }
.dt-hint-done { color: var(--clr-primary); }
.dt-actions { display: flex; gap: 8px; margin-top: 8px; }

/* Global AI daily-budget banner */
.ai-budget-banner {
    position: sticky; top: 0; z-index: 900;
    margin: -28px -32px 20px; padding: 10px 32px;
    font-size: 13px; font-weight: 500; text-align: center;
}
.ai-budget-warn { background: #FEF3C7; color: #92400E; border-bottom: 1px solid #FCD34D; }
.ai-budget-critical { background: #FCEBEB; color: #791F1F; border-bottom: 1px solid #F09595; }

/* "Needs follow-up" flag on candidate rows */
.followup-pill {
    display: inline-block; margin-left: 6px; vertical-align: middle;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    background: #B45309; color: #fff; border-radius: 9px; padding: 1px 7px;
}

.dt-report-bar { display: inline-block; vertical-align: middle; width: 120px; height: 7px; border-radius: 5px; background: var(--clr-bg-tertiary); overflow: hidden; margin-right: 8px; }
.dt-report-fill { height: 100%; background: var(--clr-primary); border-radius: 5px; }

/* Late-day "you have open tasks" reminder on the sidebar link */
.nav-link.nav-urgent { color: #C0392B; font-weight: 600; }
.nav-link.nav-urgent .nav-icon { animation: dt-nudge 1.4s ease-in-out infinite; }
/* The tag started in the sidebar but is now the site-wide flag that follows a name — a company's
   "aggregator", a posting's "remote", a candidate's "sponsorship". Inline after text it needs a gap,
   so that is the default; the two flex rows below still push it to their right edge, which is where
   `margin-left: auto` was doing the work all along. */
.nav-urgent-tag {
    margin-left: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    background: #C0392B; color: #fff; border-radius: 9px; padding: 1px 7px;
}
.nav-link .nav-urgent-tag, .pl-card-meta .nav-urgent-tag { margin-left: auto; }
@keyframes dt-nudge { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }

/* === JOB MATCH (candidate ↔ market job) === */
.match-chip {
    display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.4;
    background: var(--clr-surface-2, #eef1f4); color: var(--clr-text-muted, #556);
    border: 1px solid var(--clr-border, #dfe3e8); border-radius: 10px;
    padding: 1px 8px; margin: 1px 4px 1px 0; white-space: nowrap;
}
.match-score-badge {
    display: inline-block; min-width: 30px; text-align: center; font-weight: 700; font-size: 13px;
    background: var(--clr-accent, #2d6cdf); color: #fff; border-radius: 8px; padding: 2px 7px;
}

/* === CELEBRATION === */
.celebrate-overlay { position: fixed; inset: 0; z-index: 2000; overflow: hidden; background: rgba(0,0,0,0.25); }
.celebrate-card {
    position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);
    background: var(--clr-bg); border-radius: var(--radius-lg); padding: 28px 36px; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35); animation: dt-pop .45s cubic-bezier(.2,.8,.3,1.3) both;
}
.celebrate-emoji { font-size: 52px; animation: dt-bounce 1s ease infinite; }
@keyframes dt-pop { from { transform: translate(-50%,-50%) scale(.6); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
@keyframes dt-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.confetti-piece {
    position: absolute; top: -16px; width: 10px; height: 16px; border-radius: 2px; opacity: .9;
    animation-name: dt-confetti; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards;
}
@keyframes dt-confetti { to { transform: translateY(110vh) rotate(720deg); opacity: 1; } }

/* === EXIT-GATE MODAL === */
.gate-paths { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.gate-path { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.gate-fields {
    display: flex; flex-wrap: wrap; gap: 16px;
    margin: 2px 0 6px 24px; padding: 12px 14px;
    border-left: 2px solid var(--clr-primary); background: var(--clr-bg-secondary);
    border-radius: var(--radius);
}

/* === AI QUERY === */
.ai-prompt-area { margin-bottom: 24px; }
.ai-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--clr-border-strong);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-family: var(--font);
    resize: vertical;
    background: var(--clr-bg);
    color: var(--clr-text);
    line-height: 1.5;
}
.ai-input:focus { outline: none; border-color: var(--clr-primary); }
.ai-input::placeholder { color: var(--clr-text-muted); }

.ai-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.ai-result-card {
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 16px;
}
/* The card the user is currently working with. */
.ai-result-card.active {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 1px var(--clr-primary), 0 6px 20px rgba(83,74,183,0.16);
}

/* Rendered markdown from AI results (headings, tables, lists, code). Tight vertical rhythm
   so it reads as one answer rather than a full web page. Applied wherever TextFormat.Markdown
   output is shown (candidate insights, lender summary, saved talking style). */
.ai-markdown { line-height: 1.55; word-break: break-word; }
.ai-markdown > *:first-child { margin-top: 0; }
.ai-markdown > *:last-child { margin-bottom: 0; }
.ai-markdown h1, .ai-markdown h2, .ai-markdown h3,
.ai-markdown h4, .ai-markdown h5, .ai-markdown h6 {
    margin: 18px 0 8px; line-height: 1.25; font-weight: 700;
}
.ai-markdown h1 { font-size: 1.4em; }
.ai-markdown h2 { font-size: 1.2em; }
.ai-markdown h3 { font-size: 1.05em; }
.ai-markdown h4, .ai-markdown h5, .ai-markdown h6 { font-size: 1em; }
.ai-markdown p { margin: 8px 0; }
.ai-markdown ul, .ai-markdown ol { margin: 8px 0; padding-left: 22px; }
.ai-markdown li { margin: 3px 0; }
.ai-markdown li > p { margin: 0; }
.ai-markdown strong { font-weight: 700; }
.ai-markdown a { color: var(--clr-primary); }
.ai-markdown hr { border: none; border-top: 1px solid var(--clr-border); margin: 16px 0; }
.ai-markdown code {
    background: var(--clr-bg-secondary); padding: 1px 5px;
    border-radius: 4px; font-size: 0.9em;
}
.ai-markdown pre {
    background: var(--clr-bg-secondary); padding: 12px 14px;
    border-radius: var(--radius); overflow-x: auto; margin: 10px 0;
}
.ai-markdown pre code { background: none; padding: 0; }
.ai-markdown blockquote {
    margin: 10px 0; padding: 4px 14px;
    border-left: 3px solid var(--clr-border-strong); color: var(--clr-text-secondary);
}
.ai-markdown table {
    border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 0.95em;
}
.ai-markdown th, .ai-markdown td {
    border: 1px solid var(--clr-border); padding: 6px 10px; text-align: left;
    vertical-align: top;
}
.ai-markdown th { background: var(--clr-bg-secondary); font-weight: 600; }
/* A refinement's result, shown highlighted above its source card. */
.refined-block {
    border: 1px solid var(--clr-primary);
    border-radius: var(--radius);
    background: rgba(83,74,183,0.06);
    padding: 12px 14px;
    margin-bottom: 14px;
}
/* Loading placeholder shown while a query generates/runs (immediate "we're working" feedback). */
.ai-pending-line { display: flex; align-items: center; gap: 8px; color: var(--clr-text-secondary); margin-top: 4px; }
.ai-spinner {
    width: 14px; height: 14px; flex-shrink: 0;
    border: 2px solid var(--clr-border);
    border-top-color: var(--clr-primary);
    border-radius: 50%;
    animation: ai-spin 0.7s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-skeleton { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.ai-skel-row {
    height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, var(--clr-bg-secondary) 25%, var(--clr-bg-tertiary) 37%, var(--clr-bg-secondary) 63%);
    background-size: 400% 100%;
    animation: ai-shimmer 1.4s ease infinite;
}
.ai-skel-row:nth-child(1) { width: 92%; }
.ai-skel-row:nth-child(2) { width: 78%; }
.ai-skel-row:nth-child(3) { width: 55%; }
@keyframes ai-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.ai-question { margin-bottom: 12px; }
.ai-question p { font-weight: 500; margin-top: 4px; }
/* AI interpretation — soft gold callout so the plain-English summary stands out. */
.ai-explanation {
    margin-bottom: 12px;
    background: var(--clr-gold-bg);
    border: 1px solid var(--clr-gold-border);
    border-radius: var(--radius);
    padding: 10px 14px;
}
.ai-explanation .ai-label { color: var(--clr-gold); }
.ai-explanation p { color: var(--clr-gold); margin-top: 4px; margin-bottom: 0; }

/* A refine that's in flight: the Refine button reading "Refining…" gets the brand AI-gold ring and a
   gentle pulse so it's obvious work is happening. Overrides the disabled dimming so it stays vivid. */
.btn.ai-refining {
    color: var(--clr-gold);
    background: var(--clr-gold-bg);
    border-color: var(--clr-gold-border);
    opacity: 1;
    animation: ai-refining-pulse 1.15s ease-in-out infinite;
}
@keyframes ai-refining-pulse {
    0%, 100% { box-shadow: 0 0 0 1px var(--clr-gold-border), 0 0 0 0 rgba(212,160,23,0); }
    50%      { box-shadow: 0 0 0 1px var(--clr-gold-border), 0 0 9px 2px rgba(212,160,23,0.5); }
}
@media (prefers-reduced-motion: reduce) {
    .btn.ai-refining { animation: none; box-shadow: 0 0 0 1px var(--clr-gold-border); }
}

/* Optional friendly title a user gives a shared query. */
.shared-query-title { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--clr-text); }
.ai-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--clr-text-muted);
}
.ai-result-meta {
    font-size: 12px;
    color: var(--clr-text-muted);
    margin-bottom: 8px;
}

/* Token-count hint on an AI meta line — present but quiet; the numbers live in the tooltip. */
.ai-meta-tokens {
    cursor: help;
    opacity: 0.7;
}

.ai-sql-details {
    margin-bottom: 12px;
}
.ai-sql-details summary {
    font-size: 12px;
    color: var(--clr-primary);
    cursor: pointer;
    margin-bottom: 6px;
}
.ai-sql-block {
    background: var(--clr-bg-tertiary);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-size: 12px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

.ai-suggestions { margin-top: 24px; }
.suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.chip {
    padding: 6px 14px;
    border: 1px solid var(--clr-border);
    border-radius: 20px;
    background: var(--clr-bg);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font);
    color: var(--clr-text-secondary);
    transition: all 0.15s;
}
.chip:hover { background: var(--clr-bg-secondary); color: var(--clr-primary); border-color: var(--clr-primary); }

/* === CALENDAR === */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 12px;
}
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 12px;
}
.weekday {
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--clr-text-muted);
    text-align: right;
}
.calendar-grid { margin-top: 0; }

.calendar-day {
    min-height: 104px;
    border-right: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    padding: 4px;
    cursor: pointer;
}
.calendar-day:hover { background: var(--clr-bg-secondary); }
.calendar-day:nth-child(7n) { border-right: none; }
.calendar-day:nth-child(n+36) { border-bottom: none; }
.calendar-day.today { background: var(--clr-bg-secondary); }
.calendar-day.other-month { background: var(--clr-bg-tertiary); }
.calendar-day.other-month .day-number { color: var(--clr-text-muted); }
.calendar-day .day-header { justify-content: flex-end; }

.day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    margin-bottom: 4px;
}
.day-name { font-size: 11px; color: var(--clr-text-muted); text-transform: uppercase; font-weight: 500; }
.day-number { font-size: 13px; font-weight: 500; }
.today-number {
    background: var(--clr-primary);
    color: #fff;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px;
}

.day-events { display: flex; flex-direction: column; gap: 2px; }

.cal-event {
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    background: #EEEDFE;
    color: #3C3489;
    line-height: 1.3;
    transition: opacity 0.15s;
}
.cal-event:hover { opacity: 0.8; }
.cal-event-interview { background: #E6F1FB; color: #0C447C; }
.cal-event-phonescreen { background: #FAEEDA; color: #633806; }
.cal-event-meeting { background: #EEEDFE; color: #3C3489; }
.cal-event-followup { background: #E1F5EE; color: #085041; }
.cal-event-other { background: var(--clr-bg-tertiary); color: var(--clr-text-secondary); }

.cal-time { font-weight: 500; margin-right: 4px; }
.cal-title { }

/* === THEME TOGGLE === */
.theme-toggle {
    margin-top: 10px;
    width: 100%;
    font-size: 12px;
    color: var(--clr-text-secondary);
    background: var(--clr-bg-secondary);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    padding: 7px 10px;
    cursor: pointer;
    font-family: var(--font);
    transition: all 0.15s;
}
.theme-toggle:hover { color: var(--clr-text); border-color: var(--clr-border-strong); }

/* === AI INSIGHT SELECTOR === */
.insight-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.insight-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--clr-border);
    border-radius: 20px;
    background: var(--clr-bg);
    font-size: 12px;
    cursor: pointer;
    font-family: var(--font);
    color: var(--clr-text-secondary);
    transition: all 0.15s;
}
.insight-chip:hover { background: var(--clr-bg-secondary); color: var(--clr-text); border-color: var(--clr-border-strong); }
.insight-chip.selected { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); }
.insight-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clr-primary);
}
.insight-chip.selected .insight-chip-dot { background: #fff; }
.insight-chip-create {
    border-style: dashed;
    color: var(--clr-primary);
    font-weight: 500;
}
.insight-chip-create:hover { color: var(--clr-primary); border-color: var(--clr-primary); }

.insight-chip-draggable { cursor: grab; }
.insight-chip-draggable:active { cursor: grabbing; }
.insight-chip.dragging { opacity: 0.4; }

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--clr-text-muted);
    padding: 2px 6px;
    margin-left: 4px;
    border-radius: var(--radius);
    vertical-align: middle;
}
.btn-icon:hover { color: var(--clr-primary); background: var(--clr-bg-secondary); }

/* === RICH TEXT EDITOR === */
.rte-wrapper {
    border: 1px solid var(--clr-border-strong);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--clr-bg);
}
.rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-bg-secondary);
}
.rte-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 13px;
    color: var(--clr-text-secondary);
    cursor: pointer;
    line-height: 1.4;
}
.rte-btn:hover { background: var(--clr-bg-tertiary); color: var(--clr-text); border-color: var(--clr-border); }
.rte-sep { width: 1px; align-self: stretch; background: var(--clr-border); margin: 2px 4px; }
.rte-editor {
    min-height: 200px;
    max-height: 380px;
    overflow-y: auto;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.6;
    outline: none;
}
.rte-editor:focus { outline: none; }
.rte-editor a { color: var(--clr-primary); }

/* === ATTACHMENTS === */
.attachments-panel { margin-top: 8px; }
.attachment-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 4px; }
.attachment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    background: var(--clr-bg);
}
.attachment-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    color: var(--clr-text);
    text-decoration: none;
}
.attachment-name:hover .attachment-text { color: var(--clr-primary); text-decoration: underline; }
.attachment-icon { flex-shrink: 0; }
.attachment-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-meta { font-size: 12px; color: var(--clr-text-muted); flex-shrink: 0; }
.attachment-del {
    background: none; border: none; cursor: pointer; flex-shrink: 0;
    color: var(--clr-text-muted); font-size: 13px; padding: 2px 4px; border-radius: 4px;
}
.attachment-del:hover { color: var(--clr-danger); background: var(--clr-bg-secondary); }
.attachment-upload {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--clr-primary); cursor: pointer;
}
.attachment-upload input[type=file] {
    width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1;
}
.attachment-upload.is-busy { color: var(--clr-text-muted); cursor: default; }
.attachment-upload > span { padding: 4px 0; }
.attachment-error { color: var(--clr-danger); font-size: 12px; margin-top: 6px; }

/* Compact variant used in the sidebar for global files */
.sidebar-attachments { padding: 8px 8px 0; border-top: 1px solid var(--clr-border); margin-top: 4px; }
.attachments-compact .attachments-head { padding: 0 4px 4px; }
.attachments-compact .attachments-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--clr-text-muted); font-weight: 600;
}
.attachments-compact .attachment-list { gap: 2px; max-height: 180px; overflow-y: auto; }
.attachments-compact .attachment-item { padding: 4px 6px; }
.attachments-compact .attachment-name { font-size: 12px; }
.attachments-compact .empty-state { font-size: 12px; padding: 2px 4px; }
.attachments-compact .attachment-upload { font-size: 12px; padding: 2px 4px; }

/* Email dialog attachment selector */
.email-attach-list {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 140px; overflow-y: auto;
    border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 6px 8px; margin-bottom: 8px;
}
.email-attach-option { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.email-attach-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-attach-scope { font-size: 11px; color: var(--clr-text-muted); flex-shrink: 0; }

/* === SMS HISTORY === */
.sms-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.sms-row { display: flex; }
.sms-row.sms-out { justify-content: flex-end; }
.sms-row.sms-in { justify-content: flex-start; }
.sms-bubble {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-border);
    background: var(--clr-bg-secondary);
}
.sms-row.sms-out .sms-bubble { background: rgba(83,74,183,0.10); border-color: rgba(83,74,183,0.25); }

/* Email thread panel */
.email-thread { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.email-card {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-bg-secondary);
    padding: 8px 12px;
}
.email-card.email-external { border-left: 3px solid #1565c0; }
.email-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; }
.email-summary::-webkit-details-marker { display: none; }
.email-subject { font-weight: 600; word-break: break-word; }
.email-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--clr-text-muted); white-space: nowrap; }
.email-status { font-weight: 600; text-transform: capitalize; }
.email-status.email-ok { color: #2e7d32; }
.email-status.email-bad { color: var(--clr-danger); }
.email-status.email-pending { color: var(--clr-text-muted); }
.email-badge { font-weight: 600; }
.email-badge-ext { color: #1565c0; }
.email-addr { margin-top: 6px; font-size: 11px; color: var(--clr-text-muted); word-break: break-word; }
.email-body { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--clr-border); font-size: 13px; word-break: break-word; overflow-x: auto; }
.email-body-text { white-space: pre-wrap; }
.email-error { margin-top: 4px; font-size: 11px; color: var(--clr-danger); }
.email-note { font-size: 11px; color: var(--clr-text-muted); margin: 4px 0 0; font-style: italic; }
.text-success { color: #2e7d32; }
.text-danger { color: var(--clr-danger); }

/* RETR snapshot panel */
.retr-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 4px;
}
.retr-tile {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-bg-secondary);
    padding: 10px 14px;
}
.retr-tile-value { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.retr-subhead { margin: 20px 0 8px; font-size: 0.95rem; }
/* "Who's capturing this book" — rival LOs + rival companies side by side, stacking when narrow. */
.rivals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rivals-grid .retr-subhead { margin-top: 8px; }
@media (max-width: 900px) { .rivals-grid { grid-template-columns: 1fr; } }
.retr-tips { margin: 6px 0; }
.retr-tips > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.retr-tips ul { margin: 4px 0 10px; padding-left: 22px; }
.retr-tips li { margin: 3px 0; line-height: 1.45; }
.retr-tip-heading { font-weight: 600; margin: 8px 0 2px; }

/* Career timeline (dossier) — vertical rail with a dot per stint. */
.career-timeline { position: relative; margin: 4px 0 2px; padding-left: 20px; }
.career-timeline::before {
    content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px;
    width: 2px; background: var(--clr-border-strong);
}
.career-stint { position: relative; padding: 0 0 16px 14px; }
.career-stint:last-child { padding-bottom: 2px; }
.career-dot {
    position: absolute; left: -20px; top: 3px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--clr-text-muted);
    box-shadow: 0 0 0 3px var(--clr-bg);
}
.career-current .career-dot { background: var(--clr-primary); }
.career-employer { font-weight: 600; }
.career-now {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 700; background: var(--clr-primary); color: #fff; vertical-align: middle;
}

/* ============================================================
   Q — home / landing page
   ============================================================ */
.q-home {
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(24px, 7vh, 90px) 16px 40px;
    text-align: center;
}
/* Today's Q Brief — the Decision Engine card beneath the search box. */
.q-brief {
    max-width: 620px; margin: 18px auto 0; padding: 16px 20px;
    background: var(--clr-bg-secondary); border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg); text-align: left;
}
.q-brief-title { font-weight: 700; margin-bottom: 10px; }
.q-brief-list { list-style: none; margin: 0; padding: 0; }
.q-brief-list li {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 7px 0; border-top: 1px solid var(--clr-border);
}
.q-brief-list li:first-child { border-top: none; }
.q-brief-list .cb-name { font-weight: 600; text-decoration: none; color: var(--clr-primary); }
.q-brief-list .cb-reason { color: var(--clr-text-secondary); font-size: 13px; flex: 1; }
.q-brief-list .cb-action {
    font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 10px;
    background: var(--clr-bg-tertiary); color: var(--clr-text); white-space: nowrap;
}
.q-brief-foot {
    margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--clr-border);
    color: var(--clr-text-secondary); font-size: 13px; display: flex; gap: 12px; flex-wrap: wrap;
}
.q-brief-more { margin-top: 8px; text-align: right; font-size: 13px; }
.q-brief-more a { text-decoration: none; color: var(--clr-primary); font-weight: 600; }

/* "Refresh suggested" badge on a stale AI insight */
.insight-stale {
    display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 10px;
    font-size: 12px; font-weight: 600; background: #fdf0d5; color: #8a5a00;
    border: 1px solid #f0d9a8; vertical-align: middle;
}
[data-theme="dark"] .insight-stale { background: #3a2e12; color: #f0c674; border-color: #5a4720; }

/* Short average job tenure — flags a frequent job-changer in the career-timeline header. */
.tenure-flag {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    font-size: 12px; font-weight: 600; background: #fdf0d5; color: #8a5a00;
    border: 1px solid #f0d9a8;
}
[data-theme="dark"] .tenure-flag { background: #3a2e12; color: #f0c674; border-color: #5a4720; }

/* Recruiting pipeline board — grid columns sized minmax(70px, 1fr): they divide the available width
   exactly so all 13 fit on one screen by default, and only when the viewport can't hold 13x70px do the
   columns hit their 70px floor and the horizontal scrollbar appear. min-width:0 lets labels wrap. */
.pipeline-board {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(70px, 1fr);
    gap: 6px; overflow-x: auto; padding: 4px 0 12px;
}
.pipeline-stage {
    min-width: 0; border: 1px solid var(--clr-border); border-radius: var(--radius);
    background: var(--clr-bg-secondary); padding: 8px 6px; text-align: center;
}
.pipeline-stage.has-candidates { border-color: var(--clr-primary); }
.pipeline-stage-name {
    font-size: 11px; font-weight: 600; color: var(--clr-text-secondary);
    min-height: 28px; line-height: 1.2; word-break: break-word;
}
.pipeline-stage-count { font-size: 20px; font-weight: 700; margin-top: 4px; }

/* Q Feed */
.feed { max-width: 720px; }
.feed-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--clr-border); }
.feed-row:first-child { border-top: none; }
.feed-icon {
    flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--clr-bg-secondary); font-size: 16px;
}
.feed-body { flex: 1; min-width: 0; }
.feed-text { line-height: 1.45; }
.feed-text a { text-decoration: none; color: var(--clr-text); }
.feed-text a:hover { text-decoration: underline; }
.feed-detail {
    color: var(--clr-text-secondary); font-size: 13px; line-height: 1.45; margin-top: 3px;
    white-space: pre-wrap; border-left: 2px solid var(--clr-border); padding-left: 10px;
}
.feed-meta { color: var(--clr-text-secondary); font-size: 12px; margin-top: 4px; }

/* Opportunities page */
.opp-scope { display: flex; gap: 6px; }
.opp-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.opp-count {
    display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 9px;
    background: var(--clr-bg-tertiary); font-size: 11px; font-weight: 700;
}

/* Inline AI-query results on the Q home page. */
.q-results-bar { max-width: 1100px; margin: 0 auto 8px; display: flex; justify-content: center; }
.q-results { max-width: 1100px; margin: 0 auto; padding: 0 4px 32px; }
.q-title {
    font-size: clamp(40px, 8vw, 72px);
    font-weight: 700;
    letter-spacing: 0.26em;
    /* nudge right to visually centre against the trailing letter-spacing */
    text-indent: 0.26em;
    color: var(--q-navy);
    line-height: 1.05;
}
.q-tagline {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--q-accent);
}
.q-search {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 640px;
    margin: 40px auto 0;
    padding: 0 22px;
    height: 64px;
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: 999px;
    box-shadow: 0 12px 34px rgba(20,35,61,0.10);
    transition: box-shadow 0.15s, border-color 0.15s;
}
.q-search:focus-within {
    border-color: var(--clr-border-strong);
    box-shadow: 0 14px 40px rgba(20,35,61,0.16);
}
.q-search-icon { display: flex; color: var(--q-accent); }
.q-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font);
    font-size: 17px;
    color: var(--clr-text);
}
.q-input::placeholder { color: var(--clr-text-muted); }
.q-mic {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--q-accent);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}
.q-mic:hover { color: var(--clr-text); background: var(--clr-bg-secondary); }
/* Only show the mic where speech recognition is usable (set pre-paint in _Host). */
html:not([data-voice="on"]) .q-mic { display: none; }
.q-mic.listening { color: var(--clr-danger); animation: q-pulse 1s ease-in-out infinite; }
@keyframes q-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.q-voice-msg { margin-top: 12px; font-size: 13px; color: var(--clr-text-secondary); }
.q-suggest { margin-top: 34px; }
.q-help-link { text-align: center; margin-top: 18px; font-size: 13px; }
.q-help-link a { color: var(--clr-text-muted); text-decoration: none; }
.q-help-link a:hover { color: var(--clr-primary); text-decoration: underline; }
.q-suggest-label {
    font-size: 12px;
    color: var(--clr-text-muted);
    margin-bottom: 14px;
}
.q-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.q-chip {
    border: 1px solid var(--clr-border);
    background: var(--clr-bg);
    border-radius: 999px;
    padding: 9px 18px;
    font-family: var(--font);
    font-size: 13px;
    color: var(--clr-text-secondary);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(20,35,61,0.06);
    transition: all 0.15s;
}
.q-chip:hover {
    border-color: var(--clr-border-strong);
    color: var(--clr-text);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(20,35,61,0.12);
}

.q-divider {
    position: relative;
    height: 1px;
    background: var(--clr-border);
    max-width: 460px;
    margin: 60px auto 22px;
}
.q-quote-mark {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--clr-bg);
    padding: 0 16px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 46px;
    line-height: 1;
    color: var(--q-accent);
}
.q-quote { color: var(--clr-text-secondary); font-size: 15px; line-height: 1.7; }
.q-quote-sign { font-style: italic; font-weight: 600; color: var(--clr-text); margin-top: 2px; }

/* The landing page reads better against the flat base background than the tinted secondary. */
[data-theme="dark"] .q-search { background: var(--clr-bg-secondary); box-shadow: 0 10px 28px rgba(0,0,0,0.45); }
[data-theme="dark"] .q-chip { background: var(--clr-bg-secondary); box-shadow: 0 4px 14px rgba(0,0,0,0.30); }
[data-theme="dark"] .q-quote-mark { background: var(--clr-bg); }

.sms-body { white-space: pre-wrap; word-break: break-word; }
.sms-meta { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: 11px; color: var(--clr-text-muted); }
.sms-status { font-weight: 600; text-transform: capitalize; }
.sms-status.sms-ok { color: #2e7d32; }
.sms-status.sms-bad { color: var(--clr-danger); }
.sms-status.sms-pending { color: var(--clr-text-muted); }
.sms-in-badge { color: #1565c0; }
.sms-error { margin-top: 4px; font-size: 11px; color: var(--clr-danger); }

.attachments-title-link { text-decoration: none; }
.attachments-title-link:hover { color: var(--clr-primary); }

/* === FILES PAGE === */
.files-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
    align-items: start;
}
.files-list-pane { display: flex; flex-direction: column; gap: 10px; }
.files-list-pane .search-input { width: 100%; }
.files-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.files-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: var(--radius);
    cursor: pointer; border: 1px solid transparent;
}
.files-row:hover { background: var(--clr-bg-secondary); }
.files-row.is-selected { background: var(--clr-bg-tertiary); border-color: var(--clr-border); }
.files-row-main { display: flex; flex-direction: column; min-width: 0; }
.files-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-row-meta { font-size: 11px; color: var(--clr-text-muted); }

.files-preview-pane {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-bg);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    /* Follow the page as it scrolls so the preview stays visible after a file is clicked.
       align-self:start keeps the pane its natural height (not stretched) so sticky engages;
       max-height + overflow lets a tall preview scroll inside the pinned pane. */
    position: sticky;
    top: 16px;
    align-self: start;
    max-height: calc(100vh - 32px);
    overflow: auto;
}
.files-detail-head { padding: 14px 16px; border-bottom: 1px solid var(--clr-border); }
.rename-row { display: flex; gap: 8px; align-items: center; }
.rename-row .form-control { flex: 1; }
.files-detail-meta { font-size: 12px; color: var(--clr-text-muted); margin-top: 8px; }
.files-detail-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.files-preview-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; min-height: 320px; }
.files-preview-img { max-width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--radius); }
.files-preview-frame { width: 100%; height: 60vh; border: none; }
.files-preview-empty { text-align: center; color: var(--clr-text-muted); }

.btn.is-busy { opacity: 0.7; pointer-events: none; }

.list-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }

/* === RECENTLY VIEWED === */
.recent-views { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.recent-chip {
    display: inline-flex; flex-direction: column; gap: 1px;
    padding: 6px 12px; border: 1px solid var(--clr-border); border-radius: var(--radius);
    background: var(--clr-bg); text-decoration: none; color: var(--clr-text);
}
.recent-chip:hover { border-color: var(--clr-primary); background: var(--clr-bg-secondary); }
.recent-type { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--clr-text-muted); }
.recent-name { font-size: 13px; font-weight: 500; }

/* === TYPEAHEAD === */
.typeahead-results {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    margin-top: 4px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--clr-bg);
}
.typeahead-item { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--clr-border); }
.typeahead-item:last-child { border-bottom: none; }
.typeahead-item:hover { background: var(--clr-bg-secondary); }
.typeahead-item.muted { color: var(--clr-text-muted); cursor: default; }
.typeahead-item.muted:hover { background: none; }
.typeahead-selected {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border: 1px solid var(--clr-border-strong); border-radius: var(--radius);
    background: var(--clr-bg-secondary);
}

@media (max-width: 720px) {
    .files-grid { grid-template-columns: 1fr; }
    /* Single-column on mobile: don't pin the preview on top of the file list. */
    .files-preview-pane { position: static; max-height: none; }
}

/* ===================== Live visitor map ===================== */
.vstats { display: flex; gap: 16px; flex-wrap: wrap; margin: 4px 0 22px; }
.vstat { background: var(--clr-bg-secondary); border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 14px 22px; display: flex; flex-direction: column; color: var(--clr-text-secondary); font-size: .85rem; }
.vstat span { font-size: 1.7rem; font-weight: 800; color: var(--clr-text); line-height: 1.1; }

.visitor-map { position: relative; width: 100%; max-width: 75%; min-width: 360px; aspect-ratio: 2 / 1; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--clr-border); background: #0a1622; }
.visitor-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visitor-map__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #cfe0f5; font-weight: 600; letter-spacing: .03em; background: rgba(8,16,28,.35); }

.vping { position: absolute; width: 0; height: 0; transform: translate(-50%, -50%); z-index: 2; }
.vping__dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #ff3b3b; border: 2px solid #fff; box-shadow: 0 0 10px 3px rgba(255,59,59,.9); }
.vping__ring { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,59,59,.55); animation: vping-pulse 1.8s ease-out infinite; }
@keyframes vping-pulse {
    0% { transform: scale(1); opacity: .8; }
    100% { transform: scale(5); opacity: 0; }
}
/* Label sits permanently next to the dot so a connection is never missed on the map. */
.vping__tip { position: absolute; left: 13px; top: -9px; white-space: nowrap; background: rgba(10,18,30,.9); color: #eaf2fb; font-size: .72rem; font-weight: 600; padding: 2px 7px; border-radius: 4px; pointer-events: none; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.vping:hover { z-index: 5; }

.vtable td:first-child { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9rem; }
@media (max-width: 600px) { .vping__dot, .vping__ring { width: 11px; height: 11px; left: -5px; top: -5px; } }

/* --- "Ready to move" signal chips (candidate Intelligence panel) --- */
.move-signals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.signal-chip { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; border: 1px solid var(--clr-border); }
.signal-bad { background: var(--clr-danger-bg); color: var(--clr-danger); }
.signal-good { background: var(--clr-success-bg); color: var(--clr-success); }
.signal-neutral { background: var(--clr-bg-tertiary); color: var(--clr-text-secondary); }

/* --- Team composition / gap flags / retention watch (lender & company pages) --- */
.mix-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.mix-row { display: grid; grid-template-columns: 130px 1fr 64px; align-items: center; gap: 10px; font-size: 13px; color: var(--clr-text); }
.mix-track { background: var(--clr-bg-tertiary); border-radius: 6px; height: 14px; overflow: hidden; }
.mix-fill { height: 100%; background: var(--clr-primary); border-radius: 6px; }
.mix-fill.mix-purchase { background: var(--clr-success); }
.mix-fill.mix-refi { background: #e67e22; }
.gap-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gap-flag { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; background: var(--clr-warn-bg); color: var(--clr-warn); border: 1px solid var(--clr-border); }
.gap-flag.gap-strength { background: var(--clr-success-bg); color: var(--clr-success); }

/* --- Comp scenario calculator --- */
.comp-calc { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: start; }
.comp-inputs label { display: block; font-size: 12px; color: var(--clr-text-secondary); margin-top: 8px; font-weight: 600; }
.comp-inputs .form-control { max-width: 170px; }
.comp-results { background: var(--clr-bg-secondary); border: 1px solid var(--clr-border); border-radius: 8px; padding: 14px; color: var(--clr-text); }
.comp-results .comp-headline { font-size: 24px; font-weight: 700; }
.comp-line { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--clr-border); font-size: 14px; color: var(--clr-text); }
.comp-line:last-child { border-bottom: none; }
.comp-neg { color: var(--clr-danger); }
.comp-pos { color: var(--clr-success); }

/* --- Licensing & transfer readiness (late-stage pipeline) --- */
.license-ready { border-left: 4px solid var(--clr-success); }
.license-warn { border-left: 4px solid #e67e22; }
.license-states { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.license-state { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; background: var(--clr-success-bg); color: var(--clr-success); }
.license-state.license-state-inactive { background: var(--clr-danger-bg); color: var(--clr-danger); }

/* --- Market Intelligence: choropleth map + dashboard --- */
/* .dash-panel carries no vertical margin, so stacked panels butt together. The Geography panel is the one
   place that reads wrong: the map's legend sits flush against the panel below it and looks like that panel's
   caption. Space it off both neighbours on the same 24px rhythm the dashboard rows use. */
.map-panel { margin: 24px 0; }
.map-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.map-panel-head h2 { margin: 0; }
.map-metric { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--clr-text-secondary); }
.map-metric select { width: auto; min-width: 170px; }

.market-map { display: grid; grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr); gap: 16px; align-items: stretch; max-width: 70%; }
/* Pinning a state adds the metro drill-down as a third column; the map needs the full width back to keep it
   from being squeezed to a sliver. */
.market-map.has-metros { grid-template-columns: minmax(0, 2fr) minmax(190px, 1fr) minmax(190px, 1fr); max-width: none; }
/* The jobs map gains and loses that third column every time a state is picked, so it reserves all three
   tracks up front and keeps them whether or not a state is selected. Sizing the grid off the content instead
   made the choropleth grow ~6% on click and shrink back on clear — a jarring jump right under the cursor.
   The third track simply sits empty until a state is selected. */
.market-map.jobs-map { grid-template-columns: minmax(0, 2fr) minmax(190px, 1fr) minmax(190px, 1fr); max-width: none; }
.market-map-canvas { min-width: 0; }
.market-map-canvas svg { width: 100%; height: auto; display: block; }
@media (max-width: 1100px) { .market-map.has-metros, .market-map.jobs-map { grid-template-columns: minmax(0, 1fr) minmax(190px, 1fr); } }
@media (max-width: 820px) { .market-map, .market-map.has-metros, .market-map.jobs-map { grid-template-columns: 1fr; max-width: none; } }

.us-state { stroke: var(--clr-bg); stroke-width: 0.75; cursor: pointer; transition: fill .15s ease, opacity .15s ease; }
.us-state:hover { opacity: .82; stroke: var(--clr-text); stroke-width: 1.25; }
/* No value for the selected metric (e.g. 0 movable): outline only, so only states with action stand out. */
.us-state.nodata { fill: transparent; stroke: var(--clr-border); stroke-width: 0.75; }
.us-state.nodata:hover { opacity: 1; stroke: var(--clr-text-muted); stroke-width: 1; }
.us-state.b1 { fill: #3a4f8c; }
.us-state.b2 { fill: #7168d6; }
.us-state.b3 { fill: #b9b2ff; }

.market-map-panel { border: 1px solid var(--clr-border); border-radius: var(--radius); background: var(--clr-bg-secondary); padding: 16px; display: flex; flex-direction: column; }
/* "Color by" selector pinned above the state-details content, inside the map's side panel. */
.mmp-metric { flex-direction: column; align-items: stretch; gap: 5px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--clr-border); }
.mmp-metric select { width: 100%; min-width: 0; }
.mmp-title { font-size: 16px; font-weight: 600; color: var(--clr-text); margin-bottom: 12px; }
.mmp-empty { color: var(--clr-text-muted); font-size: 13px; margin: auto 0; text-align: center; }
.mmp-stat.mmp-primary { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--clr-border); }
.mmp-primary .mmp-value { font-size: 26px; font-weight: 700; color: var(--clr-text); }
.mmp-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--clr-text-muted); }
.mmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mmp-grid > div { display: flex; flex-direction: column; gap: 2px; }
.mmp-grid > div span:not(.mmp-label) { font-size: 15px; font-weight: 600; color: var(--clr-text); }
.mmp-move { color: var(--clr-success) !important; }
.mmp-open { margin-top: auto; width: 100%; }

/* Metro (CBSA) drill-down: a third column beside the state details, holding the pinned state redrawn on its own
   with a circle per metro sized by listing count. Same markup as /listings-map's zoom, restyled onto the ATS
   tokens (that page's fillability.css is scoped to .fx-scope and cannot reach here). */
.market-map-metros { min-width: 0; }
.zoom-canvas { margin-top: 6px; padding: 6px; border: 1px solid var(--clr-border); border-radius: var(--radius); background: var(--clr-bg); }
.zoom-canvas svg { width: 100%; height: auto; display: block; max-height: 300px; }
.zoom-state { fill: var(--clr-bg-tertiary); stroke: var(--clr-border-strong); stroke-width: 0.6; }
.us-metro { fill: var(--clr-primary); fill-opacity: .5; stroke: var(--clr-primary); cursor: pointer; transition: fill-opacity .12s ease; }
.us-metro:hover { fill-opacity: .85; }
.us-metro.selected { fill: var(--clr-gold); stroke: var(--clr-gold); fill-opacity: .85; }
/* paint-order puts the halo behind the glyph, so a label stays readable over a circle it overlaps. */
.us-metro-label { fill: var(--clr-text); text-anchor: middle; pointer-events: none; font-weight: 600;
    paint-order: stroke; stroke: var(--clr-bg); stroke-width: 2.4px; stroke-linejoin: round; }

/* Fills whatever height the map column gives the row, and scrolls inside rather than stretching the panel. */
.mmp-metros { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 90px; overflow-y: auto; margin: 10px -4px 0; padding: 0 4px; }
.metro-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    text-align: left; font: inherit; color: var(--clr-text); cursor: pointer; background: none; border: 0;
    border-radius: 6px; padding: 5px 8px; }
.metro-row:hover { background: var(--clr-bg-tertiary); }
.metro-row.active { background: var(--clr-gold-bg); color: var(--clr-gold); }
.metro-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metro-noloc { color: var(--clr-text-muted); }
.metro-count { font-size: 12px; font-weight: 600; color: var(--clr-text-muted); flex-shrink: 0; }
.metro-row.active .metro-count { color: var(--clr-gold); }
.mmp-note { margin-top: 8px; font-size: 11px; color: var(--clr-text-muted); }

.market-map-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--clr-text-secondary); }
.market-map-legend .lg { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; }
.market-map-legend .lg-scale { display: inline-flex; align-items: center; gap: 3px; }
.market-map-legend .lg-scale .lg { margin-right: 0; width: 15px; height: 11px; border-radius: 2px; }
.lg-nodata { background: transparent; border: 1px solid var(--clr-border); }
.lg-b1 { background: #3a4f8c; }
.lg-b2 { background: #7168d6; }
.lg-b3 { background: #b9b2ff; }

.pill-move { display: inline-block; min-width: 22px; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; background: var(--clr-success-bg); color: var(--clr-success); }

/* ===================== Reconnect dialog =====================
   Styles the custom reconnect UI declared in _Host.cshtml. Blazor's built-in version is unusable in
   dark mode: it builds the dialog inside a shadow root with `background-color: white` and no colour of
   its own, so the text inherits the page's light --clr-text and comes out pale grey on white — and the
   shadow boundary means no rule here could have fixed it. Declaring an element with the id Blazor looks
   for (components-reconnect-modal) makes it drive that markup instead, in the light DOM where the
   palette applies. Blazor only toggles the components-reconnect-* state classes below; opening/closing
   the <dialog> and the button wiring are in js/app.js. */
#components-reconnect-modal {
    width: 21rem;
    max-width: calc(100vw - 32px);
    margin: 20vh auto;
    padding: 26px 24px;
    border: 1px solid var(--clr-border-strong);
    border-radius: var(--radius-lg);
    background: var(--clr-bg-secondary);
    color: var(--clr-text);
    font-family: var(--font);
    font-size: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
#components-reconnect-modal::backdrop { background: rgba(3, 7, 14, 0.62); }

.reconnect-body { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.reconnect-body p { margin: 0; text-align: center; line-height: 1.5; }
.reconnect-body .rc-sub { color: var(--clr-text-secondary); font-size: 13px; }
#components-seconds-to-next-attempt { font-weight: 600; color: var(--clr-text); }

/* Everything starts hidden; each state class reveals its own line (and button). */
.reconnect-body .rc-msg, .reconnect-body .rc-btn, .reconnect-spinner { display: none; }
#components-reconnect-modal.components-reconnect-show .rc-show,
#components-reconnect-modal.components-reconnect-retrying .rc-retry,
#components-reconnect-modal.components-reconnect-failed .rc-failed,
#components-reconnect-modal.components-reconnect-paused .rc-paused,
#components-reconnect-modal.components-reconnect-resume-failed .rc-resume-failed { display: block; }
#components-reconnect-modal.components-reconnect-failed #components-reconnect-button,
#components-reconnect-modal.components-reconnect-paused #components-resume-button,
#components-reconnect-modal.components-reconnect-resume-failed #components-resume-button { display: inline-flex; }
/* Retrying keeps the `show` class, so the countdown line has to explicitly replace the opening one. */
#components-reconnect-modal.components-reconnect-retrying .rc-show { display: none; }
#components-reconnect-modal.components-reconnect-show .reconnect-spinner,
#components-reconnect-modal.components-reconnect-retrying .reconnect-spinner { display: block; }

/* Expanding rings, same idea as Blazor's own animation but drawn in the theme's accent. */
.reconnect-spinner { position: relative; width: 64px; height: 64px; }
.reconnect-spinner div {
    position: absolute; border: 3px solid var(--clr-primary); border-radius: 50%; opacity: 1;
    animation: reconnect-ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.reconnect-spinner div:nth-child(2) { animation-delay: -0.5s; }
@keyframes reconnect-ripple {
    0%, 4.9% { top: 32px; left: 32px; width: 0; height: 0; opacity: 0; }
    5%       { top: 32px; left: 32px; width: 0; height: 0; opacity: 1; }
    100%     { top: 0; left: 0; width: 64px; height: 64px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .reconnect-spinner div { animation-duration: 3s; }
}

/* ===================== Public documents on the LandingLayout backdrop =====================
   /privacy, /terms, /sms-terms and /methodology: a readable light card over the navy particle
   backdrop. These rules used to be a <style> block copied into each page, which made them
   invisible infrastructure — /methodology shipped without a copy and rendered as a blank
   backdrop, because an unstyled .legal-root is a static box and LandingLayout's .landing-bg is
   `position: fixed; z-index: 0`, so the gradient paints straight over the whole document. The
   `position/z-index` pair below is what lifts the text above it, and it lives here, once, so the
   next page to use this markup gets it by existing. */
.legal-root {
    position: fixed; inset: 0; z-index: 1; overflow: auto;
    display: flex; justify-content: center;
    padding: 40px 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.legal-card {
    width: 100%; max-width: 760px; height: fit-content;
    background: #fff; color: #1e2a37;
    border-radius: 16px; padding: 40px 44px;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.65);
    line-height: 1.6; font-size: 15px;
}
.legal-back { display: inline-block; margin-bottom: 18px; color: #2563eb; text-decoration: none; font-size: 13.5px; font-weight: 600; }
.legal-back:hover { text-decoration: underline; }
.legal-card h1 { margin: 0 0 4px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: #0B1F33; }
.legal-eff { margin: 0 0 22px; color: #667; font-size: 13.5px; }
.legal-card h2 { margin: 28px 0 8px; font-size: 18px; font-weight: 700; color: #0B1F33; }
.legal-card p { margin: 0 0 12px; }
.legal-card ul { margin: 0 0 12px; padding-left: 20px; }
.legal-card li { margin-bottom: 6px; }
.legal-card a { color: #2563eb; }
.legal-callout {
    padding: 12px 16px; border-radius: 10px; background: #eef4ff; border: 1px solid #cfe0ff;
    font-weight: 600; color: #10306b;
}
.legal-foot { margin-top: 28px; padding-top: 16px; border-top: 1px solid #eceff3; color: #889; font-size: 12.5px; }
@media (max-width: 560px) { .legal-card { padding: 28px 22px; } }