/*
 * NEFT LMS · Training Ops: the design system on top of Filament. Plain CSS, no build step, loaded on every panel page.
 *
 * THE REFERENCE is the approved design set in design/ (design/assets/neft.css + design/ops/ops.css, screens
 * design/ops/ops-00 … ops-35). Tokens, sizes and densities below are copied from there; when a screen and this file
 * disagree, the screen wins. Shared building blocks are documented in docs/ui-components.md.
 *
 * Filament's CSS sits in cascade layers, so these unlayered rules win without !important (used only where Filament
 * sets inline styles or utility colours). html is 13.5px, so 1rem = 13.5px here: sizes that must match the design
 * are written in px.
 *
 *  1. Tokens (light, dark)          6. Tables, filter bar, segmented control
 *  2. Base                           7. Status chips (badges), buttons, forms
 *  3. Top bar + user menu            8. Shared components (.neft-*: page stats, KPI tiles, panels, empty state …)
 *  4. Side menu                      9. History (timeline side panel) + Activity
 *  5. Page header, sections        10. Multi-window desktop (ADR 0007) and legacy helpers
 */

/* ================================================================ 1. Tokens (design/assets/neft.css §1) */
:root {
    --font-ui: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, 'Segoe UI', sans-serif;
    --font-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
    --font-num: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

    --brand: #0E3B4F;          /* navy leaning teal: top bar, front window title */
    --brand-2: #134A5C;
    --accent: #0B7A7C;         /* buttons, links, current item */
    --accent-soft: #DDEFF0;
    --accent-bright: #5ED3CC;
    --gold: #FBBC27;

    --bg: #F4F7F8;
    --surface: #FFFFFF;
    --surface-2: #F8FAFB;
    --ink: #10232B;
    --ink-2: #2D4650;
    --ink-3: #54656C;
    --line: #E3EAEC;
    --line-strong: #C9D5D9;

    --ok: #1E6B44;   --ok-soft: #E3F4EA;
    --warn: #6B4600; --warn-soft: #FFF1D6;
    --bad: #A11F15;  --bad-soft: #FDE7E5;
    --info: #1D5D8F; --info-soft: #E6EFF7;

    --r: 12px; --r-sm: 8px; --r-xs: 6px;
    --shadow: 0 6px 20px rgba(16, 35, 43, .12);

    /* top-bar dots (ops.css .sdot) */
    --dot-ok: #3CCB7F; --dot-warn: #F0B429; --dot-bad: #E5534B;

    /* names kept from the ERP port, so older rules and views keep working */
    --neft-font-ui: var(--font-ui);
    --neft-font-ar: var(--font-ar);
    --neft-font-num: var(--font-num);
    --neft-r: var(--r-xs);
    --neft-line: var(--line);
    --neft-line-strong: var(--line-strong);
    --neft-surface-2: var(--surface-2);
    --neft-ink-2: var(--ink-2);
    --neft-ink-3: var(--ink-3);
}

/* Dark: the design's dark tokens (neft.css, prefers-color-scheme block), on Filament's .dark class. */
html.dark, .dark {
    --brand: #0F2F3C; --brand-2: #134A5C; --accent: #3CC4BF; --accent-soft: #12333A;
    --bg: #0A1B22; --surface: #12262E; --surface-2: #0F222A; --ink: #E8F0F2; --ink-2: #C3D2D7; --ink-3: #9DB1B8;
    --line: #22404A; --line-strong: #2B5563;
    --ok: #4FBF86; --ok-soft: #173326; --warn: #E0A64A; --warn-soft: #3A2C14; --bad: #EC7B70; --bad-soft: #3C1D1A; --info: #6EA8E8; --info-soft: #18283B;
    --shadow: 0 6px 20px rgba(0, 0, 0, .4);
}

