/* ===== Migalink ICT — IFMIS Design Tokens (Trust Blue) =====
   SINGLE SOURCE OF TRUTH. Loaded before site.css and Bootstrap overrides.
   Never hard-code a hex in a screen — reference a token here. */
:root{
  /* Brand blue ramp */
  --blue-900:#0D2B5E;   /* deepest — sidebar */
  --blue-800:#0D47A1;   /* primary hover/active */
  --blue-700:#1565C0;   /* PRIMARY */
  --blue-400:#5B9BD5;   /* accents */
  --blue-200:#BFD9F2;   /* light accents / sidebar text */

  /* Semantic roles */
  --color-primary:var(--blue-700);
  --color-primary-hover:var(--blue-800);
  --color-primary-subtle:#E1EFFB;

  /* Surfaces & text */
  --sidebar-bg:#243A6B;      /* sidebar background (softer navy) */
  --color-bg:#F4F7FB;        /* page background */
  --color-surface:#FFFFFF;   /* cards */
  --color-ink:#1A2A3A;       /* primary text */
  --color-muted:#5B6B7E;     /* secondary text */
  --color-border:#E2E8F0;    /* borders / dividers */
  --color-bg-subtle:#EEF2F7; /* neutral chips / locked fields */
  /* UI-07 (BOSS 2026-10-22) - two border shades the screens typed in by hand. Both are values site.css already
     uses: --input-border for the outline of an input / picker button (site.css .inp, .field, select.sel),
     --row-line for the light rule between table rows (site.css tbody td). Named here so no page spells them out. */
  --input-border:#CBD5E1;    /* input / picker-button outline */
  --row-line:#EEF1F6;        /* rule between table rows */

  /* Secondary text on the two dark surfaces (D-254 #5). Each stays dimmer than the main text around it but
     keeps 12px text at WCAG AA (4.5:1 or better), so a caption can look quieter without becoming hard to read.
     --rail-muted     sidebar module names and captions on --sidebar-bg (5.3:1). The old .45 / .40 whites
                      were 3.6:1 / 3.2:1.
     --auth-fineprint the login page's Data Privacy notice on the dark login gradient (5.4:1 even on the
                      gradient's lightest blue, #103A78). The old .62 was 4.2:1 there. */
  --rail-muted:rgba(255,255,255,.62);
  --auth-fineprint:rgba(207,224,245,.75);
  /* D-318 N1 — the "Powered by" line on the sidebar brand (the sign-in page's .auth-powered colour). */
  --powered-text:#BCD0EC;

  /* Functional status (green positive; amber/red ALERTS only; blue info) */
  --ok:#15803D;     --ok-bg:#DCFCE7;     --ok-line:#BBF7D0;
  --info:#1565C0;   --info-bg:#E1EFFB;
  --warn:#B45309;   --warn-bg:#FEF3C7;   --warn-line:#FDE68A;
  --danger:#B91C1C; --danger-bg:#FEE2E2; --danger-line:#FECACA;

  /* COA account-class colours (GAM 5-class set; tree dots + class badges).
     Asset/Liability/Equity alias the existing ramp; Income/Expense are new. */
  --coa-cls-asset:var(--color-primary);
  --coa-cls-liability:var(--warn);
  --coa-cls-equity:var(--ok);
  --coa-cls-income:#0EA5A4;
  --coa-cls-expense:#7C3AED;

  /* Semi-expendable purple (E2E302 tokens sweep). The PPE screens tell the two asset families apart by
     colour — capitalised PPE reads blue (the primary ramp), Semi-Expendable reads purple. The ink is the
     same violet the COA Expense class already uses; the two tints below are its subtle/line companions,
     so the whole app has ONE definition of "semi-expendable purple" instead of raw hexes per screen. */
  --semi:#6D28D9;   --semi-bg:#F7F4FE;   --semi-line:#C9BCF2;   --semi-subtle:#F2EEFE;

  /* Excel-style range selection on report / List grids (D-203). The fill is one step lighter than
     --blue-200 so a highlighted block reads as "selected" without competing with the row text; the
     outline is the ramp's accent blue. Both live here so no screen spells the highlight out by hand. */
  --sel-bg:#D6E8FA;
  --sel-line:var(--blue-400);

  /* Modal scrim & lift. Every picker / confirm pop-up in the app draws the same deep-blue wash (--blue-900 at 42%)
     and the same drop shadow; naming them here keeps a screen from spelling the raw rgba() out by hand, which the
     "never hard-code a hex in a screen" brand rule forbids. */
  --overlay-scrim:rgba(13,43,94,.42);
  --overlay-shadow:0 22px 60px rgba(13,43,94,.32);

  /* Typography */
  --font-sans:"Segoe UI",system-ui,-apple-system,sans-serif;
  /* --fs-label is also the FLOOR (D-254 #5): no text in the app is set smaller than 12px. A caption that has
     to look quieter than the text around it steps down in weight or in colour (--color-muted), never in size. */
  --fs-label:12px; --fs-sm:13px; --fs-body:15px;
  --fs-card:20px;  --fs-section:24px; --fs-title:30px;

  /* Letter case (D-254 #5). BOSS 2026-09-25: KEEP ALL CAPS for table heads and module names (--case-long-label).
     The tokens stay so the choice lives in one place. Original note: ALL CAPS reads well for a word or two and badly for
     a phrase, so it is kept ONLY for SHORT labels: a field caption on the login card, a one-word sidebar tag
     like "Recent". A label that can run long (a table column head, a sidebar module name, a service-window
     name) is shown as it is written, in Title Case, and keeps its rank by weight and the muted colour.
     To bring back the old all-caps table heads, set --case-long-label:uppercase and
     --tracking-long-label:.04em. If you do, recheck th.col-code-sm in site.css: "EMPLOYEE ID" in 12px caps
     needs about 111px, and that column is 110px. */
  --case-short-label:uppercase; --tracking-short-label:.06em;
  --case-long-label:uppercase;  --tracking-long-label:.04em;

  /* Shape & spacing */
  --radius-sm:8px; --radius-md:10px; --radius-lg:12px; --radius-pill:999px;
  --shadow-card:0 2px 8px rgba(21,101,192,.10);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px;
  --control-h:44px;   /* min touch target; R18 FS-HEIGHT: THE height of an input, select and button in a form row */
  --control-h-grid:36px;   /* R18 FS-HEIGHT: the compact height of an input / select inside a grid cell */
  --w-live-search:360px;   /* LS — the List tab search box (no longer stretched across the row) */
  /* Short-field widths. R21 FS-FULL: entry header fields no longer use these (they fill their column);
     what is left is for List filters and grid cells only. */
  --w-year:120px;     /* a Year filter on a List tab */
  --w-code:220px;     /* a short code typed in a grid cell */
  --w-select:420px;   /* a filter dropdown on a List tab (fits the longest option) */
  --w-queue-window:288px;   /* R23 X1c: the Queue Console Service window filter (fits "ACCTG — Accounting / Disbursement") */
  /* R18 FS-CLIP — lookups and grid dropdowns */
  --w-lookup-code:calc(12ch + 28px);   /* the code box of a code + name lookup (fits a 12-character code such as E-MABINI-002) */
  --w-grid-select:160px;   /* least width of a dropdown in a grid cell */
  --w-grid-text:260px;     /* least width of a description / name / notes box in a grid */
  /* R18 FS-AMT */
  --w-grid-amt:150px;      /* least width of an amount box in a grid (fits 999,999,999.99) */
  --w-grid-qty:120px;      /* a quantity / stock / balance column in a grid */
  --w-grid-acct-code:calc(11ch + 28px);   /* least width of a grid account-code box (fits 1-01-01-010 + padding) */
  /* R18 AL-LABEL */
  --label-w:200px;         /* the label column of an entry header card and of the RPT forms */
  /* R25 CL-09 (site.css "R25 CLEANUP CL-09") */
  --gw-money:170px;        /* R25 CL-09 — a grid column holding the shared money box: the 150px (--w-grid-amt) box plus its cell padding */
  --gw-desc-sm:190px;      /* R29 PRhead option B (D-285 item 9) — Purchase Request Item / Technical Description: 190px each, the grid scrolls sideways to Total at 1366 */
  --gw-desc:220px;         /* R25 CL-09 option C — a description column that holds a set width, so a wide grid scrolls sideways in its own wrapper (Inventory Adjustment Item Description) */
  /* R19 GR-LISTWRAP */
  --w-list-no:130px;       /* least width of the document-number column of a List tab register */
  /* R19 GR-TOTAL */
  --inp-text-inset:14px;   /* an input's text sits this far inside its cell (13px .inp padding + 1px border) */
  /* R20 Fix 8 GR-FIT — the column widths of a line grid that fits the card (site.css "R20 line grids fit the card") */
  --gw-no:40px;            /* the row number (#) */
  --gw-short:70px;         /* a short value: UOM, EUL, version, file type */
  --gw-qty:100px;          /* a quantity / stock / balance / size / TIN */
  --gw-sel:100px;          /* a short dropdown: unit of measure, asset type */
  --gw-btn:80px;           /* one small labelled row button (Units / View) */
  --gw-ref:130px;          /* a reference / document number (OR, PCV, DV, check) */
  --gw-code:150px;         /* an item / SL type code (fits 1-01-01-010) */
  --gw-acct:180px;         /* an account code with its look-up button (fits 1-01-01-010 beside the magnifier; R22 CL-04: 170 -> 180 so it also fits in an 11px-padded cell) */
  --gw-date:130px;         /* a date (MM/DD/YYYY) */
  --gw-dt:165px;           /* a date and time */
  --gw-amt:140px;          /* an amount (fits 9,999,999.99 in a box; 999,999,999.99 as text) */
  --gw-act:44px;           /* the delete / tick column: one 44px control */
  --gw-acts:220px;         /* two labelled row actions (Restore + Download) */
  /* R22 CL-01 — List register columns (site.css "R22 CLEANUP CL-01..03") */
  --lw-fund:120px;         /* Fund */
  --lw-by:170px;           /* Created By */
  --lw-type:200px;         /* a transaction / request type */
  --lw-date:110px;         /* a date (MM/DD/YYYY) */
  --lw-rmk:220px;          /* Remarks: one line, cut with "..." beyond this */
  --lw-wide:15%;           /* a long name column's share of the table (Transaction Approval Type / Current Level): ~137px at 1366, 230px+ at 1920 */
  --lw-view:90px;          /* one small View button (R22 CL-01 check: 80 -> 90, the button with its icon needs 89) */
  /* R22 CL-01 browser check — the columns of a register that fits its card (table.list-fit) */
  --lw-no:140px;           /* a document number (fits PPE-ISS-2026-0083) */
  --lw-no-long:156px;      /* a longer document number (fits PAYREL-2026-10-0058) */
  --lw-bank:110px;         /* a bank account number (fits 0050-9876-21; the bank name is on hover) */
  --lw-stat:112px;        /* a status pill (fits "For Approval" / "Disapproved") */
  --lw-amt:116px;          /* an amount (fits 999,999,999.99; a head such as "Total Appropriation" wraps to it) */
  --lw-qty:84px;           /* a total quantity */
  --lw-yr:64px;            /* a year (Budget Year) */
  --lw-when:150px;         /* a date and time with "by" name under it (Submitted) */
  --lw-approve:220px;      /* the Approve and Disapprove buttons side by side */
  --lw-date-fit:90px;      /* a date (MM/DD/YYYY) in a register that fits its card */
  --lw-tdate:104px;        /* a date under the longer "Transaction Date" head (the head wraps to TRANSACTION) */
  --lw-fund-fit:10%;       /* Fund, a share of the table: ~104px at 1366 (fits General Fund; Special Education Fund is cut with "..."), ~160px at 1920 */
  --lw-by-fit:14.5%;       /* Created By, a share of the table: ~150px at 1366, ~230px at 1920 */
  /* R22 CL-02 */
  --w-lookup-code-sm:90px; /* the code box of an office lookup (a short office code such as 1051), so the name box gets the room */
  /* R22 CL-04 — more gw-* widths for the code, account and quantity columns (site.css "R22 CLEANUP CL-04..06") */
  --gw-code-pick:220px;    /* an item code with its look-up button (fits 14111507-PP-M01 beside the magnifier) */
  --gw-item:170px;         /* an item code box with no look-up button (fits 14111507-PP-M01) */
  --gw-acct-code:130px;    /* an account code box with no look-up button (fits 1-01-01-010) */
  --gw-uom:130px;          /* a unit-of-measure dropdown (fits "Cubic Meter" beside the arrow) */
  --gw-qty-in:120px;       /* a quantity box (fits 999,999.99; a number box fits 9999999.99) */
  --gw-price:120px;        /* a unit price / unit cost box */
  --gw-sl-type:170px;      /* an SL type code with its look-up button (fits EMPLOYEE beside the magnifier) */
  --gw-sl-sel:140px;       /* an SL type dropdown (fits EMPLOYEE) */
  --gw-sl-ref:200px;       /* an SL reference name */
  --gw-exp-acct:280px;     /* an expense account (code and name) with its look-up button */
  /* R22 CL-05 */
  --gw-or:150px;           /* an OR / invoice reference (Cash Advance Liquidation expenses) */
  --gw-amt-txt:106px;      /* an amount shown as text (fits 999,999,999.99 and an OUTSTANDING head) — Payment Release DVs to Release */
  --gw-ref-sm:110px;       /* a short reference (Check / ADA, Reference No) */
  --gw-dvno:146px;         /* a DV number as text (fits SITCA-2026-08-9001) */
  --gw-date-in:144px;    /* a date box with its picker icon: the box (124px+ inside the cell padding) shows MM/DD/YYYY in full */
  /* R22 Fix 8 follow-up (site.css "R22 FIX 8 FOLLOW-UP") */
  --gw-amt-in:140px;       /* an amount box that must show 9,999,999.99 in full, also in a dense grid (PPE Issuance Unit Cost / Amount, Purchase Request Unit Cost) */
  --gw-stat:56px;          /* a short status word (Paid / Partial / Unpaid) under a STATUS head */
  --gw-tin:136px;          /* a TIN in full, 123-456-789-00000, in a 12px grid (N5 option B: BIR Filing detailed report) */

  /* Bootstrap 5.3 overrides (CSS-variable theming — NO recompile needed) */
  --bs-primary:#1565C0;
  --bs-primary-rgb:21,101,192;
  --bs-link-color:#1565C0;
  --bs-link-color-rgb:21,101,192;
  --bs-link-hover-color:#0D47A1;
  --bs-body-font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  --bs-body-color:#1A2A3A;
  --bs-body-bg:#F4F7FB;
  --bs-border-radius:.625rem;
}