/* ===== Migalink ICT — HIMS component kit (Trust Blue) =====
Tokens live in tokens.css (loaded first). This file = shared components. */
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-sans);background:var(--color-bg);color:var(--color-ink);font-size:var(--fs-body);line-height:1.5;}
/* D-254 #5: the 12px floor (--fs-label) also covers Bootstrap's two RELATIVE sizes. .badge is .75em and
small/.small is .875em of the parent, so a badge in a 14px grid cell came out at 10.5px. max() keeps them
relative wherever they are already big enough and lifts them only where they would drop under the floor. */
.badge{font-size:max(.75em,var(--fs-label));}
small,.small{font-size:max(.875em,var(--fs-label));}
/* F-616 (BOSS 2026-11-03): Edge draws its own reveal (eye) and clear buttons inside every password box, next to
the IFMIS eye button. Hide the browser's ones system-wide so each password box shows exactly one eye: ours. */
input[type="password"]::-ms-reveal,input[type="password"]::-ms-clear{display:none;}
.app{display:flex;min-height:100vh;}
/* sidebar (dark) */
.rail{width:var(--rail-w,232px);position:relative;background:var(--sidebar-bg);border-right:1px solid rgba(255,255,255,.08);padding:18px 14px;flex-shrink:0;position:sticky;top:0;height:100vh;align-self:flex-start;overflow-y:auto;}
/* BOSS finding #56 (2026-09-01): the brand is centred in the rail and a size down (24px mark, 14px wordmark). */
.brand{display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 6px 22px;}
.brand .wordmark{font-size:14px;color:#fff;letter-spacing:-.01em;}
.brand .wordmark b{font-weight:800;}
.brand .wordmark .ict{color:var(--blue-200);font-weight:700;margin-left:2px;}
/* D-318 N1 (BOSS 2026-11-02): the main sidebar brand is "Powered by Migalink" — the sign-in page's .auth-powered look. */
.brand .brand-powered{font-size:12px;color:var(--powered-text);white-space:nowrap;}
.brand .brand-powered b{color:var(--color-surface);font-weight:800;letter-spacing:.04em;}
.nav{display:flex;flex-direction:column;gap:2px;}
.nav-group{display:flex;flex-direction:column;}
.nav-mod{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border:none;background:transparent;color:var(--blue-200);font-size:14px;font-weight:600;border-radius:var(--radius-md);cursor:pointer;text-align:left;}
.nav-mod .ico{width:18px;opacity:.85;display:inline-flex;justify-content:center;}
.nav-mod .nav-mod-title{flex:1;}
.nav-mod .chev{font-size:12px;opacity:.8;transition:transform .2s ease;}
.nav-mod:hover{background:rgba(255,255,255,.10);color:#fff;}
.nav-mod[aria-expanded="true"]{background:rgba(255,255,255,.06);color:#fff;}
.nav-mod[aria-expanded="true"] .chev{transform:rotate(180deg);}
.nav-sub{display:flex;flex-direction:column;gap:1px;padding:2px 0 6px;}
a.nav-item{display:block;padding:9px 12px 9px 42px;color:var(--blue-200);text-decoration:none;font-size:13.5px;border-radius:var(--radius-md);}
a.nav-item:hover{background:rgba(255,255,255,.08);color:#fff;}
a.nav-item.active{background:var(--color-primary);color:#fff;font-weight:600;}
.nav-mod:focus-visible,a.nav-item:focus-visible{outline:2px solid #fff;outline-offset:2px;}
/* ===== Function-first sidebar (Concept C — Setup / Entry / Reports tabs, D-64) ===== */
.navc{display:flex;flex-direction:column;gap:2px;}
.navc-pins{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
/* D-296 DB = C: the Dashboard button is an outlined row with a blue icon tile. */
.navc-pin{display:flex;align-items:center;min-height:48px;gap:12px;padding:6px 10px;color:var(--color-surface);text-decoration:none;font-size:14px;font-weight:700;background:transparent;border:1.5px solid var(--blue-400);border-radius:10px;}
.navc-pin i{width:32px;height:32px;display:grid;place-items:center;background:var(--color-primary);color:var(--color-surface);border-radius:8px;font-size:17px;}
.navc-pin:hover,.navc-pin.active{background:var(--blue-200);color:var(--blue-900);border-color:var(--blue-200);}
.navc-tabs{display:flex;gap:4px;background:rgba(0,0,0,.18);padding:4px;border-radius:10px;margin:2px 0 10px;}
.navc-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:transparent;color:var(--blue-200);font:inherit;font-weight:700;font-size:12px;padding:8px 4px;border-radius:7px;cursor:pointer;}
.navc-tab .navc-tab-c{font-size:var(--fs-label);font-weight:700;opacity:.7;}
.navc-tab:hover{color:#fff;}
.navc-tab.on{background:#fff;color:var(--color-primary-hover);}
.navc-tab.on .navc-tab-c{color:var(--color-primary);opacity:1;}
.navc-sec{display:none;flex-direction:column;gap:1px;}
.navc-sec.show{display:flex;}
/* D-254 #5: a module name is a LONG label ("Treasury — Collections & Cashiering" is 35 characters), so it is
shown as written rather than in caps. Bold weight and --rail-muted keep it reading as the group heading. */
.navc-modhead{display:flex;align-items:center;gap:9px;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--tracking-long-label);text-transform:var(--case-long-label);color:var(--rail-muted);margin:13px 8px 3px;}
.navc-modhead i{font-size:13px;color:var(--blue-400);}
a.navc-scr{display:block;padding:8px 12px 8px 30px;color:var(--blue-200);text-decoration:none;font-size:13.5px;border-radius:var(--radius-md);}
a.navc-scr:hover{background:rgba(255,255,255,.08);color:#fff;}
a.navc-scr.active{background:var(--color-primary);color:#fff;font-weight:600;}
.navc-empty{color:var(--blue-400);font-size:12px;font-style:italic;margin:12px 10px;opacity:.7;}
.navc-tab:focus-visible,a.navc-scr:focus-visible,.navc-pin:focus-visible{outline:2px solid #fff;outline-offset:2px;}
/* main */
.main{flex:1;padding:0 0 40px;min-width:0;} /* T3: min-width:0 lets inner table-scroll areas scroll instead of widening the page */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:15px 26px;border-bottom:1px solid var(--color-border);background:var(--color-surface);position:sticky;top:0;z-index:10;}
.topbar .title{display:flex;align-items:center;gap:11px;font-weight:700;font-size:15px;color:var(--color-primary);}
.user{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--color-muted);}
.user .av{width:32px;height:32px;border-radius:50%;background:var(--blue-400);}
.wrap{padding:24px 26px;}
.crumb{font-size:13px;color:var(--color-muted);margin-bottom:16px;}
.crumb a{color:var(--color-primary);text-decoration:none;font-weight:600;}
/* BOSS 2026-08-04 — overflow:CLIP, not hidden. Both clip the same way (they keep the rounded corners off
tables and toolbars), but `hidden` makes the card a scroll container, and a scroll container is where a
position:sticky child sticks. With `hidden` the sticky toolbar below would compile, look correct, and do
nothing on screen. `clip` does not create one, so the toolbar can pin to the viewport instead. */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);margin-bottom:20px;box-shadow:var(--shadow-card);overflow:clip;}
/* toolbar */
/* BOSS 2026-08-04 — the toolbar freezes on scroll so New / Save / Process / Delete stay reachable on a long
entry form instead of making the user scroll back to the top. top:54px clears the sticky .topbar, and
z-index:9 sits just under it — the same pair .form-actions already uses. No screen carries both, so they
never collide. Pickers (z-index 1500) and dialogs (3500) still cover it. */
.toolbar{display:flex;align-items:center;gap:4px;padding:10px 14px;background:var(--color-bg);border-bottom:1px solid var(--color-border);position:sticky;top:54px;z-index:9;}
.tb{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--color-ink);cursor:pointer;background:transparent;border:none;text-decoration:none;}
.tb .ic{font-size:14px;color:var(--color-primary);}
.tb:hover{background:var(--color-primary-subtle);}
.tb.dis{color:#b3b9c8;cursor:not-allowed;pointer-events:none;}
.tb.dis .ic{color:#cdd2dd;}
.tb-sep{width:1px;height:22px;background:var(--color-border);margin:0 4px;}
/* tabs */
.tabs{display:flex;gap:4px;padding:0 16px;border-bottom:1px solid var(--color-border);background:var(--color-surface);}
.tabs a{padding:14px 22px;font-size:14px;font-weight:600;color:var(--color-muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;}
.tabs a.active{color:var(--color-primary);border-bottom-color:var(--color-primary);}
/* #2: nested sub-tab strip (smaller, on a subtle surface so it reads as a level below the page tabs) */
.tabs.subtab{padding:0 10px;background:var(--color-bg-subtle);border-radius:var(--radius-md);}
.tabs.subtab a{padding:10px 16px;font-size:13px;}
/* D-290 W1 — the List / Forms tabs of every entry screen: one two-part segmented control. D-299 N13 — lightened to the
field look: inactive = white field surface, field border, muted ink; active = light blue with dark blue text. */
.tabs.tabs-seg{padding:14px 20px;gap:0;}
.tabs-seg .seg{display:inline-flex;max-width:100%;border:1px solid var(--input-border);border-radius:9px;overflow:hidden;background:var(--color-surface);}
.tabs-seg .seg a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 30px;margin:0;border:0;font-size:16px;font-weight:700;color:var(--color-muted);background:var(--color-surface);white-space:nowrap;}
.tabs-seg .seg a+a{border-left:1px solid var(--input-border);}
.tabs-seg .seg a.active{background:var(--blue-200);color:var(--blue-900);}
.tabs-seg .seg a:focus-visible{outline-offset:-5px;}
.tabs-seg .seg a.active:focus-visible{outline-color:var(--blue-900);}
/* D-299 N13 — List / Forms sits above the toolbar; a selector that belongs right below it (Data Configuration's
Category, D-294 DC) shares its white band. */
.tabs.tabs-seg:has(+ .tabs-seg-sub){border-bottom:0;}
.tabs-seg-sub{padding:0 20px 14px;background:var(--color-surface);border-bottom:1px solid var(--color-border);}
@media (max-width:420px){ .tabs.tabs-seg{padding:12px 16px;} .tabs-seg .seg a{padding:0 20px;} }
.body{padding:24px 22px;}
/* notices */
.notice{border-radius:var(--radius-md);padding:12px 15px;font-size:14px;margin-bottom:18px;}
.notice.ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok);}
.notice.err{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger);}
/* form */
.form{max-width:660px;}
/* D-294 PW: an entry form with wide labels (the RPT forms, form.lbl-wide) uses the full content width, its
header fields full width like every other entry screen. A form with its own inline max-width keeps it. */
form.form.lbl-wide{max-width:none;}
.frow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;} /* R18 AL-LABEL: centred (was flex-start) */
.frow label{width:152px;text-align:right;font-size:13.5px;color:var(--color-ink);font-weight:600;flex-shrink:0;}
.req{color:var(--danger);}
.frow .opt{color:var(--color-muted);font-weight:500;}
.inp{flex:1;border:1px solid #CBD5E1;border-radius:9px;padding:11px 13px;font-size:14.5px;color:var(--color-ink);background:var(--color-surface);min-height:var(--control-h);}
.inp:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(21,101,192,.15);}
.inp.sel{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6B7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:11px;padding-right:34px;}
.inp.ro,.inp[readonly]{background:var(--color-bg-subtle);color:var(--color-muted);border-style:dashed;display:flex;align-items:center;justify-content:space-between;}
.inp.ro .lk{font-size:var(--fs-label);color:var(--color-muted);}
.inp:disabled{background:var(--color-bg-subtle);color:var(--color-muted);}
.inp.view{background:#fafbfe;color:var(--color-ink);}
.pwwrap{flex:1;display:flex;gap:8px;align-items:center;}
.pwwrap .inp{flex:1;}
.eye{border:1px solid #CBD5E1;background:var(--color-surface);border-radius:9px;padding:0 13px;min-height:var(--control-h);cursor:pointer;font-size:15px;}
.eye.on{background:var(--color-primary-subtle);border-color:var(--blue-400);}
.checks{margin:18px 0 0 166px;display:flex;flex-direction:column;gap:14px;}
.ck{display:flex;align-items:flex-start;gap:11px;}
.ck input{margin-top:2px;width:18px;height:18px;accent-color:var(--color-primary);}
.ck .t{display:block;font-size:14px;color:var(--color-ink);font-weight:600;}
.ck .d{display:block;margin-top:4px;font-size:12px;color:var(--color-muted);line-height:1.45;}
.recinfo{font-size:12.5px;color:var(--color-muted);margin:18px 0 0 166px;}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;}
/* sticky form action bar (pinned just below the topbar) */
.form-actions{position:sticky;top:54px;z-index:9;display:flex;gap:10px;justify-content:flex-start;align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:12px 16px;margin-bottom:18px;}
.inperr{display:none;color:var(--danger);font-size:var(--fs-label);margin-top:3px;}
@media (max-width:768px){.form-actions{top:74px;}}
/* list / table */
.search-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;}
.field{display:flex;align-items:center;gap:8px;border:1px solid #CBD5E1;border-radius:var(--radius-md);padding:8px 13px;background:var(--color-surface);font-size:14px;color:var(--color-muted);min-height:var(--control-h);}
.field input{border:none;outline:none;font-size:14px;background:transparent;color:var(--color-ink);}
.field.grow{flex:1;min-width:240px;}
.field.grow input{width:100%;}
/* LS — the List tab search box of a live search row: a fixed, shorter box beside the column dropdown
instead of one stretched across the row. Shrinks on a narrow phone so the row never scrolls sideways. */
.field.grow.live-search{flex:0 1 var(--w-live-search);width:var(--w-live-search);max-width:100%;min-width:min(var(--w-live-search),100%);}
select.sel{border:1px solid #CBD5E1;border-radius:var(--radius-md);padding:10px 13px;font-size:14px;color:var(--color-muted);background:var(--color-surface);min-height:var(--control-h);}
/* inline label for the shared _ListPeriodFilter Year/Month selects that sit in a .search-row */
.lp-lbl{font-size:12.5px;font-weight:600;color:var(--color-ink);margin:0 2px 0 4px;}
table{width:100%;border-collapse:collapse;}
/* D-254 #5: column heads are shown as written (Title Case) instead of in caps. Most are short, but reports
carry heads such as "Prior-Period Adjustments / Other Movements", and in caps those stacked three or four
lines deep in a 160px column. Semibold + --color-muted + the --color-bg band keep the head clearly above the
14px cells (5.1:1 contrast). Acronyms written in caps (UOM, TIN, ATC) stay in caps. */
thead th{background:var(--color-bg);text-align:left;font-size:var(--fs-label);letter-spacing:var(--tracking-long-label);text-transform:var(--case-long-label);color:var(--color-muted);font-weight:600;padding:12px 11px;border-bottom:1px solid var(--color-border);}
thead th.ctr{text-align:center;}
/* UI-05 (S-39): an amount / number column head sits right-aligned over its right-aligned amounts. The
extra "table" keeps it above a page's own plain `table.grid th{text-align:left}`. */
table thead th.num{text-align:right;}
tbody td{padding:13px 11px;border-bottom:1px solid #EEF1F6;font-size:14px;vertical-align:middle;}
tbody td.ctr{text-align:center;}
tbody tr{cursor:pointer;}
tbody tr:hover{background:var(--color-bg);}
tbody tr.sel{background:var(--color-primary-subtle);box-shadow:inset 3px 0 0 var(--color-primary);}
.mono{font-variant-numeric:tabular-nums;color:var(--color-muted);}
.pill{display:inline-block;padding:4px 11px;border-radius:var(--radius-pill);font-size:var(--fs-label);font-weight:700;}
.pill.role{background:var(--color-bg-subtle);color:var(--color-muted);}
.pill.admin{background:var(--color-primary);color:#fff;}
.pill.no{background:var(--color-bg-subtle);color:var(--color-muted);}
/* UI-06 (S-63) — the one status-chip colour list (StatusDisplay.PillClass): green = done, blue = in progress,
red = stopped, grey = draft / none. Amber (.pill.warn) only for a real warning. */
.pill.ok{background:var(--ok-bg);color:var(--ok);}
.pill.info{background:var(--info-bg);color:var(--info);}
.pill.danger{background:var(--danger-bg);color:var(--danger);}
.pill.neutral{background:var(--color-bg-subtle);color:var(--color-muted);}
.pill.warn{background:var(--warn-bg);color:var(--warn);}
/* Breach Alerts — severity + status pills (blue=info, amber/red=alert, per brand) */
.pill.sev-crit{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-line);}
.pill.sev-high{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);}
.pill.sev-med{background:var(--color-primary-subtle);color:var(--color-primary);}
.pill.sev-low{background:var(--color-bg-subtle);color:var(--color-muted);}
.pill.st-new{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);}
.pill.st-ack{background:var(--color-primary-subtle);color:var(--color-primary);}
.pill.st-esc{background:var(--color-primary);color:#fff;}
.status{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ok);font-weight:600;}
.status .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);display:inline-block;}
.status.off{color:var(--color-muted);font-weight:500;}
.status.off .dot{background:#C4C9D4;}
.btn{border:none;border-radius:9px;padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none;min-height:var(--control-h);}
.btn-primary{background:var(--color-primary);color:#fff;}
.btn-primary:hover{background:var(--color-primary-hover);}
.btn-ghost{background:var(--color-surface);border:1px solid #CBD5E1;color:var(--color-ink);}
.btn-ghost:hover{background:var(--color-bg);}
.btn-link{background:none;border:none;color:var(--color-primary);font-weight:700;cursor:pointer;font-size:13px;}
/* search modal */
.ua-modal-overlay{position:fixed;inset:0;background:rgba(13,43,94,.4);display:flex;align-items:flex-start;justify-content:center;padding-top:84px;z-index:50;}
.ua-modal{width:580px;max-width:92vw;background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;box-shadow:0 12px 36px rgba(13,43,94,.28);overflow:hidden;}
.ua-modal .mhead{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--color-border);background:var(--color-bg);}
/* D-254 #5: the look belongs to the modal header, not to one heading level. A dialog's title is properly an h2;
the screens use h3 today, and either now gets the same 15px primary title, so fixing the level later moves
nothing on screen. (:is() keeps the specificity of the old `h3` selector.) */
.ua-modal .mhead :is(h2,h3){margin:0;font-size:15px;color:var(--color-primary);}
.ua-modal .mbody{padding:16px 18px;}
/* D-268 — the footer of a lookup pop-up that had none (dismiss on the left, then Select); same look as .acs-foot. */
.lookup-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid var(--color-border);background:var(--color-bg);}
/* A long list must not push that footer below the screen (the overlay is fixed, so it cannot be scrolled to): the
modal stops at the viewport and its body scrolls instead. */
.ua-modal:has(> .lookup-foot){display:flex;flex-direction:column;max-height:calc(100vh - 100px);}
.ua-modal:has(> .lookup-foot) > .mbody{overflow:auto;min-height:0;}
.x{color:var(--color-muted);cursor:pointer;font-size:17px;text-decoration:none;}
/* keyboard focus visibility + table row links (accessibility batch 1) */
.btn:focus-visible,.tb:focus-visible,.tabs a:focus-visible,.eye:focus-visible,.btn-link:focus-visible,.rowlink:focus-visible,.x:focus-visible,.field input:focus-visible,select.sel:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:6px;}
/* nav focus handled by accordion rules above */
.rowlink{color:var(--color-muted);text-decoration:none;}
.rowlink:hover{text-decoration:underline;}
/* ===== Batch 2: responsive + polish ===== */
/* smooth hover/focus transitions */
.btn,.tb,.tabs a,.nav-mod,a.nav-item,.rowlink,.eye,tbody tr,.field,.inp,select.sel{transition:background-color .15s ease,color .15s ease,box-shadow .15s ease,border-color .15s ease;}
/* toolbar touch target */
.tb{min-height:44px;}
/* tighten inline row-link focus ring */
.rowlink:focus-visible{border-radius:3px;}
/* horizontal scroll for wide tables on small screens */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* ===== Shared grid column widths (single source of truth) =====
Every screen used to hand-set an inline `style="width:NNNpx"` on each
, so the same
logical column drifted to a different width on every page — and several were sized by eye
and quietly clipped real data. Use these classes on the
instead of a new inline width.
Sizes are measured against REAL data (IFMIS_LIVE maxima) at the app's body font
(Segoe UI 14px — note `.mono` only sets tabular-numerals, it is NOT a monospace family)
plus the real cell chrome, so each width fits its longest value AND its header. The header sizes below were
measured when heads were set in caps; since D-254 #5 they are Title Case, which is narrower, so they still fit:
cell chrome = 16px td padding; input adds 28px; a