/* ================================================================ 2. Base */
html { font-size: 13.5px; }
body.fi-body { --topbar-height: 52px; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; }
html[dir='rtl'] body.fi-body, [lang='ar'] { font-family: var(--font-ar); }
.fi-body a:not([class]) { color: var(--accent); }
.fi-body a:not([class]):hover { color: var(--brand); }
.dark .fi-body a:not([class]):hover { color: var(--accent-bright); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.neft-mono, .neft-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.neft-muted { color: var(--ink-3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fi-body, .fi-body * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ================================================================ 3. Top bar (ops.css .staff-top) */
.fi-topbar-ctn.neft-topbar-ctn { z-index: 30; }
.fi-topbar.neft-topbar { min-height: 52px; height: 52px; padding: 0 16px; gap: 16px; background: var(--brand); color: #fff; box-shadow: none; border: 0; --tw-ring-shadow: 0 0 #0000; }
.neft-topbar-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-xs); color: #D3ECEF; background: transparent; border: 0; cursor: pointer; flex: none; }
.neft-topbar-icon:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.neft-topbar-icon .fi-icon { width: 20px; height: 20px; }
.neft-topbar .fi-topbar-open-sidebar-btn, .neft-topbar .fi-topbar-close-sidebar-btn { margin: 0 !important; }
@media (min-width: 1024px) { .neft-topbar .fi-topbar-open-sidebar-btn, .neft-topbar .fi-topbar-close-sidebar-btn { display: none !important; } }
@media (max-width: 1023px) { .neft-topbar-collapse { display: none !important; } }

.neft-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap; flex: none; }
.neft-brand:hover { color: #fff; }
.neft-mark { width: 28px; height: 28px; border-radius: 6px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.dark .neft-mark { color: var(--brand); }
.neft-env { font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #D3ECEF; }

/* Global search, styled as the design's translucent field. */
.neft-topbar-search { flex: 1; min-width: 0; max-width: 520px; }
.neft-topbar-search .fi-global-search-ctn, .neft-topbar-search .fi-global-search { width: 100%; }
.neft-topbar-search .fi-global-search-field .fi-input-wrp { height: 34px; min-height: 34px; border-radius: 8px; background: rgba(255, 255, 255, .12); box-shadow: none; --tw-ring-shadow: 0 0 #0000; border: 0; }
.neft-topbar-search .fi-global-search-field .fi-input-wrp:focus-within { background: rgba(255, 255, 255, .18); box-shadow: 0 0 0 2px var(--accent-bright); }
.neft-topbar-search .fi-global-search-field .fi-input { color: #fff; font-size: 13.5px; padding-block: 6px; }
.neft-topbar-search .fi-global-search-field .fi-input::placeholder { color: #C9DDE2; opacity: 1; }
.neft-topbar-search .fi-global-search-field .fi-input-wrp-prefix .fi-icon, .neft-topbar-search .fi-global-search-field .fi-icon { color: #C9DDE2; }
.neft-topbar-search .fi-global-search-field .fi-input-wrp-suffix { color: #C9DDE2; }
/* Results: a panel in the page's own colours under the field. */
.neft-topbar-search .fi-global-search-results-ctn { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow); max-width: 640px; inset-inline-start: 0; inset-inline-end: auto; width: min(640px, 92vw); }
.neft-topbar-search .fi-global-search-result-group-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); background: var(--surface-2); padding: 6px 12px; }
.neft-topbar-search .fi-global-search-result-heading { font-size: 13px; font-weight: 600; color: var(--ink); font-family: var(--font-num); }
.neft-topbar-search .fi-global-search-result-details { font-size: 12px; color: var(--ink-3); }
.neft-topbar-search .fi-global-search-result-link { padding: 7px 12px; }
.neft-topbar-search .fi-global-search-result-link:hover, .neft-topbar-search .fi-global-search-result-link:focus-visible { background: var(--accent-soft); }

.neft-topbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: #D3ECEF; flex: none; }

/* Print Agent pill. */
.neft-agent-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #D3ECEF; text-decoration: none; white-space: nowrap; }
a.neft-agent-pill[href]:hover { color: #fff; }
.neft-sdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; background: var(--ink-3); }
.neft-sdot.ok { background: var(--dot-ok); } .neft-sdot.warn { background: var(--dot-warn); } .neft-sdot.bad { background: var(--dot-bad); }

/* User chip + menu (ops.css details.usermenu). */
.neft-usermenu { position: relative; }
.neft-usermenu-trigger { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; color: #fff; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: 13px; white-space: nowrap; }
.neft-usermenu-trigger:hover, .neft-usermenu-trigger[aria-expanded='true'] { background: rgba(255, 255, 255, .12); }
.neft-usermenu-role { color: #D3ECEF; }
.neft-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none; }
.neft-usermenu-panel { position: absolute; inset-inline-end: 0; top: 40px; width: 290px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; gap: 8px; z-index: 40; font-size: 13px; }
.neft-usermenu-head { display: grid; gap: 1px; padding: 2px 4px 8px; border-bottom: 1px solid var(--line); }
.neft-usermenu-head span { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.neft-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.neft-hint { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.neft-mi { display: flex; gap: 8px; align-items: center; width: 100%; padding: 6px 8px; border-radius: 6px; color: var(--ink-2); text-decoration: none; background: transparent; border: 0; font: inherit; cursor: pointer; text-align: start; }
.neft-mi:hover { background: var(--surface-2); color: var(--ink); }
.neft-mi .fi-icon { width: 18px; height: 18px; }
.neft-usermenu-signout { border-top: 1px solid var(--line); padding-top: 6px; margin: 0; }
@media (max-width: 1100px) { .neft-agent-pill-label { display: none; } .neft-topbar-search { max-width: 300px; } }
@media (max-width: 720px) { .neft-topbar-search, .neft-usermenu-name, .neft-env { display: none; } }

/* ================================================================ 4. Side menu (neft.css .side, ops.css .side) */
.fi-sidebar.fi-main-sidebar { background: var(--surface); border-inline-end: 1px solid var(--line); }
@media (min-width: 1024px) { .fi-body-has-topbar .fi-sidebar.fi-main-sidebar { background: var(--surface); } }
.fi-sidebar-nav { padding: 12px 8px 12px; row-gap: 0; scrollbar-gutter: auto; }
.fi-sidebar-nav-groups { row-gap: 0; margin-inline: 0; gap: 0; }
.fi-sidebar-group, .fi-sidebar-group-items { row-gap: 2px; gap: 2px; }
.fi-sidebar-group-btn { padding: 12px 10px 4px; min-height: 0; gap: 6px; }
.fi-sidebar-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
/* Group fold arrows kept small and quiet (Waqas, 2026-10-22). */
.fi-sidebar-group-collapse-btn { width: 18px; height: 18px; margin: -2px -4px -2px 0; color: var(--ink-3); opacity: 0; transition: opacity .1s; }
.fi-sidebar-group-btn:hover .fi-sidebar-group-collapse-btn, .fi-sidebar-group-collapse-btn:focus-visible { opacity: .8; }
.fi-sidebar-group-collapse-btn .fi-icon { width: 12px; height: 12px; }
.fi-sidebar-item-btn { padding: 8px 10px; gap: 10px; border-radius: var(--r-xs); justify-content: flex-start; min-height: 0; }
.fi-sidebar-item-btn > .fi-icon { width: 18px; height: 18px; color: var(--ink-2); }
.fi-sidebar-item-label { font-size: 13.5px; font-weight: 400; color: var(--ink-2); }
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover { background: var(--surface-2); }
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover .fi-sidebar-item-label { color: var(--ink); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: var(--accent-soft); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label, .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: var(--accent); }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label { font-weight: 600; }
/* A parent whose child screen is open: not highlighted itself (the child is). */
.fi-sidebar-item.fi-sidebar-item-has-active-child-items > .fi-sidebar-item-btn > .fi-sidebar-item-label { color: var(--ink); font-weight: 600; }
/* The count at the end of an item ("6 today", "41"): plain small grey text, no pill. */
.fi-sidebar-item-badge-ctn .fi-badge { background: none !important; box-shadow: none !important; --tw-ring-shadow: 0 0 #0000; padding: 0; min-width: 0; font-size: 11px; font-weight: 400; color: var(--ink-3) !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-badge-ctn .fi-badge { color: var(--accent) !important; }
/* Child screens (navigationParentItem): indented under their main item, no icon, lighter. */
.fi-sidebar-sub-group-items { margin: 0 0 4px; padding: 0; display: grid; gap: 1px; }
.fi-sidebar-sub-group-items .fi-sidebar-item-btn { padding: 5px 10px 5px 38px; }
[dir='rtl'] .fi-sidebar-sub-group-items .fi-sidebar-item-btn { padding: 5px 38px 5px 10px; }
.fi-sidebar-sub-group-items .fi-sidebar-item-grouped-border { display: none; }
.fi-sidebar-sub-group-items .fi-sidebar-item-label { font-size: 13px; color: var(--ink-3); }
/* Footer (ops.css .side .foot). */
.neft-side-foot { margin-top: auto; padding: 10px 18px 12px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); border-top: 1px solid var(--line); }
.fi-sidebar:not(.fi-sidebar-open) .neft-side-foot { display: none; }
/* Collapsed rail (kept from the ERP; Waqas 2026-10-22): one icon per item, current item in the accent colour. */
.fi-sidebar-group-dropdown-trigger-btn { display: grid; place-items: center; width: 100%; padding: 8px 0; border-radius: var(--r-xs); color: var(--ink-2); }
.fi-sidebar-group-dropdown-trigger-btn:hover { background: var(--surface-2); color: inherit; }
.fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn { background: var(--accent-soft); color: var(--accent); }
.fi-sidebar-group .fi-dropdown-panel { min-width: 200px; }
.fi-sidebar-group .fi-dropdown-panel .fi-dropdown-list-item, .fi-sidebar-group .fi-dropdown-panel .fi-dropdown-list-item-label { font-size: 13.5px; font-weight: 400; }
.fi-sidebar-group .fi-dropdown-panel .fi-dropdown-header { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); padding: 10px 12px 4px; }

/* ================================================================ 5. Page header and sections (neft.css .content, .page-head, .panel) */
.fi-main { padding: 20px 24px; max-width: none; }
.fi-page > .fi-page-header-main-ctn, .fi-page-header-main-ctn { padding-block: 0; row-gap: 16px; gap: 16px; }
.fi-page-main { gap: 16px; row-gap: 16px; }
.fi-header { gap: 12px; align-items: center; }
/* Title and subtitle on one line, as the design's .page-head (h1 20px + .sub 13px grey). */
.fi-header > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; }
.fi-header > div:first-child > .fi-breadcrumbs { width: 100%; }
.fi-header-heading { font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: normal; color: var(--ink); }
.fi-header-subheading { font-size: 13px; color: var(--ink-3); margin: 0; max-width: none; }
.fi-breadcrumbs, .fi-breadcrumbs-item-label { font-size: 12px; color: var(--ink-3); }
.fi-breadcrumbs { margin-bottom: 2px; }
.fi-header-actions-ctn, .fi-header .fi-ac { gap: 8px; }

.fi-section { border-radius: var(--r-xs); background: var(--surface); box-shadow: none; border: 1px solid var(--line); --tw-ring-shadow: 0 0 #0000; }
.fi-section-header { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.fi-section-header-heading { font-size: 14px; font-weight: 600; color: var(--ink); }
.fi-section-header-description { font-size: 12px; color: var(--ink-3); }
.fi-section-content-ctn { border-top: 0; }
.fi-section-content { padding: 14px; }
.fi-in-entry-label, .fi-fo-field-label-content { color: var(--ink-3); }

/* ================================================================ 6. Tables (neft.css table.t), filter bar (ops.css .filters), segmented control (.seg-sm) */
.fi-ta-ctn { border-radius: var(--r-xs); background: var(--surface); box-shadow: none; border: 1px solid var(--line); --tw-ring-shadow: 0 0 #0000; }
.fi-ta-header-toolbar { padding: 8px 12px; gap: 8px; border-color: var(--line); }
.fi-ta-header-cell { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.fi-ta-header-cell:first-of-type { padding-inline-start: 12px; }
.fi-ta-table > thead > tr { background: var(--surface-2); }
.fi-ta-cell { padding: 0; font-size: 13px; }
.fi-ta-cell > .fi-ta-text, .fi-ta-cell > .fi-ta-icon, .fi-ta-cell > .fi-ta-col { padding: 7px 10px; }
.fi-ta-cell .fi-ta-col > .fi-ta-text, .fi-ta-cell .fi-ta-col > .fi-ta-icon { padding: 0; }
.fi-ta-cell:first-of-type > .fi-ta-text, .fi-ta-cell:first-of-type > .fi-ta-col { padding-inline-start: 12px; }
.fi-ta-cell .fi-ta-text-item, .fi-ta-cell .fi-ta-text { font-size: 13px; }
.fi-ta-row td { border-bottom: 1px solid var(--line); }
.fi-ta-table > tbody { border-color: var(--line); }
.fi-ta-row:hover > td { background: var(--surface-2); }
.fi-ta-row.fi-selected > td { background: var(--accent-soft); }
.fi-ta-actions-cell .fi-ac, .fi-ta-cell .fi-ta-actions { padding: 4px 10px; gap: 8px; }
.fi-ta-actions .fi-link, .fi-ta-actions .fi-ac-link-action { font-size: 12.5px; }
.fi-ta-filter-indicators { padding: 6px 12px; font-size: 12px; background: var(--surface-2); }
.fi-pagination { font-size: 12px; color: var(--ink-3); }
.fi-ta-footer-ctn, .fi-ta-pagination { border-color: var(--line); padding: 8px 12px; }
.fi-ta-empty-state { padding: 36px 16px; }
.fi-ta-empty-state-heading { font-size: 15px; font-weight: 600; color: var(--ink); }
.fi-ta-empty-state-description { color: var(--ink-3); font-size: 13px; }
.fi-ta-empty-state-icon-bg { background: var(--accent-soft); }
.fi-ta-empty-state-icon-bg .fi-icon { color: var(--accent); }

/* Numbers: monospaced, tabular (neft.css .num/.mono). End-aligned numeric columns, and columns given ->fontFamily('mono'). */
.fi-ta-cell.fi-align-end .fi-ta-text-item, .fi-ta-cell.fi-align-right .fi-ta-text-item,
.fi-font-mono, .fi-ta-text-item.fi-font-mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 12.5px; }
/* Record numbers that link (BTH-…, NEFT2026-…): mono, accent, no wrap (ops.css `table.t td a.mono`). */
.fi-ta-text-item.fi-font-mono.fi-color-primary, .neft-recno { color: var(--accent); white-space: nowrap; font-weight: 400; }

/* Filter bar: the filters above the table (Table default AboveContent, AppServiceProvider), laid out as the design's
   .filters row: search, then selects at their natural width, then a segmented control; no box, no "Filters" heading. */
.fi-ta-filters-above-content-ctn { padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.fi-ta-filters-above-content-ctn > .fi-ta-filters { flex: 1 1 auto; }
.fi-ta-filters-above-content-ctn .fi-ta-filters-header { display: none; }
.fi-ta-filters-above-content-ctn .fi-ta-filters .fi-sc, .fi-ta-filters-above-content-ctn .fi-ta-filters > .fi-fo-component-ctn,
.fi-ta-filters-above-content-ctn .fi-sc-component > .fi-sc, .fi-ta-filters-above-content-ctn .fi-grid { display: flex !important; flex-wrap: wrap; gap: 8px; align-items: flex-end; grid-template-columns: none !important; }
.fi-ta-filters-above-content-ctn .fi-grid-col, .fi-ta-filters-above-content-ctn .fi-sc-component { grid-column: auto !important; flex: 0 1 auto; min-width: 150px; max-width: 280px; }
/* A segmented control (SegmentedFilter) takes the width of its choices. */
.fi-ta-filters-above-content-ctn .fi-sc-component:has(.fi-fo-toggle-buttons), .fi-ta-filters-above-content-ctn .fi-grid-col:has(.fi-fo-toggle-buttons) { max-width: none; flex: 0 0 auto; }
/* A segmented control (SegmentedFilter) keeps all its choices on one line. */
.fi-ta-filters-above-content-ctn .fi-grid-col:has([class*="fi-fo-toggle-buttons"]), .fi-ta-filters-above-content-ctn .fi-sc-component:has([class*="fi-fo-toggle-buttons"]) { max-width: none; flex: 0 0 auto; }
.fi-ta-filters-above-content-ctn .fi-fo-field-label-content { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.fi-ta-filters-above-content-ctn .fi-fo-field { gap: 3px; row-gap: 3px; }
/* A select names itself in its empty choice ("Course: all"), so its label is only for screen readers. */
.fi-ta-filters-above-content-ctn .fi-fo-select .fi-fo-field-label-ctn, .fi-ta-filters-above-content-ctn .fi-fo-field:has(.fi-fo-select) > .fi-fo-field-label-col,
.fi-ta-filters-above-content-ctn .fi-fo-field:has(.fi-select-input) .fi-fo-field-label-ctn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fi-ta-filters-above-content-ctn .fi-input-wrp, .fi-ta-filters-above-content-ctn .fi-select-input, .fi-ta-filters-above-content-ctn .fi-input { min-height: 34px; font-size: 13px; }
.fi-ta-filters-above-content-ctn .fi-ta-filters-actions-ctn, .fi-ta-filters-above-content-ctn .fi-ta-filters-apply-action-ctn { align-self: flex-end; }
.fi-ta-filters-above-content-ctn .fi-link { font-size: 12.5px; }
/* The table's own search box sits on the same row in the toolbar: give it the design's width. */
.fi-ta-search-field { flex: 1 1 260px; max-width: 420px; }

/* Segmented control (ops.css .seg-sm): App\Filament\Support\SegmentedFilter renders a grouped ToggleButtons. */
.neft-seg, .fi-ta-filters .fi-fo-toggle-buttons.fi-btn-group, .neft-segmented .fi-btn-group {
    display: inline-grid; grid-auto-flow: column; grid-auto-columns: auto; border: 1px solid var(--line-strong); border-radius: var(--r-xs); overflow: hidden; box-shadow: none; --tw-ring-shadow: 0 0 #0000; background: var(--surface); }
.neft-seg > button, .neft-seg > a, .fi-ta-filters .fi-fo-toggle-buttons.fi-btn-group .fi-btn, .neft-segmented .fi-btn-group .fi-btn {
    min-height: 32px; padding: 0 12px; border: 0; border-radius: 0 !important; border-inline-start: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
    font: inherit; font-size: 12.5px; font-weight: 400; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; box-shadow: none; }
.neft-seg > :first-child, .fi-ta-filters .fi-fo-toggle-buttons.fi-btn-group > :first-child .fi-btn, .fi-ta-filters .fi-fo-toggle-buttons.fi-btn-group > .fi-btn:first-of-type { border-inline-start: 0; }
.neft-seg > [aria-checked='true'], .neft-seg > [aria-pressed='true'], .neft-seg > [aria-current='page'],
.fi-ta-filters .fi-fo-toggle-buttons.fi-btn-group input:checked + .fi-btn, .neft-segmented .fi-btn-group input:checked + .fi-btn { background: var(--brand); color: #fff; font-weight: 600; }
/* Filament 5 draws grouped toggle buttons without radio inputs: the chosen one carries aria-pressed. */
.fi-ta-filters .fi-fo-toggle-buttons.fi-btn-group .fi-btn[aria-pressed='true'], .neft-segmented .fi-btn-group .fi-btn[aria-pressed='true'] { background: var(--brand); color: #fff; font-weight: 600; }
.dark .fi-ta-filters .fi-fo-toggle-buttons.fi-btn-group .fi-btn[aria-pressed='true'] { background: var(--accent); color: #0A1B22; }
.dark .neft-seg > [aria-checked='true'], .dark .fi-ta-filters .fi-fo-toggle-buttons.fi-btn-group input:checked + .fi-btn { background: var(--accent); color: #0A1B22; }
.neft-seg > :hover:not([aria-checked='true']), .fi-ta-filters .fi-fo-toggle-buttons.fi-btn-group .fi-btn:hover { background: var(--surface-2); }
.neft-usermenu-panel .neft-seg { display: grid; grid-auto-columns: 1fr; }
/* Filament 5 grouped ToggleButtons mark the choice with aria-pressed (no input:checked): the same look for both. */
.fi-ta-filters .fi-fo-toggle-buttons.fi-btn-group .fi-btn, .neft-segmented .fi-btn-group .fi-btn { background: var(--surface) !important; color: var(--ink-2) !important; }
.fi-ta-filters .fi-fo-toggle-buttons.fi-btn-group .fi-btn[aria-pressed='true'], .neft-segmented .fi-btn-group .fi-btn[aria-pressed='true'] { background: var(--brand) !important; color: #fff !important; font-weight: 600; }
.dark .fi-ta-filters .fi-fo-toggle-buttons.fi-btn-group .fi-btn[aria-pressed='true'], .dark .neft-segmented .fi-btn-group .fi-btn[aria-pressed='true'] { background: var(--accent) !important; color: #0A1B22 !important; }

/* Status tabs above a list: underlined like the design's .tabs (left-aligned, small grey counts). */
.fi-tabs { background: transparent; box-shadow: none; padding: 0; border-radius: 0; margin-inline: 0 !important; max-width: none; width: 100%;
    justify-content: flex-start; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; --tw-ring-shadow: 0 0 #0000; }
.fi-tabs-item { padding: 9px 14px; border-radius: 0; background: transparent !important; border-bottom: 2px solid transparent; margin-bottom: -1px;
    font-size: 13.5px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.fi-tabs-item:hover { color: var(--ink); }
.fi-tabs-item.fi-active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.fi-tabs-item .fi-tabs-item-label { color: inherit; font-size: 13.5px; }
.fi-tabs-item .fi-badge { background: none !important; box-shadow: none; padding: 0; font-size: 11px; font-weight: 400; color: var(--ink-3) !important; }

/* ================================================================ 7. Status chips (neft.css .chip), buttons, forms */
/* Every Filament badge reads as a design chip; the colour names map 1:1 (docs/ui-components.md "Status chips"):
   success = chip-ok · warning = chip-warn · danger = chip-bad · info = chip-info · gray = chip-neutral · primary = accent. */
.fi-badge { border-radius: 999px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; min-height: 0; gap: 4px; box-shadow: none; --tw-ring-shadow: 0 0 #0000; white-space: nowrap; }
.fi-badge.fi-color-success { background: var(--ok-soft); color: var(--ok); }
.fi-badge.fi-color-warning { background: var(--warn-soft); color: var(--warn); }
.fi-badge.fi-color-danger { background: var(--bad-soft); color: var(--bad); }
.fi-badge.fi-color-info { background: var(--info-soft); color: var(--info); }
.fi-badge.fi-color-gray, .fi-badge:not([class*='fi-color-']) { background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.fi-badge.fi-color-primary { background: var(--accent-soft); color: var(--accent); }
.fi-badge .fi-badge-label, .fi-badge .fi-icon { color: inherit; }
/* The same chips for hand-written markup: <span class="neft-chip neft-chip-ok">Valid</span> (x-neft.chip). */
.neft-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.5; }
.neft-chip-ok { background: var(--ok-soft); color: var(--ok); }
.neft-chip-warn { background: var(--warn-soft); color: var(--warn); }
.neft-chip-bad { background: var(--bad-soft); color: var(--bad); }
.neft-chip-info { background: var(--info-soft); color: var(--info); }
.neft-chip-neutral { background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.neft-chip-accent { background: var(--accent-soft); color: var(--accent); }
.neft-tag { font-family: var(--font-num); font-size: 12px; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }

/* Buttons: 34px, 6px radius, 13px semibold (ops.css density). primary = teal, gray = ghost. */
.fi-btn { border-radius: var(--r-xs); padding: 0 12px; min-height: 34px; font-size: 13px; font-weight: 600; gap: 6px; }
.fi-btn.fi-size-sm, .fi-btn.fi-size-xs { min-height: 26px; padding: 0 8px; font-size: 12px; }
.fi-btn.fi-size-lg, .fi-btn.fi-size-xl { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.fi-btn.fi-color-gray:not(.fi-outlined) { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.fi-btn.fi-color-gray:not(.fi-outlined):hover { box-shadow: inset 0 0 0 1px var(--accent); background: var(--surface); }
.fi-btn .fi-icon { width: 16px; height: 16px; }
.fi-icon-btn { border-radius: var(--r-xs); }
.fi-link { font-weight: 600; }

/* Inputs: 34px, 6px radius, line-strong border (ops.css .staff .input). */
.fi-input-wrp { border-radius: var(--r-xs); background: var(--surface); }
.fi-input, .fi-select-input { font-size: 13px; }
.fi-input { padding-block: 6px; }
.fi-fo-field-label-content, .fi-fo-field-wrp-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.fi-fo-field-wrp-helper-text, .fi-fo-field-wrp-hint, .fi-sc-text { font-size: 12px; }
.fi-modal-window { border-radius: var(--r); }
.fi-modal-heading { font-size: 15px; font-weight: 700; }
.fi-dropdown-panel { border-radius: var(--r-sm); }

/* ================================================================ 8. Shared components (docs/ui-components.md) */
/* Page with the design's 16px rhythm. */
.neft-page { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.neft-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Panel (neft.css .panel / .panel-head / .panel-body). */
.neft-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xs); min-width: 0; overflow: hidden; }
.neft-panel-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 600; }
.neft-panel-head h2, .neft-panel-head h3 { font-size: 14px; font-weight: 600; margin: 0; }
.neft-panel-head .neft-acts { margin-inline-start: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-weight: 400; font-size: 12px; }
.neft-panel-body { padding: 14px; }
.neft-panel-body.flush { padding: 0; }
/* Two-column layouts (ops.css .cols, .cols-main). */
.neft-cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.neft-cols-main { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
@media (max-width: 1280px) { .neft-cols-main { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) { .neft-cols { grid-template-columns: minmax(0, 1fr); } }
/* KPI / stat tiles (ops.css .kpis .kpi): label, big mono value, small note (ok / warn / bad). */
.neft-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.neft-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xs); text-decoration: none; color: var(--ink); min-width: 0; }
a.neft-kpi:hover { border-color: var(--accent); }
.neft-kpi .l, .neft-kpi-l { font-size: 12px; color: var(--ink-3); }
.neft-kpi .v, .neft-kpi-v { font-size: 24px; font-weight: 700; font-family: var(--font-num); line-height: 1.35; }
.neft-kpi .s, .neft-kpi-s { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neft-kpi .s.ok { color: var(--ok); font-weight: 600; } .neft-kpi .s.warn { color: var(--warn); font-weight: 600; } .neft-kpi .s.bad { color: var(--bad); font-weight: 600; }
/* Design table for hand-written lists (neft.css table.t). */
.neft-table-wrap { overflow-x: auto; }
table.neft-t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.neft-t th { text-align: start; font-weight: 600; color: var(--ink-2); background: var(--surface-2); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.neft-t td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.neft-t tr:last-child td { border-bottom: 0; }
table.neft-t tbody tr:hover td { background: var(--surface-2); }
table.neft-t .r { text-align: end; }
table.neft-t a.neft-mono { color: var(--accent); text-decoration: none; white-space: nowrap; font-size: 12.5px; }
table.neft-t a.neft-mono:hover { text-decoration: underline; }
.neft-nowrap { white-space: nowrap; }
.neft-small { font-size: 12px; }
.neft-r { text-align: end; }
/* Plain list inside a panel (ops.css .list-plain). */
.neft-list { list-style: none; margin: 0; padding: 0; }
.neft-list li { display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.neft-list li:last-child { border-bottom: 0; }
.neft-list .fi-icon, .neft-list svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
/* Horizontal bars and meters (ops.css .bar-h, .meter). */
.neft-bars { display: flex; flex-direction: column; gap: 8px; }
.neft-bar-h { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.neft-bar-h .neft-bar-l { flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neft-bar-h .neft-track { flex: 1; height: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.neft-bar-h .neft-track > span { display: block; height: 100%; background: var(--accent); }
.neft-bar-h .neft-bar-n { width: 34px; text-align: end; font-family: var(--font-num); }
.neft-meter { width: 100%; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.neft-meter > span { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.neft-meter.warn > span { background: #D89614; } .neft-meter.bad > span { background: var(--bad); }
/* Key / value list (neft.css .kv). */
.neft-kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; font-size: 13px; margin: 0; }
.neft-kv dt { color: var(--ink-3); }
.neft-kv dd { margin: 0; min-width: 0; }
.neft-ok-text { color: var(--ok); font-weight: 600; } .neft-bad-text { color: var(--bad); font-weight: 600; } .neft-warn-text { color: var(--warn); font-weight: 600; }
/* Callouts and alerts (ops.css .callout, neft.css .alert). */
.neft-callout { border-inline-start: 3px solid var(--accent); background: var(--surface-2); padding: 8px 12px; font-size: 12.5px; color: var(--ink-2); border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.neft-callout.bad { border-color: var(--bad); } .neft-callout.warn { border-color: #D89614; }
.neft-alert { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r-xs); font-size: 13px; }
.neft-alert-ok { background: var(--ok-soft); color: var(--ok); } .neft-alert-warn { background: var(--warn-soft); color: var(--warn); }
.neft-alert-bad { background: var(--bad-soft); color: var(--bad); } .neft-alert-info { background: var(--info-soft); color: var(--info); }
.neft-alert .fi-icon, .neft-alert svg { width: 18px; height: 18px; flex: none; }
.neft-alert .neft-muted { color: var(--ink-2); }
/* Empty state (inside a panel). */
.neft-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; text-align: center; color: var(--ink-3); }
.neft-empty-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.neft-empty-icon .fi-icon, .neft-empty-icon svg { width: 20px; height: 20px; }
.neft-empty strong { color: var(--ink); font-size: 14px; }
.neft-empty p { margin: 0; max-width: 420px; font-size: 13px; }
/* Design buttons for hand-written markup (neft.css .btn, ops.css density). */
.neft-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--r-xs);
    border: 1px solid transparent; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.neft-btn .fi-icon, .neft-btn svg { width: 16px; height: 16px; }
.neft-btn-primary { background: var(--accent); color: #fff; }
.dark .neft-btn-primary { color: #0A1B22; }
.neft-btn-primary:hover { filter: brightness(1.08); color: #fff; }
.neft-btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.neft-btn-ghost:hover { border-color: var(--accent); color: var(--ink); }
.neft-btn-xs { min-height: 26px; padding: 0 8px; font-size: 12px; }
/* Avatars by kind of actor (ops-32/33 .av): staff = accent, system = neutral, ERP = info, learner/trainee = warn. */
.neft-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.neft-av.sys { background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.neft-av.erp { background: var(--info-soft); color: var(--info); }
.neft-av.self { background: var(--warn-soft); color: var(--warn); }
.neft-av .fi-icon, .neft-av svg { width: 15px; height: 15px; }
.neft-src { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink-2); white-space: nowrap; }
.neft-sens { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; font-weight: 700; color: var(--warn); background: var(--warn-soft); padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
.neft-via { font-size: 11px; color: var(--info); background: var(--info-soft); padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
/* History icon button (CONVENTIONS "History icon"; ops-32 .hist). Filament's HistoryAction gets the same look. */
.neft-hist, .fi-ac-icon-btn-action.neft-hist-btn, .fi-icon-btn.neft-hist-btn { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: var(--r-xs); border: 1px solid transparent; background: transparent; color: var(--ink-3); cursor: pointer; padding: 0; }
.neft-hist:hover, .neft-hist:focus-visible, .fi-icon-btn.neft-hist-btn:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.neft-hist .fi-icon, .neft-hist svg, .fi-icon-btn.neft-hist-btn .fi-icon { width: 16px; height: 16px; }

@media (max-width: 720px) { .neft-kv { grid-template-columns: 1fr; } .fi-main { padding: 16px; } }

/* ================================================================ 9. History side panel (ops-32) and Activity (ops-33) */
.fi-modal-window:has(.neft-tl) { max-width: 500px; }
.fi-modal-window:has(.neft-tl) .fi-modal-header { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.fi-modal-window:has(.neft-tl) .fi-modal-content { padding: 0; gap: 0; }
.fi-modal-window:has(.neft-tl) .fi-modal-footer { display: none; }
.neft-tl-head .neft-seg { width: 100%; grid-auto-columns: 1fr; }
.neft-tl { display: flex; flex-direction: column; min-height: 100%; }
.neft-tl-head { padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.neft-tl-head .neft-seg { width: max-content; }
.neft-tl-count { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-3); }
.neft-tl-body { flex: 1; padding: 0 14px 10px; }
.neft-tl-day { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 10px 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; margin: 0; }
.neft-evs { list-style: none; margin: 0; padding: 0; }
.neft-ev { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.neft-ev:last-child { border-bottom: 0; }
.neft-ev .neft-av { width: 30px; height: 30px; font-size: 11px; }
.neft-ev-top { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; }
.neft-ev-who { font-weight: 600; }
.neft-ev-role { color: var(--ink-3); font-size: 11.5px; }
.neft-ev-top time { margin-inline-start: auto; font-family: var(--font-num); font-size: 11px; color: var(--ink-3); }
.neft-ev-what { font-size: 13px; margin-top: 2px; }
.neft-ev-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 5px; }
.neft-diff { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 12px; }
.neft-diff th { text-align: start; font-weight: 600; color: var(--ink-3); padding: 3px 6px 3px 0; width: 110px; vertical-align: top; font-size: 11.5px; overflow-wrap: anywhere; }
.neft-diff td { padding: 3px 6px; vertical-align: top; overflow-wrap: anywhere; }
.neft-diff .old { color: var(--bad); background: var(--bad-soft); text-decoration: line-through; border-radius: 3px; font-family: var(--font-num); font-size: 11.5px; }
.neft-diff .new { color: var(--ok); background: var(--ok-soft); border-radius: 3px; font-family: var(--font-num); font-size: 11.5px; }
.neft-diff .arr { color: var(--ink-3); padding: 3px 2px; width: 12px; }
.neft-reason { margin-top: 5px; font-size: 12px; color: var(--ink-2); border-inline-start: 2px solid var(--line-strong); padding-inline-start: 8px; }
.neft-reason b { font-weight: 600; color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-inline-end: 4px; }
.neft-from { font-size: 11px; color: var(--ink-3); font-family: var(--font-num); margin-top: 4px; }
.neft-tl-foot { position: sticky; bottom: 0; border-top: 1px solid var(--line); padding: 8px 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; background: var(--surface-2); flex-wrap: wrap; }
.neft-verified { display: inline-flex; gap: 5px; align-items: center; color: var(--ok); font-weight: 600; }
.neft-verified .fi-icon, .neft-verified svg { width: 14px; height: 14px; }
.neft-tl-foot a { margin-inline-start: auto; color: var(--accent); }

/* Activity (ops-33): chain banner, filter grid, rows that expand into the full diff. */
.neft-chain { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r-xs); background: var(--ok-soft); color: var(--ok); font-size: 13px; }
.neft-chain.warn { background: var(--warn-soft); color: var(--warn); }
.neft-chain .fi-icon, .neft-chain svg { width: 18px; height: 18px; flex: none; }
.neft-chain .neft-muted { color: var(--ink-2); }
.neft-who { display: flex; gap: 8px; align-items: center; }
.neft-who .neft-r2 { display: block; font-size: 11px; color: var(--ink-3); }
.neft-exp { width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface); color: var(--ink-2); display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.neft-exp .fi-icon, .neft-exp svg { width: 14px; height: 14px; transition: transform .15s; }
.neft-exp[aria-expanded='true'] svg, .neft-exp[aria-expanded='true'] .fi-icon { transform: rotate(90deg); }
[dir='rtl'] .neft-exp svg { transform: scaleX(-1); }
.neft-exp[aria-expanded='true'] { border-color: var(--accent); color: var(--accent); }
tr.neft-open > td { background: var(--accent-soft) !important; }
tr.neft-detail > td { background: var(--surface-2) !important; padding: 0 !important; }
.neft-detail-in { padding: 14px 16px 16px 52px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
.neft-detail-in h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 0 0 6px; }
.neft-detail-in .neft-diff { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xs); }
.neft-detail-in .neft-diff th, .neft-detail-in .neft-diff td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.neft-hashes { font-family: var(--font-num); font-size: 11.5px; word-break: break-all; margin: 0; }
.neft-hashes dt { font-family: var(--font-ui); color: var(--ink-3); font-size: 11.5px; margin-top: 6px; }
.neft-hashes dd { margin: 0; }
@media (max-width: 1100px) { .neft-detail-in { grid-template-columns: 1fr; padding-inline-start: 16px; } }

/* Audit entry details (older modal view, filament/audit/changes). */
.neft-audit-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; margin: 0 0 12px; }
.neft-audit-meta dt { font-size: 11.5px; color: var(--ink-3); }
.neft-audit-meta dd { margin: 0; overflow-wrap: anywhere; }
.neft-audit-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.neft-audit-table th { text-align: start; font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 6px 8px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.neft-audit-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; font-family: var(--font-num); }
.neft-audit-table td:first-child { font-family: var(--font-ui); color: var(--ink-2); white-space: nowrap; }

/* ================================================================ 10. Multi-window desktop (ADR 0007; design ops-00) */
/* Windows stack in their own layer under the top bar (30) and side menu (20). */
#neft-desktop { position: relative; z-index: 15; }
/* The desktop: dotted surface (ops.css .desktop), the page itself opens as a window. */
html:not(.neft-embedded) body:has(#neft-desktop) .fi-main { display: none; }
html:not(.neft-embedded) body:has(#neft-desktop) .fi-main-ctn { position: relative; min-height: calc(100vh - 52px); background-color: var(--surface-2);
    background-image: radial-gradient(var(--line-strong) 1px, transparent 1px); background-size: 18px 18px; }
html:not(.neft-embedded) body:has(#neft-desktop) .fi-main-ctn::before {
    content: ''; position: absolute; inset: 0 0 40px 0; pointer-events: none;
    background: url('neft-logo-white.png') center / min(340px, 40%) no-repeat; filter: brightness(0); opacity: .05; }
html.dark:not(.neft-embedded) body:has(#neft-desktop) .fi-main-ctn::before { filter: none; opacity: .08; }
/* Taskbar (ops.css .taskbar). */
#neft-taskbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 9000; height: 40px; display: flex; gap: 6px; align-items: center;
    padding: 0 10px; background: var(--surface); border-top: 1px solid var(--line); overflow-x: auto; font-size: 12px; }
body.fi-body:has(#neft-taskbar) .fi-main-ctn { padding-bottom: 40px; }
.neft-task-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; height: 28px; padding: 0 12px; border: 1px solid var(--line);
    border-radius: 6px; background: var(--surface-2); color: var(--ink-2); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; font: inherit; font-size: 12px; }
.neft-task-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.neft-task-btn.neft-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.neft-task-btn.neft-min { opacity: .8; font-style: italic; }
.neft-task-empty { color: var(--ink-3); }
/* A window (ops.css .win): grey title bar; the front one has a navy title bar and an accent border. */
.neft-win { position: fixed; display: flex; flex-direction: column; min-width: 300px; min-height: 180px; background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 14px 40px rgba(16, 35, 43, .22); overflow: hidden; }
.neft-win.neft-active { border-color: var(--accent); box-shadow: 0 18px 50px rgba(16, 35, 43, .32); }
.dark .neft-win { box-shadow: 0 14px 40px rgba(0, 0, 0, .55); }
.neft-win-bar { display: flex; align-items: center; gap: 8px; height: 34px; padding-inline: 12px 6px; background: var(--surface-2);
    border-bottom: 1px solid var(--line); cursor: move; user-select: none; flex: none; color: var(--ink); }
.neft-win.neft-active .neft-win-bar { background: var(--brand); color: #fff; border-bottom-color: var(--brand); }
.neft-win-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 12.5px; }
.neft-win-bar button { width: 28px; height: 26px; border: 0; border-radius: 5px; background: transparent; color: inherit; cursor: pointer;
    font-size: 13px; line-height: 1; display: grid; place-items: center; }
.neft-win-bar button:hover { background: rgba(127, 127, 127, .2); }
.neft-win-bar button.neft-win-x:hover { background: var(--bad); color: #fff; }
.neft-win-frame { flex: 1; width: 100%; border: 0; background: var(--bg); }
.neft-win.neft-max { border-radius: 0; }
.neft-win-h { position: absolute; z-index: 2; }
.neft-win-h[data-d='n'] { top: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.neft-win-h[data-d='s'] { bottom: -3px; left: 8px; right: 8px; height: 7px; cursor: ns-resize; }
.neft-win-h[data-d='e'] { right: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.neft-win-h[data-d='w'] { left: -3px; top: 8px; bottom: 8px; width: 7px; cursor: ew-resize; }
.neft-win-h[data-d='ne'] { right: -3px; top: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
.neft-win-h[data-d='sw'] { left: -3px; bottom: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
.neft-win-h[data-d='nw'] { left: -3px; top: -3px; width: 12px; height: 12px; cursor: nwse-resize; }
.neft-win-h[data-d='se'] { right: -3px; bottom: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
.neft-win.neft-max .neft-win-h { display: none; }
body.neft-dragging .neft-win-frame { pointer-events: none; }
body.neft-dragging { user-select: none; }
/* In-app confirm (never a browser dialog). */
.neft-win-ask { position: absolute; inset: 34px 0 0 0; z-index: 3; display: grid; place-items: center; background: rgba(10, 27, 34, .45); }
.neft-win-ask > div { max-width: 360px; padding: 16px; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.neft-win-ask p { margin: 6px 0 14px; color: var(--ink-2); }
.neft-win-ask .neft-win-ask-acts { display: flex; gap: 8px; justify-content: flex-end; }
.neft-win-ask button { min-height: 32px; padding: 0 12px; border-radius: var(--r-xs); border: 1px solid var(--line-strong); background: var(--surface); color: inherit; cursor: pointer; font: inherit; font-weight: 600; }
.neft-win-ask button.neft-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
/* A page inside a window: no side menu, top bar or footer of its own; full width. */
html.neft-embedded .fi-sidebar, html.neft-embedded .fi-topbar, html.neft-embedded .fi-topbar-ctn, html.neft-embedded .neft-company-line,
html.neft-embedded .fi-sidebar-close-overlay, html.neft-embedded #neft-taskbar, html.neft-embedded #neft-desktop { display: none !important; }
html.neft-embedded .fi-main-ctn { margin-inline-start: 0 !important; padding-inline-start: 0 !important; width: 100% !important; }
html.neft-embedded .fi-main { max-width: none; padding: 12px; }

/* Every click visibly registers (lms.js §6): a thin bar along the top while the server works; a dimmed table while a
   list tab loads its rows. */
.neft-progress { position: fixed; top: 0; inset-inline: 0; height: 2px; z-index: 10000; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, transparent, var(--accent-bright) 30%, var(--accent-bright) 70%, transparent); background-size: 200% 100%; transition: opacity .15s; }
.neft-progress.neft-on { opacity: 1; animation: neft-progress 1s linear infinite; }
@keyframes neft-progress { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .neft-progress.neft-on { animation: none; background: var(--accent-bright); } }
.fi-ta-ctn.neft-busy { opacity: .55; transition: opacity .1s; cursor: progress; }

/* Standard table: Excel-style resizable columns (ERP F-39). */
table.neft-std-table td { overflow: hidden; }
table.neft-std-table td .fi-ta-text-item, table.neft-std-table td .fi-ta-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; unicode-bidi: plaintext; }
/* A column declared ->wrap() wraps as the design draws it (ops-02 Course, Companies). */
table.neft-std-table td .fi-ta-text.fi-wrapped, table.neft-std-table td .fi-ta-text.fi-wrapped .fi-ta-text-item { white-space: normal; text-overflow: clip; }
/* A column marked ->wrap() (or a stacked two-line cell, .neft-who) wraps as the design draws it, instead of the ellipsis. */
table.neft-std-table td .fi-ta-text-item.fi-wrapped, table.neft-std-table td .fi-ta-text-item:has(.neft-who) { white-space: normal; text-overflow: clip; }
th.neft-resizable-th { position: relative; }
.neft-col-resizer { position: absolute; inset-block: 0; inset-inline-end: -3px; width: 7px; cursor: col-resize; z-index: 2; touch-action: none; }
.neft-col-resizer::after { content: ''; position: absolute; inset-block: 25%; inset-inline-start: 3px; width: 1px; background: var(--line-strong); }
.neft-col-resizer:hover::after, body.neft-col-resizing .neft-col-resizer::after { background: var(--accent); width: 2px; }
body.neft-col-resizing { cursor: col-resize; user-select: none; }

/* Banners kept from the ERP. */
.neft-test-banner { background: var(--bad); color: #fff; font-weight: 700; font-size: 12px; text-align: center; padding: 3px 8px; letter-spacing: .04em; }
.neft-sandbox-banner { background: #ea580c; color: #fff; font-weight: 600; font-size: 12px; text-align: center; padding: 3px 8px; letter-spacing: .04em; }

/* Primary buttons in the exact accent (Filament mixes its own shade otherwise). */
.fi-btn.fi-color-primary:not(.fi-outlined) { background: var(--accent); color: #fff; }
.fi-btn.fi-color-primary:not(.fi-outlined):hover { background: var(--accent); filter: brightness(1.08); }
.dark .fi-btn.fi-color-primary:not(.fi-outlined) { color: #0A1B22; }
.fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon { color: inherit; }
table.neft-t a.neft-mono { text-decoration: underline; text-underline-offset: 2px; }

/* Hand-built filter panels (Activity, reports): a grid of labelled fields (ops-33 .fgrid), and design inputs. */
.neft-fgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); align-items: end; }
.neft-fgrid .wide { grid-column: span 2; }
@media (max-width: 1100px) { .neft-fgrid .wide { grid-column: auto; } }
.neft-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); min-width: 0; }
.neft-input { width: 100%; min-height: 34px; padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 400; }
.neft-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.dark .neft-input { color-scheme: dark; }
.neft-pager { padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }