@import url('https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap');

/* ══════════════════════════════════════════════════════════
   FieldTaskora Dashboard  —  Dark Design System
   ══════════════════════════════════════════════════════════ */
:root {
    /* ── Page surfaces ──────────────────────────────────── */
    --ft-bg:            #070f1e;
    --ft-bg-raised:     #0a1529;
    --ft-surface:       #0d1a30;
    --ft-surface-2:     #112038;
    --ft-surface-3:     #162744;
    --ft-border:        rgba(255,255,255,.07);
    --ft-border-soft:   rgba(255,255,255,.04);
    --ft-border-strong: rgba(255,255,255,.13);

    /* ── Text ───────────────────────────────────────────── */
    /* AB#468: muted/faint lightened to meet WCAG AA in dark mode (was #5d7aab ~3.9:1 and
       #2d4a6e ~1.9:1 on the surface — unreadable in sun/field use). */
    --ft-text:          #dde8ff;
    --ft-text-muted:    #6885b2;
    --ft-text-faint:    #587a9e;

    /* ── Legacy aliases (used in older Razor inline styles) */
    --ft-navy:          #dde8ff;   /* repurposed as primary text in dark mode */
    --ft-navy-mid:      #0d1a30;
    --ft-navy-light:    #162744;
    --ft-gray-50:       #0a1529;
    --ft-gray-100:      #0d1a30;
    --ft-gray-200:      rgba(255,255,255,.07);
    --ft-gray-500:      #5d7aab;
    --ft-gray-700:      #8fafd8;
    --ft-gray-900:      #dde8ff;

    /* ── Brand ──────────────────────────────────────────── */
    --ft-orange:        #ff7c30;
    --ft-orange-hover:  #ff6318;
    --ft-orange-100:    rgba(255,124,48,.12);
    --ft-orange-200:    rgba(255,124,48,.22);
    /* Accent aliases referenced across Razor inline styles (AB#189) */
    --ft-accent:        #ff7c30;
    --ft-primary:       #ff7c30;

    /* ── Status ─────────────────────────────────────────── */
    --ft-green:         #00d685;
    --ft-green-bg:      rgba(0,214,133,.1);
    --ft-green-text:    #00d685;
    --ft-red:           #ff4f5a;
    --ft-red-bg:        rgba(255,79,90,.1);
    --ft-red-text:      #ff6e77;
    --ft-amber:         #ffb820;
    --ft-amber-bg:      rgba(255,184,32,.1);
    --ft-amber-text:    #ffb820;
    --ft-blue:          #4da6ff;
    --ft-blue-bg:       rgba(77,166,255,.1);
    --ft-blue-text:     #4da6ff;
    --ft-teal:          #00c8b8;
    --ft-teal-bg:       rgba(0,200,184,.1);
    --ft-teal-text:     #00c8b8;
    --ft-purple:        #b794f6;
    --ft-purple-bg:     rgba(167,139,250,.12);
    --ft-purple-text:   #b794f6;

    /* ── Layout ─────────────────────────────────────────── */
    --ft-sidebar-w:  240px;
    --ft-radius-sm:  6px;
    --ft-radius:     10px;
    --ft-radius-lg:  16px;

    /* ── Shadows ────────────────────────────────────────── */
    --ft-shadow-xs:  0 1px 3px rgba(0,0,0,.5);
    --ft-shadow-sm:  0 2px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
    --ft-shadow:     0 8px 28px rgba(0,0,0,.65);
    --ft-shadow-md:  0 16px 48px rgba(0,0,0,.7);
}

/* ══════════════════════════════════════════════════════════
   Light theme (user settings AB#189) — tokens aligned to the
   marketing SPA (accent #2D6BE4 on #F4F6F9, white cards).
   Also the high-brightness mode for outdoor use (UX review R7).
   ══════════════════════════════════════════════════════════ */
html[data-theme="light"] {
    --ft-bg:            #dce3ee;   /* #597: tinted canvas so white cards pop (was #f4f6f9 = near-white) */
    /* AB#1084 — the brand kit carries TWO light systems, and this app uses the second one:
         --ft-bg / --ft-border      = marketing + pre-login surfaces (#f4f6f9 / #e4e8ee)
         --ft-page-bg / --ft-card-border = the in-app light surface (#dce3ee / #afbdd1)
       The app assigns the in-app values to the marketing NAMES, which is why a designer
       specifying --ft-bg from the kit gets a shade the product does not use. Aliased rather
       than renamed: renaming would touch every rule for no visual gain, whereas this makes
       the kit's own names resolve correctly in-app. Both spellings, one colour. */
    --ft-page-bg:       #dce3ee;
    --ft-card-border:   #afbdd1;
    --ft-bg-raised:     #ffffff;
    --ft-surface:       #ffffff;
    --ft-surface-2:     #f1f4f9;   /* inset well — inputs, search, list rows inside a card */
    --ft-surface-3:     #e6ebf2;
    --ft-border:        #afbdd1;   /* #597: strong navy-tinted card border — visible at a glance (was #e4e8ee) */
    --ft-border-soft:   #dfe4ec;
    --ft-border-strong: #c3ccd9;

    --ft-text:          #0d1b2a;
    --ft-text-muted:    #4a5868;
    /* AB#468: darkened from #7a8696 (~3.4:1 on white — failed AA) to clear 4.5:1. */
    --ft-text-faint:    #656f7e;

    --ft-navy:          #0d1b2a;
    --ft-navy-mid:      #ffffff;
    --ft-navy-light:    #e9edf3;
    --ft-gray-50:       #f4f6f9;
    --ft-gray-100:      #ffffff;
    --ft-gray-200:      #e4e8ee;
    --ft-gray-500:      #4a5868;
    --ft-gray-700:      #1b2a3f;
    --ft-gray-900:      #0d1b2a;

    /* Accent shifts to the marketing brand blue in light mode */
    --ft-orange:        #2d6be4;
    --ft-orange-hover:  #1f5bd0;
    --ft-orange-100:    rgba(45,107,228,.10);
    --ft-orange-200:    rgba(45,107,228,.18);
    --ft-accent:        #2d6be4;
    --ft-primary:       #2d6be4;

    /* Status — light palette (AB#429): the dark-mode neon status colours + translucent bgs washed
       out to pastel-on-white (e.g. #00d685 text ~2:1 on white). Solid tints + AA text, aligned to
       the Admin light design system. */
    --ft-green:         #16a34a;
    --ft-green-bg:      #e6f4ec;
    --ft-green-text:    #0f7a4d;
    --ft-red:           #e5484d;
    --ft-red-bg:        #fdecea;
    --ft-red-text:      #b42318;
    --ft-amber:         #d97706;
    --ft-amber-bg:      #fbf1dc;
    --ft-amber-text:    #92600a;
    --ft-blue:          #2d6be4;
    --ft-blue-bg:       #e7eefc;
    --ft-blue-text:     #1d4fb0;
    --ft-teal:          #0d9488;
    --ft-teal-bg:       #dff4f2;
    --ft-teal-text:     #0b6e66;
    --ft-purple:        #7c3aed;
    --ft-purple-bg:     #efeafb;
    --ft-purple-text:   #6d49c9;

    /* #597 card lift — white cards must read as raised surfaces on the tinted canvas. */
    --ft-shadow-xs:  0 1px 2px rgba(13,27,42,.08);
    --ft-shadow-sm:  0 1px 3px rgba(13,27,42,.10), 0 8px 24px rgba(13,27,42,.10);
    --ft-shadow:     0 2px 6px rgba(13,27,42,.10), 0 16px 40px rgba(13,27,42,.16);   /* modals, popovers, menus */
    --ft-shadow-md:  0 20px 48px rgba(13,27,42,.20);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 15px; }

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--ft-bg);
    color: var(--ft-text);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* ── Shell ─────────────────────────────────────────────── */
.ft-shell { display: flex; min-height: 100vh; }

/* ── Sidebar ────────────────────────────────────────────── */
.ft-sidebar {
    width: var(--ft-sidebar-w);
    background: linear-gradient(180deg, #04080f 0%, #071223 100%);
    border-right: 1px solid rgba(255,255,255,.05);
    color: white;
    display: flex; flex-direction: column; flex-shrink: 0;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 100;
}

.ft-sidebar-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 1.5rem 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(135deg, rgba(255,124,48,.06) 0%, transparent 60%);
}
/* Theme-aware brand mark (brand kit): neon-glow mark on dark, colour mark on light. */
.ft-brandmark { flex-shrink: 0; display: block; }
.ft-brandmark-light { display: none; }
html[data-theme="light"] .ft-brandmark-dark { display: none; }
html[data-theme="light"] .ft-brandmark-light { display: block; }

.ft-logo {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #ff7c30 0%, #ff5500 100%);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem; flex-shrink: 0;
    box-shadow: 0 0 20px rgba(255,124,48,.4), 0 2px 8px rgba(0,0,0,.4);
}

.ft-brand-name { font-weight: 700; font-size: .9375rem; color: #dde8ff; letter-spacing: -.01em; }
.ft-brand-sub  { font-size: .68rem; opacity: .35; text-transform: uppercase; letter-spacing: .09em; margin-top: 2px; }

.ft-sidenav { flex: 1; padding: .875rem .75rem; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }

.ft-sidenav-section {
    font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: rgba(255,255,255,.2);
    padding: .9rem .5rem .375rem;
}

.ft-sidenav-link {
    display: flex; align-items: center; gap: 10px;
    padding: .625rem .875rem;
    border-radius: var(--ft-radius-sm);
    text-decoration: none;
    color: rgba(255,255,255,.5);
    font-weight: 500; font-size: .875rem;
    transition: background .15s, color .15s;
    position: relative;
}
.ft-sidenav-link svg { flex-shrink: 0; transition: opacity .15s; }
.ft-sidenav-link:hover { background: rgba(255,255,255,.05); color: rgba(255,255,255,.85); }
.ft-sidenav-link.active {
    background: rgba(255,124,48,.12);
    color: #ffa06a;
    border: 1px solid rgba(255,124,48,.15);
}
.ft-sidenav-link.active::before {
    content: '';
    position: absolute; left: -1px; top: 4px; bottom: 4px;
    width: 3px; background: #ff7c30; border-radius: 0 3px 3px 0;
}

.ft-sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,.06);
}

.ft-sidebar-user { display: flex; align-items: center; gap: 10px; }
.ft-sidebar-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #ff7c30, #ff5500);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; color: white; flex-shrink: 0;
    box-shadow: 0 0 12px rgba(255,124,48,.3);
}
.ft-sidebar-user-info { flex: 1; min-width: 0; }
.ft-sidebar-user-name { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-sidebar-logout { font-size: .7rem; color: rgba(255,255,255,.3); text-decoration: none; }
.ft-sidebar-logout:hover { color: rgba(255,255,255,.65); }

/* ── Sidebar — light mode (marketing-blue on white) ─────── */
html[data-theme="light"] .ft-sidebar {
    background: #ffffff;
    border-right: 1px solid var(--ft-border);
    color: var(--ft-text);
}
html[data-theme="light"] .ft-sidebar-brand {
    border-bottom: 1px solid var(--ft-border);
    background: linear-gradient(135deg, rgba(45,107,228,.06) 0%, transparent 60%);
}
html[data-theme="light"] .ft-brand-name { color: var(--ft-text); }
html[data-theme="light"] .ft-sidenav-section { color: var(--ft-text-faint); }
html[data-theme="light"] .ft-sidenav-link { color: var(--ft-text-muted); }
html[data-theme="light"] .ft-sidenav-link:hover { background: var(--ft-surface-2); color: var(--ft-text); }
html[data-theme="light"] .ft-sidenav-link.active {
    background: rgba(255,124,48,.16);
    color: var(--ft-orange);
    border: 1px solid rgba(255,124,48,.42);
    font-weight: 700;
}
html[data-theme="light"] .ft-sidenav-link.active::before { background: var(--ft-orange); width: 4px; }
html[data-theme="light"] .ft-sidebar-footer { border-top: 1px solid var(--ft-border); }

/* ── Main ───────────────────────────────────────────────── */
.ft-main {
    margin-left: var(--ft-sidebar-w);
    flex: 1;
    min-width: 0;
    background:
        radial-gradient(ellipse at 80% 0%, rgba(77,166,255,.06) 0%, transparent 55%),
        radial-gradient(ellipse at 10% 80%, rgba(255,124,48,.04) 0%, transparent 45%),
        var(--ft-bg);
}
.ft-main-content { padding: 2rem 2.5rem; max-width: 1280px; }
/* #984: the job board uses the full screen width (Mark: "use all the screen space") — forms and reading
   pages keep the readable 1280px cap. Scoped to the board via the split container it always renders. */
.ft-main-content:has(.ft-board-split) { max-width: none; }
/* AB#1773 W4 (Mark, 9 Sep: "can the site be responsive and use all the window space"): the estimating pages
   are data pages like the board — a 253-line grid beside a rail, a two-revision compare, the client's own
   sheet — so they take the window too, scoped by each page's root class. Forms and reading pages keep the
   1280px measure for the #984 reason: prose that runs 1900px wide is harder to read, not easier. */
.ft-main-content:has(.est-page, .rc, .el, .ex, .eq, .pr) { max-width: none; }
/* AB#2287 (Mark, 8 Oct: "the board fills the page", as in the 3D POC): the Overview's scene takes the whole content area,
   with its cards floating over it, so it lifts the cap and keeps a thinner frame. Scoped by the page's root class. */
.ft-main-content:has(.so-fullbleed) { max-width: none; padding: 1rem 1.25rem 1.25rem; }

/* FocusOnNavigate (Routes.razor) focuses the page <h1> on every navigation so screen
   readers announce the new page. It's a programmatic focus on a non-interactive heading,
   so suppress the UA focus box that flashed on the heading after each load (testing feedback). */
h1:focus, h1:focus-visible { outline: none; box-shadow: none; }

/* ── Responsive shell (AB#298): off-canvas drawer <=1100px ──────────────────
   Desktop is unchanged. Below 1100px the fixed sidebar slides off-canvas and a
   hamburger in the top bar toggles it back in as a drawer over a backdrop — the
   full nav is preserved, nothing is dropped. */
.ft-hamburger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--ft-border); background: var(--ft-surface); color: var(--ft-text); cursor: pointer; flex-shrink: 0; }
.ft-drawer-backdrop { display: none; }
@media (max-width: 1100px) {
    .ft-main { margin-left: 0; }
    .ft-sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: 8px 0 30px rgba(13,27,42,.22); }
    .ft-shell.ft-drawer-open .ft-sidebar { transform: translateX(0); }
    .ft-hamburger { display: inline-flex; }
    .ft-shell.ft-drawer-open .ft-drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(13,27,42,.42); z-index: 99; }
    .ft-main-content { padding: 1.25rem 1rem; }
    .ft-topbar-title { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) { .ft-sidebar { transition: none; } }


/* ── Command palette (AB#300) ───────────────────────────── */
.ftcp-scrim { position: fixed; inset: 0; background: rgba(13,27,42,.42); z-index: 1200; }
.ftcp { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); width: 600px; max-width: calc(100vw - 32px); background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: 16px; box-shadow: 0 24px 70px rgba(13,27,42,.34); overflow: hidden; z-index: 1201; }
.ftcp-search { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--ft-border); }
.ftcp-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 16px; color: var(--ft-text); font-family: inherit; }
.ftcp-kbd { font-size: 11px; font-weight: 600; color: var(--ft-text-faint); background: var(--ft-surface-2); border: 1px solid var(--ft-border); border-radius: 5px; padding: 3px 7px; }
.ftcp-results { max-height: 392px; overflow-y: auto; padding: 8px; }
.ftcp-empty { padding: 18px; text-align: center; font-size: 13px; color: var(--ft-text-muted); }
.ftcp-group { margin: 6px 8px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ft-text-faint); }
.ftcp-row { display: flex; align-items: center; gap: 13px; padding: 10px 11px; border-radius: 10px; cursor: pointer; }
.ftcp-row.sel { background: color-mix(in srgb, var(--ft-primary, #2d6be4) 8%, transparent); }
.ftcp-ico { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ftcp-label { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ft-text); }
.ftcp-sub { display: block; font-size: 12px; font-weight: 400; color: var(--ft-text-muted); margin-top: 1px; }
.ftcp-tag { font-size: 10.5px; font-weight: 700; color: var(--ft-primary, #2d6be4); background: color-mix(in srgb, var(--ft-primary, #2d6be4) 10%, transparent); border-radius: 6px; padding: 4px 8px; }
.ftcp-foot { display: flex; align-items: center; gap: 18px; padding: 11px 16px; border-top: 1px solid var(--ft-border); background: color-mix(in srgb, var(--ft-text) 2%, var(--ft-surface)); font-size: 11.5px; color: var(--ft-text-muted); }

/* Palette "Ask FieldTaskora AI" answer panel (AB#343) */
.ftcp-ai { padding: 6px 8px 10px; }
.ftcp-ai-q { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ft-text); margin: 2px 4px 10px; }
.ftcp-ai-q svg { flex-shrink: 0; }
.ftcp-ai-body { font-size: 13.5px; line-height: 1.6; color: var(--ft-text); background: color-mix(in srgb, var(--ft-primary, #2d6be4) 5%, transparent); border: 1px solid color-mix(in srgb, var(--ft-primary, #2d6be4) 14%, transparent); border-radius: 10px; padding: 11px 13px; white-space: pre-wrap; }
.ftcp-ai-thinking { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ft-text-muted); padding: 11px 13px; }
.ftcp-ai-err { font-size: 13px; color: #dc2626; padding: 9px 13px; background: rgba(220,38,38,.06); border: 1px solid rgba(220,38,38,.18); border-radius: 10px; }
.ftcp-ai-actions { display: flex; align-items: center; gap: 12px; margin-top: 9px; padding: 0 2px; }
.ftcp-ai-again { font-size: 12px; font-weight: 600; color: var(--ft-primary, #2d6be4); background: none; border: none; cursor: pointer; padding: 4px 2px; font-family: inherit; }
.ftcp-ai-again:hover { text-decoration: underline; }
.ftcp-ai-spin { width: 14px; height: 14px; border: 2px solid color-mix(in srgb, var(--ft-primary, #2d6be4) 28%, transparent); border-top-color: var(--ft-primary, #2d6be4); border-radius: 50%; animation: ftcp-spin .7s linear infinite; }
@keyframes ftcp-spin { to { transform: rotate(360deg); } }

/* ── AI provenance chip (AB#343) — shared <AiProvenanceChip/> ─ */
.ft-aichip { display: inline-flex; align-items: center; gap: .28rem; background: #faf5ff; color: #7c3aed; font-size: .68rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; line-height: 1.35; white-space: nowrap; border: 1px solid rgba(124,58,237,.18); vertical-align: middle; }
.ft-aichip-spark { font-size: .72rem; line-height: 1; }
.ft-aichip-edit { font-weight: 500; opacity: .72; }

/* ── Top bar ────────────────────────────────────────────── */
.ft-topbar {
    height: 52px;
    background: var(--ft-surface);
    border-bottom: 1px solid var(--ft-border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2.5rem;
    position: sticky;
    top: 0;
    z-index: 200;
}
.ft-topbar-right { display: flex; align-items: center; gap: .75rem; }
/* AB#2300: the AB#2287 block above used to sit BEFORE the base .ft-topbar rule. Equal specificity, so the base
   rule won and none of it applied (padding stayed 2.5rem, overflow still went off the left edge). It must stay
   AFTER the base rule. Pinned by TopBarFitsAPhoneTests. */
/* AB#2287 (found by lane 1 at phone width on AB#2285, every page): at 375 px the top bar's 2.5rem padding, the 130 px
   title block and the right-hand cluster overflowed to the LEFT (justify-content: flex-end), so the hamburger sat at
   x = -77 px and the drawer could not be opened on a phone. Below 640 px: a thin padding, the bar packs from the left
   (the hamburger is always first and on screen), the crumb goes, and the title gives way before the buttons do. */
@media (max-width: 640px) {
    .ft-topbar { padding: 0 .75rem; gap: .5rem !important; justify-content: flex-start; }
    .ft-topbar > div:has(> .ft-topbar-title) { min-width: 0 !important; flex: 1 1 auto; overflow: hidden; }
    .ft-topbar-crumb { display: none; }
    .ft-topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ft-topbar-right { gap: .4rem !important; flex: none; }
}
/* AB#2300: at 320 px a German or Spanish "New Job" label still pushed the row past the viewport. On the
   narrowest phones the button is icon-only. The text stays in the DOM as its accessible name. */
@media (max-width: 480px) {
    .ft-topbar-right > a.ft-btn { font-size: 0; gap: 0 !important; padding: .4rem .5rem; }
    .ft-topbar > div:has(> .ft-topbar-title) { flex-basis: 0; }
}

/* ── Page header ────────────────────────────────────────── */
.ft-page-title    { font-size: 1.5rem; font-weight: 700; color: var(--ft-text); margin-bottom: .25rem; letter-spacing: -.025em; }
.ft-page-subtitle { color: var(--ft-text-muted); font-size: .875rem; margin-bottom: 1.75rem; }

/* ── Page header band (AB#1943 Wave 0 utility — optional; mass-migrate in Wave 2+) ── */
.ft-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.ft-page-header .ft-page-title { margin-bottom: .25rem; }
.ft-page-header .ft-page-subtitle { margin-bottom: 0; }
.ft-page-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

/* ── Cards ──────────────────────────────────────────────── */
.ft-card {
    background: var(--ft-surface);
    border-radius: var(--ft-radius-lg);
    border: 1px solid var(--ft-border);
    box-shadow: var(--ft-shadow-sm);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
/* AB#1260 — a card that hosts a row-level pop-up menu cannot clip its own children.
   .ft-card sets overflow:hidden above so its rounded corners cut the content. An absolutely
   positioned menu is still clipped by an ancestor's overflow — z-index does not escape
   clipping, only position:fixed does — so a kebab menu opening from the LAST row was cut off
   at the card edge and every action behind it was unreachable.
   Cards that carry such a menu opt out here and keep their corners by rounding the header and
   the last child directly. Deliberately a modifier rather than dropping overflow on .ft-card:
   most cards hold tables whose corners depend on that clip. */
.ft-card.ft-card-menus { overflow: visible; }
.ft-card.ft-card-menus > .ft-card-header:first-child {
    border-top-left-radius: var(--ft-radius-lg);
    border-top-right-radius: var(--ft-radius-lg);
}
.ft-card.ft-card-menus > :last-child {
    border-bottom-left-radius: var(--ft-radius-lg);
    border-bottom-right-radius: var(--ft-radius-lg);
}

.ft-card-body { padding: 1.375rem; }
.ft-card-header {
    padding: 1rem 1.375rem;
    border-bottom: 1px solid var(--ft-border-soft);
    font-weight: 600; font-size: .875rem; color: var(--ft-text);
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255,255,255,.02);
}

/* ── KPI Stat cards ─────────────────────────────────────── */
.ft-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.ft-stat-card {
    background: var(--ft-surface);
    border-radius: var(--ft-radius-lg);
    border: 1px solid var(--ft-border);
    box-shadow: var(--ft-shadow-sm);
    padding: 1.375rem 1.25rem;
    display: flex; align-items: center; gap: 1rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.ft-stat-card:hover {
    box-shadow: var(--ft-shadow);
    border-color: var(--ft-border-strong);
    transform: translateY(-2px);
}
.ft-stat-card::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    border-radius: var(--ft-radius-lg) var(--ft-radius-lg) 0 0;
}

.ft-stat-inprogress::after  { background: linear-gradient(90deg, #4da6ff, transparent); }
.ft-stat-assigned::after    { background: linear-gradient(90deg, #ffb820, transparent); }
.ft-stat-completed::after   { background: linear-gradient(90deg, #00d685, transparent); }
.ft-stat-exceptions::after  { background: linear-gradient(90deg, #ff4f5a, transparent); }

.ft-stat-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ft-stat-inprogress .ft-stat-icon { background: rgba(77,166,255,.15);  color: #4da6ff;  box-shadow: 0 0 18px rgba(77,166,255,.15); }
.ft-stat-assigned   .ft-stat-icon { background: rgba(255,184,32,.15);  color: #ffb820;  box-shadow: 0 0 18px rgba(255,184,32,.15); }
.ft-stat-completed  .ft-stat-icon { background: rgba(0,214,133,.15);   color: #00d685;  box-shadow: 0 0 18px rgba(0,214,133,.15); }
.ft-stat-exceptions .ft-stat-icon { background: rgba(255,79,90,.15);   color: #ff4f5a;  box-shadow: 0 0 18px rgba(255,79,90,.15); }

/* User stat card variants for Admin */
.ft-stat-users   .ft-stat-icon { background: rgba(77,166,255,.15);  color: #4da6ff;  box-shadow: 0 0 18px rgba(77,166,255,.15); }
.ft-stat-active  .ft-stat-icon { background: rgba(0,214,133,.15);   color: #00d685;  box-shadow: 0 0 18px rgba(0,214,133,.15); }
.ft-stat-workers .ft-stat-icon { background: rgba(255,184,32,.15);  color: #ffb820;  box-shadow: 0 0 18px rgba(255,184,32,.15); }

.ft-stat-content { flex: 1; min-width: 0; }
.ft-stat-value { font-size: 1.875rem; font-weight: 700; color: var(--ft-text); line-height: 1; letter-spacing: -.04em; }
.ft-stat-label { font-size: .75rem; color: var(--ft-text-muted); margin-top: 5px; font-weight: 500; }

/* ── Usage bar (AB#158) ─────────────────────────────────────
   Only drawn for metrics that genuinely have a cap. Bands follow the ticket's acceptance criteria:
   green under 70%, amber 70-90%, red above 90%. Built on the shared semantic tokens, so it inherits
   both themes without a per-theme override. */
.ft-usage-track {
    height: 8px; border-radius: 20px; overflow: hidden;
    background: var(--ft-border);
}
.ft-usage-fill {
    height: 100%; border-radius: 20px;
    transition: width .3s ease;
}
.ft-usage-ok     { background: var(--ft-green); }
.ft-usage-warn   { background: var(--ft-amber); }
.ft-usage-danger { background: var(--ft-red); }

@media (prefers-reduced-motion: reduce) {
    .ft-usage-fill { transition: none; }
}

/* ── Badges ─────────────────────────────────────────────── */
.ft-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px;
    font-size: .72rem; font-weight: 600; letter-spacing: .01em;
}
.ft-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.ft-badge-pending    { background: var(--ft-amber-bg);  color: var(--ft-amber-text); border: 1px solid rgba(255,184,32,.15); }
.ft-badge-pending::before    { background: var(--ft-amber); }
.ft-badge-assigned   { background: var(--ft-blue-bg);   color: var(--ft-blue-text);  border: 1px solid rgba(77,166,255,.15); }
.ft-badge-assigned::before   { background: var(--ft-blue); }
.ft-badge-inprogress { background: rgba(255,124,48,.1); color: #ffa06a;              border: 1px solid rgba(255,124,48,.18); }
.ft-badge-inprogress::before { background: var(--ft-orange); }
.ft-badge-completed  { background: var(--ft-green-bg);  color: var(--ft-green-text); border: 1px solid rgba(0,214,133,.15); }
.ft-badge-completed::before  { background: var(--ft-green); }
.ft-badge-cancelled  { background: rgba(255,255,255,.04); color: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.08); }
.ft-badge-cancelled::before  { background: rgba(255,255,255,.2); }
.ft-badge-active     { background: var(--ft-green-bg);  color: var(--ft-green-text); border: 1px solid rgba(0,214,133,.15); }
.ft-badge-active::before     { background: var(--ft-green); }
.ft-badge-inactive   { background: rgba(255,255,255,.04); color: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.08); }
.ft-badge-inactive::before   { background: rgba(255,255,255,.2); }

/* Inline mini-badges used in the job table */
.ft-mini-exc     { display:inline-block; font-size:.7rem; background:rgba(255,79,90,.12); color:#ff6e77; border:1px solid rgba(255,79,90,.2); font-weight:700; padding:1px 8px; border-radius:5px; }
.ft-mini-warn    { display:inline-block; font-size:.7rem; background:rgba(255,184,32,.1); color:#ffb820; border:1px solid rgba(255,184,32,.18); font-weight:700; padding:1px 8px; border-radius:5px; }
.ft-mini-stalled { display:inline-block; font-size:.7rem; background:rgba(93,122,171,.12); color:#8ba5d4; border:1px solid rgba(93,122,171,.22); font-weight:700; padding:1px 8px; border-radius:5px; }

/* Inline exception/status badges used in JobDetail */
.ft-badge-open-exc     { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600;background:rgba(255,79,90,.1);color:#ff6e77;border:1px solid rgba(255,79,90,.18); }
.ft-badge-resolved-exc { display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600;background:rgba(0,214,133,.1);color:#00d685;border:1px solid rgba(0,214,133,.15); }

/* ── Table ──────────────────────────────────────────────── */
.ft-table { width: 100%; border-collapse: collapse; }
/* AB#468: let the job-board table scroll sideways on a phone rather than overflow the page. */
.ft-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ft-table-scroll .ft-table { min-width: 720px; }
.ft-table th {
    padding: .75rem 1.25rem; text-align: left;
    font-size: .7rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; color: var(--ft-text-faint);
    border-bottom: 1px solid var(--ft-border);
    background: rgba(255,255,255,.015);
    white-space: nowrap;
}
.ft-table td { padding: .9rem 1.25rem; border-bottom: 1px solid var(--ft-border-soft); vertical-align: middle; }
.ft-table tbody tr { cursor: pointer; transition: background .1s; }
.ft-table tbody tr:hover td { background: rgba(255,255,255,.025); }
.ft-table tbody tr:last-child td { border-bottom: none; }
.ft-row-overdue td { background: rgba(255,184,32,.04) !important; }

/* ── Toolbar ────────────────────────────────────────────── */
.ft-toolbar {
    display: flex; align-items: center; gap: .625rem; flex-wrap: wrap;
    padding: .875rem 1.25rem;
    background: rgba(255,255,255,.015);
    border-bottom: 1px solid var(--ft-border-soft);
}

/* ── Filter pills ───────────────────────────────────────── */
.ft-filter-pills { display: flex; gap: .375rem; flex-wrap: wrap; }
.ft-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: .35rem .875rem; border-radius: 20px;
    font-size: .78rem; font-weight: 600;
    cursor: pointer;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--ft-text-muted);
    transition: all .15s; white-space: nowrap;
}
.ft-pill:hover { border-color: rgba(255,255,255,.15); color: var(--ft-text); background: rgba(255,255,255,.07); }
.ft-pill.active { background: rgba(255,124,48,.15); color: #ffa06a; border-color: rgba(255,124,48,.25); }

/* ── Buttons ────────────────────────────────────────────── */
/*
 * CTA taxonomy (AB#1943 / epic AB#1942 — Sir amendment 2026-09-21):
 *   Primary (ft-btn-primary)  — topbar / global chrome CTAs. Light theme = brand blue #2d6be4.
 *   Accent  (ft-btn-accent)   — page-level primaries (Save / Create / New Job on page). Stays orange
 *                               gradient in light AND dark. Do NOT alias accent→blue.
 *   Outline (ft-btn-outline)  — secondary / parallel safe actions.
 *   Danger  (ft-btn-danger)   — destructive only.
 *   FAB     (HelpAssistant)   — shell-only help; mount once in MainLayout, never per page.
 * Dual New Job (blue topbar + orange page) is ALLOWED. Wave 4 must NOT purge orange accent CTAs.
 * See docs/design/dashboard-button-taxonomy.md
 */
.ft-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: .5rem 1.125rem; border-radius: var(--ft-radius-sm);
    font-weight: 600; font-size: .875rem; cursor: pointer; border: none;
    transition: all .15s; text-decoration: none; line-height: 1.4;
    white-space: nowrap; font-family: inherit;
}
.ft-btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

.ft-btn-primary {
    background: linear-gradient(135deg, #1a3158 0%, #122540 100%);
    color: var(--ft-text); border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.ft-btn-primary:hover { background: linear-gradient(135deg, #1e3a68 0%, #162e4e 100%); color: var(--ft-text); border-color: rgba(255,255,255,.15); }

.ft-btn-accent {
    background: linear-gradient(135deg, #ff7c30, #ff5500);
    color: white; border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 0 20px rgba(255,124,48,.25), 0 1px 3px rgba(0,0,0,.3);
}
.ft-btn-accent:hover { box-shadow: 0 0 28px rgba(255,124,48,.4), 0 2px 6px rgba(0,0,0,.3); transform: translateY(-1px); color: white; }

.ft-btn-outline {
    background: rgba(255,255,255,.04);
    color: var(--ft-text);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: none;
}
.ft-btn-outline:hover { background: rgba(255,255,255,.07); color: var(--ft-text); border-color: rgba(255,255,255,.15); }

.ft-btn-success { background: rgba(0,214,133,.2); color: #00d685; border: 1px solid rgba(0,214,133,.25); }
.ft-btn-success:hover { background: rgba(0,214,133,.3); color: #00d685; }

.ft-btn-danger { background: rgba(255,79,90,.2); color: #ff6e77; border: 1px solid rgba(255,79,90,.25); }
.ft-btn-danger:hover { background: rgba(255,79,90,.3); color: #ff6e77; }

.ft-btn-warning { background: rgba(255,184,32,.2); color: #ffb820; border: 1px solid rgba(255,184,32,.25); }
.ft-btn-warning:hover { background: rgba(255,184,32,.3); }

.ft-btn-sm { padding: .35rem .75rem; font-size: .8rem; }
.ft-btn-block { width: 100%; justify-content: center; }

/* Secondary button — was undefined (used on seedora/tender), so it rendered unstyled. */
.ft-btn-secondary {
    background: var(--ft-surface-2, rgba(255,255,255,.06));
    color: var(--ft-text);
    border: 1px solid var(--ft-border, rgba(255,255,255,.12));
}
.ft-btn-secondary:hover { background: var(--ft-surface, rgba(255,255,255,.1)); color: var(--ft-text); }

/* Light-mode button overrides (AB#187). The primary uses a hardcoded dark-navy
   gradient and the outline/hover states use white rgba — neither translates to the
   light theme, so primary buttons (Analyse, Generate invoice, compliance, drawings,
   etc.) rendered dark/unreadable on light pages. Map them onto the light tokens. */
html[data-theme="light"] .ft-btn-primary {
    background: var(--ft-accent, #2d6be4);
    color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(13,27,42,.12);
}
html[data-theme="light"] .ft-btn-primary:hover {
    background: #2257c0;
    color: #fff;
    border-color: transparent;
}
html[data-theme="light"] .ft-btn-outline {
    background: var(--ft-surface, #fff);
    color: var(--ft-text);
    border: 1px solid var(--ft-border, #d6dde6);
}
html[data-theme="light"] .ft-btn-outline:hover {
    background: var(--ft-surface-2, #eef2f7);
    color: var(--ft-text);
    border-color: var(--ft-border-strong, #b9c4d1);
}
html[data-theme="light"] .ft-btn-secondary {
    background: var(--ft-surface-2, #eef2f7);
    color: var(--ft-text);
    border: 1px solid var(--ft-border, #d6dde6);
}
html[data-theme="light"] .ft-btn-secondary:hover { background: var(--ft-bg-raised, #fff); color: var(--ft-text); }

/* ── Progress ───────────────────────────────────────────── */
.ft-progress { height: 5px; background: rgba(255,255,255,.06); border-radius: 10px; overflow: hidden; }
.ft-progress-bar { height: 100%; background: linear-gradient(90deg, #00d685, #00f5a0); border-radius: 10px; transition: width .4s; }

/* ── Alerts ─────────────────────────────────────────────── */
.ft-alert { padding: .875rem 1.125rem; border-radius: var(--ft-radius); margin-bottom: 1rem; font-size: .875rem; border-width: 1px; border-style: solid; }
.ft-alert-info    { background: rgba(77,166,255,.08);  border-color: rgba(77,166,255,.2);   color: #7dc2ff; }
.ft-alert-success { background: rgba(0,214,133,.08);   border-color: rgba(0,214,133,.2);    color: #00d685; }
.ft-alert-warning { background: rgba(255,184,32,.08);  border-color: rgba(255,184,32,.2);   color: #ffb820; }
.ft-alert-danger  { background: rgba(255,79,90,.08);   border-color: rgba(255,79,90,.2);    color: #ff6e77; }

/* ── Loading ────────────────────────────────────────────── */
.ft-loading { display: flex; align-items: center; gap: 10px; padding: 2.5rem; color: var(--ft-text-muted); font-size: .875rem; }
.ft-loading .spinner-border { width: 1.125rem; height: 1.125rem; border-width: 2px; color: var(--ft-orange); }

/* ── Forms ──────────────────────────────────────────────── */
.ft-form-group { margin-bottom: 1.125rem; }
.ft-label { display: block; font-weight: 600; color: var(--ft-text); margin-bottom: 6px; font-size: .825rem; }
.ft-label-required::after { content: " *"; color: var(--ft-red); }

.ft-input {
    width: 100%; padding: .5625rem .875rem;
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius-sm);
    font-size: .875rem; font-family: inherit;
    color: var(--ft-text);
    background: rgba(255,255,255,.04);
    outline: none; transition: border-color .15s, box-shadow .15s;
}
.ft-input:focus { border-color: rgba(255,124,48,.5); box-shadow: 0 0 0 3px rgba(255,124,48,.1); }
.ft-input::placeholder { color: var(--ft-text-faint); }

.ft-select {
    width: 100%; padding: .5625rem .875rem;
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius-sm);
    font-size: .875rem; font-family: inherit;
    background: var(--ft-surface-2); color: var(--ft-text);
    cursor: pointer;
}
/* Theme-aware dropdown option colours (was hardcoded dark — invisible in light mode) */
.ft-select option { background: var(--ft-bg-raised); color: var(--ft-text); }
select.ft-input { background: var(--ft-surface-2); color: var(--ft-text); cursor: pointer; }
select.ft-input option { background: var(--ft-bg-raised); color: var(--ft-text); }

.ft-textarea {
    width: 100%; padding: .625rem .875rem;
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius-sm);
    font-size: .875rem; font-family: inherit;
    min-height: 90px; resize: vertical;
    background: rgba(255,255,255,.04); color: var(--ft-text);
    outline: none; transition: border-color .15s;
}
.ft-textarea:focus { border-color: rgba(255,124,48,.5); box-shadow: 0 0 0 3px rgba(255,124,48,.1); }
.ft-hint { font-size: .775rem; color: var(--ft-text-muted); margin-top: 4px; }

/* ── Event log ──────────────────────────────────────────── */
.ft-event-item { display: flex; gap: 12px; padding: .75rem 0; position: relative; }
.ft-event-item + .ft-event-item::before { content: ''; position: absolute; left: 4px; top: 0; width: 1px; height: 100%; background: var(--ft-border); }
.ft-event-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ft-orange); box-shadow: 0 0 8px rgba(255,124,48,.4); margin-top: 5px; flex-shrink: 0; position: relative; z-index: 1; }
.ft-event-dot-note { background: #8ba5d4; box-shadow: 0 0 6px rgba(139,165,212,.3); }
.ft-event-body { flex: 1; padding-bottom: .25rem; }
.ft-event-type { font-weight: 600; font-size: .825rem; color: var(--ft-text); }
.ft-event-meta { font-size: .75rem; color: var(--ft-text-muted); margin-top: 1px; }

/* ── Back link / section ────────────────────────────────── */
.ft-back-link { display: inline-flex; align-items: center; gap: 5px; color: var(--ft-text-muted); text-decoration: none; font-size: .825rem; }
.ft-back-link:hover { color: var(--ft-text); }
.ft-section-title { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ft-text-faint); margin: 1.25rem 0 .625rem; }

/* ── Role badges ────────────────────────────────────────── */
.ft-role-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 600; }
.ft-role-fieldworker  { background: var(--ft-blue-bg);           color: var(--ft-blue-text);  border: 1px solid rgba(77,166,255,.15); }
.ft-role-supervisor   { background: var(--ft-amber-bg);          color: var(--ft-amber-text); border: 1px solid rgba(255,184,32,.15); }
.ft-role-opsmanager   { background: rgba(167,139,250,.1);        color: #a78bfa;              border: 1px solid rgba(167,139,250,.18); }
.ft-role-admin        { background: var(--ft-red-bg);            color: var(--ft-red-text);   border: 1px solid rgba(255,79,90,.15); }

/* ── Avatar ─────────────────────────────────────────────── */
.ft-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; flex-shrink: 0; color: white; }

/* ── Exception severity ─────────────────────────────────── */
.ft-exc-critical { color: #f472b6; }
.ft-exc-high     { color: var(--ft-red-text); }
.ft-exc-medium   { color: var(--ft-amber-text); }
.ft-exc-low      { color: var(--ft-green-text); }

/* ── Empty state ────────────────────────────────────────── */
.ft-empty { text-align: center; padding: 3rem 1.5rem; color: var(--ft-text-muted); }
.ft-empty-icon { font-size: 2.5rem; margin-bottom: .75rem; opacity: .2; }
.ft-empty-title { font-weight: 700; color: var(--ft-text); font-size: 1rem; margin-bottom: .375rem; }
.ft-empty-text  { font-size: .875rem; max-width: 340px; margin: 0 auto; line-height: 1.6; }

/* ── Two-col job layout ─────────────────────────────────── */
.ft-job-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; }

/* ── Scrollbars ─────────────────────────────────────────── */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(255,255,255,.12); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(255,255,255,.22); }
::-webkit-scrollbar-corner       { background: transparent; }
*                                { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }

/* ── Blazor reconnect modal ── */
#components-reconnect-modal {
    position: fixed; inset: 0; z-index: 2000;
    display: none; align-items: center; justify-content: center;
    background: rgba(4,8,15,.8); backdrop-filter: blur(6px);
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal:not([hidden]) { display: flex; }
.components-reconnect-dialog {
    background: #0d1a30 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 16px;
    padding: 2rem 2.25rem;
    text-align: center;
    max-width: 340px; width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,.8);
    color: #dde8ff !important;
}
.components-reconnect-dialog h1,
.components-reconnect-dialog h2,
.components-reconnect-dialog h3,
.components-reconnect-dialog p,
.components-reconnect-dialog span,
.components-reconnect-dialog b { color: #dde8ff !important; }
.components-reconnect-message {
    color: #dde8ff !important; font-size: .95rem; font-weight: 600; margin: 0 0 .5rem;
}
#components-reconnect-modal.components-reconnect-failed   .components-reconnect-message { color: var(--ft-red) !important; }
#components-reconnect-modal.components-reconnect-rejected .components-reconnect-message { color: var(--ft-amber) !important; }
.components-reconnect-reload,
#components-reconnect-retry {
    margin-top: .75rem; padding: .5rem 1.5rem;
    background: linear-gradient(135deg,#ff7c30,#ff5500) !important; color: white !important;
    border: none; border-radius: 8px; font-weight: 600; cursor: pointer;
    font-family: inherit; font-size: .875rem;
}

/* ====== Job Replay (WOW-3 / AB#205, phase 2) — ECharts process dashboard ====== */
.ftr-stage {
    --ftr-bg: #04080f; --ftr-panel: #060d1c; --ftr-panel-glass: rgba(7,16,31,.85);
    --ftr-border: rgba(255,255,255,.07); --ftr-border-soft: rgba(255,255,255,.06);
    --ftr-text: #dde8ff; --ftr-muted: #5d7aab; --ftr-soft: #8fafd8; --ftr-clockc: #7dd3fc;
    display: flex; flex-direction: column; height: calc(100vh - 52px); margin: -2rem -2.5rem; background: var(--ftr-bg);
}
[data-theme='light'] .ftr-stage {
    --ftr-bg: #f4f6f9; --ftr-panel: #ffffff; --ftr-panel-glass: rgba(255,255,255,.92);
    --ftr-border: #e3e9f2; --ftr-border-soft: #eaeff6;
    --ftr-text: #0d1b2a; --ftr-muted: #5b6f8d; --ftr-soft: #44597a; --ftr-clockc: #2d6be4;
}
.ftr-topline { display: flex; align-items: center; gap: 1.25rem; padding: .8rem 1.5rem; border-bottom: 1px solid var(--ftr-border); background: var(--ftr-panel-glass); }
.ftr-back { color: var(--ftr-muted); text-decoration: none; font-size: .85rem; white-space: nowrap; }
.ftr-back:hover { color: var(--ftr-text); }
.ftr-titleblock { flex: 1; min-width: 0; }
.ftr-job-title { color: var(--ftr-text); font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftr-job-sub { color: var(--ftr-muted); font-size: .75rem; }
.ftr-clockblock { text-align: right; }
.ftr-clock { color: var(--ftr-clockc); font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ftr-counter { color: var(--ftr-muted); font-size: .72rem; }
.ftr-empty { color: var(--ftr-muted); padding: 4rem; text-align: center; font-size: .95rem; }
/* Dashboard grid — flow + bore on top, swimlanes across, AI insights + map below,
   and the field record as a full-height right rail so the evidence stays visible */
.ftr-grid { flex: 1; min-height: 0; display: grid; gap: 10px; padding: 10px 10px 0;
    grid-template-columns: 1.1fr .9fr 330px;
    grid-template-rows: 1.05fr .9fr 1.05fr;
    grid-template-areas: "flow bore feed" "lanes lanes feed" "insights map feed"; }
.ftr-grid-nobore { grid-template-areas: "flow flow feed" "lanes lanes feed" "insights map feed"; }
.ftr-panel { position: relative; min-height: 0; display: flex; flex-direction: column;
    background: var(--ftr-panel); border: 1px solid var(--ftr-border); border-radius: 12px; overflow: hidden; }
.ftr-area-flow { grid-area: flow; }
.ftr-area-bore { grid-area: bore; }
.ftr-area-lanes { grid-area: lanes; }
.ftr-area-insights { grid-area: insights; }
.ftr-area-map { grid-area: map; }
.ftr-area-feed { grid-area: feed; }
.ftr-panel-head { padding: .55rem .9rem; color: var(--ftr-muted); font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid var(--ftr-border-soft); flex-shrink: 0; }
.ftr-chart { flex: 1; min-height: 0; }
.ftr-map-inset { position: absolute; inset: 0; }
.ftr-photoflash { position: absolute; left: 12px; bottom: 12px; width: 46%; max-width: 260px;
    border-radius: 10px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.45);
    opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; z-index: 5; }
.ftr-photoflash.ftr-photoflash-on { opacity: 1; transform: none; }
.ftr-photoflash img { display: block; width: 100%; }
.ftr-photoflash .ftr-photoflash-cap { background: var(--ftr-panel-glass); color: var(--ftr-text);
    font-size: .7rem; font-weight: 600; padding: .35rem .55rem; }
.ftr-insights { flex: 1; min-height: 0; overflow-y: auto; padding: .7rem .9rem; }
.ftr-insights-wait { color: var(--ftr-muted); font-size: .78rem; font-style: italic; animation: ftrBreathe 2.2s ease-in-out infinite; }
@keyframes ftrBreathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.ftr-insight { color: var(--ftr-text); font-size: .8rem; line-height: 1.45; padding: .3rem 0;
    opacity: 0; animation: ftrTickIn .5s ease-out forwards; }
.ftr-insight-spark { color: #2d6be4; margin-right: .45rem; }
.ftr-vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.ftr-vignette-on { animation: ftrFlare 1.2s ease-out; }
@keyframes ftrFlare {
    0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; }
}
.ftr-vignette { box-shadow: inset 0 0 140px 40px rgba(239,68,68,.55); }
.ftr-headline-inline { font-weight: 800; font-size: .95rem; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28vw; }
.ftr-controlbar { display: flex; align-items: center; gap: .9rem; margin: 10px; flex-shrink: 0;
    background: var(--ftr-panel-glass); border: 1px solid var(--ftr-border); border-radius: 12px; padding: .55rem .9rem; }
.ftr-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: #2d6be4; color: #fff; font-size: .95rem; cursor: pointer; flex-shrink: 0; }
.ftr-btn:hover { background: #1f5bd0; }
.ftr-progress { flex: 1; height: 6px; background: rgba(127,148,180,.25); border-radius: 999px; overflow: hidden; }
.ftr-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #2d6be4, #7dd3fc); transition: width .4s linear; }
.ftr-speeds { display: flex; gap: .3rem; }
.ftr-speed { background: transparent; border: 1px solid var(--ftr-border); color: var(--ftr-soft); border-radius: 6px; font-size: .72rem; font-weight: 700; padding: .25rem .5rem; cursor: pointer; }
.ftr-speed-on { background: rgba(45,107,228,.25); border-color: #2d6be4; color: var(--ftr-text); }
.ftr-ticker { flex: 1; min-height: 0; overflow-y: auto; padding: .6rem; }
.ftr-tick { display: flex; gap: .55rem; padding: .55rem .5rem; border-radius: 8px; align-items: flex-start; opacity: .8; }
.ftr-tick-live { background: rgba(45,107,228,.12); border: 1px solid rgba(45,107,228,.3); opacity: 1; animation: ftrTickIn .35s ease-out; }
@keyframes ftrTickIn { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.ftr-tick-evidence { border-left: 3px solid #a78bfa; background: rgba(167,139,250,.07); opacity: 1; }
.ftr-tick-time { color: var(--ftr-muted); font-size: .68rem; font-variant-numeric: tabular-nums; padding-top: .15rem; flex-shrink: 0; }
.ftr-tick-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: .35rem; flex-shrink: 0; }
.ftr-tick-body { min-width: 0; flex: 1; }
.ftr-tick-title { color: var(--ftr-text); font-size: .8rem; font-weight: 600; line-height: 1.3; }
.ftr-tick-detail { color: var(--ftr-soft); font-size: .72rem; line-height: 1.4; margin-top: .1rem; }
.ftr-tick-photo { width: 100%; border-radius: 7px; margin-top: .4rem; border: 1px solid var(--ftr-border); }
/* Map markers (JS-injected DOM) */
.ftr-marker { position: relative; width: 26px; height: 26px; }
.ftr-pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--ftr-colour); opacity: .5; animation: ftrPulse 1.6s ease-out 3; }
@keyframes ftrPulse { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }
.ftr-dot { position: absolute; inset: 3px; border-radius: 50%; background: var(--ftr-colour); color: #04080f; display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 800; box-shadow: 0 2px 10px rgba(0,0,0,.6); }
.ftr-flare .ftr-pulse { animation: ftrPulse 1s ease-out 6; }
.ftr-site { position: relative; width: 34px; height: 34px; }
.ftr-site-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #2d6be4; animation: ftrPulse 2.4s ease-out infinite; }
.ftr-site-core { position: absolute; inset: 9px; border-radius: 50%; background: #2d6be4; box-shadow: 0 0 18px rgba(45,107,228,.9); }

/* ══════════════════════════════════════════════════════════
   Light-mode component fixes (AB#429) — the dark theme's
   rgba(255,255,255,.0x) "surface lift" idiom is INVISIBLE on
   white, washing the whole app out ("everything is white").
   Additive overrides only; dark mode untouched.
   ══════════════════════════════════════════════════════════ */
/* The decorative glow gradients bleach the light page bg toward pure white — drop them. */
html[data-theme="light"] .ft-main { background: var(--ft-bg); }

/* Structural tints: card headers, table heads, toolbars, row hover (were white-alpha). */
html[data-theme="light"] .ft-card-header { background: #eef2f8; } /* #597: titled header band */
html[data-theme="light"] .ft-table th { background: rgba(13,27,42,.025); }
html[data-theme="light"] .ft-table tbody tr:hover td { background: rgba(13,27,42,.035); }
html[data-theme="light"] .ft-toolbar { background: rgba(13,27,42,.02); }

/* Filter pills: real fills + visible borders. */
html[data-theme="light"] .ft-pill { background: #fff; border-color: var(--ft-border-strong); }
html[data-theme="light"] .ft-pill:hover { background: var(--ft-surface-2); border-color: #c3ccd9; color: var(--ft-text); }
html[data-theme="light"] .ft-pill.active { background: var(--ft-orange-100); color: var(--ft-orange); border-color: var(--ft-orange-200); }

/* Badges that hardcoded white-alpha (cancelled/inactive were literally invisible on white). */
html[data-theme="light"] .ft-badge-cancelled,
html[data-theme="light"] .ft-badge-inactive { background: var(--ft-surface-3); color: var(--ft-text-faint); border-color: var(--ft-border-strong); }
html[data-theme="light"] .ft-badge-cancelled::before,
html[data-theme="light"] .ft-badge-inactive::before { background: var(--ft-text-faint); }
html[data-theme="light"] .ft-badge-inprogress { background: var(--ft-orange-100); color: var(--ft-orange-hover); border-color: var(--ft-orange-200); }
html[data-theme="light"] .ft-mini-exc     { background: var(--ft-red-bg);    color: var(--ft-red-text);   border-color: #f6c9c5; }
html[data-theme="light"] .ft-mini-warn    { background: var(--ft-amber-bg);  color: var(--ft-amber-text); border-color: #f0dcae; }
html[data-theme="light"] .ft-mini-stalled { background: var(--ft-surface-3); color: var(--ft-text-muted); border-color: var(--ft-border-strong); }
html[data-theme="light"] .ft-badge-open-exc     { background: var(--ft-red-bg);   color: var(--ft-red-text);   border-color: #f6c9c5; }
html[data-theme="light"] .ft-badge-resolved-exc { background: var(--ft-green-bg); color: var(--ft-green-text); border-color: #bfe5d0; }

/* Progress track + form fields: white-alpha fills → real surfaces with visible borders. */
html[data-theme="light"] .ft-progress { background: rgba(13,27,42,.08); }
html[data-theme="light"] .ft-input,
html[data-theme="light"] .ft-textarea { background: var(--ft-surface-2); border-color: var(--ft-border-strong); } /* #597: inset well */
html[data-theme="light"] .ft-input:focus,
html[data-theme="light"] .ft-textarea:focus { border-color: var(--ft-accent); box-shadow: 0 0 0 3px rgba(45,107,228,.12); }

/* Alerts: dark-mode neon text on translucent tints fails contrast on white. */
html[data-theme="light"] .ft-alert-info    { background: var(--ft-blue-bg);  border-color: #c4d9f8; color: var(--ft-blue-text); }
html[data-theme="light"] .ft-alert-success { background: var(--ft-green-bg); border-color: #bfe5d0; color: var(--ft-green-text); }
html[data-theme="light"] .ft-alert-warning { background: var(--ft-amber-bg); border-color: #f0dcae; color: var(--ft-amber-text); }
html[data-theme="light"] .ft-alert-danger  { background: var(--ft-red-bg);   border-color: #f6c9c5; color: var(--ft-red-text); }

/* AB#616 translation chip — meta line under a message (canvas 1d). Purple ✨ = AI translation;
   grey = original. Dark by default, light override (app theme via html[data-theme=light]). */
.ft-msg-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }
.ft-tchip { display: inline-flex; align-items: center; gap: .25rem; font-size: .68rem; font-weight: 600;
    padding: .1rem .5rem; border-radius: 999px; white-space: nowrap; }
.ft-tchip-ai { background: rgba(124,58,237,.16); color: #c4b5fd; border: 1px solid rgba(167,139,250,.3); }
.ft-tchip-orig { background: rgba(255,255,255,.06); color: var(--ft-text-muted, #6885b2); border: 1px solid rgba(255,255,255,.12); }
.ft-tchip-toggle { background: none; border: none; color: var(--ft-accent, #2d6be4); cursor: pointer;
    font-family: inherit; padding: 0; font-size: .68rem; font-weight: 600; }
html[data-theme="light"] .ft-tchip-ai { background: #faf5ff; color: #7c3aed; border-color: rgba(124,58,237,.18); }
html[data-theme="light"] .ft-tchip-orig { background: #f1f4f9; color: #656f7e; border-color: #d6dce5; }