/* Office — panel-wide navy chrome (v1).
   The Desk carried this palette alone; this file applies it to every screen so the app reads
   as one product: Dashboard, Inbox, card view, Benchmarks. Loaded after office-theme/polish. */

.fi-body {
    background:
        radial-gradient(1100px 480px at 50% -180px, rgba(56, 84, 148, .20), transparent 70%),
        #070b15 !important;
}

.fi-sidebar,
.fi-sidebar-header {
    background: rgba(7, 11, 21, .75) !important;
}

.fi-topbar nav {
    background: rgba(7, 11, 21, .75) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .1);
}

.fi-main {
    max-width: 1280px !important;
}

/* Surfaces — SUPERSEDED by the v6 token layer at the foot of this file, which replaces the
   18px/2px/gradient card treatment with flat panels, 1px structural rules and a 4px radius.
   Left here (not deleted) because v6 overrides it by cascade order; if v6 is ever removed the
   app falls back to a coherent look rather than to unstyled Filament. */
.fi-section,
.fi-ta-ctn,
.fi-wi-widget > div {
    background: linear-gradient(180deg, rgba(148, 163, 184, .05), rgba(148, 163, 184, .02)) !important;
    border: 2px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
}

/* Compact tables — the Inbox was wrapping titles over ten lines in a cramped grid. */
.fi-ta-cell {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

.fi-ta-text {
    font-size: .8125rem;
}

.fi-ta-header-cell {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Page headings a notch smaller and tighter, like the prototype. */
.fi-header-heading {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    letter-spacing: -.2px;
}

.fi-header-subheading {
    font-size: .85rem !important;
    color: #a8b3c7 !important;
}

/* v2 -- thicker headlines, clearer characters */
.fi-ta-text, .fi-ta-cell { color: #d6deea; }
.fi-sidebar-item-label { font-weight: 700; color: #e6ebf3 !important; }
.fi-ta-header-cell { color: #aab6c9 !important; font-weight: 800; }

/* v3 -- the kanban pulse strip is the dashboard header; hide Filament's.
   v4 (19 Jul): this never matched. The live DOM class is `fi-dashboard-page`, not
   `fi-page-dashboard` — the words are the other way round, so the heading came back.
   Verified against the rendered page, not guessed: root is `<div class="fi-page fi-dashboard-page">`.
   Both spellings are kept so a Filament version that uses either stays covered. */
.fi-page-dashboard .fi-header,
.fi-dashboard-page .fi-header { display: none !important; }

/* ============================================================================
   v5 (19 Jul) -- the console shell: sidebar section headers + topbar heartbeat.
   Class names taken from Filament v3.3.54's own blades
   (components/sidebar/group.blade.php, item.blade.php), NOT guessed — the v4
   dashboard-heading bug was a guessed selector and cost a round trip.
   ============================================================================ */

/* -- COMMAND / RECORDS section headers -------------------------------------- */
.fi-sidebar-group-label {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8291a9 !important;
    line-height: 1.4 !important;
}

/* Air between sections, none above the first — the sidebar should read as two
   blocks, not four items with gaps. */
.fi-sidebar-group + .fi-sidebar-group { margin-top: 18px; }

/* The header is a label here, not a control: 4 items need no accordions. */
.fi-sidebar-group-button { padding-bottom: 2px !important; cursor: default; }
.fi-sidebar-group-collapse-button { display: none !important; }

/* -- active item: an amber bar you can find without reading ----------------- */
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-active > .fi-sidebar-item-button {
    position: relative;
    background: rgba(251, 191, 36, .09) !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-button::before,
.fi-sidebar-item-active > .fi-sidebar-item-button::before {
    content: '';
    position: absolute;
    left: -6px; top: 6px; bottom: 6px;
    width: 3px; border-radius: 3px;
    background: #fbbf24;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-label { color: #fff !important; }

/* -- topbar heartbeat ------------------------------------------------------
   Lives INSIDE the existing bar: no padding, no min-height, nothing that can make
   the topbar taller. One line, never wraps. Hidden under 1024px where there is no room. */
.ofc-heartbeat {
    display: inline-flex; align-items: center; gap: 7px;
    margin-inline-start: 14px;
    white-space: nowrap; line-height: 1;
}
.ofc-heartbeat .ofc-dot {
    width: 7px; height: 7px; border-radius: 99px; flex-shrink: 0;
}
.ofc-heartbeat .ofc-label {
    font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.ofc-heartbeat .ofc-age {
    font-size: 11px; color: #64748b; letter-spacing: .01em;
}
.ofc-green .ofc-dot { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.14); animation: ofc-pulse 2.4s ease-in-out infinite; }
.ofc-green .ofc-label { color: #4ade80; }
.ofc-amber .ofc-dot { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.14); }
.ofc-amber .ofc-label { color: #fbbf24; }
.ofc-red   .ofc-dot { background: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.16); }
.ofc-red   .ofc-label { color: #f87171; }

@keyframes ofc-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}
/* A pulsing dot is decoration; respect people who switch that off. */
@media (prefers-reduced-motion: reduce) {
    .ofc-green .ofc-dot { animation: none; }
}
@media (max-width: 1023px) {
    .ofc-heartbeat { display: none; }
}

/* ============================================================================
   v6 (19 Jul) -- THE TOKEN LAYER. One design system for every Office screen.

   The brief: "generalize for all the office". Until now the Desk carried a hand-tuned
   look and the other pages inherited a rough approximation of it. This block makes the
   system explicit — tokens first, then Filament's own chrome mapped onto them — so
   Dashboard, Desk, Inbox, Benchmarks and the card view are the same product.

   What changed from v1-v5 and WHY, so nobody "restores" it later:
     - radius 18px -> 4px. 18px everywhere reads consumer-app; 4px reads instrument.
     - borders 2px + gradient fills -> 1px structural rules on a flat panel. Chrome
       should not compete with the semantic colours.
     - colour is rationed: amber = your move, red = at risk, green = confirmed. Nothing
       else is coloured. Decorative gradients are gone.
     - tabular numerals everywhere. This is a trading desk; the money column has to line
       up down the page or it cannot be scanned.
   ============================================================================ */

:root {
    /* ground */
    --ofc-bg:      #070b15;
    --ofc-panel:   #0b1220;
    --ofc-sunk:    #060a12;

    /* structure — rules, never decoration */
    --ofc-rule:      #182338;
    --ofc-rule-soft: #111b2c;

    /* ink — these are the impeccable-design skill's contrast-verified greys, not new ones.
       20 Jul: the v6 first cut invented #6d7c94 (4.65:1) and #4a5975 (2.79:1) on #070b15.
       #4a5975 was WORSE than the #64748b the system had already banned for failing 4.5:1,
       and it was carrying the smallest text in the app — tile keys, facts, PFI numbers.
       Eyeballing a grey on navy does not work; every one of these is computed. */
    --ofc-ink:   #f2f5fa;   /* 18.0:1 — titles, key numbers */
    --ofc-mid:   #c3ccdb;   /* 12.0:1 — secondary body */
    --ofc-mute:  #a5b1c5;   /*  9.1:1 — captions, facts */
    --ofc-faint: #8291a9;   /*  6.2:1 — labels, metadata. THE FLOOR. Nothing dimmer ships. */

    /* semantic — the ONLY colours in the app */
    --ofc-act:  #fbbf24;   /* your move */
    --ofc-risk: #f0616d;   /* at risk / late */
    --ofc-ok:   #3ddc97;   /* confirmed */
    --ofc-cool: #5b9df9;   /* waiting on someone else */

    --ofc-r:      4px;     /* the radius. One value. */
    --ofc-r-pill: 3px;     /* chips are clipped rectangles, not pills */
}

/* -- ground: flat. The v1 radial glow was atmosphere; atmosphere competes with data. -- */
.fi-body {
    background: var(--ofc-bg) !important;
    font-variant-numeric: tabular-nums;
}

.fi-sidebar,
.fi-sidebar-header { background: var(--ofc-sunk) !important; }

.fi-topbar nav {
    background: var(--ofc-sunk) !important;
    border-bottom: 1px solid var(--ofc-rule) !important;
}

/* -- surfaces ------------------------------------------------------------- */
.fi-section,
.fi-ta-ctn,
.fi-wi-widget > div,
.fi-modal-window {
    background: var(--ofc-panel) !important;
    border: 1px solid var(--ofc-rule) !important;
    border-radius: var(--ofc-r) !important;
    box-shadow: none !important;
}

.fi-section-header,
.fi-section-content { border-radius: 0 !important; }

/* -- tables: the Inbox and Benchmarks are ledgers too ---------------------- */
.fi-ta-header-cell {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase;
    color: var(--ofc-faint) !important;
    background: var(--ofc-sunk) !important;
}

.fi-ta-row { border-bottom: 1px solid var(--ofc-rule-soft); }
.fi-ta-row:hover { background: rgba(148, 163, 184, .035) !important; }

.fi-ta-cell {
    padding-top: .45rem !important;
    padding-bottom: .45rem !important;
}

.fi-ta-text {
    font-size: .8125rem;
    color: var(--ofc-mid) !important;
    font-variant-numeric: tabular-nums;
}

/* -- controls: same radius as everything else ------------------------------ */
.fi-btn,
.fi-input,
.fi-select,
.fi-input-wrp,
.fi-fo-field-wrp .fi-input-wrp { border-radius: var(--ofc-r) !important; }

.fi-btn { font-weight: 700 !important; letter-spacing: .01em; }

.fi-input-wrp {
    background: var(--ofc-sunk) !important;
    border: 1px solid var(--ofc-rule) !important;
    box-shadow: none !important;
}

/* -- badges: clipped rectangles, and only ever semantic -------------------- */
.fi-badge {
    border-radius: var(--ofc-r-pill) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
}

/* -- type scale ------------------------------------------------------------ */
.fi-header-heading {
    font-size: 1.3rem !important;
    font-weight: 850 !important;
    letter-spacing: -.02em;
    color: var(--ofc-ink) !important;
}

.fi-header-subheading {
    font-size: .8125rem !important;
    color: var(--ofc-mute) !important;
}

/* Every figure in the app is tabular. Money that does not line up cannot be scanned. */
.fi-ta-cell, .fi-in-text, .fi-wi-stats-overview-stat-value { font-variant-numeric: tabular-nums; }

/* -- sidebar, retuned to the flatter language (v5 built it; v6 only restyles) -- */
.fi-sidebar-group-label { color: var(--ofc-faint) !important; letter-spacing: .14em !important; }
.fi-sidebar-item-button { border-radius: var(--ofc-r) !important; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-active > .fi-sidebar-item-button { background: rgba(251, 191, 36, .09) !important; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-button::before,
.fi-sidebar-item-active > .fi-sidebar-item-button::before { border-radius: 0 3px 3px 0; }

/* -- heartbeat: same cluster, new palette ---------------------------------- */
.ofc-green .ofc-dot { background: var(--ofc-ok); box-shadow: 0 0 0 3px rgba(61, 220, 151, .14); }
.ofc-green .ofc-label { color: var(--ofc-ok); }
.ofc-amber .ofc-dot { background: var(--ofc-act); }
.ofc-amber .ofc-label { color: var(--ofc-act); }
.ofc-red   .ofc-dot { background: var(--ofc-risk); box-shadow: 0 0 0 3px rgba(240, 97, 109, .16); }
.ofc-red   .ofc-label { color: var(--ofc-risk); }
.ofc-heartbeat .ofc-age { color: var(--ofc-mute); }