/* ============================================================================
 * nexus.css -- Shared "Nexus" theme layer for the CareRite portal.
 *
 * v1.37 -- 2026-10-21
 *   15.37: one payroll's Shared budgets rows (tr.dt-wk-shared) and the
 *   departments listed under each line's name (.dt-wk-shared-sub).
 * v1.36 -- 2026-10-21
 *   15.37: agency rows in Department Totals open like anyone else's, so
 *   tr.dt-emp-agency no longer forces a plain cursor on every cell.
 * v1.35 -- 2026-10-21
 *   15.37: Department Totals' one-payroll view (#page-week): .dt-wk-back,
 *   .dt-wk-title/.dt-wk-sub, the clickable payroll dates (th.dt-wk-link), the
 *   hours | dollars rule (.dt-wk-sep) and over / under budget colours.
 * v1.34 -- 2026-10-21
 *   15.39: the New Request popup drops portal.css's 28px .modal padding, so
 *   its header and form run to the popup's edges instead of sitting in a
 *   frame; only the body scrolls.
 * v1.33 -- 2026-10-20
 *   15.39: each Earning codes code line has its own On switch (a third
 *   column on .ec-code, header .ec-code-head); a line switched off dims
 *   (.ec-code.off).
 * v1.32 -- 2026-10-20
 *   15.39: .ec-chip.auto is gone -- Earning codes no longer suggests codes.
 * v1.31 -- 2026-10-20
 *   15.39: Requests Settings > Earning codes -- the list of homes (.ec-row
 *   with its On switch) and one home's codes (.ec-top, .ec-code, the type
 *   pills .ec-chip / .ec-chip.auto, .ec-add).
 * v1.30 -- 2026-10-19
 *   15.36: the Financials report's Mapping tab draws an inactive row struck
 *   through and greyed (.map-row.off) with an "Inactive" chip (.map-off).
 * v1.29 -- 2026-10-16
 *   15.36: on the Financials report's Compare, a facility's name is dragged
 *   to move its column (.fac-move, .fac-dragging, .fac-drop-l/-r, and
 *   body.fac-moving for the cursor while one is carried).
 * v1.28 -- 2026-10-16
 *   15.36: the Financials report's Financials start list drops the browser's
 *   month box for its own picker - a month button per facility (.st-pick)
 *   that opens a floating year-and-twelve-months card (.st-cal and its
 *   parts). .st-month and .st-clear from v1.26 are gone.
 * v1.27 -- 2026-10-15
 *   15.44: General -- Financial Sync (general/fin-sync.php), new. Each
 *   month's "Pulled" note sits beside its box (.fs-cell); a month with
 *   nothing on file is a grey box (.fs-chip.nopull). Client tags and the
 *   filter chips (.fs-co, .fs-cf, .fs-fbar, .fs-fchip) match Month End's.
 * v1.26 -- 2026-10-14
 *   15.36: three rules for the Financials report's new Financials start list
 *   (.st-first, .st-month, .st-clear). Nothing else moves.
 * v1.25 -- 2026-10-14
 *   The type face is now one shared name too: --nx-font in section 1, still
 *   Inter. --font (portal.css) reads it, and the 37 places a page typed
 *   'Inter',... by hand now say var(--nx-font). Holiday orders keeps its own
 *   Figtree / Young Serif. Checked in the browser: every element on every page
 *   sits at the same place and size, in the same face.
 * v1.24 -- 2026-10-14
 *   Groundwork for themes. The neutral colours in section 2 -- canvas, cards,
 *   rail, text, lines, shadows -- now reach every page, including the ones
 *   marked data-nx-base="off". The accents (brand, green, amber, red, blue,
 *   purple, teal, up/down) stay fenced in dark, because those pages bring
 *   their own dark set. With that in place:
 *   - 507 copies of the shared colours inside the page sections are gone;
 *     each page's block now holds only what is really its own.
 *   - 250 colours typed straight into page rules now read the shared names:
 *     206 where the shared colour is exactly the same in every theme the
 *     rule shows in, and 44 greys that differ from the shared one by less
 *     than the eye can see (a CIEDE2000 step under 1).
 *   Checked page by page, light and dark, embedded and not: nothing else on
 *   screen changes. The one exception is on purpose -- the hover notes on the
 *   Financials dashboard and report, and the report's download menu, asked
 *   for the shared tooltip colour and shadow and never got them; they do now.
 * v1.23 -- 2026-10-14
 *   Every page's own <style> block is moving in here, one page at a time,
 *   into section 15 at the bottom. Each page's rules are pinned to it with
 *   :where(:root[data-page="..."]), which adds nothing to a selector's
 *   weight, so every rule wins or loses exactly as it did inside the page.
 *   Pages that never loaded this file carry data-nx-base="off" on <html>.
 *   The shared rules above that could have reached them (the themes, the
 *   legacy bridge, the shell, the Department Totals look, html.cr-embed)
 *   are fenced with :where(:root:not([data-nx-base="off"])), so those pages
 *   look exactly as they did. Take the attribute off a page to give it the
 *   shared Nexus look.
 *   Pages link this file as nexus.css?v=<filemtime>, so a change here is
 *   picked up straight away instead of waiting on a cached copy.
 * v1.22.2 -- 2026-08-26
 *   Positive Pay: the sub line under each card number is gone.
 * v1.22.1 -- 2026-08-26
 *   Positive Pay: four cards across instead of five.
 * v1.22 -- 2026-08-26
 *   Positive Pay: the five cards over the table, the Status button on the day
 *   bar with its count, and the tick boxes on the Status picker.
 * v1.21 -- 2026-08-24
 *   Purchasing: anything with the orange as its fill now has white text, in
 *   one place instead of a growing list of exceptions. Buttons, pills, tabs,
 *   the picked item in the left list, calendar days, tags, the avatar -- all
 *   of them. The near-black that used to sit on the orange is gone.
 *   In dark, the orange itself is a shade deeper than it was, so white on it
 *   reads properly. Light is the same orange as before.
 * v1.20 -- 2026-08-24
 *   Positive Pay: styling for the new "Check the email" box at the bottom of
 *   Settings > Reminders -- the grouped list, the per-person line with its
 *   reason and Test button, and the red note under a bank that has something
 *   missing.
 * v1.19.3 -- 2026-08-24
 *   Purchasing: the orange buttons in pop-ups now read in white as well.
 * v1.19.2 -- 2026-08-24
 *   Purchasing: the page you are on in the left list now shows in white too
 *   -- both the rail on the portal pages and the section list on the
 *   onboarding form.
 * v1.19.1 -- 2026-08-24
 *   Purchasing: back to the original orange. The only change kept is that the
 *   CR logo mark and the account circle now show their letters in white
 *   instead of near-black. Everything else on the orange (buttons, pills)
 *   stays near-black as before.
 * v1.19 -- 2026-08-24
 *   Purchasing: tried a soft pastel orange. Reverted in v1.19.1.
 * v1.18.4 -- 2026-08-19
 *   Positive Pay: Today, the padlock and Refresh now stand the same height
 *   as the date box beside them.
 * v1.18.3 -- 2026-08-19
 *   Positive Pay: new .pp-refresh button on the day bar and .pp-lastref for
 *   the time beside it.
 * v1.18.2 -- 2026-08-19
 *   Positive Pay: the past-cutoff icon filters on a click, so it shows the
 *   hand cursor.
 * v1.18.1 -- 2026-08-19
 *   Positive Pay: the counters over the table are gone, so the day bar sits
 *   straight above the table and gets its gap back.
 * v1.18 -- 2026-08-19
 *   Positive Pay: the day bar now sits in the middle of the page like the
 *   week bar on Transfers, with the counters on their own line under it.
 *   New .pp-lock padlock button, and a new .pp-cal calendar for the day
 *   picker -- month arrows, today ringed, the open day filled, and a dot
 *   under a day already finished. The old .pp-day list is gone.
 *   A decision pill is no longer held to a minimum width, so a short answer
 *   like N/A stops leaving empty space after it. An empty cell keeps the
 *   width so it is still easy to click.
 *   A custom colour swatch now carries a hairline, so a white one shows.
 * v1.17 -- 2026-08-19
 *   Positive Pay: a row past its cutoff now reads bold as well as red.
 *   The past-cutoff mark is icon only, so it is sized on its own and no
 *   longer holds space for words.
 * v1.16 -- 2026-08-19
 *   Positive Pay: a row past its cutoff is no longer washed pink. Its text
 *   goes red instead -- bank, cash rep, cutoff, note and all. The decision
 *   pills and the client tag keep their own colours, so nothing is lost.
 *   A cell that filters on a click now shows the hand cursor. It was showing
 *   the plain arrow because the read-only rule was winning.
 * v1.15 -- 2026-08-19
 *   Positive Pay settings: the client + bank lines now carry the bank name
 *   as well, for the new Cash reps tab. New .pp-mgr .bk and .pp-mgrs.big.
 * v1.14 -- 2026-08-19
 *   Positive Pay settings: the Colour menu now holds a proper picker -- a
 *   shade square, a hue bar, twelve quick swatches, a preview dot and a hex
 *   box. All of it is ours, so it matches the site rather than opening the
 *   browser's own colour window. New .pp-cp block, and .pp-menu.tall so that
 *   one menu can run taller than the rest without scrolling.
 * v1.13 -- 2026-08-19
 *   Positive Pay table: every column now has a fixed width and the table lays
 *   out on those widths alone, so nothing shifts sideways as rows are filtered
 *   or a longer name turns up. Columns only change when the page is resized.
 *   Anything too long for its column is trimmed with an ellipsis.
 *   The three decision cells are buttons and were falling back to the
 *   browser's button font. They now use the site font like every other cell.
 *   New .pp-tip, our own tooltip for a cell whose text has been trimmed, and
 *   .pp-srow for a labelled setting on the Settings page.
 * v1.12 -- 2026-08-19
 *   Positive Pay: styling for the new Settings sub-page -- the tab strip, the
 *   list of choices each decision column offers, the colour swatch, the two
 *   switches on each choice, the move/remove buttons and the "Add a choice"
 *   button.
 * v1.11 -- 2026-08-19
 *   Positive Pay: Notes is now a typed-in box in the cell rather than a popup,
 *   and it is a fixed, narrower column. Cutoff and Upload are fixed too, and
 *   the first six columns share whatever room is left, so they all read a
 *   little wider instead of only Client and Bank growing.
 *   A day arrow that would step past the last day you are allowed to reach now
 *   dims instead of doing nothing.
 * v1.10 -- 2026-08-19
 *   Positive Pay: Client and Bank now size themselves to their own text, so a
 *   bank name is never trimmed and neither column keeps space it is not using.
 *   Notes is still the column that soaks up whatever is left.
 *   --st-clear is teal instead of purple.
 *   New: the AP-manager-per-client list inside the Reminders box, and the
 *   floating menu now opens above a modal rather than behind it.
 * v1.9 -- 2026-08-19
 *   Positive Pay table: every column now has a width. Client and Bank used to
 *   have none, so between them they swallowed all the spare room and left the
 *   notes squeezed. Notes is now the one column that grows, a long client tag
 *   or bank name trims with an ellipsis instead of pushing the row wide, and
 *   the status columns are a little narrower so the whole table fits.
 * v1.8 -- 2026-08-19
 *   New status colour --st-clear, for a row where there was simply
 *   nothing to do. Positive Pay uses it for "No exceptions", so that reads
 *   apart from "Decisioned", which keeps the green --st-ok.
 * v1.7 -- 2026-08-11
 *   Section 13 rebuilt for the redesigned New home intake page: the counters
 *   above the list are now cards you can press to filter, there is a search
 *   box, the list shows how far through the form each home is, and the
 *   read-back is a header card followed by one block per section -- with
 *   vendors in real columns instead of a run of label/value lines.
 * v1.6 -- 2026-08-11
 *   Purchasing now runs on its own colour -- amber, the way Cash runs coral.
 *   Section 5 below. Because amber is a light colour, that block also swaps
 *   --nx-on-brand to a near-black, so text sitting ON the accent (a selected
 *   rail item, a primary button) stays readable instead of white-on-yellow.
 * v1.5 -- 2026-08-11
 *   Section 14 (the Purchasing onboarding form) no longer puts that page in the
 *   app frame. It is a page a home opens from an emailed link, outside the
 *   portal, so it is now a plain full-width page that scrolls normally -- bar
 *   across the top, section list down the left, cards on the right. It takes
 *   the colours and nothing else.
 *   New with it: html.nx-page, the base for any page built that way.
 * v1.4 -- 2026-08-11
 *   Took in the two Purchasing pages -- New home intake, and the onboarding
 *   form we send out to a home. Both had their whole look written inside the
 *   page; neither does now. Sections 13 and 14 below.
 *   Also new in the shell: .nx-scrollarea (the scrolling body of a page that
 *   is NOT in an iframe -- the shells' own pages used to write this rule for
 *   themselves) and button.nx-nav, so a rail item can be a button and not
 *   only a link.
 * v1.3 -- 2026-08-10
 *   Took in the two remaining Cash pages, Rent and Positive Pay. Both had
 *   their own copy of the theme tokens and their own light/dark pair of status
 *   colours; those are gone and both now run off the shared set (--st-ok,
 *   --st-late and friends), so there is one place to change a colour.
 *   Added the embedded-page base (html.cr-embed, .nx-scroll, .nx-card,
 *   .nx-blank) that every framed page shares, and data-page on <html> so a
 *   page can override a shared rule without it leaking to the others.
 * v1.2 -- 2026-08-10
 *   Cut back to two themes, light and dark. The six-theme picker is gone and
 *   the light/dark button is back. A different look (a "Portal" skin, or
 *   anything later) should be a whole separate file swapped in place of this
 *   one, not another theme inside it -- see SWAPPING THE LOOK below.
 * v1.1 -- 2026-08-10
 *   Added the Nexus app shell (.nx-app / .nx-rail / .nx-topbar / .nx-frame and
 *   the account menu), lifted whole from the Cash dashboard so the Payroll and
 *   Financials shells can drop their copies too. Added module accents via
 *   data-module on <html> -- Cash runs coral.
 *   .nx-theme-btn means the square icon button it always meant on the shells.
 * v1 -- 2026-08-10
 *   Rebuilt as a theme engine. Every colour, shadow, overlay and radius is now
 *   a variable, and a theme is nothing but one block of variables. There are
 *   no theme-specific component rules left anywhere in this file.
 *   Also new: the hard-coded whites and greys that portal.css bakes into
 *   .sidebar / .topbar / .modal / inputs / tables are re-pointed at variables,
 *   so those follow whichever theme is picked.
 * v0 -- earlier
 *   Light + dark only, with dark handled by a second set of component rules.
 *
 * ----------------------------------------------------------------------------
 * HOW TO USE
 *   Link this AFTER portal.css, and after any page's own <style> block:
 *
 *     <link rel="stylesheet" href="/portal/_assets/portal.css">
 *     <link rel="stylesheet" href="/portal/_assets/nexus.css">
 *
 *   And near the very top of <head>, before anything paints, restore the
 *   saved theme:
 *
 *     <script>(function(){try{var t=localStorage.getItem('cr_theme')||'';
 *       if(!t&&window.matchMedia&&matchMedia('(prefers-color-scheme:dark)').matches)t='dark';
 *       if(t)document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
 *
 *   To switch at runtime:
 *     document.documentElement.setAttribute('data-theme','dark');
 *     localStorage.setItem('cr_theme','dark');
 *
 * THEMES
 *   light   Nexus default. White cards on a soft grey canvas.
 *   dark    Near-black neutral.
 *   That is the whole list.
 *
 * SWAPPING THE LOOK
 *   A different look -- a "Portal" skin, say -- should be its own file that
 *   fills in the same variable names and defines the same classes, and gets
 *   linked instead of this one:
 *
 *     <link rel="stylesheet" href="/portal/_assets/<?php echo $skin; ?>.css">
 *
 *   Keep the section order and the variable list in section 2 the same, and a
 *   page will run on either file with no markup change. Each skin carries its
 *   own light and dark.
 *
 * The brand stays CareRite green in both themes. Remember that the legacy
 * variable --blue holds the green; --accent-blue is the real blue.
 * ========================================================================== */


/* ============================================================================
 * 1. SHAPE + MOTION
 * Not part of a theme, so these sit outside the theme blocks. A theme may
 * still override any of them (contrast does).
 * ========================================================================== */
:root{
  /* The type face. A theme may swap it; --font (portal.css) and the pages
     read it from here. */
  --nx-font:'Inter',system-ui,sans-serif;
  --font:var(--nx-font);
  --nx-radius:16px;
  --nx-radius-sm:11px;
  --nx-radius-xs:10px;
  --nx-speed:.12s;

  /* Chart palette. Deliberately theme-independent so a saved chart image
     looks the same no matter who exported it. */
  --nx-violet:#6C4BF4;--nx-violet-lt:#A48BFB;
  --nx-indigo:#4D6FF3;--nx-teal:#22C3B6;--nx-aqua:#7FE3D3;
}


/* ============================================================================
 * 2. THEMES
 * Light and dark. Every page gets the neutral colours from here, including
 * the pages marked data-nx-base="off". In dark, the accents sit in a block of
 * their own that is still fenced off those pages: each brings its own dark
 * set of accents, and some leave them at their light values on purpose.
 * The light block is pinned with :where() so a page's own block, which comes
 * later at the same weight, can still change a colour for that page alone.
 *
 * The list every theme must fill in:
 *   surfaces   --nx-bg --nx-surface --nx-elev --nx-rail --nx-hover
 *   ink        --nx-ink --nx-ink2 --nx-ink3 --nx-on-brand
 *   lines      --nx-line --nx-line2
 *   depth      --nx-shadow --nx-shadow-lg --nx-shadow-hover --nx-overlay
 *   chips      --nx-toast-bg --nx-toast-ink
 *   brand      --blue --blue-dk --blue-lt
 *   accents    --green --amber --red --accent-blue --purple (+ their -lt/-text)
 *   status     --nx-up --nx-up-bg --nx-down --nx-down-bg
 * ========================================================================== */

/* -- Light (default) ------------------------------------------------------ */
:root,
:root:where([data-theme="light"]){
  --nx-bg:#EEF0F4;
  --nx-surface:#FFFFFF;
  --nx-elev:#FFFFFF;
  --nx-rail:#FBFBFD;
  --nx-hover:#F1F0FB;
  --nx-ink:#1B1D29;
  --nx-ink2:#5B6072;
  --nx-ink3:#9499AB;
  --nx-on-brand:#FFFFFF;
  --nx-line:#ECEDF2;
  --nx-line2:#E2E4EC;

  --nx-shadow:0 1px 2px rgba(20,22,28,.04), 0 4px 16px rgba(20,22,28,.05);
  --nx-shadow-hover:0 6px 20px rgba(20,22,28,.10);
  --nx-shadow-lg:0 18px 44px rgba(20,22,28,.20);
  --nx-overlay:rgba(0,0,0,.45);
  --nx-toast-bg:#1B1D29;
  --nx-toast-ink:#FFFFFF;

  --blue:#018B46;--blue-dk:#016234;--blue-lt:#E6F4EC;
  --green:#1E8E3E;--green-lt:#E6F4EA;
  --amber:#F9AB00;--amber-lt:#FEF7E0;--amber-text:#A57300;
  --red:#EA4335;--red-lt:#FCE8E6;--red-text:#C5221F;
  --accent-blue:#185FA5;--accent-blue-lt:#E3EBF5;
  --purple:#7627BB;--purple-lt:#F3E8FD;
  --teal:#0E7490;--teal-lt:#E0F1F6;

  --nx-up:#16A34A;--nx-up-bg:#E7F6EC;
  --nx-down:#F0594E;--nx-down-bg:#FCEBEB;
}
/* The older pages never declared a colour scheme, so this stays fenced. */
:root:where(:not([data-nx-base="off"])),
:root[data-theme="light"]:where(:not([data-nx-base="off"])){color-scheme:light}

/* -- Dark: near-black neutral --------------------------------------------- */
:root[data-theme="dark"]{
  --nx-bg:#0C0E14;
  --nx-surface:#15171F;
  --nx-elev:#1B1E27;
  --nx-rail:#10121A;
  --nx-hover:#222632;
  --nx-ink:#F2F3F7;
  --nx-ink2:#A7ADBE;
  --nx-ink3:#6E7587;
  --nx-on-brand:#04170D;
  --nx-line:#262A35;
  --nx-line2:#313644;

  --nx-shadow:0 1px 2px rgba(0,0,0,.30), 0 6px 20px rgba(0,0,0,.30);
  --nx-shadow-hover:0 8px 26px rgba(0,0,0,.45);
  --nx-shadow-lg:0 20px 48px rgba(0,0,0,.55);
  --nx-overlay:rgba(0,0,0,.62);
  --nx-toast-bg:#2A2E3A;
  --nx-toast-ink:#F2F3F7;
}
/* Dark accents: not on the data-nx-base="off" pages, which set their own. */
:root[data-theme="dark"]:where(:not([data-nx-base="off"])){
  --blue:#1FB866;--blue-dk:#178F4E;--blue-lt:#15301F;
  --green:#34D27B;--green-lt:#16301F;
  --amber:#E0A93B;--amber-lt:#2A2510;--amber-text:#E8C25A;
  --red:#F4756B;--red-lt:#3A1E1C;--red-text:#F4756B;
  --accent-blue:#5B8DEF;--accent-blue-lt:#1B2740;
  --purple:#B388F2;--purple-lt:#2A1E3D;
  --teal:#4FC9D8;--teal-lt:#12303A;
  --nx-up:#34D27B;--nx-up-bg:#16301F;
  --nx-down:#F4756B;--nx-down-bg:#3A1E1C;
  color-scheme:dark;
}

/* ============================================================================
 * 3. LEGACY BRIDGE
 * portal.css and every existing page read --bg / --border / --text and so on.
 * Pointing those at the Nexus scale re-skins the whole portal with no markup
 * change. Written once; it follows whichever theme is active because both
 * sides live on the same element.
 * ========================================================================== */
:root:where(:not([data-nx-base="off"])){
  --bg:var(--nx-bg);
  --bg2:var(--nx-rail);
  --surface:var(--nx-surface);
  --surface2:var(--nx-hover);
  --border:var(--nx-line);
  --border2:var(--nx-line2);
  --text:var(--nx-ink);
  --text2:var(--nx-ink2);
  --text3:var(--nx-ink3);
  --brand:var(--blue);
  --brand-lt:var(--blue-lt);
  /* Second brand tone, used by the gradient on the sidebar mark. A module may
     override it; on its own it just repeats the brand. */
  --brand-2:var(--blue);
}


/* ============================================================================
 * 4. SHARED PORTAL COMPONENTS
 * portal.css bakes #fff, #FAFAFA, #F1F3F4 and #F8F9FA straight into these
 * classes, so they would stay white in a dark theme. Re-pointed at variables.
 * ========================================================================== */

/* Frame */
:where(:root:not([data-nx-base="off"])) .sidebar{background:var(--nx-surface);border-right-color:var(--nx-line)}
:where(:root:not([data-nx-base="off"])) .topbar{background:var(--nx-surface);border-bottom-color:var(--nx-line)}
:where(:root:not([data-nx-base="off"])) .scroll-area{background:var(--nx-bg)}
:where(:root:not([data-nx-base="off"])) .sb-item:hover{background:var(--nx-hover)}
:where(:root:not([data-nx-base="off"])) .sb-item.active{background:var(--blue-lt);color:var(--blue)}
:where(:root:not([data-nx-base="off"])) .sb-brand:hover{background:var(--nx-hover)}
:where(:root:not([data-nx-base="off"])) .sb-avatar{background:var(--blue-lt);color:var(--blue)}
:where(:root:not([data-nx-base="off"])) .sb-badge{color:var(--nx-on-brand)}

/* Cards and surfaces */
:where(:root:not([data-nx-base="off"])) .panel,
:where(:root:not([data-nx-base="off"])) .stat,
:where(:root:not([data-nx-base="off"])) .modal,
:where(:root:not([data-nx-base="off"])) .form-card,
:where(:root:not([data-nx-base="off"])) .file-card,
:where(:root:not([data-nx-base="off"])) .rpt-card,
:where(:root:not([data-nx-base="off"])) .ss-panel,
:where(:root:not([data-nx-base="off"])) .multi-drop-menu,
:where(:root:not([data-nx-base="off"])) .user-stat{background:var(--nx-elev)}

:where(:root:not([data-nx-base="off"])) .panel,
:where(:root:not([data-nx-base="off"])) .modal,
:where(:root:not([data-nx-base="off"])) .stat{border-radius:var(--nx-radius)}
:where(:root:not([data-nx-base="off"])) .rpt-modal-foot{background:var(--nx-rail)}
:where(:root:not([data-nx-base="off"])) .modal-overlay{background:var(--nx-overlay)}
:where(:root:not([data-nx-base="off"])) .modal{box-shadow:var(--nx-shadow-lg)}
:where(:root:not([data-nx-base="off"])) .ss-panel,
:where(:root:not([data-nx-base="off"])) .multi-drop-menu{box-shadow:var(--nx-shadow-lg)}

/* Buttons */
:where(:root:not([data-nx-base="off"])) .btn{background:var(--nx-elev);border-color:var(--nx-line2);color:var(--nx-ink2)}
:where(:root:not([data-nx-base="off"])) .btn:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root:not([data-nx-base="off"])) .btn.primary{background:var(--blue);border-color:var(--blue);color:var(--nx-on-brand)}
:where(:root:not([data-nx-base="off"])) .btn.primary:hover{background:var(--blue-dk);border-color:var(--blue-dk)}
:where(:root:not([data-nx-base="off"])) .btn.success{background:var(--green);border-color:var(--green);color:var(--nx-on-brand)}
:where(:root:not([data-nx-base="off"])) .btn.danger{background:var(--red);border-color:var(--red);color:var(--nx-on-brand)}

/* Inputs and pickers */
:where(:root:not([data-nx-base="off"])) .field input,:where(:root:not([data-nx-base="off"])) .field select,:where(:root:not([data-nx-base="off"])) .field textarea,
:where(:root:not([data-nx-base="off"])) .filter-bar select,:where(:root:not([data-nx-base="off"])) .filter-bar input,
:where(:root:not([data-nx-base="off"])) .dash-filter-row select,:where(:root:not([data-nx-base="off"])) .dash-filter-row input[type=date],
:where(:root:not([data-nx-base="off"])) .ss-trigger,:where(:root:not([data-nx-base="off"])) .ss-search,:where(:root:not([data-nx-base="off"])) .multi-drop-search,
:where(:root:not([data-nx-base="off"])) .multi-drop-btn,:where(:root:not([data-nx-base="off"])) .type-btn,:where(:root:not([data-nx-base="off"])) .fac-btn,:where(:root:not([data-nx-base="off"])) .fac-btn.clear-btn,:where(:root:not([data-nx-base="off"])) .rpt-icon-btn{
  background:var(--nx-elev);color:var(--nx-ink);border-color:var(--nx-line2)
}
:where(:root:not([data-nx-base="off"])) .ss-search-wrap{background:var(--nx-elev);border-bottom-color:var(--nx-line)}
:where(:root:not([data-nx-base="off"])) .fac-btn.active{background:var(--blue);border-color:var(--blue);color:var(--nx-on-brand)}

/* Tables */
:where(:root:not([data-nx-base="off"])) table thead th,
:where(:root:not([data-nx-base="off"])) .tbl-wrap thead th,
:where(:root:not([data-nx-base="off"])) th{background:var(--nx-rail);color:var(--nx-ink3)}
:where(:root:not([data-nx-base="off"])) td{border-bottom-color:var(--nx-line)}
:where(:root:not([data-nx-base="off"])) tbody tr:hover td{background:var(--nx-hover)}
:where(:root:not([data-nx-base="off"])) .detail-row{border-bottom-color:var(--nx-line)}
:where(:root:not([data-nx-base="off"])) .badge.inactive-user{background:var(--nx-hover);color:var(--nx-ink3)}

/* Toast and tooltip -- always a solid chip, never a washed-out box */
:where(:root:not([data-nx-base="off"])) .toast,
:where(:root:not([data-nx-base="off"])) #tooltip{background:var(--nx-toast-bg);color:var(--nx-toast-ink);border:none}


/* ============================================================================
 * 5. MODULE ACCENT
 * Each module may run on its own colour. Put data-module on <html>:
 *
 *     <html lang="en" class="nx-shell" data-module="cash">
 *
 * Only the brand family changes; everything else stays as the theme set it.
 * Two lines per module -- one for light, one for dark, where the colour has
 * to be lifted to stay readable.
 * ========================================================================== */
:root[data-module="cash"]:where(:not([data-nx-base="off"])){
  --blue:#E9614B;--blue-dk:#C74B37;--blue-lt:#FCEAE5;--brand-2:#F4886E
}
:root[data-theme="dark"][data-module="cash"]:where(:not([data-nx-base="off"])){
  --blue:#FF7A5E;--blue-dk:#D95A44;--blue-lt:#3A211B;--brand-2:#FF9C85
}

/* Purchasing runs amber. Anything sitting ON the amber -- a button, a pill, a
   tab, the picked item in the left list -- is white, so this module leaves
   --nx-on-brand alone at white rather than swapping it for a near-black the
   way it used to. One rule, so a new orange button is right without anyone
   having to remember to add it to a list. */
:root[data-module="purchasing"]:where(:not([data-nx-base="off"])){
  --blue:#E08A00;--blue-dk:#B36A00;--blue-lt:#FDF2DE;--brand-2:#F5B23C
}
:root[data-theme="dark"][data-module="purchasing"]:where(:not([data-nx-base="off"])){
  --blue:#D98F1E;--blue-dk:#B3730F;--blue-lt:#33240B;--brand-2:#E8A63B
}

/* AP runs the same deep teal-blue its tile on the home page uses. */
:root[data-module="ap"]:where(:not([data-nx-base="off"])){
  --blue:#0B6E99;--blue-dk:#08556F;--blue-lt:#E3EFF5;--brand-2:#3D93B8
}
:root[data-theme="dark"][data-module="ap"]:where(:not([data-nx-base="off"])){
  --blue:#3FA3CC;--blue-dk:#2A80A6;--blue-lt:#10242E;--brand-2:#6ABBDD
}


/* ============================================================================
 * 6. NEXUS APP SHELL
 * The dashboard frame: floating white app on a grey canvas, left rail that
 * collapses, topbar, and the kept-alive page iframes. Shared by the Cash,
 * Payroll and Financials shells -- they all use these same class names.
 *
 * Expects <html class="nx-shell"> so the page itself never scrolls.
 * ========================================================================== */
html.nx-shell,
html.nx-shell body{height:100%;margin:0;overflow:hidden;scrollbar-gutter:auto}
html.nx-shell body{background:var(--nx-bg);color:var(--nx-ink);font-family:var(--font,'Inter',system-ui,sans-serif);font-size:13px}
:where(:root:not([data-nx-base="off"])) .nx-app button{font-family:inherit}

/* -- Frame -- */
:where(:root:not([data-nx-base="off"])) .nx-app{
  display:grid;grid-template-columns:248px minmax(0,1fr);
  height:calc(100vh - 16px);margin:8px;
  background:var(--nx-surface);border:1px solid var(--nx-line);
  border-radius:var(--nx-radius);overflow:hidden;
  box-shadow:var(--nx-shadow-lg);transition:grid-template-columns .18s ease
}
:where(:root:not([data-nx-base="off"])) .nx-app.rail-collapsed{grid-template-columns:64px minmax(0,1fr)}
@media(max-width:980px){:where(:root:not([data-nx-base="off"])) .nx-app{grid-template-columns:1fr;margin:0;border:none;border-radius:0;height:100vh}}

/* -- Left rail -- */
:where(:root:not([data-nx-base="off"])) .nx-rail{
  background:var(--nx-rail);border-right:1px solid var(--nx-line);
  display:flex;flex-direction:column;padding:18px 14px;overflow:hidden
}
@media(max-width:980px){:where(:root:not([data-nx-base="off"])) .nx-rail{display:none}}
:where(:root:not([data-nx-base="off"])) .nx-rail-toggle{
  width:32px;height:32px;flex:0 0 auto;margin:0 0 6px auto;
  border:1px solid var(--nx-line2);background:var(--nx-surface);
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--nx-ink2)
}
:where(:root:not([data-nx-base="off"])) .nx-rail-toggle:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root:not([data-nx-base="off"])) .nx-rail-toggle svg{width:16px;height:16px;transition:transform .18s ease}

:where(:root:not([data-nx-base="off"])) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root:not([data-nx-base="off"])) .nx-brand-mark{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:flex;align-items:center;justify-content:center;
  color:var(--nx-on-brand);font-weight:800;font-size:15px
}
:where(:root:not([data-nx-base="off"])) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
.nx-brand-sub{color:var(--nx-ink3);font-weight:600}

:where(:root:not([data-nx-base="off"])) .nx-navsec{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--nx-ink3);padding:14px 10px 6px
}
:where(:root:not([data-nx-base="off"])) .nx-nav{
  display:flex;align-items:center;gap:11px;padding:9px 11px;
  border-radius:var(--nx-radius-xs);color:var(--nx-ink2);text-decoration:none;
  font-size:13px;font-weight:500;cursor:pointer;
  transition:background var(--nx-speed),color var(--nx-speed)
}
:where(:root:not([data-nx-base="off"])) .nx-nav svg{width:17px;height:17px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root:not([data-nx-base="off"])) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root:not([data-nx-base="off"])) .nx-nav.active{background:var(--brand);color:var(--nx-on-brand)}
:where(:root:not([data-nx-base="off"])) .nx-nav.active svg{color:var(--nx-on-brand)}
/* A rail item may be a button rather than a link -- same look either way. */
:where(:root:not([data-nx-base="off"])) button.nx-nav{width:100%;border:0;background:none;text-align:left;font-family:inherit;font-size:13px}

/* -- Collapsed rail -- */
:where(:root:not([data-nx-base="off"])) .rail-collapsed .nx-rail{padding:18px 10px;align-items:center}
:where(:root:not([data-nx-base="off"])) .rail-collapsed .nx-rail-toggle{margin:0 0 8px 0}
:where(:root:not([data-nx-base="off"])) .rail-collapsed .nx-rail-toggle svg{transform:rotate(180deg)}
:where(:root:not([data-nx-base="off"])) .rail-collapsed .nx-brand-name,
:where(:root:not([data-nx-base="off"])) .rail-collapsed .nx-navsec{display:none}
:where(:root:not([data-nx-base="off"])) .rail-collapsed .nx-brand{justify-content:center;padding:6px 0 18px}
/* Nav labels are bare text on the <a>; font-size:0 hides them, icons keep theirs. */
:where(:root:not([data-nx-base="off"])) .rail-collapsed .nx-nav{
  position:relative;justify-content:center;gap:0;padding:0;font-size:0;
  width:40px;height:40px;border-radius:var(--nx-radius-xs);margin:2px auto
}
:where(:root:not([data-nx-base="off"])) .rail-collapsed .nx-nav svg{width:18px;height:18px;font-size:0}
:where(:root:not([data-nx-base="off"])) .rail-collapsed .nx-subnav{align-items:center;border-top:1px solid var(--nx-line2);margin-top:10px;padding-top:10px}
:where(:root:not([data-nx-base="off"])) .rail-collapsed .nx-subnav-head,
:where(:root:not([data-nx-base="off"])) .rail-collapsed .nx-subnav .nx-subsec{display:none}
:where(:root:not([data-nx-base="off"])) .rail-collapsed .nx-subnav .nx-subitem{
  position:relative;justify-content:center;gap:0;padding:0;
  width:40px;height:40px;border-radius:var(--nx-radius-xs);margin:2px auto
}
:where(:root:not([data-nx-base="off"])) .rail-collapsed .nx-subnav .nx-subitem span{display:none}
:where(:root:not([data-nx-base="off"])) .rail-collapsed .nx-subnav .nx-subitem svg{width:17px;height:17px}
:where(:root:not([data-nx-base="off"])) .rail-collapsed .nx-subnav .nx-subitem .nx-sub-badge{
  position:absolute;top:2px;right:2px;margin:0;font-size:9px;min-width:14px;height:14px
}

/* -- Sub-nav: the open page's own menu, sent up by the embed bridge -- */
:where(:root:not([data-nx-base="off"])) .nx-subnav{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:10px;border-top:1px solid var(--nx-line2)}
:where(:root:not([data-nx-base="off"])) .nx-subnav:empty{display:none;border-top:none;margin-top:0;padding-top:0}
:where(:root:not([data-nx-base="off"])) .nx-subnav-head{
  font-size:11px;font-weight:700;letter-spacing:-.01em;color:var(--nx-ink);
  padding:2px 10px 7px;display:flex;align-items:center;gap:7px
}
:where(:root:not([data-nx-base="off"])) .nx-subnav-head::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--brand);flex:0 0 auto}
:where(:root:not([data-nx-base="off"])) .nx-subnav .nx-subsec{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--nx-ink3);padding:9px 10px 4px
}
:where(:root:not([data-nx-base="off"])) .nx-subnav .nx-subitem{
  display:flex;align-items:center;gap:11px;padding:8px 11px 8px 18px;
  border-radius:var(--nx-radius-xs);color:var(--nx-ink2);font-size:12.5px;font-weight:500;
  cursor:pointer;border:none;background:none;font-family:inherit;width:100%;text-align:left
}
:where(:root:not([data-nx-base="off"])) .nx-subnav .nx-subitem svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root:not([data-nx-base="off"])) .nx-subnav .nx-subitem:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root:not([data-nx-base="off"])) .nx-subnav .nx-subitem.active{background:var(--brand-lt);color:var(--brand)}
:where(:root:not([data-nx-base="off"])) .nx-subnav .nx-subitem.active svg{color:var(--brand)}
:where(:root:not([data-nx-base="off"])) .nx-subnav .nx-subitem .nx-sub-badge{
  margin-left:auto;background:var(--red);color:#fff;
  font-size:10px;font-weight:700;border-radius:999px;
  min-width:16px;height:16px;padding:0 5px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:0 0 auto
}

/* -- Main column -- */
:where(:root:not([data-nx-base="off"])) .nx-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
:where(:root:not([data-nx-base="off"])) .nx-topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;
  padding:14px 22px;border-bottom:1px solid var(--nx-line)
}
:where(:root:not([data-nx-base="off"])) .nx-top-actions{display:flex;align-items:center;gap:10px;flex:none}

/* Square icon button. .nx-theme-btn is the old name, kept so the shells that
   have not been migrated yet keep working. */
:where(:root:not([data-nx-base="off"])) .nx-icon-btn,
:where(:root:not([data-nx-base="off"])) .nx-theme-btn{
  width:36px;height:36px;border-radius:var(--nx-radius-xs);
  border:1px solid var(--nx-line2);background:var(--nx-elev);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--nx-ink2);padding:0
}
:where(:root:not([data-nx-base="off"])) .nx-icon-btn:hover,
:where(:root:not([data-nx-base="off"])) .nx-theme-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root:not([data-nx-base="off"])) .nx-icon-btn svg,
:where(:root:not([data-nx-base="off"])) .nx-theme-btn svg{width:16px;height:16px}

/* -- Account menu -- */
:where(:root:not([data-nx-base="off"])) .nx-user{position:relative;display:flex;align-items:center}
:where(:root:not([data-nx-base="off"])) .nx-user-av-btn{padding:0;border:none;background:none;cursor:pointer;border-radius:50%;display:flex}
:where(:root:not([data-nx-base="off"])) .nx-user-av{
  width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--nx-on-brand);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;text-transform:uppercase
}
:where(:root:not([data-nx-base="off"])) .nx-user-av-btn:hover .nx-user-av,
:where(:root:not([data-nx-base="off"])) .nx-user-av-btn:focus-visible .nx-user-av{box-shadow:0 0 0 3px var(--brand-lt);outline:none}
:where(:root:not([data-nx-base="off"])) .nx-user-av.lg{width:38px;height:38px;font-size:13px;flex:0 0 auto}
:where(:root:not([data-nx-base="off"])) .nx-user-pop{
  position:absolute;top:calc(100% + 9px);right:0;min-width:236px;z-index:120;
  background:var(--nx-surface);border:1px solid var(--nx-line2);
  border-radius:14px;box-shadow:var(--nx-shadow-lg);padding:7px;display:none
}
:where(:root:not([data-nx-base="off"])) .nx-user-pop.open{display:block;animation:nxPop .16s ease}
@keyframes nxPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
:where(:root:not([data-nx-base="off"])) .nx-user-pop-id{display:flex;align-items:center;gap:11px;padding:9px 9px 11px}
:where(:root:not([data-nx-base="off"])) .nx-user-pop-meta{min-width:0;line-height:1.25}
:where(:root:not([data-nx-base="off"])) .nx-user-pop-name{display:block;font-size:13.5px;font-weight:700;color:var(--nx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root:not([data-nx-base="off"])) .nx-user-pop-sub{display:block;font-size:11.5px;color:var(--nx-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root:not([data-nx-base="off"])) .nx-user-pop-sep{height:1px;background:var(--nx-line);margin:2px 4px 6px}
:where(:root:not([data-nx-base="off"])) .nx-user-pop-item{
  display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
  padding:9px 10px;border:none;background:none;border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:500;color:var(--nx-ink2);
  text-align:left;text-decoration:none
}
:where(:root:not([data-nx-base="off"])) .nx-user-pop-item svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root:not([data-nx-base="off"])) .nx-user-pop-item:hover{background:var(--nx-hover)}
:where(:root:not([data-nx-base="off"])) .nx-user-pop-item.danger,
:where(:root:not([data-nx-base="off"])) .nx-user-pop-item.danger svg{color:var(--red)}

/* -- Buttons the open page lifts into this header -- */
:where(:root:not([data-nx-base="off"])) .nx-page-actions{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0;flex:0 1 auto;overflow:hidden}
:where(:root:not([data-nx-base="off"])) .nx-page-actions:empty{margin-left:0}
:where(:root:not([data-nx-base="off"])) .nx-page-actions .nx-pbtn{
  height:36px;display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);
  border-radius:var(--nx-radius-xs);padding:0 12px;
  font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1
}
:where(:root:not([data-nx-base="off"])) .nx-page-actions .nx-pbtn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root:not([data-nx-base="off"])) .nx-page-actions .nx-pbtn svg{width:14px;height:14px}
:where(:root:not([data-nx-base="off"])) .nx-page-actions .nx-pbtn.primary{border-color:var(--brand);color:var(--brand)}
:where(:root:not([data-nx-base="off"])) .nx-page-actions .nx-pbtn.primary:hover{background:var(--brand-lt)}
/* The embedded page's spinner class rides along inside the button HTML, but its
   keyframes live in that page -- repeat them here so it really spins. */
:where(:root:not([data-nx-base="off"])) .nx-page-actions .dt-spin,
:where(:root:not([data-nx-base="off"])) .nx-icon-btn .dt-spin,
:where(:root:not([data-nx-base="off"])) .nx-theme-btn .dt-spin{animation:dt-spin .7s linear infinite}
@keyframes dt-spin{to{transform:rotate(360deg)}}

/* -- Page iframes: all kept alive, only one shown -- */
:where(:root:not([data-nx-base="off"])) .nx-frame-wrap{flex:1;position:relative;min-height:0;overflow:hidden;background:var(--nx-surface)}
:where(:root:not([data-nx-base="off"])) .nx-frames{position:absolute;inset:0}
:where(:root:not([data-nx-base="off"])) .nx-frame{width:calc(100% + 22px);height:100%;border:0;display:block;background:var(--nx-surface);overflow:hidden}
:where(:root:not([data-nx-base="off"])) .nx-frames .nx-frame{position:absolute;inset:0;opacity:0;transition:opacity .18s ease}
:where(:root:not([data-nx-base="off"])) .nx-frames .nx-frame:not(.active){opacity:0;pointer-events:none;z-index:0}
:where(:root:not([data-nx-base="off"])) .nx-frames .nx-frame.active{opacity:1;z-index:1}
:where(:root:not([data-nx-base="off"])) .nx-frame-load{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--nx-ink3);background:var(--nx-surface);
  z-index:3;opacity:1;transition:opacity .2s ease
}
:where(:root:not([data-nx-base="off"])) .nx-frame-wrap.loaded .nx-frame-load{opacity:0;pointer-events:none}

/* -- The scrolling body of a page that draws itself inside the shell, rather
      than loading another page into an iframe. Sits under .nx-topbar. -- */
.nx-scrollarea{flex:1;min-height:0;overflow-y:auto;padding:20px 22px 34px}
.nx-scrollarea::-webkit-scrollbar{width:10px;height:10px;background:transparent}
.nx-scrollarea::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
.nx-scrollarea:hover::-webkit-scrollbar-thumb{background:var(--nx-line2);background-clip:padding-box}

/* Page heading inside a scroll area. */
:where(:root:not([data-nx-base="off"])) .nx-pagehead{margin-bottom:15px}
:where(:root:not([data-nx-base="off"])) .nx-pagehead h1{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink);margin:0 0 4px}
:where(:root:not([data-nx-base="off"])) .nx-pagehead p{font-size:12.5px;color:var(--nx-ink2);margin:0;max-width:660px;line-height:1.55}

/* Counter chips. Shared shape; the Cash pages have their own copies still. */
.nx-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.nx-chip{display:flex;align-items:center;gap:7px;background:var(--nx-elev);border:1px solid var(--nx-line2);
  border-radius:11px;padding:6px 11px;font-size:12px;color:var(--nx-ink2);font-weight:600}
.nx-chip b{font-size:13.5px;font-weight:800;color:var(--nx-ink)}
.nx-chip.ok b{color:var(--st-ok)}
.nx-chip.warn b{color:var(--st-warn)}
.nx-chip.mute b{color:var(--nx-ink3)}


/* ============================================================================
 * 7. LIGHT / DARK BUTTON
 * One square icon button holding both icons; the theme decides which shows.
 *
 *   <button type="button" class="nx-icon-btn" onclick="nxToggleTheme()">
 *     <svg class="nx-ic-sun" ...></svg>
 *     <svg class="nx-ic-moon" ...></svg>
 *   </button>
 * ========================================================================== */
:where(:root:not([data-nx-base="off"])) .nx-ic-moon{display:none}
:root[data-theme="dark"]:where(:not([data-nx-base="off"])) .nx-ic-sun{display:none}
:root[data-theme="dark"]:where(:not([data-nx-base="off"])) .nx-ic-moon{display:block}


/* ============================================================================
 * 8. DEPARTMENT TOTALS -- Nexus look
 * The page keeps its own class names and all its JS. These rules reshape those
 * classes to the Nexus components: 16px cards, rail-coloured uppercase table
 * headers, pill tabs, softer spacing. Loading this file after the page's own
 * <style> block is what lets them win.
 * ========================================================================== */

:where(:root:not([data-nx-base="off"])) .scroll-area{padding:20px 22px 28px}
:where(:root:not([data-nx-base="off"])) .dt-greeting{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink);max-width:none}
:where(:root:not([data-nx-base="off"])) .dt-body-scope{margin-bottom:18px;gap:16px}

/* Metric cards */
:where(:root:not([data-nx-base="off"])) .dt-metric-grid{gap:16px;margin-bottom:16px}
:where(:root:not([data-nx-base="off"])) .dt-mc{
  background:var(--nx-elev);border:1px solid var(--nx-line);
  border-radius:var(--nx-radius);padding:16px 17px;
  box-shadow:var(--nx-shadow);transition:box-shadow .15s,transform .15s
}
:where(:root:not([data-nx-base="off"])) .dt-mc:hover{box-shadow:var(--nx-shadow-hover);transform:translateY(-1px)}
:where(:root:not([data-nx-base="off"])) .dt-mc-lbl{font-size:12.5px;font-weight:600;color:var(--nx-ink2);text-transform:none;letter-spacing:0;margin-bottom:11px}
:where(:root:not([data-nx-base="off"])) .dt-mc-val{font-size:25px;font-weight:800;letter-spacing:-.03em;color:var(--nx-ink)}
:where(:root:not([data-nx-base="off"])) .dt-mc-sub{font-size:11px;color:var(--nx-ink3);margin-top:8px}

/* Pill tabs */
:where(:root:not([data-nx-base="off"])) .dt-tabs{background:transparent;border:none;padding:0;gap:8px;margin-bottom:16px}
:where(:root:not([data-nx-base="off"])) .dt-tab{
  border:1px solid var(--nx-line2);background:var(--nx-elev);
  border-radius:var(--nx-radius-xs);padding:8px 13px;
  font-size:12px;font-weight:600;color:var(--nx-ink2);transition:all var(--nx-speed)
}
:where(:root:not([data-nx-base="off"])) .dt-tab:hover{border-color:var(--nx-ink3);color:var(--nx-ink);background:var(--nx-elev)}
:where(:root:not([data-nx-base="off"])) .dt-tab.active{background:var(--blue-lt);border-color:var(--blue);color:var(--blue);box-shadow:var(--nx-shadow)}
:where(:root:not([data-nx-base="off"])) .dt-tab .dt-tab-sub{color:var(--nx-ink3);font-weight:500}
:where(:root:not([data-nx-base="off"])) .dt-tab.active .dt-tab-sub{color:var(--blue)}
:where(:root:not([data-nx-base="off"])) .dt-nav-tab.active{background:var(--nx-surface)}

/* Period bar, chart, insights */
:where(:root:not([data-nx-base="off"])) .dt-period-bar{
  background:var(--nx-elev);border:1px solid var(--nx-line);
  border-radius:var(--nx-radius-sm);padding:10px 15px;margin-bottom:16px;
  font-size:12px;box-shadow:var(--nx-shadow)
}
:where(:root:not([data-nx-base="off"])) .dt-chart-wrap,
:where(:root:not([data-nx-base="off"])) .dt-insights,
:where(:root:not([data-nx-base="off"])) .panel{
  background:var(--nx-elev);border:1px solid var(--nx-line);
  border-radius:var(--nx-radius);overflow:hidden;box-shadow:var(--nx-shadow)
}
:where(:root:not([data-nx-base="off"])) .dt-chart-wrap,
:where(:root:not([data-nx-base="off"])) .dt-insights{padding:15px 17px 16px;margin-bottom:16px}
:where(:root:not([data-nx-base="off"])) .dt-chart-title,
:where(:root:not([data-nx-base="off"])) .dt-insights-title{font-size:13.5px;font-weight:700;color:var(--nx-ink);letter-spacing:-.01em}
:where(:root:not([data-nx-base="off"])) .dt-chart-sub,
:where(:root:not([data-nx-base="off"])) .dt-insights-sub{font-size:11.5px;color:var(--nx-ink3)}
:where(:root:not([data-nx-base="off"])) .dt-chart-canvas-wrap{height:230px}
:where(:root:not([data-nx-base="off"])) .dt-insight{border-radius:12px;background:var(--nx-rail)}

:where(:root:not([data-nx-base="off"])) .panel-head{padding:15px 17px;border-bottom:1px solid var(--nx-line)}
:where(:root:not([data-nx-base="off"])) .panel-title{font-size:13.5px;font-weight:700;color:var(--nx-ink)}
:where(:root:not([data-nx-base="off"])) .panel-action{font-size:12px;color:var(--nx-ink2);font-weight:600}

/* Tables */
:where(:root:not([data-nx-base="off"])) .tbl-wrap table thead th,
:where(:root:not([data-nx-base="off"])) .dt-emp-table th{
  background:var(--nx-rail);color:var(--nx-ink3);
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line);padding:11px 16px
}
:where(:root:not([data-nx-base="off"])) .tbl-wrap table tbody td{padding:13px 16px;border-bottom:1px solid var(--nx-line);font-size:12.5px}
:where(:root:not([data-nx-base="off"])) .tbl-wrap table tbody tr:hover td{background:var(--nx-hover)}

/* Wide department grid */
:where(:root:not([data-nx-base="off"])) .dt-grid-wrap{
  border:1px solid var(--nx-line);border-radius:var(--nx-radius);
  background:var(--nx-elev);box-shadow:var(--nx-shadow)
}
:where(:root:not([data-nx-base="off"])) .dt-grid-table thead th,
:where(:root:not([data-nx-base="off"])) .dt-grid-table thead th:first-child{background:var(--nx-rail);color:var(--nx-ink3);border-bottom:1px solid var(--nx-line)}
:where(:root:not([data-nx-base="off"])) .dt-grid-table thead th.dt-total-col{background:var(--nx-hover)}
:where(:root:not([data-nx-base="off"])) .dt-grid-table tbody td{border-bottom:1px solid var(--nx-line)}
:where(:root:not([data-nx-base="off"])) .dt-grid-table tbody td:first-child{background:var(--nx-elev);color:var(--nx-ink2)}
:where(:root:not([data-nx-base="off"])) .dt-grid-table tbody tr:hover td,
:where(:root:not([data-nx-base="off"])) .dt-grid-table tbody tr:hover td:first-child{background:var(--nx-hover)}
:where(:root:not([data-nx-base="off"])) .dt-grid-table tbody td.dt-total{background:var(--nx-rail)}
:where(:root:not([data-nx-base="off"])) .dt-grid-table tbody tr:hover td.dt-total{background:var(--nx-hover)}
:where(:root:not([data-nx-base="off"])) .dt-grid-table tbody tr.dt-grp td,
:where(:root:not([data-nx-base="off"])) .dt-grid-table tbody tr.dt-grp td:first-child{background:var(--nx-rail)!important;color:var(--nx-ink3)}
:where(:root:not([data-nx-base="off"])) .dt-grid-table tfoot td,
:where(:root:not([data-nx-base="off"])) .dt-grid-table tfoot td:first-child{background:var(--nx-rail);color:var(--nx-ink);border-top:2px solid var(--nx-line2)}
:where(:root:not([data-nx-base="off"])) .dt-grid-table tfoot td.dt-total{background:var(--nx-hover)}
:where(:root:not([data-nx-base="off"])) .dt-grid-cell{font-weight:600}
:where(:root:not([data-nx-base="off"])) .dt-grid-table tbody td.dt-cell-clickable:hover .dt-grid-cell{background:var(--blue-lt);color:var(--blue)}

/* Employee tables */
:where(:root:not([data-nx-base="off"])) .dt-emp-table tbody td:first-child,
:where(:root:not([data-nx-base="off"])) .dt-emp-matrix tbody td:first-child,
:where(:root:not([data-nx-base="off"])) .dt-emp-week-bar{background:var(--nx-elev)}
:where(:root:not([data-nx-base="off"])) .dt-emp-table tbody tr:hover td{background:var(--nx-hover)}
:where(:root:not([data-nx-base="off"])) .dt-emp-table td{border-bottom-color:var(--nx-line)}
:where(:root:not([data-nx-base="off"])) table.dt-emp-charge-single thead tr.dt-charge-colhead th,
:where(:root:not([data-nx-base="off"])) table.dt-emp-charge-single tr.dt-charge-date-row td,
:where(:root:not([data-nx-base="off"])) table.dt-emp-charge-single tfoot tr.dt-charge-grand td{background:var(--nx-rail)}
:where(:root:not([data-nx-base="off"])) .dt-summary-card.rate{background:var(--blue-lt);border-color:var(--blue-lt)}
:where(:root:not([data-nx-base="off"])) .dt-bd-bar{background:var(--nx-hover)}

/* Comboboxes */
:where(:root:not([data-nx-base="off"])) .dt-combo-btn{
  border:1px solid var(--nx-line2);border-radius:var(--nx-radius-sm);
  background:var(--nx-elev);color:var(--nx-ink);padding:9px 12px
}
:where(:root:not([data-nx-base="off"])) .dt-combo-btn:hover{border-color:var(--nx-ink3)}
:where(:root:not([data-nx-base="off"])) .dt-combo.open .dt-combo-btn{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-lt)}
:where(:root:not([data-nx-base="off"])) .dt-combo-pop{
  border:1px solid var(--nx-line2);border-radius:14px;
  background:var(--nx-surface);box-shadow:var(--nx-shadow-lg)
}
:where(:root:not([data-nx-base="off"])) .dt-combo-opt:hover,:where(:root:not([data-nx-base="off"])) .dt-combo-opt.active{background:var(--nx-hover)}
:where(:root:not([data-nx-base="off"])) .dt-combo-opt.selected{color:var(--blue);background:var(--blue-lt)}
:where(:root:not([data-nx-base="off"])) .dt-combo-search input{border-radius:9px;background:var(--nx-rail);border:1px solid var(--nx-line2);color:var(--nx-ink)}
:where(:root:not([data-nx-base="off"])) .dt-combo-search input:focus{border-color:var(--blue);background:var(--nx-elev);box-shadow:0 0 0 3px var(--blue-lt)}
:where(:root:not([data-nx-base="off"])) .dt-map-sel,
:where(:root:not([data-nx-base="off"])) .dt-pager-btn,
:where(:root:not([data-nx-base="off"])) .dt-upload-panel{background:var(--nx-elev)}

/* Topbar buttons */
.dt-dash-actions .btn{
  border:1px solid var(--nx-line2);background:var(--nx-elev);
  border-radius:var(--nx-radius-xs);color:var(--nx-ink2);font-weight:600;padding:8px 13px
}
.dt-dash-actions .btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink);background:var(--nx-elev)}

/* Modals */
:where(:root:not([data-nx-base="off"])) .modal{border-radius:18px;background:var(--nx-surface)}
:where(:root:not([data-nx-base="off"])) .dt-modal-head{border-bottom:1px solid var(--nx-line)}
:where(:root:not([data-nx-base="off"])) .dt-modal-head h3{font-size:15px;color:var(--nx-ink)}
:where(:root:not([data-nx-base="off"])) .dt-summary-card,:where(:root:not([data-nx-base="off"])) .dt-bd-wrap,:where(:root:not([data-nx-base="off"])) .dt-bd-card,:where(:root:not([data-nx-base="off"])) .dt-emp-trend{border-radius:12px}

/* Dropzone and files */
:where(:root:not([data-nx-base="off"])) .dt-dropzone{border:2px dashed var(--nx-line2);border-radius:var(--nx-radius);background:var(--nx-rail)}
:where(:root:not([data-nx-base="off"])) .dt-dropzone:hover{border-color:var(--nx-ink3);background:var(--nx-rail)}
:where(:root:not([data-nx-base="off"])) .dt-fileitem{border-bottom-color:var(--nx-line)}

/* User menu */
:where(:root:not([data-nx-base="off"])) .dt-user-avatar{background:var(--blue);color:var(--nx-on-brand)}
:where(:root:not([data-nx-base="off"])) .dt-user-pop{border-radius:14px;background:var(--nx-surface);border:1px solid var(--nx-line2);box-shadow:var(--nx-shadow-lg)}
:where(:root:not([data-nx-base="off"])) .dt-user-item:hover{background:var(--nx-hover)}

/* Toast chip */
:where(:root:not([data-nx-base="off"])) .dt-toast{background:var(--nx-toast-bg);color:var(--nx-toast-ink)}


/* ============================================================================
 * 9. EMBEDDED PAGE BASE
 * The pages that load inside a dashboard frame with ?embed=1. They sit on the
 * white card surface, never scroll at the page level, and do their scrolling
 * inside .nx-scroll.
 *
 * Pages also carry data-page on <html> so a page can override a shared rule
 * without the override leaking to the others:
 *
 *   <html lang="en" class="cr-embed" data-module="cash" data-page="rent">
 * ========================================================================== */
html.cr-embed:where(:not([data-nx-base="off"])),
html.cr-embed:where(:not([data-nx-base="off"])) body{
  height:100%;margin:0;overflow:hidden;scrollbar-gutter:auto;
  background:var(--nx-surface);color:var(--nx-ink);
  font-family:var(--font,'Inter',system-ui,sans-serif);font-size:13px
}
html.cr-embed:where(:not([data-nx-base="off"])) *{box-sizing:border-box}

:where(:root:not([data-nx-base="off"])) .nx-scroll{height:100vh;overflow-y:auto;padding:14px 22px 28px}
/* Scrollbar only appears on hover, so a still page reads clean. */
:where(:root:not([data-nx-base="off"])) .nx-scroll::-webkit-scrollbar{width:10px;height:10px;background:transparent}
:where(:root:not([data-nx-base="off"])) .nx-scroll::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
:where(:root:not([data-nx-base="off"])) .nx-scroll:hover::-webkit-scrollbar-thumb{background:var(--nx-line2);background-clip:padding-box}

:where(:root:not([data-nx-base="off"])) .nx-card{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);overflow:hidden}

/* Nothing-to-show panel */
.nx-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:56px 24px}
.nx-blank-ic{width:52px;height:52px;border-radius:14px;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center}
.nx-blank-ic svg{width:24px;height:24px}
.nx-blank-t{font-size:15px;font-weight:700}
.nx-blank-s{font-size:12.5px;color:var(--nx-ink2);max-width:400px;line-height:1.5}


/* ============================================================================
 * 10. STATUS COLOURS FOR THE CASH PAGES
 * Rent and Positive Pay both mark rows done / open / late / for-info. They had
 * their own copies of these, light and dark. They now come off the shared
 * tokens, so there is no second set to keep in step.
 * ========================================================================== */
:root{
  --st-ok:var(--nx-up);        --st-ok-bg:var(--nx-up-bg);
  --st-warn:var(--amber-text); --st-warn-bg:var(--amber-lt);
  --st-info:var(--accent-blue);--st-info-bg:var(--accent-blue-lt);
  --st-mute:var(--nx-ink2);    --st-mute-bg:var(--nx-hover);
  --st-late:var(--red);        --st-late-bg:var(--red-lt);
  /* "Nothing to do" -- kept apart from --st-ok, which means work was done. */
  --st-clear:var(--teal);      --st-clear-bg:var(--teal-lt);
}


/* ============================================================================
 * 11. CASH -- RENT
 * The month grid. The page fills the frame and the table scrolls inside it,
 * so this view does not use the normal scrolling card.
 * ========================================================================== */
:root[data-page="rent"]:where(:not([data-nx-base="off"])) .nx-scroll{display:flex;flex-direction:column;overflow:hidden;padding:14px 22px 18px}
:root[data-page="rent"] #rtHost{flex:1;min-height:0;display:flex;flex-direction:column}
:root[data-page="rent"] #rtHost>.nx-card{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}

/* Month bar + counters */
.rt-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.rt-datebox{display:flex;align-items:center;gap:2px;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:11px;padding:3px}
.rt-arrow{width:28px;height:28px;border:0;background:transparent;border-radius:8px;color:var(--nx-ink2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.rt-arrow:hover{background:var(--nx-line);color:var(--nx-ink)}
.rt-arrow svg{width:14px;height:14px}
.rt-datebtn{border:0;background:transparent;color:var(--nx-ink);font:inherit;font-weight:700;font-size:13px;padding:5px 12px;border-radius:8px;cursor:pointer;min-width:150px}
.rt-datebtn:hover{background:var(--nx-line)}
.rt-today{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);font:inherit;font-weight:600;font-size:12px;padding:7px 12px;border-radius:10px;cursor:pointer}
.rt-today:hover{border-color:var(--brand);color:var(--brand)}
.rt-today.on{background:var(--brand);border-color:var(--brand);color:var(--nx-on-brand)}
.rt-today.on:hover{background:var(--brand-2);border-color:var(--brand-2);color:var(--nx-on-brand)}
.rt-search{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:10px;padding:7px 11px;font:inherit;font-size:12.5px;outline:none;width:186px}
.rt-search:focus{border-color:var(--brand)}
.rt-search::placeholder{color:var(--nx-ink3)}
.rt-spacer{flex:1}
.rt-chips{display:flex;gap:8px;flex-wrap:wrap}
.rt-chip{display:flex;align-items:center;gap:7px;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:11px;padding:6px 11px;font-size:12px;color:var(--nx-ink2);font-weight:600}
.rt-chip b{font-size:13.5px;font-weight:800;color:var(--nx-ink)}
.rt-chip.done b{color:var(--st-ok)}
.rt-chip.open b{color:var(--st-warn)}
.rt-hide{display:none}

/* Banner while the settings view is up */
.rt-mode{display:none;align-items:center;gap:9px;background:var(--brand-lt);color:var(--brand);border:1px solid var(--brand);border-radius:11px;padding:8px 13px;font-size:12.5px;font-weight:600;margin-bottom:12px}
.rt-mode.on{display:flex}
.rt-mode svg{width:14px;height:14px;flex:none}
.rt-mode button{border:1px solid var(--brand);background:var(--brand);color:var(--nx-on-brand);font:inherit;font-size:12px;font-weight:600;padding:5px 12px;border-radius:9px;cursor:pointer;flex:none}
.rt-mode button:hover{background:var(--brand-2);border-color:var(--brand-2)}

/* Table */
.rt-tablewrap{overflow:auto;flex:1;min-height:0;border:1px solid var(--nx-line);border-radius:var(--nx-radius);background:var(--nx-elev)}
table.rt-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:12.5px;min-width:2188px}
table.rt-table.set{min-width:1714px}
.rt-table thead th{position:sticky;top:0;z-index:3;background:var(--nx-rail);color:var(--nx-ink3);font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;text-align:center;padding:11px 10px;border:none;box-shadow:inset 0 -1px 0 var(--nx-line);white-space:nowrap}
.rt-table thead th.sortable{cursor:pointer;user-select:none}
.rt-table thead th.sortable:hover{color:var(--nx-ink)}
.rt-table thead th .ar{display:inline-block;width:8px;font-size:9px;color:var(--brand);margin-left:1px}
.rt-table thead th.asc .ar::after{content:"\2191"}
.rt-table thead th.desc .ar::after{content:"\2193"}
.rt-table tbody td{padding:5px 10px;border-bottom:1px solid var(--nx-line);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-table tbody td.num{text-align:right;font-variant-numeric:tabular-nums}
.rt-table tbody tr:last-child td{border-bottom:0}
.rt-table tbody tr:hover td{background:var(--nx-hover)}
.rt-table tbody tr.rt-open td{background:var(--st-late-bg)}
.rt-co-badge{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap}
.rt-fac{font-weight:600;color:var(--nx-ink);white-space:nowrap}
.rt-custom{display:inline-flex;align-items:center;margin-left:6px;color:var(--nx-ink3);vertical-align:middle}
.rt-custom svg{width:11px;height:11px}

/* Column widths. Set on the heading and the cell both, and the table is
   laid out fixed, so a long name can never push a column about. */
.rt-table th.rt-c-st,.rt-table td.rt-c-st{width:152px}
.rt-table th.rt-c-co,.rt-table td.rt-c-co{width:122px}
.rt-table th.rt-c-fac,.rt-table td.rt-c-fac{width:196px}
.rt-table th.rt-c-realty,.rt-table td.rt-c-realty{width:190px}
.rt-table th.rt-c-bank,.rt-table td.rt-c-bank{width:104px}
.rt-table th.rt-c-pay,.rt-table td.rt-c-pay{width:142px}
.rt-table th.rt-c-due,.rt-table td.rt-c-due{width:74px}
/* Amounts read in full now -- $80,606.00, not $80.6k -- so the money columns
   are wide enough for a seven-figure rent with its cents. */
.rt-table th.rt-c-money,.rt-table td.rt-c-money{width:140px}
.rt-table th.rt-c-diff,.rt-table td.rt-c-diff{width:110px;text-align:right;font-variant-numeric:tabular-nums}
.rt-table th.rt-c-small,.rt-table td.rt-c-small{width:88px}
.rt-table th.rt-c-serv,.rt-table td.rt-c-serv{width:132px}
.rt-table th.rt-c-note,.rt-table td.rt-c-note{width:230px}

/* Read-only cells. The ones that filter say so by lighting up on hover. */
.rt-val{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 2px}
.rt-val.empty{color:var(--nx-ink3)}
.rt-money{font-variant-numeric:tabular-nums;font-weight:600}
.rt-money .src{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--st-info);margin-left:6px;vertical-align:middle}
.rt-note{max-width:100%;font-size:12px;color:var(--nx-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;padding:3px 2px}
.rt-note.empty{color:var(--nx-ink3)}
.rt-pick{cursor:pointer;border:1px solid transparent;border-radius:8px;padding:3px 7px}
.rt-pick:hover{border-color:var(--nx-ink3)}

/* Status is the one thing still set on the row itself */
.rt-set{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:8px;padding:3px 8px;font-size:12px;font-weight:600;cursor:pointer;max-width:100%;background:var(--st-mute-bg);color:var(--st-mute);text-align:left}
.rt-set.ro{cursor:default}
.rt-set .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.rt-set .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-set.ok{background:var(--st-ok-bg);color:var(--st-ok)}
.rt-set.warn{background:var(--st-warn-bg);color:var(--st-warn)}
.rt-set.info{background:var(--st-info-bg);color:var(--st-info)}
.rt-set.mute{background:var(--st-mute-bg);color:var(--st-mute)}
.rt-set.late{background:var(--st-late-bg);color:var(--st-late)}
.rt-set.blank{background:transparent;border-color:var(--nx-line2);color:var(--nx-ink3);font-weight:500}
.rt-set:not(.ro):hover{border-color:var(--nx-ink3)}

/* Settings view: this is where the boxes live */
.rt-in{width:100%;border:1px solid transparent;background:transparent;color:var(--nx-ink);border-radius:8px;padding:5px 8px;font:inherit;font-size:12.5px;outline:none}
.rt-in:hover{border-color:var(--nx-line2)}
.rt-in:focus{border-color:var(--brand);background:var(--nx-surface)}
.rt-in::placeholder{color:var(--nx-ink3)}
.rt-in.saved{border-color:var(--st-ok)}
.rt-in.num{text-align:right;font-variant-numeric:tabular-nums}
.rt-in:disabled{cursor:default;pointer-events:none;color:var(--nx-ink)}

/* Transferred and Balance on the sheet. Squeezed into a fixed column, a long
   number gets clipped as you type, so on focus the box grows rightward over
   its neighbours. Absolute + pinned to the cell edges keeps it lined up and
   stops it shoving the table about. Same trick as Payroll > Transfers. */
.rt-table td.rt-cell-in{position:relative}
.rt-table td.rt-cell-in .rt-in:focus{position:absolute;top:2px;right:2px;left:2px;width:auto;min-width:124px;z-index:5;background:var(--nx-surface);box-shadow:var(--nx-shadow-lg)}
.rt-in.dirty{border-color:var(--brand)}
/* A negative amount is a note somebody left on purpose, not money that went
   out. It reads as one, and is left out of the Difference and the totals. */
.rt-in.rt-neg{color:var(--nx-down);font-style:italic}
/* A transfer has gone out and nobody has said what is in the account. */
.rt-in.rt-need-bal{border-color:var(--st-warn);background:var(--st-warn-bg)}
.rt-in.rt-need-bal::placeholder{color:var(--st-warn);opacity:1}
/* The account does not hold enough to cover the rent. */
.rt-in.rt-bal-short{color:var(--nx-down);font-weight:600}

/* Difference: over in green, short in red and bracketed. */
.rt-c-diff .rt-money{font-weight:700}
.rt-c-diff.rt-diff-ok .rt-money{color:var(--nx-up)}
.rt-c-diff.rt-diff-bad .rt-money{color:var(--nx-down)}

.rt-menubtn{width:100%;text-align:left;border:1px solid transparent;background:transparent;color:var(--nx-ink);border-radius:8px;padding:5px 8px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-menubtn:hover{border-color:var(--nx-line2)}
.rt-menubtn.empty{color:var(--nx-ink3)}
.rt-menubtn.saved{border-color:var(--st-ok)}
.rt-iconbtn{border:1px solid transparent;background:transparent;color:var(--nx-ink3);border-radius:8px;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.rt-iconbtn:hover{border-color:var(--st-late);color:var(--st-late)}
.rt-iconbtn svg{width:13px;height:13px}
.rt-iconbtn[disabled]{opacity:.25;cursor:default}
.rt-iconbtn[disabled]:hover{border-color:transparent;color:var(--nx-ink3)}
.rt-table th.rt-c-in,.rt-table td.rt-c-in{width:172px}
.rt-table th.rt-c-inm,.rt-table td.rt-c-inm{width:116px}
.rt-table th.rt-c-act,.rt-table td.rt-c-act{width:54px}

/* Our own menu, never the browser's */
.rt-menu{position:fixed;z-index:720;min-width:196px;max-height:320px;overflow-y:auto;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:12px;box-shadow:var(--nx-shadow-lg);padding:5px;display:none}
.rt-menu.open{display:block}
.rt-mitem{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:var(--nx-ink);font:inherit;font-size:12.5px;font-weight:600;text-align:left;padding:8px 10px;border-radius:9px;cursor:pointer}
.rt-mitem:hover{background:var(--nx-line)}
.rt-mitem .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--nx-ink3)}
.rt-mitem.ok .dot{background:var(--st-ok)}
.rt-mitem.warn .dot{background:var(--st-warn)}
.rt-mitem.info .dot{background:var(--st-info)}
.rt-mitem.mute .dot{background:var(--st-mute)}
.rt-mitem.late .dot{background:var(--st-late)}
.rt-mitem.on{background:var(--brand-lt);color:var(--brand)}
.rt-mitem.danger{color:var(--st-late)}
.rt-msep{height:1px;background:var(--nx-line);margin:4px 6px}
.rt-mhead{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3);padding:7px 10px 5px}
.rt-mform{padding:8px 10px 10px;min-width:216px}
.rt-mform input[type=text]{width:100%;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink);border-radius:9px;padding:8px 10px;font:inherit;font-size:12.5px;outline:none}
.rt-mform input[type=text]:focus{border-color:var(--brand)}
.rt-mhint{font-size:11px;color:var(--nx-ink3);margin-top:6px;line-height:1.45}
.rt-mrow{display:flex;gap:7px;margin-top:9px}
.rt-btn{flex:1;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);font:inherit;font-size:12px;font-weight:600;padding:7px 10px;border-radius:9px;cursor:pointer}
.rt-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
.rt-btn.primary{background:var(--brand);border-color:var(--brand);color:var(--nx-on-brand)}
.rt-btn.primary:hover{background:var(--brand-2);border-color:var(--brand-2);color:var(--nx-on-brand)}
.rt-btn.danger{color:var(--st-late);border-color:var(--st-late)}
.rt-btn.danger:hover{background:var(--st-late);color:#fff}
.rt-btn[disabled]{opacity:.55;cursor:default}

/* Month list inside the menu */
.rt-day{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;color:var(--nx-ink);font:inherit;font-size:12.5px;font-weight:600;text-align:left;padding:8px 10px;border-radius:9px;cursor:pointer}
.rt-day:hover{background:var(--nx-line)}
.rt-day.on{background:var(--brand-lt);color:var(--brand)}
.rt-day .d{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rt-day .n{font-size:11px;font-weight:700;color:var(--nx-ink3)}
.rt-day .n.all{color:var(--st-ok)}
.rt-day .tick{width:7px;height:7px;border-radius:50%;flex:none;background:var(--nx-line2)}
.rt-day .tick.all{background:var(--st-ok)}
.rt-day .tick.some{background:var(--st-warn)}

/* Our own tooltip, for the same reason */
.rt-tip{position:fixed;z-index:760;max-width:320px;background:var(--nx-toast-bg);color:var(--nx-toast-ink);font-size:11.5px;font-weight:500;line-height:1.5;padding:8px 11px;border-radius:10px;box-shadow:var(--nx-shadow-lg);opacity:0;pointer-events:none;transition:opacity .12s ease;display:none;white-space:normal}
.rt-tip.show{display:block;opacity:1}
.rt-tip b{font-weight:700}

/* Boxes */
.rt-ov{position:fixed;inset:0;background:var(--nx-overlay);z-index:500;display:none;align-items:center;justify-content:center;padding:24px}
.rt-ov.open{display:flex}
.rt-modal{width:100%;max-width:440px;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:16px;box-shadow:var(--nx-shadow-lg);overflow:hidden;display:flex;flex-direction:column;max-height:88vh}
.rt-mhd{padding:15px 18px 0}
.rt-mtitle{font-size:14.5px;font-weight:700}
.rt-msub{font-size:12px;color:var(--nx-ink3);margin-top:3px;line-height:1.5}
.rt-mbody{padding:14px 18px 16px;overflow-y:auto}
.rt-mbody textarea{width:100%;min-height:132px;resize:vertical;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink);border-radius:11px;padding:10px 12px;font:inherit;font-size:12.5px;line-height:1.5;outline:none}
.rt-mbody textarea:focus{border-color:var(--brand)}
.rt-mft{display:flex;justify-content:flex-end;gap:8px;padding:0 18px 16px}
.rt-mft .rt-btn{flex:none;min-width:92px}
.rt-field{margin-bottom:12px}
.rt-flabel{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink3);margin-bottom:6px}
.rt-input{width:100%;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink);border-radius:10px;padding:9px 11px;font:inherit;font-size:12.5px;outline:none}
.rt-input:focus{border-color:var(--brand)}

/* Toast + empty */
.rt-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);z-index:800;background:var(--nx-toast-bg);color:var(--nx-toast-ink);font-size:12.5px;font-weight:600;padding:10px 16px;border-radius:11px;box-shadow:var(--nx-shadow-lg);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;max-width:min(560px,86vw);text-align:center;line-height:1.45}
.rt-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.rt-toast.err{background:var(--st-late);color:#fff}



.rt-legend{flex:none;margin-top:10px;font-size:11.5px;color:var(--nx-ink3);line-height:1.6}

/* Filter chips */
.rt-filterbar{display:none;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.rt-filterbar.on{display:flex}
.rt-fchip{display:inline-flex;align-items:center;gap:6px;background:var(--st-ok-bg);color:var(--st-ok);border:1px solid var(--st-ok);border-radius:20px;padding:4px 6px 4px 11px;font-size:12px;font-weight:600}
.rt-fchip b{font-weight:700}
.rt-fchip button{border:none;background:none;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0 4px;opacity:.7;font-family:inherit}
.rt-fchip button:hover{opacity:1}
.rt-fchip.not{background:var(--st-late-bg);color:var(--st-late);border-color:var(--st-late)}
.rt-fclear{border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer}
.rt-fclear:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}


/* ============================================================================
 * 12. CASH -- POSITIVE PAY
 * The daily status grid.
 * ========================================================================== */
:root[data-page="positive-pay"]:where(:not([data-nx-base="off"])) .nx-card{padding:18px}

/* ── Date bar + counters ───────────────────────────────────────────── */
.pp-bar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.pp-datebox{display:flex;align-items:center;gap:2px;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:11px;padding:3px}
.pp-arrow{width:28px;height:28px;border:0;background:transparent;border-radius:8px;color:var(--nx-ink2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pp-arrow:hover{background:var(--nx-line);color:var(--nx-ink)}
.pp-arrow:disabled{opacity:.3;cursor:default}
.pp-arrow:disabled:hover{background:transparent;color:var(--nx-ink2)}
.pp-arrow svg{width:14px;height:14px}
.pp-datebtn{border:0;background:transparent;color:var(--nx-ink);font:inherit;font-weight:700;font-size:13px;padding:5px 12px;border-radius:8px;cursor:pointer;min-width:168px}
.pp-datebtn:hover{background:var(--nx-line)}
.pp-today{display:inline-flex;align-items:center;height:36px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);font:inherit;font-weight:600;font-size:12px;padding:0 13px;border-radius:10px;cursor:pointer}
.pp-today:hover{border-color:var(--brand);color:var(--brand)}
.pp-today.on{background:var(--brand);border-color:var(--brand);color:var(--nx-on-brand)}
.pp-today.on:hover{background:var(--brand-2);border-color:var(--brand-2);color:var(--nx-on-brand)}
.pp-spacer{flex:1}
.pp-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}

/* Status picker button on the day bar. The count only shows while something
   is filtered, and the button turns brand-coloured with it. */
.pp-statbtn{gap:7px}
.pp-statbtn svg{width:14px;height:14px;flex:none}
.pp-statn{display:none;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--nx-on-brand);color:var(--brand);font-size:10.5px;font-weight:800;line-height:17px;text-align:center}

/* ── Cards over the table ──────────────────────────────────────────── */
.pp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
@media(max-width:900px){.pp-stats{grid-template-columns:repeat(2,1fr)}}
.pp-kpi{display:block;width:100%;text-align:left;background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:15px 16px;font:inherit;color:var(--nx-ink);cursor:default}
.pp-kpi.click{cursor:pointer}
.pp-kpi.click:hover{border-color:var(--brand)}
.pp-kpi.on{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.pp-kpi-top{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.pp-kpi-chip{width:29px;height:29px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--brand-lt);color:var(--brand)}
.pp-kpi-chip.c-green{background:var(--st-ok-bg);color:var(--st-ok)}
.pp-kpi-chip.c-blue{background:var(--st-info-bg);color:var(--st-info)}
.pp-kpi-chip.c-amber{background:var(--st-warn-bg);color:var(--st-warn)}
.pp-kpi-chip.c-red{background:var(--st-late-bg);color:var(--st-late)}
.pp-kpi-chip svg{width:16px;height:16px}
.pp-kpi-label{font-size:11px;font-weight:700;color:var(--nx-ink3);text-transform:uppercase;letter-spacing:.04em}
.pp-kpi-val{display:block;font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
/* Padlock beside the date, same as the one on Transfers */
.pp-lock{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);border-radius:10px;cursor:pointer}
.pp-lock svg{width:16px;height:16px}
.pp-lock:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
.pp-lock.is-open{border-color:var(--brand);color:var(--brand)}
.pp-lock.is-open:hover{border-color:var(--brand);color:var(--brand)}
.pp-refresh{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px}
.pp-refresh svg{width:14px;height:14px}
.pp-refresh.spinning svg{animation:pp-spin .7s linear infinite}
@keyframes pp-spin{to{transform:rotate(360deg)}}
.pp-lastref{font-size:12px;font-style:italic;color:var(--nx-ink3);white-space:nowrap}
.pp-chip{display:flex;align-items:center;gap:7px;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:11px;padding:6px 11px;font-size:12px;color:var(--nx-ink2);font-weight:600}
.pp-chip b{font-size:13.5px;font-weight:800;color:var(--nx-ink)}
.pp-chip.done b{color:var(--st-ok)}
.pp-chip.open b{color:var(--st-warn)}
.pp-chip.late b{color:var(--st-late)}
.pp-chip.late{border-color:var(--st-late)}

/* ── Table ─────────────────────────────────────────────────────────── */
.pp-tablewrap{overflow-x:auto;border:1px solid var(--nx-line);border-radius:var(--nx-radius);background:var(--nx-elev)}
table.pp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;min-width:1215px;table-layout:fixed}
.pp-table thead th{position:sticky;top:0;z-index:3;background:var(--nx-rail);color:var(--nx-ink3);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:left;padding:9px 12px;border-bottom:1px solid var(--nx-line2);white-space:nowrap}
.pp-table tbody td{padding:4px 12px;border-bottom:1px solid var(--nx-line);vertical-align:middle;height:34px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-table tbody tr:last-child td{border-bottom:0}
/* Past its cutoff. The row's own text turns red rather than the whole row
   turning pink. The decision pills and the client tag say their own thing in
   their own colour, so they are left alone. */
.pp-table tbody tr.pp-late-row td{color:var(--st-late);font-weight:700}
.pp-table tbody tr.pp-late-row .pp-bank,
.pp-table tbody tr.pp-late-row .pp-plain,
.pp-table tbody tr.pp-late-row .pp-notein{color:var(--st-late);font-weight:700}
.pp-table tbody tr.pp-late-row .pp-plain.empty{color:var(--st-late);opacity:.55}
.pp-table tbody tr.pp-late-row .pp-notein::placeholder{color:var(--st-late);opacity:.55}
.pp-co-badge{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap;vertical-align:middle}
.pp-bankcell{display:flex;align-items:center;gap:8px;white-space:nowrap}
.pp-bank{font-weight:600;color:var(--nx-ink);white-space:nowrap}
/* Every column is pinned, and the table lays out on these widths alone
   (table-layout:fixed above). That is what stops the columns jumping about as
   rows are filtered or a longer name appears -- they only move when the page
   itself is resized, and then all of them together. */
.pp-c-client{width:140px}
.pp-c-bank{width:210px}
.pp-c-rep{width:145px}
.pp-c-st{width:168px}
.pp-c-cut{width:96px}
.pp-c-note{width:190px}
.pp-c-up{width:92px}
.pp-co-badge{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pp-bank{overflow:hidden;text-overflow:ellipsis;min-width:0}

/* Cells you can click to change */
.pp-set{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:8px;padding:3px 8px;font-family:inherit;font-size:12px;font-weight:600;line-height:1.45;cursor:pointer;max-width:100%;background:var(--st-mute-bg);color:var(--st-mute);text-align:left}
.pp-set.ro{cursor:default}
.pp-set .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pp-set .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-set.ok{background:var(--st-ok-bg);color:var(--st-ok)}
.pp-set.warn{background:var(--st-warn-bg);color:var(--st-warn)}
.pp-set.info{background:var(--st-info-bg);color:var(--st-info)}
.pp-set.mute{background:var(--st-mute-bg);color:var(--st-mute)}
.pp-set.clear{background:var(--st-clear-bg);color:var(--st-clear)}
.pp-set.blank{background:transparent;border-color:var(--nx-line2);color:var(--nx-ink3);font-weight:500;min-height:23px;min-width:74px}
.pp-set:not(.ro):hover{border-color:var(--nx-ink3)}
.pp-plain{border:1px solid transparent;border-radius:8px;padding:3px 8px;font-family:inherit;font-size:12.5px;line-height:1.45;cursor:pointer;color:var(--nx-ink);display:inline-block;min-width:56px;min-height:23px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.pp-plain.ro{cursor:default}
.pp-plain.empty{color:var(--nx-ink3)}
.pp-plain:not(.ro):hover{border-color:var(--nx-ink3)}
/* Notes is typed straight into the cell -- no popup. */
.pp-notein{width:100%;border:1px solid transparent;background:transparent;border-radius:8px;padding:3px 7px;font:inherit;font-size:12px;color:var(--nx-ink2);outline:none}
.pp-notein::placeholder{color:var(--nx-ink3)}
.pp-notein:hover:not(:disabled){border-color:var(--nx-line2)}
.pp-notein:focus{border-color:var(--brand);background:var(--nx-surface);color:var(--nx-ink)}
.pp-notein:disabled{cursor:default}
.pp-flag{display:inline-flex;align-items:center;color:var(--st-late);flex:none;cursor:pointer}
.pp-flag svg{width:13px;height:13px}
.pp-bell{display:inline-flex;align-items:center;color:var(--st-warn);flex:none;cursor:default}
.pp-bell svg{width:12px;height:12px}

/* ── Floating menu (our own, never the browser's) ─────────────────── */
.pp-menu{position:fixed;z-index:600;min-width:190px;max-height:290px;overflow-y:auto;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:12px;box-shadow:var(--nx-shadow-lg);padding:5px;display:none}
.pp-menu.open{display:block}
.pp-menu.tall{max-height:min(78vh,580px)}
.pp-menu.wide{min-width:252px}
/* Tick boxes on the Status picker -- several answers can be on at once */
.pp-sline .box{width:15px;height:15px;flex:none;border-radius:5px;border:1.5px solid var(--nx-line2);background:var(--nx-surface);display:flex;align-items:center;justify-content:center}
.pp-sline .box svg{width:11px;height:11px;color:#fff;opacity:0}
.pp-sline.on .box{background:var(--brand);border-color:var(--brand)}
.pp-sline.on .box svg{opacity:1}
.pp-mitem{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:var(--nx-ink);font:inherit;font-size:12.5px;font-weight:600;text-align:left;padding:8px 10px;border-radius:9px;cursor:pointer}
.pp-mitem:hover{background:var(--nx-line)}
.pp-mitem .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--nx-ink3)}
.pp-mitem.ok .dot{background:var(--st-ok)}
.pp-mitem.warn .dot{background:var(--st-warn)}
.pp-mitem.info .dot{background:var(--st-info)}
.pp-mitem.mute .dot{background:var(--st-mute)}
.pp-mitem.clear .dot{background:var(--st-clear)}
.pp-mitem.on{background:var(--brand-lt);color:var(--brand)}
.pp-msep{height:1px;background:var(--nx-line);margin:4px 6px}
.pp-mhead{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3);padding:7px 10px 5px}
.pp-mform{padding:8px 10px 10px;min-width:210px}
.pp-mform input[type=text]{width:100%;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink);border-radius:9px;padding:8px 10px;font:inherit;font-size:12.5px;outline:none}
.pp-mform input[type=text]:focus{border-color:var(--brand)}
.pp-mhint{font-size:11px;color:var(--nx-ink3);margin-top:6px}
.pp-mrow{display:flex;gap:7px;margin-top:9px}
.pp-btn{flex:1;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);font:inherit;font-size:12px;font-weight:600;padding:7px 10px;border-radius:9px;cursor:pointer}
.pp-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
.pp-btn.primary{background:var(--brand);border-color:var(--brand);color:var(--nx-on-brand)}
.pp-btn.primary:hover{background:var(--brand-2);border-color:var(--brand-2);color:var(--nx-on-brand)}

/* Calendar inside the menu -- our own, never the browser's date box */
.pp-menu.cal{min-width:262px;max-height:none;overflow:visible;padding:7px}
.pp-cal{width:248px}
.pp-cal-head{display:flex;align-items:center;gap:6px;padding:2px 2px 8px}
.pp-cal-title{flex:1;text-align:center;font-size:12.5px;font-weight:700;color:var(--nx-ink)}
.pp-cal-arrow{width:26px;height:26px;flex:none;border:0;background:transparent;border-radius:8px;color:var(--nx-ink2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pp-cal-arrow svg{width:13px;height:13px}
.pp-cal-arrow:hover{background:var(--nx-line);color:var(--nx-ink)}
.pp-cal-arrow:disabled{opacity:.3;cursor:default;background:transparent}
.pp-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:0 0 4px}
.pp-cal-dow span{text-align:center;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--nx-ink3)}
.pp-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.pp-cal-pad{height:31px}
.pp-cal-day{position:relative;height:31px;border:1px solid transparent;background:transparent;color:var(--nx-ink);font:inherit;font-size:12px;font-weight:600;border-radius:9px;cursor:pointer;padding:0}
.pp-cal-day:hover{background:var(--nx-line)}
.pp-cal-day.wknd{color:var(--nx-ink3)}
.pp-cal-day.today{border-color:var(--brand);color:var(--brand)}
.pp-cal-day.on{background:var(--brand);border-color:var(--brand);color:var(--nx-on-brand)}
.pp-cal-day.on:hover{background:var(--brand-2)}
.pp-cal-day:disabled{opacity:.25;cursor:default;background:transparent}
.pp-cal-day i{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:transparent}
.pp-cal-day.all i{background:var(--st-ok)}
.pp-cal-day.some i{background:var(--st-warn)}
.pp-cal-day.on i{background:var(--nx-on-brand)}
.pp-cal-day:disabled i{background:transparent}
.pp-cal-foot{display:flex;align-items:center;gap:9px;padding:7px 3px 2px}
.pp-cal-note{flex:1;font-size:10.5px;color:var(--nx-ink3)}
.pp-cal-foot .pp-btn{flex:none;padding:6px 12px}

/* Reminder lists */
.pp-modal.wide{max-width:600px}
.pp-two{display:flex;gap:14px;flex-wrap:wrap}
:where(:root:not([data-nx-base="off"])) .pp-col{flex:1;min-width:230px}
.pp-coltitle{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink3);margin-bottom:7px}
.pp-people{border:1px solid var(--nx-line2);border-radius:12px;max-height:240px;overflow-y:auto;padding:5px}
.pp-person{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;color:var(--nx-ink);font:inherit;font-size:12.5px;text-align:left;padding:7px 9px;border-radius:9px;cursor:pointer}
.pp-person:hover{background:var(--nx-line)}
.pp-person .box{width:16px;height:16px;flex:none;border:1.5px solid var(--nx-line2);border-radius:5px;display:flex;align-items:center;justify-content:center;color:transparent}
.pp-person .box svg{width:10px;height:10px}
.pp-person.on .box{background:var(--brand);border-color:var(--brand);color:var(--nx-on-brand)}
.pp-person .nm{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-person .em{font-size:11px;color:var(--nx-ink3);font-weight:500}
.pp-mgrs{border:1px solid var(--nx-line2);border-radius:12px;max-height:220px;overflow-y:auto;padding:5px}
.pp-mgr{display:flex;align-items:center;gap:9px;padding:4px 7px;border-radius:9px}
.pp-mgr:hover{background:var(--nx-line)}
.pp-mgr .sp{flex:1;min-width:8px}
.pp-mgr .bk{font-size:12.5px;font-weight:600;color:var(--nx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-mgrs.big{max-height:min(60vh,520px)}
button.pp-plain{background:transparent;font-family:inherit;font-weight:inherit;text-align:right}
.pp-none{font-size:12px;color:var(--nx-ink3);padding:14px 10px;text-align:center}

/* Reminders > Check the email */
.pp-chk{margin-top:18px;border-top:1px solid var(--nx-line);padding-top:16px}
.pp-chkbar{font-size:11.5px;color:var(--nx-ink3);margin-top:12px;line-height:1.6}
.pp-chkbar b{color:var(--nx-ink2);font-weight:700}
.pp-chkgrp{border:1px solid var(--nx-line2);border-radius:12px;padding:4px 6px;margin-top:10px}
.pp-chkrow{border-top:1px solid var(--nx-line);padding:10px 6px}
.pp-chkrow:first-child{border-top:0}
.pp-chkhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pp-chkhead .bk{font-size:12.5px;font-weight:600;color:var(--nx-ink);overflow:hidden;text-overflow:ellipsis}
.pp-chkhead .sp{flex:1;min-width:8px}
.pp-chknote{font-size:11.5px;color:var(--nx-ink3);margin-top:6px;line-height:1.55}
.pp-chkwarn{font-size:11.5px;color:var(--st-late);margin-top:6px;line-height:1.55}
.pp-chkp{display:flex;align-items:center;gap:10px;padding:6px 2px;font-size:12px;flex-wrap:wrap}
.pp-chkp .nm{font-weight:600;color:var(--nx-ink)}
.pp-chkp .em{color:var(--nx-ink3);overflow:hidden;text-overflow:ellipsis}
.pp-chkp.bad .em{color:var(--st-late);font-weight:600}
.pp-chkp .wy{margin-left:auto;font-size:11px;color:var(--nx-ink3);white-space:nowrap}
.pp-test{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);font:inherit;font-size:11px;font-weight:600;padding:4px 11px;border-radius:8px;cursor:pointer;flex:none}
.pp-test:hover{border-color:var(--brand);color:var(--brand)}
.pp-test:disabled{opacity:.5;cursor:default;border-color:var(--nx-line2);color:var(--nx-ink3)}

/* ── Notes box ─────────────────────────────────────────────────────── */
.pp-ov{position:fixed;inset:0;background:var(--nx-overlay);z-index:500;display:none;align-items:center;justify-content:center;padding:24px}
.pp-ov.open{display:flex}
.pp-modal{width:100%;max-width:440px;max-height:86vh;display:flex;flex-direction:column;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:16px;box-shadow:var(--nx-shadow-lg);overflow:hidden}
.pp-mhd{padding:15px 18px 0}
.pp-mtitle{font-size:14.5px;font-weight:700}
.pp-msub{font-size:12px;color:var(--nx-ink3);margin-top:2px}
.pp-mbody{padding:14px 18px 16px;overflow-y:auto}
.pp-mbody textarea{width:100%;min-height:132px;resize:vertical;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink);border-radius:11px;padding:10px 12px;font:inherit;font-size:12.5px;line-height:1.5;outline:none}
.pp-mbody textarea:focus{border-color:var(--brand)}
.pp-mft{display:flex;justify-content:flex-end;gap:8px;padding:0 18px 16px}
.pp-mft .pp-btn{flex:none;min-width:92px}

/* ── Settings sub-page ─────────────────────────────────────────────
   Positive Pay > Settings: the reminder lists, and the choices each of the
   three decision columns offers. */
.pp-settings{max-width:880px}
.pp-tabs{display:inline-flex;gap:5px;margin-bottom:14px;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:12px;padding:4px}
.pp-tab{border:0;background:transparent;color:var(--nx-ink2);font:inherit;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:9px;cursor:pointer}
.pp-tab:hover{background:var(--nx-line);color:var(--nx-ink)}
.pp-tab.on{background:var(--brand);color:var(--nx-on-brand)}
.pp-tab.on:hover{background:var(--brand-2);color:var(--nx-on-brand)}
.pp-pane{margin-bottom:14px}
.pp-shead{font-size:14.5px;font-weight:700;color:var(--nx-ink)}
.pp-ssub{font-size:12px;color:var(--nx-ink3);margin:3px 0 15px;line-height:1.55;max-width:640px}

/* A labelled setting with its value on the right */
.pp-srow{display:flex;align-items:flex-start;gap:16px;padding:12px 0;border-top:1px solid var(--nx-line)}
.pp-srow:first-of-type{border-top:0;padding-top:0}
.pp-slab{flex:1;min-width:0}
.pp-slab .t{font-size:12.5px;font-weight:600;color:var(--nx-ink)}
.pp-slab .s{font-size:11.5px;color:var(--nx-ink3);margin-top:3px;line-height:1.55;max-width:520px}
.pp-srow .pp-plain{flex:0 0 auto;border-color:var(--nx-line2);min-width:150px;text-align:center}

/* One block per decision column */
.pp-oset{margin-bottom:18px}
.pp-oset:last-child{margin-bottom:0}
.pp-osethd{display:flex;align-items:baseline;gap:9px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink3);margin-bottom:7px}
.pp-osethd .n{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;opacity:.75}
.pp-opts{border:1px solid var(--nx-line2);border-radius:12px;padding:5px}
.pp-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;flex-wrap:wrap}
.pp-opt:hover{background:var(--nx-line)}
.pp-opt.off{opacity:.6}
.pp-opt .sp{flex:1;min-width:6px}

/* The colour swatch, which is also the colour picker */
.pp-sw{width:15px;height:15px;flex:none;border:0;border-radius:50%;cursor:pointer;background:var(--st-mute);padding:0;box-shadow:0 0 0 2px var(--nx-elev)}
.pp-sw:hover:not(:disabled){box-shadow:0 0 0 2px var(--nx-elev),0 0 0 3px var(--nx-ink3)}
.pp-sw:disabled{cursor:default}
.pp-sw[style]{box-shadow:0 0 0 2px var(--nx-elev),0 0 0 3px var(--nx-line2)}
.pp-sw.ok{background:var(--st-ok)}
.pp-sw.warn{background:var(--st-warn)}
.pp-sw.info{background:var(--st-info)}
.pp-sw.mute{background:var(--st-mute)}
.pp-sw.clear{background:var(--st-clear)}

.pp-nm{border:1px solid transparent;background:transparent;color:var(--nx-ink);font:inherit;font-size:12.5px;font-weight:600;padding:3px 8px;border-radius:8px;cursor:pointer;text-align:left}
.pp-nm:hover:not(:disabled){border-color:var(--nx-ink3)}
.pp-nm:disabled{cursor:default}
.pp-tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink3);border:1px solid var(--nx-line2);border-radius:999px;padding:1px 8px}
.pp-use{font-size:11px;color:var(--nx-ink3);white-space:nowrap}

/* The two switches each choice carries */
.pp-tgl{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);font:inherit;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:9px;cursor:pointer;white-space:nowrap}
.pp-tgl:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
.pp-tgl .box{width:13px;height:13px;flex:none;border:1.5px solid var(--nx-line2);border-radius:4px;display:flex;align-items:center;justify-content:center;color:transparent}
.pp-tgl .box svg{width:9px;height:9px}
.pp-tgl.on{border-color:var(--brand);color:var(--brand)}
.pp-tgl.on .box{background:var(--brand);border-color:var(--brand);color:var(--nx-on-brand)}

/* Pick any colour -- lives inside the Colour menu, under the named ones. */
.pp-cp{padding:2px 10px 10px;width:232px}
.pp-cp-sv{position:relative;height:112px;border-radius:10px;border:1px solid var(--nx-line2);
  cursor:crosshair;touch-action:none;background-color:var(--cp-hue,#2F7FD1);
  background-image:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,rgba(255,255,255,0))}
.pp-cp-dot{position:absolute;width:13px;height:13px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);transform:translate(-50%,-50%);pointer-events:none}
.pp-cp-hue{position:relative;height:14px;margin-top:9px;border-radius:7px;border:1px solid var(--nx-line2);
  cursor:pointer;touch-action:none;
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.pp-cp-hdot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);transform:translate(-50%,-50%);pointer-events:none}
.pp-cp-sws{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:9px}
.pp-cp-sw{height:19px;border:0;border-radius:6px;padding:0;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.pp-cp-sw:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 2px var(--nx-ink3)}
.pp-cp-row{display:flex;align-items:center;gap:7px;margin-top:9px}
.pp-cp-prev{width:25px;height:25px;flex:none;border-radius:7px;background:var(--nx-line2);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.pp-cp-row input[type=text]{flex:1;min-width:0;border:1px solid var(--nx-line2);background:var(--nx-surface);
  color:var(--nx-ink);border-radius:9px;padding:6px 8px;font:inherit;font-size:12px;outline:none}
.pp-cp-row input[type=text]:focus{border-color:var(--brand)}
.pp-cp-row .pp-btn{flex:none;padding:7px 12px}
.pp-cp .pp-mhint{margin-top:8px}

/* Up / down / remove / put back */
.pp-ib{width:26px;height:26px;flex:none;border:1px solid transparent;background:transparent;border-radius:8px;color:var(--nx-ink3);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.pp-ib:hover:not(:disabled){border-color:var(--nx-line2);color:var(--nx-ink)}
.pp-ib.danger:hover:not(:disabled){border-color:var(--st-late);color:var(--st-late)}
.pp-ib:disabled{opacity:.25;cursor:default}
.pp-ib svg{width:13px;height:13px}

.pp-add{margin-top:8px;border:1px dashed var(--nx-line2);background:transparent;color:var(--nx-ink2);font:inherit;font-size:12px;font-weight:600;padding:7px 13px;border-radius:10px;cursor:pointer}
.pp-add:hover{border-color:var(--brand);color:var(--brand)}

/* ── Tooltip ───────────────────────────────────────────────────────
   Only ever shown for a cell whose text was trimmed to fit its column, so the
   whole thing can still be read without a browser tooltip. */
.pp-tip{position:fixed;z-index:650;max-width:340px;background:var(--nx-toast-bg);color:var(--nx-toast-ink);font-size:12px;font-weight:500;line-height:1.5;padding:7px 11px;border-radius:9px;box-shadow:var(--nx-shadow-lg);pointer-events:none;opacity:0;display:none;white-space:pre-wrap;word-break:break-word}
.pp-tip.open{display:block;opacity:1}

/* ── Toast + empty + loading ───────────────────────────────────────── */
.pp-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);z-index:600;background:var(--nx-toast-bg);color:var(--nx-toast-ink);font-size:12.5px;font-weight:600;padding:10px 16px;border-radius:11px;box-shadow:var(--nx-shadow-lg);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.pp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.pp-toast.err{background:var(--st-late);color:#fff}



.pp-legend{margin-top:12px;font-size:11.5px;color:var(--nx-ink3);line-height:1.6}

/* ── Filter chips ──────────────────────────────────────────────────── */
.pp-filterbar{display:none;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.pp-filterbar.on{display:flex}
.pp-fchip{display:inline-flex;align-items:center;gap:6px;background:var(--st-ok-bg);color:var(--st-ok);border:1px solid var(--st-ok);border-radius:20px;padding:4px 6px 4px 11px;font-size:12px;font-weight:600}
.pp-fchip b{font-weight:700}
.pp-fchip button{border:none;background:none;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0 4px;opacity:.7;font-family:inherit}
.pp-fchip button:hover{opacity:1}
.pp-fchip.not{background:var(--st-late-bg);color:var(--st-late);border-color:var(--st-late)}
.pp-fclear{border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer}
.pp-fclear:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
/* A cell that filters when clicked. It sits on top of the read-only rules,
   which would otherwise leave it showing the plain arrow. */
.pp-pick{cursor:pointer;border-radius:8px}
.pp-plain.ro.pp-pick,.pp-set.ro.pp-pick{cursor:pointer}
.pp-pick:hover{opacity:.72}

/* ── Activity sub-page ─────────────────────────────────────────────
   Positive Pay > Activity: every change, newest first. The list is the
   Requests Activity list -- portal.css .panel / .act-item and friends --
   with its own columns: dot, action, client, bank, what, tracker day,
   by whom, from -> to, when. */
.pp-actpanel .pp-actrange{cursor:default;font-weight:500;color:var(--nx-ink3)}
.pp-actlist .act-item{grid-template-columns:14px 80px 150px 120px 136px 62px 120px minmax(0,1fr) 112px;cursor:default}
.pp-actlist .act-fac,.pp-actlist .act-actor,.pp-actlist .pp-actday{display:block}
.pp-actlist .act-type{overflow:hidden;max-width:100%}
.pp-actlist .act-transition{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.pp-actlist .act-transition .arrow{margin:0 4px}
.pp-actlist .act-transition.pp-actlong{display:block;background:none;padding:0;border-radius:0;text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-actlist .act-transition.pp-actlong .from{margin-right:2px}
.pp-actlist .act-transition.pp-actlong .arrow{margin:0 5px}
.pp-actlist .act-transition .to{color:var(--text)}
.pp-actlist .act-transition .to.t-ok{color:var(--st-ok)}
.pp-actlist .act-transition .to.t-clear{color:var(--st-clear)}
.pp-actlist .act-transition .to.t-warn{color:var(--st-warn)}
.pp-actlist .act-transition .to.t-info{color:var(--st-info)}
.pp-actlist .act-transition .none{color:var(--text3);font-style:italic;text-transform:none;letter-spacing:0}
.pp-actlist .pp-actday{color:var(--text3);font-size:11.5px}
.pp-actlist .pp-pick:hover{opacity:1;text-decoration:underline}
/* Column headings, styled like the table headings on Requests */
.pp-actlist .act-item.pp-acthead{padding-top:9px;padding-bottom:9px;background:var(--nx-rail);border-bottom:1px solid var(--nx-line2);cursor:default}
:root .pp-actlist .act-item.pp-acthead:hover,:root[data-theme="dark"] .pp-actlist .act-item.pp-acthead:hover{background:var(--nx-rail)}
.pp-actlist .pp-acthead > *{font-size:10.5px;font-weight:700;color:var(--nx-ink3);text-transform:uppercase;letter-spacing:.06em;background:none;padding:0;border-radius:0;text-decoration:none}
/* Headings sort, the same as Transfers: an arrow for the direction and a
   small number for the order when more than one column is sorting */
.pp-actlist .pp-acthead .pp-asort{cursor:pointer;user-select:none;overflow:visible}
.pp-actlist .pp-acthead .pp-asort:hover{color:var(--nx-ink)}
.pp-actlist .pp-acthead .sort-ar{display:inline-block;width:8px;font-size:9px;color:var(--brand);margin-left:2px}
.pp-actlist .pp-acthead .sort-asc .sort-ar::after{content:"\2191"}
.pp-actlist .pp-acthead .sort-desc .sort-ar::after{content:"\2193"}
.pp-actlist .pp-acthead .sort-order{display:inline-block;margin-left:3px;font-size:9px;font-weight:700;color:var(--brand)}
.pp-actlist .pp-acthead .act-time{text-align:right}
/* Every value filters on a click, so every cell takes the hand */
.pp-actlist .act-item .pp-pick{cursor:pointer}
.pp-actlist .act-type.pp-pick:hover,.pp-actlist .act-transition.pp-pick:hover{opacity:.72;text-decoration:none}
.pp-actmore{display:flex;justify-content:center;padding:12px 0 14px;border-top:1px solid var(--nx-line)}
/* portal.css paints these in fixed light-mode colours */
:root[data-theme="dark"] .pp-actlist .act-item{border-bottom-color:var(--nx-line)}
:root[data-theme="dark"] .pp-actlist .act-item:hover{background:var(--nx-hover)}
:root[data-theme="dark"] .pp-actlist .act-dot.blue{background:var(--nx-ink)}
:root[data-theme="dark"] .pp-actlist .act-action.blue{color:var(--nx-ink)}
:root[data-theme="dark"] .pp-actlist .act-action.amber{color:var(--amber-text)}
@media(max-width:1180px){
  .pp-actlist .act-item{grid-template-columns:14px 80px 140px 110px 140px 120px minmax(0,1fr) 108px}
  .pp-actlist .pp-actday{display:none}
}
@media(max-width:980px){
  .pp-actlist .act-item{grid-template-columns:14px 76px 130px 130px 110px minmax(0,1fr) 104px}
  .pp-actlist .act-fac{display:none}
}
@media(max-width:760px){
  .pp-actlist .act-item{grid-template-columns:14px 72px 1fr minmax(0,1.2fr) 100px}
  .pp-actlist .act-type,.pp-actlist .act-actor{display:none}
}

/* ============================================================================
 * 13. PURCHASING -- NEW HOME INTAKE
 * The portal page: the list of links we have sent out, and the read-back of
 * one form. It draws itself inside the shell, so it uses .nx-scrollarea.
 *
 *   <html lang="en" class="nx-shell" data-module="purchasing" data-page="intake">
 *
 * Two screens share these rules. The list is counters, a search row and a
 * table; the read-back is a header card followed by one block per section.
 * ========================================================================== */

/* -- Counters across the top. Each one is a button that filters the list. -- */
.pi-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin-bottom:16px}
.pi-stat{
  text-align:left;background:var(--nx-elev);border:1px solid var(--nx-line);
  border-radius:var(--nx-radius-sm);padding:14px 16px;cursor:pointer;font-family:inherit;
  transition:border-color var(--nx-speed),box-shadow var(--nx-speed)
}
.pi-stat:hover{border-color:var(--nx-line2);box-shadow:var(--nx-shadow)}
.pi-stat.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
.pi-stat-k{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--nx-ink3)}
.pi-stat-k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--nx-line2);flex:none}
.pi-stat.all  .pi-stat-k::before{background:var(--brand)}
.pi-stat.sent .pi-stat-k::before{background:var(--st-ok)}
.pi-stat.busy .pi-stat-k::before{background:var(--st-warn)}
.pi-stat.cold .pi-stat-k::before{background:var(--st-mute)}
.pi-stat-n{font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--nx-ink);margin-top:7px;
  font-variant-numeric:tabular-nums}

/* -- Search row above the table -- */
.pi-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.pi-srch{position:relative;flex:1;min-width:190px;max-width:330px}
.pi-srch svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:14px;height:14px;
  color:var(--nx-ink3);pointer-events:none}
.pi-srch input{
  width:100%;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink);
  border-radius:var(--nx-radius-xs);padding:9px 11px 9px 32px;outline:none;font-family:inherit;font-size:12.5px
}
.pi-srch input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
.pi-srch input::placeholder{color:var(--nx-ink3)}
.pi-count{margin-left:auto;font-size:12px;color:var(--nx-ink3);white-space:nowrap}

/* -- The list -- */
.pi-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.pi-tbl thead th{
  background:var(--nx-rail);color:var(--nx-ink3);
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  text-align:left;padding:11px 16px;border-bottom:1px solid var(--nx-line);white-space:nowrap
}
.pi-tbl tbody td{padding:12px 16px;border-bottom:1px solid var(--nx-line);vertical-align:middle}
.pi-tbl tbody tr:last-child td{border-bottom:0}
.pi-tbl tbody tr{cursor:pointer}
.pi-tbl tbody tr:hover td{background:var(--nx-hover)}
.pi-fac{font-weight:600;color:var(--nx-ink)}
.pi-co{font-size:11.5px;color:var(--nx-ink3)}
.pi-when{font-size:12px;color:var(--nx-ink2);white-space:nowrap}

/* How far through the form they are */
.pi-prog{display:flex;align-items:center;gap:9px;min-width:104px}
.pi-prog-t{flex:1;height:5px;border-radius:3px;background:var(--nx-line);overflow:hidden;min-width:48px}
.pi-prog-f{display:block;height:100%;border-radius:3px;background:var(--brand)}
.pi-prog-n{font-size:11.5px;color:var(--nx-ink3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* State pill, and the tag on a row that is not tied to a home */
.pi-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;
  font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--st-mute-bg);color:var(--st-mute)}
.pi-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pi-pill.sent{background:var(--st-ok-bg);color:var(--st-ok)}
.pi-pill.busy{background:var(--st-warn-bg);color:var(--st-warn)}
.pi-pill.cold{background:var(--st-mute-bg);color:var(--st-mute)}
.pi-tag{display:inline-block;margin-left:7px;border-radius:999px;padding:1px 8px;
  font-size:10.5px;font-weight:700;background:var(--st-warn-bg);color:var(--st-warn);
  vertical-align:middle;white-space:nowrap}

/* Row buttons. Only show on the row under the pointer, so the list reads clean. */
.pi-acts{display:flex;gap:6px;justify-content:flex-end}
.pi-mini{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);
  border-radius:9px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;
  font-family:inherit;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.pi-mini svg{width:13px;height:13px}
.pi-mini:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
.pi-mini.danger:hover{border-color:var(--st-late);color:var(--st-late)}
.pi-tbl tbody .pi-acts .pi-mini{opacity:0;transition:opacity var(--nx-speed)}
.pi-tbl tbody tr:hover .pi-acts .pi-mini,
.pi-tbl tbody .pi-acts .pi-mini:focus-visible{opacity:1}
@media(hover:none){.pi-tbl tbody .pi-acts .pi-mini{opacity:1}}

.pi-btn{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);
  border-radius:var(--nx-radius-xs);padding:8px 14px;font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:inherit}
.pi-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
.pi-btn.primary{background:var(--brand);border-color:var(--brand);color:var(--nx-on-brand)}
.pi-btn.primary:hover{background:var(--blue-dk);border-color:var(--blue-dk)}
.pi-btn[disabled]{opacity:.55;cursor:default}

/* -- One form, read back -- */
.pi-back{display:inline-flex;align-items:center;gap:6px;border:none;background:none;color:var(--nx-ink2);
  font-weight:600;font-size:12.5px;cursor:pointer;padding:0;margin-bottom:12px;font-family:inherit}
.pi-back:hover{color:var(--nx-ink)}
.pi-back svg{width:14px;height:14px}

/* The header card: state, name, buttons, then the facts and the link */
.pi-hero{padding:20px 22px}
.pi-hero-top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pi-hero-id{min-width:0}
.pi-hero h1{font-size:21px;font-weight:700;letter-spacing:-.025em;margin:9px 0 2px;color:var(--nx-ink);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pi-hero .co{font-size:12.5px;color:var(--nx-ink3)}
.pi-hero-acts{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.pi-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(116px,1fr));gap:16px;
  margin-top:18px;padding-top:15px;border-top:1px solid var(--nx-line)}
.pi-meta div{font-size:11px;color:var(--nx-ink3);min-width:0}
.pi-meta b{display:block;color:var(--nx-ink);font-size:13px;font-weight:600;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis}
.pi-urlbox{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--nx-rail);
  border:1px solid var(--nx-line2);border-radius:var(--nx-radius-sm);padding:9px 11px;margin-top:15px}
.pi-urlbox code{flex:1;min-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12px;color:var(--nx-ink2)}

/* One block per section of the form */
.pi-block{margin-top:16px}
.pi-blockh{display:flex;align-items:center;gap:9px;padding:0 3px 9px}
.pi-blockh::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--brand);flex:none}
.pi-blockh h2{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--nx-ink);margin:0}
.pi-badge{margin-left:auto;font-size:11px;font-weight:600;color:var(--nx-ink3);background:var(--nx-rail);
  border:1px solid var(--nx-line);border-radius:999px;padding:2px 9px;white-space:nowrap}

/* Label / answer pairs, striped down the label side so the eye can follow */
.pi-kv{display:grid;grid-template-columns:220px minmax(0,1fr)}
.pi-kv>div{padding:10px 16px;font-size:12.5px;line-height:1.5;border-top:1px solid var(--nx-line);min-width:0}
.pi-kv>div:nth-child(1),.pi-kv>div:nth-child(2){border-top:0}
.pi-kv>div:nth-child(odd){background:var(--nx-rail);color:var(--nx-ink2)}
.pi-kv>div:nth-child(even){color:var(--nx-ink);overflow-wrap:anywhere}
@media(max-width:720px){
  .pi-kv{grid-template-columns:1fr}
  .pi-kv>div:nth-child(odd){padding-bottom:2px;font-size:11.5px}
  .pi-kv>div:nth-child(even){border-top:0;padding-top:2px}
}

/* Vendors, as real columns rather than a run of label/value lines */
.pi-vwrap{overflow-x:auto}
.pi-vtbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:620px}
.pi-vtbl th{background:var(--nx-rail);color:var(--nx-ink3);font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:9px 14px;
  border-bottom:1px solid var(--nx-line);white-space:nowrap}
.pi-vtbl td{padding:10px 14px;border-bottom:1px solid var(--nx-line);vertical-align:top;color:var(--nx-ink)}
.pi-vtbl tbody tr:last-child td{border-bottom:0}
.pi-vtbl .lbl{color:var(--nx-ink2);white-space:nowrap}
.pi-vtbl .nm{font-weight:600}
.pi-vtbl .dim{color:var(--nx-ink3)}

.pi-note{padding:15px 18px;font-size:12.5px;color:var(--nx-ink3);line-height:1.6}
.pi-note b{color:var(--nx-ink2);font-weight:600}
.pi-blank{color:var(--nx-ink3);font-size:12.5px}
.pi-flink{color:var(--brand);font-weight:600;text-decoration:none}
.pi-flink:hover{text-decoration:underline}

/* -- Our own popups. Nothing here falls back to a browser box. -- */
.pi-ov{position:fixed;inset:0;background:var(--nx-overlay);display:none;align-items:center;
  justify-content:center;z-index:200;padding:18px}
.pi-ov.open{display:flex}
.pi-modal{background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:var(--nx-radius);
  box-shadow:var(--nx-shadow-lg);width:100%;max-width:470px;overflow:hidden}
.pi-modal.wide{max-width:560px}
.pi-mh{padding:17px 20px 4px}
.pi-mt{font-size:15px;font-weight:700;letter-spacing:-.02em}
.pi-ms{font-size:12.5px;color:var(--nx-ink2);margin-top:4px;line-height:1.5}
.pi-mb{padding:14px 20px 4px;max-height:56vh;overflow:auto}
.pi-mf{display:flex;justify-content:flex-end;gap:9px;padding:15px 20px 18px}
.pi-lab{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--nx-ink3);margin:12px 0 6px}
.pi-in{width:100%;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink);
  border-radius:var(--nx-radius-xs);padding:9px 11px;outline:none;font-family:inherit;font-size:12.5px}
.pi-in:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
.pi-in::placeholder{color:var(--nx-ink3)}
textarea.pi-in{min-height:70px;resize:vertical}
.pi-pick{border:1px solid var(--nx-line2);border-radius:var(--nx-radius-sm);max-height:230px;
  overflow:auto;margin-top:6px;padding:4px;cursor:default}
.pi-pickrow{display:block;width:100%;text-align:left;border:none;background:none;padding:8px 11px;
  cursor:pointer;font-family:inherit;font-size:12.5px;color:var(--nx-ink);border-radius:9px}
.pi-pickrow:hover{background:var(--nx-hover)}
.pi-pickrow.on{background:var(--brand-lt);color:var(--blue-dk);font-weight:700}
.pi-pickrow small{display:block;color:var(--nx-ink3);font-size:11px;font-weight:500}
.pi-erow{display:flex;gap:8px;align-items:center;margin-bottom:7px}
.pi-erow .pi-in{flex:1}

.pi-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--nx-toast-bg);color:var(--nx-toast-ink);padding:10px 16px;border-radius:11px;
  font-size:12.5px;font-weight:600;opacity:0;pointer-events:none;transition:.18s;z-index:300;
  box-shadow:var(--nx-shadow-lg)}
.pi-toast.show{opacity:1;transform:translateX(-50%)}


/* ============================================================================
 * 14. PURCHASING -- THE ONBOARDING FORM
 * The page we send out to a home we are taking on. Anyone with the link can
 * open it, so it sits OUTSIDE the portal -- and outside the app frame. It is
 * a plain page that scrolls the normal way: a bar across the top, the section
 * list down the left, cards on the right. It only borrows the colours.
 *
 *   <html lang="en" class="nx-page" data-module="purchasing" data-page="onboarding">
 *
 * .nx-page is the base for any page like this -- no frame, no rail, just the
 * Nexus colours and type on a normal scrolling document.
 * ========================================================================== */
html.nx-page,
html.nx-page body{margin:0;padding:0}
html.nx-page body{
  background:var(--nx-bg);color:var(--nx-ink);
  font-family:var(--font,'Inter',system-ui,-apple-system,sans-serif);
  font-size:13.5px;line-height:1.5
}
html.nx-page *{box-sizing:border-box}
html.nx-page button,
html.nx-page input,
html.nx-page textarea{font-family:inherit;font-size:inherit}

/* -- Bar across the top -- */
.pf-top{
  display:flex;align-items:center;gap:12px;padding:14px 22px;
  background:var(--nx-surface);border-bottom:1px solid var(--nx-line);
  position:sticky;top:0;z-index:40
}
.pf-mark{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--nx-on-brand);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px
}
.pf-ttl{font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--nx-ink)}
.pf-sub{font-size:12px;color:var(--nx-ink3)}
.pf-top-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.pf-saved{font-size:12px;color:var(--nx-ink3);white-space:nowrap}
/* The light/dark button. Same square as .nx-icon-btn, under this page's own
   name, so the markup does not have to change. The two sun/moon icons are
   swapped by section 7. */
.pf-iconbtn{
  width:34px;height:34px;border-radius:var(--nx-radius-xs);border:1px solid var(--nx-line2);
  background:var(--nx-elev);color:var(--nx-ink2);display:flex;align-items:center;
  justify-content:center;cursor:pointer;padding:0
}
.pf-iconbtn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
.pf-iconbtn svg{width:16px;height:16px}
.pf-ic-moon{display:none}
:root[data-theme="dark"] .pf-ic-sun{display:none}
:root[data-theme="dark"] .pf-ic-moon{display:block}

/* -- Two columns -- */
.pf-wrap{
  max-width:1180px;margin:0 auto;padding:22px 22px 60px;
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start
}
@media(max-width:900px){.pf-wrap{grid-template-columns:1fr;gap:14px;padding:14px 14px 48px}}

.pf-nav{
  position:sticky;top:78px;background:var(--nx-surface);border:1px solid var(--nx-line);
  border-radius:var(--nx-radius);padding:8px;box-shadow:var(--nx-shadow)
}
@media(max-width:900px){.pf-nav{position:static;display:flex;gap:6px;overflow-x:auto;padding:8px}}
.pf-navsec{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--nx-ink3);padding:10px 10px 6px
}
@media(max-width:900px){.pf-navsec{display:none}}
.pf-navbtn{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  border:none;background:none;border-radius:var(--nx-radius-xs);padding:9px 11px;cursor:pointer;
  color:var(--nx-ink2);font-weight:500;font-size:13px;white-space:nowrap;font-family:inherit;
  transition:background var(--nx-speed),color var(--nx-speed)
}
.pf-navbtn:hover{background:var(--nx-hover);color:var(--nx-ink)}
.pf-navbtn.active{background:var(--brand);color:var(--nx-on-brand);font-weight:600}
.pf-dot{width:8px;height:8px;border-radius:50%;background:var(--nx-line2);flex:0 0 auto;margin-left:auto}
.pf-dot.part{background:var(--st-warn)}
.pf-dot.done{background:var(--brand)}
.pf-navbtn.active .pf-dot{background:rgba(255,255,255,.55)}
.pf-navbtn.active .pf-dot.done{background:#fff}
@media(max-width:900px){.pf-navbtn{width:auto}.pf-dot{margin-left:0}}

/* -- Cards -- */
.pf-card{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);
  padding:20px 22px;box-shadow:var(--nx-shadow);margin-bottom:16px}
.pf-h{font-size:16px;font-weight:700;letter-spacing:-.02em;margin:0 0 3px;color:var(--nx-ink)}
.pf-blurb{font-size:12.5px;color:var(--nx-ink2);margin:0 0 16px;line-height:1.5}
.pf-vblock{border:1px solid var(--nx-line);border-radius:var(--nx-radius-sm);padding:14px 15px;
  margin-bottom:12px;background:var(--nx-rail)}
.pf-vhead{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.pf-vname{font-size:13px;font-weight:700}
.pf-vopt{font-size:11px;font-weight:600;color:var(--nx-ink3);border:1px solid var(--nx-line2);
  border-radius:999px;padding:1px 7px}
.pf-vnote{font-size:11.5px;color:var(--nx-ink3);margin:-6px 0 10px}
.pf-x{margin-left:auto;border:none;background:none;color:var(--nx-ink3);cursor:pointer;
  border-radius:8px;padding:3px 6px;font-size:15px;line-height:1;font-family:inherit}
.pf-x:hover{background:var(--st-late-bg);color:var(--st-late)}

/* -- Fields -- */
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
@media(max-width:700px){.pf-grid{grid-template-columns:1fr}}
.pf-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.pf-f.full{grid-column:1 / -1}
.pf-lab{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink3)}
.pf-hint{font-size:11px;color:var(--nx-ink3);margin-top:-2px;line-height:1.45}
.pf-in{width:100%;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink);
  border-radius:var(--nx-radius-xs);padding:9px 11px;outline:none}
.pf-in:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
.pf-in::placeholder{color:var(--nx-ink3)}
textarea.pf-in{min-height:74px;resize:vertical;line-height:1.5}

/* Day buttons and the Leased / Owned pair -- our own, never a browser dropdown */
.pf-chips{display:flex;flex-wrap:wrap;gap:6px}
.pf-chip{border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);
  border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.pf-chip:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
.pf-chip.on{background:var(--brand);border-color:var(--brand);color:var(--nx-on-brand)}

/* People rows */
.pf-prow{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:8px}
@media(max-width:700px){.pf-prow{grid-template-columns:1fr}}
.pf-grp{border:1px solid var(--nx-line);border-radius:var(--nx-radius-sm);padding:14px 15px;
  margin-bottom:12px;background:var(--nx-rail)}
.pf-grpname{font-size:13px;font-weight:700;margin-bottom:10px}

/* Buttons */
.pf-btn{border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);
  border-radius:var(--nx-radius-xs);padding:9px 15px;font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:inherit}
.pf-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
.pf-btn.primary{background:var(--brand);border-color:var(--brand);color:var(--nx-on-brand)}
.pf-btn.primary:hover{background:var(--blue-dk);border-color:var(--blue-dk)}
.pf-btn[disabled]{opacity:.55;cursor:default}
.pf-foot{display:flex;align-items:center;gap:10px;margin-top:4px}
.pf-foot .sp{margin-left:auto}

/* Files */
.pf-drop{border:2px dashed var(--nx-line2);border-radius:var(--nx-radius-sm);background:var(--nx-rail);
  padding:20px;text-align:center;color:var(--nx-ink2);font-size:12.5px}
.pf-drop.over{border-color:var(--brand);background:var(--brand-lt)}
.pf-file{display:flex;align-items:center;gap:9px;border:1px solid var(--nx-line);
  border-radius:var(--nx-radius-xs);padding:9px 11px;margin-top:8px;background:var(--nx-surface)}
.pf-file .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-file .sz{color:var(--nx-ink3);font-size:11.5px;white-space:nowrap}

/* Review list */
.pf-rev{border:1px solid var(--nx-line);border-radius:var(--nx-radius-sm);padding:13px 15px;
  margin-bottom:10px;background:var(--nx-rail)}
.pf-revh{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;margin-bottom:6px}
.pf-revline{font-size:12.5px;color:var(--nx-ink2);padding:2px 0}
.pf-revline b{color:var(--nx-ink);font-weight:600}
.pf-miss{color:var(--st-warn);font-weight:600}
.pf-link{background:none;border:none;color:var(--brand);font-weight:600;cursor:pointer;padding:0;
  font-size:12.5px;text-decoration:underline;font-family:inherit}

/* Our own popup, so nothing falls back to a browser box */
.pf-ov{position:fixed;inset:0;background:var(--nx-overlay);display:none;align-items:center;
  justify-content:center;z-index:200;padding:18px}
.pf-ov.open{display:flex}
.pf-modal{background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:var(--nx-radius);
  box-shadow:var(--nx-shadow-lg);width:100%;max-width:480px;overflow:hidden}
.pf-mh{padding:17px 20px 3px}
.pf-mt{font-size:15px;font-weight:700;letter-spacing:-.02em}
.pf-ms{font-size:12.5px;color:var(--nx-ink2);margin-top:4px;line-height:1.5}
.pf-mb{padding:14px 20px 4px;max-height:52vh;overflow:auto}
.pf-mf{display:flex;justify-content:flex-end;gap:9px;padding:15px 20px 18px}

/* Our own hover note, instead of the browser's yellow tooltip */
.pf-tip{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;border:1px solid var(--nx-line2);color:var(--nx-ink3);
  font-size:10px;font-weight:700;cursor:default;margin-left:5px}
.pf-tip:hover::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:var(--nx-toast-bg);color:var(--nx-toast-ink);font-size:11.5px;font-weight:500;line-height:1.4;
  padding:8px 10px;border-radius:10px;width:210px;text-align:left;z-index:60;box-shadow:var(--nx-shadow-lg)}

.pf-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--nx-toast-bg);color:var(--nx-toast-ink);padding:10px 16px;border-radius:11px;
  font-size:12.5px;font-weight:600;opacity:0;pointer-events:none;transition:.18s;z-index:300;
  box-shadow:var(--nx-shadow-lg)}
.pf-toast.show{opacity:1;transform:translateX(-50%)}

/* A link that leads nowhere, and the thank-you page */
.pf-dead{max-width:460px;margin:14vh auto;text-align:center;background:var(--nx-elev);
  border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:34px 28px;box-shadow:var(--nx-shadow)}
.pf-dead h1{font-size:17px;margin:0 0 8px;color:var(--nx-ink)}
.pf-dead p{color:var(--nx-ink2);font-size:12.5px;margin:0;line-height:1.6}
.pf-done{max-width:520px;margin:0 auto;text-align:center}
.pf-tick{width:46px;height:46px;border-radius:50%;background:var(--brand-lt);color:var(--brand);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.pf-tick svg{width:24px;height:24px}


/* ============================================================================
 * 15. PAGES
 * Each page's own CSS, moved here from the <style> block it used to carry.
 * One block per page, every selector pinned to that page with
 *     :where(:root[data-page="..."])
 * :where() weighs nothing, so these rules win and lose exactly as they did
 * inside the page. A page that had no Nexus look before carries
 * data-nx-base="off" on <html> as well (see v1.23 at the top).
 *
 * Two things a selector cannot pin:
 *   @keyframes names are shared by every page. A page's animation keeps its
 *   name unless another one by the same name is already in here doing
 *   something different; then it is renamed <page>-<name>.
 *   @page (print margins) becomes a named page, @page pg-<page>, and the
 *   page's <body> asks for it with page:pg-<page>.
 * ========================================================================== */


/* ----------------------------------------------------------------------------
 * 15.1  Support -- Dev requests (the old address, now the Get help box)
 * support/dev-requests.php, data-page="dev-requests"
 * -------------------------------------------------------------------------- */
  html:where([data-page="dev-requests"]), :where(:root[data-page="dev-requests"]) body { height: 100%; }
  :where(:root[data-page="dev-requests"]) body {
    margin: 0;
    background: var(--nx-bg);
    font-family: var(--nx-font);
  }
  /* portal-help.js puts its own "Get help" button on a page with no rail.
     There is nothing here for it to sit against, and nothing else on this
     page is meant to be clickable. */
  :where(:root[data-page="dev-requests"]) #phBtn { display: none !important; }


/* ----------------------------------------------------------------------------
 * 15.2  AP -- the dashboard frame
 * ap/ap-dashboard.php, data-page="ap-dashboard"
 * -------------------------------------------------------------------------- */
/* Everything the frame needs is in nexus.css. A page with no top-bar buttons
   still keeps the theme switch and avatar hard right. */
:where(:root[data-page="ap-dashboard"]) .nx-page-actions:empty + .nx-top-actions{margin-left:auto}

/* The counts AP's pages hang off their menu items -- how many mailboxes, how
   many installments -- are counts, not alerts. The shell's badge is the red
   "you have something waiting" pill, so here it is the quiet grey one the
   pages themselves use. */
:where(:root[data-page="ap-dashboard"]) .nx-subnav .nx-subitem .nx-sub-badge{
  background:var(--nx-hover);border:1px solid var(--nx-line2);
  color:var(--nx-ink3);font-weight:600
}
:where(:root[data-page="ap-dashboard"]) .nx-subnav .nx-subitem.active .nx-sub-badge{
  background:var(--brand);border-color:var(--brand);color:#fff
}


/* ----------------------------------------------------------------------------
 * 15.3  AP -- Construction import (one-time sheet load)
 * ap/construction_import.php, data-page="construction-import"
 * -------------------------------------------------------------------------- */
 :where(:root[data-page="construction-import"]) body{font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      background:var(--nx-surface);color:var(--nx-ink);margin:0;padding:26px 30px;max-width:1100px}
 :where(:root[data-page="construction-import"]) h1{font:700 17px/1.3 var(--nx-font);margin:0 0 4px}
 :where(:root[data-page="construction-import"]) .sub{font:400 12.5px/1.5 var(--nx-font);color:var(--nx-ink2);margin-bottom:20px}
 :where(:root[data-page="construction-import"]) .box{border:1px solid var(--nx-line);border-radius:10px;padding:14px 16px;margin-bottom:14px}
 :where(:root[data-page="construction-import"]) .box h2{font:700 12px/1.4 var(--nx-font);text-transform:uppercase;
         letter-spacing:.05em;color:var(--nx-ink3);margin:0 0 9px}
 :where(:root[data-page="construction-import"]) table{border-collapse:collapse;font-size:12px;width:100%}
 :where(:root[data-page="construction-import"]) td,:where(:root[data-page="construction-import"]) th{padding:3px 9px 3px 0;text-align:left;vertical-align:top}
 :where(:root[data-page="construction-import"]) th{color:var(--nx-ink3);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
 :where(:root[data-page="construction-import"]) .n{text-align:right;font-variant-numeric:tabular-nums}
 :where(:root[data-page="construction-import"]) .ok{color:#1B7A3D;font-weight:700}
 :where(:root[data-page="construction-import"]) .bad{color:#B23A3A;font-weight:700}
 :where(:root[data-page="construction-import"]) .warn{color:#946400}
 :where(:root[data-page="construction-import"]) .go{display:inline-block;margin-top:8px;background:var(--blue);color:var(--nx-on-brand);text-decoration:none;
     padding:9px 16px;border-radius:9px;font:700 13px var(--nx-font)}
 :where(:root[data-page="construction-import"]) .dim{color:var(--nx-ink3)}


/* ----------------------------------------------------------------------------
 * 15.4  Reset password (from the emailed link)
 * reset_password.php, data-page="reset-password"
 * -------------------------------------------------------------------------- */
:where(:root[data-page="reset-password"]) *, *:where([data-page="reset-password"]){box-sizing:border-box;margin:0;padding:0}
:root:where([data-page="reset-password"]){
  --font:var(--nx-font);
  --border:#E8EAED;--bg:var(--nx-bg);--text:#1a1a1a;--text3:#9AA0A6;
  --red-border:#F09595;
  --green-border:#81C995;
  --radius:7px
}
html:where([data-page="reset-password"]),:where(:root[data-page="reset-password"]) body{height:100%;font-family:var(--font)}
:where(:root[data-page="reset-password"]) body{display:flex;min-height:100vh;background:var(--bg);align-items:center;justify-content:center;padding:24px}
:where(:root[data-page="reset-password"]) .card{background:var(--nx-surface);border:1px solid var(--border);border-radius:14px;padding:40px 38px;width:100%;max-width:420px}
:where(:root[data-page="reset-password"]) .logo{text-align:center;margin-bottom:28px}
:where(:root[data-page="reset-password"]) .logo-icon{width:48px;height:48px;border-radius:12px;background:var(--blue);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
:where(:root[data-page="reset-password"]) .logo-name{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.03em}
:where(:root[data-page="reset-password"]) .logo-name span{color:var(--blue)}
:where(:root[data-page="reset-password"]) .section-label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
:where(:root[data-page="reset-password"]) .alert{padding:10px 13px;border-radius:var(--radius);font-size:12.5px;margin-bottom:16px;display:none;line-height:1.5;font-weight:500}
:where(:root[data-page="reset-password"]) .alert.error{background:var(--red-lt);color:var(--red-text);border:1px solid var(--red-border)}
:where(:root[data-page="reset-password"]) .alert.success{background:var(--green-lt);color:var(--green);border:1px solid var(--green-border)}
:where(:root[data-page="reset-password"]) .alert.show{display:block}
:where(:root[data-page="reset-password"]) .field{margin-bottom:14px}
:where(:root[data-page="reset-password"]) .field label{display:block;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:5px}
:where(:root[data-page="reset-password"]) .input-wrap{position:relative}
:where(:root[data-page="reset-password"]) .field input{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--nx-surface);color:var(--text);font-size:13.5px;font-family:var(--font)}
:where(:root[data-page="reset-password"]) .field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,139,70,.08)}
:where(:root[data-page="reset-password"]) .pw-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:10px;font-weight:700;color:var(--text3);font-family:var(--font);letter-spacing:.06em;padding:4px 6px;border-radius:4px}
:where(:root[data-page="reset-password"]) .pw-btn:hover{color:var(--blue);background:var(--blue-lt)}
:where(:root[data-page="reset-password"]) .hint{font-size:11px;color:var(--text3);margin:-6px 0 16px;line-height:1.5}
:where(:root[data-page="reset-password"]) .btn{width:100%;padding:11px;border-radius:var(--radius);border:none;background:var(--blue);color:var(--nx-on-brand);font-size:13.5px;font-weight:700;font-family:var(--font);cursor:pointer;transition:background .12s}
:where(:root[data-page="reset-password"]) .btn:hover{background:var(--blue-dk)}
:where(:root[data-page="reset-password"]) .btn:disabled{opacity:.5;cursor:not-allowed}
:where(:root[data-page="reset-password"]) .link-row{text-align:center;margin-top:20px}
:where(:root[data-page="reset-password"]) .link-row a{font-size:12.5px;color:var(--blue);text-decoration:none;font-weight:600}
:where(:root[data-page="reset-password"]) .link-row a:hover{text-decoration:underline}
:where(:root[data-page="reset-password"]) .spinner{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--nx-surface);border-radius:50%;animation:spin .65s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}


/* ----------------------------------------------------------------------------
 * 15.5  No access
 * no_access.php, data-page="no-access"
 * -------------------------------------------------------------------------- */
:where(:root[data-page="no-access"]) *, *:where([data-page="no-access"]){box-sizing:border-box;margin:0;padding:0}
:root:where([data-page="no-access"]){
  --font:var(--nx-font);
  --font-feat:'cv05' 1,'cv11' 1,'ss01' 1;
  --green:#018B46;
  --border:#E8EAED;--border2:#DDE1E7;
  --bg:var(--nx-bg);--text:#1a1a1a;--text2:#3C4043;--text3:#9AA0A6;
  --amber:#B07900;--amber-lt:#FEF3C7;--amber-border:#FCD34D;
  --radius:7px;--radius-lg:10px
}
html:where([data-page="no-access"]),:where(:root[data-page="no-access"]) body{height:100%;font-family:var(--font);font-feature-settings:var(--font-feat)}
:where(:root[data-page="no-access"]) body{
  display:flex;min-height:100vh;background:var(--bg);
  align-items:center;justify-content:center;padding:24px
}
:where(:root[data-page="no-access"]) .card{
  background:var(--nx-surface);border:1px solid var(--border);
  border-radius:14px;padding:40px 38px;
  width:100%;max-width:480px;text-align:center
}
:where(:root[data-page="no-access"]) .icon{
  width:56px;height:56px;border-radius:14px;
  background:var(--amber-lt);border:1px solid var(--amber-border);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;color:var(--amber);font-size:24px;font-weight:700
}
:where(:root[data-page="no-access"]) h1{font-size:20px;font-weight:600;margin-bottom:12px;color:var(--text)}
:where(:root[data-page="no-access"]) .body-text{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:8px}
:where(:root[data-page="no-access"]) .user-line{
  font-size:13px;color:var(--text3);margin-bottom:24px;padding:10px 14px;
  background:var(--bg);border-radius:var(--radius);
  border:1px solid var(--border)
}
:where(:root[data-page="no-access"]) .user-line strong{color:var(--text2);font-weight:600}
:where(:root[data-page="no-access"]) .btn-row{
  display:flex;flex-direction:column;gap:10px;margin-top:24px
}
:where(:root[data-page="no-access"]) .btn{
  display:inline-block;padding:11px 18px;border-radius:var(--radius);
  font-size:13px;font-weight:600;text-decoration:none;
  border:1px solid transparent;cursor:pointer;font-family:var(--font);
  transition:all .12s ease
}
:where(:root[data-page="no-access"]) .btn-primary{background:var(--green);color:var(--nx-on-brand);border-color:var(--green)}
:where(:root[data-page="no-access"]) .btn-primary:hover{background:var(--blue-dk)}
:where(:root[data-page="no-access"]) .btn-ghost{background:transparent;color:var(--text2);border-color:var(--border2)}
:where(:root[data-page="no-access"]) .btn-ghost:hover{background:var(--bg);border-color:var(--text3)}
:where(:root[data-page="no-access"]) .email-link{color:var(--green);text-decoration:none;font-weight:600}
:where(:root[data-page="no-access"]) .email-link:hover{text-decoration:underline}


/* ----------------------------------------------------------------------------
 * 15.6  General -- the dashboard frame
 * general/general-dashboard.php, data-page="general-dashboard"
 * -------------------------------------------------------------------------- */
/* Everything the frame needs is in nexus.css. A page with no top-bar buttons
   (Month End) still keeps the theme switch and avatar on the right. */
:where(:root[data-page="general-dashboard"]) .nx-page-actions:empty + .nx-top-actions{margin-left:auto}

/* The open page may put a control or two at the left of this bar. Month End
   uses it for the month being closed. The markup
   comes over the embed bridge, so it has to be styled here rather than in
   the page that sends it. */
:where(:root[data-page="general-dashboard"]) .nx-page-lead{display:flex;align-items:center;gap:12px;min-width:0}
:where(:root[data-page="general-dashboard"]) .nx-page-lead:empty{display:none}
:where(:root[data-page="general-dashboard"]) .nx-lead-month{display:inline-flex;align-items:center;height:32px;background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:8px;overflow:hidden;flex:none}
:where(:root[data-page="general-dashboard"]) .nx-lead-month button{border:0;background:transparent;color:var(--nx-ink2);width:30px;height:100%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
:where(:root[data-page="general-dashboard"]) .nx-lead-month button:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="general-dashboard"]) .nx-lead-month button svg{width:13px;height:13px}
:where(:root[data-page="general-dashboard"]) .nx-lead-month .lbl{min-width:132px;text-align:center;font-weight:700;font-size:13px;color:var(--nx-ink)}
@media(max-width:820px){:where(:root[data-page="general-dashboard"]) .nx-lead-month .lbl{min-width:108px}}

/* Facilities (All Facilities) puts its search, Active / Inactive and filter
   buttons here. The lists they open are drawn inside the page itself.
   When they do not all fit on one line they wrap to a second, rather than
   squeezing the page's own buttons on the right. */
:where(:root[data-page="general-dashboard"]) .nx-page-lead{gap:9px;flex:1 1 auto;flex-wrap:wrap}
:where(:root[data-page="general-dashboard"]) .nx-page-actions{flex:none}
:where(:root[data-page="general-dashboard"]) .nx-page-actions .nx-pbtn{white-space:nowrap}
:where(:root[data-page="general-dashboard"]) .nx-lead-find{display:flex;align-items:center;gap:8px;flex:0 1 260px;min-width:190px;height:34px;padding:0 11px;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:10px;color:var(--nx-ink3);cursor:text}
:where(:root[data-page="general-dashboard"]) .nx-lead-find:focus-within{border-color:var(--brand)}
:where(:root[data-page="general-dashboard"]) .nx-lead-find svg{width:15px;height:15px;flex:none}
:where(:root[data-page="general-dashboard"]) .nx-lead-find input{border:0;background:transparent;outline:none;font:inherit;font-size:12.5px;color:var(--nx-ink);width:100%;height:100%;min-width:0}
:where(:root[data-page="general-dashboard"]) .nx-lead-seg{display:inline-flex;align-items:center;flex:none;height:34px;padding:2px;gap:2px;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:10px}
:where(:root[data-page="general-dashboard"]) .nx-lead-seg button{border:0;background:transparent;color:var(--nx-ink3);font:inherit;font-size:12.5px;font-weight:650;padding:0 11px;height:28px;border-radius:8px;cursor:pointer;white-space:nowrap}
:where(:root[data-page="general-dashboard"]) .nx-lead-seg button:hover{color:var(--nx-ink)}
:where(:root[data-page="general-dashboard"]) .nx-lead-seg button.on{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="general-dashboard"]) .nx-lead-seg button .n{opacity:.65;font-weight:600;margin-left:4px}
:where(:root[data-page="general-dashboard"]) .nx-lead-dd{flex:none;height:34px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);border-radius:10px;padding:0 10px;font-weight:600;font-size:12.5px;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:7px;max-width:220px}
:where(:root[data-page="general-dashboard"]) .nx-lead-dd:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="general-dashboard"]) .nx-lead-dd .cap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="general-dashboard"]) .nx-lead-dd .car{width:9px;height:9px;flex:none;opacity:.6}
:where(:root[data-page="general-dashboard"]) .nx-lead-dd.set{border-color:var(--brand);color:var(--brand);background:var(--brand-lt)}


/* ----------------------------------------------------------------------------
 * 15.7  Purchasing -- New home intake: Settings > the questions
 * purchasing/intake.php, data-page="intake"
 * -------------------------------------------------------------------------- */
/* Settings > the questions. Only the pieces section 13 does not already have --
   everything else on this page is the .pi-* set up there. */
:where(:root[data-page="intake"]) .pis-tabs{display:flex;gap:6px;margin-bottom:14px}
:where(:root[data-page="intake"]) .pis-tab{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);
  border-radius:9px;padding:8px 15px;font-family:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:border-color .15s,color .15s,background .15s}
:where(:root[data-page="intake"]) .pis-tab:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="intake"]) .pis-tab.on{background:var(--brand);border-color:var(--brand);color:var(--nx-on-brand)}
:where(:root[data-page="intake"]) .pis-grid{display:grid;grid-template-columns:216px minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:860px){:where(:root[data-page="intake"]) .pis-grid{grid-template-columns:minmax(0,1fr)}}
:where(:root[data-page="intake"]) .pis-side{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:12px;padding:6px}
:where(:root[data-page="intake"]) .pis-sidehead{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--nx-ink3);padding:11px 10px 8px}
:where(:root[data-page="intake"]) .pis-cat{display:block;width:100%;text-align:left;border:0;background:none;border-radius:9px;
  padding:8px 10px;cursor:pointer;font-family:inherit;color:var(--nx-ink2)}
:where(:root[data-page="intake"]) .pis-cat:hover{background:var(--nx-hover)}
:where(:root[data-page="intake"]) .pis-cat.on{background:var(--brand-lt);color:var(--nx-ink)}
:where(:root[data-page="intake"]) .pis-cat b{display:block;font-size:13px;font-weight:600}
:where(:root[data-page="intake"]) .pis-cat small{display:block;font-size:11px;color:var(--nx-ink3);margin-top:2px}
:where(:root[data-page="intake"]) .pis-pane{padding:16px 18px}
:where(:root[data-page="intake"]) .pis-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){:where(:root[data-page="intake"]) .pis-two{grid-template-columns:minmax(0,1fr)}}
:where(:root[data-page="intake"]) .pis-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
:where(:root[data-page="intake"]) .pis-h{margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--nx-line);
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink2)}
:where(:root[data-page="intake"]) .pis-h:first-child{margin-top:0;padding-top:0;border-top:0}
:where(:root[data-page="intake"]) .pis-h small{display:block;margin-top:5px;font-size:11.5px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--nx-ink3)}
:where(:root[data-page="intake"]) .pis-item{border:1px solid var(--nx-line);border-radius:11px;padding:12px 14px 14px;
  margin-bottom:10px;background:var(--nx-elev)}
:where(:root[data-page="intake"]) .pis-item-h{display:flex;align-items:center;gap:8px}
:where(:root[data-page="intake"]) .pis-item-h .pi-in{flex:1;margin:0}
:where(:root[data-page="intake"]) .pis-num{width:23px;height:23px;border-radius:7px;background:var(--nx-hover);color:var(--nx-ink3);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
:where(:root[data-page="intake"]) .pis-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
:where(:root[data-page="intake"]) .pis-tog{border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);
  border-radius:999px;padding:6px 13px;font-family:inherit;font-size:12px;font-weight:600;
  cursor:pointer;transition:border-color .15s,color .15s,background .15s}
:where(:root[data-page="intake"]) .pis-tog:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="intake"]) .pis-tog.on{background:var(--brand);border-color:var(--brand);color:var(--nx-on-brand)}
:where(:root[data-page="intake"]) .pis-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
:where(:root[data-page="intake"]) .pis-hint{font-size:12px;color:var(--nx-ink3)}
:where(:root[data-page="intake"]) .pis-dirty{font-size:12px;font-weight:600;color:var(--st-warn)}


/* ----------------------------------------------------------------------------
 * 15.8  Purchasing -- the onboarding form, one question at a time
 * purchasing/onboarding.php, data-page="onboarding"
 * -------------------------------------------------------------------------- */
/* One question at a time. Only the pieces section 14 does not already have --
   everything else on this page is the .pf-* set up there. */
:where(:root[data-page="onboarding"]) .pf-wrap.pf1-solo{grid-template-columns:minmax(0,1fr);max-width:660px}
:where(:root[data-page="onboarding"]) .pf1-bar{margin-bottom:20px}
:where(:root[data-page="onboarding"]) .pf1-cnt{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;
  color:var(--nx-ink3);margin-bottom:7px}
:where(:root[data-page="onboarding"]) .pf1-track{display:flex;align-items:center;gap:3px;height:16px}
:where(:root[data-page="onboarding"]) .pf1-track button{flex:1 1 0;min-width:4px;height:16px;border:0;background:none;padding:0;
  position:relative;cursor:pointer;font-family:inherit}
:where(:root[data-page="onboarding"]) .pf1-track button::before{content:'';position:absolute;left:0;right:0;top:5px;height:6px;
  border-radius:2px;background:var(--nx-line);
  transition:background .15s,opacity .15s,height .15s,top .15s}
:where(:root[data-page="onboarding"]) .pf1-track button.past::before{background:var(--brand);opacity:.28}
:where(:root[data-page="onboarding"]) .pf1-track button.on::before{background:var(--brand)}
:where(:root[data-page="onboarding"]) .pf1-track button.here::before{top:3px;height:10px;border-radius:3px}
:where(:root[data-page="onboarding"]) .pf1-track button.here.plain::before{background:var(--nx-ink3);opacity:.45}
:where(:root[data-page="onboarding"]) .pf1-track button:hover::before{background:var(--brand);opacity:.6}
:where(:root[data-page="onboarding"]) .pf1-track button.on:hover::before{opacity:1}
:where(:root[data-page="onboarding"]) .pf1-pick{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:1px solid var(--nx-line);background:var(--nx-surface);border-radius:var(--nx-radius-sm);
  padding:12px 14px;cursor:pointer;font-family:inherit}
:where(:root[data-page="onboarding"]) .pf1-pick:hover{border-color:var(--brand);background:var(--brand-lt)}
:where(:root[data-page="onboarding"]) .pf1-pick .nm{display:block;font-size:13.5px;font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="onboarding"]) .pf1-pick .sub{display:block;font-size:12px;color:var(--nx-ink3);margin-top:2px}
:where(:root[data-page="onboarding"]) .pf1-pick .cnt{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--nx-ink3);
  white-space:nowrap}
:where(:root[data-page="onboarding"]) .pf1-pick.done .cnt{color:var(--brand)}
:where(:root[data-page="onboarding"]) .pf1-ring{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:var(--nx-line);color:var(--nx-ink3);
  font-size:11px;font-weight:800}
:where(:root[data-page="onboarding"]) .pf1-pick.done .pf1-ring{background:var(--brand);color:var(--nx-on-brand)}
:where(:root[data-page="onboarding"]) .pf1-pick.part .pf1-ring{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="onboarding"]) .pf1-q{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin:0;
  color:var(--nx-ink)}
:where(:root[data-page="onboarding"]) .pf1-help{font-size:13px;color:var(--nx-ink2);line-height:1.55;margin:9px 0 0}
:where(:root[data-page="onboarding"]) .pf1-fields{margin-top:20px;display:grid;gap:14px}
:where(:root[data-page="onboarding"]) .pf1-more{width:100%;border:1px dashed var(--nx-line2);background:none;color:var(--nx-ink2);
  border-radius:var(--nx-radius-xs);padding:10px 12px;font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:inherit}
:where(:root[data-page="onboarding"]) .pf1-more:hover{background:var(--brand-lt);border-color:var(--brand);color:var(--nx-ink)}
:where(:root[data-page="onboarding"]) .pf1-foot{margin-top:22px;padding-top:16px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="onboarding"]) .pf1-skip{border:none;background:none;color:var(--nx-ink3);font-size:12.5px;font-weight:600;
  text-decoration:underline;cursor:pointer;font-family:inherit;padding:0}
:where(:root[data-page="onboarding"]) .pf1-skip:hover{color:var(--nx-ink)}
:where(:root[data-page="onboarding"]) .pf1-under{text-align:center;margin-top:-6px}
:where(:root[data-page="onboarding"]) .pf1-mid{text-align:center}
:where(:root[data-page="onboarding"]) .pf1-tick{width:56px;height:56px;border-radius:50%;background:var(--brand-lt);color:var(--brand);
  display:flex;align-items:center;justify-content:center;margin:10px auto 0}
:where(:root[data-page="onboarding"]) .pf1-tick svg{width:28px;height:28px}
:where(:root[data-page="onboarding"]) .pf1-stack{display:grid;gap:9px;margin-top:20px}
:where(:root[data-page="onboarding"]) .pf1-stack .pf-btn{width:100%;padding:11px 15px}
:where(:root[data-page="onboarding"]) .pf1-was{display:inline-block;font-size:11.5px;font-weight:600;color:var(--nx-ink3);
  border:1px solid var(--nx-line2);border-radius:999px;padding:2px 9px;margin-top:12px}
:where(:root[data-page="onboarding"]) .pf1-row{display:grid;grid-template-columns:minmax(0,172px) minmax(0,1fr) 12px;
  align-items:start;gap:6px 14px;width:100%;text-align:left;border:none;background:none;
  border-top:1px solid var(--nx-line);padding:11px 6px;cursor:pointer;font-family:inherit}
:where(:root[data-page="onboarding"]) .pf1-row:first-of-type{border-top:none}
:where(:root[data-page="onboarding"]) .pf1-row:hover{background:var(--brand-lt)}
:where(:root[data-page="onboarding"]) .pf1-row .arw{color:var(--nx-ink3);align-self:center}
:where(:root[data-page="onboarding"]) .pf1-w{font-size:12.5px;font-weight:600;color:var(--nx-ink2);line-height:1.45;padding-top:1px}
:where(:root[data-page="onboarding"]) .pf1-v{font-size:14px;font-weight:600;color:var(--nx-ink);line-height:1.5;
  white-space:pre-wrap;word-break:break-word}
:where(:root[data-page="onboarding"]) .pf1-v.blank{font-size:12.5px;font-weight:500;color:var(--nx-ink3);font-style:italic}
:where(:root[data-page="onboarding"]) .pf1-row.is-blank .pf1-w{color:var(--nx-ink3)}
:where(:root[data-page="onboarding"]) .pf1-grp{margin-top:12px}
:where(:root[data-page="onboarding"]) .pf1-grph{display:flex;align-items:baseline;gap:10px;padding:0 6px 10px;
  border-bottom:2px solid var(--nx-line)}
:where(:root[data-page="onboarding"]) .pf1-grph h3{margin:0;font-size:14.5px;font-weight:700;color:var(--nx-ink);
  letter-spacing:-.01em}
:where(:root[data-page="onboarding"]) .pf1-grph span{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--nx-ink3);
  white-space:nowrap}
:where(:root[data-page="onboarding"]) .pf1-only{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
/* The picked one is a solid orange pill, so its text has to be white whatever
   the theme says sits on the accent. */
:where(:root[data-page="onboarding"]) .pf1-only .pf-chip.on{color:#FFFFFF}
:where(:root[data-page="onboarding"]) .pf1-secname{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--nx-ink3);margin:16px 0 4px}
:where(:root[data-page="onboarding"]) .pf1-secname:first-child{margin-top:0}
@media (max-width:560px){
  :where(:root[data-page="onboarding"]) .pf1-row{grid-template-columns:minmax(0,1fr) 12px}
  :where(:root[data-page="onboarding"]) .pf1-w{grid-column:1 / -1}
}


/* ----------------------------------------------------------------------------
 * 15.9  Insurance -- Premium analysis
 * insurance/analysis.php, data-page="insurance-analysis"
 * -------------------------------------------------------------------------- */
/* Cobalt-blue accent, scoped to .shell — matches the Accounting/Financials
   module so the two financial areas feel like one family. */
:where(:root[data-page="insurance-analysis"]) .shell{
  --blue:#2563EB; --blue-dk:#1E40AF; --blue-lt:#E0E9FF;
  --accent-blue:#2563EB; --accent-blue-lt:#E0E9FF;
}
:where(:root[data-page="insurance-analysis"]) .shell .scroll-area{scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#CFD3D8 transparent}
:where(:root[data-page="insurance-analysis"]) .shell .scroll-area::-webkit-scrollbar{width:10px;height:10px}
:where(:root[data-page="insurance-analysis"]) .shell .scroll-area::-webkit-scrollbar-thumb{background:#CFD3D8;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
:where(:root[data-page="insurance-analysis"]) .sb-subname{font-size:11px;font-weight:500;color:var(--text3);letter-spacing:-.01em;margin-top:1px}

:where(:root[data-page="insurance-analysis"]) .ins-picker{display:flex;gap:10px;align-items:center;flex:1;flex-wrap:wrap}
:where(:root[data-page="insurance-analysis"]) .ins-picker label{font-size:12px;color:var(--text2);font-weight:500;margin-right:2px}
:where(:root[data-page="insurance-analysis"]) .ins-picker select{
  background:var(--nx-surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:7px 28px 7px 11px;font-size:13.5px;color:var(--text);min-width:200px;cursor:pointer;
  font-family:inherit;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2354595E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;transition:border-color .12s;
}
:where(:root[data-page="insurance-analysis"]) .ins-picker select:hover{border-color:#B3B7BC}
:where(:root[data-page="insurance-analysis"]) .ins-picker select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.18)}

/* KPI cards (reuse the financials .fin-card look) */
:where(:root[data-page="insurance-analysis"]) .ins-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}
:where(:root[data-page="insurance-analysis"]) .ins-card{background:var(--nx-surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
:where(:root[data-page="insurance-analysis"]) .ins-card-label{font-size:11.5px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
:where(:root[data-page="insurance-analysis"]) .ins-card-value{font-size:25px;font-weight:700;color:var(--text);letter-spacing:-.015em;line-height:1.15}
:where(:root[data-page="insurance-analysis"]) .ins-card-sub{font-size:12.5px;font-weight:500;color:var(--text3)}
:where(:root[data-page="insurance-analysis"]) .ins-card-delta{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:5px}
:where(:root[data-page="insurance-analysis"]) .ins-card-delta.up{color:#B91C1C}   /* premium going UP is bad → red */
:where(:root[data-page="insurance-analysis"]) .ins-card-delta.down{color:#15803D}
:where(:root[data-page="insurance-analysis"]) .ins-card.accent{background:linear-gradient(180deg,#F5F8FF,var(--nx-surface));border-color:#C9D8FF}

:where(:root[data-page="insurance-analysis"]) .ins-panel{background:var(--nx-surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:18px;overflow:hidden}
:where(:root[data-page="insurance-analysis"]) .ins-panel-head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap}
:where(:root[data-page="insurance-analysis"]) .ins-panel-head h3{margin:0;font-size:14.5px;color:var(--text);font-weight:600;letter-spacing:-.01em}
:where(:root[data-page="insurance-analysis"]) .ins-panel-head .sub{font-size:12px;color:var(--text3)}
:where(:root[data-page="insurance-analysis"]) .ins-panel-body{padding:16px 18px 18px}

:where(:root[data-page="insurance-analysis"]) .ins-table{width:100%;border-collapse:collapse;font-size:12.5px;color:var(--text)}
:where(:root[data-page="insurance-analysis"]) .ins-table th,:where(:root[data-page="insurance-analysis"]) .ins-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
:where(:root[data-page="insurance-analysis"]) .ins-table th{font-weight:600;color:var(--text2);background:var(--nx-rail);font-size:11px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;user-select:none;white-space:nowrap}
:where(:root[data-page="insurance-analysis"]) .ins-table th.num,:where(:root[data-page="insurance-analysis"]) .ins-table td.num{text-align:right;font-variant-numeric:tabular-nums}
:where(:root[data-page="insurance-analysis"]) .ins-table td.label{font-weight:500}
:where(:root[data-page="insurance-analysis"]) .ins-table tr:last-child td{border-bottom:none}
:where(:root[data-page="insurance-analysis"]) .ins-table tbody tr:hover{background:#F7F9FC;cursor:pointer}
:where(:root[data-page="insurance-analysis"]) .ins-table tr.is-active{background:var(--blue-lt)!important}
:where(:root[data-page="insurance-analysis"]) .ins-table tr.is-active td.label{color:var(--blue-dk);font-weight:700}
:where(:root[data-page="insurance-analysis"]) .ins-bar-cell{min-width:120px}
:where(:root[data-page="insurance-analysis"]) .ins-bar{height:8px;border-radius:99px;background:var(--nx-bg);overflow:hidden;position:relative}
:where(:root[data-page="insurance-analysis"]) .ins-bar > span{position:absolute;left:0;top:0;bottom:0;border-radius:99px}
:where(:root[data-page="insurance-analysis"]) .ins-bar > .seg-bed{background:#94A3B8}
:where(:root[data-page="insurance-analysis"]) .ins-bar > .seg-py{background:#3B82F6}
:where(:root[data-page="insurance-analysis"]) .ins-bar > .seg-cy{background:#1E3A8A}

:where(:root[data-page="insurance-analysis"]) .ins-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text2);margin-bottom:4px}
:where(:root[data-page="insurance-analysis"]) .ins-legend span{display:inline-flex;align-items:center;gap:6px}
:where(:root[data-page="insurance-analysis"]) .ins-legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
:where(:root[data-page="insurance-analysis"]) .dot-bed{background:#94A3B8}:where(:root[data-page="insurance-analysis"]) .dot-py{background:#3B82F6}:where(:root[data-page="insurance-analysis"]) .dot-cy{background:#1E3A8A}

:where(:root[data-page="insurance-analysis"]) .ins-insight{background:var(--blue-lt);border:1px solid #C9D8FF;border-radius:12px;padding:14px 16px;font-size:13.5px;line-height:1.55;color:#1E293B}
:where(:root[data-page="insurance-analysis"]) .ins-insight strong{color:var(--blue-dk)}
:where(:root[data-page="insurance-analysis"]) .ins-insight .lead{font-weight:700;color:var(--blue-dk);display:block;margin-bottom:4px;font-size:13px;text-transform:uppercase;letter-spacing:.03em}

:where(:root[data-page="insurance-analysis"]) .ins-chartwrap{position:relative;height:300px}
:where(:root[data-page="insurance-analysis"]) .ins-chartwrap.tall{height:360px}
:where(:root[data-page="insurance-analysis"]) .ins-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:980px){:where(:root[data-page="insurance-analysis"]) .ins-grid2{grid-template-columns:1fr}}

:where(:root[data-page="insurance-analysis"]) .ins-split{display:flex;align-items:stretch;gap:0;border-radius:10px;overflow:hidden;border:1px solid var(--border);font-size:12px;font-weight:600}
:where(:root[data-page="insurance-analysis"]) .ins-split > div{padding:10px 12px;color:var(--nx-on-brand);display:flex;flex-direction:column;gap:2px;justify-content:center}
:where(:root[data-page="insurance-analysis"]) .ins-split .s-bed{background:#94A3B8;flex:85}
:where(:root[data-page="insurance-analysis"]) .ins-split .s-py{background:#3B82F6;flex:7.5}
:where(:root[data-page="insurance-analysis"]) .ins-split .s-cy{background:#1E3A8A;flex:7.5}
:where(:root[data-page="insurance-analysis"]) .ins-split small{font-weight:500;opacity:.92;font-size:10.5px}

:where(:root[data-page="insurance-analysis"]) .pill{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:99px;letter-spacing:.03em}
:where(:root[data-page="insurance-analysis"]) .pill.red{background:#FDE7E7;color:#B91C1C}
:where(:root[data-page="insurance-analysis"]) .pill.green{background:#E4F5EA;color:#15803D}
:where(:root[data-page="insurance-analysis"]) .pill.gray{background:var(--nx-bg);color:var(--text3)}
:where(:root[data-page="insurance-analysis"]) .muted{color:var(--text3)}
:where(:root[data-page="insurance-analysis"]) .section-intro{font-size:13px;color:var(--text2);line-height:1.55;margin:0 0 14px;max-width:760px}
:where(:root[data-page="insurance-analysis"]) .ins-drop{border:2px dashed #C9D3E0;border-radius:14px;padding:34px 20px;text-align:center;cursor:pointer;
  color:var(--text2);background:var(--nx-rail);transition:border-color .15s,background .15s}
:where(:root[data-page="insurance-analysis"]) .ins-drop:hover{border-color:var(--blue);background:#F5F8FF}
:where(:root[data-page="insurance-analysis"]) .ins-drop.over{border-color:var(--blue);background:var(--blue-lt)}
:where(:root[data-page="insurance-analysis"]) .ins-upload-msg{margin-top:14px;padding:11px 14px;border-radius:10px;font-size:13px;font-weight:500}
:where(:root[data-page="insurance-analysis"]) .ins-upload-msg.working{background:#FFF7E6;color:#92600A;border:1px solid #F3D89A;display:block!important}
:where(:root[data-page="insurance-analysis"]) .ins-upload-msg.ok{background:#E4F5EA;color:#15803D;border:1px solid #B6E4C4;display:block!important}
:where(:root[data-page="insurance-analysis"]) .ins-upload-msg.err{background:#FDE7E7;color:#B91C1C;border:1px solid #F3B6B6;display:block!important}
:where(:root[data-page="insurance-analysis"]) .ins-empty-state{}


/* ----------------------------------------------------------------------------
 * 15.10  Sign in
 * login.php, data-page="login"
 * -------------------------------------------------------------------------- */
:where(:root[data-page="login"]) *, *:where([data-page="login"]){box-sizing:border-box;margin:0;padding:0}
:root:where([data-page="login"]){
  --font:var(--nx-font);
  --font-feat:'cv05' 1,'cv11' 1,'ss01' 1;
  --border:#E8EAED;--border2:#DDE1E7;
  --bg:var(--nx-bg);--text:#1a1a1a;--text2:#3C4043;--text3:#9AA0A6;
  --red-border:#F09595;
  --green-border:#81C995;
  --radius:7px;--radius-lg:10px
}
html:where([data-page="login"]),:where(:root[data-page="login"]) body{height:100%;font-family:var(--font);font-feature-settings:var(--font-feat)}
:where(:root[data-page="login"]) body{
  display:flex;min-height:100vh;
  background:var(--bg);align-items:center;justify-content:center;padding:24px
}
:where(:root[data-page="login"]) .card{
  background:var(--nx-surface);border:1px solid var(--border);
  border-radius:14px;padding:40px 38px;
  width:100%;max-width:420px
}
:where(:root[data-page="login"]) .logo{text-align:center;margin-bottom:32px}
:where(:root[data-page="login"]) .logo-icon{
  width:48px;height:48px;border-radius:12px;
  background:var(--blue);display:flex;align-items:center;
  justify-content:center;margin:0 auto 14px
}
:where(:root[data-page="login"]) .logo-icon svg{width:24px;height:24px}
:where(:root[data-page="login"]) .logo-name{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.03em}
:where(:root[data-page="login"]) .logo-name span{color:var(--blue)}
:where(:root[data-page="login"]) .logo-sub{font-size:13px;color:var(--text3);margin-top:3px;font-weight:400}
:where(:root[data-page="login"]) .section-label{
  font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.07em;
  margin-bottom:16px;padding-bottom:10px;
  border-bottom:1px solid var(--border)
}
:where(:root[data-page="login"]) .alert{
  padding:10px 13px;border-radius:var(--radius);
  font-size:12.5px;margin-bottom:16px;display:none;line-height:1.5;font-weight:500
}
:where(:root[data-page="login"]) .alert.error{background:var(--red-lt);color:var(--red-text);border:1px solid var(--red-border)}
:where(:root[data-page="login"]) .alert.success{background:var(--green-lt);color:var(--green);border:1px solid var(--green-border)}
:where(:root[data-page="login"]) .alert.show{display:block}
:where(:root[data-page="login"]) .field{margin-bottom:14px}
:where(:root[data-page="login"]) .field label{
  display:block;font-size:10px;font-weight:700;
  color:var(--text3);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:5px
}
:where(:root[data-page="login"]) .input-wrap{position:relative}
:where(:root[data-page="login"]) .field input{
  width:100%;padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius:var(--radius);background:var(--nx-surface);
  color:var(--text);font-size:13.5px;
  font-family:var(--font);font-feature-settings:var(--font-feat);
  transition:border-color .1s;letter-spacing:-.01em
}
:where(:root[data-page="login"]) .field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,139,70,.08)}
:where(:root[data-page="login"]) .field input.err{border-color:var(--red)}
:where(:root[data-page="login"]) .pw-btn{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  font-size:10px;font-weight:700;color:var(--text3);
  font-family:var(--font);letter-spacing:.06em;padding:4px 6px;
  border-radius:4px
}
:where(:root[data-page="login"]) .pw-btn:hover{color:var(--blue);background:var(--blue-lt)}
:where(:root[data-page="login"]) .bottom-row{
  display:flex;align-items:center;
  justify-content:space-between;margin-bottom:20px
}
:where(:root[data-page="login"]) .remember{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--text2);font-weight:500;
  cursor:pointer;user-select:none
}
:where(:root[data-page="login"]) .remember input{
  width:15px;height:15px;margin:0;cursor:pointer;
  accent-color:var(--blue)
}
:where(:root[data-page="login"]) .forgot{font-size:12px;color:var(--blue);text-decoration:none;font-weight:500}
:where(:root[data-page="login"]) .forgot:hover{text-decoration:underline}
:where(:root[data-page="login"]) .btn-signin{
  width:100%;padding:11px;border-radius:var(--radius);border:none;
  background:var(--blue);color:var(--nx-on-brand);font-size:13.5px;font-weight:700;
  font-family:var(--font);font-feature-settings:var(--font-feat);
  cursor:pointer;transition:background .12s;letter-spacing:-.01em
}
:where(:root[data-page="login"]) .btn-signin:hover{background:var(--blue-dk)}
:where(:root[data-page="login"]) .btn-signin:disabled{opacity:.5;cursor:not-allowed}
:where(:root[data-page="login"]) .footer{
  text-align:center;margin-top:22px;
  font-size:11px;color:var(--text3);font-weight:500
}
:where(:root[data-page="login"]) .spinner{
  display:inline-block;width:12px;height:12px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:var(--nx-surface);border-radius:50%;
  animation:spin .65s linear infinite;
  vertical-align:middle;margin-right:6px
}
@keyframes spin{to{transform:rotate(360deg)}}
:where(:root[data-page="login"]) .modal-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.35);
  display:none;align-items:center;justify-content:center;padding:24px;z-index:50
}
:where(:root[data-page="login"]) .modal-bg.show{display:flex}
:where(:root[data-page="login"]) .modal{
  background:var(--nx-surface);border:1px solid var(--border);border-radius:14px;
  padding:32px 30px;width:100%;max-width:400px
}
:where(:root[data-page="login"]) .modal h3{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.02em;margin-bottom:6px}
:where(:root[data-page="login"]) .modal p{font-size:12.5px;color:var(--text2);line-height:1.55;margin-bottom:18px}
:where(:root[data-page="login"]) .modal-actions{display:flex;gap:10px;margin-top:18px}
:where(:root[data-page="login"]) .btn-cancel{
  flex:1;padding:11px;border-radius:var(--radius);border:1.5px solid var(--border);
  background:var(--nx-surface);color:var(--text2);font-size:13px;font-weight:700;
  font-family:var(--font);cursor:pointer
}
:where(:root[data-page="login"]) .btn-cancel:hover{background:var(--bg)}
:where(:root[data-page="login"]) .btn-send{flex:1}


/* ----------------------------------------------------------------------------
 * 15.11  Accounting -- Financials backfill
 * accounting/fin-backfill.php, data-page="fin-backfill"
 * -------------------------------------------------------------------------- */
:root:where([data-page="fin-backfill"]){
  --nx-warn:#B4791C;--nx-warn-bg:#FBF2E0;
  --brand:#185FA5;--brand-lt:#E3EBF5;
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="fin-backfill"]){
  --nx-up:#34D27B;--nx-up-bg:#16301F;
  --nx-down:#F4756B;--nx-down-bg:#3A1E1C;
  --nx-warn:#E0AE5A;--nx-warn-bg:#332711;
  --brand:#4F97E0;--brand-lt:#16283C;
  color-scheme:dark;
}
:where(:root[data-page="fin-backfill"]) *, *:where([data-page="fin-backfill"]){box-sizing:border-box}
html:where([data-page="fin-backfill"]),:where(:root[data-page="fin-backfill"]) body{margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px}
:where(:root[data-page="fin-backfill"]) button,:where(:root[data-page="fin-backfill"]) input,:where(:root[data-page="fin-backfill"]) select{font-family:inherit}

:where(:root[data-page="fin-backfill"]) .bf-wrap{max-width:1080px;margin:0 auto;padding:22px 18px 60px}
:where(:root[data-page="fin-backfill"]) .bf-head{display:flex;align-items:flex-start;gap:14px;padding:6px 2px 18px}
:where(:root[data-page="fin-backfill"]) .bf-mark{width:38px;height:38px;flex:0 0 auto;border-radius:11px;background:linear-gradient(135deg,var(--brand),#0B4C86);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:17px}
:where(:root[data-page="fin-backfill"]) .bf-title{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0}
:where(:root[data-page="fin-backfill"]) .bf-sub{font-size:12.5px;color:var(--nx-ink2);margin:4px 0 0;line-height:1.55;max-width:74ch}
:where(:root[data-page="fin-backfill"]) .bf-onetime{margin-left:auto;flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--nx-warn);background:var(--nx-warn-bg);border:1px solid var(--nx-warn);border-radius:20px;padding:4px 10px}

:where(:root[data-page="fin-backfill"]) .bf-card{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:16px;padding:18px 20px;margin-bottom:14px;box-shadow:0 6px 22px rgba(27,29,41,.05)}
:where(:root[data-page="fin-backfill"]) .bf-card h2{font-size:13px;font-weight:700;letter-spacing:-.01em;margin:0 0 3px}
:where(:root[data-page="fin-backfill"]) .bf-note{font-size:12px;color:var(--nx-ink2);margin:0 0 14px;line-height:1.55}

:where(:root[data-page="fin-backfill"]) .bf-row{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-start}
:where(:root[data-page="fin-backfill"]) .bf-field{display:flex;flex-direction:column;gap:6px}
:where(:root[data-page="fin-backfill"]) .bf-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--nx-ink3)}
:where(:root[data-page="fin-backfill"]) .bf-in{height:36px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink);border-radius:10px;padding:0 11px;font-size:13px;font-weight:600;min-width:150px}
:where(:root[data-page="fin-backfill"]) .bf-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}

/* Company chips */
:where(:root[data-page="fin-backfill"]) .bf-chips{display:flex;flex-wrap:wrap;gap:8px}
:where(:root[data-page="fin-backfill"]) .bf-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 10px;border-radius:20px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);font-size:12.5px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
:where(:root[data-page="fin-backfill"]) .bf-chip:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="fin-backfill"]) .bf-chip .tick{width:16px;height:16px;flex:0 0 auto;border-radius:5px;border:1.5px solid var(--nx-line2);display:flex;align-items:center;justify-content:center;background:var(--nx-surface)}
:where(:root[data-page="fin-backfill"]) .bf-chip .tick svg{width:10px;height:10px;opacity:0}
:where(:root[data-page="fin-backfill"]) .bf-chip.on{background:var(--brand-lt);border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="fin-backfill"]) .bf-chip.on .tick{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="fin-backfill"]) .bf-chip.on .tick svg{opacity:1}
:where(:root[data-page="fin-backfill"]) .bf-chip .cnt{font-size:11px;font-weight:700;color:var(--nx-ink3)}
:where(:root[data-page="fin-backfill"]) .bf-chip.on .cnt{color:var(--brand)}

/* Tick boxes */
:where(:root[data-page="fin-backfill"]) .bf-tick{display:flex;align-items:flex-start;gap:10px;cursor:pointer;padding:7px 0;max-width:78ch}
:where(:root[data-page="fin-backfill"]) .bf-tick .box{width:17px;height:17px;flex:0 0 auto;margin-top:1px;border-radius:5px;border:1.5px solid var(--nx-line2);background:var(--nx-surface);display:flex;align-items:center;justify-content:center;color:#fff}
:where(:root[data-page="fin-backfill"]) .bf-tick .box svg{width:11px;height:11px;opacity:0}
:where(:root[data-page="fin-backfill"]) .bf-tick.on .box{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="fin-backfill"]) .bf-tick.on .box svg{opacity:1}
:where(:root[data-page="fin-backfill"]) .bf-tick .txt{font-size:12.5px;color:var(--nx-ink2);line-height:1.55}
:where(:root[data-page="fin-backfill"]) .bf-tick .txt b{color:var(--nx-ink);font-weight:600}

/* Buttons */
:where(:root[data-page="fin-backfill"]) .bf-btn{height:38px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:10px;padding:0 15px;font-size:13px;font-weight:600;cursor:pointer;line-height:1}
:where(:root[data-page="fin-backfill"]) .bf-btn:hover:not(:disabled){border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="fin-backfill"]) .bf-btn:disabled{opacity:.45;cursor:not-allowed}
:where(:root[data-page="fin-backfill"]) .bf-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="fin-backfill"]) .bf-btn.primary:hover:not(:disabled){filter:brightness(1.08)}
:where(:root[data-page="fin-backfill"]) .bf-btn.danger{border-color:var(--nx-down);color:var(--nx-down)}
:where(:root[data-page="fin-backfill"]) .bf-btn.danger:hover:not(:disabled){background:var(--nx-down-bg)}

/* Plan strip */
:where(:root[data-page="fin-backfill"]) .bf-plan{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
:where(:root[data-page="fin-backfill"]) .bf-stat{flex:1 1 150px;min-width:140px;border:1px solid var(--nx-line);border-radius:12px;padding:11px 13px;background:var(--nx-bg)}
:where(:root[data-page="fin-backfill"]) .bf-stat .k{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--nx-ink3)}
:where(:root[data-page="fin-backfill"]) .bf-stat .v{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:3px}

/* Progress */
:where(:root[data-page="fin-backfill"]) .bf-bar{height:8px;border-radius:6px;background:var(--nx-line);overflow:hidden;margin:14px 0 8px}
:where(:root[data-page="fin-backfill"]) .bf-bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:6px;transition:width .25s ease}
:where(:root[data-page="fin-backfill"]) .bf-prog{font-size:12.5px;font-weight:600;color:var(--nx-ink2)}

/* Log */
:where(:root[data-page="fin-backfill"]) .bf-logwrap{max-height:460px;overflow:auto;border:1px solid var(--nx-line);border-radius:12px}
:where(:root[data-page="fin-backfill"]) .bf-log{width:100%;border-collapse:collapse;font-size:12px}
:where(:root[data-page="fin-backfill"]) .bf-log th{position:sticky;top:0;z-index:1;background:var(--nx-bg);text-align:left;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--nx-ink3);padding:9px 11px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="fin-backfill"]) .bf-log td{padding:8px 11px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink2);vertical-align:top}
:where(:root[data-page="fin-backfill"]) .bf-log tr:last-child td{border-bottom:none}
:where(:root[data-page="fin-backfill"]) .bf-log td.fac{color:var(--nx-ink);font-weight:600;white-space:nowrap}
:where(:root[data-page="fin-backfill"]) .bf-log td.rng{white-space:nowrap;font-variant-numeric:tabular-nums}
:where(:root[data-page="fin-backfill"]) .bf-log td.note{line-height:1.5}
:where(:root[data-page="fin-backfill"]) .bf-pill{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:3px 9px;white-space:nowrap}
:where(:root[data-page="fin-backfill"]) .bf-pill.wait{background:var(--nx-hover);color:var(--nx-ink3)}
:where(:root[data-page="fin-backfill"]) .bf-pill.run{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="fin-backfill"]) .bf-pill.ok{background:var(--nx-up-bg);color:var(--nx-up)}
:where(:root[data-page="fin-backfill"]) .bf-pill.fail{background:var(--nx-down-bg);color:var(--nx-down)}
:where(:root[data-page="fin-backfill"]) .bf-pill.skip{background:var(--nx-warn-bg);color:var(--nx-warn)}
:where(:root[data-page="fin-backfill"]) .bf-pill.stop{background:var(--nx-hover);color:var(--nx-ink3)}
:where(:root[data-page="fin-backfill"]) .bf-empty{padding:26px;text-align:center;color:var(--nx-ink3);font-size:12.5px}

/* Toast - styled, never a browser alert */
:where(:root[data-page="fin-backfill"]) .bf-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);opacity:0;pointer-events:none;
  max-width:min(680px,92vw);background:var(--nx-elev);border:1px solid var(--nx-line2);
  border-left:4px solid var(--brand);border-radius:12px;padding:12px 16px;font-size:12.5px;
  line-height:1.55;color:var(--nx-ink);box-shadow:0 14px 40px rgba(27,29,41,.20);
  transition:opacity .2s ease,transform .2s ease;z-index:80}
:where(:root[data-page="fin-backfill"]) .bf-toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
:where(:root[data-page="fin-backfill"]) .bf-toast.err{border-left-color:var(--nx-down)}
:where(:root[data-page="fin-backfill"]) .bf-toast.ok{border-left-color:var(--nx-up)}

/* Confirm - styled, never window.confirm */
:where(:root[data-page="fin-backfill"]) .bf-back{position:fixed;inset:0;background:rgba(15,17,25,.44);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:90}
:where(:root[data-page="fin-backfill"]) .bf-back.open{opacity:1;pointer-events:auto}
:where(:root[data-page="fin-backfill"]) .bf-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%);opacity:0;pointer-events:none;
  width:min(520px,94vw);background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:16px;
  box-shadow:0 26px 70px rgba(15,17,25,.34);z-index:91;transition:opacity .18s ease,transform .18s ease}
:where(:root[data-page="fin-backfill"]) .bf-modal.open{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
:where(:root[data-page="fin-backfill"]) .bf-modal h3{margin:0;padding:17px 20px 0;font-size:14.5px;font-weight:700}
:where(:root[data-page="fin-backfill"]) .bf-modal .body{padding:9px 20px 4px;font-size:12.5px;color:var(--nx-ink2);line-height:1.6}
:where(:root[data-page="fin-backfill"]) .bf-modal .foot{display:flex;justify-content:flex-end;gap:9px;padding:16px 20px 18px}

:where(:root[data-page="fin-backfill"]) .bf-foot{font-size:11.5px;color:var(--nx-ink3);text-align:center;padding:8px 0 0;line-height:1.6}


/* ----------------------------------------------------------------------------
 * 15.12  Support -- Get help
 * support/help.php, data-page="help"
 * -------------------------------------------------------------------------- */
:root:where([data-page="help"]){
  --brand:var(--blue);--brand-lt:var(--blue-lt);   /* --blue is CareRite GREEN */
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="help"]){
  --brand:#1FB866;--brand-lt:#13361F;color-scheme:dark;
}
:where(:root[data-page="help"]) *, *:where([data-page="help"]){box-sizing:border-box}
html:where([data-page="help"]),:where(:root[data-page="help"]) body{height:100%;margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px}
:where(:root[data-page="help"]) button{font-family:inherit}
:where(:root[data-page="help"]) .nx-app{display:grid;grid-template-columns:248px 1fr;min-height:calc(100vh - 24px);max-width:1760px;margin:12px;background:var(--nx-surface);border-radius:18px;overflow:hidden;box-shadow:0 16px 48px rgba(27,29,41,.10);border:1px solid var(--nx-line)}
@media(min-width:1784px){:where(:root[data-page="help"]) .nx-app{margin:12px auto}}
@media(max-width:980px){:where(:root[data-page="help"]) .nx-app{grid-template-columns:1fr;margin:0;border-radius:0;border:none;min-height:100vh}}
:where(:root[data-page="help"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px}
@media(max-width:980px){:where(:root[data-page="help"]) .nx-rail{display:none}}
:where(:root[data-page="help"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="help"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#04a85a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
:where(:root[data-page="help"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="help"]) .nx-navsec{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--nx-ink3);padding:14px 8px 6px}
:where(:root[data-page="help"]) .nx-nav{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--nx-ink2);font-weight:500;font-size:13px}
:where(:root[data-page="help"]) .nx-nav svg{width:16px;height:16px;flex:none;color:var(--nx-ink3)}
:where(:root[data-page="help"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="help"]) .nx-nav.active{background:var(--brand-lt);color:var(--brand);font-weight:600}
:where(:root[data-page="help"]) .nx-nav.active svg{color:var(--brand)}
:where(:root[data-page="help"]) .nx-nav .nx-badge{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--nx-line2);color:var(--nx-ink2);border-radius:8px;padding:1px 7px}
:where(:root[data-page="help"]) .nx-rail-foot{margin-top:auto;padding-top:14px}
:where(:root[data-page="help"]) .nx-main{display:flex;flex-direction:column;min-width:0}
:where(:root[data-page="help"]) .nx-topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="help"]) .nx-search{display:flex;align-items:center;gap:8px;background:var(--nx-hover);border:1px solid var(--nx-line);border-radius:10px;padding:8px 12px;color:var(--nx-ink3);width:280px;max-width:100%}
:where(:root[data-page="help"]) .nx-search input{border:0;background:transparent;outline:none;font:inherit;color:var(--nx-ink);width:100%}
:where(:root[data-page="help"]) .nx-search svg{width:15px;height:15px;flex:none}
:where(:root[data-page="help"]) .nx-top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
:where(:root[data-page="help"]) .nx-pbtn{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:9px;padding:7px 13px;font-weight:600;font-size:12.5px;cursor:pointer}
:where(:root[data-page="help"]) .nx-pbtn:hover{background:var(--nx-hover)}
:where(:root[data-page="help"]) .nx-theme-btn{border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:9px;width:34px;height:34px;cursor:pointer;color:var(--nx-ink2);display:flex;align-items:center;justify-content:center}
:where(:root[data-page="help"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="help"]) .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="help"]) .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="help"]) .nx-ic-moon{display:block}
:where(:root[data-page="help"]) .nx-user-av{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
:where(:root[data-page="help"]) .nx-scroll{padding:22px;overflow:auto;flex:1}
:where(:root[data-page="help"]) .nx-pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
:where(:root[data-page="help"]) .nx-h1{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0}
:where(:root[data-page="help"]) .nx-sub{color:var(--nx-ink2);font-size:12.5px;margin-top:2px}
:where(:root[data-page="help"]) .nx-card{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);overflow:hidden}
:where(:root[data-page="help"]) .nx-card-head{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="help"]) .nx-card-ic{color:var(--brand);display:flex}:where(:root[data-page="help"]) .nx-card-ic svg{width:16px;height:16px}
:where(:root[data-page="help"]) .nx-card-title{font-weight:700;font-size:13.5px}

/* ── The list ─────────────────────────────────────────────────────────── */
:where(:root[data-page="help"]) .sh-filters{display:flex;align-items:center;gap:6px;margin-left:auto}
:where(:root[data-page="help"]) .sh-chip{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);border-radius:999px;padding:5px 13px;font-size:12px;font-weight:600;cursor:pointer}
:where(:root[data-page="help"]) .sh-chip:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="help"]) .sh-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="help"]) .sh-table{width:100%;border-collapse:collapse}
:where(:root[data-page="help"]) .sh-table th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-ink3);padding:10px 14px;border-bottom:1px solid var(--nx-line);white-space:nowrap}
:where(:root[data-page="help"]) .sh-table td{padding:13px 14px;border-bottom:1px solid var(--nx-line);vertical-align:top;font-size:13px}
:where(:root[data-page="help"]) .sh-table tbody tr{cursor:pointer}
:where(:root[data-page="help"]) .sh-table tbody tr:hover{background:var(--nx-hover)}
:where(:root[data-page="help"]) .sh-table tbody tr.sel{background:var(--brand-lt)}
:where(:root[data-page="help"]) .sh-ref{font-size:11.5px;font-weight:700;color:var(--nx-ink3);letter-spacing:.02em;white-space:nowrap}
:where(:root[data-page="help"]) .sh-subj{font-weight:600;color:var(--nx-ink)}
:where(:root[data-page="help"]) .sh-snip{color:var(--nx-ink2);font-size:12px;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:where(:root[data-page="help"]) .sh-who{white-space:nowrap}
:where(:root[data-page="help"]) .sh-who-e{color:var(--nx-ink3);font-size:11.5px;margin-top:2px}
:where(:root[data-page="help"]) .sh-when{color:var(--nx-ink2);font-size:12px;white-space:nowrap}
:where(:root[data-page="help"]) .sh-pill{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:700;white-space:nowrap}
:where(:root[data-page="help"]) .sh-pill.open{background:#FFF2DC;color:#8A5B00}
:where(:root[data-page="help"]) .sh-pill.done{background:var(--brand-lt);color:var(--brand)}
:root[data-theme="dark"]:where([data-page="help"]) .sh-pill.open{background:#3A2C10;color:#F0B95B}
:where(:root[data-page="help"]) .sh-clip{display:inline-flex;align-items:center;gap:4px;color:var(--nx-ink3);font-size:11.5px;font-weight:600}
:where(:root[data-page="help"]) .sh-clip svg{width:13px;height:13px}
:where(:root[data-page="help"]) .sh-empty{padding:46px 20px;text-align:center;color:var(--nx-ink2)}
:where(:root[data-page="help"]) .sh-empty svg{width:34px;height:34px;color:var(--nx-ink3);margin-bottom:10px}

/* ── The ticket, opened ───────────────────────────────────────────────── */
:where(:root[data-page="help"]) .sh-scrim{position:fixed;inset:0;background:rgba(14,16,24,.42);z-index:900;display:none}
:where(:root[data-page="help"]) .sh-scrim.open{display:block}
:where(:root[data-page="help"]) .sh-panel{position:fixed;top:0;right:0;bottom:0;width:560px;max-width:100vw;background:var(--nx-surface);border-left:1px solid var(--nx-line);z-index:901;transform:translateX(100%);transition:transform .2s ease;display:flex;flex-direction:column}
:where(:root[data-page="help"]) .sh-panel.open{transform:none}
:where(:root[data-page="help"]) .sh-panel-head{display:flex;align-items:flex-start;gap:12px;padding:20px 22px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="help"]) .sh-panel-x{margin-left:auto;border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:9px;width:30px;height:30px;cursor:pointer;color:var(--nx-ink2);font-size:16px;line-height:1;flex:none}
:where(:root[data-page="help"]) .sh-panel-x:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="help"]) .sh-panel-body{padding:22px;overflow:auto;flex:1}
:where(:root[data-page="help"]) .sh-facts{border:1px solid var(--nx-line);border-radius:var(--nx-radius-sm);overflow:hidden;margin-bottom:18px}
:where(:root[data-page="help"]) .sh-fact{display:flex;gap:14px;padding:10px 14px;border-bottom:1px solid var(--nx-line);font-size:12.5px}
:where(:root[data-page="help"]) .sh-fact:last-child{border-bottom:none}
:where(:root[data-page="help"]) .sh-fact-k{color:var(--nx-ink3);width:110px;flex:none;font-weight:600}
:where(:root[data-page="help"]) .sh-fact-v{color:var(--nx-ink);min-width:0;word-break:break-word}
:where(:root[data-page="help"]) .sh-label{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-ink3);margin:0 0 8px}
:where(:root[data-page="help"]) .sh-body-text{white-space:pre-wrap;line-height:1.65;background:var(--nx-hover);border:1px solid var(--nx-line);border-radius:var(--nx-radius-sm);padding:14px 16px;font-size:13px}
:where(:root[data-page="help"]) .sh-files{display:flex;flex-direction:column;gap:7px}
:where(:root[data-page="help"]) .sh-file{display:flex;align-items:center;gap:9px;border:1px solid var(--nx-line2);border-radius:10px;padding:9px 12px;text-decoration:none;color:var(--nx-ink);font-size:12.5px;font-weight:500}
:where(:root[data-page="help"]) .sh-file:hover{background:var(--nx-hover)}
:where(:root[data-page="help"]) .sh-file svg{width:15px;height:15px;color:var(--nx-ink3);flex:none}
:where(:root[data-page="help"]) .sh-file-sz{margin-left:auto;color:var(--nx-ink3);font-size:11.5px;white-space:nowrap}
:where(:root[data-page="help"]) .sh-file.sh-book{border-color:var(--brand);color:var(--brand);background:var(--brand-lt)}
:where(:root[data-page="help"]) .sh-file.sh-book svg{color:var(--brand)}
:where(:root[data-page="help"]) .sh-file.sh-book:hover{filter:brightness(.97)}
:where(:root[data-page="help"]) .sh-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
:where(:root[data-page="help"]) .sh-shots a{display:block;border:1px solid var(--nx-line2);border-radius:10px;overflow:hidden;line-height:0}
:where(:root[data-page="help"]) .sh-shots img{width:100%;height:110px;object-fit:cover;display:block}
:where(:root[data-page="help"]) .sh-panel-foot{display:flex;align-items:center;gap:9px;padding:14px 22px;border-top:1px solid var(--nx-line);background:var(--nx-rail)}
:where(:root[data-page="help"]) .sh-btn{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:9px;padding:8px 15px;font-weight:600;font-size:12.5px;cursor:pointer;text-decoration:none;display:inline-block}
:where(:root[data-page="help"]) .sh-btn:hover{background:var(--nx-hover)}
:where(:root[data-page="help"]) .sh-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="help"]) .sh-btn.primary:hover{filter:brightness(1.06)}
:where(:root[data-page="help"]) .sh-btn.danger{color:var(--red-text);border-color:#F0C7C5}
:where(:root[data-page="help"]) .sh-btn.danger:hover{background:#FDECEA}
:root[data-theme="dark"]:where([data-page="help"]) .sh-btn.danger{color:#F08B86;border-color:#4A2422}
:root[data-theme="dark"]:where([data-page="help"]) .sh-btn.danger:hover{background:#2A1615}
:where(:root[data-page="help"]) .sh-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);color:#fff;padding:11px 18px;border-radius:9px;font-size:13px;display:none;z-index:1100;box-shadow:0 8px 28px rgba(0,0,0,.22)}
:where(:root[data-page="help"]) .sh-toast.show{display:block}

/* The confirm box. The portal never uses the browser's own. */
:where(:root[data-page="help"]) .sh-ask{position:fixed;inset:0;background:rgba(14,16,24,.42);z-index:1000;display:none;align-items:center;justify-content:center;padding:16px}
:where(:root[data-page="help"]) .sh-ask.open{display:flex}
:where(:root[data-page="help"]) .sh-ask-box{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:24px;width:400px;max-width:100%}
:where(:root[data-page="help"]) .sh-ask-t{font-size:15px;font-weight:700;margin-bottom:7px}
:where(:root[data-page="help"]) .sh-ask-s{font-size:13px;color:var(--nx-ink2);line-height:1.6}
:where(:root[data-page="help"]) .sh-ask-a{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}


/* ----------------------------------------------------------------------------
 * 15.13  Accounting -- Pivot check
 * accounting/pivot-check.php, data-page="pivot-check"
 * -------------------------------------------------------------------------- */
/* ==== Nexus theme tokens (same set the other portal pages use) ==== */
:root:where([data-page="pivot-check"]){
  --nx-attn:#B8860B;--nx-attn-bg:#FDF6E3;--nx-attn-line:#EFE0B5;
  --brand:var(--blue);--brand-lt:var(--blue-lt);
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="pivot-check"]){
  --nx-up:#34D27B;--nx-up-bg:#16301F;
  --nx-down:#F4756B;--nx-down-bg:#3A1E1C;
  --nx-attn:#E8C25A;--nx-attn-bg:#2A2510;--nx-attn-line:#4A411C;
  --brand:#1FB866;--brand-lt:#13361F;
  --blue:#1FB866;--blue-dk:#13361F;--blue-lt:#15301F;
  color-scheme:dark;
}
:where(:root[data-page="pivot-check"]) *, *:where([data-page="pivot-check"]){box-sizing:border-box}
html:where([data-page="pivot-check"]),:where(:root[data-page="pivot-check"]) body{height:100%;margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px}
:where(:root[data-page="pivot-check"]) button,:where(:root[data-page="pivot-check"]) input,:where(:root[data-page="pivot-check"]) select{font-family:inherit}

/* App frame */
:where(:root[data-page="pivot-check"]) .nx-app{display:grid;grid-template-columns:248px 1fr;height:calc(100vh - 24px);max-width:1760px;margin:12px;background:var(--nx-surface);border-radius:18px;overflow:hidden;box-shadow:0 16px 48px rgba(27,29,41,.10);border:1px solid var(--nx-line)}
@media(min-width:1784px){:where(:root[data-page="pivot-check"]) .nx-app{margin:12px auto}}
@media(max-width:980px){:where(:root[data-page="pivot-check"]) .nx-app{grid-template-columns:1fr;margin:0;border-radius:0;border:none;height:100vh}}
:where(:root[data-page="pivot-check"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px}
@media(max-width:980px){:where(:root[data-page="pivot-check"]) .nx-rail{display:none}}
:where(:root[data-page="pivot-check"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="pivot-check"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#04a85a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
:where(:root[data-page="pivot-check"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="pivot-check"]) .nx-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--nx-ink2);text-decoration:none;font-size:13px;font-weight:500}
:where(:root[data-page="pivot-check"]) .nx-nav svg{width:17px;height:17px;color:var(--nx-ink3)}
:where(:root[data-page="pivot-check"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="pivot-check"]) .nx-nav.active{background:var(--brand);color:#fff}
:where(:root[data-page="pivot-check"]) .nx-nav.active svg{color:#fff}
:where(:root[data-page="pivot-check"]) .nx-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
:where(:root[data-page="pivot-check"]) .nx-topbar{display:flex;align-items:center;gap:10px;padding:14px 22px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="pivot-check"]) .nx-topbar-title{font-size:14px;font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="pivot-check"]) .nx-top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
:where(:root[data-page="pivot-check"]) .nx-pbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);border-radius:10px;padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:none}
:where(:root[data-page="pivot-check"]) .nx-pbtn:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="pivot-check"]) .nx-pbtn svg{width:14px;height:14px}
:where(:root[data-page="pivot-check"]) .nx-theme-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);display:flex;align-items:center;justify-content:center;cursor:pointer}
:where(:root[data-page="pivot-check"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="pivot-check"]) .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="pivot-check"]) .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="pivot-check"]) .nx-ic-moon{display:block}
:where(:root[data-page="pivot-check"]) .nx-scroll{flex:1;min-height:0;overflow:auto;padding:20px 22px 22px;display:flex;flex-direction:column}
:where(:root[data-page="pivot-check"]) .nx-h1{font-size:22px;font-weight:800;letter-spacing:-.03em;margin:0 0 4px}
:where(:root[data-page="pivot-check"]) .nx-sub{font-size:12.5px;color:var(--nx-ink3);margin-bottom:16px}
:where(:root[data-page="pivot-check"]) .nx-card{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:var(--nx-radius);overflow:hidden}
:where(:root[data-page="pivot-check"]) .nx-card-head{display:flex;align-items:center;gap:10px;padding:13px 17px;border-bottom:1px solid var(--nx-line);flex:0 0 auto}
:where(:root[data-page="pivot-check"]) .nx-card-title{font-size:13.5px;font-weight:700}
:where(:root[data-page="pivot-check"]) .nx-card-right{margin-left:auto;display:flex;align-items:center;gap:8px}
:where(:root[data-page="pivot-check"]) .nx-tag{font-size:11px;font-weight:600;color:var(--nx-ink3);background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:7px;padding:3px 8px}

/* The equation: 1 + 2 - 3 - 4 = difference */
:where(:root[data-page="pivot-check"]) .pc-eq{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:8px;margin-bottom:14px;flex:0 0 auto}
@media(max-width:1100px){:where(:root[data-page="pivot-check"]) .pc-eq{grid-template-columns:1fr 1fr;}:where(:root[data-page="pivot-check"]) .pc-op{display:none!important}}
:where(:root[data-page="pivot-check"]) .pc-kpi{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:14px;padding:12px 14px;min-width:0}
:where(:root[data-page="pivot-check"]) .pc-kpi-l{font-size:11.5px;font-weight:600;color:var(--nx-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:help}
:where(:root[data-page="pivot-check"]) .pc-kpi-d{font-size:11px;color:var(--nx-ink3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="pivot-check"]) .pc-kpi-v{font-size:22px;font-weight:800;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums}
:where(:root[data-page="pivot-check"]) .pc-kpi-s{font-size:11.5px;color:var(--nx-ink3);margin-top:2px;font-variant-numeric:tabular-nums}
:where(:root[data-page="pivot-check"]) .pc-kpi.res.ok{border-color:var(--nx-up);background:var(--nx-up-bg)}
:where(:root[data-page="pivot-check"]) .pc-kpi.res.ok .pc-kpi-v{color:var(--nx-up)}
:where(:root[data-page="pivot-check"]) .pc-kpi.res.bad{border-color:var(--nx-attn-line);background:var(--nx-attn-bg)}
:where(:root[data-page="pivot-check"]) .pc-kpi.res.bad .pc-kpi-v{color:var(--nx-attn)}
:where(:root[data-page="pivot-check"]) .pc-op{display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--nx-ink3);width:14px}

/* Toolbar */
:where(:root[data-page="pivot-check"]) .pc-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;flex:0 0 auto}
:where(:root[data-page="pivot-check"]) .pc-month{display:inline-flex;align-items:center;border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:10px;overflow:hidden}
:where(:root[data-page="pivot-check"]) .pc-month button{border:none;background:none;width:30px;height:32px;color:var(--nx-ink2);cursor:pointer;display:flex;align-items:center;justify-content:center}
:where(:root[data-page="pivot-check"]) .pc-month button:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="pivot-check"]) .pc-month button:disabled{opacity:.35;cursor:default;background:none}
:where(:root[data-page="pivot-check"]) .pc-month button svg{width:13px;height:13px}
:where(:root[data-page="pivot-check"]) .pc-month input{border:none;border-left:1px solid var(--nx-line);border-right:1px solid var(--nx-line);background:transparent;color:var(--nx-ink);font-size:12.5px;font-weight:700;height:32px;padding:0 8px;outline:none}
:where(:root[data-page="pivot-check"]) .pc-seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--nx-line2);background:var(--nx-rail);border-radius:10px}
:where(:root[data-page="pivot-check"]) .pc-seg button{border:none;background:none;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;color:var(--nx-ink2);cursor:pointer}
:where(:root[data-page="pivot-check"]) .pc-seg button.on{background:var(--nx-surface);color:var(--nx-ink);box-shadow:0 1px 3px rgba(27,29,41,.10)}
:where(:root[data-page="pivot-check"]) .pc-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--nx-ink2);cursor:pointer;user-select:none;border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:10px;padding:6px 11px}
:where(:root[data-page="pivot-check"]) .pc-toggle:hover{background:var(--nx-hover)}
:where(:root[data-page="pivot-check"]) .pc-box{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--nx-line2);background:var(--nx-surface);display:inline-flex;align-items:center;justify-content:center}
:where(:root[data-page="pivot-check"]) .pc-toggle.on .pc-box{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="pivot-check"]) .pc-box svg{width:9px;height:9px;color:#fff;opacity:0}
:where(:root[data-page="pivot-check"]) .pc-toggle.on .pc-box svg{opacity:1}
:where(:root[data-page="pivot-check"]) .pc-fac{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:10px;padding:0 10px;height:34px;font-size:12.5px;font-weight:600;max-width:300px}
:where(:root[data-page="pivot-check"]) body.embed .pc-fac{display:none}
:where(:root[data-page="pivot-check"]) .pc-code-sel{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:10px;padding:0 10px;height:34px;font-size:12.5px;font-weight:600;max-width:180px}
:where(:root[data-page="pivot-check"]) .pc-code-sel.on{border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="pivot-check"]) .pc-note{display:flex;gap:8px;align-items:flex-start;background:var(--nx-attn-bg);border:1px solid var(--nx-attn-line);color:var(--nx-attn);border-radius:11px;padding:9px 12px;font-size:12px;font-weight:600;margin-bottom:12px;flex:0 0 auto}
:where(:root[data-page="pivot-check"]) .pc-note svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px}

/* Grid */
:where(:root[data-page="pivot-check"]) .pc-grid-card{flex:1;min-height:260px;display:flex;flex-direction:column}
:where(:root[data-page="pivot-check"]) .pc-wrap{overflow:auto;flex:1;min-height:0}
:where(:root[data-page="pivot-check"]) .pc-table{border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums}
:where(:root[data-page="pivot-check"]) .pc-table th,:where(:root[data-page="pivot-check"]) .pc-table td{white-space:nowrap}
:where(:root[data-page="pivot-check"]) .pc-table thead th{position:sticky;top:0;z-index:5;background:var(--nx-rail);color:var(--nx-ink3);font-size:11.5px;font-weight:600;cursor:help;border-bottom:1px solid var(--nx-line);padding:8px 12px;text-align:right;vertical-align:bottom}
:where(:root[data-page="pivot-check"]) .pc-table thead th .m{display:block;text-transform:none;letter-spacing:0;font-size:10.5px;font-weight:600;color:var(--nx-ink3);margin-top:2px}
:where(:root[data-page="pivot-check"]) .pc-table thead th.l{text-align:left}
:where(:root[data-page="pivot-check"]) .pc-table thead th.diff{border-left:2px solid var(--nx-line2);color:var(--nx-ink)}
:where(:root[data-page="pivot-check"]) .pc-table tbody td{padding:7px 12px;font-size:12px;color:var(--nx-ink2);text-align:right;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="pivot-check"]) .pc-table tbody td.l{text-align:left}
:where(:root[data-page="pivot-check"]) .pc-table tbody td.diff{border-left:2px solid var(--nx-line2);font-weight:700}
:where(:root[data-page="pivot-check"]) .pc-fac-row td{background:var(--nx-rail)!important;color:var(--nx-ink)!important;font-weight:700;border-top:1px solid var(--nx-line2)}
:where(:root[data-page="pivot-check"]) .pc-fac-row td.l{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-ink3)!important}
:where(:root[data-page="pivot-check"]) .pc-dept{cursor:pointer}
:where(:root[data-page="pivot-check"]) .pc-dept:hover td{background:var(--nx-hover)}
:where(:root[data-page="pivot-check"]) .pc-dept td{color:var(--nx-ink)}
:where(:root[data-page="pivot-check"]) .pc-dname{display:flex;align-items:center;gap:7px;font-weight:600}
:where(:root[data-page="pivot-check"]) .pc-chev{width:12px;height:12px;color:var(--nx-ink3);transition:transform .15s;flex:0 0 auto}
:where(:root[data-page="pivot-check"]) .pc-dept.open .pc-chev{transform:rotate(90deg);color:var(--brand)}
:where(:root[data-page="pivot-check"]) .pc-cc{font-size:10.5px;font-weight:700;color:var(--nx-ink3);background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:6px;padding:1px 5px}
:where(:root[data-page="pivot-check"]) .pc-code td{background:var(--nx-rail);font-size:11.5px;padding:5px 12px}
:where(:root[data-page="pivot-check"]) .pc-code td.l{padding-left:38px;box-shadow:inset 2px 0 0 var(--brand)}
:where(:root[data-page="pivot-check"]) .pc-z{color:var(--nx-ink3);font-weight:400}
:where(:root[data-page="pivot-check"]) .pc-dv{display:inline-block;border-radius:6px;padding:1px 7px}
:where(:root[data-page="pivot-check"]) .pc-dv.bad{background:var(--nx-attn-bg);color:var(--nx-attn);cursor:pointer;border:1px solid var(--nx-attn-line)}
:where(:root[data-page="pivot-check"]) .pc-dv.bad:hover{filter:brightness(.96)}
:where(:root[data-page="pivot-check"]) .pc-dv.ok{color:var(--nx-up)}
:where(:root[data-page="pivot-check"]) .pc-table tfoot td{position:sticky;bottom:0;z-index:4;background:var(--nx-rail);padding:9px 12px;font-size:12px;font-weight:800;color:var(--nx-ink);border-top:2px solid var(--nx-line2);text-align:right}
:where(:root[data-page="pivot-check"]) .pc-table tfoot td.l{text-align:left}
:where(:root[data-page="pivot-check"]) .pc-table tfoot td.diff{border-left:2px solid var(--nx-line2)}
:where(:root[data-page="pivot-check"]) .pc-empty{padding:40px 18px;text-align:center;color:var(--nx-ink3);font-size:13px}
:where(:root[data-page="pivot-check"]) .pc-empty b{display:block;color:var(--nx-ink);font-size:14px;margin-bottom:4px}

/* Detail modal */
:where(:root[data-page="pivot-check"]) .pc-modal-bg{position:fixed;inset:0;background:rgba(12,14,20,.45);z-index:500;display:none;align-items:center;justify-content:center;padding:24px}
:where(:root[data-page="pivot-check"]) .pc-modal-bg.open{display:flex}
:where(:root[data-page="pivot-check"]) .pc-modal{background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.25);width:min(1040px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;overflow:hidden}
:where(:root[data-page="pivot-check"]) .pc-modal-head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="pivot-check"]) .pc-modal-t{font-size:15px;font-weight:800;letter-spacing:-.02em}
:where(:root[data-page="pivot-check"]) .pc-modal-s{font-size:12px;color:var(--nx-ink3);margin-top:3px}
:where(:root[data-page="pivot-check"]) .pc-x{margin-left:auto;border:none;background:none;width:30px;height:30px;border-radius:8px;color:var(--nx-ink3);cursor:pointer;font-size:18px}
:where(:root[data-page="pivot-check"]) .pc-x:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="pivot-check"]) .pc-modal-body{overflow:auto;padding:14px 18px 18px}
:where(:root[data-page="pivot-check"]) .pc-why{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
:where(:root[data-page="pivot-check"]) .pc-why div{border:1px solid var(--nx-line2);border-radius:10px;padding:7px 11px;font-size:12px;color:var(--nx-ink2)}
:where(:root[data-page="pivot-check"]) .pc-why b{font-size:13px;color:var(--nx-ink);font-variant-numeric:tabular-nums;margin-right:6px}
:where(:root[data-page="pivot-check"]) .pc-dt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
:where(:root[data-page="pivot-check"]) .pc-dt th{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3);text-align:left;padding:7px 9px;border-bottom:1px solid var(--nx-line);background:var(--nx-rail);position:sticky;top:-14px}
:where(:root[data-page="pivot-check"]) .pc-dt td{font-size:12px;padding:6px 9px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink2)}
:where(:root[data-page="pivot-check"]) .pc-dt .r{text-align:right}
:where(:root[data-page="pivot-check"]) .pc-chip{font-size:10px;font-weight:700;border-radius:6px;padding:2px 7px;white-space:nowrap}
:where(:root[data-page="pivot-check"]) .pc-chip.in{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="pivot-check"]) .pc-chip.out{background:var(--nx-down-bg);color:var(--nx-down)}

:where(:root[data-page="pivot-check"]) .pc-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(14px);background:var(--nx-ink);color:var(--nx-surface);font-size:12.5px;font-weight:600;padding:10px 16px;border-radius:11px;opacity:0;transition:opacity .18s,transform .18s;z-index:900;pointer-events:none}
:where(:root[data-page="pivot-check"]) .pc-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
:where(:root[data-page="pivot-check"]) .pc-toast.err{background:var(--nx-down);color:#fff}

/* ==== Inside the Accounting dashboard frame ==== */
html.cr-embed:where([data-page="pivot-check"]),:where(:root[data-page="pivot-check"]) body.embed{height:100%;overflow:hidden;background:var(--nx-surface)}
:where(:root[data-page="pivot-check"]) body.embed .nx-app{margin:0;border:none;border-radius:0;height:100%;max-width:none;grid-template-columns:1fr;box-shadow:none}
:where(:root[data-page="pivot-check"]) body.embed .nx-rail,:where(:root[data-page="pivot-check"]) body.embed .nx-topbar,:where(:root[data-page="pivot-check"]) body.embed .pc-head{display:none}


/* ----------------------------------------------------------------------------
 * 15.14  AP -- Projects
 * ap/projects.php, data-page="projects"
 * -------------------------------------------------------------------------- */
:where(:root[data-page="projects"]) .sb-subname{font-size:11px;font-weight:500;color:var(--text3);letter-spacing:-.01em;margin-top:1px}

/* ── Square-ish labels (override pill radii) ─────────────── */
:where(:root[data-page="projects"]) .badge{border-radius:4px}

/* ── Project cards (list) ────────────────────────────────── */
:where(:root[data-page="projects"]) .pj-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border)}
:where(:root[data-page="projects"]) .pj-tab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;padding:8px 14px;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--text3);cursor:pointer;letter-spacing:-.01em;transition:color .12s,border-color .12s;margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px}
:where(:root[data-page="projects"]) .pj-tab:hover{color:var(--text2)}
:where(:root[data-page="projects"]) .pj-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
:where(:root[data-page="projects"]) .pj-tab-count{font-size:10.5px;font-weight:700;color:var(--text3);background:var(--bg);border-radius:999px;padding:1px 7px;min-width:18px;text-align:center}
:where(:root[data-page="projects"]) .pj-tab.active .pj-tab-count{background:var(--blue-lt);color:var(--blue)}
:where(:root[data-page="projects"]) .pj-card{display:flex;align-items:center;gap:14px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--nx-surface);padding:13px 16px;margin-bottom:8px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
:where(:root[data-page="projects"]) .pj-card:hover{border-color:var(--border2);box-shadow:0 1px 3px rgba(0,0,0,.05)}
:where(:root[data-page="projects"]) .pj-card-body{flex:1;min-width:0}
:where(:root[data-page="projects"]) .pj-card-name{font-weight:600;font-size:14px;color:var(--text);letter-spacing:-.01em}
:where(:root[data-page="projects"]) .pj-card-meta{font-size:11px;color:var(--text3);margin-top:3px}
:where(:root[data-page="projects"]) .pj-card-bars{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
:where(:root[data-page="projects"]) .pj-mini{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.01em;padding:2px 8px;border-radius:4px;white-space:nowrap}
:where(:root[data-page="projects"]) .pj-mini .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
:where(:root[data-page="projects"]) .pj-mini.not_started{background:#ECEDEF;color:#5F6368}
:where(:root[data-page="projects"]) .pj-mini.not_started .dot{background:#9AA0A6}
:where(:root[data-page="projects"]) .pj-mini.in_progress{background:var(--amber-lt);color:var(--amber-text)}
:where(:root[data-page="projects"]) .pj-mini.in_progress .dot{background:var(--amber)}
:where(:root[data-page="projects"]) .pj-mini.completed{background:var(--green-lt);color:var(--green)}
:where(:root[data-page="projects"]) .pj-mini.completed .dot{background:var(--green)}
:where(:root[data-page="projects"]) .pj-card-actions{display:flex;align-items:center;gap:5px;flex-shrink:0}
:where(:root[data-page="projects"]) .pj-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;padding:0;border:1.5px solid var(--border);border-radius:6px;background:var(--nx-surface);color:var(--text2);cursor:pointer;transition:border-color .12s,color .12s,background .12s}
:where(:root[data-page="projects"]) .pj-icon-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-lt)}
:where(:root[data-page="projects"]) .pj-icon-btn.danger:hover{border-color:var(--red);color:var(--red);background:var(--red-lt)}
:where(:root[data-page="projects"]) .pj-icon-btn svg{width:14px;height:14px}

/* ── Detail header ───────────────────────────────────────── */
:where(:root[data-page="projects"]) .pj-detail-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
:where(:root[data-page="projects"]) .pj-back{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;border:1.5px solid var(--border);background:var(--nx-surface);border-radius:var(--radius);padding:6px 11px;transition:all .12s}
:where(:root[data-page="projects"]) .pj-back:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-lt)}
:where(:root[data-page="projects"]) .pj-back svg{width:13px;height:13px}
:where(:root[data-page="projects"]) .pj-title-name{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.02em}

/* ── Facility rows as separate boxes ─────────────────────── */
:where(:root[data-page="projects"]) #page-detail table{border-collapse:separate;border-spacing:0 7px}
:where(:root[data-page="projects"]) #detailFacBody td{padding:11px 14px;vertical-align:top;border-top:1px solid #EEF0F2;border-bottom:1px solid #EEF0F2;background:var(--nx-surface)}
:where(:root[data-page="projects"]) #detailFacBody td:first-child{border-left:1px solid #EEF0F2;border-top-left-radius:7px;border-bottom-left-radius:7px}
:where(:root[data-page="projects"]) #detailFacBody td:last-child{border-right:1px solid #EEF0F2;border-top-right-radius:7px;border-bottom-right-radius:7px}
:where(:root[data-page="projects"]) #detailFacBody td.mid{vertical-align:middle}
:where(:root[data-page="projects"]) .pj-fac-name{font-weight:600;color:var(--text);font-size:12.5px;letter-spacing:-.01em}
:where(:root[data-page="projects"]) .fac-check{width:14px;height:14px;accent-color:var(--blue);cursor:pointer}
:where(:root[data-page="projects"]) #detailFacBody tr{cursor:pointer;-webkit-user-select:none;user-select:none}
/* but keep the notes textarea selectable/editable */
:where(:root[data-page="projects"]) #detailFacBody .note-input{-webkit-user-select:text;user-select:text}
:where(:root[data-page="projects"]) #detailFacBody tr.row-sel td{background:#D4EBDD;border-top-color:var(--blue);border-bottom-color:var(--blue)}
:where(:root[data-page="projects"]) #detailFacBody tr.row-sel td:first-child{border-left-color:var(--blue)}
:where(:root[data-page="projects"]) #detailFacBody tr.row-sel td:last-child{border-right-color:var(--blue)}
:where(:root[data-page="projects"]) .bulk-actions{display:flex;align-items:center;gap:9px}
/* Facility panel: transparent so the page background shows between rows,
   turning each facility row into its own white box. */
:where(:root[data-page="projects"]) .fac-panel{background:transparent;border:none;border-radius:0;overflow:visible}
:where(:root[data-page="projects"]) .fac-panel .panel-head{background:transparent;border-bottom:none;padding:0 2px 0 0;height:40px;min-height:40px;align-items:center}
:where(:root[data-page="projects"]) .fac-panel thead th{background:transparent;border-bottom:none;padding-bottom:2px}

/* Square client label */
:where(:root[data-page="projects"]) .client-label{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:10.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap}

/* Status select — squared */
:where(:root[data-page="projects"]) .pj-status-sel{appearance:none;-webkit-appearance:none;background-color:var(--nx-surface);border:1.5px solid var(--border);border-radius:4px;padding:4px 24px 4px 9px;font-size:11px;font-weight:700;font-family:var(--font);letter-spacing:.02em;cursor:pointer;background-repeat:no-repeat;background-position:right 7px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%239AA0A6' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:where(:root[data-page="projects"]) .pj-status-sel:focus{outline:none;border-color:var(--blue)}
:where(:root[data-page="projects"]) .pj-status-sel.s-not_started{background-color:#ECEDEF;color:#5F6368;border-color:#D9DBDE}
:where(:root[data-page="projects"]) .pj-status-sel.s-in_progress{background-color:var(--amber-lt);color:var(--amber-text);border-color:#F4D58A}
:where(:root[data-page="projects"]) .pj-status-sel.s-completed{background-color:var(--green-lt);color:var(--green);border-color:#A7D7B6}

/* ── Notes thread ────────────────────────────────────────── */
:where(:root[data-page="projects"]) .pj-notes-cell{min-width:300px;max-width:420px}
:where(:root[data-page="projects"]) .note-thread{display:flex;flex-direction:column;gap:5px;margin-bottom:6px}
:where(:root[data-page="projects"]) .stat.gray{border-top-color:#9AA0A6}
:where(:root[data-page="projects"]) .note-entry{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:6px 9px}
:where(:root[data-page="projects"]) .note-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:3px}
:where(:root[data-page="projects"]) .note-acts{display:flex;gap:2px;flex-shrink:0;opacity:0;transition:opacity .12s}
:where(:root[data-page="projects"]) .note-entry:hover .note-acts{opacity:1}
:where(:root[data-page="projects"]) .note-act{appearance:none;background:none;border:none;font-family:var(--font);font-size:10px;font-weight:600;color:var(--text3);cursor:pointer;padding:1px 5px;border-radius:3px}
:where(:root[data-page="projects"]) .note-act:hover{background:var(--blue-lt);color:var(--blue)}
:where(:root[data-page="projects"]) .note-act.danger:hover{background:var(--red-lt);color:var(--red)}
:where(:root[data-page="projects"]) .note-edit-input{margin-bottom:5px}
:where(:root[data-page="projects"]) .note-edit-acts{display:flex;gap:5px}
:where(:root[data-page="projects"]) .note-body{font-size:12px;color:var(--text);line-height:1.45;white-space:pre-wrap;word-break:break-word}
:where(:root[data-page="projects"]) .note-meta{font-size:10px;color:var(--text3);font-weight:500}
:where(:root[data-page="projects"]) .note-input{width:100%;box-sizing:border-box;resize:vertical;min-height:32px;max-height:160px;border:1.5px solid var(--border);border-radius:6px;padding:6px 9px;font-family:var(--font);font-size:12px;color:var(--text);background:var(--nx-surface);transition:border-color .12s;line-height:1.4}
:where(:root[data-page="projects"]) .note-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,139,70,.08)}
:where(:root[data-page="projects"]) .note-hint{font-size:9.5px;color:var(--text3);margin-top:2px}

/* ── Picker modal ────────────────────────────────────────── */
:where(:root[data-page="projects"]) .pk-modal{width:660px;max-width:96vw;max-height:90vh;display:flex;flex-direction:column;padding:0;overflow:visible}
:where(:root[data-page="projects"]) .pk-head{padding:22px 26px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
:where(:root[data-page="projects"]) .pk-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
:where(:root[data-page="projects"]) .pk-controls select{padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--nx-surface);color:var(--text);font-size:12px;font-family:var(--font);min-width:150px}
:where(:root[data-page="projects"]) .pk-controls select:focus{outline:none;border-color:var(--blue)}
:where(:root[data-page="projects"]) .pk-search{flex:1;min-width:180px;padding:7px 11px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:var(--font);font-size:12px;color:var(--text);background:var(--nx-surface)}
:where(:root[data-page="projects"]) .pk-search:focus{outline:none;border-color:var(--blue)}
:where(:root[data-page="projects"]) .pk-actions-row{display:flex;align-items:center;gap:6px;padding:12px 26px 8px;flex-shrink:0;flex-wrap:wrap}
:where(:root[data-page="projects"]) .pk-count{margin-left:auto;font-size:11px;color:var(--text3);font-weight:600}
:where(:root[data-page="projects"]) .pk-body{padding:0 26px;overflow-y:auto;flex:1 1 auto;min-height:0;scrollbar-width:thin}
:where(:root[data-page="projects"]) .pk-body::-webkit-scrollbar{width:8px}:where(:root[data-page="projects"]) .pk-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
:where(:root[data-page="projects"]) .pk-group{margin:12px 0 4px}
:where(:root[data-page="projects"]) .pk-group-head{display:flex;align-items:center;gap:9px;position:sticky;top:0;background:var(--nx-surface);padding:6px 0;z-index:1}
:where(:root[data-page="projects"]) .pk-group-title{font-size:11px;font-weight:700;letter-spacing:.01em}
:where(:root[data-page="projects"]) .pk-group-all{font-size:10.5px;font-weight:600;color:var(--blue);cursor:pointer;padding:2px 7px;border-radius:4px;border:1px solid var(--border)}
:where(:root[data-page="projects"]) .pk-group-all:hover{background:var(--blue-lt);border-color:var(--blue)}
:where(:root[data-page="projects"]) .pk-item{display:flex;align-items:center;gap:9px;padding:6px 10px;border:1.5px solid var(--border);border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--text2);font-weight:500;transition:all .1s;margin-bottom:5px;user-select:none}
:where(:root[data-page="projects"]) .pk-item:hover{border-color:var(--blue);background:var(--blue-lt)}
:where(:root[data-page="projects"]) .pk-item.checked{border-color:var(--blue);background:var(--blue-lt);color:var(--blue)}
:where(:root[data-page="projects"]) .pk-item.disabled{opacity:.55;cursor:not-allowed;background:var(--bg2)}
:where(:root[data-page="projects"]) .pk-item.disabled:hover{border-color:var(--border);background:var(--bg2)}
:where(:root[data-page="projects"]) .pk-item input[type=checkbox]{accent-color:var(--blue);width:14px;height:14px;cursor:pointer;flex-shrink:0}
:where(:root[data-page="projects"]) .pk-item .pk-fac{font-weight:600;color:inherit}
:where(:root[data-page="projects"]) .pk-item .pk-sub{font-size:10.5px;color:var(--text3);margin-left:auto;white-space:nowrap}
:where(:root[data-page="projects"]) .pk-item.checked .pk-sub{color:var(--blue)}
:where(:root[data-page="projects"]) .pk-already{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--green);background:var(--green-lt);padding:1px 6px;border-radius:4px;margin-left:auto}
:where(:root[data-page="projects"]) .pk-foot{padding:14px 26px;border-top:1px solid var(--border);background:var(--nx-surface);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;border-bottom-left-radius:var(--radius-xl);border-bottom-right-radius:var(--radius-xl)}

/* ── Activity feed ───────────────────────────────────────── */
:where(:root[data-page="projects"]) .act-row{display:grid;grid-template-columns:130px 90px 1fr 150px 150px;align-items:center;gap:14px;padding:9px 18px;border-bottom:1px solid #E8EAED;font-size:12.5px;color:var(--text);line-height:1.4}
:where(:root[data-page="projects"]) .act-row:last-child{border-bottom:none}
:where(:root[data-page="projects"]) .act-row > *{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="projects"]) .act-verb{display:inline-flex;align-items:center;gap:6px;font-weight:700}
:where(:root[data-page="projects"]) .act-verb .vdot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
:where(:root[data-page="projects"]) .act-detail{color:var(--text2)}
:where(:root[data-page="projects"]) .act-by{color:var(--text3);font-size:11.5px}
:where(:root[data-page="projects"]) .act-when{color:var(--text3);font-size:11px;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:980px){:where(:root[data-page="projects"]) .act-row{grid-template-columns:120px 1fr 150px}:where(:root[data-page="projects"]) .act-row .act-proj,:where(:root[data-page="projects"]) .act-row .act-when{display:none}}

/* ── Dashboard ───────────────────────────────────────────── */
:where(:root[data-page="projects"]) .dash-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:#ECEDEF;margin-top:8px}
:where(:root[data-page="projects"]) .dash-bar .seg{height:100%}
:where(:root[data-page="projects"]) .dash-bar .seg.not_started{background:#9AA0A6}
:where(:root[data-page="projects"]) .dash-bar .seg.in_progress{background:var(--amber)}
:where(:root[data-page="projects"]) .dash-bar .seg.completed{background:var(--green)}
:where(:root[data-page="projects"]) .client-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #F1F3F4}
:where(:root[data-page="projects"]) .client-row:last-child{border-bottom:none}
:where(:root[data-page="projects"]) .client-row .cr-name{width:170px;flex-shrink:0}
:where(:root[data-page="projects"]) .client-row .cr-bar{flex:1}
:where(:root[data-page="projects"]) .client-row .cr-counts{font-size:11px;color:var(--text3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* generic */
:where(:root[data-page="projects"]) .empty-state{text-align:center;padding:48px 24px;color:var(--text3);font-size:13px;line-height:1.6}
:where(:root[data-page="projects"]) .empty-state .es-icon{width:50px;height:50px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg);color:var(--text3)}
:where(:root[data-page="projects"]) .empty-state .es-icon svg{width:24px;height:24px}
:where(:root[data-page="projects"]) .empty-state .es-title{font-size:14px;font-weight:600;color:var(--text2);margin-bottom:4px}
:where(:root[data-page="projects"]) .loading-state{text-align:center;padding:40px 0;color:var(--text3);font-size:13px}
:where(:root[data-page="projects"]) .fac-th-actions{width:1%;white-space:nowrap}

/* ── Sidebar removed: the menu now lives in a topbar avatar dropdown. ──── */
/* The shell no longer has a sidebar child, so the main column fills it. */
:where(:root[data-page="projects"]) .shell > .main{flex:1;min-width:0}

/* Topbar brand (left side) — replaces the old sidebar header. */
:where(:root[data-page="projects"]) .pg-brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
:where(:root[data-page="projects"]) .pg-brand-icon{width:34px;height:34px;border-radius:8px;background:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--nx-on-brand);font-weight:700;font-size:15px;letter-spacing:-.02em}
:where(:root[data-page="projects"]) .pg-brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
:where(:root[data-page="projects"]) .pg-brand-name{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="projects"]) .pg-brand-name .pg-cr{color:var(--blue)}
:where(:root[data-page="projects"]) .pg-brand-sub{font-size:11.5px;font-weight:500;color:var(--text3);letter-spacing:-.01em}
:where(:root[data-page="projects"]) .topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto}

/* User menu (initials avatar + dropdown) — ported from Department Totals. */
:where(:root[data-page="projects"]) .dt-user{position:relative;flex-shrink:0}
:where(:root[data-page="projects"]) .dt-user-btn{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer;border-radius:50%}
:where(:root[data-page="projects"]) .dt-user-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--blue);color:var(--nx-on-brand);font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
:where(:root[data-page="projects"]) .dt-user-btn:hover .dt-user-avatar,
:where(:root[data-page="projects"]) .dt-user-btn:focus-visible .dt-user-avatar{box-shadow:0 0 0 3px rgba(1,139,70,.18);outline:none}
:where(:root[data-page="projects"]) .dt-user-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:212px;background:var(--nx-surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(20,22,28,.16);overflow:hidden;display:none;z-index:120;padding:6px}
:where(:root[data-page="projects"]) .dt-user.open .dt-user-pop{display:block}
:where(:root[data-page="projects"]) .dt-user-info{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:6px}
:where(:root[data-page="projects"]) .dt-user-name{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.2}
:where(:root[data-page="projects"]) .dt-user-role{font-size:11.5px;color:var(--text3);margin-top:2px}
:where(:root[data-page="projects"]) .dt-user-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 10px;border:none;background:none;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--text);text-align:left;text-decoration:none;transition:background .1s}
:where(:root[data-page="projects"]) .dt-user-item svg{width:15px;height:15px;flex-shrink:0;color:var(--text3)}
:where(:root[data-page="projects"]) .dt-user-item:hover{background:var(--surface2,#F3F4F6)}
:where(:root[data-page="projects"]) .dt-user-item:hover svg{color:var(--text)}
:where(:root[data-page="projects"]) .dt-user-pop .pg-nav.active{background:var(--surface2,#F3F4F6);color:var(--blue);font-weight:600}
:where(:root[data-page="projects"]) .dt-user-pop .pg-nav.active svg{color:var(--blue)}
:where(:root[data-page="projects"]) .dt-user-divider{height:1px;background:var(--border);margin:6px 4px}
:where(:root[data-page="projects"]) .dt-user-danger{color:var(--red,#C5221F)}
:where(:root[data-page="projects"]) .dt-user-danger svg{color:#A01711}


/* ----------------------------------------------------------------------------
 * 15.15  Accounting -- Financial review
 * accounting/financial-review.php, data-page="financial-review"
 * -------------------------------------------------------------------------- */
/* ==== Nexus theme tokens (same set the other portal pages use) ==== */
:root:where([data-page="financial-review"]){
  --nx-attn:#B8860B;--nx-attn-bg:#FDF6E3;--nx-attn-line:#EFE0B5;
  --brand:var(--blue);--brand-lt:var(--blue-lt);
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="financial-review"]){
  --nx-up:#34D27B;--nx-up-bg:#16301F;
  --nx-down:#F4756B;--nx-down-bg:#3A1E1C;
  --nx-attn:#E8C25A;--nx-attn-bg:#2A2510;--nx-attn-line:#4A411C;
  --brand:#1FB866;--brand-lt:#13361F;
  --blue:#1FB866;--blue-dk:#13361F;--blue-lt:#15301F;
  color-scheme:dark;
}
:where(:root[data-page="financial-review"]) *, *:where([data-page="financial-review"]){box-sizing:border-box}
html:where([data-page="financial-review"]),:where(:root[data-page="financial-review"]) body{height:100%;margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px}
:where(:root[data-page="financial-review"]) button,:where(:root[data-page="financial-review"]) input,:where(:root[data-page="financial-review"]) select,:where(:root[data-page="financial-review"]) textarea{font-family:inherit}

/* App frame */
:where(:root[data-page="financial-review"]) .nx-app{display:grid;grid-template-columns:248px 1fr;height:calc(100vh - 24px);max-width:1760px;margin:12px;background:var(--nx-surface);border-radius:18px;overflow:hidden;box-shadow:0 16px 48px rgba(27,29,41,.10);border:1px solid var(--nx-line)}
@media(min-width:1784px){:where(:root[data-page="financial-review"]) .nx-app{margin:12px auto}}
@media(max-width:980px){:where(:root[data-page="financial-review"]) .nx-app{grid-template-columns:1fr;margin:0;border-radius:0;border:none;height:100vh}}
:where(:root[data-page="financial-review"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px}
@media(max-width:980px){:where(:root[data-page="financial-review"]) .nx-rail{display:none}}
:where(:root[data-page="financial-review"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="financial-review"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#04a85a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
:where(:root[data-page="financial-review"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="financial-review"]) .nx-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--nx-ink2);text-decoration:none;font-size:13px;font-weight:500}
:where(:root[data-page="financial-review"]) .nx-nav svg{width:17px;height:17px;color:var(--nx-ink3)}
:where(:root[data-page="financial-review"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="financial-review"]) .nx-nav.active{background:var(--brand);color:#fff}
:where(:root[data-page="financial-review"]) .nx-nav.active svg{color:#fff}
:where(:root[data-page="financial-review"]) .nx-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
:where(:root[data-page="financial-review"]) .nx-topbar{display:flex;align-items:center;gap:10px;padding:14px 22px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="financial-review"]) .nx-topbar-title{font-size:14px;font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="financial-review"]) .nx-top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
:where(:root[data-page="financial-review"]) .nx-pbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);border-radius:10px;padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:none}
:where(:root[data-page="financial-review"]) .nx-pbtn:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="financial-review"]) .nx-pbtn:disabled{opacity:.5;cursor:default}
:where(:root[data-page="financial-review"]) .nx-pbtn svg{width:14px;height:14px}
:where(:root[data-page="financial-review"]) .nx-pbtn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="financial-review"]) .nx-pbtn.primary:hover{background:var(--brand);color:#fff;filter:brightness(1.06)}
:where(:root[data-page="financial-review"]) .nx-theme-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);display:flex;align-items:center;justify-content:center;cursor:pointer}
:where(:root[data-page="financial-review"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="financial-review"]) .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="financial-review"]) .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="financial-review"]) .nx-ic-moon{display:block}
:where(:root[data-page="financial-review"]) .nx-scroll{flex:1;min-height:0;overflow:auto;padding:20px 22px 44px;display:flex;flex-direction:column}
:where(:root[data-page="financial-review"]) .nx-h1{font-size:22px;font-weight:800;letter-spacing:-.03em;margin:0 0 4px}
:where(:root[data-page="financial-review"]) .nx-card{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:var(--nx-radius);overflow:hidden}
:where(:root[data-page="financial-review"]) .nx-card-head{display:flex;align-items:center;gap:10px;padding:13px 17px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="financial-review"]) .nx-card-title{font-size:13.5px;font-weight:700}
:where(:root[data-page="financial-review"]) .nx-card-right{margin-left:auto;display:flex;align-items:center;gap:8px}

/* ==== The banner. This page shows a month that has not gone out, and it
   says so, every time, at the top. ==== */
:where(:root[data-page="financial-review"]) .frv-banner{display:flex;align-items:flex-start;gap:9px;background:var(--nx-attn-bg);border:1px solid var(--nx-attn-line);color:var(--nx-attn);border-radius:12px;padding:10px 13px;font-size:12.5px;font-weight:600;margin-bottom:14px}
:where(:root[data-page="financial-review"]) .frv-banner svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px}
:where(:root[data-page="financial-review"]) .frv-banner b{font-weight:800}

/* ==== Toolbar ==== */
:where(:root[data-page="financial-review"]) .frv-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:14px}
:where(:root[data-page="financial-review"]) .frv-field{display:flex;align-items:center;gap:7px;border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:11px;padding:6px 11px}
:where(:root[data-page="financial-review"]) .frv-field label{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3)}
:where(:root[data-page="financial-review"]) .frv-field input[type=month],:where(:root[data-page="financial-review"]) .frv-field input[type=number]{border:none;background:none;color:var(--nx-ink);font-size:12.5px;font-weight:600;outline:none;padding:2px 0}
:where(:root[data-page="financial-review"]) .frv-field input[type=number]{width:82px;font-variant-numeric:tabular-nums}

/* The facility picker. Everything is in the list from the moment it opens -
   no field has to be chosen first to make another one work. */
:where(:root[data-page="financial-review"]) .frv-pick{position:relative}
:where(:root[data-page="financial-review"]) .frv-pick-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:11px;padding:8px 12px;font-size:12.5px;font-weight:600;cursor:pointer;max-width:420px}
:where(:root[data-page="financial-review"]) .frv-pick-btn:hover{background:var(--nx-hover)}
:where(:root[data-page="financial-review"]) .frv-pick-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="financial-review"]) .frv-pick-btn svg{width:12px;height:12px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="financial-review"]) .frv-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:330px;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:13px;box-shadow:0 18px 44px rgba(16,24,40,.18);display:none;overflow:hidden}
:where(:root[data-page="financial-review"]) .frv-pop.open{display:block}
:where(:root[data-page="financial-review"]) .frv-pop-search{padding:10px 11px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="financial-review"]) .frv-pop-search input{width:100%;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink);border-radius:9px;padding:7px 10px;font-size:12.5px;outline:none}
:where(:root[data-page="financial-review"]) .frv-pop-search input:focus{border-color:var(--brand)}
:where(:root[data-page="financial-review"]) .frv-pop-list{max-height:290px;overflow:auto;padding:5px}
:where(:root[data-page="financial-review"]) .frv-pop-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;cursor:pointer;font-size:12.5px;color:var(--nx-ink2)}
:where(:root[data-page="financial-review"]) .frv-pop-row:hover{background:var(--nx-hover)}
:where(:root[data-page="financial-review"]) .frv-pop-row.on{color:var(--nx-ink);font-weight:600}
:where(:root[data-page="financial-review"]) .frv-box{width:15px;height:15px;border-radius:4px;border:1.5px solid var(--nx-line2);display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:transparent}
:where(:root[data-page="financial-review"]) .frv-pop-row.on .frv-box{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="financial-review"]) .frv-box svg{width:10px;height:10px}
:where(:root[data-page="financial-review"]) .frv-pop-row small{margin-left:auto;font-size:10.5px;color:var(--nx-ink3);font-weight:600}
:where(:root[data-page="financial-review"]) .frv-pop-foot{display:flex;gap:7px;padding:9px 11px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="financial-review"]) .frv-pop-foot button{flex:1;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:9px;padding:6px;font-size:11.5px;font-weight:600;cursor:pointer}
:where(:root[data-page="financial-review"]) .frv-pop-foot button:hover{background:var(--nx-hover);color:var(--nx-ink)}

/* ==== One facility ==== */
:where(:root[data-page="financial-review"]) .frv-fac{margin-bottom:16px}
:where(:root[data-page="financial-review"]) .frv-fac-head{display:flex;align-items:center;gap:10px;padding:13px 17px;border-bottom:1px solid var(--nx-line);flex-wrap:wrap}
:where(:root[data-page="financial-review"]) .frv-fac-name{font-size:14px;font-weight:800;letter-spacing:-.02em}
:where(:root[data-page="financial-review"]) .frv-fac-sub{font-size:11.5px;color:var(--nx-ink3);font-weight:600}
:where(:root[data-page="financial-review"]) .frv-chip{font-size:10.5px;font-weight:800;border-radius:7px;padding:3px 9px;white-space:nowrap;letter-spacing:.02em}
:where(:root[data-page="financial-review"]) .frv-chip.explained{background:var(--nx-up-bg);color:var(--nx-up)}
:where(:root[data-page="financial-review"]) .frv-chip.partly{background:var(--nx-attn-bg);color:var(--nx-attn)}
:where(:root[data-page="financial-review"]) .frv-chip.unexplained{background:var(--nx-down-bg);color:var(--nx-down)}
:where(:root[data-page="financial-review"]) .frv-chip.nopivot,:where(:root[data-page="financial-review"]) .frv-chip.nopull{background:var(--nx-rail);color:var(--nx-ink3);border:1px solid var(--nx-line2)}

/* Tiles */
:where(:root[data-page="financial-review"]) .frv-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:var(--nx-line);border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="financial-review"]) .frv-tile{background:var(--nx-surface);padding:12px 15px}
:where(:root[data-page="financial-review"]) .frv-tile-k{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3);margin-bottom:5px}
:where(:root[data-page="financial-review"]) .frv-tile-v{font-size:18px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
:where(:root[data-page="financial-review"]) .frv-tile-s{font-size:11px;color:var(--nx-ink3);margin-top:3px;font-variant-numeric:tabular-nums}
:where(:root[data-page="financial-review"]) .frv-up{color:var(--nx-down)}      /* payroll going UP is the bad direction */
:where(:root[data-page="financial-review"]) .frv-dn{color:var(--nx-up)}
:where(:root[data-page="financial-review"]) .frv-flat{color:var(--nx-ink3)}

/* The sentence under the tiles */
:where(:root[data-page="financial-review"]) .frv-say{padding:12px 17px;font-size:12.5px;color:var(--nx-ink2);border-bottom:1px solid var(--nx-line);line-height:1.55}
:where(:root[data-page="financial-review"]) .frv-say b{color:var(--nx-ink);font-variant-numeric:tabular-nums}
:where(:root[data-page="financial-review"]) .frv-say .frv-q{color:var(--nx-ink3)}

/* Line table */
:where(:root[data-page="financial-review"]) .frv-wrap{overflow-x:auto}
:where(:root[data-page="financial-review"]) .frv-tbl{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;min-width:860px}
:where(:root[data-page="financial-review"]) .frv-tbl th{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3);text-align:right;padding:9px 11px;background:var(--nx-rail);border-bottom:1px solid var(--nx-line);position:sticky;top:0;z-index:2}
:where(:root[data-page="financial-review"]) .frv-tbl th.l,:where(:root[data-page="financial-review"]) .frv-tbl td.l{text-align:left}
:where(:root[data-page="financial-review"]) .frv-tbl td{font-size:12.5px;padding:8px 11px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink2);text-align:right}
:where(:root[data-page="financial-review"]) .frv-tbl tbody tr:hover td{background:var(--nx-hover)}
:where(:root[data-page="financial-review"]) .frv-tbl td.l{color:var(--nx-ink);font-weight:600}
:where(:root[data-page="financial-review"]) .frv-sect td{background:var(--nx-rail);font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink2);text-align:left;padding:7px 11px}
:where(:root[data-page="financial-review"]) .frv-tot td{font-weight:800;color:var(--nx-ink);background:var(--nx-rail)}
:where(:root[data-page="financial-review"]) .frv-drill{border:none;background:none;color:var(--brand);font-weight:700;font-size:12.5px;cursor:pointer;padding:0;text-align:right;font-variant-numeric:tabular-nums}
:where(:root[data-page="financial-review"]) .frv-drill:hover{text-decoration:underline}
:where(:root[data-page="financial-review"]) .frv-note-cell{min-width:210px;text-align:left !important}
:where(:root[data-page="financial-review"]) .frv-note{width:100%;border:1px solid transparent;background:none;color:var(--nx-ink2);border-radius:8px;padding:5px 7px;font-size:12px;resize:vertical;min-height:30px;line-height:1.45}
:where(:root[data-page="financial-review"]) .frv-note:hover{border-color:var(--nx-line2)}
:where(:root[data-page="financial-review"]) .frv-note:focus{border-color:var(--brand);background:var(--nx-surface);outline:none;color:var(--nx-ink)}
:where(:root[data-page="financial-review"]) .frv-note-prev{font-size:10.5px;color:var(--nx-ink3);margin-top:3px;line-height:1.4}
:where(:root[data-page="financial-review"]) .frv-note-prev b{color:var(--nx-ink2);font-weight:700}

/* The pivot panel */
:where(:root[data-page="financial-review"]) .frv-piv{border-top:1px solid var(--nx-line)}
:where(:root[data-page="financial-review"]) .frv-piv-btn{width:100%;display:flex;align-items:center;gap:8px;background:none;border:none;padding:11px 17px;font-size:12px;font-weight:700;color:var(--nx-ink2);cursor:pointer;text-align:left}
:where(:root[data-page="financial-review"]) .frv-piv-btn:hover{background:var(--nx-hover)}
:where(:root[data-page="financial-review"]) .frv-piv-btn svg{width:11px;height:11px;transition:transform .15s;color:var(--nx-ink3)}
:where(:root[data-page="financial-review"]) .frv-piv-btn.open svg{transform:rotate(90deg)}
:where(:root[data-page="financial-review"]) .frv-piv-body{display:none;padding:0 17px 16px}
:where(:root[data-page="financial-review"]) .frv-piv-body.open{display:block}
:where(:root[data-page="financial-review"]) .frv-eq{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 13px}
:where(:root[data-page="financial-review"]) .frv-eq div{border:1px solid var(--nx-line2);border-radius:10px;padding:8px 11px;font-size:11.5px;color:var(--nx-ink3);font-weight:600}
:where(:root[data-page="financial-review"]) .frv-eq b{display:block;font-size:13.5px;color:var(--nx-ink);font-variant-numeric:tabular-nums;margin-top:2px;font-weight:800}
:where(:root[data-page="financial-review"]) .frv-eq span{font-size:10.5px;color:var(--nx-ink3);font-weight:600}

:where(:root[data-page="financial-review"]) .frv-empty{padding:34px 20px;text-align:center;color:var(--nx-ink3);font-size:12.5px}
:where(:root[data-page="financial-review"]) .frv-empty b{display:block;color:var(--nx-ink2);font-size:13.5px;font-weight:700;margin-bottom:5px}

/* Pull progress */
:where(:root[data-page="financial-review"]) .frv-prog{display:none;align-items:center;gap:10px;background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:12px;padding:10px 13px;font-size:12.5px;font-weight:600;color:var(--nx-ink2);margin-bottom:14px}
:where(:root[data-page="financial-review"]) .frv-prog.on{display:flex}
:where(:root[data-page="financial-review"]) .frv-spin{width:14px;height:14px;border:2px solid var(--nx-line2);border-top-color:var(--brand);border-radius:50%;animation:frvspin .7s linear infinite;flex:0 0 auto}
@keyframes frvspin{to{transform:rotate(360deg)}}

/* Modal */
:where(:root[data-page="financial-review"]) .frv-modal-bg{position:fixed;inset:0;background:rgba(16,18,26,.44);display:none;align-items:center;justify-content:center;z-index:800;padding:22px}
:where(:root[data-page="financial-review"]) .frv-modal-bg.open{display:flex}
:where(:root[data-page="financial-review"]) .frv-modal{background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:16px;width:min(1080px,100%);max-height:86vh;display:flex;flex-direction:column;box-shadow:0 26px 64px rgba(16,24,40,.3)}
:where(:root[data-page="financial-review"]) .frv-modal-head{display:flex;align-items:flex-start;gap:10px;padding:14px 18px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="financial-review"]) .frv-modal-t{font-size:14px;font-weight:800;letter-spacing:-.02em}
:where(:root[data-page="financial-review"]) .frv-modal-s{font-size:11.5px;color:var(--nx-ink3);margin-top:3px}
:where(:root[data-page="financial-review"]) .frv-x{margin-left:auto;border:none;background:none;width:30px;height:30px;border-radius:8px;color:var(--nx-ink3);cursor:pointer;font-size:19px;line-height:1}
:where(:root[data-page="financial-review"]) .frv-x:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="financial-review"]) .frv-modal-body{overflow:auto;padding:14px 18px 18px}
:where(:root[data-page="financial-review"]) .frv-dt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
:where(:root[data-page="financial-review"]) .frv-dt th{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3);text-align:left;padding:7px 9px;border-bottom:1px solid var(--nx-line);background:var(--nx-rail);position:sticky;top:-14px}
:where(:root[data-page="financial-review"]) .frv-dt td{font-size:12px;padding:6px 9px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink2)}
:where(:root[data-page="financial-review"]) .frv-dt .r{text-align:right}
:where(:root[data-page="financial-review"]) .frv-dt-h{font-size:12px;font-weight:800;color:var(--nx-ink);margin:14px 0 7px}
:where(:root[data-page="financial-review"]) .frv-dt-h:first-child{margin-top:0}

:where(:root[data-page="financial-review"]) .frv-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(14px);background:var(--nx-ink);color:var(--nx-surface);font-size:12.5px;font-weight:600;padding:10px 16px;border-radius:11px;opacity:0;transition:opacity .18s,transform .18s;z-index:900;pointer-events:none}
:where(:root[data-page="financial-review"]) .frv-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
:where(:root[data-page="financial-review"]) .frv-toast.err{background:var(--nx-down);color:#fff}

/* ==== Inside the Accounting dashboard frame ==== */
html.cr-embed:where([data-page="financial-review"]),:where(:root[data-page="financial-review"]) body.embed{height:100%;overflow:hidden;background:var(--nx-surface)}
:where(:root[data-page="financial-review"]) body.embed .nx-app{margin:0;border:none;border-radius:0;height:100%;max-width:none;grid-template-columns:1fr;box-shadow:none}
:where(:root[data-page="financial-review"]) body.embed .nx-rail,:where(:root[data-page="financial-review"]) body.embed .nx-topbar,:where(:root[data-page="financial-review"]) body.embed .frv-head{display:none}


/* ----------------------------------------------------------------------------
 * 15.16  Purchasing -- Holiday orders
 * purchasing/holiday-orders.php, data-page="holiday-orders"
 * -------------------------------------------------------------------------- */
:root:where([data-page="holiday-orders"]){
  --bg:#F1F4EF; --surface:var(--nx-surface); --sunk:#E6EBE3; --ink:#1E2923; --muted:#5B6A61;
  --line:#D3DBD0; --accent:#8F2436; --accent-ink:var(--nx-on-brand); --accent-soft:#F4E3E6;
  --gold:#A8741C; --gold-soft:#F5EBD6; --ok:#2F6B45; --ok-soft:#DDEEDF;
  --serif:"Young Serif", Georgia, "Times New Roman", serif;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):where([data-page="holiday-orders"]){
    --bg:#131A16; --surface:#1B241F; --sunk:#232E28; --ink:#E6ECE5; --muted:#9AAAA0;
    --line:#33413A; --accent:#E07586; --accent-ink:#1A0E11; --accent-soft:#3A2227;
    --gold:#E0B25E; --gold-soft:#3A3120; --ok:#7CC796; --ok-soft:#1F3527;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]:where([data-page="holiday-orders"]){
  --bg:#131A16; --surface:#1B241F; --sunk:#232E28; --ink:#E6ECE5; --muted:#9AAAA0;
  --line:#33413A; --accent:#E07586; --accent-ink:#1A0E11; --accent-soft:#3A2227;
  --gold:#E0B25E; --gold-soft:#3A3120; --ok:#7CC796; --ok-soft:#1F3527;
  color-scheme:dark;
}
:where(:root[data-page="holiday-orders"]) *, *:where([data-page="holiday-orders"]){box-sizing:border-box}
html:where([data-page="holiday-orders"]),:where(:root[data-page="holiday-orders"]) body{margin:0}
:where(:root[data-page="holiday-orders"]) body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
:where(:root[data-page="holiday-orders"]) a{color:inherit}
:where(:root[data-page="holiday-orders"]) button,:where(:root[data-page="holiday-orders"]) input,:where(:root[data-page="holiday-orders"]) select,:where(:root[data-page="holiday-orders"]) textarea{font:inherit;color:inherit}
:where(:root[data-page="holiday-orders"]) :focus-visible, :focus-visible:where([data-page="holiday-orders"]){outline:3px solid var(--gold);outline-offset:2px}
:where(:root[data-page="holiday-orders"]) .wrap{max-width:1080px;margin:0 auto;padding:0 20px}

:where(:root[data-page="holiday-orders"]) .top{border-bottom:1px solid var(--line);background:var(--surface)}
:where(:root[data-page="holiday-orders"]) .top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;flex-wrap:wrap}
:where(:root[data-page="holiday-orders"]) .brand{font-family:var(--serif);font-size:1.15rem;text-decoration:none;display:flex;align-items:center;gap:10px}
:where(:root[data-page="holiday-orders"]) .brand svg{width:26px;height:26px;flex:none}
:where(:root[data-page="holiday-orders"]) nav{display:flex;gap:4px;flex-wrap:wrap}
:where(:root[data-page="holiday-orders"]) nav a{text-decoration:none;padding:8px 12px;border-radius:8px;color:var(--muted);font-weight:500}
:where(:root[data-page="holiday-orders"]) nav a:hover{color:var(--ink);background:var(--sunk)}
:where(:root[data-page="holiday-orders"]) nav a[aria-current="page"]{color:var(--ink);background:var(--sunk)}

:where(:root[data-page="holiday-orders"]) main{padding:32px 0 64px}
:where(:root[data-page="holiday-orders"]) h1,:where(:root[data-page="holiday-orders"]) h2,:where(:root[data-page="holiday-orders"]) h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.15}
:where(:root[data-page="holiday-orders"]) h1{font-size:clamp(1.9rem,4.5vw,2.8rem)}
:where(:root[data-page="holiday-orders"]) h2{font-size:1.35rem}
:where(:root[data-page="holiday-orders"]) .lede{color:var(--muted);max-width:60ch;margin:10px 0 0}
:where(:root[data-page="holiday-orders"]) .back{display:inline-block;margin-bottom:18px;color:var(--muted);text-decoration:none;font-weight:500}
:where(:root[data-page="holiday-orders"]) .back:hover{color:var(--ink)}
:where(:root[data-page="holiday-orders"]) .notice{background:var(--gold-soft);border:1px solid var(--line);padding:12px 14px;border-radius:10px;margin:0 0 20px}

/* facility picker */
:where(:root[data-page="holiday-orders"]) .state-group{margin-top:34px}
:where(:root[data-page="holiday-orders"]) .state-group h2{font-size:1.1rem;color:var(--muted);font-family:var(--sans);font-weight:600;margin-bottom:10px}
:where(:root[data-page="holiday-orders"]) .fac-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
:where(:root[data-page="holiday-orders"]) .fac-list li{border-bottom:1px solid var(--line)}
:where(:root[data-page="holiday-orders"]) .fac-link{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:16px 4px;text-decoration:none;align-items:center}
:where(:root[data-page="holiday-orders"]) .fac-link:hover .fac-name{color:var(--accent)}
:where(:root[data-page="holiday-orders"]) .fac-name{font-family:var(--serif);font-size:1.3rem}
:where(:root[data-page="holiday-orders"]) .fac-loc{color:var(--muted);grid-column:1}
:where(:root[data-page="holiday-orders"]) .fac-meta{grid-column:2;grid-row:1 / span 2;text-align:right;color:var(--muted);font-size:.92rem}
:where(:root[data-page="holiday-orders"]) .fac-meta strong{color:var(--ink);font-weight:600}

/* order form */
:where(:root[data-page="holiday-orders"]) .fac-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
:where(:root[data-page="holiday-orders"]) .loc-pill{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:4px 10px;border-radius:999px;background:var(--sunk);color:var(--muted);font-weight:500;font-size:.95rem}
:where(:root[data-page="holiday-orders"]) .order-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;margin-top:28px;align-items:start}
@media (max-width:820px){:where(:root[data-page="holiday-orders"]) .order-grid{grid-template-columns:1fr}}
:where(:root[data-page="holiday-orders"]) .menu h2,:where(:root[data-page="holiday-orders"]) .ticket h2{margin-bottom:14px}
:where(:root[data-page="holiday-orders"]) .opt{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
:where(:root[data-page="holiday-orders"]) .opt:last-child{border-bottom:1px solid var(--line)}
:where(:root[data-page="holiday-orders"]) .opt-name{font-weight:600}
:where(:root[data-page="holiday-orders"]) .opt-detail{color:var(--muted);font-size:.93rem}
:where(:root[data-page="holiday-orders"]) .opt.picked .opt-name{color:var(--accent)}
:where(:root[data-page="holiday-orders"]) .stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
:where(:root[data-page="holiday-orders"]) .stepper button{width:40px;height:40px;border:0;background:transparent;font-size:1.25rem;cursor:pointer;color:var(--ink)}
:where(:root[data-page="holiday-orders"]) .stepper button:hover{background:var(--sunk)}
:where(:root[data-page="holiday-orders"]) .stepper button:disabled{color:var(--line);cursor:default;background:transparent}
:where(:root[data-page="holiday-orders"]) .stepper input{width:52px;height:40px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;background:transparent;-moz-appearance:textfield}
:where(:root[data-page="holiday-orders"]) .stepper input::-webkit-outer-spin-button,:where(:root[data-page="holiday-orders"]) .stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

:where(:root[data-page="holiday-orders"]) .ticket{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;position:sticky;top:16px}
:where(:root[data-page="holiday-orders"]) .ticket::before{content:"";display:block;height:6px;margin:-22px -22px 18px;border-radius:14px 14px 0 0;background:repeating-linear-gradient(90deg,var(--accent) 0 14px,var(--gold) 14px 28px)}
:where(:root[data-page="holiday-orders"]) .lines{list-style:none;margin:0 0 6px;padding:0}
:where(:root[data-page="holiday-orders"]) .lines li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line)}
:where(:root[data-page="holiday-orders"]) .lines .qty{white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
:where(:root[data-page="holiday-orders"]) .empty-lines{color:var(--muted);margin:0 0 6px}
:where(:root[data-page="holiday-orders"]) .total{display:flex;justify-content:space-between;font-weight:700;padding:8px 0 4px}
:where(:root[data-page="holiday-orders"]) .field{margin-top:16px}
:where(:root[data-page="holiday-orders"]) .field label{display:block;font-weight:600;margin-bottom:6px}
:where(:root[data-page="holiday-orders"]) .field .hint{font-weight:400;color:var(--muted)}
:where(:root[data-page="holiday-orders"]) .field input,:where(:root[data-page="holiday-orders"]) .field select,:where(:root[data-page="holiday-orders"]) .field textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
:where(:root[data-page="holiday-orders"]) .field textarea{min-height:70px;resize:vertical}
:where(:root[data-page="holiday-orders"]) .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
:where(:root[data-page="holiday-orders"]) .chip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:4px 10px;font-size:.88rem;cursor:pointer;color:var(--muted)}
:where(:root[data-page="holiday-orders"]) .chip:hover,:where(:root[data-page="holiday-orders"]) .chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
:where(:root[data-page="holiday-orders"]) .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:11px 18px;font-weight:600;cursor:pointer;text-decoration:none}
:where(:root[data-page="holiday-orders"]) .btn-primary{background:var(--accent);color:var(--accent-ink);width:100%;margin-top:20px;font-size:1.05rem}
:where(:root[data-page="holiday-orders"]) .btn-primary:hover{filter:brightness(1.07)}
:where(:root[data-page="holiday-orders"]) .btn-primary:disabled{opacity:.6;cursor:default}
:where(:root[data-page="holiday-orders"]) .btn-quiet{background:transparent;border-color:var(--line);color:var(--ink)}
:where(:root[data-page="holiday-orders"]) .btn-quiet:hover{background:var(--sunk)}
:where(:root[data-page="holiday-orders"]) .btn-danger{background:transparent;border-color:var(--line);color:var(--accent)}
:where(:root[data-page="holiday-orders"]) .err{color:var(--accent);font-weight:600;margin:10px 0 0;min-height:1.2em}

:where(:root[data-page="holiday-orders"]) .recent{margin-top:44px}
:where(:root[data-page="holiday-orders"]) .recent h2{margin-bottom:12px}

/* tables */
:where(:root[data-page="holiday-orders"]) .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
:where(:root[data-page="holiday-orders"]) table{border-collapse:collapse;width:100%;min-width:640px}
:where(:root[data-page="holiday-orders"]) th,:where(:root[data-page="holiday-orders"]) td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
:where(:root[data-page="holiday-orders"]) th{font-weight:600;color:var(--muted);font-size:.9rem;background:var(--sunk)}
:where(:root[data-page="holiday-orders"]) tr:last-child td{border-bottom:0}
:where(:root[data-page="holiday-orders"]) td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
:where(:root[data-page="holiday-orders"]) .items{margin:0;padding:0;list-style:none}
:where(:root[data-page="holiday-orders"]) .status{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.85rem;font-weight:600}
:where(:root[data-page="holiday-orders"]) .status-new{background:var(--gold-soft);color:var(--gold)}
:where(:root[data-page="holiday-orders"]) .status-ordered{background:var(--accent-soft);color:var(--accent)}
:where(:root[data-page="holiday-orders"]) .status-delivered{background:var(--ok-soft);color:var(--ok)}
:where(:root[data-page="holiday-orders"]) .status-select{padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
:where(:root[data-page="holiday-orders"]) .toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:24px 0 18px}
:where(:root[data-page="holiday-orders"]) .toolbar .field{margin:0;min-width:200px}
:where(:root[data-page="holiday-orders"]) .toolbar .spacer{flex:1}
:where(:root[data-page="holiday-orders"]) .totals{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:0 0 26px;padding:0;list-style:none}
:where(:root[data-page="holiday-orders"]) .totals li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
:where(:root[data-page="holiday-orders"]) .totals .n{font-family:var(--serif);font-size:1.6rem;color:var(--accent)}
:where(:root[data-page="holiday-orders"]) .muted{color:var(--muted)}
:where(:root[data-page="holiday-orders"]) .small{font-size:.9rem}
:where(:root[data-page="holiday-orders"]) .link-btn{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;font-weight:600;text-decoration:underline}

/* manage */
:where(:root[data-page="holiday-orders"]) .manage-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;margin-top:24px;align-items:start}
@media (max-width:760px){:where(:root[data-page="holiday-orders"]) .manage-grid{grid-template-columns:1fr}}
:where(:root[data-page="holiday-orders"]) .side-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
:where(:root[data-page="holiday-orders"]) .side-list button{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:10px 6px;cursor:pointer}
:where(:root[data-page="holiday-orders"]) .side-list button[aria-current="true"]{color:var(--accent);font-weight:600}
:where(:root[data-page="holiday-orders"]) .side-list small{display:block;color:var(--muted)}
:where(:root[data-page="holiday-orders"]) .edit-row{display:grid;grid-template-columns:1.2fr 1fr auto;gap:8px;margin-top:8px}
@media (max-width:560px){:where(:root[data-page="holiday-orders"]) .edit-row{grid-template-columns:1fr}}
:where(:root[data-page="holiday-orders"]) .edit-row input,:where(:root[data-page="holiday-orders"]) .two input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
:where(:root[data-page="holiday-orders"]) .two{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}
@media (max-width:560px){:where(:root[data-page="holiday-orders"]) .two{grid-template-columns:1fr}}
:where(:root[data-page="holiday-orders"]) .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

:where(:root[data-page="holiday-orders"]) #toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:10px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;max-width:calc(100% - 40px)}
:where(:root[data-page="holiday-orders"]) #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion: reduce){:where(:root[data-page="holiday-orders"]) #toast{transition:none}}
:where(:root[data-page="holiday-orders"]) .loading{color:var(--muted);padding:40px 0}

:where(:root[data-page="holiday-orders"]) .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
:where(:root[data-page="holiday-orders"]) .pills .loc-pill{margin-top:0}
:where(:root[data-page="holiday-orders"]) .sup-pill{background:var(--gold-soft);color:var(--gold)}
:where(:root[data-page="holiday-orders"]) .sup-tag{display:inline-block;margin-left:6px;padding:0 8px;border-radius:999px;background:var(--gold-soft);color:var(--gold);font-size:.82rem;font-weight:600}
:where(:root[data-page="holiday-orders"]) .cat-h{margin:8px 0 10px}
:where(:root[data-page="holiday-orders"]) .cat-h ~ .cat-h{margin-top:30px}
:where(:root[data-page="holiday-orders"]) .opt-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;font-size:.88rem;color:var(--muted)}
:where(:root[data-page="holiday-orders"]) .opt-meta strong{color:var(--ink);font-variant-numeric:tabular-nums}
:where(:root[data-page="holiday-orders"]) .opt-detail{font-size:.84rem;letter-spacing:.01em}
:where(:root[data-page="holiday-orders"]) .qty-wrap{display:flex;flex-direction:column;align-items:center;gap:2px}
:where(:root[data-page="holiday-orders"]) .unit{font-size:.8rem;color:var(--muted)}
:where(:root[data-page="holiday-orders"]) .tabs{display:flex;gap:4px;margin-top:22px;border-bottom:1px solid var(--line)}
:where(:root[data-page="holiday-orders"]) .tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;cursor:pointer;font-weight:600;color:var(--muted);margin-bottom:-1px}
:where(:root[data-page="holiday-orders"]) .tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
:where(:root[data-page="holiday-orders"]) .preview{list-style:none;margin:0 0 8px;padding:0;border-top:1px solid var(--line)}
:where(:root[data-page="holiday-orders"]) .preview li{padding:8px 0;border-bottom:1px solid var(--line)}
:where(:root[data-page="holiday-orders"]) .item-edit{display:grid;grid-template-columns:120px 120px 1fr;gap:8px;padding:12px 0;border-top:1px solid var(--line)}
:where(:root[data-page="holiday-orders"]) .item-edit input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
:where(:root[data-page="holiday-orders"]) .item-edit .span3{grid-column:1 / -1}
@media (max-width:560px){:where(:root[data-page="holiday-orders"]) .item-edit{grid-template-columns:1fr}}
:where(:root[data-page="holiday-orders"]) .oc{display:inline-block;margin-left:4px;padding:0 7px;border-radius:999px;background:var(--ok-soft);color:var(--ok);font-size:.8rem;font-weight:600;white-space:nowrap}
:where(:root[data-page="holiday-orders"]) .oc-missing{background:var(--gold-soft);color:var(--gold)}
:where(:root[data-page="holiday-orders"]) .code-card{max-width:480px;margin:48px auto 0}
:where(:root[data-page="holiday-orders"]) .code-card h1{font-size:clamp(1.7rem,4vw,2.2rem)}
:where(:root[data-page="holiday-orders"]) #codeIn{font-size:1.3rem;letter-spacing:.12em;text-transform:uppercase;text-align:center}
:where(:root[data-page="holiday-orders"]) .fcode{font-weight:700;letter-spacing:.1em;font-size:1.05rem;font-variant-numeric:tabular-nums}
:where(:root[data-page="holiday-orders"]) .mailtext{width:100%;min-width:260px;margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:.85rem;line-height:1.4}
:where(:root[data-page="holiday-orders"]) details summary{cursor:pointer;color:var(--accent);font-weight:600}
:where(:root[data-page="holiday-orders"]) nav[hidden]{display:none}
:where(:root[data-page="holiday-orders"]) .gridsum{margin:0 0 10px;color:var(--muted);font-size:.92rem}
:where(:root[data-page="holiday-orders"]) .grid-scroll{overflow:auto;max-height:70vh;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
:where(:root[data-page="holiday-orders"]) table.grid{border-collapse:separate;border-spacing:0;min-width:100%;font-size:.88rem}
:where(:root[data-page="holiday-orders"]) table.grid th{position:sticky;top:0;z-index:2;background:var(--sunk);cursor:pointer;user-select:none;white-space:nowrap;padding:9px 10px;border-bottom:1px solid var(--line)}
:where(:root[data-page="holiday-orders"]) table.grid th:hover{color:var(--ink)}
:where(:root[data-page="holiday-orders"]) table.grid th.sorted{color:var(--accent)}
:where(:root[data-page="holiday-orders"]) table.grid td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
:where(:root[data-page="holiday-orders"]) table.grid tr:nth-child(even) td{background:var(--bg)}
:where(:root[data-page="holiday-orders"]) table.grid .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
:where(:root[data-page="holiday-orders"]) table.grid .status-select{padding:3px 6px;font-size:.85rem}
:where(:root[data-page="holiday-orders"]) .toolbar .field input[type="search"]{min-width:180px}
:where(:root[data-page="holiday-orders"]) .po-in{width:100%;min-width:90px;padding:4px 7px;border:1px solid var(--line);border-radius:7px;background:var(--bg);font-size:.85rem;font-variant-numeric:tabular-nums}
:where(:root[data-page="holiday-orders"]) .po-in:hover{border-color:var(--accent)}
:where(:root[data-page="holiday-orders"]) .late-pill{background:var(--accent-soft);color:var(--accent)}
:where(:root[data-page="holiday-orders"]) .missing-row td{color:var(--muted);font-style:italic}
:where(:root[data-page="holiday-orders"]) .status-none{background:var(--sunk);color:var(--muted)}
:where(:root[data-page="holiday-orders"]) .mail-panel{margin-top:16px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
:where(:root[data-page="holiday-orders"]) .mail-panel h3{font-family:var(--serif);font-weight:400;margin:0 0 4px;font-size:1.15rem}
:where(:root[data-page="holiday-orders"]) .mail-panel .field{margin-top:14px}


/* ----------------------------------------------------------------------------
 * 15.17  Accounting -- Bill reclass
 * accounting/financials/bill-reclass.php, data-page="bill-reclass"
 * -------------------------------------------------------------------------- */
:root:where([data-page="bill-reclass"]){
  --brand:var(--blue);--brand-lt:var(--blue-lt);
  --nx-warn:#B45309;--nx-warn-lt:#FEF3C7;
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="bill-reclass"]){
  --brand:#1FB866;--brand-lt:#13361F;
  --nx-warn:#FBBF24;--nx-warn-lt:#3A2C08;
  color-scheme:dark;
}
:where(:root[data-page="bill-reclass"]) *, *:where([data-page="bill-reclass"]){box-sizing:border-box}
html:where([data-page="bill-reclass"]),:where(:root[data-page="bill-reclass"]) body{height:100%;margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px}
:where(:root[data-page="bill-reclass"]) button{font-family:inherit}
:where(:root[data-page="bill-reclass"]) .nx-app{display:grid;grid-template-columns:248px 1fr;min-height:calc(100vh - 24px);max-width:1760px;margin:12px;background:var(--nx-surface);border-radius:18px;overflow:hidden;box-shadow:0 16px 48px rgba(27,29,41,.10);border:1px solid var(--nx-line)}
@media(min-width:1784px){:where(:root[data-page="bill-reclass"]) .nx-app{margin:12px auto}}
@media(max-width:980px){:where(:root[data-page="bill-reclass"]) .nx-app{grid-template-columns:1fr;margin:0;border-radius:0;border:none;min-height:100vh}}
:where(:root[data-page="bill-reclass"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px}
@media(max-width:980px){:where(:root[data-page="bill-reclass"]) .nx-rail{display:none}}
:where(:root[data-page="bill-reclass"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="bill-reclass"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#04a85a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
:where(:root[data-page="bill-reclass"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="bill-reclass"]) .nx-navsec{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--nx-ink3);padding:14px 8px 6px}
:where(:root[data-page="bill-reclass"]) .nx-nav{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--nx-ink2);font-weight:500;font-size:13px}
:where(:root[data-page="bill-reclass"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="bill-reclass"]) .nx-nav.active{background:var(--brand-lt);color:var(--brand);font-weight:600}
:where(:root[data-page="bill-reclass"]) .nx-main{display:flex;flex-direction:column;min-width:0}
:where(:root[data-page="bill-reclass"]) .nx-topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="bill-reclass"]) .nx-top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
:where(:root[data-page="bill-reclass"]) .nx-pbtn{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:9px;padding:7px 13px;font-weight:600;font-size:12.5px;cursor:pointer}
:where(:root[data-page="bill-reclass"]) .nx-pbtn:hover{background:var(--nx-hover)}
:where(:root[data-page="bill-reclass"]) .nx-pbtn:disabled{opacity:.45;cursor:default}
:where(:root[data-page="bill-reclass"]) .nx-pbtn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="bill-reclass"]) .nx-pbtn.primary:hover{filter:brightness(1.06)}
:where(:root[data-page="bill-reclass"]) .nx-theme-btn{border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:9px;width:34px;height:34px;cursor:pointer;color:var(--nx-ink2);display:flex;align-items:center;justify-content:center}
:where(:root[data-page="bill-reclass"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="bill-reclass"]) .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="bill-reclass"]) .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="bill-reclass"]) .nx-ic-moon{display:block}
:where(:root[data-page="bill-reclass"]) .nx-user-av{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
:where(:root[data-page="bill-reclass"]) .nx-scroll{padding:22px;overflow:auto;flex:1}
:where(:root[data-page="bill-reclass"]) .nx-pagehead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
:where(:root[data-page="bill-reclass"]) .nx-h1{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0}
:where(:root[data-page="bill-reclass"]) .nx-sub{color:var(--nx-ink2);font-size:12.5px;margin-top:2px}
:where(:root[data-page="bill-reclass"]) .nx-card{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);overflow:visible;margin-bottom:16px}
:where(:root[data-page="bill-reclass"]) .nx-card-head{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="bill-reclass"]) .nx-card-ic{color:var(--brand);display:flex}:where(:root[data-page="bill-reclass"]) .nx-card-ic svg{width:16px;height:16px}
:where(:root[data-page="bill-reclass"]) .nx-card-title{font-weight:700;font-size:13.5px}
:where(:root[data-page="bill-reclass"]) .nx-card-body{padding:16px}

/* --- read-only banner --- */
:where(:root[data-page="bill-reclass"]) .brc-note{display:flex;gap:9px;align-items:flex-start;background:var(--nx-warn-lt);color:var(--nx-warn);border:1px solid currentColor;border-radius:11px;padding:10px 13px;font-size:12.5px;font-weight:500;margin-bottom:16px}
:where(:root[data-page="bill-reclass"]) .brc-note svg{width:15px;height:15px;flex:none;margin-top:1px}

/* --- pickers --- */
:where(:root[data-page="bill-reclass"]) .brc-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
:where(:root[data-page="bill-reclass"]) .brc-fld{display:flex;flex-direction:column;gap:5px;min-width:210px}
:where(:root[data-page="bill-reclass"]) .brc-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--nx-ink3)}
:where(:root[data-page="bill-reclass"]) .brc-dd{position:relative}
:where(:root[data-page="bill-reclass"]) .brc-dd-btn{width:100%;text-align:left;display:flex;align-items:center;gap:8px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:10px;padding:9px 12px;font-size:13px;font-weight:500;cursor:pointer}
:where(:root[data-page="bill-reclass"]) .brc-dd-btn:hover{background:var(--nx-hover)}
:where(:root[data-page="bill-reclass"]) .brc-dd-btn .cv{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="bill-reclass"]) .brc-dd-btn .cv.empty{color:var(--nx-ink3);font-weight:400}
:where(:root[data-page="bill-reclass"]) .brc-dd-btn svg{width:12px;height:12px;color:var(--nx-ink3);flex:none}
:where(:root[data-page="bill-reclass"]) .brc-dd.open .brc-dd-btn{border-color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-pop{display:none;position:fixed;z-index:400;overflow:auto;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:11px;box-shadow:0 16px 40px rgba(27,29,41,.22);padding:5px}
:where(:root[data-page="bill-reclass"]) .brc-pop.show{display:block}
:root[data-theme="dark"]:where([data-page="bill-reclass"]) .brc-pop{box-shadow:0 16px 40px rgba(0,0,0,.55)}
:where(:root[data-page="bill-reclass"]) .brc-dd-search{width:100%;border:1px solid var(--nx-line2);background:var(--nx-hover);color:var(--nx-ink);border-radius:8px;padding:7px 9px;font:inherit;font-size:12.5px;outline:none;margin-bottom:4px}
:where(:root[data-page="bill-reclass"]) .brc-opt{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--nx-ink);border-radius:8px;padding:8px 10px;font-size:12.5px;cursor:pointer;line-height:1.35}
:where(:root[data-page="bill-reclass"]) .brc-opt:hover{background:var(--nx-hover)}
:where(:root[data-page="bill-reclass"]) .brc-opt.sel{background:var(--brand-lt);color:var(--brand);font-weight:600}
:where(:root[data-page="bill-reclass"]) .brc-opt small{display:block;color:var(--nx-ink3);font-weight:400;font-size:11px}
:where(:root[data-page="bill-reclass"]) .brc-opt.sel small{color:var(--brand)}

/* --- period picker: a few months at once, or an exact date range --- */
:where(:root[data-page="bill-reclass"]) .brc-per{width:300px;padding:9px}
:where(:root[data-page="bill-reclass"]) .brc-per-tabs{display:flex;gap:6px;margin-bottom:9px}
:where(:root[data-page="bill-reclass"]) .brc-per-tab{flex:1;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);border-radius:9px;padding:6px 0;font-size:12px;font-weight:700;cursor:pointer}
:where(:root[data-page="bill-reclass"]) .brc-per-tab:hover{background:var(--nx-hover)}
:where(:root[data-page="bill-reclass"]) .brc-per-tab.on{background:var(--brand-lt);border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-per-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;max-height:212px;overflow:auto;padding-right:2px}
:where(:root[data-page="bill-reclass"]) .brc-per-m{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:8px;padding:7px 4px;font-size:11.5px;font-weight:600;cursor:pointer;line-height:1.2}
:where(:root[data-page="bill-reclass"]) .brc-per-m:hover{background:var(--nx-hover)}
:where(:root[data-page="bill-reclass"]) .brc-per-m.on{background:var(--brand-lt);border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-per-m small{display:block;font-size:10px;font-weight:500;color:var(--nx-ink3)}
:where(:root[data-page="bill-reclass"]) .brc-per-m.on small{color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-per-hint{font-size:11px;color:var(--nx-ink3);margin-top:7px;line-height:1.4}
:where(:root[data-page="bill-reclass"]) .brc-per-foot{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="bill-reclass"]) .brc-per-foot .txt{flex:1;font-size:11.5px;font-weight:600;color:var(--nx-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="bill-reclass"]) .brc-per-lnk{border:0;background:transparent;color:var(--brand);font-size:11.5px;font-weight:700;cursor:pointer;padding:2px 4px}
:where(:root[data-page="bill-reclass"]) .brc-per-lnk:hover{text-decoration:underline}
:where(:root[data-page="bill-reclass"]) .brc-per-done{border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:8px;padding:6px 13px;font-size:12px;font-weight:700;cursor:pointer}
:where(:root[data-page="bill-reclass"]) .brc-cal-head{display:flex;align-items:center;gap:6px;margin-bottom:7px}
:where(:root[data-page="bill-reclass"]) .brc-cal-head .t{flex:1;text-align:center;font-size:12.5px;font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="bill-reclass"]) .brc-cal-nav{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:8px;width:26px;height:26px;font-size:14px;line-height:1;cursor:pointer;flex:none}
:where(:root[data-page="bill-reclass"]) .brc-cal-nav:hover{background:var(--brand-lt);border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
:where(:root[data-page="bill-reclass"]) .brc-cal .dow{text-align:center;font-size:10px;font-weight:700;color:var(--nx-ink3);padding:3px 0}
:where(:root[data-page="bill-reclass"]) .brc-cal .pad{padding:6px 0}
:where(:root[data-page="bill-reclass"]) .brc-cal-d{border:0;background:transparent;color:var(--nx-ink);border-radius:7px;padding:6px 0;font-size:11.5px;font-weight:600;cursor:pointer}
:where(:root[data-page="bill-reclass"]) .brc-cal-d:hover{background:var(--nx-hover)}
:where(:root[data-page="bill-reclass"]) .brc-cal-d.in{background:var(--brand-lt);color:var(--brand);border-radius:0}
:where(:root[data-page="bill-reclass"]) .brc-cal-d.edge{background:var(--brand);color:#fff;border-radius:7px}

/* --- tiles --- */
:where(:root[data-page="bill-reclass"]) .brc-typein{width:100%;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:9px;padding:7px 11px;font:inherit;font-size:12.5px;outline:none;margin-top:5px}
:where(:root[data-page="bill-reclass"]) .brc-typein:focus{border-color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-typein::placeholder{color:var(--nx-ink3)}
:where(:root[data-page="bill-reclass"]) .brc-src{font-size:11.5px;color:var(--nx-ink2);margin-top:11px}
:where(:root[data-page="bill-reclass"]) .brc-quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="bill-reclass"]) .brc-quick .lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--nx-ink3);margin-right:2px}
:where(:root[data-page="bill-reclass"]) .brc-chip{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:20px;padding:6px 14px;font-size:12.5px;font-weight:600;cursor:pointer}
:where(:root[data-page="bill-reclass"]) .brc-chip:hover{background:var(--brand-lt);border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-alert{display:flex;gap:9px;align-items:flex-start;background:#FEE2E2;color:#991B1B;border:1px solid currentColor;border-radius:11px;padding:11px 14px;font-size:12.5px;font-weight:600;margin-bottom:16px;line-height:1.45}
:root[data-theme="dark"]:where([data-page="bill-reclass"]) .brc-alert{background:#3A1414;color:#FCA5A5}
:where(:root[data-page="bill-reclass"]) .brc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
:where(:root[data-page="bill-reclass"]) .brc-tile{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius-sm);padding:13px 15px}
:where(:root[data-page="bill-reclass"]) .brc-tile .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--nx-ink3)}
:where(:root[data-page="bill-reclass"]) .brc-tile .v{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
:where(:root[data-page="bill-reclass"]) .brc-tile .d{font-size:11.5px;color:var(--nx-ink2);margin-top:2px}
:where(:root[data-page="bill-reclass"]) .brc-tile.ok .v{color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-tile.warn .v{color:var(--nx-warn)}

/* --- table --- */
:where(:root[data-page="bill-reclass"]) .brc-tblwrap{overflow:auto;max-height:600px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="bill-reclass"]) table.brc{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
:where(:root[data-page="bill-reclass"]) table.brc th{position:sticky;top:0;z-index:2;background:var(--nx-elev);text-align:left;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--nx-ink3);padding:9px 11px;border-bottom:1px solid var(--nx-line2);white-space:nowrap}
:where(:root[data-page="bill-reclass"]) table.brc td{padding:8px 11px;border-bottom:1px solid var(--nx-line);vertical-align:top}
:where(:root[data-page="bill-reclass"]) table.brc tr:hover td{background:var(--nx-hover)}
:where(:root[data-page="bill-reclass"]) table.brc tr.brc-pickrow{cursor:pointer}
:where(:root[data-page="bill-reclass"]) table.brc td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
:where(:root[data-page="bill-reclass"]) .brc-pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:700;white-space:nowrap}
:where(:root[data-page="bill-reclass"]) .brc-pill.free{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-pill.lock{background:var(--nx-warn-lt);color:var(--nx-warn)}
:where(:root[data-page="bill-reclass"]) .brc-pill.todo{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-pill.done{background:var(--nx-hover);color:var(--nx-ink2)}
:where(:root[data-page="bill-reclass"]) .brc-pill.fix{background:var(--nx-hover);color:var(--nx-ink3)}
:where(:root[data-page="bill-reclass"]) table.brc tr.muted td{opacity:.55}
:where(:root[data-page="bill-reclass"]) table.brc tr.muted:hover td{opacity:1}
:where(:root[data-page="bill-reclass"]) .brc-note-sm{font-size:10.5px;color:var(--nx-ink3);margin-top:3px;max-width:190px;line-height:1.35}
:where(:root[data-page="bill-reclass"]) .brc-empty{padding:34px;text-align:center;color:var(--nx-ink3);font-size:13px}
:where(:root[data-page="bill-reclass"]) .brc-steps{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;color:var(--nx-ink2);white-space:pre-wrap;line-height:1.55}
:where(:root[data-page="bill-reclass"]) .brc-tabs{display:flex;gap:6px;margin-left:auto}
:where(:root[data-page="bill-reclass"]) .brc-optbox{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--nx-ink2);user-select:none;padding-bottom:7px}
:where(:root[data-page="bill-reclass"]) .brc-optbox input{position:absolute;opacity:0;width:0;height:0}
:where(:root[data-page="bill-reclass"]) .brc-optbox .box{width:16px;height:16px;border:1.6px solid var(--nx-line2);border-radius:5px;background:var(--nx-elev);display:inline-block;position:relative;flex:none}
:where(:root[data-page="bill-reclass"]) .brc-optbox input:checked + .box{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-optbox input:checked + .box:after{content:'';position:absolute;left:4.6px;top:1.4px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
:where(:root[data-page="bill-reclass"]) .brc-modes{display:flex;gap:8px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="bill-reclass"]) .brc-mode{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);border-radius:9px;padding:8px 15px;font-size:12.5px;font-weight:700;cursor:pointer}
:where(:root[data-page="bill-reclass"]) .brc-mode:hover{border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-mode.on{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="bill-reclass"]) .brc-tab{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);border-radius:8px;padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer}
:where(:root[data-page="bill-reclass"]) .brc-tab.on{background:var(--brand-lt);border-color:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-spin{display:inline-block;width:13px;height:13px;border:2px solid var(--nx-line2);border-top-color:var(--brand);border-radius:50%;animation:brcspin .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes brcspin{to{transform:rotate(360deg)}}

/* --- reclass modal + progress (never a browser confirm) --- */
:where(:root[data-page="bill-reclass"]) .brc-dim{display:none;position:fixed;inset:0;background:rgba(15,17,26,.45);z-index:300}
:where(:root[data-page="bill-reclass"]) .brc-dim.show{display:flex;align-items:center;justify-content:center;padding:20px}
:where(:root[data-page="bill-reclass"]) .brc-modal{background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.28);width:560px;max-width:100%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
:where(:root[data-page="bill-reclass"]) .brc-modal-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="bill-reclass"]) .brc-modal-title{font-weight:800;font-size:14.5px;letter-spacing:-.01em}
:where(:root[data-page="bill-reclass"]) .brc-modal-x{margin-left:auto;border:0;background:transparent;color:var(--nx-ink3);cursor:pointer;font-size:17px;line-height:1;padding:4px 7px;border-radius:7px}
:where(:root[data-page="bill-reclass"]) .brc-modal-x:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="bill-reclass"]) .brc-modal-body{padding:16px 18px;overflow:auto}
:where(:root[data-page="bill-reclass"]) .brc-modal-foot{display:flex;gap:9px;justify-content:flex-end;padding:13px 18px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="bill-reclass"]) .brc-sum{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:13px}
:where(:root[data-page="bill-reclass"]) .brc-sum .cell{background:var(--nx-hover);border-radius:10px;padding:10px 12px}
:where(:root[data-page="bill-reclass"]) .brc-sum .k{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--nx-ink3)}
:where(:root[data-page="bill-reclass"]) .brc-sum .v{font-size:15px;font-weight:800;margin-top:2px;word-break:break-word}
:where(:root[data-page="bill-reclass"]) .brc-warnline{font-size:12.5px;color:var(--nx-ink2);line-height:1.5}
:where(:root[data-page="bill-reclass"]) .brc-prog{height:8px;background:var(--nx-hover);border-radius:6px;overflow:hidden;margin:4px 0 12px}
:where(:root[data-page="bill-reclass"]) .brc-prog span{display:block;height:100%;width:0%;background:var(--brand);border-radius:6px;transition:width .25s}
:where(:root[data-page="bill-reclass"]) .brc-log{font-size:12px;line-height:1.5;max-height:280px;overflow:auto;border:1px solid var(--nx-line);border-radius:10px;padding:9px 12px}
:where(:root[data-page="bill-reclass"]) .brc-log .ln{padding:3px 0;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="bill-reclass"]) .brc-log .ln:last-child{border-bottom:0}
:where(:root[data-page="bill-reclass"]) .brc-log .ok{color:var(--brand);font-weight:600}
:where(:root[data-page="bill-reclass"]) .brc-log .bad{color:#B91C1C;font-weight:600}
:root[data-theme="dark"]:where([data-page="bill-reclass"]) .brc-log .bad{color:#FCA5A5}
:where(:root[data-page="bill-reclass"]) .brc-pill.moved{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-mini{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);border-radius:7px;padding:4px 9px;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap}
:where(:root[data-page="bill-reclass"]) .brc-mini:hover{background:var(--brand-lt);border-color:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-mini:disabled:hover{background:var(--nx-elev);border-color:var(--nx-line2);color:var(--nx-ink2)}
:where(:root[data-page="bill-reclass"]) .brc-log .brc-mini{margin:5px 0}
:where(:root[data-page="bill-reclass"]) .brc-vlist{margin:8px 0;padding:9px 11px;border:1px solid var(--nx-line);border-radius:8px;background:var(--nx-elev);font-size:12px;line-height:1.7;max-height:220px;overflow:auto}
:where(:root[data-page="bill-reclass"]) .brc-mini:disabled{opacity:.4;cursor:default}
:where(:root[data-page="bill-reclass"]) .brc-ask{margin-right:auto;font-size:12px;color:var(--nx-ink2);align-self:center;text-align:left}
:where(:root[data-page="bill-reclass"]) .brc-check{display:flex;align-items:flex-start;gap:9px;margin-top:13px;font-size:12.5px;color:var(--nx-ink2);cursor:pointer;line-height:1.45}
:where(:root[data-page="bill-reclass"]) .brc-check input{position:absolute;opacity:0;width:0;height:0}
:where(:root[data-page="bill-reclass"]) .brc-check .box{flex:0 0 auto;width:16px;height:16px;margin-top:1px;border:1.5px solid var(--nx-line2);border-radius:5px;background:var(--nx-elev);position:relative}
:where(:root[data-page="bill-reclass"]) .brc-check input:checked + .box{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-check input:checked + .box::after{content:'';position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}

/* --- picking rows --- */
:where(:root[data-page="bill-reclass"]) table.brc th.chk,:where(:root[data-page="bill-reclass"]) table.brc td.chk{width:32px;padding-left:13px;padding-right:0}
:where(:root[data-page="bill-reclass"]) table.brc td.chk{padding-top:10px}
:where(:root[data-page="bill-reclass"]) .brc-cb{display:inline-flex;cursor:pointer}
:where(:root[data-page="bill-reclass"]) .brc-cb input{position:absolute;opacity:0;width:0;height:0}
:where(:root[data-page="bill-reclass"]) .brc-cb .box{display:block;width:15px;height:15px;border:1.5px solid var(--nx-line2);border-radius:5px;background:var(--nx-elev);position:relative}
:where(:root[data-page="bill-reclass"]) .brc-cb:hover .box{border-color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-cb input:checked + .box{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="bill-reclass"]) .brc-cb input:checked + .box::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
:where(:root[data-page="bill-reclass"]) .brc-cb input:focus-visible + .box{outline:2px solid var(--brand);outline-offset:2px}
:where(:root[data-page="bill-reclass"]) .brc-selbar{display:none;align-items:center;gap:9px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--nx-line);background:var(--nx-hover)}
:where(:root[data-page="bill-reclass"]) .brc-selbar.on{display:flex}
:where(:root[data-page="bill-reclass"]) .brc-selbar .n{font-size:12.5px;font-weight:700;margin-right:auto}
:where(:root[data-page="bill-reclass"]) .brc-mini + .brc-mini{margin-top:4px}

/* --- small fields inside the panel --- */
:where(:root[data-page="bill-reclass"]) .brc-mfld{display:flex;gap:12px;flex-wrap:wrap;margin-top:13px}
:where(:root[data-page="bill-reclass"]) .brc-mfld .f{flex:1;min-width:150px;display:flex;flex-direction:column;gap:5px}
:where(:root[data-page="bill-reclass"]) .brc-mfld .f .brc-typein{margin-top:0}
:where(:root[data-page="bill-reclass"]) .brc-mfld .hint{font-size:11px;color:var(--nx-ink3);margin-top:4px}

/* --- toast (never a browser alert) --- */
:where(:root[data-page="bill-reclass"]) .brc-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);opacity:0;pointer-events:none;background:var(--nx-ink);color:var(--nx-surface);padding:10px 16px;border-radius:11px;font-size:12.5px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.22);transition:opacity .18s,transform .18s;z-index:200;max-width:80vw}
:where(:root[data-page="bill-reclass"]) .brc-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}


/* ----------------------------------------------------------------------------
 * 15.18  General -- Facilities
 * general/facilities.php, data-page="facilities"
 * -------------------------------------------------------------------------- */
/* Everything here is prefixed fi- so nothing collides with portal.css. */
/* Plain grey hover -- the theme's own hover colour is lilac. */
:where(:root[data-page="facilities"]) .nx-app{--fi-hover:#F3F4F6}
:root[data-theme="dark"]:where([data-page="facilities"]) .nx-app{--fi-hover:#242833}
:where(:root[data-page="facilities"]) .fi-view{display:none}
:where(:root[data-page="facilities"]) .fi-view.on{display:block}

/* -- Inside the General frame: the frame draws the sidebar and top bar, so
      this page is just its content, edge to edge. -- */
html.fi-embed:where([data-page="facilities"]) body{background:var(--nx-surface)}
html.fi-embed:where([data-page="facilities"]) .nx-app{grid-template-columns:minmax(0,1fr);height:100vh;margin:0;border:0;border-radius:0;box-shadow:none}
html.fi-embed:where([data-page="facilities"]) .nx-topbar{display:none}
/* The frame hides this page's last 22px on the right (to hide its scrollbar),
   so the right padding is doubled to leave a visible 22px, as Month End does. */
html.fi-embed:where([data-page="facilities"]) .nx-scrollarea{padding-right:44px}
/* The Excel choices, opened from the frame's top bar, drop from the top right. */
:where(:root[data-page="facilities"]) .fi-dd.fi-exp-float{position:fixed;top:6px;right:44px;z-index:90}

/* -- Buttons -- */
:where(:root[data-page="facilities"]) .fi-btn{height:34px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);
  border-radius:10px;padding:0 12px;font-weight:650;font-size:12.5px;font-family:inherit;
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap}
:where(:root[data-page="facilities"]) .fi-btn svg{width:15px;height:15px}
:where(:root[data-page="facilities"]) .fi-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="facilities"]) .fi-btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="facilities"]) .fi-btn.pri:hover{background:var(--blue-dk);color:#fff}
:where(:root[data-page="facilities"]) .fi-btn.on{background:var(--brand-lt);border-color:transparent;color:var(--brand)}
:where(:root[data-page="facilities"]) .fi-btn[disabled]{opacity:.5;cursor:default}

/* -- Toolbar -- */
:where(:root[data-page="facilities"]) .fi-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:13px}
:where(:root[data-page="facilities"]) .fi-find{display:flex;align-items:center;gap:8px;background:var(--nx-elev);border:1px solid var(--nx-line2);
  border-radius:10px;padding:0 11px;height:34px;min-width:250px;color:var(--nx-ink3)}
:where(:root[data-page="facilities"]) .fi-find svg{width:15px;height:15px;flex:none}
:where(:root[data-page="facilities"]) .fi-find input{border:0;background:transparent;outline:none;font:inherit;font-size:12.5px;
  color:var(--nx-ink);width:100%;height:100%}
:where(:root[data-page="facilities"]) .fi-spacer{flex:1}
:where(:root[data-page="facilities"]) .fi-count{font-size:12px;color:var(--nx-ink3);font-weight:600;white-space:nowrap}

/* -- Our own drop-downs (never a native select) -- */
:where(:root[data-page="facilities"]) .fi-dd{position:relative}
:where(:root[data-page="facilities"]) .fi-dd-btn{height:34px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);
  border-radius:10px;padding:0 10px;font-weight:600;font-size:12.5px;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;max-width:250px}
:where(:root[data-page="facilities"]) .fi-dd-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="facilities"]) .fi-dd-btn .cap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="facilities"]) .fi-dd-btn .car{width:9px;height:9px;flex:none;opacity:.6}
:where(:root[data-page="facilities"]) .fi-dd-btn.set{border-color:var(--brand);color:var(--brand);background:var(--brand-lt)}
:where(:root[data-page="facilities"]) .fi-dd-pop{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:80;min-width:230px;
  max-height:330px;overflow:auto;background:var(--nx-elev);border:1px solid var(--nx-line2);
  border-radius:12px;box-shadow:var(--nx-shadow-lg);padding:6px}
:where(:root[data-page="facilities"]) .fi-dd.open .fi-dd-pop{display:block}
:where(:root[data-page="facilities"]) .fi-dd-pop.right{left:auto;right:0}
:where(:root[data-page="facilities"]) .fi-dd-o{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;
  color:var(--nx-ink);font:inherit;font-size:12.5px;text-align:left;padding:7px 9px;border-radius:8px;cursor:pointer}
:where(:root[data-page="facilities"]) .fi-dd-o:hover{background:var(--fi-hover)}
:where(:root[data-page="facilities"]) .fi-dd-o .tick{width:15px;height:15px;flex:none;border:1.5px solid var(--nx-line2);border-radius:5px;
  display:flex;align-items:center;justify-content:center}
:where(:root[data-page="facilities"]) .fi-dd-o.on .tick{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="facilities"]) .fi-dd-o .tick svg{width:10px;height:10px;display:none}
:where(:root[data-page="facilities"]) .fi-dd-o.on .tick svg{display:block}
:where(:root[data-page="facilities"]) .fi-dd-o .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="facilities"]) .fi-dd-head{display:flex;align-items:center;justify-content:space-between;padding:5px 9px 7px;
  font-size:10.5px;font-weight:750;text-transform:uppercase;letter-spacing:.05em;color:var(--nx-ink3)}
:where(:root[data-page="facilities"]) .fi-dd-head button{border:0;background:transparent;color:var(--brand);font:inherit;font-size:11px;
  font-weight:700;cursor:pointer;padding:0}
:where(:root[data-page="facilities"]) .fi-dd-find{padding:0 4px 6px}
:where(:root[data-page="facilities"]) .fi-dd-find input{width:100%;height:30px;border:1px solid var(--nx-line2);background:var(--nx-bg);
  border-radius:8px;padding:0 9px;font:inherit;font-size:12px;color:var(--nx-ink);outline:none}
:where(:root[data-page="facilities"]) .fi-dd-sep{height:1px;background:var(--nx-line);margin:5px 4px}

/* -- The list -- */
/* The card runs to the foot of the page whatever the row count, so a short
   list sits in white space rather than a card that stops halfway,
   20px above and below it; the chips row, when there is one, takes 36px. */
:where(:root[data-page="facilities"]) .fi-tblwrap{overflow:auto;height:calc(100vh - 42px);min-height:360px}
:where(:root[data-page="facilities"]) .fi-meta{display:flex;align-items:center;gap:10px;min-height:26px;margin-bottom:10px}
:where(:root[data-page="facilities"]) .fi-meta[hidden]{display:none}
:where(:root[data-page="facilities"]) .fi-meta .fi-tags{flex:1;margin:0}
:where(:root[data-page="facilities"]) .fi-meta:not([hidden]) + .nx-card .fi-tblwrap{height:calc(100vh - 78px)}
html.fi-embed:where([data-page="facilities"]) .nx-scrollarea:has(#v-grid.on){padding-bottom:20px}
/* The search, Active / Inactive and the drop-down buttons sit in the frame's
   top bar (leadHtml). Only the lists live here; they open from the top of
   the page, under the button that was clicked. */
:where(:root[data-page="facilities"]) .fi-ddhost{position:fixed;top:0;left:0;width:0;height:0;overflow:visible;z-index:90}
:where(:root[data-page="facilities"]) .fi-ddhost .fi-dd{position:fixed;top:0;left:0}
:where(:root[data-page="facilities"]) .fi-ddhost .fi-dd-btn{display:none}
:where(:root[data-page="facilities"]) .fi-ddhost .fi-dd-pop{top:6px}
:where(:root[data-page="facilities"]) .fi-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
:where(:root[data-page="facilities"]) .fi-tbl th{position:sticky;top:0;z-index:2;background:var(--nx-rail);color:var(--nx-ink3);
  font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:750;text-align:left;
  padding:9px 12px;border-bottom:1px solid var(--nx-line);white-space:nowrap;cursor:pointer;user-select:none}
:where(:root[data-page="facilities"]) .fi-tbl th:hover{color:var(--nx-ink)}
:where(:root[data-page="facilities"]) .fi-tbl th .ar{opacity:0;margin-left:5px}
:where(:root[data-page="facilities"]) .fi-tbl th.sorted .ar{opacity:1;color:var(--brand)}
:where(:root[data-page="facilities"]) .fi-tbl td{padding:9px 12px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink2);
  white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="facilities"]) .fi-tbl td.k{color:var(--nx-ink);font-weight:650}
:where(:root[data-page="facilities"]) .fi-tbl tbody tr{cursor:pointer}
:where(:root[data-page="facilities"]) .fi-tbl tbody tr:hover td{background:var(--fi-hover)}
:where(:root[data-page="facilities"]) .fi-tbl tbody tr:last-child td{border-bottom:0}
:where(:root[data-page="facilities"]) .fi-mute{color:var(--nx-ink3)}

/* -- One facility -- */
:where(:root[data-page="facilities"]) .fi-hero{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--nx-elev),var(--brand-lt));border:1px solid var(--nx-line);
  border-radius:16px;padding:18px 20px;margin-bottom:14px}
:where(:root[data-page="facilities"]) .fi-hero-mark{width:46px;height:46px;border-radius:13px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex:none}
:where(:root[data-page="facilities"]) .fi-hero h2{margin:0 0 3px;font-size:18px;font-weight:750;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="facilities"]) .fi-hero .sub{font-size:12.5px;color:var(--nx-ink2)}
:where(:root[data-page="facilities"]) .fi-hero-right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

:where(:root[data-page="facilities"]) .fi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px;align-items:start}
:where(:root[data-page="facilities"]) .fi-sec{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:14px;overflow:hidden}
:where(:root[data-page="facilities"]) .fi-sec-h{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="facilities"]) .fi-sec-h svg{width:15px;height:15px;color:var(--brand)}
:where(:root[data-page="facilities"]) .fi-sec-t{font-size:12.5px;font-weight:750;color:var(--nx-ink)}
:where(:root[data-page="facilities"]) .fi-sec-n{margin-left:auto;font-size:11px;color:var(--nx-ink3);font-weight:600}
:where(:root[data-page="facilities"]) .fi-dl{padding:5px 15px 12px}
:where(:root[data-page="facilities"]) .fi-row{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="facilities"]) .fi-row:last-child{border-bottom:0}
:where(:root[data-page="facilities"]) .fi-row dt{font-size:11.5px;color:var(--nx-ink3);font-weight:600}
:where(:root[data-page="facilities"]) .fi-row dd{margin:0;font-size:12.5px;color:var(--nx-ink);font-weight:550;word-break:break-word}
:where(:root[data-page="facilities"]) .fi-row dd a{color:var(--accent-blue);text-decoration:none}
:where(:root[data-page="facilities"]) .fi-row dd a:hover{text-decoration:underline}
:where(:root[data-page="facilities"]) .fi-ppl{line-height:1.55;font-weight:500;color:var(--nx-ink2)}
:where(:root[data-page="facilities"]) .fi-ppl + .fi-ppl{margin-top:9px}
:where(:root[data-page="facilities"]) .fi-ppl .nm{font-weight:650;color:var(--nx-ink)}
:where(:root[data-page="facilities"]) .fi-row dd.long{white-space:pre-wrap;line-height:1.5;font-weight:500}
:where(:root[data-page="facilities"]) .fi-cp{cursor:pointer;border-radius:999px;padding:2px 8px;margin:-2px -8px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background .12s}
:where(:root[data-page="facilities"]) .fi-cp:hover{background:var(--brand-lt)}

:where(:root[data-page="facilities"]) .fi-wide{grid-column:1/-1}
:where(:root[data-page="facilities"]) .fi-sub{overflow:auto}
:where(:root[data-page="facilities"]) .fi-sub table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
:where(:root[data-page="facilities"]) .fi-sub th{background:var(--nx-rail);color:var(--nx-ink3);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.05em;font-weight:750;text-align:left;padding:8px 12px;border-bottom:1px solid var(--nx-line);white-space:nowrap}
:where(:root[data-page="facilities"]) .fi-sub td{padding:8px 12px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink2);white-space:nowrap}
:where(:root[data-page="facilities"]) .fi-sub tr:last-child td{border-bottom:0}

:where(:root[data-page="facilities"]) .fi-empty{padding:30px 18px;text-align:center;color:var(--nx-ink3);font-size:12.5px}

/* -- Chips showing which filters are on -- */
:where(:root[data-page="facilities"]) .fi-tags{display:flex;gap:7px;flex-wrap:wrap;margin:-4px 0 12px}
:where(:root[data-page="facilities"]) .fi-tag{display:inline-flex;align-items:center;gap:6px;background:var(--brand-lt);color:var(--brand);
  border-radius:999px;padding:4px 6px 4px 11px;font-size:11.5px;font-weight:650}
:where(:root[data-page="facilities"]) .fi-tag button{border:0;background:transparent;color:inherit;cursor:pointer;padding:0;
  width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:50%}
:where(:root[data-page="facilities"]) .fi-tag button:hover{background:rgba(0,0,0,.08)}
:where(:root[data-page="facilities"]) .fi-tag svg{width:9px;height:9px}

/* -- Our own hover note, so the browser's never shows -- */
:where(:root[data-page="facilities"]) .fi-tip{position:fixed;display:none;z-index:400;background:var(--nx-toast-bg);color:var(--nx-toast-ink);
  font-size:11.5px;font-weight:500;line-height:1.4;padding:7px 10px;border-radius:9px;max-width:250px;
  box-shadow:var(--nx-shadow-lg);pointer-events:none}
/* -- Our own message chip -- */
:where(:root[data-page="facilities"]) .fi-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--nx-toast-bg);color:var(--nx-toast-ink);padding:10px 16px;border-radius:11px;
  font-size:12.5px;font-weight:600;opacity:0;pointer-events:none;transition:.18s;z-index:500;
  box-shadow:var(--nx-shadow-lg)}
:where(:root[data-page="facilities"]) .fi-toast.show{opacity:1;transform:translateX(-50%)}

/* -- Company tag, same colours as the other portal pages -- */
:where(:root[data-page="facilities"]) .fi-co{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11px;font-weight:650;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
:where(:root[data-page="facilities"]) .fi-dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;margin-right:2px}
:where(:root[data-page="facilities"]) .fi-flag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:10.5px;font-weight:650;
  background:var(--nx-line);color:var(--nx-ink3);margin-left:7px;vertical-align:middle}

/* -- Active / Inactive / All -- */
:where(:root[data-page="facilities"]) .fi-seg{display:inline-flex;align-items:center;height:34px;padding:2px;gap:2px;
  background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:10px}
:where(:root[data-page="facilities"]) .fi-seg button{border:0;background:transparent;color:var(--nx-ink3);font:inherit;font-size:12.5px;
  font-weight:650;padding:0 11px;height:28px;border-radius:8px;cursor:pointer;white-space:nowrap}
:where(:root[data-page="facilities"]) .fi-seg button:hover{color:var(--nx-ink)}
:where(:root[data-page="facilities"]) .fi-seg button.on{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="facilities"]) .fi-seg button .n{opacity:.65;font-weight:600;margin-left:4px}

/* -- Typing into a record -- */
:where(:root[data-page="facilities"]) .fi-in{width:100%;height:32px;border:1px solid var(--nx-line2);background:var(--nx-bg);
  border-radius:8px;padding:0 9px;font:inherit;font-size:12.5px;color:var(--nx-ink);outline:none}
:where(:root[data-page="facilities"]) .fi-in:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="facilities"]) .fi-in.ta{height:74px;padding:7px 9px;line-height:1.45;resize:vertical}
:where(:root[data-page="facilities"]) .fi-row.edit{align-items:center;padding:7px 0}
:where(:root[data-page="facilities"]) .fi-row.edit dt{padding-top:0}
:where(:root[data-page="facilities"]) .fi-req{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:9px;font-size:9.5px;
  font-weight:700;background:var(--brand-lt);color:var(--brand);vertical-align:middle}
:where(:root[data-page="facilities"]) .fi-lock{display:flex;align-items:center;gap:7px;min-height:32px;font-size:12.5px;font-weight:650;
  color:var(--nx-ink)}
:where(:root[data-page="facilities"]) .fi-lock svg{width:13px;height:13px;flex:none;color:var(--nx-ink3)}
:where(:root[data-page="facilities"]) .fi-lock .why{font-weight:500;font-size:11.5px;color:var(--nx-ink3)}
:where(:root[data-page="facilities"]) .fi-sec.editing{overflow:visible}
:where(:root[data-page="facilities"]) .fi-sub .fi-in{height:29px;min-width:130px;font-size:12px}
:where(:root[data-page="facilities"]) .fi-sub td.act{width:1%;white-space:nowrap}
:where(:root[data-page="facilities"]) .fi-subbar{display:flex;align-items:center;gap:9px;padding:11px 15px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="facilities"]) .fi-xbtn{height:27px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink3);
  border-radius:8px;padding:0 9px;font:inherit;font-size:11.5px;font-weight:650;cursor:pointer}
:where(:root[data-page="facilities"]) .fi-xbtn:hover{border-color:var(--red,#C0392B);color:var(--red,#C0392B)}
:where(:root[data-page="facilities"]) .fi-person{display:flex;align-items:flex-start;gap:6px;margin-bottom:8px}
:where(:root[data-page="facilities"]) .fi-person .fs{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px}
:where(:root[data-page="facilities"]) .fi-person .fs .f{flex:1 1 130px;min-width:0}
:where(:root[data-page="facilities"]) .fi-person .fi-xbtn{margin-top:3px}
:where(:root[data-page="facilities"]) .fi-xbtn.add:hover{border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="facilities"]) .fi-seg.sm{height:32px}
:where(:root[data-page="facilities"]) .fi-seg.sm button{height:26px;font-size:12px}
:where(:root[data-page="facilities"]) .fi-note{margin-top:14px;padding:11px 14px;border:1px dashed var(--nx-line2);border-radius:12px;
  color:var(--nx-ink3);font-size:12px}

/* -- Our own yes/no box, so the browser's never shows -- */
:where(:root[data-page="facilities"]) .fi-ask{position:fixed;inset:0;z-index:600;background:var(--nx-overlay,rgba(17,20,28,.45));
  display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:.14s}
:where(:root[data-page="facilities"]) .fi-ask.on{opacity:1}
:where(:root[data-page="facilities"]) .fi-ask-box{width:100%;max-width:370px;background:var(--nx-elev);border:1px solid var(--nx-line);
  border-radius:16px;box-shadow:var(--nx-shadow-lg);padding:18px 19px;transform:translateY(8px);transition:.14s}
:where(:root[data-page="facilities"]) .fi-ask.on .fi-ask-box{transform:none}
:where(:root[data-page="facilities"]) .fi-ask-t{font-size:14px;font-weight:750;color:var(--nx-ink);margin-bottom:5px}
:where(:root[data-page="facilities"]) .fi-ask-b{font-size:12.5px;color:var(--nx-ink2);line-height:1.5}
:where(:root[data-page="facilities"]) .fi-ask-f{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

:where(:root[data-page="facilities"]) .fi-load{padding:48px;text-align:center;color:var(--nx-ink3);font-size:12.5px}
:where(:root[data-page="facilities"]) .fi-spin{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;display:inline-block;animation:fiSpin .7s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes fiSpin{to{transform:rotate(360deg)}}


/* ----------------------------------------------------------------------------
 * 15.19  Cash -- Transfer entry
 * cash/transfer-entry.php, data-page="transfer-entry"
 * -------------------------------------------------------------------------- */
  /* The tool's own palette, pointed at the portal's. Everything below this
     block is the tool's stylesheet as it was, so it themes for free and runs
     on the Cash coral rather than its own green. */
  :root:where([data-page="transfer-entry"]){
    --paper:var(--nx-surface);--card:var(--nx-surface);--ink:var(--nx-ink);--dim:var(--nx-ink2);
    --faint:var(--nx-ink3);--line:var(--nx-line);--line2:var(--nx-line2);--rail:var(--nx-rail);
    --hover:var(--nx-hover);
    --accent:var(--brand);--accent-soft:var(--brand-lt);--accent-dk:var(--blue-dk);
    --on-accent:var(--nx-on-brand);
    --flag:#9a5b06;--flag-soft:#fbf1df;
    --err:#8c2b2b;--err-strong:#c0392b;--err-soft:#fbeaea;--err-line:#d9a3a3;
    --info:#1e478f;--info-soft:#e7eefb;
    --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
    --sans:var(--nx-font);
  }
  :root[data-theme="dark"]:where([data-page="transfer-entry"]){
    --flag:#e8b765;--flag-soft:#3a2d16;
    --err:#f0a9a4;--err-strong:#e0695c;--err-soft:#3a1f1d;--err-line:#6b3a35;
    --info:#9dbcf2;--info-soft:#1c2740;
  }

  /* ---- the tool's own stylesheet, unchanged apart from the colours ---- */
  :where(:root[data-page="transfer-entry"]) body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
  /* The frame's scroll area is the page. An embedded page loses about 22px
     off its right edge inside the frame, so the right padding is doubled. */
  :root[data-page="transfer-entry"]:where([data-page="transfer-entry"]) .nx-scroll{padding:14px 44px 28px 22px}
  :where(:root[data-page="transfer-entry"]) .navrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
  :where(:root[data-page="transfer-entry"]) button.act.big{font-size:13px;padding:8px 15px;font-weight:500}
  :where(:root[data-page="transfer-entry"]) button.act.big.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  :where(:root[data-page="transfer-entry"]) nav{display:flex;gap:4px;width:fit-content;margin-bottom:10px;flex-wrap:wrap}
  :where(:root[data-page="transfer-entry"]) nav button{font:inherit;font-size:13px;font-weight:500;border:0;background:transparent;color:var(--dim);padding:9px 12px;border-radius:10px;cursor:pointer}
  :where(:root[data-page="transfer-entry"]) nav button:hover{background:var(--hover);color:var(--ink)}
  :where(:root[data-page="transfer-entry"]) nav button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
  :where(:root[data-page="transfer-entry"]) nav button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  :where(:root[data-page="transfer-entry"]) .count{color:var(--faint);font-variant-numeric:tabular-nums}
  /* nexus.css draws .panel as a card -- border, radius, shadow and a hidden
     overflow. These are tab bodies, not cards: the frame was a second box
     around the table's own, and the hidden overflow clipped it. */
  :where(:root[data-page="transfer-entry"]) .panel{display:none;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
  :where(:root[data-page="transfer-entry"]) .panel.on{display:block}

  :where(:root[data-page="transfer-entry"]) .drop{border:1.5px dashed var(--line2);background:var(--rail);border-radius:16px;padding:26px 18px;text-align:center;cursor:pointer;transition:border-color .12s,background .12s}
  :where(:root[data-page="transfer-entry"]) .drop.hot{border-color:var(--accent);background:var(--accent-soft)}
  :where(:root[data-page="transfer-entry"]) .drop strong{display:block;font-size:14px;font-weight:600;margin-bottom:3px}
  :where(:root[data-page="transfer-entry"]) .drop span{color:var(--dim);font-size:12px}
  :where(:root[data-page="transfer-entry"]) .drop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  :where(:root[data-page="transfer-entry"]) .bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}
  :where(:root[data-page="transfer-entry"]) .bar .sp{flex:1}
  :where(:root[data-page="transfer-entry"]) button.act{font:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--line2);background:var(--card);color:var(--ink);padding:7px 13px;border-radius:9px;cursor:pointer}
  :where(:root[data-page="transfer-entry"]) button.act:hover{background:var(--hover)}
  :where(:root[data-page="transfer-entry"]) button.act.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  :where(:root[data-page="transfer-entry"]) button.act.primary:hover{background:var(--accent-dk)}
  :where(:root[data-page="transfer-entry"]) button.act:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

  :where(:root[data-page="transfer-entry"]) .item{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden}
  :where(:root[data-page="transfer-entry"]) .item-top{display:flex;gap:10px;align-items:center;padding:9px 11px;border-bottom:1px solid var(--line)}
  :where(:root[data-page="transfer-entry"]) .thumb{width:44px;height:34px;object-fit:cover;border-radius:4px;border:1px solid var(--line);cursor:zoom-in;background:var(--nx-bg)}
  :where(:root[data-page="transfer-entry"]) .item-name{font-size:12px;color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  :where(:root[data-page="transfer-entry"]) .state{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--hover);color:var(--dim)}
  :where(:root[data-page="transfer-entry"]) .state.ok{background:var(--accent-soft);color:var(--accent)}
  :where(:root[data-page="transfer-entry"]) .state.err{background:var(--err-soft);color:var(--err)}
  :where(:root[data-page="transfer-entry"]) .state.work{background:var(--info-soft);color:var(--info)}
  :where(:root[data-page="transfer-entry"]) .state.warn{background:var(--flag-soft);color:var(--flag)}

  :where(:root[data-page="transfer-entry"]) .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
  :where(:root[data-page="transfer-entry"]) .cell{background:var(--card);padding:6px 9px 7px}
  :where(:root[data-page="transfer-entry"]) .cell label{display:block;font-size:10.5px;color:var(--faint);margin-bottom:1px}
  :where(:root[data-page="transfer-entry"]) .cell input{font:inherit;font-size:12.5px;width:100%;border:0;padding:1px 0;background:transparent;color:var(--ink)}
  :where(:root[data-page="transfer-entry"]) .cell input:focus{outline:0;box-shadow:0 1px 0 var(--accent)}
  :where(:root[data-page="transfer-entry"]) .cell.num input{font-family:var(--mono);font-variant-numeric:tabular-nums}
  :where(:root[data-page="transfer-entry"]) .cell.check{background:var(--flag-soft)}
  :where(:root[data-page="transfer-entry"]) .cell.check label{color:var(--flag)}
  :where(:root[data-page="transfer-entry"]) .cell.auto{background:var(--accent-soft)}
  :where(:root[data-page="transfer-entry"]) .cell.auto label{color:var(--accent)}
  :where(:root[data-page="transfer-entry"]) .cell.span2{grid-column:span 2}
  :where(:root[data-page="transfer-entry"]) .cell.span4{grid-column:span 4}
  @media (max-width:760px){
    :where(:root[data-page="transfer-entry"]) .grid{grid-template-columns:repeat(2,1fr)}
    :where(:root[data-page="transfer-entry"]) .cell.span2,:where(:root[data-page="transfer-entry"]) .cell.span4{grid-column:span 2}
  }

  :where(:root[data-page="transfer-entry"]) .rowhint{padding:7px 12px;font-size:11.5px;color:var(--dim);background:var(--rail);border-top:1px solid var(--line)}
  :where(:root[data-page="transfer-entry"]) .rowhint.dup{background:var(--err-soft);color:var(--err);border-top-color:var(--err-line)}
  :where(:root[data-page="transfer-entry"]) .rowhint.dup b{font-weight:700;letter-spacing:.04em}
  :where(:root[data-page="transfer-entry"]) .rowhint.nearmatch{background:var(--hover);color:var(--dim)}
  :where(:root[data-page="transfer-entry"]) .item-foot{display:flex;gap:8px;padding:8px 11px;border-top:1px solid var(--line);align-items:center;flex-wrap:wrap}
  :where(:root[data-page="transfer-entry"]) .item-foot .msg{flex:1;font-size:11.5px;color:var(--dim);min-width:140px}

  :where(:root[data-page="transfer-entry"]) .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;scrollbar-color:var(--nx-line2) transparent}
  :where(:root[data-page="transfer-entry"]) .tablewrap::-webkit-scrollbar{height:11px}
  :where(:root[data-page="transfer-entry"]) .tablewrap::-webkit-scrollbar-thumb{background:var(--nx-line2);border-radius:6px;border:3px solid var(--card)}
  :where(:root[data-page="transfer-entry"]) .tablewrap::-webkit-scrollbar-track{background:var(--card)}
  :where(:root[data-page="transfer-entry"]) td.clip{max-width:230px;overflow:hidden;text-overflow:ellipsis}
  :where(:root[data-page="transfer-entry"]) th.act,:where(:root[data-page="transfer-entry"]) td.act{position:sticky;left:0;z-index:2;background:var(--card);border-right:1px solid var(--line)}
  :where(:root[data-page="transfer-entry"]) thead tr.filters th.act{z-index:3}
  :where(:root[data-page="transfer-entry"]) tbody tr:hover td.act{background:var(--hover)}
  :where(:root[data-page="transfer-entry"]) table{width:100%;border-collapse:collapse;font-size:12px;background:var(--card)}
  :where(:root[data-page="transfer-entry"]) th.sortable{cursor:pointer;user-select:none}
  :where(:root[data-page="transfer-entry"]) th.sortable:hover{background:var(--hover)}
  :where(:root[data-page="transfer-entry"]) .sortmark{font-style:normal;font-size:9px;margin-left:4px;color:var(--accent)}
  :where(:root[data-page="transfer-entry"]) th{text-align:left;font-weight:700;font-size:11px;color:var(--dim);padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--rail)}
  :where(:root[data-page="transfer-entry"]) td{padding:6px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
  :where(:root[data-page="transfer-entry"]) tr:last-child td{border-bottom:0}
  :where(:root[data-page="transfer-entry"]) td.num,:where(:root[data-page="transfer-entry"]) th.num{text-align:right}
  :where(:root[data-page="transfer-entry"]) td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
  :where(:root[data-page="transfer-entry"]) tbody tr:hover{background:var(--hover)}
  :where(:root[data-page="transfer-entry"]) .linkbtn{border:0;background:transparent;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer;padding:0}
  :where(:root[data-page="transfer-entry"]) .linkbtn:hover{color:var(--accent-dk)}
  :where(:root[data-page="transfer-entry"]) .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px;align-items:center}
  :where(:root[data-page="transfer-entry"]) .chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);border:1px solid var(--accent);
    color:var(--ink);border-radius:20px;padding:3px 4px 3px 11px;font-size:12px}
  :where(:root[data-page="transfer-entry"]) .chip em{font-style:normal;color:var(--dim);font-size:10.5px}
  :where(:root[data-page="transfer-entry"]) .chip button{border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:14px;line-height:1;padding:0 5px;border-radius:50%}
  :where(:root[data-page="transfer-entry"]) .chip button:hover{color:var(--err);background:var(--err-soft)}
  :where(:root[data-page="transfer-entry"]) .chipclear{border:0;background:transparent;color:var(--dim);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;padding:3px 4px}
  :where(:root[data-page="transfer-entry"]) .chipclear:hover{color:var(--ink)}
  :where(:root[data-page="transfer-entry"]) .pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;line-height:1.5}
  :where(:root[data-page="transfer-entry"]) td.pick{cursor:pointer}
  :where(:root[data-page="transfer-entry"]) td.pick:hover{background:var(--accent-soft);box-shadow:inset 0 -1px 0 var(--accent)}
  :where(:root[data-page="transfer-entry"]) .rm{border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
  :where(:root[data-page="transfer-entry"]) .rm:hover{color:var(--err)}
  :where(:root[data-page="transfer-entry"]) thead tr.filters th{top:29px;padding:4px 6px;background:var(--rail);border-bottom:1px solid var(--line)}
  :where(:root[data-page="transfer-entry"]) .fctl{font:inherit;font-size:11px;width:100%;min-width:74px;padding:3px 5px;border:1px solid var(--line);
    border-radius:4px;background:var(--card);color:var(--ink)}
  :where(:root[data-page="transfer-entry"]) .fctl:focus{outline:1.5px solid var(--accent);outline-offset:-1px}
  :where(:root[data-page="transfer-entry"]) .fctl.set{border-color:var(--accent);background:var(--accent-soft)}
  :where(:root[data-page="transfer-entry"]) th.num .fctl{text-align:right}
  :where(:root[data-page="transfer-entry"]) .fcell{position:relative;display:block}
  :where(:root[data-page="transfer-entry"]) .fcell.combo .fctl{padding-right:15px}
  :where(:root[data-page="transfer-entry"]) .fcaret{position:absolute;right:3px;top:50%;transform:translateY(-50%);font-style:normal;font-size:9px;
    color:var(--faint);cursor:pointer;line-height:1}
  :where(:root[data-page="transfer-entry"]) .fcell.combo:hover .fcaret{color:var(--dim)}
  :where(:root[data-page="transfer-entry"]) .flist{position:fixed;z-index:60;display:none;max-height:244px;overflow:auto;min-width:150px;max-width:280px;
    background:var(--card);border:1px solid var(--line2);border-radius:7px;padding:3px;
    box-shadow:0 10px 28px rgba(20,35,50,.18)}
  :where(:root[data-page="transfer-entry"]) .flist.on{display:block}
  :where(:root[data-page="transfer-entry"]) .fopt{padding:4px 9px;font-size:12px;border-radius:5px;cursor:pointer;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  :where(:root[data-page="transfer-entry"]) .fopt:hover,:where(:root[data-page="transfer-entry"]) .fopt.hi{background:var(--accent-soft)}
  :where(:root[data-page="transfer-entry"]) .fnone{display:block;padding:5px 9px;font-size:11.5px;color:var(--dim);font-style:normal}
  :where(:root[data-page="transfer-entry"]) .auditpop{position:fixed;z-index:70;min-width:236px;max-width:340px;background:var(--card);
    border:1px solid var(--line2);border-radius:10px;padding:10px 12px;
    box-shadow:0 14px 36px rgba(20,35,50,.22)}
  :where(:root[data-page="transfer-entry"]) .auditpop h4{margin:0 0 6px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
  :where(:root[data-page="transfer-entry"]) .auditpop p{margin:0 0 4px;font-size:12px;color:var(--ink);line-height:1.45}
  :where(:root[data-page="transfer-entry"]) .auditpop p em{font-style:normal;color:var(--dim)}
  :where(:root[data-page="transfer-entry"]) .auditpop .auditsub{margin:7px 0 0;padding-top:7px;border-top:1px solid var(--line);font-size:11px;color:var(--dim)}
  :where(:root[data-page="transfer-entry"]) .empty{background:var(--rail);border:1px solid var(--line);border-radius:16px;padding:24px;text-align:center;color:var(--dim);font-size:12.5px}

  :where(:root[data-page="transfer-entry"]) .search{font:inherit;font-size:12.5px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--hover);width:260px}
  :where(:root[data-page="transfer-entry"]) .search:focus{outline:2px solid var(--accent);outline-offset:-1px}
  :where(:root[data-page="transfer-entry"]) .hint{color:var(--dim);font-size:12px;margin:0 0 10px}

  :where(:root[data-page="transfer-entry"]) .modal{position:fixed;inset:0;background:var(--nx-overlay);display:none;align-items:center;justify-content:center;padding:20px;z-index:40}
  :where(:root[data-page="transfer-entry"]) .modal.on{display:flex}
  :where(:root[data-page="transfer-entry"]) .modal .sheet{background:var(--card);border-radius:16px;padding:16px 18px;max-width:640px;width:100%;box-shadow:0 18px 50px rgba(14,22,30,.28);max-height:88vh;overflow:auto}
  :where(:root[data-page="transfer-entry"]) .modal .sheet.wide{max-width:880px}
  :where(:root[data-page="transfer-entry"]) #entModal .sheet{max-width:760px}
  :where(:root[data-page="transfer-entry"]) #entModal .entgrid{grid-template-columns:repeat(3,1fr)}
  :where(:root[data-page="transfer-entry"]) .modal .grid{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:10px}
  :where(:root[data-page="transfer-entry"]) #txHint{border:1px solid var(--line);border-radius:6px;margin-bottom:10px}
  :where(:root[data-page="transfer-entry"]) button.act.danger{background:var(--err);border-color:var(--err);color:var(--nx-surface)}
  :where(:root[data-page="transfer-entry"]) .edt{border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:12px;padding:0 3px}
  :where(:root[data-page="transfer-entry"]) .edt:hover{color:var(--accent)}
  :where(:root[data-page="transfer-entry"]) .modal h2{font-size:15px;font-weight:600;margin:0 0 4px}
  :where(:root[data-page="transfer-entry"]) .dupline{border-left:3px solid var(--flag);background:var(--flag-soft);border-radius:0 6px 6px 0;padding:7px 10px;margin-bottom:7px;font-size:12px}
  :where(:root[data-page="transfer-entry"]) .colgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 10px;margin-bottom:10px}
  :where(:root[data-page="transfer-entry"]) .colgrid label{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;padding:3px 0}
  :where(:root[data-page="transfer-entry"]) .mlab{font-size:11.5px;color:var(--dim);display:flex;align-items:center;gap:6px}
  :where(:root[data-page="transfer-entry"]) .mailgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
  :where(:root[data-page="transfer-entry"]) .mailgrid label{font-size:10.5px;color:var(--faint);display:block}
  :where(:root[data-page="transfer-entry"]) .mailgrid input{font:inherit;font-size:12.5px;width:100%;margin-top:2px;padding:5px 7px;border:1px solid var(--line);border-radius:5px;background:var(--card);color:var(--ink)}
  :where(:root[data-page="transfer-entry"]) .mailgrid input:focus{outline:1.5px solid var(--accent);outline-offset:-1px}
  :where(:root[data-page="transfer-entry"]) .arcard{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:9px;
    display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  :where(:root[data-page="transfer-entry"]) .arcard b{font-size:13px;font-weight:600;min-width:120px}
  :where(:root[data-page="transfer-entry"]) .arcard .meta{color:var(--dim);font-size:11.5px;min-width:150px}
  :where(:root[data-page="transfer-entry"]) .arcard input{font:inherit;font-size:12px;flex:1;min-width:200px;padding:5px 8px;border:1px solid var(--line);border-radius:5px;background:var(--card);color:var(--ink)}
  :where(:root[data-page="transfer-entry"]) .arcard input:focus{outline:1.5px solid var(--accent);outline-offset:-1px}
  :where(:root[data-page="transfer-entry"]) .listcols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  :where(:root[data-page="transfer-entry"]) .listcols h3{font-size:11px;font-weight:600;color:var(--dim);margin:0 0 5px}
  :where(:root[data-page="transfer-entry"]) .listbox{border:1px solid var(--line);border-radius:11px;max-height:280px;overflow:auto}
  :where(:root[data-page="transfer-entry"]) .listbox div{display:flex;align-items:center;gap:6px;padding:5px 6px 5px 10px;font-size:12px;border-bottom:1px solid var(--line)}
  :where(:root[data-page="transfer-entry"]) .listbox div:last-child{border-bottom:0}
  :where(:root[data-page="transfer-entry"]) .listbox span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  :where(:root[data-page="transfer-entry"]) .listbox em{font-style:normal;font-size:10px;color:var(--faint)}
  :where(:root[data-page="transfer-entry"]) .nickrow{display:flex;align-items:center;gap:6px;padding:5px 6px 5px 8px}
  :where(:root[data-page="transfer-entry"]) .nickrow input.fctl{flex:2;min-width:140px}
  :where(:root[data-page="transfer-entry"]) .nickrow select.fctl{flex:1;min-width:110px}
  :where(:root[data-page="transfer-entry"]) .nicknum{font-style:normal;font-size:10.5px;color:var(--dim);white-space:nowrap;min-width:52px;text-align:right}
  :where(:root[data-page="transfer-entry"]) .addrow{display:flex;gap:6px;margin-top:7px}
  :where(:root[data-page="transfer-entry"]) .addrow input{font:inherit;font-size:12px;flex:1;min-width:0;padding:5px 7px;border:1px solid var(--line);border-radius:5px;background:var(--card);color:var(--ink)}
  :where(:root[data-page="transfer-entry"]) .addrow input:focus{outline:1.5px solid var(--accent);outline-offset:-1px}
  :where(:root[data-page="transfer-entry"]) .entgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
  :where(:root[data-page="transfer-entry"]) .entgrid label{font-size:10.5px;color:var(--faint);display:block}
  :where(:root[data-page="transfer-entry"]) .entgrid input,:where(:root[data-page="transfer-entry"]) .entgrid select{font:inherit;font-size:12.5px;width:100%;margin-top:2px;padding:5px 7px;
    border:1px solid var(--line);border-radius:5px;background:var(--card);color:var(--ink)}
  :where(:root[data-page="transfer-entry"]) .entgrid input:focus,:where(:root[data-page="transfer-entry"]) .entgrid select:focus{outline:1.5px solid var(--accent);outline-offset:-1px}
  :where(:root[data-page="transfer-entry"]) select.entsel{font:inherit;font-size:12.5px;width:100%;border:0;padding:1px 0;background:transparent;color:var(--ink);max-width:100%}
  :where(:root[data-page="transfer-entry"]) select.entsel:focus{outline:0;box-shadow:0 1px 0 var(--accent)}
  :where(:root[data-page="transfer-entry"]) .cell.locked input{color:var(--dim)}
  :where(:root[data-page="transfer-entry"]) .glopts{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
  :where(:root[data-page="transfer-entry"]) .glopt{font:inherit;font-size:10.5px;border:1px solid var(--flag);background:var(--flag-soft);color:var(--flag);
    border-radius:20px;padding:2px 8px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
  :where(:root[data-page="transfer-entry"]) .glopt:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
  :where(:root[data-page="transfer-entry"]) .glopt em{font-style:normal;opacity:.75;font-size:9.5px}
  :where(:root[data-page="transfer-entry"]) .memoline{display:flex;gap:6px;align-items:baseline;margin-top:3px;font-size:10.5px;color:var(--dim)}
  :where(:root[data-page="transfer-entry"]) .memoline span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  :where(:root[data-page="transfer-entry"]) .memoline .linkbtn{font-size:10.5px;flex:none}
  :where(:root[data-page="transfer-entry"]) .memoline .unknownlabel{color:var(--flag)}
  :where(:root[data-page="transfer-entry"]) .memoline.banknote span{color:var(--accent)}
  :where(:root[data-page="transfer-entry"]) .rawhint{display:block;font-size:10px;color:var(--flag);margin-top:1px}
  :where(:root[data-page="transfer-entry"]) .rawhint.learned{color:var(--accent)}
  :where(:root[data-page="transfer-entry"]) .dupline.hard{border-left-color:var(--err-strong);background:var(--err-soft)}
  :where(:root[data-page="transfer-entry"]) .dupline.hard .tag{color:var(--err);font-weight:700;letter-spacing:.04em}
  :where(:root[data-page="transfer-entry"]) .dupline.near{border-left-color:var(--line2);background:var(--hover)}
  :where(:root[data-page="transfer-entry"]) .dupline .tag{display:block;font-size:10.5px;text-transform:none;color:var(--dim);margin-bottom:3px}
  :where(:root[data-page="transfer-entry"]) .dupline b{font-weight:600;display:block}
  :where(:root[data-page="transfer-entry"]) .dupline .vs{color:var(--dim);display:block;margin-top:2px}
  /* Post to Intacct: what the bill will be, label beside value. */
  :where(:root[data-page="transfer-entry"]) .postplan{display:grid;grid-template-columns:max-content 1fr;gap:5px 14px;margin:4px 0 12px;font-size:12.5px}
  :where(:root[data-page="transfer-entry"]) .postplan:empty{display:none}
  :where(:root[data-page="transfer-entry"]) .postplan dt{color:var(--faint)}
  :where(:root[data-page="transfer-entry"]) .postplan dd{margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
  :where(:root[data-page="transfer-entry"]) .misslist{margin:4px 0 0;padding-left:18px}
  :where(:root[data-page="transfer-entry"]) .misslist li{margin:2px 0}
  :where(:root[data-page="transfer-entry"]) .misslist b{display:inline}
  :where(:root[data-page="transfer-entry"]) .act.blocked{opacity:.55}
  :where(:root[data-page="transfer-entry"]) .lightbox{position:fixed;inset:0;background:rgba(14,22,30,.82);display:none;align-items:center;justify-content:center;padding:24px;z-index:20;cursor:zoom-out}
  :where(:root[data-page="transfer-entry"]) .lightbox.on{display:flex}
  :where(:root[data-page="transfer-entry"]) .lightbox img{max-width:100%;max-height:100%;border-radius:6px}
  :where(:root[data-page="transfer-entry"]) .savewarn{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:10px;
    background:var(--err-soft);border:1px solid var(--err-line);color:var(--err);font-size:12px;padding:9px 12px;border-radius:9px;
    box-shadow:0 8px 24px rgba(20,35,50,.18);max-width:92vw}
  :where(:root[data-page="transfer-entry"]) .savewarn .act{border-color:var(--err-line);background:var(--nx-surface)}
  :where(:root[data-page="transfer-entry"]) .toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--nx-toast-bg);color:var(--nx-toast-ink);font-size:12px;padding:8px 14px;border-radius:20px;opacity:0;pointer-events:none;transition:opacity .18s;z-index:30}
  :where(:root[data-page="transfer-entry"]) .toast.on{opacity:1}
  @media (prefers-reduced-motion:reduce){:where(:root[data-page="transfer-entry"]) *, *:where([data-page="transfer-entry"]){transition:none!important}}


/* ----------------------------------------------------------------------------
 * 15.20  Cash -- the dashboard frame
 * cash/cash-dashboard.php, data-page="cash-dashboard"
 * -------------------------------------------------------------------------- */
/* ── Nexus theme tokens. Cash runs on coral instead of the CareRite green,
      so --brand is set here rather than pulled from portal.css. ────────── */
:root:where([data-page="cash-dashboard"]){
  --nx-hover:#F4EFEE;
  --brand:#E9614B;            /* Cash coral */
  --brand-2:#F4886E;          /* lighter coral, used in the brand mark */
  --brand-lt:#FCEAE5;
  /* Status colours, the same set the Cash pages use. */
  --st-ok:#0F7A45;    --st-ok-bg:#E4F6EC;
  --st-warn:#8A5A00;  --st-warn-bg:#FFF3D6;
  --st-info:#1C4FA1;  --st-info-bg:#E4EDFD;
  --st-mute-bg:#F1F2F6;
  --st-late:#B3251F;  --st-late-bg:#FDE8E6;
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="cash-dashboard"]){
  --nx-hover:#282027;
  --brand:#FF7A5E;            /* lift coral for contrast on dark */
  --brand-2:#FF9C85;
  --brand-lt:#3A211B;
  --st-ok:#4ED18B;    --st-ok-bg:#16301F;
  --st-warn:#E8B455;  --st-warn-bg:#332815;
  --st-info:#7FA9F0;  --st-info-bg:#1A2436;
  --st-mute:#A7ADBE;  --st-mute-bg:#242833;
  --st-late:#FF7B72;  --st-late-bg:#361C1B;
  --nx-down:#F4756B;  --nx-violet:#6C4BF4;
  color-scheme:dark;
}
:where(:root[data-page="cash-dashboard"]) *, *:where([data-page="cash-dashboard"]){box-sizing:border-box}
html:where([data-page="cash-dashboard"]),:where(:root[data-page="cash-dashboard"]) body{height:100%;margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px;overflow:hidden}
/* portal.css reserves a permanent scrollbar gutter on <html>; this page never
   scrolls at the page level, so cancel it to remove the always-on edge bar. */
html:where([data-page="cash-dashboard"]){scrollbar-gutter:auto}
:where(:root[data-page="cash-dashboard"]) button{font-family:inherit}

/* App frame: a rounded white surface floating on the grey canvas */
:where(:root[data-page="cash-dashboard"]) .nx-app{display:grid;grid-template-columns:248px minmax(0,1fr);height:calc(100vh - 16px);max-width:none;margin:8px;background:var(--nx-surface);border-radius:16px;overflow:hidden;box-shadow:0 16px 48px rgba(27,29,41,.10);border:1px solid var(--nx-line);transition:grid-template-columns .18s ease}
:where(:root[data-page="cash-dashboard"]) .nx-app.rail-collapsed{grid-template-columns:64px minmax(0,1fr)}
@media(max-width:980px){:where(:root[data-page="cash-dashboard"]) .nx-app{grid-template-columns:1fr;margin:0;border-radius:0;border:none;height:100vh}}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
:where(:root[data-page="cash-dashboard"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px;overflow:hidden}
:where(:root[data-page="cash-dashboard"]) .nx-rail-toggle{width:32px;height:32px;flex:0 0 auto;border:1px solid var(--nx-line2);background:var(--nx-surface);border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2);margin:0 0 6px auto}
:where(:root[data-page="cash-dashboard"]) .nx-rail-toggle:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="cash-dashboard"]) .nx-rail-toggle svg{width:16px;height:16px;transition:transform .18s ease}
:where(:root[data-page="cash-dashboard"]) .rail-collapsed .nx-rail{padding:18px 10px;align-items:center}
:where(:root[data-page="cash-dashboard"]) .rail-collapsed .nx-rail-toggle{margin:0 0 8px 0}
:where(:root[data-page="cash-dashboard"]) .rail-collapsed .nx-rail-toggle svg{transform:rotate(180deg)}
:where(:root[data-page="cash-dashboard"]) .rail-collapsed .nx-brand-name,
:where(:root[data-page="cash-dashboard"]) .rail-collapsed .nx-navsec{display:none}
:where(:root[data-page="cash-dashboard"]) .rail-collapsed .nx-brand{justify-content:center;padding:6px 0 18px}
/* nav labels are bare text nodes on the <a>; font-size:0 hides them, icons keep their own size */
:where(:root[data-page="cash-dashboard"]) .rail-collapsed .nx-nav{position:relative;justify-content:center;gap:0;padding:0;font-size:0;width:40px;height:40px;border-radius:10px;margin:2px auto}
:where(:root[data-page="cash-dashboard"]) .rail-collapsed .nx-nav svg{width:18px;height:18px;font-size:0}
:where(:root[data-page="cash-dashboard"]) .rail-collapsed .nx-subnav{align-items:center;border-top:1px solid var(--nx-line2);margin-top:10px;padding-top:10px}
:where(:root[data-page="cash-dashboard"]) .rail-collapsed .nx-subnav-head,
:where(:root[data-page="cash-dashboard"]) .rail-collapsed .nx-subnav .nx-subsec{display:none}
:where(:root[data-page="cash-dashboard"]) .rail-collapsed .nx-subnav .nx-subitem{position:relative;justify-content:center;gap:0;padding:0;width:40px;height:40px;border-radius:10px;margin:2px auto}
:where(:root[data-page="cash-dashboard"]) .rail-collapsed .nx-subnav .nx-subitem span{display:none}
:where(:root[data-page="cash-dashboard"]) .rail-collapsed .nx-subnav .nx-subitem svg{width:17px;height:17px}
:where(:root[data-page="cash-dashboard"]) .rail-collapsed .nx-subnav .nx-subitem .nx-sub-badge{position:absolute;top:2px;right:2px;margin:0;font-size:9px;min-width:14px;height:14px}
@media(max-width:980px){:where(:root[data-page="cash-dashboard"]) .nx-rail{display:none}}
:where(:root[data-page="cash-dashboard"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="cash-dashboard"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
:where(:root[data-page="cash-dashboard"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="cash-dashboard"]) .nx-navsec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3);padding:14px 10px 6px}
:where(:root[data-page="cash-dashboard"]) .nx-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--nx-ink2);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,color .12s}
:where(:root[data-page="cash-dashboard"]) .nx-nav svg{width:17px;height:17px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="cash-dashboard"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="cash-dashboard"]) .nx-nav.active{background:var(--brand);color:#fff}
:where(:root[data-page="cash-dashboard"]) .nx-nav.active svg{color:#fff}

/* Sub-nav: the active page's own menu, reported up by the embed bridge */
:where(:root[data-page="cash-dashboard"]) .nx-subnav{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:10px;border-top:1px solid var(--nx-line2)}
:where(:root[data-page="cash-dashboard"]) .nx-subnav:empty{display:none;border-top:none;margin-top:0;padding-top:0}
:where(:root[data-page="cash-dashboard"]) .nx-subnav-head{font-size:11px;font-weight:700;letter-spacing:-.01em;color:var(--nx-ink);padding:2px 10px 7px;display:flex;align-items:center;gap:7px}
:where(:root[data-page="cash-dashboard"]) .nx-subnav-head::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--brand);flex:0 0 auto}
:where(:root[data-page="cash-dashboard"]) .nx-subnav .nx-subsec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3);padding:9px 10px 4px}
:where(:root[data-page="cash-dashboard"]) .nx-subnav .nx-subitem{display:flex;align-items:center;gap:11px;padding:8px 11px 8px 18px;border-radius:10px;color:var(--nx-ink2);font-size:12.5px;font-weight:500;cursor:pointer;border:none;background:none;font-family:inherit;width:100%;text-align:left}
:where(:root[data-page="cash-dashboard"]) .nx-subnav .nx-subitem .nx-sub-badge{margin-left:auto;background:#E5322D;color:#fff;font-size:10px;font-weight:700;border-radius:999px;min-width:16px;height:16px;padding:0 5px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:0 0 auto}
:where(:root[data-page="cash-dashboard"]) .nx-subnav .nx-subitem svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="cash-dashboard"]) .nx-subnav .nx-subitem:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="cash-dashboard"]) .nx-subnav .nx-subitem.active{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="cash-dashboard"]) .nx-subnav .nx-subitem.active svg{color:var(--brand)}

/* ── Main column ─────────────────────────────────────────────────────── */
:where(:root[data-page="cash-dashboard"]) .nx-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
:where(:root[data-page="cash-dashboard"]) .nx-topbar{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="cash-dashboard"]) .nx-top-actions{display:flex;align-items:center;gap:10px;flex:none}
:where(:root[data-page="cash-dashboard"]) .nx-theme-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--nx-line2);background:var(--nx-elev);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2)}
:where(:root[data-page="cash-dashboard"]) .nx-theme-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="cash-dashboard"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="cash-dashboard"]) .nx-theme-btn .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="cash-dashboard"]) .nx-theme-btn .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="cash-dashboard"]) .nx-theme-btn .nx-ic-moon{display:block}
:where(:root[data-page="cash-dashboard"]) .nx-user{position:relative;display:flex;align-items:center}
:where(:root[data-page="cash-dashboard"]) .nx-user-av-btn{padding:0;border:none;background:none;cursor:pointer;border-radius:50%;display:flex}
:where(:root[data-page="cash-dashboard"]) .nx-user-av{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;text-transform:uppercase}
:where(:root[data-page="cash-dashboard"]) .nx-user-av-btn:hover .nx-user-av,:where(:root[data-page="cash-dashboard"]) .nx-user-av-btn:focus-visible .nx-user-av{box-shadow:0 0 0 3px var(--brand-lt);outline:none}
:where(:root[data-page="cash-dashboard"]) .nx-user-av.lg{width:38px;height:38px;font-size:13px;flex:0 0 auto}
:where(:root[data-page="cash-dashboard"]) .nx-user-pop{position:absolute;top:calc(100% + 9px);right:0;min-width:236px;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:14px;box-shadow:0 18px 44px rgba(20,22,28,.20);padding:7px;display:none;z-index:120}
:where(:root[data-page="cash-dashboard"]) .nx-user-pop.open{display:block;animation:nxPop .16s ease}
@keyframes nxPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
:where(:root[data-page="cash-dashboard"]) .nx-user-pop-id{display:flex;align-items:center;gap:11px;padding:9px 9px 11px}
:where(:root[data-page="cash-dashboard"]) .nx-user-pop-meta{min-width:0;line-height:1.25}
:where(:root[data-page="cash-dashboard"]) .nx-user-pop-name{display:block;font-size:13.5px;font-weight:700;color:var(--nx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="cash-dashboard"]) .nx-user-pop-sub{display:block;font-size:11.5px;color:var(--nx-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="cash-dashboard"]) .nx-user-pop-sep{height:1px;background:var(--nx-line);margin:2px 4px 6px}
:where(:root[data-page="cash-dashboard"]) .nx-user-pop-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 10px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#6B7280;text-align:left;text-decoration:none}
:where(:root[data-page="cash-dashboard"]) .nx-user-pop-item svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="cash-dashboard"]) .nx-user-pop-item:hover{background:var(--nx-hover)}
:where(:root[data-page="cash-dashboard"]) .nx-user-pop-item.danger{color:#D4453B}
:where(:root[data-page="cash-dashboard"]) .nx-user-pop-item.danger svg{color:#D4453B}

/* Top-bar search, shown only while the page on screen asks for one */
:where(:root[data-page="cash-dashboard"]) .nx-search{flex:1 1 160px;min-width:0;max-width:340px;position:relative}
:where(:root[data-page="cash-dashboard"]) .nx-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--nx-ink3)}
:where(:root[data-page="cash-dashboard"]) .nx-search input{width:100%;height:36px;box-sizing:border-box;border:1px solid var(--nx-line2);background:var(--nx-rail);border-radius:10px;padding:0 12px 0 34px;font-size:13px;font-family:inherit;color:var(--nx-ink)}
:where(:root[data-page="cash-dashboard"]) .nx-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}

/* Page-specific action buttons lifted into the shell header */
:where(:root[data-page="cash-dashboard"]) .nx-page-actions{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0;flex:0 1 auto;overflow:hidden}
:where(:root[data-page="cash-dashboard"]) .nx-page-actions .nx-pbtn{height:36px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:10px;padding:0 12px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1}
:where(:root[data-page="cash-dashboard"]) .nx-page-actions .nx-pbtn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="cash-dashboard"]) .nx-page-actions .nx-pbtn svg{width:14px;height:14px}
:where(:root[data-page="cash-dashboard"]) .nx-page-actions .nx-pbtn.primary{border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="cash-dashboard"]) .nx-page-actions .nx-pbtn.primary:hover{background:var(--brand-lt)}
/* The embedded page's spinner class rides along in the button HTML, but its
   keyframes live in that page — redefine them here so it really spins. */
:where(:root[data-page="cash-dashboard"]) .nx-page-actions .dt-spin,:where(:root[data-page="cash-dashboard"]) .nx-theme-btn .dt-spin{animation:dt-spin .7s linear infinite}
@keyframes dt-spin{to{transform:rotate(360deg)}}

/* ── Embedded page iframes ───────────────────────────────────────────── */
:where(:root[data-page="cash-dashboard"]) .nx-frame-wrap{flex:1;position:relative;min-height:0;overflow:hidden;background:var(--nx-surface)}
:where(:root[data-page="cash-dashboard"]) .nx-frames{position:absolute;inset:0}
:where(:root[data-page="cash-dashboard"]) .nx-frame{width:calc(100% + 22px);height:100%;border:0;display:block;background:var(--nx-surface);overflow:hidden}
:where(:root[data-page="cash-dashboard"]) .nx-frames .nx-frame{position:absolute;inset:0;width:calc(100% + 22px);height:100%;opacity:0;transition:opacity .18s ease}
:where(:root[data-page="cash-dashboard"]) .nx-frames .nx-frame:not(.active){opacity:0;pointer-events:none;z-index:0}
:where(:root[data-page="cash-dashboard"]) .nx-frames .nx-frame.active{opacity:1;z-index:1}
:where(:root[data-page="cash-dashboard"]) .nx-frame-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--nx-ink3);background:var(--nx-surface);z-index:3;opacity:1;transition:opacity .2s ease}
:where(:root[data-page="cash-dashboard"]) .nx-frame-wrap.loaded .nx-frame-load{opacity:0;pointer-events:none}

/* ── The dashboard itself. Same furniture as the Payroll dashboard:
      three stat squares across the top, then panels in a grid. */
:where(:root[data-page="cash-dashboard"]) .nx-home{flex:1;min-height:0;overflow-y:auto;padding:16px 22px 24px;background:var(--nx-surface)}
:where(:root[data-page="cash-dashboard"]) .nx-home::-webkit-scrollbar{width:10px;background:transparent}
:where(:root[data-page="cash-dashboard"]) .nx-home::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
:where(:root[data-page="cash-dashboard"]) .nx-home:hover::-webkit-scrollbar-thumb{background:var(--nx-line2);background-clip:padding-box}

:where(:root[data-page="cash-dashboard"]) .ov-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 16px}
:where(:root[data-page="cash-dashboard"]) .ov-hello{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="cash-dashboard"]) .ov-stamp{font-size:12px;color:var(--nx-ink3);margin-left:auto}

/* Stat squares */
:where(:root[data-page="cash-dashboard"]) .nx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
@media(max-width:900px){:where(:root[data-page="cash-dashboard"]) .nx-stats{grid-template-columns:1fr}}
:where(:root[data-page="cash-dashboard"]) .pd-kpi{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:16px 17px}
:where(:root[data-page="cash-dashboard"]) .pd-kpi-top{display:flex;align-items:center;gap:9px;margin-bottom:13px}
:where(:root[data-page="cash-dashboard"]) .pd-kpi-chip{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
:where(:root[data-page="cash-dashboard"]) .pd-kpi-chip svg{width:16px;height:16px}
:where(:root[data-page="cash-dashboard"]) .pd-kpi-label{font-size:12.5px;font-weight:600;color:var(--nx-ink2)}
:where(:root[data-page="cash-dashboard"]) .pd-kpi-val{font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
:where(:root[data-page="cash-dashboard"]) .pd-kpi-foot{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
:where(:root[data-page="cash-dashboard"]) .pd-kpi-sub{font-size:11px;color:var(--nx-ink3)}
:where(:root[data-page="cash-dashboard"]) .pd-kpi-delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
:where(:root[data-page="cash-dashboard"]) .pd-kpi-delta.bad{color:var(--st-late);background:var(--st-late-bg)}
:where(:root[data-page="cash-dashboard"]) .pd-kpi-delta.good{color:var(--st-ok);background:var(--st-ok-bg)}
/* Clickable, but it stays put -- no lift, no shadow, just the edge picking up. */
:where(:root[data-page="cash-dashboard"]) .pd-kpi.clickable{cursor:pointer;transition:border-color .12s}
:where(:root[data-page="cash-dashboard"]) .pd-kpi.clickable:hover{border-color:var(--nx-line2)}
:where(:root[data-page="cash-dashboard"]) .pd-kpi.clickable:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}

/* Panels */
:where(:root[data-page="cash-dashboard"]) .nx-row{display:grid;gap:16px;margin-bottom:16px;align-items:stretch}
:where(:root[data-page="cash-dashboard"]) .nx-row.cols-1-1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:1100px){:where(:root[data-page="cash-dashboard"]) .nx-row.cols-1-1{grid-template-columns:1fr}}
:where(:root[data-page="cash-dashboard"]) .nx-card{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);display:flex;flex-direction:column;overflow:hidden}
:where(:root[data-page="cash-dashboard"]) .nx-card-head{display:flex;align-items:center;gap:10px;padding:15px 17px}
:where(:root[data-page="cash-dashboard"]) .nx-card-ic{width:26px;height:26px;border-radius:8px;background:var(--nx-rail);border:1px solid var(--nx-line2);display:flex;align-items:center;justify-content:center;color:var(--nx-ink2);flex:0 0 auto}
:where(:root[data-page="cash-dashboard"]) .nx-card-ic svg{width:14px;height:14px}
:where(:root[data-page="cash-dashboard"]) .nx-card-title{font-size:13.5px;font-weight:700}
:where(:root[data-page="cash-dashboard"]) .nx-card-head .nx-card-right{margin-left:auto;display:flex;align-items:center;gap:8px}
:where(:root[data-page="cash-dashboard"]) .nx-tag{font-size:11px;font-weight:600;color:var(--nx-ink2);border:1px solid var(--nx-line2);border-radius:8px;padding:5px 10px}
:where(:root[data-page="cash-dashboard"]) .nx-tag.bad{color:var(--st-late);border-color:var(--st-late);background:var(--st-late-bg)}
:where(:root[data-page="cash-dashboard"]) .nx-link{font-size:12px;font-weight:600;color:var(--brand);text-decoration:none;background:none;border:0;cursor:pointer;font-family:inherit;padding:0}
:where(:root[data-page="cash-dashboard"]) .nx-link:hover{text-decoration:underline}
:where(:root[data-page="cash-dashboard"]) .nx-card-body{flex:1 1 auto;min-height:0;max-height:330px;overflow-y:auto}
:where(:root[data-page="cash-dashboard"]) .nx-card-body::-webkit-scrollbar{width:9px;background:transparent}
:where(:root[data-page="cash-dashboard"]) .nx-card-body::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
:where(:root[data-page="cash-dashboard"]) .nx-card-body:hover::-webkit-scrollbar-thumb{background:var(--nx-line2);background-clip:padding-box}

/* Panel tables */
:where(:root[data-page="cash-dashboard"]) .nx-table{width:100%;border-collapse:collapse;table-layout:fixed}
:where(:root[data-page="cash-dashboard"]) .nx-table th,:where(:root[data-page="cash-dashboard"]) .nx-table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="cash-dashboard"]) .nx-table .ta-r{text-align:right;font-variant-numeric:tabular-nums}
:where(:root[data-page="cash-dashboard"]) .nx-table thead th{position:sticky;top:0;z-index:2;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3);text-align:left;padding:9px 17px;background:var(--nx-rail);border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="cash-dashboard"]) .nx-table tbody td{padding:11px 17px;border-bottom:1px solid var(--nx-line);font-size:12.5px;vertical-align:middle}
:where(:root[data-page="cash-dashboard"]) .nx-table tbody tr:last-child td{border-bottom:none}
:where(:root[data-page="cash-dashboard"]) .nx-table tbody tr{cursor:pointer}
:where(:root[data-page="cash-dashboard"]) .nx-table tbody tr:hover td{background:var(--nx-hover)}
:where(:root[data-page="cash-dashboard"]) .nx-table tbody tr.late td{background:var(--st-late-bg)}
:where(:root[data-page="cash-dashboard"]) .nx-name{font-weight:600;color:var(--nx-ink)}
:where(:root[data-page="cash-dashboard"]) .nx-num{font-weight:700;letter-spacing:-.02em}
:where(:root[data-page="cash-dashboard"]) .nx-muted{color:var(--nx-ink3)}
:where(:root[data-page="cash-dashboard"]) .pd-loading,:where(:root[data-page="cash-dashboard"]) .pd-empty{padding:26px 17px;font-size:12.5px;color:var(--nx-ink3);text-align:center}
:where(:root[data-page="cash-dashboard"]) .pd-empty .big{display:block;font-size:13px;font-weight:700;color:var(--nx-ink);margin-bottom:3px}

:where(:root[data-page="cash-dashboard"]) .ov-badge{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
:where(:root[data-page="cash-dashboard"]) .ov-pill{display:inline-block;padding:2px 8px;border-radius:11px;font-size:10.5px;font-weight:700;white-space:nowrap}
:where(:root[data-page="cash-dashboard"]) .ov-pill+.ov-pill{margin-left:4px}
:where(:root[data-page="cash-dashboard"]) .ov-pill.ok{background:var(--st-ok-bg);color:var(--st-ok)}
:where(:root[data-page="cash-dashboard"]) .ov-pill.warn{background:var(--st-warn-bg);color:var(--st-warn)}
:where(:root[data-page="cash-dashboard"]) .ov-pill.info{background:var(--st-info-bg);color:var(--st-info)}
:where(:root[data-page="cash-dashboard"]) .ov-pill.mute{background:var(--st-mute-bg);color:var(--st-mute)}
:where(:root[data-page="cash-dashboard"]) .ov-pill.late{background:var(--st-late-bg);color:var(--st-late)}
/* Status pills. Same colours as the Transfers page, value for value -- do not
   swap these for this page's own --st-* set, they do not match. */
:where(:root[data-page="cash-dashboard"]) .ov-pill.urgent{background:var(--nx-down);color:#fff;letter-spacing:.02em}
:where(:root[data-page="cash-dashboard"]) .ov-pill.soon{background:#EA781E;color:#fff;letter-spacing:.02em}
:where(:root[data-page="cash-dashboard"]) .ov-pill.amounts{background:rgba(234,120,30,.16);color:#D97218;letter-spacing:.02em}
:where(:root[data-page="cash-dashboard"]) .ov-pill.final{background:rgba(13,148,136,.14);color:#0D9488;letter-spacing:.02em}
:where(:root[data-page="cash-dashboard"]) .ov-pill.prelim{background:rgba(108,75,244,.14);color:var(--nx-violet);letter-spacing:.02em}
:where(:root[data-page="cash-dashboard"]) .ov-pill.est{background:rgba(125,133,150,.16);color:var(--nx-ink2);letter-spacing:.02em}
:where(:root[data-page="cash-dashboard"]) .ov-due{font-weight:700;font-size:12px}
:where(:root[data-page="cash-dashboard"]) .ov-due.late{color:var(--st-late)}
:where(:root[data-page="cash-dashboard"]) .ov-due.today{color:var(--st-warn)}
:where(:root[data-page="cash-dashboard"]) .ov-due.soon{color:var(--nx-ink2)}

/* Our own hover box, so nothing ever falls back to the browser's */
:where(:root[data-page="cash-dashboard"]) .ov-tip{position:fixed;z-index:900;display:none;max-width:300px;background:var(--nx-ink);color:var(--nx-surface);border-radius:9px;padding:7px 10px;font-size:11.5px;line-height:1.45;font-weight:500;box-shadow:0 6px 20px rgba(0,0,0,.22);pointer-events:none}
:where(:root[data-page="cash-dashboard"]) .ov-tip.show{display:block}


/* ----------------------------------------------------------------------------
 * 15.21  Support -- Tickets
 * support/tickets.php, data-page="tickets"
 * -------------------------------------------------------------------------- */
/* ============================================================================
 * Ticket Panel. Everything this page draws is prefixed --tp- / .tp-.
 * portal.css and nexus.css carry the theme tokens and the account modal.
 * ========================================================================== */
:root:where([data-page="tickets"]){
  --tp-page:#F4F6F9;
  --tp-card:var(--nx-surface);
  --tp-line:#E3E6EC;
  --tp-soft:var(--nx-bg);
  --tp-ink:#1F2430;
  --tp-ink2:#5F6677;
  --tp-ink3:#98A0B0;
  --tp-blue:#1A8CF0;
  --tp-blue-ink:var(--nx-on-brand);
  --tp-sel:#EEF5FD;
  --tp-mine:#E6F1FD;
  --tp-shadow:0 1px 2px rgba(20,22,28,.04);
  /* Status and priority tones */
  --tp-grey:#5F6677;   --tp-grey-bg:var(--nx-bg);
  --tp-bluet:var(--accent-blue);  --tp-bluet-bg:var(--accent-blue-lt);
  --tp-amber:var(--amber-text);  --tp-amber-bg:#FEF4D6;
  --tp-purple:var(--purple); --tp-purple-bg:var(--purple-lt);
  --tp-teal:#0F7C74;   --tp-teal-bg:#DDF4F1;
  --tp-green:var(--green);  --tp-green-bg:var(--green-lt);
  --tp-red:var(--red-text);    --tp-red-bg:var(--red-lt);
}
:root[data-theme="dark"]:where([data-page="tickets"]){
  --tp-page:var(--nx-bg);
  --tp-card:var(--nx-surface);
  --tp-line:var(--nx-line);
  --tp-soft:#1F222C;
  --tp-ink:var(--nx-ink);
  --tp-ink2:var(--nx-ink2);
  --tp-ink3:var(--nx-ink3);
  --tp-blue:#3B9CF2;
  --tp-blue-ink:#06131F;
  --tp-sel:#18263A;
  --tp-mine:#17293F;
  --tp-shadow:none;
  --tp-grey:var(--nx-ink2);   --tp-grey-bg:var(--nx-line);
  --tp-bluet:#8DB8EB;  --tp-bluet-bg:#1A2A40;
  --tp-amber:#F2C35B;  --tp-amber-bg:#33290F;
  --tp-purple:#C9A2F2; --tp-purple-bg:#2C1F3D;
  --tp-teal:#6FD6CB;   --tp-teal-bg:#123330;
  --tp-green:#6BD08A;  --tp-green-bg:var(--green-lt);
  --tp-red:#F28B82;    --tp-red-bg:#3A1C1B;
}

:where(:root[data-page="tickets"]) *, *:where([data-page="tickets"]){box-sizing:border-box}
:where(:root[data-page="tickets"]) [hidden]{display:none !important}
html:where([data-page="tickets"]),:where(:root[data-page="tickets"]) body{height:100%}
:where(:root[data-page="tickets"]) body{
  margin:0;background:var(--tp-page);color:var(--tp-ink);
  font-family:var(--nx-font);
  font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
:where(:root[data-page="tickets"]) button{font:inherit;color:inherit}
:where(:root[data-page="tickets"]) .tp-wrap{width:100%;max-width:1400px;margin:0 auto;padding:0 24px}

/* -- Top bar ---------------------------------------------------------------- */
:where(:root[data-page="tickets"]) .tp-top{background:var(--tp-card);border-bottom:1px solid var(--tp-line);flex:none}
:where(:root[data-page="tickets"]) .tp-top .tp-wrap{display:flex;align-items:center;gap:28px;height:64px}
:where(:root[data-page="tickets"]) .tp-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tp-ink);font-weight:700;font-size:17px;white-space:nowrap}
:where(:root[data-page="tickets"]) .tp-brand-mark{width:30px;height:30px;border-radius:50%;background:var(--tp-blue);color:var(--tp-blue-ink);display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.02em}
:where(:root[data-page="tickets"]) .tp-links{display:flex;gap:4px;flex:1;min-width:0}
:where(:root[data-page="tickets"]) .tp-links a{color:var(--tp-ink2);text-decoration:none;font-weight:500;font-size:14px;padding:8px 12px;border-radius:8px;white-space:nowrap}
:where(:root[data-page="tickets"]) .tp-links a:hover{color:var(--tp-ink);background:var(--tp-soft)}
:where(:root[data-page="tickets"]) .tp-links a.on{color:var(--tp-ink)}
:where(:root[data-page="tickets"]) .tp-top-r{display:flex;align-items:center;gap:10px}
:where(:root[data-page="tickets"]) .tp-cta{background:var(--tp-blue);color:var(--tp-blue-ink);border:0;border-radius:999px;padding:10px 20px;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap}
:where(:root[data-page="tickets"]) .tp-cta:hover{filter:brightness(1.06)}
:where(:root[data-page="tickets"]) .tp-iconbtn{width:34px;height:34px;border-radius:8px;border:0;background:transparent;color:var(--tp-ink2);cursor:pointer;display:grid;place-items:center;flex:none}
:where(:root[data-page="tickets"]) .tp-iconbtn:hover{background:var(--tp-soft);color:var(--tp-ink)}
:where(:root[data-page="tickets"]) .tp-iconbtn svg{width:16px;height:16px}

/* -- The three panels --------------------------------------------------------- */
:where(:root[data-page="tickets"]) .tp-main{flex:1;padding:28px 0 24px;display:flex}
:where(:root[data-page="tickets"]) .tp-main .tp-wrap{display:flex}
:where(:root[data-page="tickets"]) .tp-grid{
  flex:1;display:grid;gap:8px;
  grid-template-columns:270px minmax(0,1fr) 260px;
  height:calc(100vh - 64px - 52px - 52px);min-height:520px;
}
:where(:root[data-page="tickets"]) .tp-grid.l-off{grid-template-columns:44px minmax(0,1fr) 260px}
:where(:root[data-page="tickets"]) .tp-grid.r-off{grid-template-columns:270px minmax(0,1fr) 44px}
:where(:root[data-page="tickets"]) .tp-grid.l-off.r-off{grid-template-columns:44px minmax(0,1fr) 44px}
:where(:root[data-page="tickets"]) .tp-card{background:var(--tp-card);border:1px solid var(--tp-line);border-radius:6px;box-shadow:var(--tp-shadow);display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
:where(:root[data-page="tickets"]) .tp-head{display:flex;align-items:center;gap:8px;height:44px;padding:0 10px 0 14px;border-bottom:1px solid var(--tp-line);flex:none}
:where(:root[data-page="tickets"]) .tp-head h2{margin:0;font-size:14px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="tickets"]) .tp-scroll{overflow-y:auto;overflow-x:hidden;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:var(--tp-line) transparent}

/* Collapsed side panels: just the button that brings them back. */
:where(:root[data-page="tickets"]) .tp-grid.l-off #tpList > :not(.tp-head),
:where(:root[data-page="tickets"]) .tp-grid.l-off #tpList .tp-head > :not(.tp-collapse),
:where(:root[data-page="tickets"]) .tp-grid.r-off #tpInfo > :not(.tp-head),
:where(:root[data-page="tickets"]) .tp-grid.r-off #tpInfo .tp-head > :not(.tp-collapse){display:none}
:where(:root[data-page="tickets"]) .tp-grid.l-off #tpList .tp-head,
:where(:root[data-page="tickets"]) .tp-grid.r-off #tpInfo .tp-head{padding:0;justify-content:center;border-bottom:0}
:where(:root[data-page="tickets"]) .tp-grid.l-off #tpList .tp-collapse svg,
:where(:root[data-page="tickets"]) .tp-grid.r-off #tpInfo .tp-collapse svg{transform:scaleX(-1)}

/* -- Left: the tickets -------------------------------------------------------- */
:where(:root[data-page="tickets"]) .tp-new{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--tp-line);background:var(--tp-card);border-radius:6px;padding:5px 10px;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap}
:where(:root[data-page="tickets"]) .tp-new:hover{background:var(--tp-soft)}
:where(:root[data-page="tickets"]) .tp-new svg{width:12px;height:12px}
:where(:root[data-page="tickets"]) .tp-head .tp-spacer{flex:1}
:where(:root[data-page="tickets"]) .tp-search{display:none;padding:8px 10px;border-bottom:1px solid var(--tp-line)}
:where(:root[data-page="tickets"]) .tp-search.on{display:block}
:where(:root[data-page="tickets"]) .tp-input{width:100%;border:1px solid var(--tp-line);background:var(--tp-card);color:var(--tp-ink);border-radius:6px;padding:7px 10px;font:inherit;font-size:13px;outline:none}
:where(:root[data-page="tickets"]) .tp-input:focus{border-color:var(--tp-blue)}
:where(:root[data-page="tickets"]) .tp-tabs{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--tp-line);flex:none}
:where(:root[data-page="tickets"]) .tp-tab{border:0;background:transparent;color:var(--tp-ink2);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:500;cursor:pointer}
:where(:root[data-page="tickets"]) .tp-tab:hover{background:var(--tp-soft)}
:where(:root[data-page="tickets"]) .tp-tab.on{background:var(--tp-sel);color:var(--tp-bluet)}
:where(:root[data-page="tickets"]) .tp-tab b{font-weight:600;margin-left:3px}
:where(:root[data-page="tickets"]) .tp-items{padding:6px 8px}
:where(:root[data-page="tickets"]) .tp-item{display:flex;gap:10px;width:100%;text-align:left;border:0;background:transparent;border-left:2px solid transparent;border-radius:4px;padding:11px 10px 11px 12px;cursor:pointer}
:where(:root[data-page="tickets"]) .tp-item + .tp-item{border-top:1px solid var(--tp-line)}
:where(:root[data-page="tickets"]) .tp-item:hover{background:var(--tp-soft)}
:where(:root[data-page="tickets"]) .tp-item.on{background:var(--tp-sel);border-left-color:var(--tp-blue)}
:where(:root[data-page="tickets"]) .tp-item.on + .tp-item,:where(:root[data-page="tickets"]) .tp-item:hover + .tp-item{border-top-color:transparent}
:where(:root[data-page="tickets"]) .tp-item-b{flex:1;min-width:0}
:where(:root[data-page="tickets"]) .tp-item-top{display:flex;align-items:baseline;gap:8px}
:where(:root[data-page="tickets"]) .tp-item-who{flex:1;min-width:0;color:var(--tp-ink2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="tickets"]) .tp-item-when{color:var(--tp-ink2);font-size:11px;white-space:nowrap}
:where(:root[data-page="tickets"]) .tp-item-title{display:block;font-weight:600;font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="tickets"]) .tp-item-prev{color:var(--tp-ink2);font-size:12px;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
:where(:root[data-page="tickets"]) .tp-item-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px}
:where(:root[data-page="tickets"]) .tp-none{padding:28px 16px;text-align:center;color:var(--tp-ink2);font-size:13px}
:where(:root[data-page="tickets"]) .tp-none b{display:block;color:var(--tp-ink);margin-bottom:4px;font-weight:600}

/* Avatars: initials on a colour picked from the name, so a person keeps one. */
:where(:root[data-page="tickets"]) .tp-av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:600;color:#fff;letter-spacing:.02em}
:where(:root[data-page="tickets"]) .tp-av.sm{width:24px;height:24px;font-size:10px}
:where(:root[data-page="tickets"]) .tp-av.c0{background:var(--nx-indigo)}:where(:root[data-page="tickets"]) .tp-av.c1{background:#22A699}:where(:root[data-page="tickets"]) .tp-av.c2{background:#E0793B}
:where(:root[data-page="tickets"]) .tp-av.c3{background:#8E5BD9}:where(:root[data-page="tickets"]) .tp-av.c4{background:#D9487A}:where(:root[data-page="tickets"]) .tp-av.c5{background:#3F8F4E}

/* -- Middle: the conversation ------------------------------------------------- */
:where(:root[data-page="tickets"]) .tp-back{display:none}
:where(:root[data-page="tickets"]) .tp-thread{padding:16px 18px 8px}
:where(:root[data-page="tickets"]) .tp-day{text-align:center;color:var(--tp-ink3);font-size:11px;margin:14px 0 10px}
:where(:root[data-page="tickets"]) .tp-sys{text-align:center;color:var(--tp-ink2);font-size:12px;margin:8px 0 14px}
:where(:root[data-page="tickets"]) .tp-msg{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 12px;max-width:78%}
:where(:root[data-page="tickets"]) .tp-msg.mine{margin-left:auto;align-items:flex-end}
:where(:root[data-page="tickets"]) .tp-msg-who{font-size:12px;font-weight:600;color:var(--tp-ink);margin:0 0 4px 2px}
:where(:root[data-page="tickets"]) .tp-msg.mine .tp-msg-who{display:none}
:where(:root[data-page="tickets"]) .tp-bubble{background:var(--tp-soft);border-radius:8px;padding:9px 12px;white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.55}
:where(:root[data-page="tickets"]) .tp-msg.mine .tp-bubble{background:var(--tp-mine)}
:where(:root[data-page="tickets"]) .tp-msg.opening .tp-bubble{border:1px solid var(--tp-line);background:var(--tp-card)}
:where(:root[data-page="tickets"]) .tp-bubble a{color:var(--tp-bluet)}
:where(:root[data-page="tickets"]) .tp-msg-meta{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--tp-ink3);margin:4px 2px 0}
:where(:root[data-page="tickets"]) .tp-del{border:0;background:none;padding:0;color:var(--tp-ink3);cursor:pointer;font-size:11px;visibility:hidden}
:where(:root[data-page="tickets"]) .tp-msg:hover .tp-del{visibility:visible}
:where(:root[data-page="tickets"]) .tp-del:hover{color:var(--tp-red)}
:where(:root[data-page="tickets"]) .tp-compose{margin:8px 14px 14px;border:1px solid var(--tp-line);border-radius:6px;flex:none;background:var(--tp-card)}
:where(:root[data-page="tickets"]) .tp-compose:focus-within{border-color:var(--tp-blue)}
:where(:root[data-page="tickets"]) .tp-compose textarea{display:block;width:100%;border:0;outline:none;resize:none;background:transparent;color:var(--tp-ink);font:inherit;font-size:13px;padding:12px 12px 4px;min-height:44px;max-height:180px}
:where(:root[data-page="tickets"]) .tp-compose textarea::placeholder{color:var(--tp-ink3)}
:where(:root[data-page="tickets"]) .tp-compose-bar{display:flex;align-items:center;gap:8px;padding:4px 8px 8px 12px}
:where(:root[data-page="tickets"]) .tp-compose-hint{flex:1;color:var(--tp-ink3);font-size:11px}
:where(:root[data-page="tickets"]) .tp-send{border:0;background:var(--tp-blue);color:var(--tp-blue-ink);border-radius:6px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer}
:where(:root[data-page="tickets"]) .tp-send:disabled{opacity:.45;cursor:default}
:where(:root[data-page="tickets"]) .tp-readonly{margin:8px 14px 14px;padding:12px;border:1px dashed var(--tp-line);border-radius:6px;color:var(--tp-ink2);font-size:12px;text-align:center;flex:none}

/* -- Right: details ------------------------------------------------------------ */
:where(:root[data-page="tickets"]) .tp-info-head{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
:where(:root[data-page="tickets"]) .tp-sec{padding:14px;border-bottom:1px solid var(--tp-line)}
:where(:root[data-page="tickets"]) .tp-sec:last-child{border-bottom:0}
:where(:root[data-page="tickets"]) .tp-sec h3{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--tp-ink)}
:where(:root[data-page="tickets"]) .tp-person{display:flex;gap:10px;align-items:center;min-width:0}
:where(:root[data-page="tickets"]) .tp-person-b{min-width:0}
:where(:root[data-page="tickets"]) .tp-person-n{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="tickets"]) .tp-person-s{font-size:11px;color:var(--tp-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="tickets"]) .tp-person-s a{color:inherit}
/* CC: who is on, then the box that adds the next */
:where(:root[data-page="tickets"]) .tp-cc-n{font-weight:500;color:var(--tp-ink2);margin-left:4px}
:where(:root[data-page="tickets"]) .tp-cc{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 9px}
:where(:root[data-page="tickets"]) .tp-chip{display:inline-flex;align-items:center;gap:3px;max-width:100%;font-size:11.5px;background:var(--tp-soft);color:var(--tp-ink);border-radius:999px;padding:2px 3px 2px 9px}
:where(:root[data-page="tickets"]) .tp-chip button{border:0;background:none;color:var(--tp-ink2);cursor:pointer;font-size:13px;line-height:1;padding:1px 5px;border-radius:999px}
:where(:root[data-page="tickets"]) .tp-chip button:hover{color:var(--red-text,#c0392b)}
:where(:root[data-page="tickets"]) .tp-facts{display:grid;grid-template-columns:18px auto minmax(0,1fr);gap:9px 8px;align-items:center;font-size:12px}
:where(:root[data-page="tickets"]) .tp-facts svg{width:13px;height:13px;color:var(--tp-ink2)}
:where(:root[data-page="tickets"]) .tp-facts .k{color:var(--tp-ink);font-weight:500;white-space:nowrap}
:where(:root[data-page="tickets"]) .tp-facts .v{color:var(--tp-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
:where(:root[data-page="tickets"]) .tp-pill{display:inline-flex;align-items:center;gap:5px;border:0;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:600;white-space:nowrap;max-width:100%}
:where(:root[data-page="tickets"]) button.tp-pill{cursor:pointer}
:where(:root[data-page="tickets"]) button.tp-pill:hover{filter:brightness(.96)}
:where(:root[data-page="tickets"]) button.tp-pill::after{content:'';width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid currentColor;opacity:.7}
:where(:root[data-page="tickets"]) .t-grey{color:var(--tp-grey);background:var(--tp-grey-bg)}
:where(:root[data-page="tickets"]) .t-quiet{color:var(--tp-ink2);background:transparent;padding-left:0}
:where(:root[data-page="tickets"]) .t-blue{color:var(--tp-bluet);background:var(--tp-bluet-bg)}
:where(:root[data-page="tickets"]) .t-amber{color:var(--tp-amber);background:var(--tp-amber-bg)}
:where(:root[data-page="tickets"]) .t-purple{color:var(--tp-purple);background:var(--tp-purple-bg)}
:where(:root[data-page="tickets"]) .t-teal{color:var(--tp-teal);background:var(--tp-teal-bg)}
:where(:root[data-page="tickets"]) .t-green{color:var(--tp-green);background:var(--tp-green-bg)}
:where(:root[data-page="tickets"]) .t-red{color:var(--tp-red);background:var(--tp-red-bg)}
:where(:root[data-page="tickets"]) .tp-dot-grey{background:var(--tp-grey)}:where(:root[data-page="tickets"]) .tp-dot-blue{background:var(--tp-bluet)}:where(:root[data-page="tickets"]) .tp-dot-amber{background:var(--tp-amber)}
:where(:root[data-page="tickets"]) .tp-dot-purple{background:var(--tp-purple)}:where(:root[data-page="tickets"]) .tp-dot-teal{background:var(--tp-teal)}:where(:root[data-page="tickets"]) .tp-dot-green{background:var(--tp-green)}
:where(:root[data-page="tickets"]) .tp-note{font-size:12px;color:var(--tp-ink2);white-space:pre-wrap;word-break:break-word}
:where(:root[data-page="tickets"]) .tp-open-link{display:inline-flex;align-items:center;gap:6px;color:var(--tp-bluet);font-size:12px;font-weight:500;text-decoration:none}
:where(:root[data-page="tickets"]) .tp-open-link:hover{text-decoration:underline}

/* Pop-up menu for status / priority */
:where(:root[data-page="tickets"]) .tp-menu{position:fixed;z-index:60;background:var(--tp-card);border:1px solid var(--tp-line);border-radius:8px;box-shadow:0 10px 30px rgba(20,22,28,.16);padding:4px;min-width:160px}
:where(:root[data-page="tickets"]) .tp-menu button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;padding:7px 10px;border-radius:6px;text-align:left;font-size:12px;cursor:pointer}
:where(:root[data-page="tickets"]) .tp-menu button:hover{background:var(--tp-soft)}
:where(:root[data-page="tickets"]) .tp-menu button.on{font-weight:600}

/* -- Create ticket ---------------------------------------------------------------- */
:where(:root[data-page="tickets"]) .tp-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px;overflow-y:auto}
:where(:root[data-page="tickets"]) .tp-modal{background:var(--tp-card);border-radius:10px;width:100%;max-width:520px;box-shadow:0 18px 44px rgba(20,22,28,.25)}
:where(:root[data-page="tickets"]) .tp-modal-h{display:flex;align-items:center;padding:16px 18px;border-bottom:1px solid var(--tp-line)}
:where(:root[data-page="tickets"]) .tp-modal-h h2{flex:1;margin:0;font-size:15px}
:where(:root[data-page="tickets"]) .tp-modal-b{padding:16px 18px;display:grid;gap:12px}
:where(:root[data-page="tickets"]) .tp-modal-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 16px}
:where(:root[data-page="tickets"]) .tp-field label{display:block;font-size:12px;font-weight:500;color:var(--tp-ink2);margin-bottom:5px}
:where(:root[data-page="tickets"]) .tp-field textarea.tp-input{min-height:96px;resize:vertical}
:where(:root[data-page="tickets"]) .tp-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
:where(:root[data-page="tickets"]) .tp-seg{display:flex;gap:4px;flex-wrap:wrap}
:where(:root[data-page="tickets"]) .tp-seg button{border:1px solid var(--tp-line);background:var(--tp-card);border-radius:999px;padding:4px 11px;font-size:12px;cursor:pointer}
:where(:root[data-page="tickets"]) .tp-seg button.on{border-color:var(--tp-blue);background:var(--tp-sel);color:var(--tp-bluet);font-weight:600}
:where(:root[data-page="tickets"]) .tp-ghost{border:1px solid var(--tp-line);background:var(--tp-card);border-radius:6px;padding:7px 14px;font-size:13px;cursor:pointer}
:where(:root[data-page="tickets"]) .tp-ghost:hover{background:var(--tp-soft)}
:where(:root[data-page="tickets"]) .tp-modal .tp-send{padding:8px 16px;font-size:13px}
/* Search-as-you-type picker: everything is listed, typing narrows it. */
:where(:root[data-page="tickets"]) .tp-combo{position:relative}
:where(:root[data-page="tickets"]) .tp-combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;background:var(--tp-card);border:1px solid var(--tp-line);border-radius:8px;box-shadow:0 10px 30px rgba(20,22,28,.16);max-height:220px;overflow-y:auto;padding:4px;display:none}
:where(:root[data-page="tickets"]) .tp-combo.open .tp-combo-list{display:block}
:where(:root[data-page="tickets"]) .tp-combo-list button{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:6px;padding:6px 9px;cursor:pointer;font-size:12px}
:where(:root[data-page="tickets"]) .tp-combo-list button:hover,:where(:root[data-page="tickets"]) .tp-combo-list button.hi{background:var(--tp-soft)}
:where(:root[data-page="tickets"]) .tp-combo-list small{display:block;color:var(--tp-ink2);font-size:11px}

/* -- Footer / toast ----------------------------------------------------------------- */
:where(:root[data-page="tickets"]) .tp-foot{border-top:1px solid var(--tp-line);background:var(--tp-card);flex:none}
:where(:root[data-page="tickets"]) .tp-foot .tp-wrap{display:flex;align-items:center;gap:12px;height:52px;color:var(--tp-ink2);font-size:12px}
:where(:root[data-page="tickets"]) .tp-foot a{color:inherit}
:where(:root[data-page="tickets"]) .tp-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--nx-toast-bg,#1B1D29);color:var(--nx-toast-ink,#fff);padding:9px 16px;border-radius:8px;font-size:13px;transition:.18s;z-index:70}
:where(:root[data-page="tickets"]) .tp-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* -- Narrow screens: one panel at a time ------------------------------------------- */
@media (max-width:1080px){
  :where(:root[data-page="tickets"]) .tp-links a.tp-hide-md{display:none}
  :where(:root[data-page="tickets"]) .tp-grid{grid-template-columns:240px minmax(0,1fr) 230px}
}
@media (max-width:860px){
  :where(:root[data-page="tickets"]) .tp-wrap{padding:0 16px}
  :where(:root[data-page="tickets"]) .tp-top .tp-wrap{gap:12px}
  :where(:root[data-page="tickets"]) .tp-links{display:none}
  :where(:root[data-page="tickets"]) .tp-cta{display:none}   /* the list's own Create Ticket stays */
  :where(:root[data-page="tickets"]) .tp-brand{flex:1}
  :where(:root[data-page="tickets"]) .tp-main{padding:12px 0}
  :where(:root[data-page="tickets"]) .tp-grid,:where(:root[data-page="tickets"]) .tp-grid.l-off,:where(:root[data-page="tickets"]) .tp-grid.r-off,:where(:root[data-page="tickets"]) .tp-grid.l-off.r-off{grid-template-columns:minmax(0,1fr);height:calc(100vh - 64px - 52px - 24px);min-height:460px}
  :where(:root[data-page="tickets"]) .tp-grid > .tp-card{display:none}
  :where(:root[data-page="tickets"]) .tp-grid[data-view="list"] #tpList,
  :where(:root[data-page="tickets"]) .tp-grid[data-view="chat"] #tpChat,
  :where(:root[data-page="tickets"]) .tp-grid[data-view="info"] #tpInfo{display:flex}
  :where(:root[data-page="tickets"]) .tp-collapse{display:none !important}
  :where(:root[data-page="tickets"]) .tp-back{display:grid}
  :where(:root[data-page="tickets"]) .tp-grid.l-off #tpList > *, :where(:root[data-page="tickets"]) .tp-grid.r-off #tpInfo > *{display:revert}
  :where(:root[data-page="tickets"]) .tp-grid.l-off #tpList .tp-head > *:not(.tp-collapse), :where(:root[data-page="tickets"]) .tp-grid.r-off #tpInfo .tp-head > *:not(.tp-collapse){display:revert}
  :where(:root[data-page="tickets"]) .tp-grid.l-off #tpList .tp-head, :where(:root[data-page="tickets"]) .tp-grid.r-off #tpInfo .tp-head{display:flex;padding:0 10px 0 14px;justify-content:flex-start;border-bottom:1px solid var(--tp-line)}
  :where(:root[data-page="tickets"]) .tp-msg{max-width:90%}
  :where(:root[data-page="tickets"]) .tp-row2{grid-template-columns:1fr}
  :where(:root[data-page="tickets"]) .tp-foot .tp-wrap{height:auto;padding-top:12px;padding-bottom:12px}
}
@media (min-width:861px){ :where(:root[data-page="tickets"]) .tp-info-btn{display:none} }


/* ----------------------------------------------------------------------------
 * 15.22  Administration -- HR
 * administration/hr.php, data-page="hr"
 * -------------------------------------------------------------------------- */
/* ── Accent: teal ────────────────────────────────────────
   Locally override the portal's green accent tokens so this
   page uses a teal accent, without touching shared portal.css.
   Scoped to .shell so the rest of the portal is unaffected. */
:where(:root[data-page="hr"]) .shell{
  --blue:#2FA39A;        /* softer, lighter teal accent (solid fills; white text stays legible) */
  --blue-dk:#1C7F77;     /* deeper teal for text/links on light backgrounds */
  --blue-lt:#E2F4F1;     /* very pale teal tint for backgrounds */
  --accent-blue:#2FA39A;
  --accent-blue-lt:#E2F4F1;
}

/* ── Scroll-area: thin, stable-gutter scrollbar so the appearing scrollbar
   never steals horizontal room (page can still scroll fully to the right
   when content needs it). */
:where(:root[data-page="hr"]) .shell .scroll-area{scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#CFD3D8 transparent}
:where(:root[data-page="hr"]) .shell .scroll-area::-webkit-scrollbar{width:10px;height:10px}
:where(:root[data-page="hr"]) .shell .scroll-area::-webkit-scrollbar-track{background:transparent}
:where(:root[data-page="hr"]) .shell .scroll-area::-webkit-scrollbar-thumb{background:#CFD3D8;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
:where(:root[data-page="hr"]) .shell .scroll-area::-webkit-scrollbar-thumb:hover{background:#A8ADB3;background-clip:padding-box;border:2px solid transparent}
:where(:root[data-page="hr"]) .coral-focus:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,163,154,.18)}

/* Activity log */
:where(:root[data-page="hr"]) .act-feed{display:flex;flex-direction:column;gap:2px;max-width:760px}
:where(:root[data-page="hr"]) .act-row{display:flex;gap:13px;padding:13px 4px;border-bottom:1px solid var(--border)}
:where(:root[data-page="hr"]) .act-row:last-child{border-bottom:none}
:where(:root[data-page="hr"]) .act-dot{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--blue-lt);color:var(--blue-dk);margin-top:1px}
:where(:root[data-page="hr"]) .act-dot svg{width:15px;height:15px}
:where(:root[data-page="hr"]) .act-dot.create{background:var(--green-lt);color:var(--green)}
:where(:root[data-page="hr"]) .act-dot.delete{background:var(--red-lt);color:var(--red-text)}
:where(:root[data-page="hr"]) .act-dot.done{background:var(--blue-lt);color:var(--blue-dk)}
:where(:root[data-page="hr"]) .act-body{flex:1;min-width:0}
:where(:root[data-page="hr"]) .act-text{font-size:13.5px;color:var(--text);line-height:1.45}
:where(:root[data-page="hr"]) .act-text strong{font-weight:600}
:where(:root[data-page="hr"]) .act-meta{font-size:11.5px;color:var(--text3);margin-top:2px}
:where(:root[data-page="hr"]) .sb-subname{font-size:11px;font-weight:500;color:var(--text3);letter-spacing:-.01em;margin-top:1px}

/* ── Dashboard ───────────────────────────────────────── */
/* Stat cards reuse portal.css .stats/.stat. Reminder rows below sit inside
   .panel bodies, matching the Requests dashboard look. */
/* Responsive dashboard chart grid. One 12-col grid holds all four charts;
   each chart picks a column span that suits its content. As the viewport
   narrows, breakpoints collapse spans so cards stack gracefully instead of
   cramming or leaving a sea of whitespace. */
:where(:root[data-page="hr"]) .dash-charts{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-bottom:14px}
:where(:root[data-page="hr"]) .dash-charts > .panel{margin-bottom:0;padding:0;overflow:hidden;min-width:0}
:where(:root[data-page="hr"]) .dash-charts .panel-body{padding:16px 20px}
:where(:root[data-page="hr"]) .dash-charts .panel-head{padding:14px 18px;border-bottom:1px solid var(--border)}
/* Default (wide screens ≥ 1280px): donut + outstanding tasks share top row
   with the line chart; bar chart spans the whole next row. */
:where(:root[data-page="hr"]) .dash-c-donut{grid-column:span 3}
:where(:root[data-page="hr"]) .dash-c-tasks{grid-column:span 3}
:where(:root[data-page="hr"]) .dash-c-line {grid-column:span 6}
:where(:root[data-page="hr"]) .dash-c-bar  {grid-column:span 12}
/* Medium screens (≤ 1279px): small charts pair on top; line + bar each take a full row. */
@media (max-width:1279px){
  :where(:root[data-page="hr"]) .dash-c-donut{grid-column:span 6}
  :where(:root[data-page="hr"]) .dash-c-tasks{grid-column:span 6}
  :where(:root[data-page="hr"]) .dash-c-line {grid-column:span 12}
  :where(:root[data-page="hr"]) .dash-c-bar  {grid-column:span 12}
}
/* Narrow screens (≤ 720px): everything stacks. */
@media (max-width:720px){
  :where(:root[data-page="hr"]) .dash-c-donut,:where(:root[data-page="hr"]) .dash-c-tasks,:where(:root[data-page="hr"]) .dash-c-line,:where(:root[data-page="hr"]) .dash-c-bar{grid-column:span 12}
}
/* Small charts — donut + task-status — are short content; compress the panel body height. */
:where(:root[data-page="hr"]) .dash-chart-compact{min-height:160px;display:flex;align-items:center}
:where(:root[data-page="hr"]) .dash-chart-compact > *{width:100%}
/* Side-by-side reminder panels with a hard cap on rows + "view all" footer. */
:where(:root[data-page="hr"]) .dash-rems{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin-bottom:14px}
:where(:root[data-page="hr"]) .dash-rems > .panel{margin-bottom:0;padding:0;overflow:hidden;min-width:0}
@media (max-width:720px){
  :where(:root[data-page="hr"]) .dash-rems{grid-template-columns:1fr}
}
/* For the standalone dashboard panels (the bottom "Coming Up" card),
   strip the 24px outer padding (which was meant for IT-setup form panels)
   and let the inner content control its own breathing room. The panel-head
   already has its own padding from portal.css. */
:where(:root[data-page="hr"]) #dashWrap > .panel{padding:0;overflow:hidden}
:where(:root[data-page="hr"]) #dashWrap > .panel > .panel-head{padding:12px 18px;border-bottom:1px solid var(--border)}
/* Grouped-by-employee row — name on top, their items listed below as small chips/lines. */
:where(:root[data-page="hr"]) .hr-emp-rem{padding:10px 18px;border-bottom:1px solid #F1F3F4;cursor:pointer;transition:background .12s}
:where(:root[data-page="hr"]) .hr-emp-rem:last-child{border-bottom:none}
:where(:root[data-page="hr"]) .hr-emp-rem:hover{background:var(--nx-rail)}
:where(:root[data-page="hr"]) .hr-emp-rem-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
:where(:root[data-page="hr"]) .hr-emp-rem-name{font-size:13px;font-weight:600;color:var(--text);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
:where(:root[data-page="hr"]) .hr-emp-rem-count{font-size:10.5px;font-weight:700;color:var(--text3);background:var(--bg);padding:1px 7px;border-radius:20px;flex-shrink:0}
:where(:root[data-page="hr"]) .hr-emp-rem-count.red{background:var(--red-lt,#FBEAEA);color:var(--red-text,#B23B3B)}
:where(:root[data-page="hr"]) .hr-emp-rem-count.amber{background:#FFF4E0;color:#9A6711}
:where(:root[data-page="hr"]) .hr-emp-rem-count.teal{background:var(--blue-lt);color:var(--blue-dk)}
:where(:root[data-page="hr"]) .hr-emp-rem-list{font-size:11.5px;color:var(--text2);line-height:1.5;padding-left:1px}
:where(:root[data-page="hr"]) .hr-emp-rem-item{display:flex;align-items:baseline;gap:8px;padding:1px 0}
:where(:root[data-page="hr"]) .hr-emp-rem-item .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text2)}
:where(:root[data-page="hr"]) .hr-emp-rem-item .when{font-size:10.5px;font-weight:600;flex-shrink:0;white-space:nowrap}
:where(:root[data-page="hr"]) .hr-emp-rem-item .when.red{color:var(--red-text,#B23B3B)}
:where(:root[data-page="hr"]) .hr-emp-rem-item .when.amber{color:#9A6711}
:where(:root[data-page="hr"]) .hr-emp-rem-item .when.teal{color:var(--blue-dk)}
:where(:root[data-page="hr"]) .hr-rem-footer{display:flex;justify-content:center;padding:8px 18px;border-top:1px solid #F1F3F4}
:where(:root[data-page="hr"]) .hr-rem-footer a{font-size:11.5px;font-weight:600;color:var(--blue-dk);text-decoration:none;cursor:pointer}
:where(:root[data-page="hr"]) .hr-rem-footer a:hover{text-decoration:underline}
:where(:root[data-page="hr"]) .hr-rem{display:flex;align-items:center;gap:10px;padding:10px 18px;cursor:pointer;transition:background .12s;border-bottom:1px solid #F1F3F4}
:where(:root[data-page="hr"]) .hr-rem:last-child{border-bottom:none}
:where(:root[data-page="hr"]) .hr-rem:hover{background:var(--nx-rail)}
:where(:root[data-page="hr"]) .hr-rem-when{font-size:11.5px;font-weight:700;white-space:nowrap}
:where(:root[data-page="hr"]) .hr-rem-when.red{color:var(--red-text,#B23B3B)}
:where(:root[data-page="hr"]) .hr-rem-when.amber{color:#9A6711}
:where(:root[data-page="hr"]) .hr-rem-when.teal{color:var(--blue-dk)}
:where(:root[data-page="hr"]) .rem-type{flex-shrink:0;font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em}
:where(:root[data-page="hr"]) .rem-type.onboarding{background:#EEEDFB;color:#5754C7}
:where(:root[data-page="hr"]) .rem-type.offboarding{background:#FBEEE6;color:#C2683B}

/* ── Interactive charts ──────────────────────────────── */
/* Donut slice pops outward + brightens on hover. transform-origin center so
   the translate in JS (for the active/clicked slice) composes cleanly. */
:where(:root[data-page="hr"]) .donut-seg{transition:transform .15s ease, opacity .2s, filter .15s}
:where(:root[data-page="hr"]) .donut-seg:hover{filter:brightness(1.08) drop-shadow(0 2px 4px rgba(0,0,0,.18))}
:where(:root[data-page="hr"]) svg:hover .donut-seg:not(:hover){opacity:.55}
/* Task-status clickable bars lift slightly on hover. */
:where(:root[data-page="hr"]) .tsbar{display:flex;align-items:center;gap:10px;margin-bottom:11px;padding:3px 6px;border-radius:7px;transition:background .12s}
:where(:root[data-page="hr"]) .tsbar.clickable:hover{background:var(--bg2)}
/* Department bar columns lift on hover. */
:where(:root[data-page="hr"]) .barcol .bar-fill{transition:transform .15s, opacity .2s, height .3s, filter .15s}
:where(:root[data-page="hr"]) .barcol:hover .bar-fill{transform:translateY(-4px);filter:brightness(1.06) drop-shadow(0 3px 6px rgba(0,0,0,.15))}

/* ── Cross-filter chip bar ───────────────────────────── */
:where(:root[data-page="hr"]) .dash-filterbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:9px 13px;background:var(--blue-lt);border:1px solid #BDE3DD;border-radius:var(--radius);flex-wrap:wrap}
:where(:root[data-page="hr"]) .dash-filterbar-lbl{font-size:11px;font-weight:600;color:var(--blue-dk);text-transform:uppercase;letter-spacing:.05em}
:where(:root[data-page="hr"]) .dash-chip{display:inline-flex;align-items:center;gap:7px;background:var(--nx-surface);border:1px solid #BDE3DD;border-radius:20px;padding:4px 6px 4px 12px;font-size:12.5px;font-weight:600;color:var(--text)}
:where(:root[data-page="hr"]) .dash-chip-x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--bg);color:var(--text2);cursor:pointer;font-size:14px;line-height:1}
:where(:root[data-page="hr"]) .dash-chip-x:hover{background:var(--red-lt,#FBEAEA);color:var(--red,#D9534F)}
:where(:root[data-page="hr"]) .dash-chip-clear{font-size:11.5px;font-weight:600;color:var(--blue-dk);cursor:pointer;margin-left:auto}
:where(:root[data-page="hr"]) .dash-chip-clear:hover{text-decoration:underline}

/* ── Reports ─────────────────────────────────────────── */
:where(:root[data-page="hr"]) .rpt-tbl-wrap{background:var(--nx-surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
:where(:root[data-page="hr"]) .rpt-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
:where(:root[data-page="hr"]) .rpt-tbl th{text-align:left;font-size:10.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;padding:11px 13px;border-bottom:1.5px solid var(--border);background:var(--bg2);white-space:nowrap}
:where(:root[data-page="hr"]) .rpt-tbl td{padding:11px 13px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
:where(:root[data-page="hr"]) .rpt-tbl tr:last-child td{border-bottom:none}
:where(:root[data-page="hr"]) .rpt-tbl tbody tr{cursor:pointer}
:where(:root[data-page="hr"]) .rpt-tbl tbody tr:hover{background:var(--bg2)}
:where(:root[data-page="hr"]) .rpt-prog{display:flex;align-items:center;gap:8px;min-width:120px}
:where(:root[data-page="hr"]) .rpt-prog .bar{flex:1;height:6px;background:var(--bg);border-radius:20px;overflow:hidden}
:where(:root[data-page="hr"]) .rpt-prog .bar i{display:block;height:100%;background:var(--blue);border-radius:20px}
:where(:root[data-page="hr"]) .rpt-badge{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px}
:where(:root[data-page="hr"]) .rpt-badge.red{background:var(--red-lt,#FBEAEA);color:var(--red-text,#B23B3B)}
:where(:root[data-page="hr"]) .rpt-badge.amber{background:#FFF4E0;color:#9A6711}
:where(:root[data-page="hr"]) .rpt-badge.zero{color:var(--text3)}

/* ── Record list ─────────────────────────────────────── */
:where(:root[data-page="hr"]) .hr-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
:where(:root[data-page="hr"]) .hr-search{flex:1;min-width:200px;position:relative}
:where(:root[data-page="hr"]) .hr-search input{width:100%;padding:9px 12px 9px 34px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:var(--font);font-size:13.5px;background:var(--nx-surface)}
:where(:root[data-page="hr"]) .hr-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,163,154,.18)}
:where(:root[data-page="hr"]) .hr-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text3)}
:where(:root[data-page="hr"]) .seg{display:inline-flex;border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--nx-surface)}
:where(:root[data-page="hr"]) .seg button{border:none;background:none;padding:8px 14px;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--text2);cursor:pointer}
:where(:root[data-page="hr"]) .seg button.active{background:var(--blue);color:var(--nx-on-brand)}
:where(:root[data-page="hr"]) .seg button+button{border-left:1.5px solid var(--border)}

:where(:root[data-page="hr"]) .hr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
:where(:root[data-page="hr"]) .hr-card{background:var(--nx-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;cursor:pointer;transition:box-shadow .15s,border-color .15s}
:where(:root[data-page="hr"]) .hr-card:hover{border-color:var(--blue);box-shadow:0 3px 14px rgba(0,0,0,.06)}
:where(:root[data-page="hr"]) .hr-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:4px}
:where(:root[data-page="hr"]) .hr-card-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
:where(:root[data-page="hr"]) .hr-card-sub{font-size:12px;color:var(--text3);margin-bottom:12px}
:where(:root[data-page="hr"]) .pill{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
/* TYPE pills — softer mid-tone fills, white text, clear of the teal accent. */
:where(:root[data-page="hr"]) .pill.onboarding{background:#7C7AED;color:var(--nx-on-brand)}
:where(:root[data-page="hr"]) .pill.offboarding{background:#E8825A;color:var(--nx-on-brand)}
/* STATUS pills — soft muted tints; quiet so type stays dominant. */
:where(:root[data-page="hr"]) .pill.active{background:#F1F3F5;color:#54616E}
:where(:root[data-page="hr"]) .pill.completed{background:#E8F3EC;color:#2C7A45}
:where(:root[data-page="hr"]) .pill.cancelled{background:#FBEAEA;color:#B23B3B}
:where(:root[data-page="hr"]) .prog{height:7px;background:var(--bg);border-radius:20px;overflow:hidden;margin-top:4px}
:where(:root[data-page="hr"]) .prog-fill{height:100%;background:var(--blue);border-radius:20px;transition:width .3s}
:where(:root[data-page="hr"]) .hr-card-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text3);margin-top:7px}

/* ── Detail view ─────────────────────────────────────── */
/* Detail-view sticky header: name + progress always visible while scrolling
   the checklist. Uses negative margins to span the scroll-area padding. */
:where(:root[data-page="hr"]) .hr-detail-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
:where(:root[data-page="hr"]) .hr-detail-sticky{
  position:sticky;top:-22px;            /* cancel the .scroll-area's top padding */
  z-index:20;background:var(--bg);
  margin:-22px -24px 14px;              /* full-bleed across scroll-area padding */
  padding:14px 24px 12px;
  border-bottom:1px solid var(--border);
}
:where(:root[data-page="hr"]) .hr-detail-sticky .hr-detail-head{margin-bottom:8px}
/* Inline progress: shorter bar, sits on the same line as the name row. */
:where(:root[data-page="hr"]) .det-prog-inline{display:flex;align-items:center;gap:10px;font-size:11.5px}
:where(:root[data-page="hr"]) .det-prog-inline .det-prog-label{font-size:10.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
:where(:root[data-page="hr"]) .det-prog-inline .det-prog-bar{width:180px;height:6px;background:var(--bg);border-radius:20px;overflow:hidden;flex-shrink:0}
:where(:root[data-page="hr"]) .det-prog-inline .det-prog-bar i{display:block;height:100%;background:linear-gradient(90deg,#2FA39A,#1C7F77);border-radius:20px;transition:width .3s}
:where(:root[data-page="hr"]) .det-prog-inline .det-prog-stats{font-size:11.5px;color:var(--text2);font-weight:600;flex-shrink:0;white-space:nowrap}
:where(:root[data-page="hr"]) .back-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid var(--border);border-radius:var(--radius);padding:7px 12px;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--text2);cursor:pointer}
:where(:root[data-page="hr"]) .back-btn:hover{border-color:var(--blue);color:var(--blue)}
:where(:root[data-page="hr"]) .tabbar{display:flex;gap:2px;border-bottom:1.5px solid var(--border);margin:18px 0 18px}
:where(:root[data-page="hr"]) .tabbar button{border:none;background:none;padding:10px 16px;font-family:var(--font);font-size:13px;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1.5px}
:where(:root[data-page="hr"]) .tabbar button.active{color:var(--blue);border-bottom-color:var(--blue)}

:where(:root[data-page="hr"]) .phase{margin-bottom:16px}
:where(:root[data-page="hr"]) .phase-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:7px}
/* Compact task row: smaller min-height and padding; due pill sits inline next
   to the label rather than stacked beneath it. */
:where(:root[data-page="hr"]) .task{display:flex;align-items:center;gap:10px;height:38px;min-height:38px;padding:0 11px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:5px;background:var(--nx-surface);cursor:pointer;transition:background .12s,border-color .12s;box-sizing:border-box;overflow:hidden}
:where(:root[data-page="hr"]) .task:hover{border-color:var(--blue2,var(--border2))}
:where(:root[data-page="hr"]) .task.done{background:var(--green-lt);border-color:#BfE3CB}
:where(:root[data-page="hr"]) .task.overdue{border-color:var(--red-border,#E7B7B7);background:var(--red-lt,#FBEAEA)}
:where(:root[data-page="hr"]) .task.overdue.done{border-color:#BfE3CB;background:var(--green-lt)}
:where(:root[data-page="hr"]) .task-check{flex-shrink:0;width:17px;height:17px;border:2px solid var(--border2);border-radius:4px;display:flex;align-items:center;justify-content:center;background:var(--nx-surface)}
:where(:root[data-page="hr"]) .task.done .task-check{background:var(--blue);border-color:var(--blue)}
:where(:root[data-page="hr"]) .task-check svg{width:10px;height:10px;color:var(--nx-on-brand);opacity:0}
:where(:root[data-page="hr"]) .task.done .task-check svg{opacity:1}
:where(:root[data-page="hr"]) .task-body{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow:hidden}
:where(:root[data-page="hr"]) .task-label{font-size:12.5px;color:var(--text);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1}
/* Due-date pill — inline next to the label (no margin-top stacking). */
:where(:root[data-page="hr"]) .due-pill{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;padding:1px 7px;border-radius:20px;letter-spacing:.01em;background:var(--bg);color:var(--text2);border:1px solid var(--border);flex-shrink:0}
:where(:root[data-page="hr"]) .due-pill svg{width:10px;height:10px}
:where(:root[data-page="hr"]) .due-pill.soon{background:#FFF4E0;color:#9A6711;border-color:#F2DDB0}
:where(:root[data-page="hr"]) .due-pill.overdue{background:var(--red-lt,#FBEAEA);color:var(--red-text,#B23B3B);border-color:var(--red-border,#E7B7B7)}
:where(:root[data-page="hr"]) .due-pill.done{background:var(--green-lt);color:#2C7A45;border-color:#BfE3CB}
:where(:root[data-page="hr"]) .task-meta{font-size:11px;color:var(--text3);text-align:right;flex-shrink:0;white-space:nowrap;line-height:1.3;max-width:140px;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="hr"]) .task-meta .by{font-weight:600;color:var(--text2)}
:where(:root[data-page="hr"]) .task-actions{display:flex;gap:5px;align-items:center;flex-shrink:0}
:where(:root[data-page="hr"]) .icon-btn{background:none;border:1px solid var(--border);border-radius:5px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);padding:0}
:where(:root[data-page="hr"]) .icon-btn:hover{border-color:var(--blue);color:var(--blue)}
:where(:root[data-page="hr"]) .icon-btn svg{width:13px;height:13px}
:where(:root[data-page="hr"]) .task-atts{flex-shrink:0;display:flex;flex-wrap:nowrap;gap:6px;justify-content:flex-end;max-width:420px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
:where(:root[data-page="hr"]) .task-atts::-webkit-scrollbar{display:none}
:where(:root[data-page="hr"]) .att-rect{display:flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--border);border-radius:7px;padding:4px 8px;max-width:220px;text-decoration:none}
:where(:root[data-page="hr"]) .att-rect:hover{border-color:var(--blue)}
:where(:root[data-page="hr"]) .att-rect .att-ico{flex-shrink:0;width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;background:var(--blue-lt);color:var(--blue-dk);font-size:12px}
:where(:root[data-page="hr"]) .att-rect .att-info{min-width:0;display:flex;flex-direction:column;line-height:1.2}
:where(:root[data-page="hr"]) .att-rect .att-name{font-size:10.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
:where(:root[data-page="hr"]) .att-rect .att-size{font-size:9px;color:var(--text3)}
:where(:root[data-page="hr"]) .att-rect .att-x{flex-shrink:0;margin-left:2px;color:var(--text3);font-weight:700;font-size:12px;cursor:pointer;line-height:1}
:where(:root[data-page="hr"]) .att-rect .att-x:hover{color:var(--red)}
:where(:root[data-page="hr"]) .task-files{display:flex;flex-wrap:wrap;gap:6px}
:where(:root[data-page="hr"]) .file-chip{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--border);border-radius:20px;padding:3px 10px;font-size:11.5px;color:var(--text2)}
:where(:root[data-page="hr"]) .file-chip a{color:var(--accent-blue);text-decoration:none;font-weight:500}
:where(:root[data-page="hr"]) .file-chip .x{cursor:pointer;color:var(--text3);font-weight:700}
:where(:root[data-page="hr"]) .file-chip .x:hover{color:var(--red)}

/* Status pill in the detail header (driven by checklist completion). */
:where(:root[data-page="hr"]) .status-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 11px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em;background:var(--blue-lt);color:var(--blue-dk);border:1px solid #BDE3DD}
:where(:root[data-page="hr"]) .status-pill.completed{background:var(--green-lt);color:#1E6B33;border-color:#BfE3CB}
:where(:root[data-page="hr"]) .status-pill.cancelled{background:var(--bg);color:var(--text3);border-color:var(--border)}

/* IT panel sub-section heading. */
:where(:root[data-page="hr"]) .it-sub-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);margin:18px 0 10px;border-top:1px solid var(--border);padding-top:14px}
:where(:root[data-page="hr"]) .it-sub-h:first-of-type{margin-top:8px;border-top:0;padding-top:0}
:where(:root[data-page="hr"]) .it-save-hint.saving{color:var(--amber-text)}
:where(:root[data-page="hr"]) .it-save-hint.saved{color:var(--green)}

/* Detail progress strip */
:where(:root[data-page="hr"]) .det-prog{display:flex;align-items:center;gap:12px;padding:12px 18px}
:where(:root[data-page="hr"]) .det-prog-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}
:where(:root[data-page="hr"]) .det-prog-bar{flex:1;height:8px;background:var(--bg);border-radius:20px;overflow:hidden}
:where(:root[data-page="hr"]) .det-prog-bar i{display:block;height:100%;background:linear-gradient(90deg,#2FA39A,#1C7F77);border-radius:20px;transition:width .3s}
:where(:root[data-page="hr"]) .det-prog-stats{font-size:12px;color:var(--text2);font-weight:600;flex-shrink:0}


/* ── Forms (aligned to the Requests form-card look) ──── */
:where(:root[data-page="hr"]) .field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
:where(:root[data-page="hr"]) .field label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
:where(:root[data-page="hr"]) .field input,:where(:root[data-page="hr"]) .field select,:where(:root[data-page="hr"]) .field textarea{padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:var(--font);font-size:13px;color:var(--text);background:var(--nx-surface);transition:border-color .1s}
:where(:root[data-page="hr"]) .field input:focus,:where(:root[data-page="hr"]) .field select:focus,:where(:root[data-page="hr"]) .field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,163,154,.12)}
:where(:root[data-page="hr"]) .field textarea{resize:vertical;min-height:80px}
:where(:root[data-page="hr"]) .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
:where(:root[data-page="hr"]) .chk-row{display:flex;align-items:center;gap:8px;padding:8px 0}
:where(:root[data-page="hr"]) .chk-row input{width:17px;height:17px;accent-color:var(--blue)}
:where(:root[data-page="hr"]) .chk-row label{font-size:13px;color:var(--text);text-transform:none;letter-spacing:0;font-weight:500}
/* IT-setup tab cards reuse the form-card visual (padded white panel). */
:where(:root[data-page="hr"]) .panel{background:var(--nx-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-bottom:14px}
:where(:root[data-page="hr"]) .panel-h{font-size:14px;font-weight:700;letter-spacing:-.02em;margin-bottom:20px;color:var(--text)}

/* ── Email composer ──────────────────────────────────── */
:where(:root[data-page="hr"]) .email-tabs{display:flex;gap:8px;margin-bottom:14px}
:where(:root[data-page="hr"]) .email-tabs button{border:1.5px solid var(--border);background:var(--nx-surface);border-radius:var(--radius);padding:9px 16px;font-family:var(--font);font-size:13px;font-weight:600;color:var(--text2);cursor:pointer}
:where(:root[data-page="hr"]) .email-tabs button.active{background:var(--blue);color:var(--nx-on-brand);border-color:var(--blue)}
:where(:root[data-page="hr"]) .email-body{width:100%;min-height:340px;padding:13px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:'SF Mono',Menlo,monospace;font-size:12.5px;line-height:1.6;color:var(--text);background:var(--bg2);resize:vertical}
:where(:root[data-page="hr"]) .email-actions{display:flex;gap:9px;margin-top:12px}

/* Modal styled as a form-card: rounded white sheet, generous padding. */
:where(:root[data-page="hr"]) .modal-back{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
:where(:root[data-page="hr"]) .modal-back.open{display:flex}
:where(:root[data-page="hr"]) .modal{background:var(--nx-surface);border-radius:var(--radius-lg);width:600px;max-width:95vw;max-height:90vh;overflow:auto;padding:24px;border:1px solid var(--border)}
:where(:root[data-page="hr"]) .modal-h{font-size:14px;font-weight:700;letter-spacing:-.02em;margin-bottom:20px;color:var(--text)}
:where(:root[data-page="hr"]) .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

:where(:root[data-page="hr"]) .empty{text-align:center;padding:54px 20px;color:var(--text3)}
:where(:root[data-page="hr"]) .empty svg{width:42px;height:42px;color:var(--border2);margin-bottom:12px}
:where(:root[data-page="hr"]) .empty-title{font-size:15px;font-weight:600;color:var(--text2);margin-bottom:5px}
:where(:root[data-page="hr"]) .loading-state{text-align:center;padding:40px;color:var(--text3);font-size:13.5px}
:where(:root[data-page="hr"]) .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1F2937;color:var(--nx-on-brand);padding:11px 18px;border-radius:8px;font-size:13px;display:none;z-index:300;max-width:90vw}
:where(:root[data-page="hr"]) .toast.show{display:block}
:where(:root[data-page="hr"]) .toast.err{background:var(--red)}


/* ----------------------------------------------------------------------------
 * 15.23  Users
 * users.php, data-page="users"
 * -------------------------------------------------------------------------- */
/* ==== Nexus theme tokens (same scale as the other payroll pages) ==== */
:root:where([data-page="users"]){
  --brand:var(--blue);--brand-lt:var(--blue-lt);
  --bg:var(--nx-bg);--bg2:var(--nx-rail);--surface:var(--nx-surface);--surface2:#F3F4F6;
  --border:var(--nx-line);--border2:var(--nx-line2);
  --text:var(--nx-ink);--text2:var(--nx-ink2);--text3:var(--nx-ink3);
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="users"]){
  --nx-up:#34D27B;--nx-up-bg:#16301F;
  --nx-down:#F4756B;--nx-down-bg:#3A1E1C;
  --brand:#1FB866;--brand-lt:#13361F;
  --bg:var(--nx-bg);--bg2:var(--nx-surface);--surface:var(--nx-surface);--surface2:var(--nx-hover);
  --border:var(--nx-line);--border2:var(--nx-line2);
  --text:var(--nx-ink);--text2:var(--nx-ink2);--text3:var(--nx-ink3);
  --blue:#1FB866;--blue-dk:#13361F;--blue-lt:#15301F;
  --green:#34D27B;--green-lt:#16301F;
  --amber:#E0A93B;--amber-lt:#2A2510;--amber-text:#E8C25A;
  --red:#F4756B;--red-lt:#3A1E1C;--red-text:#F4756B;
  color-scheme:dark;
}
:where(:root[data-page="users"]) *, *:where([data-page="users"]){box-sizing:border-box}
html:where([data-page="users"]),:where(:root[data-page="users"]) body{height:100%;margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px}
:where(:root[data-page="users"]) button{font-family:inherit}

:where(:root[data-page="users"]) .nx-app{display:grid;grid-template-columns:248px 1fr;min-height:calc(100vh - 24px);max-width:1760px;margin:12px;background:var(--nx-surface);border-radius:18px;overflow:hidden;box-shadow:0 16px 48px rgba(27,29,41,.10);border:1px solid var(--nx-line)}
@media(min-width:1784px){:where(:root[data-page="users"]) .nx-app{margin:12px auto}}
@media(max-width:980px){:where(:root[data-page="users"]) .nx-app{grid-template-columns:1fr;margin:0;border-radius:0;border:none;min-height:100vh}}

:where(:root[data-page="users"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px}
@media(max-width:980px){:where(:root[data-page="users"]) .nx-rail{display:none}}
:where(:root[data-page="users"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="users"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#04a85a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
:where(:root[data-page="users"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="users"]) .nx-navsec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3);padding:14px 10px 6px}
:where(:root[data-page="users"]) .nx-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--nx-ink2);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,color .12s}
:where(:root[data-page="users"]) .nx-nav svg{width:17px;height:17px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="users"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="users"]) .nx-nav.active{background:var(--brand);color:#fff}
:where(:root[data-page="users"]) .nx-nav.active svg{color:#fff}
:where(:root[data-page="users"]) .nx-rail-foot{margin-top:auto;padding-top:14px}

:where(:root[data-page="users"]) .nx-main{display:flex;flex-direction:column;min-width:0}
:where(:root[data-page="users"]) .nx-topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="users"]) .nx-search{flex:1;max-width:340px;position:relative}
:where(:root[data-page="users"]) .nx-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--nx-ink3)}
:where(:root[data-page="users"]) .nx-search input{width:100%;border:1px solid var(--nx-line2);background:var(--nx-rail);border-radius:10px;padding:9px 12px 9px 34px;font-size:13px;font-family:inherit;color:var(--nx-ink)}
:where(:root[data-page="users"]) .nx-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="users"]) .nx-top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
:where(:root[data-page="users"]) .nx-theme-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--nx-line2);background:var(--nx-elev);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2)}
:where(:root[data-page="users"]) .nx-theme-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="users"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="users"]) .nx-theme-btn .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="users"]) .nx-theme-btn .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="users"]) .nx-theme-btn .nx-ic-moon{display:block}
:where(:root[data-page="users"]) .nx-user-av{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;text-transform:uppercase}

:where(:root[data-page="users"]) .nx-scroll{flex:1;overflow-y:auto;padding:20px 22px 28px;scrollbar-gutter:stable}
:where(:root[data-page="users"]) .nx-scroll::-webkit-scrollbar{width:10px;height:10px;background:transparent}
:where(:root[data-page="users"]) .nx-scroll::-webkit-scrollbar-track{background:transparent}
:where(:root[data-page="users"]) .nx-scroll::-webkit-scrollbar-thumb{background:var(--nx-line2);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
:where(:root[data-page="users"]) .nx-scroll::-webkit-scrollbar-thumb:hover{background:var(--nx-ink3);background-clip:padding-box}

:where(:root[data-page="users"]) .nx-pagehead{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
:where(:root[data-page="users"]) .nx-h1{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0}
:where(:root[data-page="users"]) .nx-pagehead .nx-sub{font-size:12.5px;color:var(--nx-ink3)}
:where(:root[data-page="users"]) .nx-pagehead-right{margin-left:auto;display:flex;gap:8px;align-items:center}
:where(:root[data-page="users"]) .nx-pill-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-surface);border-radius:9px;padding:7px 12px;font-size:12px;font-weight:600;color:var(--nx-ink2);cursor:pointer;text-decoration:none}
:where(:root[data-page="users"]) .nx-pill-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="users"]) .nx-pill-btn svg{width:14px;height:14px}
:where(:root[data-page="users"]) .nx-pill-btn.active{border-color:var(--brand);color:var(--brand);background:var(--brand-lt)}

:where(:root[data-page="users"]) .nx-btn{justify-content:center;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:11px;padding:10px 14px;font-size:13px;font-weight:600;color:var(--nx-ink);cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s}
:where(:root[data-page="users"]) .nx-btn:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="users"]) .nx-btn:disabled{opacity:.55;cursor:default}
:where(:root[data-page="users"]) .nx-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="users"]) .nx-btn.primary:hover{background:var(--blue-dk);box-shadow:0 4px 14px rgba(1,139,70,.28)}
:where(:root[data-page="users"]) .nx-btn.danger{color:var(--red-text,#D4453B);border-color:var(--red-text,#D4453B)}

:where(:root[data-page="users"]) .nx-card{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);display:flex;flex-direction:column;overflow:hidden}
:where(:root[data-page="users"]) .nx-card-head{display:flex;align-items:center;gap:10px;padding:15px 17px}
:where(:root[data-page="users"]) .nx-card-ic{width:26px;height:26px;border-radius:8px;background:var(--nx-rail);border:1px solid var(--nx-line2);display:flex;align-items:center;justify-content:center;color:var(--nx-ink2)}
:where(:root[data-page="users"]) .nx-card-ic svg{width:14px;height:14px}
:where(:root[data-page="users"]) .nx-card-title{font-size:13.5px;font-weight:700}
:where(:root[data-page="users"]) .nx-card-head .nx-card-right{margin-left:auto;display:flex;align-items:center;gap:8px}
:where(:root[data-page="users"]) .nx-tag{font-size:11px;color:var(--nx-ink3);background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:20px;padding:2px 9px}

:where(:root[data-page="users"]) .nx-table{width:100%;border-collapse:collapse;table-layout:fixed}
:where(:root[data-page="users"]) .nx-table thead th{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3);text-align:left;padding:10px 17px;background:var(--nx-rail);border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="users"]) .nx-table tbody td{padding:12px 17px;border-bottom:1px solid var(--nx-line);font-size:12.5px;vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="users"]) .nx-table tbody tr:last-child td{border-bottom:none}
:where(:root[data-page="users"]) .nx-table tbody tr.um-row{cursor:pointer}
:where(:root[data-page="users"]) .nx-table tbody tr.um-row:hover{background:var(--nx-hover)}
:where(:root[data-page="users"]) .nx-table tbody tr.um-off td{opacity:.55}
:where(:root[data-page="users"]) .um-who{display:flex;align-items:center;gap:10px;min-width:0}
:where(:root[data-page="users"]) .um-av{width:30px;height:30px;border-radius:50%;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex:0 0 auto;text-transform:uppercase}
:where(:root[data-page="users"]) .um-off .um-av{background:var(--nx-line);color:var(--nx-ink3)}
:where(:root[data-page="users"]) .um-who-meta{min-width:0;line-height:1.3}
:where(:root[data-page="users"]) .um-who-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="users"]) .um-who-sub{font-size:11px;color:var(--nx-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="users"]) .um-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
:where(:root[data-page="users"]) .um-status.on{color:var(--nx-up);background:var(--nx-up-bg)}
:where(:root[data-page="users"]) .um-status.off{color:var(--nx-ink3);background:var(--nx-line)}
:where(:root[data-page="users"]) .um-status.pw{color:var(--amber-text,#8A6A12);background:var(--amber-lt,#FFF4D6)}
:where(:root[data-page="users"]) .um-statuswrap{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
:where(:root[data-page="users"]) .um-cmp{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
:where(:root[data-page="users"]) .um-cmp.blank{color:var(--nx-ink3);background:transparent;font-weight:500}
:where(:root[data-page="users"]) .um-chips{display:flex;flex-wrap:wrap;gap:5px}
:where(:root[data-page="users"]) .um-chip{font-size:10.5px;font-weight:600;color:var(--nx-ink2);background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:7px;padding:2px 7px;white-space:nowrap}
:where(:root[data-page="users"]) .um-chip.none{color:var(--nx-ink3);font-weight:500;font-style:italic}

:where(:root[data-page="users"]) .um-empty{padding:44px 20px;text-align:center;color:var(--nx-ink3)}
/* ── Tabs (People / Login history) ── */
:where(:root[data-page="users"]) .um-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
:where(:root[data-page="users"]) .um-tab{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--nx-line2);background:var(--nx-surface);border-radius:10px;padding:8px 15px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--nx-ink2);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
:where(:root[data-page="users"]) .um-tab svg{width:14px;height:14px}
:where(:root[data-page="users"]) .um-tab:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="users"]) .um-tab.active{border-color:var(--brand);color:var(--brand);background:var(--brand-lt)}
/* ── Login history ── */
:where(:root[data-page="users"]) .um-lgbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;padding:14px 17px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="users"]) .um-lgfield{display:flex;flex-direction:column;gap:6px}
:where(:root[data-page="users"]) .um-lgfield.who{min-width:240px}
:where(:root[data-page="users"]) .um-lglabel{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3)}
:where(:root[data-page="users"]) .um-lgranges{display:flex;gap:6px;flex-wrap:wrap}
:where(:root[data-page="users"]) .um-lgfoot{display:flex;align-items:center;gap:12px;padding:12px 17px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="users"]) .um-lgcount{font-size:11.5px;color:var(--nx-ink3);margin-right:auto}
:where(:root[data-page="users"]) .um-mono{font-variant-numeric:tabular-nums;color:var(--nx-ink2)}
:where(:root[data-page="users"]) .um-when{font-weight:600;color:var(--nx-ink)}
:where(:root[data-page="users"]) .um-empty svg{width:34px;height:34px;color:var(--nx-line2);margin-bottom:9px}

/* ── Drawer (edit access) ─────────────────────────────────────────────── */
:where(:root[data-page="users"]) .um-scrim{position:fixed;inset:0;background:rgba(18,20,28,.42);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .18s;z-index:200}
:where(:root[data-page="users"]) .um-scrim.open{opacity:1;pointer-events:auto}
:where(:root[data-page="users"]) .um-drawer{position:fixed;top:0;right:0;height:100%;width:460px;max-width:94vw;background:var(--nx-surface);border-left:1px solid var(--nx-line2);box-shadow:-18px 0 48px rgba(20,22,28,.18);transform:translateX(100%);transition:transform .22s cubic-bezier(.3,.8,.4,1);z-index:210;display:flex;flex-direction:column}
:where(:root[data-page="users"]) .um-drawer.open{transform:translateX(0)}
:where(:root[data-page="users"]) .um-drawer-head{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="users"]) .um-drawer-title{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
:where(:root[data-page="users"]) .um-drawer-sub{font-size:11.5px;color:var(--nx-ink3)}
:where(:root[data-page="users"]) .um-x{margin-left:auto;width:32px;height:32px;border-radius:9px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
:where(:root[data-page="users"]) .um-x:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="users"]) .um-x svg{width:15px;height:15px}
:where(:root[data-page="users"]) .um-drawer-body{flex:1;overflow-y:auto;padding:16px 20px;scrollbar-gutter:stable}
:where(:root[data-page="users"]) .um-drawer-body::-webkit-scrollbar{width:10px}
:where(:root[data-page="users"]) .um-drawer-body::-webkit-scrollbar-thumb{background:var(--nx-line2);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
:where(:root[data-page="users"]) .um-drawer-foot{display:flex;gap:9px;padding:14px 20px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="users"]) .um-drawer-foot .nx-btn{flex:1}

:where(:root[data-page="users"]) .um-note{font-size:11.5px;color:var(--nx-ink2);background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:10px;padding:10px 12px;margin-bottom:14px;line-height:1.45}
:where(:root[data-page="users"]) .um-modblock{border:1px solid var(--nx-line2);border-radius:var(--nx-radius-sm);margin-bottom:11px;overflow:hidden}
:where(:root[data-page="users"]) .um-modhead{display:flex;align-items:center;gap:9px;padding:10px 12px;background:var(--nx-rail);border-bottom:1px solid var(--nx-line2)}
:where(:root[data-page="users"]) .um-modname{font-size:12.5px;font-weight:700}
:where(:root[data-page="users"]) .um-modcount{margin-left:auto;font-size:10.5px;color:var(--nx-ink3)}
:where(:root[data-page="users"]) .um-modall{font-size:11px;font-weight:600;color:var(--brand);background:none;border:none;cursor:pointer;padding:2px 4px}
:where(:root[data-page="users"]) .um-modall:disabled{color:var(--nx-ink3);cursor:default}
:where(:root[data-page="users"]) .um-pages{padding:5px 6px}
:where(:root[data-page="users"]) .um-page{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:9px;cursor:pointer;font-size:12.5px}
:where(:root[data-page="users"]) .um-page:hover{background:var(--nx-hover)}
:where(:root[data-page="users"]) .um-page.locked{cursor:not-allowed;opacity:.5}
:where(:root[data-page="users"]) .um-page.locked:hover{background:none}
:where(:root[data-page="users"]) .um-page .um-lock{margin-left:auto;font-size:10px;color:var(--nx-ink3)}
:where(:root[data-page="users"]) .um-cb{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--nx-line2);background:var(--nx-elev);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .12s,border-color .12s}
:where(:root[data-page="users"]) .um-cb svg{width:11px;height:11px;color:#fff;opacity:0}
:where(:root[data-page="users"]) .um-page.on .um-cb{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="users"]) .um-page.on .um-cb svg{opacity:1}
:where(:root[data-page="users"]) .um-page.locked .um-cb{background:var(--nx-line);border-color:var(--nx-line2)}
:where(:root[data-page="users"]) .um-page.locked.on .um-cb{background:var(--nx-ink3);border-color:var(--nx-ink3)}

/* ── Facility / client picker ────────────────────────────────────────── */
:where(:root[data-page="users"]) .um-sec{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink3);margin:18px 0 8px}
:where(:root[data-page="users"]) .um-sec:first-child{margin-top:0}
:where(:root[data-page="users"]) .um-sublabel{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink3);margin:14px 0 7px}

/* "All clients" shortcut */
:where(:root[data-page="users"]) .um-allbox{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--nx-line2);border-radius:var(--nx-radius-sm);cursor:pointer;font-size:12.5px;background:var(--nx-rail)}
:where(:root[data-page="users"]) .um-allbox:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="users"]) .um-allbox.on{border-color:var(--brand);background:var(--brand-lt)}
:where(:root[data-page="users"]) .um-allbox.on .um-cb{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="users"]) .um-allbox.on .um-cb svg{opacity:1}
:where(:root[data-page="users"]) .um-allbox-sub{font-size:11px;color:var(--nx-ink3);margin-top:2px}
:where(:root[data-page="users"]) .um-allbox.small{margin-bottom:10px;background:var(--nx-surface)}

/* Client chooser (CareRite Services only) */
:where(:root[data-page="users"]) .um-clients{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
:where(:root[data-page="users"]) .um-client{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid var(--nx-line2);border-radius:999px;background:var(--nx-elev);font-size:12px;font-weight:600;color:var(--nx-ink2);cursor:pointer;transition:border-color .12s,background .12s,color .12s}
:where(:root[data-page="users"]) .um-client:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="users"]) .um-client.on{border-color:var(--brand);background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="users"]) .um-client.on .um-cb{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="users"]) .um-client.on .um-cb svg{opacity:1}
:where(:root[data-page="users"]) .um-client .um-cb{width:15px;height:15px;border-radius:4px}
:where(:root[data-page="users"]) .um-client .um-cb svg{width:10px;height:10px}

/* One collapsible section per company */
:where(:root[data-page="users"]) .um-facsec{border:1px solid var(--nx-line2);border-radius:var(--nx-radius-sm);margin-bottom:9px;overflow:hidden;background:var(--nx-surface)}
:where(:root[data-page="users"]) .um-facsec.open{border-color:var(--nx-ink3)}
:where(:root[data-page="users"]) .um-facsec-head{display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--nx-rail);cursor:pointer;transition:background .12s}
:where(:root[data-page="users"]) .um-facsec-head:hover{background:var(--nx-hover)}
:where(:root[data-page="users"]) .um-facsec-name{font-size:12.5px;font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="users"]) .um-facsec-sum{margin-left:auto;font-size:11px;font-weight:600;color:var(--brand);background:var(--brand-lt);border-radius:999px;padding:3px 9px;white-space:nowrap}
:where(:root[data-page="users"]) .um-facsec-sum.all{color:var(--brand)}
:where(:root[data-page="users"]) .um-facsec-sum.none{color:var(--nx-ink3);background:var(--nx-line)}
:where(:root[data-page="users"]) .um-facsec-caret{display:flex;align-items:center;color:var(--nx-ink3);flex:0 0 auto}
:where(:root[data-page="users"]) .um-facsec-caret svg{width:13px;height:13px;transition:transform .16s}
:where(:root[data-page="users"]) .um-facsec.open .um-facsec-caret svg{transform:rotate(180deg)}
:where(:root[data-page="users"]) .um-facsec-body{padding:10px 12px 12px;border-top:1px solid var(--nx-line)}

:where(:root[data-page="users"]) .um-facbar{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap}
:where(:root[data-page="users"]) .um-facbar .um-sm{font-size:11px;font-weight:600;color:var(--brand);background:none;border:none;cursor:pointer;padding:3px 7px;border-radius:7px;font-family:inherit}
:where(:root[data-page="users"]) .um-facbar .um-sm:hover{background:var(--brand-lt)}
:where(:root[data-page="users"]) .um-facsearch{position:relative;margin-bottom:9px}
:where(:root[data-page="users"]) .um-facsearch input{width:100%;border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:10px;padding:8px 11px;font-size:12.5px;font-family:inherit;color:var(--nx-ink)}
:where(:root[data-page="users"]) .um-facsearch input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}

:where(:root[data-page="users"]) .um-facwrap{border:1px solid var(--nx-line2);border-radius:10px;max-height:230px;overflow-y:auto;scrollbar-gutter:stable;padding:4px 5px}
:where(:root[data-page="users"]) .um-facwrap::-webkit-scrollbar{width:10px}
:where(:root[data-page="users"]) .um-facwrap::-webkit-scrollbar-track{background:transparent}
:where(:root[data-page="users"]) .um-facwrap::-webkit-scrollbar-thumb{background:var(--nx-line2);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
:where(:root[data-page="users"]) .um-fac{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;cursor:pointer;font-size:12.5px}
:where(:root[data-page="users"]) .um-fac:hover{background:var(--nx-hover)}
:where(:root[data-page="users"]) .um-fac.on .um-cb{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="users"]) .um-fac.on .um-cb svg{opacity:1}
:where(:root[data-page="users"]) .um-fac-empty{padding:14px 12px;font-size:11.5px;color:var(--nx-ink3);font-style:italic;text-align:center}

/* Summary row on the main view — click to open the facility chooser */
:where(:root[data-page="users"]) .um-facsum{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--nx-line2);border-radius:var(--nx-radius-sm);background:var(--nx-rail);cursor:pointer;transition:border-color .12s,background .12s}
:where(:root[data-page="users"]) .um-facsum:hover{border-color:var(--brand);background:var(--brand-lt)}
:where(:root[data-page="users"]) .um-facsum-body{min-width:0;flex:1}
:where(:root[data-page="users"]) .um-facsum-main{font-size:12.5px;font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="users"]) .um-facsum-main.none{color:var(--nx-ink3);font-weight:600}
:where(:root[data-page="users"]) .um-facsum-sub{font-size:11px;color:var(--nx-ink3);margin-top:2px}
:where(:root[data-page="users"]) .um-facsum-go{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--brand)}
:where(:root[data-page="users"]) .um-facsum-go svg{width:12px;height:12px}

/* Copy-from-someone-else picker */
:where(:root[data-page="users"]) .um-copywrap{border:1px solid var(--nx-line2);border-radius:10px;max-height:330px;overflow-y:auto;scrollbar-gutter:stable;padding:4px 5px}
:where(:root[data-page="users"]) .um-copywrap::-webkit-scrollbar{width:10px}
:where(:root[data-page="users"]) .um-copywrap::-webkit-scrollbar-track{background:transparent}
:where(:root[data-page="users"]) .um-copywrap::-webkit-scrollbar-thumb{background:var(--nx-line2);border-radius:8px;border:3px solid transparent;background-clip:padding-box}
:where(:root[data-page="users"]) .um-copyrow{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;cursor:pointer;transition:background .12s}
:where(:root[data-page="users"]) .um-copyrow:hover{background:var(--nx-hover)}
:where(:root[data-page="users"]) .um-copyrow .um-av{width:28px;height:28px;font-size:10.5px;flex:0 0 auto}
:where(:root[data-page="users"]) .um-copyrow-meta{min-width:0;flex:1}
:where(:root[data-page="users"]) .um-copyrow-name{font-size:12.5px;font-weight:700;color:var(--nx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="users"]) .um-copyrow-sub{font-size:11px;color:var(--nx-ink3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="users"]) .um-copyrow-go{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--brand);opacity:0;transition:opacity .12s}
:where(:root[data-page="users"]) .um-copyrow:hover .um-copyrow-go{opacity:1}
:where(:root[data-page="users"]) .um-copyparts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}

/* Back arrow in the drawer title */
:where(:root[data-page="users"]) .um-back{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:7px;vertical-align:-5px;border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:8px;color:var(--nx-ink2);cursor:pointer;padding:0}
:where(:root[data-page="users"]) .um-back:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="users"]) .um-back svg{width:12px;height:12px}

/* ── Set password popup ──────────────────────────────────────────────── */
:where(:root[data-page="users"]) .um-pwrow{display:flex;gap:7px;align-items:stretch}
:where(:root[data-page="users"]) .um-pwrow .um-input{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.01em}
:where(:root[data-page="users"]) .um-pwbtn{width:38px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:10px;color:var(--nx-ink2);cursor:pointer;padding:0}
:where(:root[data-page="users"]) .um-pwbtn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-lt)}
:where(:root[data-page="users"]) .um-pwbtn svg{width:15px;height:15px}
:where(:root[data-page="users"]) .um-pwerr{font-size:11.5px;font-weight:600;color:var(--red-text,#D4453B);margin-top:6px;min-height:15px}

/* ── Form fields (new user) ──────────────────────────────────────────── */
:where(:root[data-page="users"]) .um-field{margin-bottom:12px}
:where(:root[data-page="users"]) .um-label{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink3);margin-bottom:5px}
:where(:root[data-page="users"]) .um-input{width:100%;border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:10px;padding:9px 11px;font-size:13px;font-family:inherit;color:var(--nx-ink)}
:where(:root[data-page="users"]) .um-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="users"]) .um-hint{font-size:11px;color:var(--nx-ink3);margin-top:4px}
:where(:root[data-page="users"]) .um-hint.bad{color:var(--red-text,#D4453B);font-weight:600}
:where(:root[data-page="users"]) .um-hint.ok{color:var(--brand);font-weight:600}
:where(:root[data-page="users"]) .um-input.bad{border-color:var(--red-text,#D4453B)}
:where(:root[data-page="users"]) .um-input.bad:focus{border-color:var(--red-text,#D4453B);box-shadow:0 0 0 3px var(--red-lt,#FCE9E7)}
:where(:root[data-page="users"]) .um-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Custom dropdown — no native select, so it matches the site. */
:where(:root[data-page="users"]) .um-sel{position:relative}
:where(:root[data-page="users"]) .um-sel-btn{width:100%;text-align:left;display:flex;align-items:center;gap:8px;border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:10px;padding:9px 11px;font-size:13px;font-family:inherit;color:var(--nx-ink);cursor:pointer}
:where(:root[data-page="users"]) .um-sel-btn:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="users"]) .um-sel.open .um-sel-btn{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="users"]) .um-sel-btn.placeholder{color:var(--nx-ink3)}
:where(:root[data-page="users"]) .um-sel-btn svg{width:13px;height:13px;margin-left:auto;flex:0 0 auto;color:var(--nx-ink3);transition:transform .14s}
:where(:root[data-page="users"]) .um-sel.open .um-sel-btn svg{transform:rotate(180deg)}
:where(:root[data-page="users"]) .um-sel-menu{display:none;position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:11px;box-shadow:0 14px 34px rgba(20,22,28,.18);padding:5px;max-height:230px;overflow-y:auto;z-index:40}
:where(:root[data-page="users"]) .um-sel.open .um-sel-menu{display:block}
:where(:root[data-page="users"]) .um-sel-opt{padding:8px 10px;border-radius:8px;font-size:12.5px;color:var(--nx-ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="users"]) .um-sel-opt:hover{background:var(--nx-hover)}
:where(:root[data-page="users"]) .um-sel-opt.sel{background:var(--brand-lt);color:var(--brand);font-weight:600}
:where(:root[data-page="users"]) .um-sel-empty{padding:9px 10px;font-size:11.5px;color:var(--nx-ink3);font-style:italic}

/* ── Confirm popup (replaces browser confirm) ────────────────────────── */
:where(:root[data-page="users"]) .um-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(18,20,28,.42);backdrop-filter:blur(2px);z-index:300;padding:20px}
:where(:root[data-page="users"]) .um-modal.open{display:flex}
:where(:root[data-page="users"]) .um-modal-box{background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:var(--nx-radius);box-shadow:0 22px 60px rgba(20,22,28,.26);width:400px;max-width:100%;padding:20px;animation:umPop .16s ease}
@keyframes umPop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
:where(:root[data-page="users"]) .um-modal-t{font-size:15px;font-weight:700;margin-bottom:7px}
:where(:root[data-page="users"]) .um-modal-m{font-size:12.5px;color:var(--nx-ink2);line-height:1.5;margin-bottom:17px}
:where(:root[data-page="users"]) .um-modal-foot{display:flex;gap:9px}
:where(:root[data-page="users"]) .um-modal-foot .nx-btn{flex:1}

/* ── Toast (replaces browser alert) ──────────────────────────────────── */
:where(:root[data-page="users"]) #umToasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:9px;z-index:400}
:where(:root[data-page="users"]) .um-toast{display:flex;align-items:center;gap:9px;background:var(--nx-surface);border:1px solid var(--nx-line2);border-left:3px solid var(--brand);border-radius:11px;box-shadow:0 12px 32px rgba(20,22,28,.18);padding:11px 15px;font-size:12.5px;font-weight:500;color:var(--nx-ink);max-width:340px;animation:umSlide .2s ease}
:where(:root[data-page="users"]) .um-toast.err{border-left-color:var(--red-text,#D4453B)}
:where(:root[data-page="users"]) .um-toast svg{width:15px;height:15px;flex:0 0 auto;color:var(--brand)}
:where(:root[data-page="users"]) .um-toast.err svg{color:var(--red-text,#D4453B)}
@keyframes umSlide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* Embed mode: the dashboard shell owns the chrome. */
html.cr-embed:where([data-page="users"]) body{background:transparent}
:where(:root[data-page="users"]) body.embed .nx-app{margin:0;border:none;border-radius:0;box-shadow:none;grid-template-columns:1fr;min-height:100vh}
:where(:root[data-page="users"]) body.embed .nx-rail,:where(:root[data-page="users"]) body.embed .nx-topbar{display:none}


/* ----------------------------------------------------------------------------
 * 15.24  AP -- Construction
 * ap/construction.php, data-page="construction"
 * -------------------------------------------------------------------------- */
:root:where([data-page="construction"]){
  --brand:var(--blue);--brand-lt:var(--blue-lt);
  --cn-ok:#1B7A3D;--cn-ok-lt:#EAF6EF;
  --cn-warn:#946400;--cn-warn-lt:#FFF4DA;
  --cn-bad:#B23A3A;--cn-bad-lt:#FBEDED;
  --cn-hover:#F3F6FA;
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="construction"]){
  --brand:#1FB866;--brand-lt:#13361F;
  --cn-ok:#5FD08A;--cn-ok-lt:rgba(95,208,138,.14);
  --cn-warn:#F2C14E;--cn-warn-lt:rgba(242,193,78,.14);
  --cn-bad:#F08A8A;--cn-bad-lt:rgba(240,138,138,.14);
  --cn-hover:#242833;color-scheme:dark;
}
:where(:root[data-page="construction"]) *, *:where([data-page="construction"]){box-sizing:border-box}
html:where([data-page="construction"]),:where(:root[data-page="construction"]) body{height:100%;margin:0;font-family:var(--nx-font);
  background:var(--nx-surface);color:var(--nx-ink);font-size:13px}
:where(:root[data-page="construction"]) button,:where(:root[data-page="construction"]) input,:where(:root[data-page="construction"]) select,:where(:root[data-page="construction"]) textarea{font-family:inherit}

/* -- Shell. White all the way out; no grey canvas, no floating frame. -- */
:where(:root[data-page="construction"]) .nx-app{display:grid;grid-template-columns:236px 1fr;height:100vh;background:var(--nx-surface)}
@media(max-width:980px){:where(:root[data-page="construction"]) .nx-app{grid-template-columns:1fr}}
:where(:root[data-page="construction"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);
  display:flex;flex-direction:column;padding:16px 12px;overflow:auto}
@media(max-width:980px){:where(:root[data-page="construction"]) .nx-rail{display:none}}
:where(:root[data-page="construction"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:4px 8px 16px;text-decoration:none}
:where(:root[data-page="construction"]) .nx-brand-mark{width:28px;height:28px;border-radius:9px;
  background:linear-gradient(135deg,var(--brand),#04a85a);display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:800;font-size:14px}
:where(:root[data-page="construction"]) .nx-brand-name{font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="construction"]) .nx-navsec{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--nx-ink3);padding:13px 8px 5px}
:where(:root[data-page="construction"]) .nx-nav{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;
  text-decoration:none;color:var(--nx-ink2);font-weight:500;font-size:12.5px;
  border:0;background:transparent;width:100%;text-align:left;cursor:pointer}
:where(:root[data-page="construction"]) .nx-nav svg{width:15px;height:15px;flex:none}
:where(:root[data-page="construction"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="construction"]) .nx-nav.active{background:var(--brand-lt);color:var(--brand);font-weight:650}
:where(:root[data-page="construction"]) .nx-nav .ct{margin-left:auto;font-size:11px;font-weight:600;opacity:.7}
:where(:root[data-page="construction"]) .nx-rail-foot{margin-top:auto;padding:12px 8px 2px;font-size:11px;color:var(--nx-ink3);line-height:1.5}
:where(:root[data-page="construction"]) .nx-main{display:flex;flex-direction:column;min-width:0;height:100vh}
:where(:root[data-page="construction"]) .nx-topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;
  border-bottom:1px solid var(--nx-line);flex:none}

/* -- Inside the AP frame: the frame draws the sidebar and the top bar, so
      this page is only its content, edge to edge. The rail and the top bar
      stay in the markup -- the frame reads the views and the Export button
      out of them and clicks them back here -- they are simply not shown. -- */
html.cn-embed:where([data-page="construction"]) .nx-app{grid-template-columns:minmax(0,1fr)}
html.cn-embed:where([data-page="construction"]) .nx-rail,
html.cn-embed:where([data-page="construction"]) .nx-topbar{display:none}
:where(:root[data-page="construction"]) .nx-top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
:where(:root[data-page="construction"]) .nx-theme-btn{border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:9px;
  width:32px;height:32px;cursor:pointer;color:var(--nx-ink2);display:flex;
  align-items:center;justify-content:center}
:where(:root[data-page="construction"]) .nx-theme-btn svg{width:15px;height:15px}
:where(:root[data-page="construction"]) .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="construction"]) .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="construction"]) .nx-ic-moon{display:block}
:where(:root[data-page="construction"]) .nx-user-av{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11.5px}

/* -- Page body: one header row, one toolbar row, then the table. -- */
:where(:root[data-page="construction"]) .cn-page{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 20px 16px;gap:11px}
:where(:root[data-page="construction"]) .cn-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:none}
:where(:root[data-page="construction"]) .cn-sel,:where(:root[data-page="construction"]) .cn-find{display:inline-flex;align-items:center;gap:7px;height:32px;
  background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:9px;padding:0 10px}
:where(:root[data-page="construction"]) .cn-sel select{border:0;background:transparent;outline:none;font:inherit;font-size:12.5px;
  color:var(--nx-ink);max-width:190px;cursor:pointer}
:where(:root[data-page="construction"]) .cn-find{min-width:210px;color:var(--nx-ink3)}
:where(:root[data-page="construction"]) .cn-find svg{width:14px;height:14px;flex:none}
:where(:root[data-page="construction"]) .cn-find input{border:0;background:transparent;outline:none;font:inherit;font-size:12.5px;
  color:var(--nx-ink);width:100%}
:where(:root[data-page="construction"]) .cn-seg{display:inline-flex;align-items:center;height:32px;padding:2px;gap:2px;
  background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:9px}
:where(:root[data-page="construction"]) .cn-seg button{border:0;background:transparent;color:var(--nx-ink3);font:inherit;
  font-size:12.5px;font-weight:650;padding:0 10px;height:26px;border-radius:7px;
  cursor:pointer;white-space:nowrap}
:where(:root[data-page="construction"]) .cn-seg button:hover{color:var(--nx-ink)}
:where(:root[data-page="construction"]) .cn-seg button.on{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="construction"]) .cn-seg button .n{opacity:.62;font-weight:600;margin-left:4px}
:where(:root[data-page="construction"]) .cn-tot{display:flex;align-items:center;gap:14px;margin-left:auto;font-size:12px;
  color:var(--nx-ink3);font-weight:600;white-space:nowrap}
:where(:root[data-page="construction"]) .cn-tot b{color:var(--nx-ink);font-weight:700}
:where(:root[data-page="construction"]) .cn-tot .ok{color:var(--cn-ok)}
:where(:root[data-page="construction"]) .btn{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);
  border-radius:9px;padding:0 12px;height:32px;font-weight:650;font-size:12.5px;cursor:pointer}
:where(:root[data-page="construction"]) .btn:hover{background:var(--nx-hover)}
:where(:root[data-page="construction"]) .btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="construction"]) .btn.pri:hover{filter:brightness(1.06)}
:where(:root[data-page="construction"]) .btn.sm{height:26px;padding:0 9px;font-size:11.5px;border-radius:7px}
:where(:root[data-page="construction"]) .btn.danger{color:var(--cn-bad);border-color:var(--cn-bad)}
:where(:root[data-page="construction"]) .btn:disabled{opacity:.45;cursor:not-allowed}

/* -- The table. Short rows, no card, no shadow. -- */
:where(:root[data-page="construction"]) .cn-wrap{flex:1 1 auto;min-height:0;overflow:auto;border-top:1px solid var(--nx-line)}
:where(:root[data-page="construction"]) table.cn{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
:where(:root[data-page="construction"]) table.cn th{position:sticky;top:0;z-index:2;background:var(--nx-rail);color:var(--nx-ink3);
  font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:750;
  text-align:left;padding:8px 11px;border-bottom:1px solid var(--nx-line);
  white-space:nowrap;user-select:none}
:where(:root[data-page="construction"]) table.cn th.srt{cursor:pointer}
:where(:root[data-page="construction"]) table.cn th.srt:hover{color:var(--nx-ink)}
:where(:root[data-page="construction"]) table.cn th .ar{opacity:0;margin-left:4px}
:where(:root[data-page="construction"]) table.cn th.sorted .ar{opacity:1;color:var(--brand)}
:where(:root[data-page="construction"]) table.cn td{padding:6px 11px;border-bottom:1px solid var(--nx-line);
  color:var(--nx-ink2);white-space:nowrap}
:where(:root[data-page="construction"]) table.cn td.k{color:var(--nx-ink);font-weight:650}
:where(:root[data-page="construction"]) table.cn td.num{text-align:right;font-variant-numeric:tabular-nums}
:where(:root[data-page="construction"]) table.cn tbody tr:hover{background:var(--cn-hover)}
:where(:root[data-page="construction"]) table.cn td.wrap{white-space:normal;min-width:180px;max-width:320px}

/* Contract rows: the parent line, clickable to open its installments. */
:where(:root[data-page="construction"]) tr.ctr{cursor:pointer}
:where(:root[data-page="construction"]) tr.ctr td{background:var(--nx-rail);font-weight:600;color:var(--nx-ink);
  border-bottom:1px solid var(--nx-line2)}
:where(:root[data-page="construction"]) tr.ctr:hover td{background:var(--cn-hover)}
:where(:root[data-page="construction"]) tr.ctr .tw{display:inline-block;width:11px;color:var(--nx-ink3);
  transition:transform .15s;margin-right:5px}
:where(:root[data-page="construction"]) tr.ctr.open .tw{transform:rotate(90deg)}
:where(:root[data-page="construction"]) tr.inst td:first-child{padding-left:26px}
:where(:root[data-page="construction"]) tr.inst.hide{display:none}

/* Filled-in values get a soft green, the way Month End does it. */
:where(:root[data-page="construction"]) .val{display:inline-block;padding:1px 7px;border-radius:6px;background:var(--nx-hover);
  color:var(--nx-ink3);font-size:11.5px;font-weight:600}
:where(:root[data-page="construction"]) .val.set{background:var(--cn-ok-lt);color:var(--cn-ok)}
:where(:root[data-page="construction"]) .pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:10.5px;
  font-weight:700;letter-spacing:.01em}
:where(:root[data-page="construction"]) .pill.draft{background:var(--nx-hover);color:var(--nx-ink3)}
:where(:root[data-page="construction"]) .pill.requested{background:var(--cn-warn-lt);color:var(--cn-warn)}
:where(:root[data-page="construction"]) .pill.approved{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="construction"]) .pill.paid{background:var(--cn-ok-lt);color:var(--cn-ok)}
:where(:root[data-page="construction"]) .pill.od{background:var(--cn-bad-lt);color:var(--cn-bad)}
:where(:root[data-page="construction"]) .auto{font-size:10px;color:var(--nx-ink3);margin-left:4px}
:where(:root[data-page="construction"]) .clip{display:inline-flex;align-items:center;gap:3px;color:var(--nx-ink3);font-size:11px}
:where(:root[data-page="construction"]) .clip svg{width:11px;height:11px}
:where(:root[data-page="construction"]) .cn-empty{padding:34px 12px;text-align:center;color:var(--nx-ink3);font-size:12.5px}

/* -- Drawer: one installment, its files and its history. -- */
:where(:root[data-page="construction"]) .cn-scrim{position:fixed;inset:0;background:rgba(15,18,28,.34);opacity:0;
  pointer-events:none;transition:opacity .16s;z-index:40}
:where(:root[data-page="construction"]) .cn-scrim.on{opacity:1;pointer-events:auto}
:where(:root[data-page="construction"]) .cn-draw{position:fixed;top:0;right:0;height:100vh;width:min(560px,96vw);
  background:var(--nx-surface);border-left:1px solid var(--nx-line);
  transform:translateX(100%);transition:transform .2s;z-index:41;
  display:flex;flex-direction:column}
:where(:root[data-page="construction"]) .cn-draw.on{transform:none}
:where(:root[data-page="construction"]) .cn-draw-head{display:flex;align-items:center;gap:9px;padding:14px 18px;
  border-bottom:1px solid var(--nx-line);flex:none}
:where(:root[data-page="construction"]) .cn-draw-head .ti{font-weight:750;font-size:14px;letter-spacing:-.01em}
:where(:root[data-page="construction"]) .cn-draw-head .sub{color:var(--nx-ink3);font-size:11.5px;margin-top:1px}
:where(:root[data-page="construction"]) .cn-x{margin-left:auto;border:0;background:transparent;color:var(--nx-ink3);
  font-size:20px;cursor:pointer;line-height:1;padding:2px 6px;border-radius:7px}
:where(:root[data-page="construction"]) .cn-x:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="construction"]) .cn-draw-body{padding:16px 18px;overflow:auto;flex:1}
:where(:root[data-page="construction"]) .cn-sec{font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.06em;
  color:var(--nx-ink3);margin:18px 0 8px}
:where(:root[data-page="construction"]) .cn-sec:first-child{margin-top:0}
:where(:root[data-page="construction"]) .fld{display:grid;grid-template-columns:132px 1fr;gap:9px;align-items:center;margin-bottom:8px}
:where(:root[data-page="construction"]) .fld label{font-size:12px;color:var(--nx-ink2);font-weight:600}
:where(:root[data-page="construction"]) .fld input,:where(:root[data-page="construction"]) .fld select,:where(:root[data-page="construction"]) .fld textarea{width:100%;border:1px solid var(--nx-line2);
  background:var(--nx-elev);color:var(--nx-ink);border-radius:8px;padding:6px 9px;
  font:inherit;font-size:12.5px;outline:none}
:where(:root[data-page="construction"]) .fld input:focus,:where(:root[data-page="construction"]) .fld select:focus,:where(:root[data-page="construction"]) .fld textarea:focus{border-color:var(--brand)}
:where(:root[data-page="construction"]) .fld textarea{min-height:56px;resize:vertical}
:where(:root[data-page="construction"]) .fld .ro{color:var(--nx-ink);font-weight:600;font-size:12.5px}
:where(:root[data-page="construction"]) .cn-acts{display:flex;gap:7px;flex-wrap:wrap;padding:12px 18px;
  border-top:1px solid var(--nx-line);flex:none;align-items:center}
:where(:root[data-page="construction"]) .cn-note{font-size:11.5px;color:var(--nx-ink3);margin-left:auto;text-align:right;max-width:52%}
:where(:root[data-page="construction"]) .flist{display:flex;flex-direction:column;gap:5px}
:where(:root[data-page="construction"]) .frow{display:flex;align-items:center;gap:8px;padding:6px 9px;border:1px solid var(--nx-line);
  border-radius:8px;font-size:12px}
:where(:root[data-page="construction"]) .frow a{color:var(--nx-ink);text-decoration:none;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="construction"]) .frow a:hover{color:var(--brand)}
:where(:root[data-page="construction"]) .frow .kind{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--nx-ink3);flex:none}
:where(:root[data-page="construction"]) .frow .mt{margin-left:auto;color:var(--nx-ink3);font-size:11px;flex:none}
:where(:root[data-page="construction"]) .frow .rm{border:0;background:transparent;color:var(--nx-ink3);cursor:pointer;
  font-size:15px;line-height:1;padding:0 3px}
:where(:root[data-page="construction"]) .frow .rm:hover{color:var(--cn-bad)}
:where(:root[data-page="construction"]) .lrow{display:flex;gap:9px;padding:6px 0;border-bottom:1px solid var(--nx-line);font-size:11.5px}
:where(:root[data-page="construction"]) .lrow .when{color:var(--nx-ink3);flex:none;width:112px;font-variant-numeric:tabular-nums}
:where(:root[data-page="construction"]) .lrow .who{color:var(--nx-ink3);margin-left:auto;flex:none}
:where(:root[data-page="construction"]) .lrow .bad{color:var(--cn-bad)}
:where(:root[data-page="construction"]) .up{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
:where(:root[data-page="construction"]) .up input[type=file]{font-size:11.5px;max-width:230px}

/* -- Toast -- */
:where(:root[data-page="construction"]) #toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:60;
  background:var(--nx-ink);color:var(--nx-surface);padding:9px 15px;border-radius:9px;
  font-size:12.5px;font-weight:600;opacity:0;pointer-events:none;transition:all .18s;
  max-width:min(520px,92vw)}
:where(:root[data-page="construction"]) #toast.on{opacity:1;transform:translate(-50%,0)}
:where(:root[data-page="construction"]) #toast.bad{background:var(--cn-bad);color:#fff}

/* -- Settings -- */
:where(:root[data-page="construction"]) .cn-set{max-width:760px}
:where(:root[data-page="construction"]) .cn-set h3{font-size:13px;font-weight:750;margin:22px 0 8px}
:where(:root[data-page="construction"]) .cn-set h3:first-child{margin-top:0}
:where(:root[data-page="construction"]) .cn-set p.hint{color:var(--nx-ink3);font-size:11.5px;margin:0 0 10px;line-height:1.5}
:where(:root[data-page="construction"]) .thr{width:110px;text-align:right}
:where(:root[data-page="construction"]) .rcp{display:flex;align-items:center;gap:7px;margin-bottom:5px;font-size:12px}
:where(:root[data-page="construction"]) .rcp .em{font-weight:600;color:var(--nx-ink)}
:where(:root[data-page="construction"]) .rcp .rm{border:0;background:transparent;color:var(--nx-ink3);cursor:pointer;font-size:15px;
  line-height:1;padding:0 3px}
:where(:root[data-page="construction"]) .rcp .rm:hover{color:var(--cn-bad)}

/* Construction workspace */
:root:where([data-page="construction"]){--nx-ink3:#697386;--nx-line:#e5e9ed;--nx-rail:#f7f9f8;--cn-hover:#f2f8f5}
:root[data-theme="dark"]:where([data-page="construction"]){--nx-ink3:#9ba7b9;--nx-line:#2b3441;--nx-rail:#171e26;--cn-hover:#1d3028}
:where(:root[data-page="construction"]) .nx-main{min-width:0;overflow:hidden}
:where(:root[data-page="construction"]) .cn-page{padding:24px 28px 18px;gap:18px;background:var(--nx-surface);overflow:hidden}
:where(:root[data-page="construction"]) .cn-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none}
:where(:root[data-page="construction"]) .cn-eyebrow{font-size:10px;font-weight:750;letter-spacing:.13em;color:var(--brand);text-transform:uppercase;margin-bottom:6px}
:where(:root[data-page="construction"]) .cn-heading h1{font-size:25px;letter-spacing:-.8px;line-height:1.2;margin:0;font-weight:750}
:where(:root[data-page="construction"]) .cn-heading p{margin:7px 0 0;color:var(--nx-ink3);font-size:12px}
:where(:root[data-page="construction"]) .btn{height:36px;border-radius:7px;padding:0 13px}
:where(:root[data-page="construction"]) .btn.pri{box-shadow:0 2px 3px #0000000a}
:where(:root[data-page="construction"]) .cn-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;flex:none}
:where(:root[data-page="construction"]) .cn-metric{border:1px solid var(--nx-line);border-radius:10px;background:var(--nx-surface);color:var(--nx-ink);padding:15px 17px;text-align:left;position:relative}
:where(:root[data-page="construction"]) .cn-metric .label{display:block;font-size:11px;color:var(--nx-ink2);font-weight:650}
:where(:root[data-page="construction"]) .cn-metric strong{display:block;font-size:24px;font-weight:700;letter-spacing:-.7px;margin:8px 0 5px;font-variant-numeric:tabular-nums}
:where(:root[data-page="construction"]) .cn-metric small{font-size:11px;color:var(--nx-ink3)}
:where(:root[data-page="construction"]) .cn-metric[data-s="overdue"] strong{color:var(--cn-bad)}
:where(:root[data-page="construction"]) .cn-bar{gap:10px}
:where(:root[data-page="construction"]) .cn-find{min-width:230px;flex:1;max-width:400px;height:36px;border-radius:7px}
:where(:root[data-page="construction"]) .cn-sel{height:36px;border-radius:7px}
:where(:root[data-page="construction"]) .cn-sel select{max-width:220px}
:where(:root[data-page="construction"]) .cn-filter-label{font-size:11px;color:var(--nx-ink3)}
:where(:root[data-page="construction"]) .cn-switch{margin-left:auto;flex:none}
:where(:root[data-page="construction"]) .cn-seg{border:0;background:var(--nx-rail);height:36px;border-radius:7px;padding:3px}
:where(:root[data-page="construction"]) .cn-seg button{height:30px;font-size:11.5px;border-radius:5px}
:where(:root[data-page="construction"]) .cn-seg button.on{background:var(--nx-surface);color:var(--brand);box-shadow:0 1px 4px #00000012}
:where(:root[data-page="construction"]) .cn-register{display:flex;flex-direction:column;flex:1;min-height:150px;border:1px solid var(--nx-line);border-radius:10px;overflow:hidden}
:where(:root[data-page="construction"]) .cn-register-head{padding:12px 15px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--nx-line);flex:none}
:where(:root[data-page="construction"]) .cn-register-head h2{margin:0;font-size:13px;font-weight:700}
:where(:root[data-page="construction"]) .cn-register-head .cn-seg{margin-left:auto;background:transparent;padding:0;height:auto;flex-wrap:wrap}
:where(:root[data-page="construction"]) .cn-register-head .cn-seg button.on{background:var(--brand-lt);box-shadow:none}
:where(:root[data-page="construction"]) .cn-wrap{border-top:0}
:where(:root[data-page="construction"]) table.cn{font-size:12px}
:where(:root[data-page="construction"]) table.cn th{padding:12px 14px;font-size:10px;color:var(--nx-ink2);letter-spacing:.035em}
:where(:root[data-page="construction"]) table.cn th.num{text-align:right}
:where(:root[data-page="construction"]) table.cn td{padding:13px 14px;vertical-align:top}
:where(:root[data-page="construction"]) table.cn td.wrap{min-width:230px;max-width:340px}
:where(:root[data-page="construction"]) table.cn .cn-secondary{display:block;font-size:11px;color:var(--nx-ink3);font-weight:400;margin-top:5px;line-height:1.5;white-space:normal}
:where(:root[data-page="construction"]) table.cn .cn-vendor{color:var(--nx-ink);font-weight:650;line-height:1.5}
:where(:root[data-page="construction"]) tr.inst{cursor:pointer}
:where(:root[data-page="construction"]) tr.inst td:first-child{padding-left:14px}
:where(:root[data-page="construction"]) tr.ctr td{padding:12px 14px;background:var(--nx-rail)}
:where(:root[data-page="construction"]) .cn-contract-toggle{border:0;background:none;color:inherit;padding:0;font:inherit;cursor:pointer;text-align:left}
:where(:root[data-page="construction"]) .pill{padding:4px 8px;border-radius:5px;font-size:10px;font-weight:650}
:where(:root[data-page="construction"]) .cn-overdue{color:var(--cn-bad);font-weight:600}
:where(:root[data-page="construction"]) .cn-row-link{border:0;background:transparent;color:var(--brand);font-size:11px;font-weight:650;padding:3px 0;cursor:pointer;white-space:nowrap}
:where(:root[data-page="construction"]) .cn-footer{padding:11px 15px;border-top:1px solid var(--nx-line);display:flex;justify-content:space-between;gap:12px;color:var(--nx-ink3);font-size:11px;background:var(--nx-rail)}
:where(:root[data-page="construction"]) .cn-tot{margin-left:0;font-size:11px;gap:15px}
:where(:root[data-page="construction"]) .cn-empty{padding:50px 20px;font-size:13px;line-height:1.8}
:where(:root[data-page="construction"]) .cn-draw{width:min(620px,96vw);box-shadow:-12px 0 50px #00000012}
:where(:root[data-page="construction"]) .cn-draw-head{padding:23px 24px}:where(:root[data-page="construction"]) .cn-draw-head .ti{font-size:19px}
:where(:root[data-page="construction"]) .cn-draw-body{padding:22px 24px}:where(:root[data-page="construction"]) .cn-sec{margin-top:25px;margin-bottom:13px;color:var(--brand)}
:where(:root[data-page="construction"]) .fld{margin-bottom:12px;grid-template-columns:140px 1fr}:where(:root[data-page="construction"]) .fld input,:where(:root[data-page="construction"]) .fld select,:where(:root[data-page="construction"]) .fld textarea{padding:9px 10px}
:where(:root[data-page="construction"]) .cn-acts{padding:16px 24px}:where(:root[data-page="construction"]) .cn-x{font-size:26px}
:where(:root[data-page="construction"]) .cn-draw:not(.on){visibility:hidden}
:where(:root[data-page="construction"]) button:focus-visible,:where(:root[data-page="construction"]) input:focus-visible,:where(:root[data-page="construction"]) select:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media(max-width:1050px){:where(:root[data-page="construction"]) .cn-page{padding:18px;gap:14px}:where(:root[data-page="construction"]) .cn-metric strong{font-size:21px}:where(:root[data-page="construction"]) .cn-register-head{align-items:flex-start}:where(:root[data-page="construction"]) .cn-register-head .cn-seg{margin-left:0}:where(:root[data-page="construction"]) .cn-bar{flex-wrap:wrap}}
@media(max-width:680px){:where(:root[data-page="construction"]) .cn-page{padding:14px;overflow:auto}:where(:root[data-page="construction"]) .cn-heading{align-items:flex-start;flex-direction:column}:where(:root[data-page="construction"]) .cn-heading h1{font-size:23px}:where(:root[data-page="construction"]) .cn-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}:where(:root[data-page="construction"]) .cn-metric{padding:12px}:where(:root[data-page="construction"]) .cn-find{max-width:none;min-width:100%;order:-1}:where(:root[data-page="construction"]) .cn-sel{flex:1}:where(:root[data-page="construction"]) .cn-sel select{max-width:160px;width:100%}:where(:root[data-page="construction"]) .cn-switch{margin-left:0}:where(:root[data-page="construction"]) .cn-register{flex:none;min-height:300px;max-height:65vh}:where(:root[data-page="construction"]) .cn-register-head .cn-seg{height:auto;display:flex}:where(:root[data-page="construction"]) .cn-footer{flex-wrap:wrap}:where(:root[data-page="construction"]) .cn-footer>span:last-child{display:none}:where(:root[data-page="construction"]) .fld{grid-template-columns:1fr;gap:5px}:where(:root[data-page="construction"]) .cn-note{max-width:100%}}
@media(max-width:680px){:where(:root[data-page="construction"]) .cn-bar>.cn-sel{flex:1 1 44%;min-width:0}:where(:root[data-page="construction"]) .cn-bar>.cn-sel select{max-width:none}:where(:root[data-page="construction"]) .cn-switch{margin-left:auto}:where(:root[data-page="construction"]) .cn-metric strong{font-size:clamp(16px,5vw,21px)}}

/* -- My queue ---------------------------------------------------------------
   The register shows everyone everything. This shows one person their own
   work, with the action sitting on the row instead of behind the drawer. */
:where(:root[data-page="construction"]) .q-page{overflow:auto}
:where(:root[data-page="construction"]) .q-lead{max-width:640px}
:where(:root[data-page="construction"]) .q-secs{display:flex;flex-direction:column;gap:14px;padding-bottom:6px}
:where(:root[data-page="construction"]) .q-clear{border:1px solid var(--nx-line);border-radius:11px;background:var(--nx-rail);padding:26px 20px;text-align:center}
:where(:root[data-page="construction"]) .q-clear .big{font-size:15px;font-weight:750;letter-spacing:-.2px;margin-bottom:4px}
:where(:root[data-page="construction"]) .q-clear .sml{font-size:12px;color:var(--nx-ink3)}
:where(:root[data-page="construction"]) .q-sec{border:1px solid var(--nx-line);border-radius:11px;background:var(--nx-surface);overflow:hidden}
:where(:root[data-page="construction"]) .q-sec.do{border-color:var(--brand)}
:where(:root[data-page="construction"]) .q-sec.warn{border-color:var(--cn-bad)}
:where(:root[data-page="construction"]) .q-sec-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--nx-line);flex-wrap:wrap}
:where(:root[data-page="construction"]) .q-sec.do .q-sec-head{background:var(--brand-lt);border-bottom-color:var(--brand)}
:where(:root[data-page="construction"]) .q-sec-head h2{margin:0;font-size:13px;font-weight:750;letter-spacing:-.01em}
:where(:root[data-page="construction"]) .q-sec.do .q-sec-head h2{color:var(--brand)}
:where(:root[data-page="construction"]) .q-sec.warn .q-sec-head h2{color:var(--cn-bad)}
:where(:root[data-page="construction"]) .q-hint{font-size:11.5px;color:var(--nx-ink3)}
:where(:root[data-page="construction"]) .q-tot{margin-left:auto;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
:where(:root[data-page="construction"]) .q-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 6px;
  border-radius:6px;background:var(--nx-rail);color:var(--nx-ink2);font-size:11px;font-weight:700}
:where(:root[data-page="construction"]) .q-sec.do .q-count{background:var(--brand);color:#fff}
:where(:root[data-page="construction"]) .q-sec.warn .q-count{background:var(--cn-bad);color:#fff}
:where(:root[data-page="construction"]) .q-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="construction"]) .q-row:first-of-type{border-top:0}
:where(:root[data-page="construction"]) .q-row:hover{background:var(--cn-hover)}
:where(:root[data-page="construction"]) .q-who{flex:1;min-width:0}
:where(:root[data-page="construction"]) .q-vend{font-size:12.5px;font-weight:650;line-height:1.45}
:where(:root[data-page="construction"]) .q-meta{display:block;font-size:11px;color:var(--nx-ink3);margin-top:3px;line-height:1.55}
:where(:root[data-page="construction"]) .q-amt{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
:where(:root[data-page="construction"]) .q-due{font-size:11px;color:var(--nx-ink3);white-space:nowrap;min-width:92px;text-align:right}
:where(:root[data-page="construction"]) .q-act{display:flex;align-items:center;gap:7px;flex:none}
:where(:root[data-page="construction"]) .q-act input[type=date],:where(:root[data-page="construction"]) .q-act input.chk{height:32px;border:1px solid var(--nx-line2);border-radius:7px;
  background:var(--nx-elev);color:var(--nx-ink);font:inherit;font-size:12px;padding:0 8px;outline:none}
:where(:root[data-page="construction"]) .q-act input.chk{width:96px}
:where(:root[data-page="construction"]) .q-open{border:0;background:transparent;color:var(--nx-ink3);font-size:11px;font-weight:600;
  cursor:pointer;padding:3px 2px;white-space:nowrap}
:where(:root[data-page="construction"]) .q-open:hover{color:var(--brand);text-decoration:underline}
:where(:root[data-page="construction"]) .q-cb{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;flex:none}
:where(:root[data-page="construction"]) .q-more{padding:10px 16px;border-top:1px solid var(--nx-line);background:var(--nx-rail)}
:where(:root[data-page="construction"]) .q-bulk{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--nx-line);
  background:var(--nx-rail);font-size:12px}
:where(:root[data-page="construction"]) .q-bulk b{font-variant-numeric:tabular-nums}
:where(:root[data-page="construction"]) .q-bulk .btn{margin-left:auto}
@media(max-width:820px){
  :where(:root[data-page="construction"]) .q-row{flex-wrap:wrap;gap:8px}
  :where(:root[data-page="construction"]) .q-who{flex:1 1 100%}
  :where(:root[data-page="construction"]) .q-due{text-align:left;min-width:0}
  :where(:root[data-page="construction"]) .q-act{flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end}
}


/* ----------------------------------------------------------------------------
 * 15.25  General -- Month End
 * general/month-end.php, data-page="month-end"
 * -------------------------------------------------------------------------- */
/* Everything here is prefixed me- so nothing collides with portal.css. */
:root:where([data-page="month-end"]){--me-hover:#F3F6FA;--me-ok:#1B7A3D;--me-ok-lt:#EAF6EF;--me-part:#946400;--me-part-lt:#FFF4DA;--me-out:#A8332C;--me-out-lt:#FBEDEB}
:root[data-theme="dark"]:where([data-page="month-end"]){--me-hover:var(--nx-hover);--me-ok:#5FD08A;--me-ok-lt:rgba(95,208,138,.14);--me-part:#F2C14E;--me-part-lt:rgba(242,193,78,.14);--me-out:#F0908A;--me-out-lt:rgba(240,144,138,.15)}
html.me-embed:where([data-page="month-end"]) body{background:var(--nx-surface)}
html.me-embed:where([data-page="month-end"]) .nx-app{grid-template-columns:minmax(0,1fr);height:100vh;margin:0;border:0;border-radius:0;box-shadow:none}

/* -- Toolbar -- */
:where(:root[data-page="month-end"]) .me-page{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  padding:20px 44px 22px 22px;gap:14px}   /* the frame hides its last 22px on the right */
:where(:root[data-page="month-end"]) .me-page > .nx-card{flex:1 1 auto;min-height:200px;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(20,35,60,.035)}
:where(:root[data-page="month-end"]) .me-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:13px;flex:none}
:where(:root[data-page="month-end"]) .me-find{display:flex;align-items:center;gap:8px;background:var(--nx-elev);border:1px solid var(--nx-line2);
  border-radius:10px;padding:0 11px;height:34px;min-width:220px;color:var(--nx-ink3)}
:where(:root[data-page="month-end"]) .me-find svg{width:15px;height:15px;flex:none}
:where(:root[data-page="month-end"]) .me-find input{border:0;background:transparent;outline:none;font:inherit;font-size:12.5px;color:var(--nx-ink);width:100%;height:100%}
:where(:root[data-page="month-end"]) .me-seg{display:inline-flex;align-items:center;height:34px;padding:2px;gap:2px;
  background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:10px}
:where(:root[data-page="month-end"]) .me-seg button{border:0;background:transparent;color:var(--nx-ink3);font:inherit;font-size:12.5px;
  font-weight:650;padding:0 11px;height:28px;border-radius:8px;cursor:pointer;white-space:nowrap}
:where(:root[data-page="month-end"]) .me-seg button:hover{color:var(--nx-ink)}
:where(:root[data-page="month-end"]) .me-seg button.on{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="month-end"]) .me-seg button .n{opacity:.65;font-weight:600;margin-left:4px}
:where(:root[data-page="month-end"]) .me-spacer{flex:1}

/* -- The checklist -- */
/* scrollbar-gutter keeps the room for the scrollbar whether the rows need it
   or not, so filtering down to a short list does not slide the columns over. */
:where(:root[data-page="month-end"]) .me-tblwrap{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-gutter:stable}
/* table-layout:fixed is the point: the columns come from the colgroup render()
   writes, never from the names in them, so they stand still from month to
   month and through every filter. ME_COLS below holds the widths. */
:where(:root[data-page="month-end"]) .me-tbl{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:12.5px}
:where(:root[data-page="month-end"]) .me-tbl th{position:sticky;top:0;z-index:2;background:var(--nx-rail);color:var(--nx-ink3);
  font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:750;text-align:left;
  padding:9px 12px;border-bottom:1px solid var(--nx-line);white-space:nowrap;cursor:pointer;user-select:none}
:where(:root[data-page="month-end"]) .me-tbl th:hover{color:var(--nx-ink)}
:where(:root[data-page="month-end"]) .me-tbl th .ar{opacity:0;margin-left:5px}
:where(:root[data-page="month-end"]) .me-tbl th.sorted .ar{opacity:1;color:var(--brand)}
:where(:root[data-page="month-end"]) .me-tbl th.st{cursor:default}
:where(:root[data-page="month-end"]) .me-tbl td{padding:7px 12px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="month-end"]) .me-tbl td.k{color:var(--nx-ink);font-weight:650}
/* The AR cell is a row of its own -- the name gives way to the pencil. */
:where(:root[data-page="month-end"]) .me-arcell > .me-cf{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* -- AR company: pencil to change it from this month on -- */
:where(:root[data-page="month-end"]) .me-arcell{display:flex;align-items:center;gap:6px}
:where(:root[data-page="month-end"]) .me-ared{border:0;background:transparent;color:var(--nx-ink3);width:24px;height:24px;border-radius:7px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s;flex:none}
:where(:root[data-page="month-end"]) .me-ared svg{width:13px;height:13px}
:where(:root[data-page="month-end"]) .me-tbl tbody tr:hover .me-ared,:where(:root[data-page="month-end"]) .me-ared.open{opacity:1}
:where(:root[data-page="month-end"]) .me-ared:hover,:where(:root[data-page="month-end"]) .me-ared.open{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="month-end"]) .me-arpop{display:none;position:fixed;z-index:300;width:270px;background:var(--nx-elev);
  border:1px solid var(--nx-line2);border-radius:12px;box-shadow:var(--nx-shadow-lg);padding:10px}
:where(:root[data-page="month-end"]) .me-arpop.open{display:block}
:where(:root[data-page="month-end"]) .me-arpop .t{font-size:12.5px;font-weight:700;color:var(--nx-ink);margin:0 2px 2px}
:where(:root[data-page="month-end"]) .me-arpop .s{font-size:11.5px;color:var(--nx-ink3);margin:0 2px 9px;line-height:1.4}
:where(:root[data-page="month-end"]) .me-arpop input{width:100%;box-sizing:border-box;height:32px;border:1px solid var(--nx-line2);background:var(--nx-bg);
  border-radius:8px;padding:0 9px;font:inherit;font-size:12.5px;color:var(--nx-ink);outline:none}
:where(:root[data-page="month-end"]) .me-arpop input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="month-end"]) .me-arlist{max-height:170px;overflow:auto;margin:6px 0 0}
:where(:root[data-page="month-end"]) .me-arlist button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--nx-ink);
  font:inherit;font-size:12.5px;padding:7px 9px;border-radius:8px;cursor:pointer}
:where(:root[data-page="month-end"]) .me-arlist button:hover{background:var(--me-hover)}
:where(:root[data-page="month-end"]) .me-arlist button.on{color:var(--brand);font-weight:650}
:where(:root[data-page="month-end"]) .me-arpop .f{display:flex;justify-content:flex-end;gap:7px;border-top:1px solid var(--nx-line);margin-top:8px;padding-top:9px}
:where(:root[data-page="month-end"]) .me-arpop .f button{height:30px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);
  border-radius:9px;padding:0 12px;font:inherit;font-size:12px;font-weight:650;cursor:pointer}
:where(:root[data-page="month-end"]) .me-arpop .f button:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="month-end"]) .me-arpop .f button.pri{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="month-end"]) .me-arpop .f button.pri:hover{background:var(--blue-dk,var(--brand));color:#fff}
:where(:root[data-page="month-end"]) .me-arpop .f button[disabled]{opacity:.55;cursor:default}
:where(:root[data-page="month-end"]) .me-tbl tbody tr:hover td{background:var(--me-hover)}
:where(:root[data-page="month-end"]) .me-tbl tbody tr:last-child td{border-bottom:0}
:where(:root[data-page="month-end"]) .me-mute{color:var(--nx-ink3)}

:where(:root[data-page="month-end"]) .me-chk{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--nx-line2);
  display:flex;align-items:center;justify-content:center;color:#fff}
:where(:root[data-page="month-end"]) .me-chk svg{width:11px;height:11px;display:none}
:where(:root[data-page="month-end"]) tr.done .me-chk{background:var(--me-ok);border-color:var(--me-ok)}
:where(:root[data-page="month-end"]) tr.done .me-chk svg{display:block}
:where(:root[data-page="month-end"]) tr.part .me-chk{border-color:var(--me-part);background:var(--me-part-lt)}
:where(:root[data-page="month-end"]) tr.part .me-chk::after{content:'';width:8px;height:2px;border-radius:2px;background:var(--me-part)}

/* -- Date boxes: styled like the portal's drop-down buttons -- */
:where(:root[data-page="month-end"]) .me-date{height:32px;border:1px solid var(--nx-line2);background:#fff;color:var(--nx-ink3);
  border-radius:10px;padding:0 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;width:142px}
:where(:root[data-page="month-end"]) .me-date svg{width:14px;height:14px;flex:none;opacity:.7}
:where(:root[data-page="month-end"]) .me-date .cap{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="month-end"]) .me-date .car{width:9px;height:9px;opacity:.6}
:root[data-theme="dark"]:where([data-page="month-end"]) .me-date{background:var(--nx-elev)}
:where(:root[data-page="month-end"]) .me-date:not(.set) svg{opacity:.4}
:where(:root[data-page="month-end"]) .me-date:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="month-end"]) .me-date.set{color:var(--nx-ink)}
:where(:root[data-page="month-end"]) .me-date.na{border-color:var(--nx-line2);background:var(--nx-line);color:var(--nx-ink2)}
:root[data-theme="dark"]:where([data-page="month-end"]) .me-date.na{background:var(--nx-line)}

:where(:root[data-page="month-end"]) .me-date.open{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="month-end"]) .me-date.saving{opacity:.55;pointer-events:none}

/* -- The calendar drop-down, same shell as the portal's other drop-downs -- */
:where(:root[data-page="month-end"]) .me-cal{display:none;position:fixed;z-index:300;width:252px;background:var(--nx-elev);
  border:1px solid var(--nx-line2);border-radius:12px;box-shadow:var(--nx-shadow-lg);padding:8px}
:where(:root[data-page="month-end"]) .me-cal.open{display:block}
:where(:root[data-page="month-end"]) .me-cal-in{padding:2px 2px 8px}
:where(:root[data-page="month-end"]) .me-cal-in input{width:100%;box-sizing:border-box;height:32px;border:1px solid var(--nx-line2);background:var(--nx-bg);
  border-radius:8px;padding:0 10px;font:inherit;font-size:12.5px;color:var(--nx-ink);outline:none}
:where(:root[data-page="month-end"]) .me-cal-in input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="month-end"]) .me-cal-in input.bad{border-color:#D4453B;box-shadow:0 0 0 3px var(--nx-down-bg)}
:where(:root[data-page="month-end"]) .me-cal-h{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 8px}
:where(:root[data-page="month-end"]) .me-cal-h .t{font-size:12.5px;font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="month-end"]) .me-cal-h button{border:0;background:transparent;color:var(--nx-ink3);width:28px;height:28px;border-radius:8px;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
:where(:root[data-page="month-end"]) .me-cal-h button:hover{background:var(--me-hover);color:var(--nx-ink)}
:where(:root[data-page="month-end"]) .me-cal-h button svg{width:12px;height:12px}
:where(:root[data-page="month-end"]) .me-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
:where(:root[data-page="month-end"]) .me-cal-g .dow{font-size:9.5px;font-weight:750;text-transform:uppercase;letter-spacing:.04em;
  color:var(--nx-ink3);text-align:center;padding:3px 0 5px}
:where(:root[data-page="month-end"]) .me-cal-g button{border:0;background:transparent;color:var(--nx-ink);font:inherit;font-size:12px;font-weight:550;
  height:30px;border-radius:8px;cursor:pointer}
:where(:root[data-page="month-end"]) .me-cal-g button:hover{background:var(--me-hover)}
:where(:root[data-page="month-end"]) .me-cal-g button.out{color:var(--nx-ink3);opacity:.55}
:where(:root[data-page="month-end"]) .me-cal-g button.today{box-shadow:inset 0 0 0 1.5px var(--brand);color:var(--brand);font-weight:700}
:where(:root[data-page="month-end"]) .me-cal-g button.on{background:var(--brand);color:#fff;font-weight:700}
:where(:root[data-page="month-end"]) .me-cal-f{display:flex;justify-content:space-between;border-top:1px solid var(--nx-line);margin-top:6px;padding-top:6px}
:where(:root[data-page="month-end"]) .me-cal-f button{border:0;background:transparent;color:var(--brand);font:inherit;font-size:11.5px;font-weight:700;
  padding:5px 8px;border-radius:7px;cursor:pointer}
:where(:root[data-page="month-end"]) .me-cal-f button:hover{background:var(--brand-lt)}
:where(:root[data-page="month-end"]) .me-cal-f button.clr{color:var(--nx-ink3)}
:where(:root[data-page="month-end"]) .me-cal-f button.clr:hover{background:var(--me-hover);color:var(--nx-ink)}
:where(:root[data-page="month-end"]) .me-cal-f button.na{color:var(--nx-ink2)}
:where(:root[data-page="month-end"]) .me-cal-f button.na.on{background:var(--nx-line);color:var(--nx-ink)}
:where(:root[data-page="month-end"]) .me-cal-f button.na:hover{background:var(--me-hover);color:var(--nx-ink)}

/* -- Click to filter, Ctrl/Cmd + click to hide (same as Transfers) -- */
:where(:root[data-page="month-end"]) .me-cf{cursor:pointer;border-radius:6px;transition:opacity .12s}
:where(:root[data-page="month-end"]) .me-cf:hover{opacity:.7;text-decoration:underline}
:where(:root[data-page="month-end"]) .me-co.me-cf:hover{opacity:1;text-decoration:none;filter:brightness(.94)}
:where(:root[data-page="month-end"]) .me-fbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-2px 0 12px;flex:none}
:where(:root[data-page="month-end"]) .me-fbar:empty{display:none}
:where(:root[data-page="month-end"]) .me-fchip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-lt);color:var(--brand);
  border:1px solid var(--brand);border-radius:20px;padding:4px 6px 4px 11px;font-size:12px;font-weight:600}
:where(:root[data-page="month-end"]) .me-fchip b{font-weight:700}
:where(:root[data-page="month-end"]) .me-fchip button{border:none;background:none;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0 3px;opacity:.7}
:where(:root[data-page="month-end"]) .me-fchip button:hover{opacity:1}
:where(:root[data-page="month-end"]) .me-fchip.not{background:var(--nx-down-bg);color:#D4453B;border-color:#D4453B}
:where(:root[data-page="month-end"]) .me-fclear{border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:20px;
  padding:4px 12px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer}
:where(:root[data-page="month-end"]) .me-fclear:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}

:where(:root[data-page="month-end"]) .me-co{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11px;font-weight:650;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
:where(:root[data-page="month-end"]) .me-flag{display:inline-block;padding:1px 8px;border-radius:10px;font-size:10.5px;font-weight:650;
  background:var(--nx-line);color:var(--nx-ink3);margin-left:7px;vertical-align:middle}
:where(:root[data-page="month-end"]) .me-empty{padding:30px 18px;text-align:center;color:var(--nx-ink3);font-size:12.5px}
:where(:root[data-page="month-end"]) .me-load{padding:48px;text-align:center;color:var(--nx-ink3);font-size:12.5px}
:where(:root[data-page="month-end"]) .me-spin{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;display:inline-block;animation:meSpin .7s linear infinite;vertical-align:-2px;margin-right:7px}
@keyframes meSpin{to{transform:rotate(360deg)}}
/* -- Import: paste a list, check the matches, then load it -- */
:where(:root[data-page="month-end"]) .me-imp{position:fixed;inset:0;z-index:400;background:var(--nx-overlay,rgba(17,20,28,.45));
  display:none;align-items:center;justify-content:center;padding:18px}
:where(:root[data-page="month-end"]) .me-imp.open{display:flex}
:where(:root[data-page="month-end"]) .me-imp-box{width:100%;max-width:1180px;max-height:calc(100vh - 36px);display:flex;flex-direction:column;
  background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:16px;box-shadow:var(--nx-shadow-lg);overflow:hidden}
:where(:root[data-page="month-end"]) .me-imp-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--nx-line);flex:none}
:where(:root[data-page="month-end"]) .me-imp-h .t{font-size:14px;font-weight:750;color:var(--nx-ink)}
:where(:root[data-page="month-end"]) .me-imp-h .s{font-size:12px;color:var(--nx-ink3)}
:where(:root[data-page="month-end"]) .me-imp-b{flex:1 1 auto;min-height:0;overflow:auto;padding:14px 18px}
:where(:root[data-page="month-end"]) .me-imp-f{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--nx-line);flex:none}
:where(:root[data-page="month-end"]) .me-imp-f .sum{font-size:12px;color:var(--nx-ink3);font-weight:600;margin-right:auto}
:where(:root[data-page="month-end"]) .me-imp textarea{width:100%;box-sizing:border-box;height:52vh;border:1px solid var(--nx-line2);background:var(--nx-bg);
  border-radius:10px;padding:10px 12px;font:12px/1.5 ui-monospace,Consolas,monospace;color:var(--nx-ink);outline:none;resize:vertical}
:where(:root[data-page="month-end"]) .me-imp textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="month-end"]) .me-imp .hint{font-size:12px;color:var(--nx-ink2);margin:0 0 10px;line-height:1.5}
:where(:root[data-page="month-end"]) .me-btn{height:34px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);border-radius:10px;
  padding:0 14px;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;white-space:nowrap}
:where(:root[data-page="month-end"]) .me-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="month-end"]) .me-btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="month-end"]) .me-btn.pri:hover{filter:brightness(.95);color:#fff}
:where(:root[data-page="month-end"]) .me-btn[disabled]{opacity:.5;cursor:default;filter:none}
:where(:root[data-page="month-end"]) .me-itbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
:where(:root[data-page="month-end"]) .me-itbl th{position:sticky;top:-14px;z-index:1;background:var(--nx-rail);color:var(--nx-ink3);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.05em;font-weight:750;text-align:left;padding:8px 9px;border-bottom:1px solid var(--nx-line);white-space:nowrap}
:where(:root[data-page="month-end"]) .me-itbl td{padding:6px 9px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink2);vertical-align:top;white-space:nowrap}
:where(:root[data-page="month-end"]) .me-itbl tr.off td{opacity:.5}
:where(:root[data-page="month-end"]) .me-itbl td.nm{color:var(--nx-ink);font-weight:650}
:where(:root[data-page="month-end"]) .me-itbl select{height:28px;max-width:210px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);
  border-radius:8px;padding:0 8px;font:inherit;font-size:12px}
:where(:root[data-page="month-end"]) .me-itbl input[type=checkbox]{width:15px;height:15px;accent-color:var(--brand);cursor:pointer}
:where(:root[data-page="month-end"]) .me-tag{display:inline-block;padding:1px 7px;border-radius:9px;font-size:10.5px;font-weight:700;white-space:nowrap}
:where(:root[data-page="month-end"]) .me-tag.ok{background:var(--nx-up-bg);color:var(--nx-up)}
:where(:root[data-page="month-end"]) .me-tag.guess{background:var(--me-part-lt);color:var(--me-part)}
:where(:root[data-page="month-end"]) .me-tag.bad{background:var(--nx-down-bg);color:#D4453B}
:where(:root[data-page="month-end"]) .me-tag.skip{background:var(--nx-line);color:var(--nx-ink3)}
:where(:root[data-page="month-end"]) .me-inote{white-space:normal !important;min-width:190px;font-size:11.5px;line-height:1.45}
:where(:root[data-page="month-end"]) .me-inote .w{color:var(--me-part)}
:where(:root[data-page="month-end"]) .me-inote .e{color:#D4453B}
:where(:root[data-page="month-end"]) .me-arch{color:var(--brand);font-weight:650}
:where(:root[data-page="month-end"]) .me-old{color:var(--nx-ink3);text-decoration:line-through;margin-right:4px}

/* -- Import's last step: what will change, confirmed before it saves -- */
:where(:root[data-page="month-end"]) .me-conf{position:fixed;inset:0;z-index:420;background:rgba(17,20,28,.35);display:none;align-items:center;justify-content:center;padding:18px}
:where(:root[data-page="month-end"]) .me-conf.open{display:flex}
:where(:root[data-page="month-end"]) .me-conf-box{width:100%;max-width:720px;max-height:calc(100vh - 60px);display:flex;flex-direction:column;
  background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:14px;box-shadow:var(--nx-shadow-lg);overflow:hidden}
:where(:root[data-page="month-end"]) .me-conf-h{padding:16px 20px 12px;border-bottom:1px solid var(--nx-line);flex:none}
:where(:root[data-page="month-end"]) .me-conf-h b{display:block;font-size:15px;font-weight:750;color:var(--nx-ink);margin-bottom:3px}
:where(:root[data-page="month-end"]) .me-conf-h span{font-size:12px;color:var(--nx-ink3)}
:where(:root[data-page="month-end"]) .me-conf-h .w{color:var(--me-part);font-weight:650}
:where(:root[data-page="month-end"]) .me-conf-b{flex:1 1 auto;min-height:0;overflow:auto;padding:0 20px}
:where(:root[data-page="month-end"]) .me-conf-b .me-itbl th{top:0}
:where(:root[data-page="month-end"]) .me-conf-b tr.over td{background:var(--me-part-lt)}
:where(:root[data-page="month-end"]) .me-conf-f{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--nx-line);flex:none}
:where(:root[data-page="month-end"]) .me-conf-f .sum{font-size:12px;color:var(--nx-ink3);font-weight:600;margin-right:auto}
/* -- Drop the Close Tracker anywhere on the page -- */
:where(:root[data-page="month-end"]) .me-drop{position:fixed;inset:10px 32px 10px 10px;z-index:450;display:none;align-items:center;justify-content:center;
  border:2px dashed var(--brand);border-radius:16px;background:var(--brand-lt);pointer-events:none}
:where(:root[data-page="month-end"]) .me-drop.open{display:flex}
:where(:root[data-page="month-end"]) .me-drop div{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:12px;box-shadow:var(--nx-shadow-lg);
  padding:16px 22px;text-align:center;max-width:420px}
:where(:root[data-page="month-end"]) .me-drop b{display:block;font-size:14px;font-weight:750;color:var(--nx-ink);margin-bottom:4px}
:where(:root[data-page="month-end"]) .me-drop span{font-size:12px;color:var(--nx-ink3);line-height:1.5}
:where(:root[data-page="month-end"]) .me-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--nx-toast-bg);color:var(--nx-toast-ink);padding:10px 16px;border-radius:11px;
  font-size:12.5px;font-weight:600;opacity:0;pointer-events:none;transition:.18s;z-index:500;box-shadow:var(--nx-shadow-lg)}
:where(:root[data-page="month-end"]) .me-toast.show{opacity:1;transform:translateX(-50%)}

/* Month-end workspace: the checklist. The month and the percent are in the
   General frame top bar, styled there. */
/* Read aloud, never drawn -- the checklist keeps a heading without showing one. */
:where(:root[data-page="month-end"]) .me-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
:where(:root[data-page="month-end"]) .me-bar{margin:0;padding:0 20px 16px;gap:10px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="month-end"]) .me-find{height:34px;flex:1;min-width:240px;max-width:390px;border-radius:9px}
:where(:root[data-page="month-end"]) .me-find:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="month-end"]) .me-seg{height:34px;border-radius:9px}
:where(:root[data-page="month-end"]) .me-seg button{height:28px;font-size:11.5px;border-radius:6px}
:where(:root[data-page="month-end"]) .me-seg button.on{background:var(--nx-elev);color:var(--brand);box-shadow:0 1px 4px rgba(20,35,60,.1)}
:where(:root[data-page="month-end"]) #meLive{margin-left:auto}
:where(:root[data-page="month-end"]) .me-fbar{margin:0;padding:12px 20px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="month-end"]) .me-tbl{font-size:12px;min-width:1280px}
:where(:root[data-page="month-end"]) .me-tbl th{padding:9px 12px;font-size:10px;letter-spacing:.035em;background:var(--nx-elev)}
:where(:root[data-page="month-end"]) .me-tbl td{padding:6px 12px}
:where(:root[data-page="month-end"]) .me-tbl th:first-child,:where(:root[data-page="month-end"]) .me-tbl td:first-child{padding-left:20px}
:where(:root[data-page="month-end"]) .me-tbl td.k{font-size:12.5px}
:where(:root[data-page="month-end"]) .me-chk{width:19px;height:19px;border-radius:50%;border-width:1px}
:where(:root[data-page="month-end"]) .me-date{height:32px;width:148px;border-radius:8px;font-size:11.5px;font-weight:550}
:where(:root[data-page="month-end"]) .me-date.set{background:var(--me-ok-lt);border-color:transparent;color:var(--me-ok)}
:where(:root[data-page="month-end"]) .me-date.na{background:var(--nx-rail);color:var(--nx-ink3)}
:where(:root[data-page="month-end"]) .me-co{border-radius:5px;font-size:10.5px;padding:3px 8px}
:where(:root[data-page="month-end"]) .me-ared{opacity:.5}
:where(:root[data-page="month-end"]) .me-ared:focus-visible{opacity:1}
:where(:root[data-page="month-end"]) .me-page button:focus-visible,:where(:root[data-page="month-end"]) .me-cal button:focus-visible,:where(:root[data-page="month-end"]) .me-arpop button:focus-visible,:where(:root[data-page="month-end"]) .me-imp button:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
:where(:root[data-page="month-end"]) .me-table-foot{padding:11px 20px;border-top:1px solid var(--nx-line);display:flex;justify-content:space-between;gap:12px;flex:none;font-size:10.5px;color:var(--nx-ink3);background:var(--nx-elev)}

/* -- The month's total and outstanding, split by date and then by client -- */
:where(:root[data-page="month-end"]) .me-bd{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:11px 20px;
  border-bottom:1px solid var(--nx-line);flex:none}
:where(:root[data-page="month-end"]) .me-bd:empty{display:none}
:where(:root[data-page="month-end"]) .me-bd .ok{color:var(--me-ok);font-weight:750}
:where(:root[data-page="month-end"]) .me-bd .op{color:var(--me-part);font-weight:750}
:where(:root[data-page="month-end"]) .me-bd-c{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-elev);
  border-radius:8px;padding:4px 9px 4px 5px;font:inherit;font-size:11px;color:var(--nx-ink3);font-weight:600;
  cursor:pointer;white-space:nowrap}
:where(:root[data-page="month-end"]) .me-bd-c:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="month-end"]) .me-bd-c.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-lt)}
:where(:root[data-page="month-end"]) .me-bd-c.out{opacity:.45}
:where(:root[data-page="month-end"]) .me-bd-c .me-co{pointer-events:none}
:where(:root[data-page="month-end"]) .me-bd-c.done .op{color:var(--nx-ink3);font-weight:600}

/* -- On or off the month end list: the button beside a facility's name -- */
:where(:root[data-page="month-end"]) .me-listed{border:0;background:transparent;color:var(--nx-ink3);width:22px;height:22px;border-radius:6px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s;
  vertical-align:-6px;margin-left:4px;flex:none}
:where(:root[data-page="month-end"]) .me-listed svg{width:12px;height:12px}
:where(:root[data-page="month-end"]) .me-tbl tbody tr:hover .me-listed{opacity:.7}
:where(:root[data-page="month-end"]) .me-listed:hover{background:var(--nx-down-bg);color:#D4453B;opacity:1}
:where(:root[data-page="month-end"]) .me-listed:focus-visible{opacity:1}
:where(:root[data-page="month-end"]) .me-tbl tr.offlist td.k{color:var(--nx-ink3)}
:where(:root[data-page="month-end"]) .me-tbl tr.offlist .me-listed:hover{background:var(--me-ok-lt);color:var(--me-ok)}
:where(:root[data-page="month-end"]) .me-foot-off{border:0;background:transparent;color:var(--nx-ink3);font:inherit;font-size:10.5px;font-weight:700;
  cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
:where(:root[data-page="month-end"]) .me-foot-off:hover{color:var(--nx-ink)}
:where(:root[data-page="month-end"]) .me-foot-off.on{color:var(--brand)}
:where(:root[data-page="month-end"]) .me-imp-h{padding:20px 22px}:where(:root[data-page="month-end"]) .me-imp-h .t{font-size:18px}:where(:root[data-page="month-end"]) .me-imp-b{padding:18px 22px}:where(:root[data-page="month-end"]) .me-imp-f{padding:16px 22px}
@media(max-width:1100px){:where(:root[data-page="month-end"]) .me-find{max-width:none}:where(:root[data-page="month-end"]) #meLive{margin-left:0}:where(:root[data-page="month-end"]) .me-table-foot .me-help{display:none}}
@media(max-width:700px){
  :where(:root[data-page="month-end"]) .me-page{overflow:auto;padding:18px 34px 16px 12px;gap:12px}
  :where(:root[data-page="month-end"]) .me-page > .nx-card{flex:1 0 420px}:where(:root[data-page="month-end"]) .me-bar{padding:14px}:where(:root[data-page="month-end"]) .me-find{flex-basis:100%;min-width:0}:where(:root[data-page="month-end"]) .me-fbar{padding:12px 14px}
  :where(:root[data-page="month-end"]) .me-table-foot{padding:11px 14px}:where(:root[data-page="month-end"]) .me-imp-f{flex-wrap:wrap}:where(:root[data-page="month-end"]) .me-imp-f .sum{flex-basis:100%}
  :where(:root[data-page="month-end"]) .me-bd{padding:11px 14px;gap:7px}
}
/* Visual system: generous summary, restrained controls, practical table density. */
:where(:root[data-page="month-end"]) .me-page{padding:26px 44px 22px 22px;gap:18px;overflow:auto}
:where(:root[data-page="month-end"]) .me-bd{padding:0;border:0;gap:12px}
:where(:root[data-page="month-end"]) .me-milestones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
:where(:root[data-page="month-end"]) .me-overview,:where(:root[data-page="month-end"]) .me-bd-f{display:flex;flex-direction:column;align-items:stretch;gap:10px;position:relative;border:1px solid var(--nx-line);border-radius:12px;padding:16px 18px;background:var(--nx-elev);overflow:hidden;text-align:left;min-width:0}
/* The first card is the month's progress, so it wears the same green as a
   date that is in -- the three date cards stay plain beside it. */
:where(:root[data-page="month-end"]) .me-overview{background:var(--me-ok-lt);border-color:transparent}
:where(:root[data-page="month-end"]) .me-overview .me-stat-track{background:rgba(27,122,61,.13)}
:root[data-theme="dark"]:where([data-page="month-end"]) .me-overview .me-stat-track{background:rgba(95,208,138,.16)}
/* The cards are figures, not controls: nothing moves under the cursor and a
   click does nothing. The breakdown shows while the pointer is on one. */
:where(:root[data-page="month-end"]) .me-stat-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--nx-ink2);font-weight:650;gap:8px;min-height:22px}
:where(:root[data-page="month-end"]) .me-stat-label .me-pill{flex:none;margin-left:auto}
:where(:root[data-page="month-end"]) .me-stat-value{display:block;color:var(--nx-ink);font-size:30px;line-height:1;letter-spacing:-1px;font-weight:700}
:where(:root[data-page="month-end"]) .me-stat-value small{font-size:13px;color:var(--nx-ink3);font-weight:500;letter-spacing:0}
:where(:root[data-page="month-end"]) .me-pill{display:inline-flex;align-items:center;border:1px solid transparent;border-radius:999px;padding:3px 10px;
  font:inherit;font-size:10.5px;font-weight:650;letter-spacing:-.1px;white-space:nowrap;
  background:var(--me-out-lt);color:var(--me-out)}
:where(:root[data-page="month-end"]) .me-pill.all{background:var(--me-ok-lt);color:var(--me-ok)}
/* The rose pill is the only thing on a card you can click: it filters the
   list to what that date is still owed by. */
:where(:root[data-page="month-end"]) button.me-pill{cursor:pointer}
:where(:root[data-page="month-end"]) button.me-pill:hover{border-color:var(--me-out)}
:where(:root[data-page="month-end"]) button.me-pill.on{background:var(--me-out);color:var(--nx-on-brand);border-color:var(--me-out)}
:root[data-theme="dark"]:where([data-page="month-end"]) button.me-pill.on{color:#20242E}
:where(:root[data-page="month-end"]) button.me-pill:focus-visible{outline:2px solid var(--me-out);outline-offset:2px}
:where(:root[data-page="month-end"]) .me-overview .me-pill.all{background:rgba(27,122,61,.13)}
:root[data-theme="dark"]:where([data-page="month-end"]) .me-overview .me-pill.all{background:rgba(95,208,138,.18)}
:where(:root[data-page="month-end"]) .me-stat-track{position:absolute;bottom:0;left:0;right:0;height:6px;background:var(--nx-line)}
:where(:root[data-page="month-end"]) .me-stat-track i{display:block;height:100%;background:var(--me-ok)}
/* -- The client breakdown, on the card it belongs to -- */
:where(:root[data-page="month-end"]) .me-tip{display:none;position:fixed;top:0;left:0;z-index:320;width:290px;max-height:70vh;overflow:hidden;
  background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:12px;
  box-shadow:var(--nx-shadow-lg);padding:10px 0 4px;pointer-events:none}
:where(:root[data-page="month-end"]) .me-tip.open{display:block}
:where(:root[data-page="month-end"]) .me-tip-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 13px 9px;
  border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="month-end"]) .me-tip-h b{font-size:12.5px;font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="month-end"]) .me-tip-h span{font-size:10.5px;color:var(--nx-ink3);white-space:nowrap}
:where(:root[data-page="month-end"]) .me-tip-r{display:flex;align-items:center;gap:8px;padding:5px 13px}
/* The tag is sized, not stretched -- a row of full-width blocks reads as bars. */
:where(:root[data-page="month-end"]) .me-tip-r .me-co{flex:none;width:112px;min-width:0;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="month-end"]) .me-tip-n{flex:1;text-align:right;font-size:11px;color:var(--nx-ink3);font-weight:600;white-space:nowrap}
:where(:root[data-page="month-end"]) .me-tip-o{font-size:10.5px;font-weight:650;white-space:nowrap;width:58px;text-align:right}
:where(:root[data-page="month-end"]) .me-tip-o.none{color:var(--me-ok)}
:where(:root[data-page="month-end"]) .me-tip-f{padding:7px 13px 4px;font-size:10px;color:var(--nx-ink3);border-top:1px solid var(--nx-line);margin-top:4px}
:where(:root[data-page="month-end"]) .me-page > .nx-card{min-height:330px;border-radius:12px;box-shadow:0 3px 14px rgba(20,35,60,.025)}
/* The bar opens the card now, so it brings its own top padding. */
:where(:root[data-page="month-end"]) .me-bar{padding:16px 20px;gap:10px}
:where(:root[data-page="month-end"]) .me-find{max-width:410px;height:36px;background:var(--nx-surface);border-color:var(--nx-line);border-radius:7px}
:where(:root[data-page="month-end"]) .me-find input{font-size:12px}
:where(:root[data-page="month-end"]) .me-seg{height:36px;background:var(--nx-surface);border-color:var(--nx-line);border-radius:7px}
:where(:root[data-page="month-end"]) .me-seg button{font-size:11px}
:where(:root[data-page="month-end"]) .me-seg button.on{color:var(--nx-ink);background:var(--nx-elev)}
:where(:root[data-page="month-end"]) .me-tbl th{background:var(--nx-rail);font-size:9px;padding-top:12px;padding-bottom:12px;color:var(--nx-ink2)}
:where(:root[data-page="month-end"]) .me-tbl td{padding-top:4px;padding-bottom:4px;font-size:11.5px}
:where(:root[data-page="month-end"]) .me-tbl td.k{font-size:12px;font-weight:600;letter-spacing:-.1px}
:where(:root[data-page="month-end"]) .me-date{height:30px;border-radius:6px;width:144px;background:var(--nx-elev);border-color:var(--nx-line2)}
:where(:root[data-page="month-end"]) .me-date.set{background:transparent;border-color:transparent;color:var(--me-ok)}
:where(:root[data-page="month-end"]) .me-date.set:hover{background:var(--me-ok-lt);border-color:var(--me-ok)}
:where(:root[data-page="month-end"]) .me-date.na{border-color:transparent}
:where(:root[data-page="month-end"]) .me-co{font-weight:600;font-size:10px;padding:3px 7px}
:where(:root[data-page="month-end"]) .me-table-foot{font-size:10px;padding:12px 20px}
@media(max-width:1100px){:where(:root[data-page="month-end"]) .me-find{max-width:none}:where(:root[data-page="month-end"]) .me-overview,:where(:root[data-page="month-end"]) .me-bd-f{padding:15px 12px}}
@media(max-width:800px){:where(:root[data-page="month-end"]) .me-milestones{gap:8px}:where(:root[data-page="month-end"]) .me-stat-label{flex-wrap:wrap}}
@media(max-width:600px){
 :where(:root[data-page="month-end"]) .me-page{padding:18px 34px 16px 12px;gap:16px}
 :where(:root[data-page="month-end"]) .me-milestones{grid-template-columns:repeat(2,minmax(0,1fr))}:where(:root[data-page="month-end"]) .me-stat-value{font-size:26px}:where(:root[data-page="month-end"]) .me-stat-label{font-size:10px}
 :where(:root[data-page="month-end"]) .me-page > .nx-card{flex:1 0 460px}
 :where(:root[data-page="month-end"]) .me-bar{padding:14px}:where(:root[data-page="month-end"]) .me-find{flex-basis:100%}:where(:root[data-page="month-end"]) .me-seg button{padding:0 8px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){:where(:root[data-page="month-end"]) .me-toast{transition:none}:where(:root[data-page="month-end"]) .me-spin{animation:none}}


/* ----------------------------------------------------------------------------
 * 15.26  Payroll -- Hours pivot
 * payroll/hours-pivot.php, data-page="hours-pivot"
 * -------------------------------------------------------------------------- */
/* ==== Nexus theme tokens (same set the other payroll pages use) ==== */
:root:where([data-page="hours-pivot"]){
  --nx-attn:#B8860B;--nx-attn-bg:#FDF6E3;--nx-attn-line:#EFE0B5;
  --brand:var(--blue);
  --brand-lt:var(--blue-lt);
  --bg:var(--nx-bg);
  --bg2:var(--nx-rail);
  --surface:var(--nx-surface);
  --surface2:#F3F4F6;
  --border:var(--nx-line);
  --border2:var(--nx-line2);
  --text:var(--nx-ink);
  --text2:var(--nx-ink2);
  --text3:var(--nx-ink3);
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="hours-pivot"]){
  --nx-up:#34D27B;--nx-up-bg:#16301F;
  --nx-down:#F4756B;--nx-down-bg:#3A1E1C;
  --nx-attn:var(--amber-text);--nx-attn-bg:var(--amber-lt);--nx-attn-line:#4A411C;
  --brand:#1FB866;
  --brand-lt:#13361F;
  --bg:var(--nx-bg);
  --bg2:var(--nx-surface);
  --surface:var(--nx-surface);
  --surface2:var(--nx-hover);
  --border:var(--nx-line);
  --border2:var(--nx-line2);
  --text:var(--nx-ink);
  --text2:var(--nx-ink2);
  --text3:var(--nx-ink3);
  --blue:#1FB866;--blue-dk:#13361F;--blue-lt:#15301F;
  --green:#34D27B;--green-lt:#16301F;
  --amber:#E0A93B;--amber-lt:#2A2510;--amber-text:#E8C25A;
  --red:#F4756B;--red-lt:#3A1E1C;--red-text:#F4756B;
  color-scheme:dark;
}
:where(:root[data-page="hours-pivot"]) *, *:where([data-page="hours-pivot"]){box-sizing:border-box}
html:where([data-page="hours-pivot"]),:where(:root[data-page="hours-pivot"]) body{height:100%;margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px}
:where(:root[data-page="hours-pivot"]) button{font-family:inherit}

/* App frame */
:where(:root[data-page="hours-pivot"]) .nx-app{display:grid;grid-template-columns:248px 1fr;height:calc(100vh - 24px);min-height:calc(100vh - 24px);max-width:1760px;margin:12px;background:var(--nx-surface);border-radius:18px;overflow:hidden;box-shadow:0 16px 48px rgba(27,29,41,.10);border:1px solid var(--nx-line)}
@media(min-width:1784px){:where(:root[data-page="hours-pivot"]) .nx-app{margin:12px auto}}
@media(max-width:980px){:where(:root[data-page="hours-pivot"]) .nx-app{grid-template-columns:1fr;margin:0;border-radius:0;border:none;height:100vh;min-height:100vh}}

/* Sidebar */
:where(:root[data-page="hours-pivot"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px}
@media(max-width:980px){:where(:root[data-page="hours-pivot"]) .nx-rail{display:none}}
:where(:root[data-page="hours-pivot"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="hours-pivot"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#04a85a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
:where(:root[data-page="hours-pivot"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="hours-pivot"]) .nx-navsec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3);padding:14px 10px 6px}
:where(:root[data-page="hours-pivot"]) .nx-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--nx-ink2);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,color .12s}
:where(:root[data-page="hours-pivot"]) .nx-nav svg{width:17px;height:17px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="hours-pivot"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="hours-pivot"]) .nx-nav.active{background:var(--brand);color:#fff}
:where(:root[data-page="hours-pivot"]) .nx-nav.active svg{color:#fff}
:where(:root[data-page="hours-pivot"]) .nx-rail-foot{margin-top:auto;padding-top:14px}
:where(:root[data-page="hours-pivot"]) .nx-promo{background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:14px;padding:13px}
:where(:root[data-page="hours-pivot"]) .nx-promo-row{display:flex;align-items:center;gap:10px}
:where(:root[data-page="hours-pivot"]) .nx-promo-mark{width:28px;height:28px;border-radius:9px;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center}
:where(:root[data-page="hours-pivot"]) .nx-promo-mark svg{width:15px;height:15px}
:where(:root[data-page="hours-pivot"]) .nx-promo-t{font-size:12.5px;font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="hours-pivot"]) .nx-promo-s{font-size:11px;color:var(--nx-ink3)}

/* Main + topbar */
:where(:root[data-page="hours-pivot"]) .nx-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
:where(:root[data-page="hours-pivot"]) .nx-topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="hours-pivot"]) .nx-topbar-title{font-size:14px;font-weight:700;color:var(--nx-ink);letter-spacing:-.01em}
:where(:root[data-page="hours-pivot"]) .nx-top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
:where(:root[data-page="hours-pivot"]) .nx-pbtn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);border-radius:10px;padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
:where(:root[data-page="hours-pivot"]) .nx-pbtn:hover{background:var(--nx-hover);color:var(--nx-ink);border-color:var(--nx-ink3)}
:where(:root[data-page="hours-pivot"]) .nx-pbtn svg{width:14px;height:14px}
:where(:root[data-page="hours-pivot"]) .nx-theme-btn{width:34px;height:34px;border-radius:10px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);display:flex;align-items:center;justify-content:center;cursor:pointer}
:where(:root[data-page="hours-pivot"]) .nx-theme-btn:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="hours-pivot"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="hours-pivot"]) .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="hours-pivot"]) .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="hours-pivot"]) .nx-ic-moon{display:block}
:where(:root[data-page="hours-pivot"]) .nx-user{position:relative}
:where(:root[data-page="hours-pivot"]) .nx-user-av-btn{border:none;background:none;padding:0;cursor:pointer}
:where(:root[data-page="hours-pivot"]) .nx-user-av{width:34px;height:34px;border-radius:11px;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
:where(:root[data-page="hours-pivot"]) .nx-user-av.lg{width:40px;height:40px;font-size:14px}
:where(:root[data-page="hours-pivot"]) .nx-user-pop{position:absolute;top:calc(100% + 8px);right:0;width:246px;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:14px;box-shadow:0 18px 44px rgba(27,29,41,.18);padding:8px;display:none;z-index:60}
:where(:root[data-page="hours-pivot"]) .nx-user-pop.open{display:block}
:where(:root[data-page="hours-pivot"]) .nx-user-pop-id{display:flex;align-items:center;gap:10px;padding:8px 8px 10px}
:where(:root[data-page="hours-pivot"]) .nx-user-pop-meta{display:flex;flex-direction:column;min-width:0}
:where(:root[data-page="hours-pivot"]) .nx-user-pop-name{font-size:13px;font-weight:700;color:var(--nx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="hours-pivot"]) .nx-user-pop-sub{font-size:11px;color:var(--nx-ink3)}
:where(:root[data-page="hours-pivot"]) .nx-user-pop-sep{height:1px;background:var(--nx-line);margin:4px 0}
:where(:root[data-page="hours-pivot"]) .nx-user-pop-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:none;background:none;padding:9px 10px;border-radius:9px;font-size:12.5px;font-weight:500;color:var(--nx-ink2);cursor:pointer;text-decoration:none}
:where(:root[data-page="hours-pivot"]) .nx-user-pop-item svg{width:15px;height:15px}
:where(:root[data-page="hours-pivot"]) .nx-user-pop-item:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="hours-pivot"]) .nx-user-pop-item.danger{color:var(--red,#F0594E)}
:where(:root[data-page="hours-pivot"]) .nx-user-pop-item.danger:hover{background:var(--red-lt,#FCEBEB)}

:where(:root[data-page="hours-pivot"]) .nx-scroll{flex:1;min-height:0;overflow:auto;padding:20px 22px 22px;display:flex;flex-direction:column}
:where(:root[data-page="hours-pivot"]) .nx-pagehead{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px;flex-wrap:wrap;flex:0 0 auto}
:where(:root[data-page="hours-pivot"]) .nx-h1{font-size:22px;font-weight:800;letter-spacing:-.03em;margin:0 0 4px;color:var(--nx-ink)}
:where(:root[data-page="hours-pivot"]) .nx-sub{font-size:12.5px;color:var(--nx-ink3)}

/* Cards */
:where(:root[data-page="hours-pivot"]) .nx-card{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:var(--nx-radius);overflow:hidden}
/* The grid card takes whatever height is left, so the table runs all the way
   down the page instead of stopping short. */
:where(:root[data-page="hours-pivot"]) .nx-card.hp-grid-card{flex:1;min-height:0;display:flex;flex-direction:column}
:where(:root[data-page="hours-pivot"]) .nx-card.hp-grid-card .nx-card-head{flex:0 0 auto}
:where(:root[data-page="hours-pivot"]) .nx-card-head{display:flex;align-items:center;gap:10px;padding:13px 17px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="hours-pivot"]) .nx-card-ic{width:26px;height:26px;border-radius:8px;background:var(--nx-rail);border:1px solid var(--nx-line2);display:flex;align-items:center;justify-content:center;color:var(--nx-ink2)}
:where(:root[data-page="hours-pivot"]) .nx-card-ic svg{width:14px;height:14px}
:where(:root[data-page="hours-pivot"]) .nx-card-title{font-size:13.5px;font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="hours-pivot"]) .nx-card-right{margin-left:auto;display:flex;align-items:center;gap:8px}
:where(:root[data-page="hours-pivot"]) .nx-tag{font-size:11px;font-weight:600;color:var(--nx-ink3);background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:7px;padding:3px 8px}

/* KPI strip */
:where(:root[data-page="hours-pivot"]) .hp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;flex:0 0 auto}
@media(max-width:900px){:where(:root[data-page="hours-pivot"]) .hp-stats{grid-template-columns:repeat(2,1fr)}}
:where(:root[data-page="hours-pivot"]) .hp-kpi{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:14px;padding:13px 15px}
:where(:root[data-page="hours-pivot"]) .hp-kpi-l{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-ink3)}
:where(:root[data-page="hours-pivot"]) .hp-kpi-v{font-size:20px;font-weight:800;letter-spacing:-.03em;color:var(--nx-ink);margin-top:5px;font-variant-numeric:tabular-nums}
:where(:root[data-page="hours-pivot"]) .hp-kpi-s{font-size:11.5px;color:var(--nx-ink3);margin-top:3px}

/* Toolbar */
:where(:root[data-page="hours-pivot"]) .hp-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;flex:0 0 auto}
:where(:root[data-page="hours-pivot"]) .hp-seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--nx-line2);background:var(--nx-rail);border-radius:10px}
:where(:root[data-page="hours-pivot"]) .hp-seg button{border:none;background:none;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;color:var(--nx-ink2);cursor:pointer}
:where(:root[data-page="hours-pivot"]) .hp-seg button.on{background:var(--nx-surface);color:var(--nx-ink);box-shadow:0 1px 3px rgba(27,29,41,.10)}
:where(:root[data-page="hours-pivot"]) .hp-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--nx-ink2);cursor:pointer;user-select:none;border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:10px;padding:6px 11px}
:where(:root[data-page="hours-pivot"]) .hp-toggle:hover{background:var(--nx-hover)}
:where(:root[data-page="hours-pivot"]) .hp-box{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--nx-line2);background:var(--nx-surface);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
:where(:root[data-page="hours-pivot"]) .hp-toggle.on .hp-box{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="hours-pivot"]) .hp-box svg{width:9px;height:9px;color:#fff;opacity:0}
:where(:root[data-page="hours-pivot"]) .hp-toggle.on .hp-box svg{opacity:1}

/* Facility picker (custom - no native select) */
:where(:root[data-page="hours-pivot"]) .hp-pick{position:relative}
:where(:root[data-page="hours-pivot"]) .hp-pick-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);border-radius:10px;padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;max-width:290px}
:where(:root[data-page="hours-pivot"]) .hp-pick-btn:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="hours-pivot"]) .hp-pick-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="hours-pivot"]) .hp-pick-btn svg{width:11px;height:11px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="hours-pivot"]) .hp-pick-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:70;width:290px;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:13px;box-shadow:0 18px 44px rgba(27,29,41,.18);display:none;overflow:hidden}
:where(:root[data-page="hours-pivot"]) .hp-pick-pop.open{display:block}
:where(:root[data-page="hours-pivot"]) .hp-pick-search{padding:9px 9px 6px}
:where(:root[data-page="hours-pivot"]) .hp-pick-search input{width:100%;border:1px solid var(--nx-line2);background:var(--nx-rail);border-radius:9px;padding:7px 10px;font-size:12.5px;font-family:inherit;color:var(--nx-ink);outline:none}
:where(:root[data-page="hours-pivot"]) .hp-pick-search input:focus{border-color:var(--brand)}
:where(:root[data-page="hours-pivot"]) .hp-pick-list{max-height:270px;overflow:auto;padding:2px 6px 6px}
:where(:root[data-page="hours-pivot"]) .hp-pick-opt{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:12.5px;color:var(--nx-ink2);cursor:pointer}
:where(:root[data-page="hours-pivot"]) .hp-pick-opt:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="hours-pivot"]) .hp-pick-opt.on{color:var(--nx-ink);font-weight:600}
:where(:root[data-page="hours-pivot"]) .hp-pick-foot{display:flex;gap:8px;padding:8px 10px;border-top:1px solid var(--nx-line);background:var(--nx-rail)}
:where(:root[data-page="hours-pivot"]) .hp-pick-foot button{border:none;background:none;font-size:11.5px;font-weight:700;color:var(--brand);cursor:pointer;padding:2px 0}
:where(:root[data-page="hours-pivot"]) .hp-pick-foot button:last-child{margin-left:auto;color:var(--nx-ink3)}

/* ==== The pivot table ==== */
:where(:root[data-page="hours-pivot"]) .hp-wrap{overflow:auto;flex:1;min-height:220px;cursor:grab}
/* While the grid is being dragged, nothing else should look clickable and
   nothing should get selected. */
:where(:root[data-page="hours-pivot"]) body.hp-dragging,:where(:root[data-page="hours-pivot"]) body.hp-dragging *{cursor:grabbing !important;user-select:none}
:where(:root[data-page="hours-pivot"]) .hp-table{border-collapse:separate;border-spacing:0;width:auto;min-width:100%;font-variant-numeric:tabular-nums}
:where(:root[data-page="hours-pivot"]) .hp-table th,:where(:root[data-page="hours-pivot"]) .hp-table td{white-space:nowrap}

/* Header */
:where(:root[data-page="hours-pivot"]) .hp-table thead th{
  position:sticky;background:var(--nx-rail);color:var(--nx-ink3);
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:1px solid var(--nx-line);padding:8px 12px;text-align:right
}
:where(:root[data-page="hours-pivot"]) .hp-table thead tr.hp-hr1 th{top:0;z-index:6;height:34px}
:where(:root[data-page="hours-pivot"]) .hp-table thead tr.hp-hr2 th{top:34px;z-index:6}
:where(:root[data-page="hours-pivot"]) .hp-table thead th.hp-mhead{
  text-align:center;color:var(--nx-ink);font-size:11.5px;letter-spacing:-.01em;
  text-transform:none;border-left:2px solid var(--nx-line2)
}
:where(:root[data-page="hours-pivot"]) .hp-table thead th.hp-sub-first{border-left:2px solid var(--nx-line2)}
:where(:root[data-page="hours-pivot"]) .hp-table thead th.hp-deptcol,
:where(:root[data-page="hours-pivot"]) .hp-table tbody td.hp-deptcol,
:where(:root[data-page="hours-pivot"]) .hp-table tfoot td.hp-deptcol{
  position:sticky;left:0;text-align:left;
  background:var(--nx-surface);border-right:2px solid var(--nx-line2);
  min-width:250px;max-width:320px
}
/* Layer order, lowest to highest: body cells, the frozen Department column,
   the sticky total row, the header. The Department header cell is the corner
   of both freezes, so it sits on top of everything. The selector below is
   deliberately as specific as the row rule above it -- when it wasn't, the
   row rule won and the header slid underneath the scrolling column. */
:where(:root[data-page="hours-pivot"]) .hp-table tbody td.hp-deptcol{z-index:2}
:where(:root[data-page="hours-pivot"]) .hp-table tfoot td{z-index:3}
:where(:root[data-page="hours-pivot"]) .hp-table tfoot td.hp-deptcol{z-index:4}
:where(:root[data-page="hours-pivot"]) .hp-table thead tr.hp-hr1 th.hp-deptcol{
  background:var(--nx-rail);top:0;left:0;z-index:12
}

/* Body */
:where(:root[data-page="hours-pivot"]) .hp-table tbody td{
  padding:7px 12px;font-size:12px;color:var(--nx-ink2);text-align:right;
  border-bottom:1px solid var(--nx-line)
}
:where(:root[data-page="hours-pivot"]) .hp-table tbody td.hp-first{border-left:2px solid var(--nx-line2)}
:where(:root[data-page="hours-pivot"]) .hp-row-dept{cursor:pointer}
:where(:root[data-page="hours-pivot"]) .hp-row-dept:hover td{background:var(--nx-hover)}
:where(:root[data-page="hours-pivot"]) .hp-row-dept:hover td.hp-deptcol{background:var(--nx-hover)}
:where(:root[data-page="hours-pivot"]) .hp-dept-name{display:flex;align-items:center;gap:7px;font-weight:600;color:var(--nx-ink);overflow:hidden}
:where(:root[data-page="hours-pivot"]) .hp-dept-name span.t{overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="hours-pivot"]) .hp-chev{width:13px;height:13px;flex:0 0 auto;color:var(--nx-ink3);transition:transform .15s}
:where(:root[data-page="hours-pivot"]) .hp-row-dept.open .hp-chev{transform:rotate(90deg)}
:where(:root[data-page="hours-pivot"]) .hp-cc{font-size:10.5px;font-weight:700;color:var(--nx-ink3);background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:6px;padding:1px 5px;flex:0 0 auto}
:where(:root[data-page="hours-pivot"]) .hp-h{color:var(--nx-ink)}
:where(:root[data-page="hours-pivot"]) .hp-a{color:var(--nx-ink);font-weight:600}

/* Section band */
:where(:root[data-page="hours-pivot"]) .hp-grp{cursor:pointer}
:where(:root[data-page="hours-pivot"]) .hp-grp td{
  background:var(--nx-rail) !important;color:var(--nx-ink);
  font-size:12px;font-weight:700;padding:8px 12px;
  border-top:1px solid var(--nx-line2);border-bottom:1px solid var(--nx-line2)
}
:where(:root[data-page="hours-pivot"]) .hp-grp td.hp-deptcol{background:var(--nx-rail) !important;text-align:left}
:where(:root[data-page="hours-pivot"]) .hp-grp:hover td,:where(:root[data-page="hours-pivot"]) .hp-grp:hover td.hp-deptcol{background:var(--nx-hover) !important}
:where(:root[data-page="hours-pivot"]) .hp-grp-l{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--nx-ink3)
}
:where(:root[data-page="hours-pivot"]) .hp-gchev{width:12px;height:12px;flex:0 0 auto;color:var(--nx-ink3);transition:transform .15s}
:where(:root[data-page="hours-pivot"]) .hp-grp.open .hp-gchev{transform:rotate(90deg)}
:where(:root[data-page="hours-pivot"]) .hp-grp-n{font-size:9.5px;font-weight:700;color:var(--nx-ink3);letter-spacing:0;text-transform:none}

/* An open department and its pay codes read as one quiet block: a soft grey
   panel, a thin brand line down the left edge, no colour on the numbers. */
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-dept.open td{
  background:var(--nx-rail);border-bottom:1px solid var(--nx-line2)
}
/* The green edge and the row rule are BOTH drawn as inset shadows on this
   cell, with the green listed first so it paints over the rule. A plain
   border-bottom would cut a notch out of the green line at every row. */
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-dept.open td.hp-deptcol{
  background:var(--nx-rail);border-bottom:none;
  box-shadow:inset 2px 0 0 var(--brand), inset 0 -1px 0 var(--nx-line2)
}
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-dept.open td.hp-open-top{border-top:1px solid var(--nx-line2)}
:where(:root[data-page="hours-pivot"]) .hp-row-dept.open .hp-dept-name{color:var(--nx-ink)}
:where(:root[data-page="hours-pivot"]) .hp-row-dept.open .hp-chev{color:var(--brand)}
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-dept.open:hover td,
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-dept.open:hover td.hp-deptcol{background:var(--nx-hover)}

/* Code sub-rows: same panel, indented, each one ruled off from the next. */
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-code td{
  background:var(--nx-rail);font-size:11.5px;color:var(--nx-ink2);
  padding:5px 12px;border-bottom:1px solid var(--nx-line)
}
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-code td.hp-deptcol{
  background:var(--nx-rail);padding-left:30px;border-bottom:none;
  box-shadow:inset 2px 0 0 var(--brand), inset 0 -1px 0 var(--nx-line)
}
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-code:hover td{background:var(--nx-hover)}
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-code:hover td.hp-deptcol{background:var(--nx-hover)}
/* Close the panel off under the last code row. */
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-code.last td{border-bottom:2px solid var(--nx-line2);padding-bottom:7px}
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-code.last td.hp-deptcol{
  border-bottom:none;
  box-shadow:inset 2px 0 0 var(--brand), inset 0 -2px 0 var(--nx-line2)
}
/* The change figures read the same on a code line as on the department line -
   same colours, same weight, so a sub-line's movement is just as easy to spot. */
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-code .hp-d .v{font-size:11.5px;font-weight:700}
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-code .hp-d .p{font-size:10px;opacity:.85}
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-code .hp-h{color:var(--nx-ink2)}
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-code .hp-a{color:var(--nx-ink);font-weight:600}
/* A faint guide line so the indent reads as "belongs to the row above". */
:where(:root[data-page="hours-pivot"]) .hp-code-name{position:relative;padding-left:12px}
:where(:root[data-page="hours-pivot"]) .hp-code-name::before{
  content:'';position:absolute;left:0;top:50%;width:6px;height:1px;
  background:var(--nx-line2)
}
:where(:root[data-page="hours-pivot"]) .hp-code-name{display:flex;align-items:center;gap:7px}
:where(:root[data-page="hours-pivot"]) .hp-bk{font-size:9.5px;font-weight:700;letter-spacing:.03em;border-radius:5px;padding:1px 6px;text-transform:uppercase}
:where(:root[data-page="hours-pivot"]) .hp-bk.reg{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="hours-pivot"]) .hp-bk.ot{background:var(--nx-down-bg);color:var(--nx-down)}
:where(:root[data-page="hours-pivot"]) .hp-bk.bonus{background:var(--nx-attn-bg);color:var(--nx-attn)}
:where(:root[data-page="hours-pivot"]) .hp-bk.other{background:var(--nx-line);color:var(--nx-ink3)}

/* Delta cells: value on top, percent underneath */
:where(:root[data-page="hours-pivot"]) .hp-d{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
:where(:root[data-page="hours-pivot"]) .hp-d .v{font-size:11.5px;font-weight:700}
:where(:root[data-page="hours-pivot"]) .hp-d .p{font-size:10px;font-weight:600;opacity:.8}
:where(:root[data-page="hours-pivot"]) .hp-d.up{color:var(--nx-down)}      /* costs went up  */
:where(:root[data-page="hours-pivot"]) .hp-d.dn{color:var(--nx-up)}        /* costs came down */
:where(:root[data-page="hours-pivot"]) .hp-d.flat{color:var(--nx-ink3)}
:where(:root[data-page="hours-pivot"]) .hp-na{color:var(--nx-ink3);font-weight:400}

/* Partial-month styling */
:where(:root[data-page="hours-pivot"]) .hp-table thead th.hp-mhead.partial{color:var(--nx-attn)}
:where(:root[data-page="hours-pivot"]) .hp-table tbody td.hp-part,
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-dept.open td.hp-part,
:where(:root[data-page="hours-pivot"]) .hp-table tbody tr.hp-row-code td.hp-part,
:where(:root[data-page="hours-pivot"]) .hp-table tfoot td.hp-part{background:var(--nx-attn-bg)}
:where(:root[data-page="hours-pivot"]) .hp-chip{
  display:inline-flex;align-items:center;gap:4px;margin-left:6px;
  font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:var(--nx-attn-bg);color:var(--nx-attn);border:1px solid var(--nx-attn-line);
  border-radius:6px;padding:1px 6px;cursor:help
}
:where(:root[data-page="hours-pivot"]) .hp-chip svg{width:9px;height:9px}

/* Footer total row */
:where(:root[data-page="hours-pivot"]) .hp-table tfoot td{
  position:sticky;bottom:0;background:var(--nx-rail);
  padding:9px 12px;font-size:12px;font-weight:800;color:var(--nx-ink);
  border-top:2px solid var(--nx-line2);text-align:right
}
:where(:root[data-page="hours-pivot"]) .hp-table tfoot td.hp-deptcol{background:var(--nx-rail);text-align:left}
:where(:root[data-page="hours-pivot"]) .hp-table tfoot td.hp-first{border-left:2px solid var(--nx-line2)}

:where(:root[data-page="hours-pivot"]) .hp-empty,:where(:root[data-page="hours-pivot"]) .hp-loading{padding:38px 18px;text-align:center;color:var(--nx-ink3);font-size:13px}

/* Custom tooltip (never the browser's own) */
:where(:root[data-page="hours-pivot"]) .hp-tip{
  position:fixed;z-index:200;max-width:320px;background:var(--nx-elev);
  border:1px solid var(--nx-line2);border-radius:11px;
  box-shadow:0 16px 40px rgba(27,29,41,.20);padding:11px 13px;
  font-size:11.5px;line-height:1.5;color:var(--nx-ink2);
  display:none;pointer-events:none
}
:where(:root[data-page="hours-pivot"]) .hp-tip.show{display:block}
:where(:root[data-page="hours-pivot"]) .hp-tip b{color:var(--nx-ink);display:block;font-size:12px;margin-bottom:4px}
:where(:root[data-page="hours-pivot"]) .hp-tip .row{display:flex;justify-content:space-between;gap:14px;padding:1.5px 0}
:where(:root[data-page="hours-pivot"]) .hp-tip .row span:last-child{color:var(--nx-ink3);flex:0 0 auto}
:where(:root[data-page="hours-pivot"]) .hp-tip .note{margin-top:6px;padding-top:6px;border-top:1px solid var(--nx-line);color:var(--nx-ink3)}

/* ==== Embedded in the Payroll Dashboard frame ====
   Standalone this page owns its frame; inside the shell the shell owns it,
   so the rail, topbar, page title and facility picker all step aside. */
:where(:root[data-page="hours-pivot"]) body.embed{height:100%;min-height:0;overflow:hidden;background:var(--nx-surface)}
html.cr-embed:where([data-page="hours-pivot"]){height:100%;min-height:0;overflow:hidden;background:var(--nx-surface)}
:where(:root[data-page="hours-pivot"]) body.embed .nx-app{margin:0;border:none;border-radius:0;height:100%;min-height:0;max-width:none;grid-template-columns:1fr;grid-template-rows:100%;box-shadow:none;background:var(--nx-surface);overflow:hidden}
:where(:root[data-page="hours-pivot"]) body.embed .nx-main{min-height:0;height:100%;overflow:hidden}
:where(:root[data-page="hours-pivot"]) body.embed .nx-rail{display:none}
:where(:root[data-page="hours-pivot"]) body.embed .nx-topbar{display:none}
:where(:root[data-page="hours-pivot"]) body.embed .nx-scroll{padding:20px 22px 22px;position:relative}
:where(:root[data-page="hours-pivot"]) body.embed .nx-pagehead{display:none}
:where(:root[data-page="hours-pivot"]) body.embed #hpFacPick{display:none}
:where(:root[data-page="hours-pivot"]) body.embed .hp-toast{z-index:99999}

/* Toast */
:where(:root[data-page="hours-pivot"]) .hp-toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(14px);
  background:var(--nx-ink);color:#fff;font-size:12.5px;font-weight:600;
  padding:10px 16px;border-radius:11px;box-shadow:0 14px 34px rgba(0,0,0,.25);
  opacity:0;transition:opacity .18s,transform .18s;z-index:300;pointer-events:none
}
:where(:root[data-page="hours-pivot"]) .hp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
:where(:root[data-page="hours-pivot"]) .hp-toast.err{background:var(--nx-down)}


/* ----------------------------------------------------------------------------
 * 15.27  AP -- Emails
 * ap/emails.php, data-page="emails"
 * -------------------------------------------------------------------------- */
/* ---------- Nexus shell ---------- */
:root:where([data-page="emails"]){
  --brand:var(--blue);--brand-lt:var(--blue-lt);
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="emails"]){
  --brand:#1FB866;--brand-lt:#13361F;color-scheme:dark;
}
:where(:root[data-page="emails"]) *, *:where([data-page="emails"]){box-sizing:border-box}
html:where([data-page="emails"]),:where(:root[data-page="emails"]) body{height:100%;margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px}
:where(:root[data-page="emails"]) button{font-family:inherit}
:where(:root[data-page="emails"]) .nx-app{display:grid;grid-template-columns:248px 1fr;height:100vh;width:100%;max-width:none;margin:0;background:var(--nx-surface);border-radius:0;overflow:hidden;box-shadow:none;border:none}
@media(max-width:980px){:where(:root[data-page="emails"]) .nx-app{grid-template-columns:1fr}}
:where(:root[data-page="emails"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px;overflow:auto}
@media(max-width:980px){:where(:root[data-page="emails"]) .nx-rail{display:none}}
:where(:root[data-page="emails"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="emails"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#04a85a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
:where(:root[data-page="emails"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="emails"]) .nx-navsec{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--nx-ink3);padding:14px 8px 6px}
:where(:root[data-page="emails"]) .nx-nav{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--nx-ink2);font-weight:500;font-size:13px;border:0;background:none;width:100%;text-align:left;cursor:pointer}
:where(:root[data-page="emails"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="emails"]) .nx-nav.active,:where(:root[data-page="emails"]) .nx-nav.on{background:var(--brand-lt);color:var(--brand);font-weight:600}
:where(:root[data-page="emails"]) .nx-nav svg{width:16px;height:16px;flex:none}
:where(:root[data-page="emails"]) .nx-nav .ct{margin-left:auto;font-size:11px;background:var(--nx-hover);border:1px solid var(--nx-line2);padding:1px 7px;border-radius:10px;color:var(--nx-ink3)}
:where(:root[data-page="emails"]) .nx-nav.active .ct,:where(:root[data-page="emails"]) .nx-nav.on .ct{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="emails"]) .nx-rail-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--nx-line);display:flex;flex-direction:column;gap:8px}
:where(:root[data-page="emails"]) .nx-main{display:flex;flex-direction:column;min-width:0;min-height:0}
:where(:root[data-page="emails"]) .nx-topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--nx-line);flex:none}

/* -- Inside the AP frame: the frame draws the sidebar and the top bar, so
      this page is only its content, edge to edge. The rail and the top bar
      stay in the markup -- the frame reads the tabs and the buttons out of
      them and clicks them back here -- they are simply not shown. -- */
html.mbx-embed:where([data-page="emails"]) .nx-app{grid-template-columns:minmax(0,1fr)}
html.mbx-embed:where([data-page="emails"]) .nx-rail,
html.mbx-embed:where([data-page="emails"]) .nx-topbar{display:none}
:where(:root[data-page="emails"]) .nx-top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
:where(:root[data-page="emails"]) .nx-theme-btn{border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:9px;width:34px;height:34px;cursor:pointer;color:var(--nx-ink2);display:flex;align-items:center;justify-content:center}
:where(:root[data-page="emails"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="emails"]) .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="emails"]) .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="emails"]) .nx-ic-moon{display:block}
:where(:root[data-page="emails"]) .nx-user-av{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
:where(:root[data-page="emails"]) .nx-scroll{overflow:auto;flex:1;min-height:0}
:where(:root[data-page="emails"]) .nx-syncdot{font-size:11.5px;color:var(--nx-ink3);display:flex;align-items:center;gap:6px}
:where(:root[data-page="emails"]) .nx-syncdot i{width:7px;height:7px;border-radius:50%;background:var(--brand);display:block}

/* ---------- tool styles (scoped, dark-navy chrome removed) ---------- */

:root:where([data-page="emails"]){
  --bg:#eef1f5;
  --canvas:#f7f9fb;
  --card:#ffffff;
  --ink:#1a2330;
  --ink-2:#46566b;
  --ink-3:#7d8da0;
  --ink-4:#a8b5c4;
  --line:#dde3ea;
  --line-2:#e8edf2;
  --accent:#0e7c66;
  --accent-soft:#e4f3ef;
  --accent-deep:#0a5c4b;
  --amber:#b5781a;
  --amber-soft:#fbf2e2;
  --rust:#c0492f;
  --rust-soft:#fbe9e4;
  --sidebar:#16202e;
  --sidebar-ink:#9fb0c4;
  --sidebar-active:#0e7c66;
  --shadow:0 1px 2px rgba(16,30,48,.04),0 4px 16px rgba(16,30,48,.06);
  --shadow-lg:0 8px 30px rgba(16,30,48,.12);
  --mono:var(--nx-font);
  --sans:var(--nx-font);
  --r:10px;
}
:where(:root[data-page="emails"]) *, *:where([data-page="emails"]){box-sizing:border-box;margin:0;padding:0}
:where(:root[data-page="emails"]) *::-webkit-scrollbar, *:where([data-page="emails"])::-webkit-scrollbar{width:10px;height:10px}
:where(:root[data-page="emails"]) *::-webkit-scrollbar-track, *:where([data-page="emails"])::-webkit-scrollbar-track{background:transparent}
:where(:root[data-page="emails"]) *::-webkit-scrollbar-thumb, *:where([data-page="emails"])::-webkit-scrollbar-thumb{background:var(--ink-4);border-radius:6px;border:2px solid var(--card)}
:where(:root[data-page="emails"]) *::-webkit-scrollbar-thumb:hover, *:where([data-page="emails"])::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
/* scrollbar-width:thin disables ::-webkit-scrollbar styling in Chrome,
   so scope it to Firefox only. */
@supports (-moz-appearance:none){
  :where(:root[data-page="emails"]) *, *:where([data-page="emails"]){scrollbar-width:thin;scrollbar-color:var(--ink-4) transparent}
}
html:where([data-page="emails"]),:where(:root[data-page="emails"]) body{height:100%}
/* Portal build: the tool's original rules made BODY the app shell
   (display:flex; overflow:hidden; height:100%). Those come after the Nexus
   rules above and were overriding them -- body turned into a flex row, which
   squeezed .nx-app and collapsed every panel to zero height. Keep only the
   typography here and let the Nexus shell own the layout. */
:where(:root[data-page="emails"]) body{
  color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}

/* ---------- sidebar ---------- */
:where(:root[data-page="emails"]) .side{
  width:230px;flex-shrink:0;background:var(--sidebar);color:var(--sidebar-ink);
  display:flex;flex-direction:column;height:100vh;
}
:where(:root[data-page="emails"]) .brand{padding:22px 22px 18px;border-bottom:1px solid rgba(255,255,255,.06)}
:where(:root[data-page="emails"]) .brand .logo{display:flex;align-items:center;gap:10px}
:where(:root[data-page="emails"]) .brand .dot{width:22px;height:22px;border-radius:6px;
  background:linear-gradient(135deg,var(--accent),#16a888);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12px;color:#06241d}
:where(:root[data-page="emails"]) .brand .name{color:#fff;font-weight:600;font-size:15px;letter-spacing:-.01em}
:where(:root[data-page="emails"]) .brand .sub{color:var(--ink-4);font-size:11px;margin-top:3px;letter-spacing:.02em}
:where(:root[data-page="emails"]) .nav{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:2px}
:where(:root[data-page="emails"]) .nav-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:#5d6f86;padding:14px 12px 6px;font-weight:600;font-family:var(--sans)}
:where(:root[data-page="emails"]) .nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;
  color:var(--sidebar-ink);cursor:pointer;font-size:13.5px;font-weight:450;font-family:var(--sans);
  transition:background .13s,color .13s;border:none;background:none;width:100%;text-align:left}
:where(:root[data-page="emails"]) .nav-item:hover{background:rgba(255,255,255,.05);color:#dfe7f0}
:where(:root[data-page="emails"]) .nav-item.on{background:var(--sidebar-active);color:#fff;font-weight:500}
:where(:root[data-page="emails"]) .nav-item .ic{width:17px;height:17px;flex-shrink:0;opacity:.9}
:where(:root[data-page="emails"]) .nav-item .ct{margin-left:auto;font-size:11px;font-family:var(--mono);
  background:rgba(255,255,255,.08);padding:1px 7px;border-radius:10px;color:var(--ink-4)}
:where(:root[data-page="emails"]) .nav-item.on .ct{background:rgba(255,255,255,.18);color:#dff0eb}
:where(:root[data-page="emails"]) .side-foot{padding:14px 14px 16px;border-top:1px solid rgba(255,255,255,.06)}
:where(:root[data-page="emails"]) .side-ps{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(255,255,255,.08);color:#dfe7f0;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:10px;
  font-family:var(--sans);font-size:13px;font-weight:500;cursor:pointer;transition:.13s;margin-bottom:8px}
:where(:root[data-page="emails"]) .side-ps:hover{background:rgba(255,255,255,.14)}
:where(:root[data-page="emails"]) .side-ps.done{background:var(--accent);color:#fff;border-color:var(--accent)}
:where(:root[data-page="emails"]) .side-run{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#fff;border:none;border-radius:9px;padding:11px;
  font-family:var(--sans);font-size:13.5px;font-weight:600;cursor:pointer;transition:.13s;margin-bottom:12px}
:where(:root[data-page="emails"]) .side-run:hover{background:#16a888}
:where(:root[data-page="emails"]) .side-run.busy{background:var(--amber);cursor:wait}
:where(:root[data-page="emails"]) .side-note{font-size:11px;color:#5d6f86;line-height:1.5;padding:0 4px}

/* ---------- main ---------- */
/* Portal build: the Nexus frame owns the height and the scrolling, so this is
   a plain block. (Standalone it was a full-height flex column with its own
   scroller -- that produced a second scrollbar and a collapsed column here.) */
:where(:root[data-page="emails"]) .main{display:block;height:auto;overflow:visible}
:where(:root[data-page="emails"]) .topbar{background:var(--card);border-bottom:1px solid var(--line);
  padding:13px 26px;display:flex;align-items:center;gap:16px}
:where(:root[data-page="emails"]) .topbar .connect-wrap{flex:1;display:flex;align-items:center;gap:11px;
  background:var(--canvas);border:1px solid var(--line);border-radius:9px;padding:6px 8px 6px 14px}
:where(:root[data-page="emails"]) .topbar .connect-lbl{font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap}
:where(:root[data-page="emails"]) .topbar code{flex:1;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="emails"]) .scroll{overflow:visible;padding:22px 26px 40px}
/* renamed from `.page`: portal.css also defines .page (display:none),
   which was hiding every tab panel inside it. */
:where(:root[data-page="emails"]) .mbx-page{max-width:none;width:100%;margin:0;display:block}
:where(:root[data-page="emails"]) .page-head{margin-bottom:18px}
:where(:root[data-page="emails"]) .page-head h1{font-size:21px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
:where(:root[data-page="emails"]) .page-head p{color:var(--ink-3);font-size:13px;margin-top:3px}

/* ---------- cards / panels ---------- */
:where(:root[data-page="emails"]) .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:20px;margin-bottom:16px}
:where(:root[data-page="emails"]) .card-title{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px;display:flex;align-items:center;gap:8px}
:where(:root[data-page="emails"]) .card-title .hint{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-4);font-size:11px}
:where(:root[data-page="emails"]) .field{margin-bottom:14px}
:where(:root[data-page="emails"]) .field:last-child{margin-bottom:0}
:where(:root[data-page="emails"]) label{display:block;font-size:12px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
:where(:root[data-page="emails"]) .row{display:flex;gap:14px;flex-wrap:wrap}
:where(:root[data-page="emails"]) .row>.field{flex:1;min-width:200px}

:where(:root[data-page="emails"]) input[type=text],:where(:root[data-page="emails"]) input[type=date],:where(:root[data-page="emails"]) input[type=time],:where(:root[data-page="emails"]) textarea,:where(:root[data-page="emails"]) select{
  width:100%;background:var(--canvas);border:1px solid var(--line);color:var(--ink);
  font-family:var(--sans);font-size:13.5px;padding:9px 12px;border-radius:8px;transition:border .12s,box-shadow .12s}
:where(:root[data-page="emails"]) input[type=text].mono{font-family:var(--mono);font-size:13px}
:where(:root[data-page="emails"]) .run-stat{font-size:12px;color:var(--ink-3);margin-left:auto}
:where(:root[data-page="emails"]) .run-bar{height:6px;background:var(--line-2);border-radius:4px;overflow:hidden;margin:8px 0}
:where(:root[data-page="emails"]) .run-bar-fill{height:100%;background:var(--accent);width:0;transition:width .3s}
:where(:root[data-page="emails"]) .timesel{width:auto;min-width:64px;padding:9px 8px}
/* custom date picker */
:where(:root[data-page="emails"]) .datepick{position:relative}
:where(:root[data-page="emails"]) .date-disp{cursor:pointer;padding-right:36px!important}
:where(:root[data-page="emails"]) .date-ic{position:absolute;right:11px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  color:var(--ink-3);pointer-events:none}
:where(:root[data-page="emails"]) .cal{position:absolute;top:calc(100% + 6px);left:0;z-index:80;width:266px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:12px;display:none}
:where(:root[data-page="emails"]) .cal.show{display:block}
:where(:root[data-page="emails"]) .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
:where(:root[data-page="emails"]) .cal-title{font-size:13.5px;font-weight:600;color:var(--ink)}
:where(:root[data-page="emails"]) .cal-nav{border:none;background:none;cursor:pointer;color:var(--ink-2);border-radius:7px;
  width:28px;height:28px;font-size:16px;line-height:1;transition:.12s;display:flex;align-items:center;justify-content:center}
:where(:root[data-page="emails"]) .cal-nav:hover{background:var(--canvas);color:var(--ink)}
:where(:root[data-page="emails"]) .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
:where(:root[data-page="emails"]) .cal-dow{font-size:10.5px;font-weight:600;color:var(--ink-4);text-align:center;padding:4px 0;text-transform:uppercase}
:where(:root[data-page="emails"]) .cal-day{border:none;background:none;cursor:pointer;border-radius:7px;height:32px;font-size:12.5px;
  color:var(--ink);font-family:var(--sans);transition:.1s}
:where(:root[data-page="emails"]) .cal-day:hover{background:var(--accent-soft);color:var(--accent)}
:where(:root[data-page="emails"]) .cal-day.empty{visibility:hidden}
:where(:root[data-page="emails"]) .cal-day.today{font-weight:700;box-shadow:inset 0 0 0 1px var(--line)}
:where(:root[data-page="emails"]) .cal-day.sel{background:var(--accent);color:#fff;font-weight:600}
:where(:root[data-page="emails"]) .cal-day.sel:hover{background:var(--accent);color:#fff}
:where(:root[data-page="emails"]) .cal-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line-2)}
:where(:root[data-page="emails"]) .cal-foot button{border:none;background:none;cursor:pointer;font-size:12px;color:var(--accent);
  font-weight:600;padding:4px 8px;border-radius:6px;font-family:var(--sans)}
:where(:root[data-page="emails"]) .cal-foot button:hover{background:var(--accent-soft)}
:where(:root[data-page="emails"]) textarea{resize:vertical;min-height:62px;line-height:1.55}
:where(:root[data-page="emails"]) .rte{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--card)}
:where(:root[data-page="emails"]) .rte-bar{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid var(--line-2);background:var(--canvas)}
:where(:root[data-page="emails"]) .rte-bar button{border:none;background:none;cursor:pointer;border-radius:6px;padding:5px 9px;
  font-size:13px;color:var(--ink-2);min-width:30px;transition:.12s;font-family:var(--sans)}
:where(:root[data-page="emails"]) .rte-bar button:hover{background:var(--accent-soft);color:var(--accent)}
:where(:root[data-page="emails"]) .rte-bar button.on{background:var(--accent-soft);color:var(--accent)}
:where(:root[data-page="emails"]) .rte-area{min-height:90px;padding:11px 13px;font-size:13.5px;line-height:1.55;color:var(--ink);
  outline:none;overflow-y:auto;max-height:240px}
:where(:root[data-page="emails"]) .rte-area:empty:before{content:attr(data-placeholder);color:var(--ink-4)}
:where(:root[data-page="emails"]) .rte-area a{color:var(--accent)}
:where(:root[data-page="emails"]) .rte-area ul{margin:6px 0 6px 22px}
:where(:root[data-page="emails"]) input:focus,:where(:root[data-page="emails"]) textarea:focus,:where(:root[data-page="emails"]) select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
:where(:root[data-page="emails"]) select{cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237d8da0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}

/* segmented */
:where(:root[data-page="emails"]) .seg{display:inline-flex;background:var(--canvas);border:1px solid var(--line);
  border-radius:8px;padding:3px;gap:2px}
:where(:root[data-page="emails"]) .seg button{border:none;background:none;color:var(--ink-2);font-family:var(--sans);
  font-size:12.5px;font-weight:500;padding:6px 13px;border-radius:6px;cursor:pointer;transition:.12s}
:where(:root[data-page="emails"]) .seg button:hover{color:var(--ink)}
:where(:root[data-page="emails"]) .seg button.on{background:var(--card);color:var(--accent);box-shadow:var(--shadow)}

/* checkboxes */
:where(:root[data-page="emails"]) .check{display:flex;align-items:flex-start;gap:10px;padding:7px 0;cursor:pointer;font-size:13.5px}
:where(:root[data-page="emails"]) .check input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
:where(:root[data-page="emails"]) .check .ct{color:var(--ink)}
:where(:root[data-page="emails"]) .check .ct small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:1px}

/* buttons */
:where(:root[data-page="emails"]) .btn{border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-family:var(--sans);font-size:13px;font-weight:500;padding:8px 15px;border-radius:8px;
  cursor:pointer;transition:.12s;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
:where(:root[data-page="emails"]) .btn:hover{border-color:var(--ink-4);background:var(--canvas)}
:where(:root[data-page="emails"]) .btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
:where(:root[data-page="emails"]) .btn.accent:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
:where(:root[data-page="emails"]) .btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
:where(:root[data-page="emails"]) .btn.ghost:hover{background:var(--canvas);color:var(--ink)}
:where(:root[data-page="emails"]) .btn.sm{padding:6px 11px;font-size:12px}
:where(:root[data-page="emails"]) .btn.done{background:var(--amber);border-color:var(--amber);color:#fff}

:where(:root[data-page="emails"]) .divider{height:1px;background:var(--line-2);margin:18px 0}
:where(:root[data-page="emails"]) .subhead{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--amber);margin-bottom:12px}

/* ---------- directory (command palette) ---------- */
:where(:root[data-page="emails"]) .dir-card{padding:0;overflow:hidden}
:where(:root[data-page="emails"]) .dir-top{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line-2)}
:where(:root[data-page="emails"]) .dir-top .ti{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
:where(:root[data-page="emails"]) .dir-search{flex:1;min-width:140px;padding:8px 12px;font-size:13px}
:where(:root[data-page="emails"]) .dir-client{width:auto;min-width:128px;padding:8px 10px;font-size:12.5px}
:where(:root[data-page="emails"]) .dir-list{max-height:230px;overflow-y:auto}
:where(:root[data-page="emails"]) .dir-row{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center;
  padding:9px 16px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--line-2);transition:background .1s}
:where(:root[data-page="emails"]) .dir-row:last-child{border-bottom:none}
:where(:root[data-page="emails"]) .dir-row:hover{background:var(--accent-soft)}
:where(:root[data-page="emails"]) .dir-row .e{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
:where(:root[data-page="emails"]) .dir-row .cl{font-size:11.5px;color:var(--ink-3);min-width:58px;text-align:right}
:where(:root[data-page="emails"]) .dir-row .cl.none{color:var(--ink-4)}
:where(:root[data-page="emails"]) .pill{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:20px}
:where(:root[data-page="emails"]) .pill.ap{background:var(--accent-soft);color:var(--accent-deep)}
:where(:root[data-page="emails"]) .pill.invoices{background:var(--amber-soft);color:var(--amber)}
:where(:root[data-page="emails"]) .pill.rep{background:var(--line-2);color:var(--ink-2)}
:where(:root[data-page="emails"]) .dir-row .r{font-size:12px;color:var(--ink-2);min-width:96px;text-align:right}
:where(:root[data-page="emails"]) .dir-row .r.none{color:var(--ink-4);font-style:italic}
:where(:root[data-page="emails"]) .dir-foot{display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:var(--canvas);border-top:1px solid var(--line-2);font-size:12px;color:var(--ink-3)}
:where(:root[data-page="emails"]) .dir-foot .target{color:var(--ink-2)}
:where(:root[data-page="emails"]) .dir-foot .target b{color:var(--accent);font-weight:600}
:where(:root[data-page="emails"]) .dir-empty{padding:26px;text-align:center;color:var(--ink-4);font-style:italic;font-size:13px}

/* ---------- chips ---------- */
:where(:root[data-page="emails"]) .chipfield{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  background:var(--canvas);border:1px solid var(--line);border-radius:8px;padding:8px;min-height:46px}
:where(:root[data-page="emails"]) .chipfield:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
:where(:root[data-page="emails"]) .mchip{display:flex;align-items:center;gap:8px;background:var(--accent-soft);
  border:1px solid #bfe3da;border-radius:7px;padding:4px 5px 4px 11px;font-family:var(--mono);font-size:12.5px;color:var(--accent-deep)}
:where(:root[data-page="emails"]) .mchip .x{cursor:pointer;color:var(--accent);width:18px;height:18px;display:flex;
  align-items:center;justify-content:center;border-radius:5px;font-size:15px;line-height:1;
  background:rgba(14,124,102,.1);transition:.12s}
:where(:root[data-page="emails"]) .mchip .x:hover{background:var(--rust);color:#fff}
:where(:root[data-page="emails"]) .imgnote{display:none;margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--amber);
  background:var(--amber-soft);border:1px solid #f0dcb0;border-radius:8px;padding:7px 10px}
:where(:root[data-page="emails"]) .imgnote.show{display:block}
:where(:root[data-page="emails"]) .mchip.inv{background:var(--amber-soft);border-color:#f0dcb0;color:var(--amber)}
:where(:root[data-page="emails"]) .mchip.inv .x{color:var(--amber);background:rgba(180,130,20,.12)}
:where(:root[data-page="emails"]) .mchip.inv .x:hover{background:var(--rust);color:#fff}
:where(:root[data-page="emails"]) .chip-in{flex:1;min-width:200px;border:none;background:transparent;font-family:var(--mono);
  font-size:13px;padding:5px 4px;color:var(--ink)}
:where(:root[data-page="emails"]) .chip-in:focus{outline:none;box-shadow:none}
:where(:root[data-page="emails"]) .ac-wrap{position:relative}
:where(:root[data-page="emails"]) .ac-box{display:none;position:absolute;z-index:60;left:0;right:0;top:calc(100% + 4px);
  max-height:280px;overflow:auto;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.14)}
:where(:root[data-page="emails"]) .ac-row{display:flex;align-items:center;gap:8px;padding:7px 11px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--line)}
:where(:root[data-page="emails"]) .ac-row:last-child{border-bottom:none}
:where(:root[data-page="emails"]) .ac-row.on{background:var(--accent-soft)}
:where(:root[data-page="emails"]) .ac-row .e{font-family:var(--mono);font-size:12.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="emails"]) .ac-meta{font-size:11.5px;color:var(--ink-3);flex-shrink:0}
:where(:root[data-page="emails"]) .chip-meta{display:flex;align-items:center;justify-content:space-between;margin-top:7px}
:where(:root[data-page="emails"]) .chip-meta .ct{font-size:12px;color:var(--ink-3)}

/* ---------- output preview ---------- */
:where(:root[data-page="emails"]) .preview{margin-top:16px}
:where(:root[data-page="emails"]) .preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
:where(:root[data-page="emails"]) .preview-head .ti{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
:where(:root[data-page="emails"]) .preview-head .acts{display:flex;gap:8px}
:where(:root[data-page="emails"]) pre{background:var(--sidebar);border-radius:var(--r);padding:16px 18px;overflow-x:auto;
  font-family:var(--mono);font-size:12.5px;line-height:1.65;color:#cfe0d9;white-space:pre-wrap;word-break:break-word;
  min-height:54px;max-height:230px;overflow-y:auto}
:where(:root[data-page="emails"]) pre .cmd{color:#7fe3c6}
:where(:root[data-page="emails"]) pre .par{color:#e7c87f}
:where(:root[data-page="emails"]) pre .str{color:#d8e09a}
:where(:root[data-page="emails"]) pre .cmt{color:#5d7286;font-style:italic}
:where(:root[data-page="emails"]) pre .empty{color:#5d7286;font-style:italic}

/* ---------- reps tab ---------- */
:where(:root[data-page="emails"]) .rep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:10px}
:where(:root[data-page="emails"]) .rep-card{display:flex;align-items:center;gap:11px;background:var(--canvas);
  border:1px solid var(--line);border-radius:9px;padding:11px 13px}
:where(:root[data-page="emails"]) .rep-card .av{width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),#16a888);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
:where(:root[data-page="emails"]) .rep-card .info{flex:1;min-width:0}
:where(:root[data-page="emails"]) .rep-card .rn{font-weight:500;font-size:13.5px;color:var(--ink)}
:where(:root[data-page="emails"]) .rep-card .re{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="emails"]) .rep-card .cnt{font-size:11px;color:var(--ink-4);margin-top:1px}
:where(:root[data-page="emails"]) .rep-card .del{opacity:0;border:none;background:none;color:var(--ink-4);cursor:pointer;
  font-size:17px;padding:2px 6px;border-radius:6px;transition:.12s}
:where(:root[data-page="emails"]) .rep-card:hover .del{opacity:1}
:where(:root[data-page="emails"]) .rep-card .del:hover{background:var(--rust-soft);color:var(--rust)}
:where(:root[data-page="emails"]) .add-rep{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;padding-top:16px;border-top:1px solid var(--line-2)}
:where(:root[data-page="emails"]) .add-rep input{flex:1;min-width:150px}

/* ---------- assign tab ---------- */
:where(:root[data-page="emails"]) .bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
:where(:root[data-page="emails"]) .bulk-bar select{width:auto;min-width:210px}
:where(:root[data-page="emails"]) .bulk-info{font-size:12.5px;color:var(--accent);font-weight:500}
:where(:root[data-page="emails"]) .quick{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--ink-3);margin-bottom:14px}
:where(:root[data-page="emails"]) .chip-btn{border:1px solid var(--line);background:var(--card);color:var(--ink-2);
  font-size:12px;padding:5px 12px;border-radius:16px;cursor:pointer;transition:.12s;font-weight:500}
:where(:root[data-page="emails"]) .chip-btn:hover{border-color:var(--accent);color:var(--accent)}
:where(:root[data-page="emails"]) .chip-btn.client{border-color:#cfe6df}
:where(:root[data-page="emails"]) .filter-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
:where(:root[data-page="emails"]) .filter-bar input{flex:1;min-width:180px}
:where(:root[data-page="emails"]) .fac-list{border:1px solid var(--line);border-radius:9px;overflow:hidden;max-height:460px;overflow-y:auto}
:where(:root[data-page="emails"]) .em-row{display:grid;grid-template-columns:1fr 90px 130px 110px 40px;gap:14px;align-items:center;
  padding:10px 15px;border-bottom:1px solid var(--line-2);background:var(--card)}
:where(:root[data-page="emails"]) .em-row:last-child{border-bottom:none}
:where(:root[data-page="emails"]) .em-row:hover{background:var(--canvas)}
:where(:root[data-page="emails"]) .em-row .eml{font-family:var(--sans);font-size:13px;color:var(--ink)}
:where(:root[data-page="emails"]) .em-row .alt{font-size:12.5px;color:var(--ink-2)}
:where(:root[data-page="emails"]) .em-row .cli{font-size:12px;color:var(--ink-3)}
:where(:root[data-page="emails"]) .em-row .del{border:none;background:none;color:var(--ink-4);cursor:pointer;font-size:18px;
  border-radius:6px;padding:2px 8px;transition:.12s}
:where(:root[data-page="emails"]) .em-row .del:hover{background:var(--rust-soft);color:var(--rust)}
:where(:root[data-page="emails"]) .fac-row{display:grid;grid-template-columns:24px minmax(180px,1fr) 90px 230px 200px;gap:16px;align-items:center;
  padding:11px 15px;border-bottom:1px solid var(--line-2);background:var(--card);transition:background .1s}
:where(:root[data-page="emails"]) .fac-row:last-child{border-bottom:none}
:where(:root[data-page="emails"]) .fac-row:hover{background:var(--canvas)}
:where(:root[data-page="emails"]) .fac-row.mismatch{background:var(--amber-soft)}
:where(:root[data-page="emails"]) .fac-row.mismatch:hover{background:#f7ecd6}
:where(:root[data-page="emails"]) .fac-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
:where(:root[data-page="emails"]) .fac-name{font-weight:500;font-size:13.5px;color:var(--ink);min-width:0}
:where(:root[data-page="emails"]) .fac-name small{display:block;font-size:10.5px;color:var(--ink-4);margin-top:1px;font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="emails"]) .fac-client{font-size:12px;color:var(--ink-3)}
:where(:root[data-page="emails"]) .fac-state{font-size:11.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:3px}
:where(:root[data-page="emails"]) .fac-state .row-s{display:flex;gap:8px;align-items:center}
:where(:root[data-page="emails"]) .fac-state .tag{flex-shrink:0;width:34px;text-align:center;font-size:9px;font-weight:600;letter-spacing:.04em;
  padding:2px 0;border-radius:4px;text-transform:uppercase}
:where(:root[data-page="emails"]) .fac-state .tag.ap{background:var(--accent-soft);color:var(--accent-deep)}
:where(:root[data-page="emails"]) .fac-state .tag.inv{background:var(--amber-soft);color:var(--amber)}
:where(:root[data-page="emails"]) .fac-state .who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="emails"]) .fac-state .who.none{color:var(--rust);font-style:italic}
:where(:root[data-page="emails"]) .fac-state .who.split{color:var(--amber);font-weight:600}
:where(:root[data-page="emails"]) .fac-row select{font-size:12.5px;padding:7px 10px;width:100%}
:where(:root[data-page="emails"]) .fac-row.xrow{grid-template-columns:24px minmax(180px,1fr) 140px 200px;cursor:pointer}

/* toast */
:where(:root[data-page="emails"]) .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--sidebar);color:#fff;padding:11px 20px;border-radius:9px;font-size:13px;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.25s;z-index:50;
  display:flex;align-items:center;gap:9px}
:where(:root[data-page="emails"]) .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
:where(:root[data-page="emails"]) .toast .dot{width:7px;height:7px;border-radius:50%;background:#5fe3c6}

:where(:root[data-page="emails"]) .tabpane{display:none}
:where(:root[data-page="emails"]) .dirmodal{position:fixed;inset:0;background:rgba(16,30,48,.45);display:none;
  align-items:center;justify-content:center;z-index:90;padding:30px}
:where(:root[data-page="emails"]) .dirmodal.show{display:flex}
:where(:root[data-page="emails"]) .dirmodal-box{background:var(--card);border-radius:14px;width:100%;max-width:760px;
  max-height:82vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);overflow:hidden}
:where(:root[data-page="emails"]) .dirmodal-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line-2)}
:where(:root[data-page="emails"]) .dirmodal-head .ti{font-size:14px;font-weight:600;color:var(--ink)}
:where(:root[data-page="emails"]) .dirmodal-head .ti b{color:var(--accent)}
:where(:root[data-page="emails"]) .dirmodal-x{border:none;background:none;font-size:24px;line-height:1;color:var(--ink-3);
  cursor:pointer;border-radius:8px;padding:0 8px;transition:.12s}
:where(:root[data-page="emails"]) .dirmodal-x:hover{background:var(--canvas);color:var(--ink)}
:where(:root[data-page="emails"]) .dirmodal .dir-list{flex:1;overflow-y:auto;max-height:none}
:where(:root[data-page="emails"]) .devcode{position:fixed;inset:0;background:rgba(16,30,48,.45);display:none;
  align-items:center;justify-content:center;z-index:100}
:where(:root[data-page="emails"]) .devcode.show{display:flex}
:where(:root[data-page="emails"]) .devcode-box{background:var(--card);border-radius:14px;padding:28px 32px;max-width:430px;
  box-shadow:var(--shadow-lg);text-align:center}
:where(:root[data-page="emails"]) .devcode-title{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:14px}
:where(:root[data-page="emails"]) .devcode-step{font-size:13px;color:var(--ink-2);margin:8px 0;text-align:left}
:where(:root[data-page="emails"]) .devcode-code{font-family:var(--mono);font-size:26px;font-weight:700;letter-spacing:.12em;
  color:var(--accent);background:var(--accent-soft);border-radius:10px;padding:14px;margin:10px 0}
:where(:root[data-page="emails"]) .spinner{display:inline-block;width:26px;height:26px;border:3px solid var(--accent-soft);
  border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
:where(:root[data-page="emails"]) .tabpane.on{display:block}
:where(:root[data-page="emails"]) .lbl-hint{font-weight:400;color:var(--ink-4);font-size:11.5px}

:where(:root[data-page="emails"]) .rep-note{margin-top:14px;padding:11px 13px;border:1px solid var(--nx-line2);
  background:var(--nx-hover);border-radius:9px;color:var(--nx-ink2);
  font-size:12.5px;line-height:1.55}
:where(:root[data-page="emails"]) .rep-note strong{color:var(--nx-ink);font-weight:600}


/* ----------------------------------------------------------------------------
 * 15.28  Payroll -- Punches
 * payroll/punches.php, data-page="punches"
 * -------------------------------------------------------------------------- */
/* ==== Nexus theme + components (mirrors payroll-dashboard / department-totals) ==== */
/* Theme switches instantly (no fade), so no transition CSS is needed here. */

/* -- Nexus theme tokens (layered over portal.css; brand stays CareRite green) -- */
:root:where([data-page="punches"]){
  --brand:var(--blue);
  --brand-lt:var(--blue-lt);
  /* Remap legacy portal tokens (used throughout the punches page CSS) onto the
     Nexus scale so the whole page follows the theme and flips in dark mode. */
  --bg:var(--nx-bg);
  --bg2:var(--nx-rail);
  --surface:var(--nx-surface);
  --surface2:#F3F4F6;
  --border:var(--nx-line);
  --border2:var(--nx-line2);
  --text:var(--nx-ink);
  --text2:var(--nx-ink2);
  --text3:var(--nx-ink3);
  --radius:9px;
  --radius-lg:14px;
  color-scheme:light;
}
/* -- Dark theme -- */
:root[data-theme="dark"]:where([data-page="punches"]){
  --nx-up:#34D27B;--nx-up-bg:#16301F;
  --nx-down:#F4756B;--nx-down-bg:#3A1E1C;
  --brand:#1FB866;
  --brand-lt:#13361F;
  --bg:var(--nx-bg);
  --bg2:var(--nx-surface);
  --surface:var(--nx-surface);
  --surface2:var(--nx-hover);
  --border:var(--nx-line);
  --border2:var(--nx-line2);
  --text:var(--nx-ink);
  --text2:var(--nx-ink2);
  --text3:var(--nx-ink3);
  --blue:#1FB866;--blue-dk:#13361F;--blue-lt:#15301F;
  --green:#34D27B;--green-lt:#16301F;
  --amber:#E0A93B;--amber-lt:#2A2510;--amber-text:#E8C25A;
  --red:#F4756B;--red-lt:#3A1E1C;--red-text:#F4756B;
  --accent-blue:#6EA0F5;--accent-blue-lt:#1C2740;
  color-scheme:dark;
}
:where(:root[data-page="punches"]) *, *:where([data-page="punches"]){box-sizing:border-box}
html:where([data-page="punches"]),:where(:root[data-page="punches"]) body{height:100%;margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px}
:where(:root[data-page="punches"]) button{font-family:inherit}

/* App frame */
:where(:root[data-page="punches"]) .nx-app{display:grid;grid-template-columns:248px 1fr;min-height:calc(100vh - 16px);max-width:none;margin:8px;background:var(--nx-surface);border-radius:16px;overflow:hidden;box-shadow:0 16px 48px rgba(27,29,41,.10);border:1px solid var(--nx-line)}
@media(max-width:980px){:where(:root[data-page="punches"]) .nx-app{grid-template-columns:1fr;margin:0;border-radius:0;border:none;min-height:100vh}}

/* Sidebar */
:where(:root[data-page="punches"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px}
@media(max-width:980px){:where(:root[data-page="punches"]) .nx-rail{display:none}}
:where(:root[data-page="punches"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="punches"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#04a85a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
:where(:root[data-page="punches"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="punches"]) .nx-navsec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3);padding:14px 10px 6px}
:where(:root[data-page="punches"]) .nx-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--nx-ink2);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,color .12s}
:where(:root[data-page="punches"]) .nx-nav svg{width:17px;height:17px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="punches"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="punches"]) .nx-nav.active{background:var(--brand);color:#fff}
:where(:root[data-page="punches"]) .nx-nav.active svg{color:#fff}
:where(:root[data-page="punches"]) .nx-rail-foot{margin-top:auto;padding-top:14px}
:where(:root[data-page="punches"]) .nx-promo{background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:14px;padding:13px}
:where(:root[data-page="punches"]) .nx-promo-row{display:flex;align-items:center;gap:9px}
:where(:root[data-page="punches"]) .nx-promo-mark{width:30px;height:30px;border-radius:9px;background:var(--nx-elev);display:flex;align-items:center;justify-content:center}
:where(:root[data-page="punches"]) .nx-promo-mark svg{width:16px;height:16px;color:var(--nx-violet)}
:where(:root[data-page="punches"]) .nx-promo-t{font-size:12px;font-weight:700;line-height:1.2}
:where(:root[data-page="punches"]) .nx-promo-s{font-size:10.5px;color:var(--nx-ink2)}

/* Page sub-nav (Daily / Grid / OT / Approaching) -- lifted into shell when embedded */
:where(:root[data-page="punches"]) .nx-subnav{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:10px;border-top:1px solid var(--nx-line2)}
:where(:root[data-page="punches"]) .nx-subnav:empty{display:none;border-top:none;margin-top:0;padding-top:0}
:where(:root[data-page="punches"]) .nx-subnav-head{font-size:11px;font-weight:700;letter-spacing:-.01em;color:var(--nx-ink);padding:2px 10px 7px;display:flex;align-items:center;gap:7px}
:where(:root[data-page="punches"]) .nx-subnav-head::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--brand);flex:0 0 auto}
:where(:root[data-page="punches"]) .nx-subnav .nx-subitem{display:flex;align-items:center;gap:11px;padding:8px 11px 8px 18px;border-radius:10px;color:var(--nx-ink2);font-size:12.5px;font-weight:500;cursor:pointer;border:none;background:none;font-family:inherit;width:100%;text-align:left}
:where(:root[data-page="punches"]) .nx-subnav .nx-subitem svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="punches"]) .nx-subnav .nx-subitem:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="punches"]) .nx-subnav .nx-subitem.active{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="punches"]) .nx-subnav .nx-subitem.active svg{color:var(--brand)}

/* Main column */
:where(:root[data-page="punches"]) .nx-main{display:flex;flex-direction:column;min-width:0}
:where(:root[data-page="punches"]) .nx-topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="punches"]) .nx-search{flex:1;max-width:340px;position:relative}
:where(:root[data-page="punches"]) .nx-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--nx-ink3)}
:where(:root[data-page="punches"]) .nx-search input{width:100%;border:1px solid var(--nx-line2);background:var(--nx-rail);border-radius:10px;padding:9px 12px 9px 34px;font-size:13px;font-family:inherit;color:var(--nx-ink)}
:where(:root[data-page="punches"]) .nx-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="punches"]) .nx-page-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
:where(:root[data-page="punches"]) .nx-pbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-surface);border-radius:9px;padding:7px 12px;font-size:12px;font-weight:600;color:var(--nx-ink2);cursor:pointer}
:where(:root[data-page="punches"]) .nx-pbtn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="punches"]) .nx-pbtn svg{width:15px;height:15px}
:where(:root[data-page="punches"]) .nx-top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
:where(:root[data-page="punches"]) .nx-theme-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--nx-line2);background:var(--nx-elev);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2)}
:where(:root[data-page="punches"]) .nx-theme-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="punches"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="punches"]) .nx-theme-btn .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="punches"]) .nx-theme-btn .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="punches"]) .nx-theme-btn .nx-ic-moon{display:block}
:where(:root[data-page="punches"]) .nx-user{position:relative;display:flex;align-items:center}
:where(:root[data-page="punches"]) .nx-user-av-btn{padding:0;border:none;background:none;cursor:pointer;border-radius:50%;display:flex}
:where(:root[data-page="punches"]) .nx-user-av{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;text-transform:uppercase}
:where(:root[data-page="punches"]) .nx-user-av-btn:hover .nx-user-av,:where(:root[data-page="punches"]) .nx-user-av-btn:focus-visible .nx-user-av{box-shadow:0 0 0 3px var(--brand-lt);outline:none}
:where(:root[data-page="punches"]) .nx-user-av.lg{width:38px;height:38px;font-size:13px;flex:0 0 auto}
:where(:root[data-page="punches"]) .nx-user-pop{position:absolute;top:calc(100% + 9px);right:0;min-width:236px;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:14px;box-shadow:0 18px 44px rgba(20,22,28,.20);padding:7px;display:none;z-index:120}
:where(:root[data-page="punches"]) .nx-user-pop.open{display:block}
:where(:root[data-page="punches"]) .nx-user-pop-id{display:flex;align-items:center;gap:11px;padding:9px 9px 11px}
:where(:root[data-page="punches"]) .nx-user-pop-meta{min-width:0;line-height:1.25}
:where(:root[data-page="punches"]) .nx-user-pop-name{display:block;font-size:13.5px;font-weight:700;color:var(--nx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="punches"]) .nx-user-pop-sub{display:block;font-size:11.5px;color:var(--nx-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="punches"]) .nx-user-pop-sep{height:1px;background:var(--nx-line);margin:2px 4px 6px}
:where(:root[data-page="punches"]) .nx-user-pop-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 10px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#6B7280;text-align:left;text-decoration:none}
:where(:root[data-page="punches"]) .nx-user-pop-item svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="punches"]) .nx-user-pop-item:hover{background:var(--nx-hover)}
:where(:root[data-page="punches"]) .nx-user-pop-item.danger{color:#D4453B}
:where(:root[data-page="punches"]) .nx-user-pop-item.danger svg{color:#D4453B}

:where(:root[data-page="punches"]) .nx-scroll{flex:1;overflow-y:auto;padding:20px 22px 28px;scrollbar-gutter:stable}
:where(:root[data-page="punches"]) .nx-scroll::-webkit-scrollbar{width:10px;height:10px;background:transparent}
:where(:root[data-page="punches"]) .nx-scroll::-webkit-scrollbar-track{background:transparent}
:where(:root[data-page="punches"]) .nx-scroll::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
:where(:root[data-page="punches"]) .nx-scroll.sb-show::-webkit-scrollbar-thumb{background:var(--nx-line2);background-clip:padding-box}
:where(:root[data-page="punches"]) .nx-scroll.sb-show::-webkit-scrollbar-thumb:hover{background:var(--nx-ink3);background-clip:padding-box}
@supports (-moz-appearance:none){
  :where(:root[data-page="punches"]) .nx-scroll{scrollbar-width:thin;scrollbar-color:transparent transparent}
  :where(:root[data-page="punches"]) .nx-scroll.sb-show{scrollbar-color:var(--nx-line2) transparent}
}
:where(:root[data-page="punches"]) .nx-pagehead{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
:where(:root[data-page="punches"]) .nx-h1{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0}
:where(:root[data-page="punches"]) .nx-pagehead .nx-sub{font-size:12.5px;color:var(--nx-ink3);margin-top:4px}

/* Standalone owns its frame; embedded, the shell owns it. */
:where(:root[data-page="punches"]) body.embed{height:100%;min-height:0;overflow:hidden;background:var(--nx-surface)}
html.cr-embed:where([data-page="punches"]){height:100%;min-height:0;overflow:hidden;background:var(--nx-surface)}
:where(:root[data-page="punches"]) body.embed .nx-app{margin:0;border:none;border-radius:0;height:100%;min-height:0;max-width:none;grid-template-columns:1fr;grid-template-rows:100%;box-shadow:none;background:var(--nx-surface);overflow:hidden}
:where(:root[data-page="punches"]) body.embed .nx-main{min-height:0;height:100%;overflow:hidden}
:where(:root[data-page="punches"]) body.embed .nx-rail{display:none}
:where(:root[data-page="punches"]) body.embed .nx-topbar{display:none}
:where(:root[data-page="punches"]) body.embed .nx-scroll{padding:20px 22px 26px}
:where(:root[data-page="punches"]) body.embed .nx-pagehead{min-height:31px}

/* ===================== Punches page content ===================== */

/* View switcher (segmented; standalone shows it above content -- when embedded
   the sub-nav in the shell rail drives the same state, so this is hidden). */
:where(:root[data-page="punches"]) .pn-views{display:inline-flex;align-items:center;gap:2px;background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:11px;padding:3px;margin-bottom:16px}
:where(:root[data-page="punches"]) body.embed .pn-views{display:none}
:where(:root[data-page="punches"]) .pn-views button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--nx-ink2);padding:7px 14px;border-radius:8px;letter-spacing:-.01em;transition:background .1s,color .1s}
:where(:root[data-page="punches"]) .pn-views button:hover{color:var(--nx-ink);background:var(--nx-hover)}
:where(:root[data-page="punches"]) .pn-views button.on{background:var(--nx-surface);color:var(--brand);font-weight:600;box-shadow:0 1px 2px rgba(20,22,28,.06)}

/* Date tabs */
/* Date tabs -- segmented sliding control (matches Department Totals) */
:where(:root[data-page="punches"]) .pn-tabs{display:flex;gap:2px;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:var(--nx-radius-sm);padding:4px;margin-bottom:16px;flex-wrap:wrap;position:relative}
:where(:root[data-page="punches"]) .pn-tab-slider{position:absolute;top:4px;left:0;height:0;width:0;background:var(--brand-lt);border-radius:9px;transition:transform .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1),height .22s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}
:where(:root[data-page="punches"]) .pn-tab{background:transparent;border:none;border-radius:9px;padding:8px 14px;font-size:12px;font-weight:500;color:var(--nx-ink2);cursor:pointer;transition:color .12s;letter-spacing:-.01em;white-space:nowrap;position:relative;z-index:1}
:where(:root[data-page="punches"]) .pn-tab:hover{color:var(--nx-ink)}
:where(:root[data-page="punches"]) .pn-tab.on{color:var(--brand);font-weight:600}
:where(:root[data-page="punches"]) .pn-tab.today{color:var(--nx-ink);font-weight:700}
:root[data-theme="dark"]:where([data-page="punches"]) .pn-tab-slider{background:var(--brand-lt)}

/* Stat cards -- dashboard .pd-kpi look (icon chip + label on top, big number below) */
:where(:root[data-page="punches"]) .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
:where(:root[data-page="punches"]) .stat{background:var(--nx-elev);border:1px solid var(--nx-line);border-top-width:1px;border-radius:var(--nx-radius);padding:16px 17px;cursor:pointer;transition:border-color .12s,background .12s}
:where(:root[data-page="punches"]) .stat[style*="cursor:default"]{cursor:default}
:where(:root[data-page="punches"]) .stat:hover{cursor:pointer;box-shadow:none;transform:none}
/* portal.css gives these cards a colored top border by type; keep it neutral */
:where(:root[data-page="punches"]) .stat,:where(:root[data-page="punches"]) .stat.red,:where(:root[data-page="punches"]) .stat.blue,:where(:root[data-page="punches"]) .stat.green,:where(:root[data-page="punches"]) .stat.amber,:where(:root[data-page="punches"]) .stat.green2,:where(:root[data-page="punches"]) .stat.purple{border-top-color:var(--nx-line)}
:where(:root[data-page="punches"]) .stat-top{display:flex;align-items:center;gap:9px;margin-bottom:13px}
/* Soft tinted chip (borderless) -- matches dashboard .pd-kpi-chip exactly */
:where(:root[data-page="punches"]) .stat-chip{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="punches"]) .stat-chip svg{width:16px;height:16px}
:where(:root[data-page="punches"]) .stat.red .stat-chip{background:var(--nx-down-bg);color:var(--nx-down)}
:where(:root[data-page="punches"]) .stat.blue .stat-chip{background:#E8EEFB;color:var(--nx-indigo)}
:where(:root[data-page="punches"]) .stat.green .stat-chip{background:var(--nx-up-bg);color:var(--nx-up)}
:where(:root[data-page="punches"]) .stat.amber .stat-chip{background:#FEF3D7;color:#B7791F}
:root[data-theme="dark"]:where([data-page="punches"]) .stat.blue .stat-chip{background:var(--accent-blue-lt);color:#8FB4F7}
:root[data-theme="dark"]:where([data-page="punches"]) .stat.amber .stat-chip{background:var(--amber-lt);color:var(--amber-text)}
:where(:root[data-page="punches"]) .stat-label{font-size:12.5px;font-weight:600;color:var(--nx-ink2)}
:where(:root[data-page="punches"]) .stat-val{font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--nx-ink)}
/* Active filter cue: dashboard's own selected vocabulary (1px tinted border +
   soft tint), NOT a thick colored ring. */
:where(:root[data-page="punches"]) .stat.active{border-color:var(--brand);background:var(--brand-lt)}
:where(:root[data-page="punches"]) .stat.red.active{border-color:var(--nx-down);background:var(--nx-down-bg)}
:where(:root[data-page="punches"]) .stat.blue.active{border-color:var(--nx-indigo);background:#E8EEFB}
:where(:root[data-page="punches"]) .stat.green.active{border-color:var(--nx-up);background:var(--nx-up-bg)}
:where(:root[data-page="punches"]) .stat.amber.active{border-color:#B7791F;background:#FEF3D7}
:root[data-theme="dark"]:where([data-page="punches"]) .stat.blue.active{border-color:#8FB4F7;background:var(--accent-blue-lt)}
:root[data-theme="dark"]:where([data-page="punches"]) .stat.amber.active{border-color:var(--amber-text);background:var(--amber-lt)}

/* Controls row */
:where(:root[data-page="punches"]) .pn-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;min-height:38px}
:where(:root[data-page="punches"]) .pn-input,:where(:root[data-page="punches"]) .pn-ms-btn{height:38px}
:where(:root[data-page="punches"]) .pn-input,:where(:root[data-page="punches"]) .pn-select{padding:8px 11px;border:1px solid var(--nx-line2);border-radius:10px;font-family:inherit;font-size:12.5px;color:var(--nx-ink);background:var(--nx-surface);transition:border-color .12s,box-shadow .12s}
:where(:root[data-page="punches"]) .pn-input{flex:1;min-width:200px}
:where(:root[data-page="punches"]) .pn-input::placeholder{color:var(--nx-ink3)}
:where(:root[data-page="punches"]) .pn-select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:8px 32px 8px 12px;font-weight:600;color:var(--nx-ink2);cursor:pointer;min-width:170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%239499AB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px 15px;
}
:where(:root[data-page="punches"]) .pn-select:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="punches"]) .pn-input:focus,:where(:root[data-page="punches"]) .pn-select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="punches"]) .pn-select:focus{color:var(--nx-ink)}
:root[data-theme="dark"]:where([data-page="punches"]) .pn-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236E7587' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:where(:root[data-page="punches"]) .pn-select option{color:var(--nx-ink);background:var(--nx-surface);font-weight:500}
:where(:root[data-page="punches"]) .pn-seg{display:inline-flex;border:1px solid var(--nx-line2);border-radius:9px;overflow:hidden}

/* Multi-select dropdown (department picker) */
:where(:root[data-page="punches"]) .pn-ms{position:relative;width:220px;flex:0 0 220px}
:where(:root[data-page="punches"]) .pn-ms-btn{width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--nx-line2);border-radius:10px;background:var(--nx-surface);font-family:inherit;font-size:12.5px;font-weight:600;color:var(--nx-ink2);cursor:pointer;text-align:left}
:where(:root[data-page="punches"]) .pn-ms-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="punches"]) .pn-ms.open .pn-ms-btn{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt);color:var(--nx-ink)}
:where(:root[data-page="punches"]) .pn-ms-btn .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="punches"]) .pn-ms-btn .cnt{flex:0 0 auto;font-size:11px;font-weight:700;color:#fff;background:var(--brand);border-radius:20px;padding:1px 7px}
:where(:root[data-page="punches"]) .pn-ms-btn .arw{flex:0 0 auto;width:15px;height:15px;color:var(--nx-ink3);transition:transform .15s}
:where(:root[data-page="punches"]) .pn-ms.open .pn-ms-btn .arw{transform:rotate(180deg)}
:where(:root[data-page="punches"]) .pn-ms-pop{position:absolute;top:calc(100% + 6px);right:0;width:260px;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:12px;box-shadow:0 18px 44px rgba(20,22,28,.20);padding:8px;display:none;z-index:130}
:where(:root[data-page="punches"]) .pn-ms.open .pn-ms-pop{display:block}
:where(:root[data-page="punches"]) .pn-ms-search{position:relative;margin-bottom:6px}
:where(:root[data-page="punches"]) .pn-ms-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--nx-ink3)}
:where(:root[data-page="punches"]) .pn-ms-search input{width:100%;box-sizing:border-box;border:1px solid var(--nx-line2);background:var(--nx-rail);border-radius:9px;padding:8px 10px 8px 30px;font-family:inherit;font-size:12.5px;color:var(--nx-ink)}
:where(:root[data-page="punches"]) .pn-ms-search input:focus{outline:none;border-color:var(--brand)}
:where(:root[data-page="punches"]) .pn-ms-list{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
:where(:root[data-page="punches"]) .pn-ms-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--nx-ink)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="punches"]) .pn-ms-opt:hover{background:var(--nx-rail)}
:where(:root[data-page="punches"]) .pn-ms-opt .box{flex:0 0 auto;width:16px;height:16px;border:1.5px solid var(--nx-line2);border-radius:5px;display:flex;align-items:center;justify-content:center}
:where(:root[data-page="punches"]) .pn-ms-opt.on .box{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="punches"]) .pn-ms-opt .box svg{width:11px;height:11px;color:#fff;display:none}
:where(:root[data-page="punches"]) .pn-ms-opt.on .box svg{display:block}
:where(:root[data-page="punches"]) .pn-ms-opt .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--nx-ink)!important}
:where(:root[data-page="punches"]) .pn-ms-none{padding:12px 9px;text-align:center;font-size:12px;color:var(--nx-ink3)}
:where(:root[data-page="punches"]) .pn-ms-foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:6px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="punches"]) .pn-ms-clear{border:none;background:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--nx-ink3);cursor:pointer;padding:4px 6px;border-radius:7px}
:where(:root[data-page="punches"]) .pn-ms-clear:hover{color:var(--nx-ink);background:var(--nx-hover)}
:where(:root[data-page="punches"]) .pn-seg button{background:var(--nx-surface);border:none;color:var(--nx-ink2);padding:8px 13px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;border-right:1px solid var(--nx-line2)}
:where(:root[data-page="punches"]) .pn-seg button:last-child{border-right:none}
:where(:root[data-page="punches"]) .pn-seg button.on{background:var(--brand);color:#fff}

/* Panels + tables (Nexus card + table look) */
:where(:root[data-page="punches"]) .pn-panel{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);overflow:hidden}
:where(:root[data-page="punches"]) .pn-tblwrap{overflow-x:auto}
:where(:root[data-page="punches"]) .pn-panel table{width:100%;border-collapse:collapse;table-layout:fixed}
:where(:root[data-page="punches"]) #dayview .pn-panel col.c-name{width:22%}
:where(:root[data-page="punches"]) #dayview .pn-panel col.c-dept{width:26%}
:where(:root[data-page="punches"]) #dayview .pn-panel col.c-in{width:13%}
:where(:root[data-page="punches"]) #dayview .pn-panel col.c-sched{width:15%}
:where(:root[data-page="punches"]) #dayview .pn-panel col.c-var{width:12%}
:where(:root[data-page="punches"]) #dayview .pn-panel col.c-status{width:12%}
:where(:root[data-page="punches"]) .pn-panel td{overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="punches"]) .pn-panel thead th{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3);text-align:left;padding:11px 17px;background:var(--nx-rail);border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line);cursor:pointer;white-space:nowrap}
:where(:root[data-page="punches"]) .pn-panel thead th:first-child{border-top-left-radius:0}
:where(:root[data-page="punches"]) .pn-panel tbody td{padding:8px 17px;border-bottom:1px solid var(--nx-line);font-size:12.5px;vertical-align:middle;color:var(--nx-ink)}
:where(:root[data-page="punches"]) .pn-panel tbody tr:last-child td{border-bottom:none}
:where(:root[data-page="punches"]) .pn-panel tbody tr:hover td{background:var(--nx-rail)}
:where(:root[data-page="punches"]) .emp-name{font-weight:600;color:var(--nx-ink)}
:where(:root[data-page="punches"]) .tc-link{cursor:pointer;color:var(--blue);text-decoration:underline;text-underline-offset:2px}
:where(:root[data-page="punches"]) .tc-link:hover{opacity:.75}
:where(:root[data-page="punches"]) .pn-back{background:var(--nx-elev);border:1px solid var(--nx-line);color:var(--nx-ink);border-radius:8px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer}
:where(:root[data-page="punches"]) .pn-back:hover{background:var(--nx-rail)}
:where(:root[data-page="punches"]) .tc-head{display:flex;align-items:baseline;gap:10px}
:where(:root[data-page="punches"]) .tc-name{font-size:16px;font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="punches"]) .tc-sub{font-size:13px;color:var(--nx-ink3)}
:where(:root[data-page="punches"]) tr.tc-total td{font-weight:700;border-top:2px solid var(--nx-line);background:var(--nx-rail)}
:where(:root[data-page="punches"]) .emp-sub{font-size:11.5px;color:var(--nx-ink3)}

/* Status pills */
:where(:root[data-page="punches"]) .pn-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.01em}
:where(:root[data-page="punches"]) .pn-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
:where(:root[data-page="punches"]) .pn-pill[data-s="Late"]{background:var(--nx-down-bg);color:var(--nx-down)}
:where(:root[data-page="punches"]) .pn-pill[data-s="Early"]{background:var(--accent-blue-lt);color:var(--accent-blue)}
:where(:root[data-page="punches"]) .pn-pill[data-s="On Time"]{background:var(--nx-up-bg);color:var(--nx-up)}
:where(:root[data-page="punches"]) .pn-pill[data-s="Overnight"]{background:var(--amber-lt);color:var(--amber-text)}
:where(:root[data-page="punches"]) .pn-mono{font-variant-numeric:tabular-nums}
:where(:root[data-page="punches"]) .pn-diff{font-weight:600;font-variant-numeric:tabular-nums}
:where(:root[data-page="punches"]) .pn-diff.pos{color:var(--nx-down)}:where(:root[data-page="punches"]) .pn-diff.neg{color:var(--accent-blue)}:where(:root[data-page="punches"]) .pn-diff.zero{color:var(--text3)}
:where(:root[data-page="punches"]) .pn-shiftsel{padding:5px 8px;border:1px solid var(--nx-line2);border-radius:7px;font-family:inherit;font-size:12px;color:var(--nx-ink);background:var(--nx-surface);cursor:pointer}
:where(:root[data-page="punches"]) .pn-empty{padding:36px;text-align:center;color:var(--nx-ink3);font-size:12.5px}
:where(:root[data-page="punches"]) .pn-load{padding:48px;text-align:center;color:var(--nx-ink3);font-size:13px}
:where(:root[data-page="punches"]) .pn-note{margin-top:16px;font-size:11.5px;color:var(--nx-ink3);line-height:1.6;border-left:2px solid var(--amber);padding-left:12px;max-width:900px}

/* Multi-day heatmap grid */
:where(:root[data-page="punches"]) .pn-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--nx-ink3);margin-bottom:10px}
:where(:root[data-page="punches"]) .pn-legend span{display:inline-flex;align-items:center;gap:6px}
:where(:root[data-page="punches"]) .pn-legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
:where(:root[data-page="punches"]) .pn-gridwrap{overflow-x:auto;border:1px solid var(--nx-line);border-radius:var(--nx-radius);background:var(--nx-elev)}
:where(:root[data-page="punches"]) .pn-grid{border-collapse:collapse;width:100%;font-size:11.5px}
:where(:root[data-page="punches"]) .pn-grid th{position:sticky;top:0;background:var(--nx-rail);font-size:10px;color:var(--nx-ink3);font-weight:700;padding:9px 8px;text-align:center;border-bottom:1px solid var(--nx-line);white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
:where(:root[data-page="punches"]) .pn-grid th.nameh{text-align:left;position:sticky;left:0;z-index:2;min-width:180px}
:where(:root[data-page="punches"]) .pn-grid th.depth{text-align:left;min-width:90px}
:where(:root[data-page="punches"]) .pn-grid td{padding:0;text-align:center;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="punches"]) .pn-grid td.namec{text-align:left;padding:8px 12px;font-weight:600;color:var(--nx-ink);position:sticky;left:0;background:var(--nx-elev);z-index:1;white-space:nowrap}
:where(:root[data-page="punches"]) .pn-grid td.deptc{text-align:left;padding:8px 10px;font-size:10px;color:var(--nx-ink3);white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
:where(:root[data-page="punches"]) .pn-grid tbody tr:hover td{background:var(--nx-hover)}
:where(:root[data-page="punches"]) .pn-grid tbody tr:hover td.namec{background:var(--nx-rail)}
:where(:root[data-page="punches"]) .pn-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;height:30px;font-weight:600;font-variant-numeric:tabular-nums;border-left:1px solid var(--nx-line)}
:where(:root[data-page="punches"]) .pn-cell.Late{background:var(--nx-down-bg);color:var(--nx-down)}
:where(:root[data-page="punches"]) .pn-cell.Early{background:var(--accent-blue-lt);color:var(--accent-blue)}
:where(:root[data-page="punches"]) .pn-cell.OnTime{background:var(--nx-up-bg);color:var(--nx-up)}
:where(:root[data-page="punches"]) .pn-cell.Overnight{background:var(--amber-lt);color:var(--amber-text)}
:where(:root[data-page="punches"]) .pn-cell.none{color:var(--nx-line2)}
:where(:root[data-page="punches"]) .pn-cell .cv{font-size:12px;line-height:1.1}
:where(:root[data-page="punches"]) .pn-cell .ct{font-size:9px;opacity:.7;font-weight:500}
:where(:root[data-page="punches"]) .pn-gridcount{font-size:11px;padding:8px;text-align:center;border-left:1px solid var(--nx-line);color:var(--nx-ink3);font-variant-numeric:tabular-nums}
:where(:root[data-page="punches"]) .pn-gridcount b{color:var(--red-text)}

/* Approaching-OT gauges */
:where(:root[data-page="punches"]) .pn-aprow{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:13px 16px;margin-bottom:10px;display:grid;grid-template-columns:1fr 220px 96px;gap:18px;align-items:center}
:where(:root[data-page="punches"]) .pn-apname{font-weight:600;font-size:13px;color:var(--nx-ink)}
:where(:root[data-page="punches"]) .pn-apmeta{font-size:11px;color:var(--nx-ink3);margin-top:3px}
:where(:root[data-page="punches"]) .badge{display:inline-block;padding:2px 7px;border-radius:6px;font-size:10.5px;font-weight:600}
:where(:root[data-page="punches"]) .pn-gtrack{height:13px;border-radius:7px;background:var(--nx-rail);overflow:hidden;position:relative}
:where(:root[data-page="punches"]) .pn-gfill{height:100%;border-radius:7px}
:where(:root[data-page="punches"]) .pn-gfill.over{background:var(--red)}:where(:root[data-page="punches"]) .pn-gfill.warn{background:var(--amber)}
:where(:root[data-page="punches"]) .pn-gmark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--nx-ink);opacity:.35}
:where(:root[data-page="punches"]) .pn-glabels{display:flex;justify-content:space-between;font-size:10px;color:var(--nx-ink3);margin-top:4px}
:where(:root[data-page="punches"]) .pn-aphrs{text-align:right;font-variant-numeric:tabular-nums}
:where(:root[data-page="punches"]) .pn-aphrs .big{font-size:20px;font-weight:700;letter-spacing:-.03em}
:where(:root[data-page="punches"]) .pn-aphrs .big.over{color:var(--red-text)}:where(:root[data-page="punches"]) .pn-aphrs .big.warn{color:var(--amber-text)}
:where(:root[data-page="punches"]) .pn-aphrs .rem{font-size:10.5px;color:var(--nx-ink3);margin-top:2px}
:where(:root[data-page="punches"]) .pn-otbar{height:5px;border-radius:3px;background:var(--red);margin-top:4px}
@media(max-width:760px){:where(:root[data-page="punches"]) .stats{grid-template-columns:repeat(2,1fr)}:where(:root[data-page="punches"]) .pn-aprow{grid-template-columns:1fr}}
/* ===================== Schedule Mapping view ===================== */
:where(:root[data-page="punches"]) .sm-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
:where(:root[data-page="punches"]) .sm-search{width:260px;max-width:100%;border:1px solid var(--nx-line2);background:var(--nx-surface);border-radius:10px;padding:9px 12px;font-family:inherit;font-size:13px;font-weight:500;color:var(--nx-ink);transition:border-color .12s,box-shadow .12s}
:where(:root[data-page="punches"]) .sm-search::placeholder{color:var(--nx-ink3)}
:where(:root[data-page="punches"]) .sm-search:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="punches"]) .sm-hint{font-size:11.5px;color:var(--nx-ink3)}
:where(:root[data-page="punches"]) .sm-save-state{font-size:11.5px;font-weight:600;color:var(--nx-ink3);min-width:74px;text-align:right;margin-left:auto}
:where(:root[data-page="punches"]) .sm-save-state.saving{color:var(--amber-text)}
:where(:root[data-page="punches"]) .sm-save-state.saved{color:var(--brand)}
:where(:root[data-page="punches"]) .sm-save-state.error{color:var(--red-text)}
:where(:root[data-page="punches"]) .sm-card{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);margin-bottom:14px;overflow:visible}
:where(:root[data-page="punches"]) .sm-card-head{border-top-left-radius:var(--nx-radius);border-top-right-radius:var(--nx-radius)}
:where(:root[data-page="punches"]) .sm-card-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="punches"]) .sm-fac-name{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--nx-ink)}
:where(:root[data-page="punches"]) .sm-fac-co{font-size:11px;font-weight:600;color:var(--nx-ink3);letter-spacing:.01em}
:where(:root[data-page="punches"]) .sm-fac-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:6px;background:var(--nx-hover);color:var(--nx-ink3);margin-left:auto}
:where(:root[data-page="punches"]) .sm-fac-tag.custom{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="punches"]) .sm-row{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;padding:13px 16px}
:where(:root[data-page="punches"]) .sm-row + .sm-row{border-top:1px solid var(--nx-line)}
:where(:root[data-page="punches"]) .sm-row-label{display:flex;flex-direction:column;gap:2px}
:where(:root[data-page="punches"]) .sm-row-kind{font-size:12.5px;font-weight:600;color:var(--nx-ink)}
:where(:root[data-page="punches"]) .sm-row-note{font-size:10.5px;color:var(--nx-ink3)}
:where(:root[data-page="punches"]) .sm-shifts{display:flex;gap:16px;flex-wrap:wrap}
:where(:root[data-page="punches"]) .sm-shift{display:flex;flex-direction:column;gap:4px}
:where(:root[data-page="punches"]) .sm-shift-cap{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--nx-ink3)}
/* Nexus-styled time picker (custom select) */
:where(:root[data-page="punches"]) .sm-time{position:relative;width:132px}
:where(:root[data-page="punches"]) .sm-time-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--nx-line2);background:var(--nx-surface);border-radius:10px;padding:8px 11px;font-family:inherit;font-size:13px;font-weight:600;color:var(--nx-ink);cursor:pointer;font-variant-numeric:tabular-nums;transition:border-color .12s,box-shadow .12s}
:where(:root[data-page="punches"]) .sm-time-btn:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="punches"]) .sm-time-btn:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="punches"]) .sm-time-btn svg{width:13px;height:13px;color:var(--nx-ink3);flex:0 0 auto;transition:transform .15s}
:where(:root[data-page="punches"]) .sm-time.open .sm-time-btn{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="punches"]) .sm-time.open .sm-time-btn svg{transform:rotate(180deg)}
:where(:root[data-page="punches"]) .sm-time[disabled] .sm-time-btn,:where(:root[data-page="punches"]) .sm-time.readonly .sm-time-btn{opacity:.6;cursor:not-allowed}
:where(:root[data-page="punches"]) .sm-time-menu{position:absolute;top:calc(100% + 5px);left:0;right:0;max-height:236px;overflow-y:auto;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:12px;box-shadow:0 16px 40px rgba(20,22,28,.18);padding:5px;display:none;z-index:60}
:where(:root[data-page="punches"]) .sm-time.open .sm-time-menu{display:block}
:where(:root[data-page="punches"]) .sm-time-opt{display:block;width:100%;text-align:left;border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--nx-ink);padding:8px 10px;border-radius:8px;cursor:pointer;font-variant-numeric:tabular-nums;white-space:nowrap}
:where(:root[data-page="punches"]) .sm-time-opt:hover{background:var(--nx-hover)}
:where(:root[data-page="punches"]) .sm-time-opt.sel{background:var(--brand-lt);color:var(--brand);font-weight:700}
:where(:root[data-page="punches"]) .sm-time-menu::-webkit-scrollbar{width:9px}
:where(:root[data-page="punches"]) .sm-time-menu::-webkit-scrollbar-thumb{background:var(--nx-line2);border-radius:8px;border:2px solid var(--nx-surface);background-clip:padding-box}
:where(:root[data-page="punches"]) .sm-row.dirty .sm-time-btn{border-color:var(--brand)}
/* Pay-week dropdown -- same look as the time picker, a little wider */
:where(:root[data-page="punches"]) .sm-time.sm-week{width:224px}
:where(:root[data-page="punches"]) .sm-time.sm-week .sm-time-btn{white-space:nowrap}
:where(:root[data-page="punches"]) .sm-time.sm-week .sm-time-val{white-space:nowrap}
:where(:root[data-page="punches"]) .sm-time.sm-week .sm-time-menu{max-height:none;white-space:nowrap}
:where(:root[data-page="punches"]) .sm-time.sm-week.open{z-index:70}
:where(:root[data-page="punches"]) .sm-empty,:where(:root[data-page="punches"]) .sm-load{padding:40px 16px;text-align:center;color:var(--nx-ink3);font-size:13px}
/* Department schedules */
:where(:root[data-page="punches"]) .sm-dept-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-height:36px}
:where(:root[data-page="punches"]) .sm-dept-sum{font-size:12px;color:var(--nx-ink2)}
:where(:root[data-page="punches"]) .sm-link{border:1px solid var(--nx-line2);background:var(--nx-surface);border-radius:9px;padding:6px 11px;font-family:inherit;font-size:12px;font-weight:600;color:var(--nx-ink2);cursor:pointer}
:where(:root[data-page="punches"]) .sm-link:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="punches"]) .sm-dept-list{display:flex;flex-direction:column;margin-top:10px;border:1px solid var(--nx-line);border-radius:12px}
:where(:root[data-page="punches"]) .sm-dline{display:grid;grid-template-columns:190px 1fr;gap:12px;align-items:center;padding:9px 12px}
:where(:root[data-page="punches"]) .sm-dline + .sm-dline{border-top:1px solid var(--nx-line)}
:where(:root[data-page="punches"]) .sm-dline.dirty{background:var(--nx-rail)}
:where(:root[data-page="punches"]) .sm-dname{font-size:12.5px;font-weight:600;color:var(--nx-ink)}
:where(:root[data-page="punches"]) .sm-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
:where(:root[data-page="punches"]) .sm-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 5px 4px 10px;border-radius:999px;background:var(--brand-lt);color:var(--brand);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
:where(:root[data-page="punches"]) .sm-chip.ro{padding-right:10px}
:where(:root[data-page="punches"]) .sm-chip-x{width:18px;height:18px;border:none;border-radius:50%;background:none;color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;padding:0}
:where(:root[data-page="punches"]) .sm-chip-x:hover{background:rgba(0,0,0,.08)}
:root[data-theme="dark"]:where([data-page="punches"]) .sm-chip-x:hover{background:rgba(255,255,255,.12)}
:where(:root[data-page="punches"]) .sm-time.sm-add{width:auto}
:where(:root[data-page="punches"]) .sm-time.sm-add .sm-time-btn{padding:4px 10px;border-radius:999px;border-style:dashed;font-size:12px;color:var(--nx-ink2)}
:where(:root[data-page="punches"]) .sm-time.sm-add .sm-time-menu{width:150px;right:auto}
:where(:root[data-page="punches"]) .sm-time.sm-add-dept .sm-time-menu{width:230px}
:where(:root[data-page="punches"]) .sm-dept-foot{padding:9px 12px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="punches"]) .sm-dept-none{padding:12px;font-size:12px;color:var(--nx-ink3)}
@media(max-width:640px){:where(:root[data-page="punches"]) .sm-row{grid-template-columns:1fr}:where(:root[data-page="punches"]) .sm-dline{grid-template-columns:1fr}}

/* The find-in-page flash. The page used to add this from its own script. */
@keyframes crFindFlash{0%,100%{background:transparent}18%,62%{background:rgba(1,139,70,.18)}}
:where(:root[data-page="punches"]) tr.cr-find-flash>td{animation:crFindFlash 2.2s ease;box-shadow:inset 0 0 0 9999px transparent}
:where(:root[data-page="punches"]) tr.cr-find-flash{outline:2px solid rgba(1,139,70,.55);outline-offset:-2px;border-radius:6px}


/* ----------------------------------------------------------------------------
 * 15.29  Payroll -- Insurance
 * payroll/insurance.php, data-page="payroll-insurance"
 * -------------------------------------------------------------------------- */
:root:where([data-page="payroll-insurance"]){
  --nx-warn:#B9791C;--nx-warn-bg:#FBF1DE;
  --nx-info:#2563EB;--nx-info-bg:#E7EEFD;
  --ir-row-hover:#F5F6F8;
  --brand:var(--blue);--brand-lt:var(--blue-lt);
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="payroll-insurance"]){
  --nx-up:#34D27B;--nx-up-bg:#16301F;--nx-down:#F4756B;--nx-down-bg:#3A1E1C;
  --nx-warn:#E8C25A;--nx-warn-bg:#2A2510;
  --nx-info:#7FA8F5;--nx-info-bg:#182337;
  --ir-row-hover:#1F222C;
  --brand:#1FB866;--brand-lt:#13361F;
  --blue:#1FB866;--blue-lt:#15301F;
  color-scheme:dark;
}
:where(:root[data-page="payroll-insurance"]) *, *:where([data-page="payroll-insurance"]){box-sizing:border-box}
html:where([data-page="payroll-insurance"]),:where(:root[data-page="payroll-insurance"]) body{height:100%;margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px}
:where(:root[data-page="payroll-insurance"]) button,:where(:root[data-page="payroll-insurance"]) input,:where(:root[data-page="payroll-insurance"]) select,:where(:root[data-page="payroll-insurance"]) textarea{font-family:inherit}

:where(:root[data-page="payroll-insurance"]) .nx-app{display:grid;grid-template-columns:248px 1fr;height:calc(100vh - 24px);max-width:1760px;margin:12px;background:var(--nx-surface);border-radius:18px;overflow:hidden;box-shadow:0 16px 48px rgba(27,29,41,.10);border:1px solid var(--nx-line)}
@media(min-width:1784px){:where(:root[data-page="payroll-insurance"]) .nx-app{margin:12px auto}}
@media(max-width:980px){:where(:root[data-page="payroll-insurance"]) .nx-app{grid-template-columns:1fr;margin:0;border-radius:0;border:none;min-height:100vh;height:auto}}

:where(:root[data-page="payroll-insurance"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px;overflow:auto}
@media(max-width:980px){:where(:root[data-page="payroll-insurance"]) .nx-rail{display:none}}
:where(:root[data-page="payroll-insurance"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="payroll-insurance"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#04a85a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
:where(:root[data-page="payroll-insurance"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="payroll-insurance"]) .nx-navsec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3);padding:14px 10px 6px}
:where(:root[data-page="payroll-insurance"]) .nx-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--nx-ink2);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer}
:where(:root[data-page="payroll-insurance"]) .nx-nav svg{width:17px;height:17px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="payroll-insurance"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="payroll-insurance"]) .nx-nav.active{background:var(--brand);color:#fff}
:where(:root[data-page="payroll-insurance"]) .nx-nav.active svg{color:#fff}
:where(:root[data-page="payroll-insurance"]) .nx-subnav{margin-top:10px;display:flex;flex-direction:column;gap:2px}
:where(:root[data-page="payroll-insurance"]) .nx-subnav-head{font-size:11px;font-weight:700;color:var(--nx-ink);padding:2px 10px 7px;display:flex;align-items:center;gap:7px}
:where(:root[data-page="payroll-insurance"]) .nx-subnav-head::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--brand);flex:0 0 auto}
:where(:root[data-page="payroll-insurance"]) .nx-subitem{display:flex;align-items:center;gap:10px;width:100%;padding:8px 11px;border:none;background:none;border-radius:9px;cursor:pointer;font-size:12.5px;font-weight:500;color:var(--nx-ink2);text-align:left}
:where(:root[data-page="payroll-insurance"]) .nx-subitem svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="payroll-insurance"]) .nx-subitem:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="payroll-insurance"]) .nx-subitem.active{background:var(--nx-hover);color:var(--brand);font-weight:600}
:where(:root[data-page="payroll-insurance"]) .nx-subitem.active svg{color:var(--brand)}
:where(:root[data-page="payroll-insurance"]) .nx-subitem .ir-badge{margin-left:auto}
:where(:root[data-page="payroll-insurance"]) .nx-rail-foot{margin-top:auto;padding-top:14px}
:where(:root[data-page="payroll-insurance"]) .nx-promo{background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:14px;padding:13px}
:where(:root[data-page="payroll-insurance"]) .nx-promo-row{display:flex;align-items:center;gap:9px}
:where(:root[data-page="payroll-insurance"]) .nx-promo-mark{width:30px;height:30px;border-radius:9px;background:var(--nx-elev);display:flex;align-items:center;justify-content:center}
:where(:root[data-page="payroll-insurance"]) .nx-promo-mark svg{width:16px;height:16px;color:var(--nx-violet)}
:where(:root[data-page="payroll-insurance"]) .nx-promo-t{font-size:12px;font-weight:700;line-height:1.2}
:where(:root[data-page="payroll-insurance"]) .nx-promo-s{font-size:10.5px;color:var(--nx-ink2)}

:where(:root[data-page="payroll-insurance"]) .nx-main{display:flex;flex-direction:column;min-width:0;min-height:0}
:where(:root[data-page="payroll-insurance"]) .nx-topbar{display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--nx-line);flex:0 0 auto}
:where(:root[data-page="payroll-insurance"]) .nx-search{display:flex;align-items:center;gap:8px;background:var(--nx-hover);border:1px solid var(--nx-line);border-radius:10px;padding:7px 11px;color:var(--nx-ink3);width:240px}
:where(:root[data-page="payroll-insurance"]) .nx-search input{border:0;background:transparent;outline:none;font:inherit;color:var(--nx-ink);width:100%}
:where(:root[data-page="payroll-insurance"]) .nx-search svg{width:15px;height:15px;flex:none}
:where(:root[data-page="payroll-insurance"]) .nx-top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
:where(:root[data-page="payroll-insurance"]) .nx-pbtn{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:9px;padding:7px 13px;font-weight:600;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
:where(:root[data-page="payroll-insurance"]) .nx-pbtn svg{width:14px;height:14px}
:where(:root[data-page="payroll-insurance"]) .nx-pbtn:hover{background:var(--nx-hover)}
:where(:root[data-page="payroll-insurance"]) .nx-pbtn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="payroll-insurance"]) .nx-pbtn.primary:hover{filter:brightness(1.06)}
:where(:root[data-page="payroll-insurance"]) .nx-pbtn.danger{color:var(--nx-down);border-color:var(--nx-down)}
:where(:root[data-page="payroll-insurance"]) .nx-pbtn:disabled{opacity:.5;cursor:not-allowed}
:where(:root[data-page="payroll-insurance"]) .nx-theme-btn{border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:9px;width:34px;height:34px;cursor:pointer;color:var(--nx-ink2);display:flex;align-items:center;justify-content:center}
:where(:root[data-page="payroll-insurance"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="payroll-insurance"]) .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="payroll-insurance"]) .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="payroll-insurance"]) .nx-ic-moon{display:block}
:where(:root[data-page="payroll-insurance"]) .nx-user{position:relative}
:where(:root[data-page="payroll-insurance"]) .nx-user-av-btn{border:none;background:none;padding:0;cursor:pointer}
:where(:root[data-page="payroll-insurance"]) .nx-user-av{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
:where(:root[data-page="payroll-insurance"]) .nx-user-av.lg{width:38px;height:38px;font-size:14px}
:where(:root[data-page="payroll-insurance"]) .nx-user-pop{position:absolute;right:0;top:42px;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:13px;box-shadow:0 14px 40px rgba(0,0,0,.16);padding:8px;min-width:224px;display:none;z-index:60}
:where(:root[data-page="payroll-insurance"]) .nx-user-pop.open{display:block}
:where(:root[data-page="payroll-insurance"]) .nx-user-pop-id{display:flex;align-items:center;gap:10px;padding:7px 8px 10px}
:where(:root[data-page="payroll-insurance"]) .nx-user-pop-meta{display:flex;flex-direction:column;min-width:0}
:where(:root[data-page="payroll-insurance"]) .nx-user-pop-name{font-weight:700;font-size:12.5px}
:where(:root[data-page="payroll-insurance"]) .nx-user-pop-sub{font-size:11px;color:var(--nx-ink2)}
:where(:root[data-page="payroll-insurance"]) .nx-user-pop-sep{height:1px;background:var(--nx-line);margin:2px 0 6px}
:where(:root[data-page="payroll-insurance"]) .nx-user-pop-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border:none;background:none;border-radius:9px;cursor:pointer;font-size:12.5px;color:var(--nx-ink);text-decoration:none;text-align:left}
:where(:root[data-page="payroll-insurance"]) .nx-user-pop-item svg{width:15px;height:15px;color:var(--nx-ink3)}
:where(:root[data-page="payroll-insurance"]) .nx-user-pop-item:hover{background:var(--nx-hover)}
:where(:root[data-page="payroll-insurance"]) .nx-user-pop-item.danger{color:var(--nx-down)}
:where(:root[data-page="payroll-insurance"]) .nx-user-pop-item.danger svg{color:var(--nx-down)}

:where(:root[data-page="payroll-insurance"]) .nx-scroll{padding:18px 20px 26px;overflow:auto;flex:1;min-height:0}
:where(:root[data-page="payroll-insurance"]) .nx-pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
:where(:root[data-page="payroll-insurance"]) .nx-h1{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0}
:where(:root[data-page="payroll-insurance"]) .nx-sub{color:var(--nx-ink2);font-size:12.5px;margin-top:2px}
:where(:root[data-page="payroll-insurance"]) .nx-card{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);overflow:hidden;margin-bottom:16px}
:where(:root[data-page="payroll-insurance"]) .nx-card-head{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="payroll-insurance"]) .nx-card-ic{color:var(--brand);display:flex}
:where(:root[data-page="payroll-insurance"]) .nx-card-ic svg{width:16px;height:16px}
:where(:root[data-page="payroll-insurance"]) .nx-card-title{font-weight:700;font-size:13.5px}
:where(:root[data-page="payroll-insurance"]) .nx-card-head .right{margin-left:auto;display:flex;align-items:center;gap:8px}
:where(:root[data-page="payroll-insurance"]) .nx-card-body{padding:14px 15px}
:where(:root[data-page="payroll-insurance"]) .nx-card-body.flush{padding:0}

/* --- pickers ------------------------------------------------------------ */
:where(:root[data-page="payroll-insurance"]) .ir-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
:where(:root[data-page="payroll-insurance"]) .ir-sel{appearance:none;-webkit-appearance:none;background:var(--nx-elev);border:1px solid var(--nx-line2);color:var(--nx-ink);border-radius:9px;padding:7px 30px 7px 11px;font-size:12.5px;font-weight:600;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%239499AB' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px}
:where(:root[data-page="payroll-insurance"]) .ir-sel:focus{outline:2px solid var(--brand-lt);border-color:var(--brand)}
:where(:root[data-page="payroll-insurance"]) .ir-in{background:var(--nx-elev);border:1px solid var(--nx-line2);color:var(--nx-ink);border-radius:9px;padding:7px 10px;font-size:12.5px;width:100%}
:where(:root[data-page="payroll-insurance"]) .ir-in:focus{outline:2px solid var(--brand-lt);border-color:var(--brand)}
:where(:root[data-page="payroll-insurance"]) .ir-lbl{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3);display:block;margin-bottom:4px}

/* --- stat cards --------------------------------------------------------- */
:where(:root[data-page="payroll-insurance"]) .ir-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
:where(:root[data-page="payroll-insurance"]) .ir-stat{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:13px;padding:12px 14px}
:where(:root[data-page="payroll-insurance"]) .ir-stat .k{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3)}
:where(:root[data-page="payroll-insurance"]) .ir-stat .v{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}
:where(:root[data-page="payroll-insurance"]) .ir-stat .s{font-size:11px;color:var(--nx-ink2);margin-top:2px}
:where(:root[data-page="payroll-insurance"]) .ir-stat.warn .v{color:var(--nx-warn)}
:where(:root[data-page="payroll-insurance"]) .ir-stat.bad  .v{color:var(--nx-down)}
:where(:root[data-page="payroll-insurance"]) .ir-stat.good .v{color:var(--nx-up)}

/* --- tables ------------------------------------------------------------- */
:where(:root[data-page="payroll-insurance"]) .ir-tblwrap{overflow:auto;max-height:calc(100vh - 400px)}
:where(:root[data-page="payroll-insurance"]) table.ir{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
:where(:root[data-page="payroll-insurance"]) table.ir th{position:sticky;top:0;z-index:2;background:var(--nx-elev);text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3);padding:9px 10px;border-bottom:1px solid var(--nx-line2);white-space:nowrap}
:where(:root[data-page="payroll-insurance"]) table.ir td{padding:8px 10px;border-bottom:1px solid var(--nx-line);vertical-align:middle}
:where(:root[data-page="payroll-insurance"]) table.ir tbody tr:hover{background:var(--ir-row-hover)}
:where(:root[data-page="payroll-insurance"]) table.ir td.num,:where(:root[data-page="payroll-insurance"]) table.ir th.num{text-align:right;font-variant-numeric:tabular-nums}
:where(:root[data-page="payroll-insurance"]) table.ir td.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}
:where(:root[data-page="payroll-insurance"]) .ir-empty{padding:34px 16px;text-align:center;color:var(--nx-ink2)}
:where(:root[data-page="payroll-insurance"]) .ir-empty .big{font-weight:700;color:var(--nx-ink);margin-bottom:4px}
:where(:root[data-page="payroll-insurance"]) .ir-nm{font-weight:600}
:where(:root[data-page="payroll-insurance"]) .ir-nm .alt,:where(:root[data-page="payroll-insurance"]) table.ir td .alt{font-weight:400;color:var(--nx-ink3);font-size:11.5px;line-height:1.3}

/* --- pills -------------------------------------------------------------- */
:where(:root[data-page="payroll-insurance"]) .ir-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
:where(:root[data-page="payroll-insurance"]) .ir-pill.ok{background:var(--nx-up-bg);color:var(--nx-up)}
:where(:root[data-page="payroll-insurance"]) .ir-pill.bad{background:var(--nx-down-bg);color:var(--nx-down)}
:where(:root[data-page="payroll-insurance"]) .ir-pill.warn{background:var(--nx-warn-bg);color:var(--nx-warn)}
:where(:root[data-page="payroll-insurance"]) .ir-pill.info{background:var(--nx-info-bg);color:var(--nx-info)}
:where(:root[data-page="payroll-insurance"]) .ir-pill.mute{background:var(--nx-hover);color:var(--nx-ink2)}
:where(:root[data-page="payroll-insurance"]) .ir-pill.violet{background:rgba(108,75,244,.12);color:var(--nx-violet)}
:where(:root[data-page="payroll-insurance"]) .ir-badge{display:inline-flex;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--nx-down);color:#fff;font-size:10px;font-weight:800;align-items:center;justify-content:center}
:where(:root[data-page="payroll-insurance"]) .ir-badge.mute{background:var(--nx-line2);color:var(--nx-ink2)}

/* --- filter chips ------------------------------------------------------- */
:where(:root[data-page="payroll-insurance"]) .ir-chips{display:flex;gap:7px;flex-wrap:wrap}
:where(:root[data-page="payroll-insurance"]) .ir-chip{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
:where(:root[data-page="payroll-insurance"]) .ir-chip:hover{background:var(--nx-hover)}
:where(:root[data-page="payroll-insurance"]) .ir-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="payroll-insurance"]) .ir-chip .n{font-variant-numeric:tabular-nums;opacity:.75}

/* --- icon buttons ------------------------------------------------------- */
:where(:root[data-page="payroll-insurance"]) .ir-ib{border:1px solid transparent;background:none;width:26px;height:26px;border-radius:7px;cursor:pointer;color:var(--nx-ink3);display:inline-flex;align-items:center;justify-content:center}
:where(:root[data-page="payroll-insurance"]) .ir-ib svg{width:14px;height:14px}
:where(:root[data-page="payroll-insurance"]) .ir-ib:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="payroll-insurance"]) .ir-ib.danger:hover{background:var(--nx-down-bg);color:var(--nx-down)}

/* --- checkbox ----------------------------------------------------------- */
:where(:root[data-page="payroll-insurance"]) .ir-cb{appearance:none;-webkit-appearance:none;width:15px;height:15px;border:1.5px solid var(--nx-line2);border-radius:4px;background:var(--nx-elev);cursor:pointer;position:relative;flex:0 0 auto;vertical-align:-2px}
:where(:root[data-page="payroll-insurance"]) .ir-cb:checked{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="payroll-insurance"]) .ir-cb:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* --- drop zone ---------------------------------------------------------- */
:where(:root[data-page="payroll-insurance"]) .ir-drop{border:1.5px dashed var(--nx-line2);border-radius:13px;padding:22px;text-align:center;color:var(--nx-ink2);cursor:pointer}
:where(:root[data-page="payroll-insurance"]) .ir-drop:hover,:where(:root[data-page="payroll-insurance"]) .ir-drop.over{border-color:var(--brand);background:var(--brand-lt);color:var(--nx-ink)}
:where(:root[data-page="payroll-insurance"]) .ir-drop .t{font-weight:700;color:var(--nx-ink);margin-bottom:3px}

/* --- modal (never a browser popup) -------------------------------------- */
:where(:root[data-page="payroll-insurance"]) .ir-mask{position:fixed;inset:0;background:rgba(18,20,28,.5);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
:where(:root[data-page="payroll-insurance"]) .ir-mask.open{display:flex}
:where(:root[data-page="payroll-insurance"]) .ir-modal{background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.28);width:min(720px,100%);max-height:calc(100vh - 60px);display:flex;flex-direction:column;overflow:hidden}
:where(:root[data-page="payroll-insurance"]) .ir-modal.wide{width:min(1080px,100%)}
:where(:root[data-page="payroll-insurance"]) .ir-modal.narrow{width:min(430px,100%)}
:where(:root[data-page="payroll-insurance"]) .ir-mhead{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="payroll-insurance"]) .ir-mtitle{font-weight:700;font-size:14px}
:where(:root[data-page="payroll-insurance"]) .ir-mbody{padding:15px 16px;overflow:auto;flex:1;min-height:0}
:where(:root[data-page="payroll-insurance"]) .ir-mfoot{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="payroll-insurance"]) .ir-mfoot .left{margin-right:auto}
:where(:root[data-page="payroll-insurance"]) .ir-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
:where(:root[data-page="payroll-insurance"]) .ir-note{background:var(--nx-info-bg);color:var(--nx-info);border-radius:10px;padding:9px 11px;font-size:12px;margin-bottom:12px}
:where(:root[data-page="payroll-insurance"]) .ir-note.warn{background:var(--nx-warn-bg);color:var(--nx-warn)}
:where(:root[data-page="payroll-insurance"]) .ir-note.bad{background:var(--nx-down-bg);color:var(--nx-down)}

/* --- mapper grid -------------------------------------------------------- */
:where(:root[data-page="payroll-insurance"]) .ir-maprap{overflow:auto;border:1px solid var(--nx-line2);border-radius:11px;max-height:46vh}
:where(:root[data-page="payroll-insurance"]) table.ir-map{border-collapse:separate;border-spacing:0;font-size:11.5px;white-space:nowrap}
:where(:root[data-page="payroll-insurance"]) table.ir-map th,:where(:root[data-page="payroll-insurance"]) table.ir-map td{border-bottom:1px solid var(--nx-line);border-right:1px solid var(--nx-line);padding:5px 7px;max-width:190px;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="payroll-insurance"]) table.ir-map th{position:sticky;top:0;background:var(--nx-hover);z-index:2}
:where(:root[data-page="payroll-insurance"]) table.ir-map td.rn{position:sticky;left:0;background:var(--nx-hover);color:var(--nx-ink3);font-weight:700;text-align:right;cursor:pointer;z-index:1}
:where(:root[data-page="payroll-insurance"]) table.ir-map td.rn:hover{color:var(--brand)}
:where(:root[data-page="payroll-insurance"]) table.ir-map tr.start td{background:var(--brand-lt)}
:where(:root[data-page="payroll-insurance"]) table.ir-map select{width:100%;font-size:10.5px;padding:2px 4px;border:1px solid var(--nx-line2);border-radius:6px;background:var(--nx-elev);color:var(--nx-ink)}
:where(:root[data-page="payroll-insurance"]) table.ir-map select.set{border-color:var(--brand);color:var(--brand);font-weight:700}

/* --- toast -------------------------------------------------------------- */
:where(:root[data-page="payroll-insurance"]) .ir-toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:400}
:where(:root[data-page="payroll-insurance"]) .ir-toast{background:var(--nx-elev);border:1px solid var(--nx-line2);border-left:3px solid var(--brand);border-radius:11px;box-shadow:0 12px 34px rgba(0,0,0,.2);padding:11px 14px;font-size:12.5px;max-width:400px;color:var(--nx-ink)}
:where(:root[data-page="payroll-insurance"]) .ir-toast.bad{border-left-color:var(--nx-down)}
:where(:root[data-page="payroll-insurance"]) .ir-toast.warn{border-left-color:var(--nx-warn)}

/* --- misc --------------------------------------------------------------- */
:where(:root[data-page="payroll-insurance"]) .ir-view{display:none}
:where(:root[data-page="payroll-insurance"]) .ir-view.on{display:block}
:where(:root[data-page="payroll-insurance"]) .ir-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
:where(:root[data-page="payroll-insurance"]) .ir-spin{width:14px;height:14px;border:2px solid var(--nx-line2);border-top-color:var(--brand);border-radius:50%;animation:irspin .7s linear infinite;display:inline-block}
@keyframes irspin{to{transform:rotate(360deg)}}
:where(:root[data-page="payroll-insurance"]) .ir-setup-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
:where(:root[data-page="payroll-insurance"]) .ir-hint{font-size:11.5px;color:var(--nx-ink2)}
/* --- inside the dashboard shell ---------------------------------------- */
html.cr-embed:where([data-page="payroll-insurance"]){height:100%;min-height:0;overflow:hidden;background:var(--nx-surface)}
:where(:root[data-page="payroll-insurance"]) body.embed .nx-app{grid-template-columns:1fr;grid-template-rows:100vh;margin:0;max-width:none;border-radius:0;border:none;min-height:0;box-shadow:none;height:100vh}
:where(:root[data-page="payroll-insurance"]) body.embed .nx-main{height:100vh}
:where(:root[data-page="payroll-insurance"]) body.embed .nx-rail{display:none}
:where(:root[data-page="payroll-insurance"]) body.embed .nx-topbar{display:none}
:where(:root[data-page="payroll-insurance"]) body.embed .nx-pagehead{align-items:center}

/* The find-in-page flash. The page used to add this from its own script. */
@keyframes crFindFlash{0%,100%{background:transparent}18%,62%{background:rgba(1,139,70,.18)}}
:where(:root[data-page="payroll-insurance"]) tr.cr-find-flash>td{animation:crFindFlash 2.2s ease}
:where(:root[data-page="payroll-insurance"]) tr.cr-find-flash{outline:2px solid rgba(1,139,70,.55);outline-offset:-2px;border-radius:6px}


/* ----------------------------------------------------------------------------
 * 15.30  Home -- the forced password change screen
 * home.php, data-page="password-change"
 * -------------------------------------------------------------------------- */
  :where(:root[data-page="password-change"]) body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg)}
  :where(:root[data-page="password-change"]) .cpw-card{background:var(--nx-surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:30px;width:440px;max-width:94vw;box-shadow:0 6px 28px rgba(0,0,0,.07)}
  :where(:root[data-page="password-change"]) .cpw-title{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
  :where(:root[data-page="password-change"]) .cpw-banner{background:var(--amber-lt);border:1px solid #FBC02D;border-radius:var(--radius);padding:10px 12px;margin:12px 0 16px;font-size:12.5px;color:#806400;line-height:1.5}
  :where(:root[data-page="password-change"]) .cpw-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
  :where(:root[data-page="password-change"]) .cpw-field label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
  :where(:root[data-page="password-change"]) .cpw-field input{padding:9px 56px 9px 11px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:var(--font);font-size:14px;color:var(--text);background:var(--nx-surface)}
  :where(:root[data-page="password-change"]) .cpw-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,139,70,.08)}
  :where(:root[data-page="password-change"]) .cpw-wrap{position:relative}
  :where(:root[data-page="password-change"]) .cpw-show{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:10px;font-weight:700;color:var(--text3);font-family:var(--font);letter-spacing:.06em;padding:4px 6px;border-radius:4px}
  :where(:root[data-page="password-change"]) .pwReqs{list-style:none;padding:0;margin:8px 0 0;font-size:11px;line-height:1.7}
  :where(:root[data-page="password-change"]) .pwReqs .pwReq-mark{display:inline-block;width:14px}
  :where(:root[data-page="password-change"]) .cpw-match{font-size:10px;margin-top:4px;color:var(--text3)}
  :where(:root[data-page="password-change"]) .cpw-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
  :where(:root[data-page="password-change"]) .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1F2937;color:var(--nx-on-brand);padding:11px 18px;border-radius:8px;font-size:13px;display:none;z-index:300}
  :where(:root[data-page="password-change"]) .toast.show{display:block}


/* ----------------------------------------------------------------------------
 * 15.31  Home -- the portal home page
 * home.php, data-page="home"
 * -------------------------------------------------------------------------- */
/* ============================================================================
 * home.php — page-specific styles only.
 * The shared design system (shell, sidebar, topbar, panels, buttons, forms,
 * tables, badges, stats) now comes from portal.css — identical to the
 * requests page. Everything below is unique to the portal picker + the
 * in-place Admin Console and is NOT covered by portal.css.
 * ==========================================================================*/

/* ── Token bridge ──────────────────────────────────────────────────────────
 * portal.css names its tokens --text2/--text3 etc. This page's markup (and
 * the admin JS) also uses the hyphenated aliases --text-2/--text-3/--text-4
 * and a few tokens portal.css doesn't define. Alias them here so nothing
 * has to change in the body, and add the extras (green2, surface, shadows). */
:root:where([data-page="home"]){
  --green-dk:var(--blue-dk);--green-lt:var(--blue-lt);
  --text-2:var(--text2);--text-3:var(--text3);--text-4:var(--text3);
  --border-2:var(--border2);--border-3:#C9CFD7;
  --surface:var(--nx-surface);
  --green2:#1a7a35;--green2-lt:#E6F4EA;
  --shadow-md:0 4px 14px rgba(15,20,25,.06);
  --shadow-lg:0 12px 32px rgba(15,20,25,.14);
}

/* Soft top-left brand wash so the picker doesn't read as a blank page.
   Mirrors the previous treatment; harmless on the white-panelled content. */
:where(:root[data-page="home"]) body{
  background-image:
    radial-gradient(1200px 600px at 0% -10%, rgba(1,139,70,.05), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(11,110,153,.03), transparent 55%);
}

/* Sidebar wordmark subheader — names the current view beneath the brand,
   matching the requests page's .sb-subname. */
:where(:root[data-page="home"]) .sb-subname{font-size:11px;font-weight:500;color:var(--text3);letter-spacing:-.01em;margin-top:1px}

/* Per-module accent dot on the sidebar nav items (the picker's modules each
   carry their own brand color via inline --accent). portal.css's .sb-item
   handles layout/hover/active; we only add the dot. */
:where(:root[data-page="home"]) .sb-item{--accent:var(--blue);text-decoration:none}
:where(:root[data-page="home"]) .sb-item .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);flex-shrink:0;opacity:.65;
  transition:opacity .1s ease, transform .1s ease;
}
:where(:root[data-page="home"]) .sb-item:hover .dot{opacity:1}
:where(:root[data-page="home"]) .sb-item.active .dot{opacity:1;transform:scale(1.15)}
:where(:root[data-page="home"]) .sb-empty{font-size:12px;color:var(--text3);padding:8px 10px;line-height:1.5}

/* Expandable module groups — caret on the right, page sub-list slides open
   beneath. The label takes remaining width so the caret pins to the edge. */
:where(:root[data-page="home"]) .sb-item .sb-item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="home"]) .sb-caret{width:9px;height:9px;flex-shrink:0;opacity:.55;color:var(--text3);transition:transform .15s ease,opacity .1s}
:where(:root[data-page="home"]) .sb-item:hover .sb-caret{opacity:.85}
:where(:root[data-page="home"]) .sb-item.expanded .sb-caret{transform:rotate(180deg);opacity:1;color:var(--accent)}
:where(:root[data-page="home"]) .sb-item.expanded{color:var(--text);font-weight:600}
:where(:root[data-page="home"]) .sb-item.expanded .dot{opacity:1;transform:scale(1.15)}
:where(:root[data-page="home"]) .sb-sub{
  display:flex;flex-direction:column;
  max-height:0;overflow:hidden;
  transition:max-height .2s ease;
  margin:0 0 1px 19px;          /* indent under the module's dot */
  border-left:1.5px solid var(--border);
  padding-left:0;
}
:where(:root[data-page="home"]) .sb-sub.open{margin-bottom:3px}
:where(:root[data-page="home"]) .sb-subitem{
  display:block;padding:6px 10px 6px 13px;
  font-size:12px;font-weight:400;line-height:1.2;
  color:var(--text2);text-decoration:none;letter-spacing:-.01em;
  border-radius:0 var(--radius) var(--radius) 0;
  transition:background .1s,color .1s;
}
:where(:root[data-page="home"]) .sb-subitem:hover{background:var(--bg);color:var(--accent)}

/* ── Heading block (picker / admin / page-list intros) ─────────────────── */
:where(:root[data-page="home"]) .crumbs{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text3);margin-bottom:16px;flex-wrap:wrap}
:where(:root[data-page="home"]) .crumbs a{color:var(--text3);text-decoration:none}
:where(:root[data-page="home"]) .crumbs a:hover{color:var(--text2)}
:where(:root[data-page="home"]) .crumbs .sep{color:var(--text3)}
:where(:root[data-page="home"]) .crumbs .here{color:var(--text2);font-weight:600}
:where(:root[data-page="home"]) .back-link{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:500;color:var(--text3);
  text-decoration:none;margin-bottom:14px;
  padding:3px 0;letter-spacing:-.01em;transition:color .12s ease;
}
:where(:root[data-page="home"]) .back-link:hover{color:var(--blue)}
:where(:root[data-page="home"]) .back-link svg{width:14px;height:14px;flex-shrink:0}
:where(:root[data-page="home"]) .heading{margin-bottom:18px;max-width:680px}
:where(:root[data-page="home"]) .eyebrow{font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin-bottom:8px}
:where(:root[data-page="home"]) h1{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--text);margin-bottom:5px}
:where(:root[data-page="home"]) .subtitle{font-size:13px;color:var(--text3);line-height:1.5}

/* ── Empty state + footer ──────────────────────────────────────────────── */
:where(:root[data-page="home"]) .empty{background:var(--nx-surface);border:1px dashed var(--border-3);border-radius:var(--radius-lg);padding:32px 24px;text-align:center;color:var(--text3);font-size:14px}
:where(:root[data-page="home"]) .foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ── Dashboard landing (greeting + stats + activity feed) ──────────────────
 * Reuses portal.css's .dash-greeting, .stats/.stat, .panel, and .act-* — only
 * the bits unique to this page's layout live here. */
:where(:root[data-page="home"]) .dash-stats{
  /* C + F are at most two cards — don't let them stretch across 5 columns.
     auto-fit keeps them a comfortable, consistent width and left-aligned. */
  grid-template-columns:repeat(auto-fill,minmax(200px,240px));
}
:where(:root[data-page="home"]) .dash-stats .stat{cursor:default}
:where(:root[data-page="home"]) .dash-stats .stat:hover{box-shadow:none;transform:none}
/* The portal .act-item grid has 10 payroll-specific columns. This feed only
   has 5 cells (dot · action · detail · actor · time), so retarget the grid. */
:where(:root[data-page="home"]) .dash-act-item{
  grid-template-columns:14px 90px 1fr auto 70px !important;
}
:where(:root[data-page="home"]) .dash-act-item:hover{background:var(--nx-surface)}      /* rows aren't clickable here */
:where(:root[data-page="home"]) .act-detail{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--text);font-weight:400;
}
:where(:root[data-page="home"]) .dash-act-empty{
  padding:28px 20px;text-align:center;color:var(--text3);
  font-size:12.5px;line-height:1.6;
}
@media (max-width:760px){
  :where(:root[data-page="home"]) .dash-act-item{grid-template-columns:14px 80px 1fr 60px !important}
  :where(:root[data-page="home"]) .dash-act-item .act-actor{display:none}
}

/* ── Mobile user bar (shown when sidebar collapses) ────────────────────── */
:where(:root[data-page="home"]) .mobile-userbar{display:none}
@media (min-width:861px){:where(:root[data-page="home"]) .mobile-userbar{display:none}}
@media (max-width:860px){
  /* Collapse the fixed sidebar to a horizontal strip of module pills so
     "every module is one tap away" survives on narrow screens. */
  :where(:root[data-page="home"]) .shell{display:block;height:auto;overflow:visible}
  :where(:root[data-page="home"]) .sidebar{width:auto;height:auto;border-right:none;border-bottom:1px solid var(--border)}
  :where(:root[data-page="home"]) .sb-nav{padding:10px 12px}
  :where(:root[data-page="home"]) .sb-section{display:none}
  :where(:root[data-page="home"]) .sb-list{flex-direction:row;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
  :where(:root[data-page="home"]) .sb-item{flex-shrink:0;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:#fff;font-size:12.5px}
  :where(:root[data-page="home"]) .sb-item.active,:where(:root[data-page="home"]) .sb-item.expanded{border-color:transparent}
  :where(:root[data-page="home"]) .sb-caret{display:none}
  :where(:root[data-page="home"]) .sb-sub{display:none!important}
  :where(:root[data-page="home"]) .sb-footer{display:none}
  :where(:root[data-page="home"]) .main{height:auto;overflow:visible}
  :where(:root[data-page="home"]) .topbar{display:none}
  :where(:root[data-page="home"]) .scroll-area{overflow:visible;padding:20px 16px 40px}
  :where(:root[data-page="home"]) .mobile-userbar{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text3);margin-bottom:14px}
  :where(:root[data-page="home"]) .mobile-userbar a{color:var(--text3);text-decoration:none;font-weight:500}
}

/* ── In-pane admin tabs (Users / Facilities) ───────────────────────────── */
:where(:root[data-page="home"]) .admin-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px}
:where(:root[data-page="home"]) .admin-tab{background:none;border:none;cursor:pointer;padding:9px 14px;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--text3);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s ease;letter-spacing:-.01em}
:where(:root[data-page="home"]) .admin-tab:hover{color:var(--text2)}
:where(:root[data-page="home"]) .admin-tab.active{color:var(--text);border-bottom-color:var(--blue)}
:where(:root[data-page="home"]) .admin-tab .count{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;background:var(--bg);color:var(--text3);padding:1px 7px;border-radius:10px}
:where(:root[data-page="home"]) .admin-tab.active .count{background:var(--blue-lt);color:var(--blue)}
:where(:root[data-page="home"]) .term-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){:where(:root[data-page="home"]) .term-grid{grid-template-columns:1fr}}
:where(:root[data-page="home"]) .term-col{padding:0;overflow:hidden}
:where(:root[data-page="home"]) .term-col-head{padding:12px 16px;border-bottom:1px solid var(--border);font-size:12px;font-weight:700;letter-spacing:-.01em;color:var(--text2);background:var(--bg2)}
:where(:root[data-page="home"]) .term-add{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border)}
:where(:root[data-page="home"]) .term-add input{flex:1;font-family:var(--font);font-size:13px;padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--nx-surface);color:var(--text)}
:where(:root[data-page="home"]) .term-add input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,139,70,.08)}
:where(:root[data-page="home"]) .btn.sm{padding:7px 14px;font-size:12.5px}
:where(:root[data-page="home"]) .term-list{max-height:360px;overflow-y:auto}
:where(:root[data-page="home"]) .term-row{display:flex;align-items:center;justify-content:space-between;padding:9px 16px;border-bottom:1px solid var(--border);font-size:13px;color:var(--text)}
:where(:root[data-page="home"]) .term-row:last-child{border-bottom:none}
:where(:root[data-page="home"]) .term-row .term-del{background:none;border:none;cursor:pointer;color:var(--text3);padding:3px;border-radius:5px;line-height:0}
:where(:root[data-page="home"]) .term-row .term-del:hover{color:var(--red);background:var(--bg)}
:where(:root[data-page="home"]) .term-empty{padding:22px 16px;text-align:center;color:var(--text3);font-size:12.5px}
:where(:root[data-page="home"]) .term-group-toggle{display:inline-flex;border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
:where(:root[data-page="home"]) .term-grp-btn{background:var(--nx-surface);border:none;cursor:pointer;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--text2);padding:7px 14px}
:where(:root[data-page="home"]) .term-grp-btn+.term-grp-btn{border-left:1.5px solid var(--border)}
:where(:root[data-page="home"]) .term-grp-btn.active{background:var(--blue);color:var(--nx-on-brand)}

/* ── Admin console: toolbar + table cell chrome ────────────────────────── */
:where(:root[data-page="home"]) .toolbar{display:flex;gap:10px;align-items:center;background:var(--nx-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px 12px;margin-bottom:14px;flex-wrap:wrap}
:where(:root[data-page="home"]) .toolbar .search{position:relative;flex:1;min-width:240px}
:where(:root[data-page="home"]) .toolbar .search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--text3);pointer-events:none}
:where(:root[data-page="home"]) .toolbar .search input{width:100%;padding:8px 12px 8px 34px;font-family:var(--font);font-size:13px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--nx-surface);color:var(--text);transition:border-color .1s,box-shadow .1s}
:where(:root[data-page="home"]) .toolbar .search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,139,70,.08)}
:where(:root[data-page="home"]) .table-wrap{background:var(--nx-surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
:where(:root[data-page="home"]) tbody tr.inactive td{color:var(--text3)}
:where(:root[data-page="home"]) .who{display:flex;align-items:center;gap:10px;min-width:0}
:where(:root[data-page="home"]) .avatar{width:30px;height:30px;border-radius:7px;flex-shrink:0;background:linear-gradient(135deg,var(--accent-blue-lt) 0%,#D2DCE9 100%);color:var(--accent-blue);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
:where(:root[data-page="home"]) .avatar.admin{background:linear-gradient(135deg,#FAECE7 0%,#F5D9CE 100%);color:#993C1D}
:where(:root[data-page="home"]) .avatar.inactive{background:var(--border)!important;color:var(--text3)!important}
:where(:root[data-page="home"]) .who-info{min-width:0}
:where(:root[data-page="home"]) .who-name{font-weight:600;color:var(--text);font-size:12px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="home"]) .who-sub{font-size:10px;color:var(--text3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="home"]) .cmp-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.01em;white-space:nowrap}
:where(:root[data-page="home"]) .cmp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-right:1px}
:where(:root[data-page="home"]) .who-name-row{display:flex;align-items:center;gap:6px;min-width:0}
:where(:root[data-page="home"]) .pill{display:inline-flex;align-items:center;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.01em;line-height:1.5}
:where(:root[data-page="home"]) .pill.role-admin{background:#FAECE7;color:#993C1D}
:where(:root[data-page="home"]) .pill.role-manager{background:var(--accent-blue-lt);color:var(--accent-blue)}
:where(:root[data-page="home"]) .pill.role-user{background:var(--bg);color:var(--text3)}
:where(:root[data-page="home"]) .pill.inactive{background:var(--red-lt);color:var(--red-text)}
:where(:root[data-page="home"]) .pill.active{background:var(--green2-lt);color:var(--green2)}
:where(:root[data-page="home"]) .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--text3)}
:where(:root[data-page="home"]) .row-acts{display:flex;gap:4px;justify-content:flex-end}
:where(:root[data-page="home"]) .icon-btn{background:none;border:none;color:var(--text3);cursor:pointer;padding:6px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;transition:all .12s ease}
:where(:root[data-page="home"]) .icon-btn:hover{color:var(--text);background:var(--border)}
:where(:root[data-page="home"]) .icon-btn.danger:hover{color:var(--red);background:var(--red-lt)}
:where(:root[data-page="home"]) .icon-btn svg{width:15px;height:15px}
:where(:root[data-page="home"]) .skel{height:18px;background:linear-gradient(90deg,var(--nx-bg) 0%,#F6F8FA 50%,var(--nx-bg) 100%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite;border-radius:4px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Admin modal (edit user / facility) ────────────────────────────────── */
:where(:root[data-page="home"]) .modal-mask{position:fixed;inset:0;z-index:50;background:rgba(15,20,25,.4);backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;padding:48px 20px;animation:fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
:where(:root[data-page="home"]) .modal-mask .modal{background:var(--nx-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;max-width:580px;max-height:calc(100vh - 96px);display:flex;flex-direction:column;animation:slideUp .18s cubic-bezier(.2,.7,.2,1);padding:0;border:none}
:where(:root[data-page="home"]) .modal-mask .modal.um-wide-modal{max-width:980px}
:where(:root[data-page="home"]) .um-head{display:flex;align-items:center;gap:12px;padding:15px 24px;border-bottom:1px solid var(--border)}
:where(:root[data-page="home"]) .um-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
:where(:root[data-page="home"]) .um-head-info{min-width:0}
:where(:root[data-page="home"]) .um-head-title{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
:where(:root[data-page="home"]) .um-head-sub{font-size:12px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="home"]) .um-body{padding:18px 24px}
:where(:root[data-page="home"]) .um-wide-modal .modal-body.um-body{overflow:visible}
:where(:root[data-page="home"]) .um-cols{display:grid;grid-template-columns:1fr 1fr;gap:0}
:where(:root[data-page="home"]) .um-col{min-width:0}
:where(:root[data-page="home"]) .um-col-left{border-right:1px solid var(--border);padding-right:22px}
:where(:root[data-page="home"]) .um-cols .um-col:last-child{padding-left:22px}
:where(:root[data-page="home"]) .um-col-head{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--border)}
:where(:root[data-page="home"]) .um-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
:where(:root[data-page="home"]) .um-grid .field{margin-bottom:0}
:where(:root[data-page="home"]) .um-grid .um-wide{grid-column:1/3}
:where(:root[data-page="home"]) .um-pw{display:flex;gap:8px}
:where(:root[data-page="home"]) .um-pw input{flex:1}
:where(:root[data-page="home"]) .um-pw-btn{padding:0 14px;white-space:nowrap;font-size:12px}
:where(:root[data-page="home"]) .um-fac-block{margin-top:14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}
:where(:root[data-page="home"]) .um-fac-block>label{margin-bottom:8px}
@media(max-width:720px){
  :where(:root[data-page="home"]) .um-cols{grid-template-columns:1fr}
  :where(:root[data-page="home"]) .um-col-left{border-right:none;border-bottom:1px solid var(--border);padding-right:0;padding-bottom:16px;margin-bottom:16px}
  :where(:root[data-page="home"]) .um-cols .um-col:last-child{padding-left:0}
}
:where(:root[data-page="home"]) .modal-mask .modal h3{font-size:15px;font-weight:700;letter-spacing:-.02em;padding:20px 24px 14px;border-bottom:1px solid var(--border)}
:where(:root[data-page="home"]) .modal-body{padding:18px 24px;overflow-y:auto;flex:1 1 auto}
:where(:root[data-page="home"]) .modal-foot{padding:14px 24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--bg2);border-radius:0 0 var(--radius-xl) var(--radius-xl)}
:where(:root[data-page="home"]) .modal-foot .left{display:flex;gap:8px}
:where(:root[data-page="home"]) .modal-foot .right{display:flex;gap:8px;margin-left:auto}
:where(:root[data-page="home"]) .btn.secondary{background:var(--nx-surface);color:var(--text2);border-color:var(--border2)}
:where(:root[data-page="home"]) .btn.secondary:hover{background:var(--bg)}
:where(:root[data-page="home"]) .btn.danger{background:var(--red-text);color:var(--nx-on-brand);border-color:var(--red-text)}
:where(:root[data-page="home"]) .btn.danger:hover{background:#a81c1a}

/* ── Form fields inside the admin modal ────────────────────────────────── */
:where(:root[data-page="home"]) .field{margin-bottom:14px;display:block}
:where(:root[data-page="home"]) .field label{display:block;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
:where(:root[data-page="home"]) .field .hint{font-size:11px;color:var(--text3);margin-top:4px;line-height:1.4}
:where(:root[data-page="home"]) .field code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;background:var(--bg);padding:1px 4px;border-radius:3px}
:where(:root[data-page="home"]) .field input[type=text],:where(:root[data-page="home"]) .field input[type=email],:where(:root[data-page="home"]) .field input[type=password],:where(:root[data-page="home"]) .field input[type=number],:where(:root[data-page="home"]) .field input[type=date],:where(:root[data-page="home"]) .field input[type=datetime-local],:where(:root[data-page="home"]) .field textarea{width:100%;font-family:var(--font);font-size:13px;padding:8px 10px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--nx-surface);color:var(--text);transition:border-color .1s}
:where(:root[data-page="home"]) .field textarea{min-height:54px;line-height:1.5;resize:vertical}
:where(:root[data-page="home"]) .field input:focus,:where(:root[data-page="home"]) .field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,139,70,.08)}
:where(:root[data-page="home"]) .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
:where(:root[data-page="home"]) .check{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text2);cursor:pointer;user-select:none}
:where(:root[data-page="home"]) .check input{margin:0;width:14px;height:14px;accent-color:var(--blue)}
:where(:root[data-page="home"]) .warn-box{background:var(--amber-lt);border:1px solid #F0DCA8;color:var(--amber-text);font-size:12px;line-height:1.5;padding:9px 12px;border-radius:var(--radius);margin-bottom:14px;display:flex;gap:8px;align-items:flex-start}
:where(:root[data-page="home"]) .warn-box svg{width:14px;height:14px;flex-shrink:0;margin-top:2px}
:where(:root[data-page="home"]) .section-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin:18px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
:where(:root[data-page="home"]) .section-label:first-child{margin-top:0}

/* ── Custom dropdown widget (makeDropdown) ─────────────────────────────── */
:where(:root[data-page="home"]) .dd{position:relative;display:block;width:100%}
:where(:root[data-page="home"]) .dd-btn{display:flex;align-items:center;gap:7px;width:100%;padding:8px 11px;border:1px solid var(--border2);border-radius:7px;background:var(--nx-surface);cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--text2);transition:border-color .12s,box-shadow .12s;text-align:left;line-height:1.3;min-height:36px}
:where(:root[data-page="home"]) .dd-btn:hover{border-color:var(--text3)}
:where(:root[data-page="home"]) .dd.open .dd-btn{border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,139,70,.12)}
:where(:root[data-page="home"]) .dd.has-selection .dd-btn{border-color:var(--blue);background:var(--blue-lt);color:var(--blue-dk)}
:where(:root[data-page="home"]) .dd-btn .dd-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="home"]) .dd-btn .dd-caret{width:10px;height:10px;flex-shrink:0;transition:transform .15s ease;color:var(--text3)}
:where(:root[data-page="home"]) .dd.open .dd-btn .dd-caret{transform:rotate(180deg)}
:where(:root[data-page="home"]) .dd-menu{display:none;position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--nx-surface);border:1px solid var(--border2);border-radius:10px;box-shadow:var(--shadow-md);z-index:60;padding:6px 0;flex-direction:column;max-height:260px;min-width:200px}
:where(:root[data-page="home"]) .dd.open .dd-menu{display:flex}
:where(:root[data-page="home"]) .dd-menu>.dd-actions,:where(:root[data-page="home"]) .dd-menu>.dd-search-wrap{flex-shrink:0}
:where(:root[data-page="home"]) .dd-options{overflow-y:auto;flex:1 1 auto;min-height:0;scrollbar-width:thin}
:where(:root[data-page="home"]) .dd-options::-webkit-scrollbar{width:8px}
:where(:root[data-page="home"]) .dd-options::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
:where(:root[data-page="home"]) .dd-actions{display:flex;gap:4px;padding:4px 10px 8px;border-bottom:1px solid var(--border);margin-bottom:4px}
:where(:root[data-page="home"]) .dd-actions span{font-size:11px;font-weight:600;color:var(--blue);cursor:pointer;padding:2px 6px;border-radius:4px}
:where(:root[data-page="home"]) .dd-actions span:hover{background:var(--blue-lt)}
:where(:root[data-page="home"]) .dd-search-wrap{padding:4px 10px 6px}
:where(:root[data-page="home"]) .dd-search{width:100%;padding:6px 9px;border:1px solid var(--border2);border-radius:5px;font-family:var(--font);font-size:12px;color:var(--text);outline:none}
:where(:root[data-page="home"]) .dd-search:focus{border-color:var(--blue)}
:where(:root[data-page="home"]) .dd-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12.5px;color:var(--text2);cursor:pointer;transition:background .1s}
:where(:root[data-page="home"]) .dd-item:hover{background:var(--bg)}
:where(:root[data-page="home"]) .dd-item input[type=checkbox],:where(:root[data-page="home"]) .dd-item input[type=radio]{width:13px;height:13px;accent-color:var(--blue);cursor:pointer;flex-shrink:0;margin:0}
:where(:root[data-page="home"]) .dd-item.hide{display:none}
:where(:root[data-page="home"]) .dd-item.add-new{color:var(--blue);font-weight:600;border-top:1px solid var(--border);margin-top:4px;padding-top:8px}

/* ── User editor dropdowns: plain-input look, no green fill. Menu opens
   downward, rounded, with normal-case items (they're <label>s inside a
   .field, which would otherwise inherit the uppercase label style). ── */
:where(:root[data-page="home"]) .um-wide-modal .dd-btn{border:1.5px solid var(--border);font-weight:500;color:var(--text);background:var(--nx-surface)}
:where(:root[data-page="home"]) .um-wide-modal .dd-btn:hover{border-color:var(--border2)}
:where(:root[data-page="home"]) .um-wide-modal .dd.open .dd-btn{border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,139,70,.08)}
:where(:root[data-page="home"]) .um-wide-modal .dd.has-selection .dd-btn{border-color:var(--border);background:var(--nx-surface);color:var(--text)}
:where(:root[data-page="home"]) .um-wide-modal .dd.has-selection.open .dd-btn{border-color:var(--blue)}
:where(:root[data-page="home"]) .um-wide-modal .dd-menu{top:calc(100% + 5px);bottom:auto;left:auto;right:0;border:1px solid var(--border2);border-radius:8px;box-shadow:0 8px 24px rgba(15,20,25,.12);padding:5px 0;max-height:300px;min-width:280px;width:max-content;max-width:340px}
:where(:root[data-page="home"]) .um-wide-modal .dd.dd-up .dd-menu{top:auto;bottom:calc(100% + 5px);box-shadow:0 -8px 24px rgba(15,20,25,.12)}
:where(:root[data-page="home"]) .um-wide-modal .dd-item{white-space:nowrap}
:where(:root[data-page="home"]) .um-wide-modal .dd-item{text-transform:none;letter-spacing:0;font-weight:500;color:var(--text2);padding:8px 12px;font-size:13px}
:where(:root[data-page="home"]) .um-wide-modal .dd-item:hover{background:var(--bg)}
:where(:root[data-page="home"]) .um-wide-modal .dd-item.add-new{color:var(--blue)}

/* ── Per-company facility picker (admin user modal) ────────────────────── */
:where(:root[data-page="home"]) .fac-section-label{font-size:11px;font-weight:600;color:var(--text3);margin:0 0 7px}
:where(:root[data-page="home"]) .fac-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
:where(:root[data-page="home"]) .fac-bar:last-child{margin-bottom:0}
:where(:root[data-page="home"]) .fac-empty-hint{font-size:11.5px;color:var(--text3);font-style:italic;margin-top:2px}
:where(:root[data-page="home"]) .fac-orphan-note{font-size:11.5px;color:var(--amber-text);background:var(--amber-lt);border:1px solid #F0DCA8;border-radius:7px;padding:7px 10px;margin-top:10px;line-height:1.5}
:where(:root[data-page="home"]) .fac-co-drop{display:inline-block;position:relative}
:where(:root[data-page="home"]) .fac-co-drop .dd{display:inline-block;width:auto;min-width:170px}
:where(:root[data-page="home"]) .fac-btn.active{color:var(--nx-on-brand)}

/* ── Toast ─────────────────────────────────────────────────────────────── */
:where(:root[data-page="home"]) .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#1F2937;color:var(--nx-on-brand);font-size:13px;font-weight:500;padding:10px 18px;border-radius:8px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.2,.7,.2,1);z-index:100}
:where(:root[data-page="home"]) .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
:where(:root[data-page="home"]) .toast.err{background:#991B1B}
:where(:root[data-page="home"]) .tab-panel{display:block}

/* ── Home (no-navbar tile landing) ─────────────────────────────────────────
 * A slim top header (brand + user), then one big tile per department. Each
 * tile has a tinted icon chip, the department name, a one-line subtitle and
 * a coloured strip across the top. */
:where(:root[data-page="home"]) .home-wrap{max-width:1200px;margin:0 auto;padding:0 40px 56px}
:where(:root[data-page="home"]) .home-top{
  display:flex;align-items:center;gap:14px;
  padding:20px 0 8px;margin-bottom:20px;
}
:where(:root[data-page="home"]) .home-top .brand-ic{
  width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--blue);border-radius:var(--radius-lg);color:var(--nx-on-brand);font-weight:700;font-size:13px;letter-spacing:-.02em;
}
:where(:root[data-page="home"]) .home-top .brand-ic img{width:22px;height:25px;object-fit:contain;display:block}
:where(:root[data-page="home"]) .home-brand-name{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
:where(:root[data-page="home"]) .home-brand-name span{color:var(--blue)}
:where(:root[data-page="home"]) .home-brand-sub{font-size:11.5px;color:var(--text3);margin-top:1px}
:where(:root[data-page="home"]) .home-top-right{margin-left:auto;display:flex;align-items:center;gap:14px}
:where(:root[data-page="home"]) .home-whoami{font-size:12px;color:var(--text3)}
:where(:root[data-page="home"]) .home-whoami b{color:var(--text2);font-weight:600}
:where(:root[data-page="home"]) .home-signout{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
  color:var(--text3);text-decoration:none;padding:6px 12px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--nx-surface);transition:all .12s ease;
}
:where(:root[data-page="home"]) .home-signout:hover{color:var(--blue);border-color:var(--border2)}
:where(:root[data-page="home"]) .home-signout svg{width:14px;height:14px}

:where(:root[data-page="home"]) .home-greet{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--text);margin:6px 0 26px}

/* Big tiles, side by side. Each one opens a department. The number of
   columns follows the number of tiles, so adding a department does not
   leave one stranded on a row of its own. */
:where(:root[data-page="home"]) .home-grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
}
:where(:root[data-page="home"]) .home-tile{
  position:relative;overflow:hidden;
  display:block;text-decoration:none;background:var(--nx-surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px 24px 24px;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;
}
/* Thin colour strip across the top, in the department's colour. */
:where(:root[data-page="home"]) .home-tile::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--tile-accent,var(--blue));
  opacity:.85;
}
:where(:root[data-page="home"]) .home-tile:hover{border-color:var(--border2);box-shadow:var(--shadow-md);transform:translateY(-2px)}
:where(:root[data-page="home"]) .home-tile:hover::before{opacity:1}
:where(:root[data-page="home"]) .home-tile:focus-visible{outline:none;border-color:var(--tile-accent,var(--blue));box-shadow:0 0 0 3px rgba(1,139,70,.12)}
:where(:root[data-page="home"]) .home-tile-chip{
  width:52px;height:52px;border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;
}
:where(:root[data-page="home"]) .home-tile-chip svg{width:27px;height:27px;display:block}
:where(:root[data-page="home"]) .home-tile-name{font-size:19px;font-weight:700;color:var(--text);margin-top:18px;letter-spacing:-.02em}
:where(:root[data-page="home"]) .home-tile-sub{font-size:12.5px;color:var(--text3);margin-top:5px;line-height:1.45}
:where(:root[data-page="home"]) .home-tile-go{
  display:flex;align-items:center;gap:6px;margin-top:18px;
  font-size:12px;font-weight:600;color:var(--tile-accent,var(--blue));
}
:where(:root[data-page="home"]) .home-tile-go svg{width:13px;height:13px;transition:transform .14s ease}
:where(:root[data-page="home"]) .home-tile:hover .home-tile-go svg{transform:translateX(3px)}

:where(:root[data-page="home"]) .home-empty{
  background:var(--nx-surface);border:1px dashed var(--border2);border-radius:var(--radius-lg);
  padding:34px 24px;text-align:center;color:var(--text3);font-size:14px;line-height:1.6;
}
:where(:root[data-page="home"]) .home-admin-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:6px;
  font-size:13px;font-weight:500;color:var(--text2);text-decoration:none;
  padding:9px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--nx-surface);
  transition:all .12s ease;cursor:pointer;
}
:where(:root[data-page="home"]) .home-admin-link:hover{border-color:var(--border2);color:var(--blue)}
:where(:root[data-page="home"]) .home-admin-link svg{width:15px;height:15px}
:where(:root[data-page="home"]) .home-foot{margin-top:38px;padding-top:16px;border-top:1px solid var(--border);font-size:11.5px;color:var(--text3)}

/* Admin pane, when shown, sits inside the same centered wrap. */
:where(:root[data-page="home"]) #adminPane{max-width:1080px;margin:0 auto;padding:8px 28px 56px}
:where(:root[data-page="home"]) .home-back{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
  color:var(--text3);text-decoration:none;margin-bottom:16px;cursor:pointer;background:none;border:none;
}
:where(:root[data-page="home"]) .home-back:hover{color:var(--blue)}
:where(:root[data-page="home"]) .home-back svg{width:14px;height:14px}

@media (max-width:900px){
  :where(:root[data-page="home"]) .home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  :where(:root[data-page="home"]) .home-wrap,:where(:root[data-page="home"]) #adminPane{padding-left:16px;padding-right:16px}
  :where(:root[data-page="home"]) .home-whoami{display:none}
  :where(:root[data-page="home"]) .home-grid{grid-template-columns:1fr}
}


/* ----------------------------------------------------------------------------
 * 15.32  Payroll -- the dashboard frame
 * payroll/payroll-dashboard.php, data-page="payroll-dashboard"
 * -------------------------------------------------------------------------- */
/* ── Nexus theme tokens (layered over portal.css; brand stays CareRite green) ── */
:root:where([data-page="payroll-dashboard"]){
  --brand:var(--blue);        /* CareRite green from portal.css */
  --brand-lt:var(--blue-lt);
  color-scheme:light;
}
/* ── Dark theme ──────────────────────────────────────────────────────── */
:root[data-theme="dark"]:where([data-page="payroll-dashboard"]){
  --nx-up:#34D27B;--nx-up-bg:#16301F;
  --nx-down:#F4756B;--nx-down-bg:#3A1E1C;
  --brand:#1FB866;            /* lift brand green for contrast on dark */
  --brand-lt:#13361F;
  --nx-attn-bg:#2A2510;--nx-attn-line:#4A411C;
  color-scheme:dark;
}
:where(:root[data-page="payroll-dashboard"]) *, *:where([data-page="payroll-dashboard"]){box-sizing:border-box}
html:where([data-page="payroll-dashboard"]),:where(:root[data-page="payroll-dashboard"]) body{height:100%;margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px;overflow:hidden}
:where(:root[data-page="payroll-dashboard"]) body{overflow:hidden}
/* portal.css reserves a permanent scrollbar gutter on <html>; this page never
   scrolls at the page level, so cancel it to remove the always-on edge bar. */
html:where([data-page="payroll-dashboard"]){scrollbar-gutter:auto}
:where(:root[data-page="payroll-dashboard"]) button{font-family:inherit}

/* ── Print / Save-as-PDF ──────────────────────────────────────────
   On screen the page is locked (html/body overflow:hidden) and the real
   content scrolls inside .nx-scroll, so the browser would otherwise print
   only the visible window. For print we unlock everything, let the scroll
   area grow to its full height, and hide the app chrome (rail + topbar). */
@media print{
  @page pg-payroll-dashboard{margin:12mm}
  :where(:root[data-page="payroll-dashboard"]) *, *:where([data-page="payroll-dashboard"]){-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
  html:where([data-page="payroll-dashboard"]),:where(:root[data-page="payroll-dashboard"]) body{overflow:visible !important;height:auto !important;background:#fff !important}
  :where(:root[data-page="payroll-dashboard"]) .nx-app{display:block !important;height:auto !important;margin:0 !important;border:none !important;border-radius:0 !important;box-shadow:none !important;overflow:visible !important}
  :where(:root[data-page="payroll-dashboard"]) .nx-rail,:where(:root[data-page="payroll-dashboard"]) .nx-topbar{display:none !important}
  :where(:root[data-page="payroll-dashboard"]) .nx-main{display:block !important;height:auto !important;overflow:visible !important}
  :where(:root[data-page="payroll-dashboard"]) .nx-scroll{overflow:visible !important;height:auto !important;max-height:none !important;flex:none !important}
  :where(:root[data-page="payroll-dashboard"]) .nx-view[style*="display:none"]{display:none !important}
  :where(:root[data-page="payroll-dashboard"]) .nx-card,:where(:root[data-page="payroll-dashboard"]) .pd-kpi,:where(:root[data-page="payroll-dashboard"]) .nx-hero{break-inside:avoid}
}

/* App frame: a rounded white surface floating on the grey canvas */
:where(:root[data-page="payroll-dashboard"]) .nx-app{display:grid;grid-template-columns:248px minmax(0,1fr);height:calc(100vh - 16px);max-width:none;margin:8px;background:var(--nx-surface);border-radius:16px;overflow:hidden;box-shadow:0 16px 48px rgba(27,29,41,.10);border:1px solid var(--nx-line);transition:grid-template-columns .18s ease}
/* Collapsed sidebar: rail shrinks to an icon strip */
:where(:root[data-page="payroll-dashboard"]) .nx-app.rail-collapsed{grid-template-columns:64px minmax(0,1fr)}
@media(max-width:980px){:where(:root[data-page="payroll-dashboard"]) .nx-app{grid-template-columns:1fr;margin:0;border-radius:0;border:none;height:100vh}}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
:where(:root[data-page="payroll-dashboard"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px;overflow:hidden}
/* Collapse toggle button (sits at top of rail) */
:where(:root[data-page="payroll-dashboard"]) .nx-rail-toggle{width:32px;height:32px;flex:0 0 auto;border:1px solid var(--nx-line2);background:var(--nx-surface);border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2);margin:0 0 6px auto}
:where(:root[data-page="payroll-dashboard"]) .nx-rail-toggle:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="payroll-dashboard"]) .nx-rail-toggle svg{width:16px;height:16px;transition:transform .18s ease}
/* When collapsed: hide text labels, center icons, hide footer promo */
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-rail{padding:18px 10px;align-items:center}
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-rail-toggle{margin:0 0 8px 0}
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-rail-toggle svg{transform:rotate(180deg)}
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-brand-name,
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-navsec,
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-rail-foot{display:none}
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-brand{justify-content:center;padding:6px 0 18px}
/* nav labels are bare text nodes on the <a>; font-size:0 hides them, icons keep their own size */
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-nav{position:relative;justify-content:center;gap:0;padding:0;font-size:0;width:40px;height:40px;border-radius:10px;margin:2px auto}
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-nav svg{width:18px;height:18px;font-size:0}
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-nav .nx-badge{position:absolute;top:2px;right:4px;margin:0;font-size:9px}
/* Collapsed sub-nav: keep the page-specific buttons clickable as centered icons */
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-subnav{align-items:center;border-top:1px solid var(--nx-line2);margin-top:10px;padding-top:10px}
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-subnav-head,
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-subnav .nx-subsec{display:none}
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-subnav .nx-subitem{position:relative;justify-content:center;gap:0;padding:0;width:40px;height:40px;border-radius:10px;margin:2px auto}
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-subnav .nx-subitem span{display:none}
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-subnav .nx-subitem svg{width:17px;height:17px}
:where(:root[data-page="payroll-dashboard"]) .rail-collapsed .nx-subnav .nx-subitem .nx-sub-badge{position:absolute;top:2px;right:2px;margin:0;font-size:9px;min-width:14px;height:14px}
@media(max-width:980px){:where(:root[data-page="payroll-dashboard"]) .nx-rail{display:none}}
:where(:root[data-page="payroll-dashboard"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="payroll-dashboard"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#04a85a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
:where(:root[data-page="payroll-dashboard"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="payroll-dashboard"]) .nx-navsec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3);padding:14px 10px 6px}
:where(:root[data-page="payroll-dashboard"]) .nx-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--nx-ink2);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,color .12s}
:where(:root[data-page="payroll-dashboard"]) .nx-nav svg{width:17px;height:17px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="payroll-dashboard"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="payroll-dashboard"]) .nx-nav.active{background:var(--brand);color:#fff}
:where(:root[data-page="payroll-dashboard"]) .nx-nav.active svg{color:#fff}
:where(:root[data-page="payroll-dashboard"]) .nx-nav .nx-badge{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--nx-line2);color:var(--nx-ink2);border-radius:8px;padding:1px 7px}
:where(:root[data-page="payroll-dashboard"]) .nx-nav.active .nx-badge{background:rgba(255,255,255,.25);color:#fff}
:where(:root[data-page="payroll-dashboard"]) .nx-rail-foot{margin-top:auto;padding-top:14px}
:where(:root[data-page="payroll-dashboard"]) .nx-promo{background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:14px;padding:13px}
:where(:root[data-page="payroll-dashboard"]) .nx-promo-row{display:flex;align-items:center;gap:9px}
:where(:root[data-page="payroll-dashboard"]) .nx-promo-mark{width:30px;height:30px;border-radius:9px;background:var(--nx-elev);display:flex;align-items:center;justify-content:center}
:where(:root[data-page="payroll-dashboard"]) .nx-promo-mark svg{width:16px;height:16px;color:var(--nx-violet)}
:where(:root[data-page="payroll-dashboard"]) .nx-promo-t{font-size:12px;font-weight:700;line-height:1.2}
:where(:root[data-page="payroll-dashboard"]) .nx-promo-s{font-size:10.5px;color:var(--nx-ink2)}
:where(:root[data-page="payroll-dashboard"]) .nx-promo-btn{display:block;text-align:center;margin-top:10px;background:var(--brand);color:#fff;border:none;border-radius:9px;padding:8px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none}

/* ── Main column ─────────────────────────────────────────────────────── */
:where(:root[data-page="payroll-dashboard"]) .nx-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
:where(:root[data-page="payroll-dashboard"]) .nx-topbar{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="payroll-dashboard"]) .nx-search{flex:1 1 160px;min-width:0;max-width:340px;position:relative}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-results{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:360px;background:var(--nx-elev,#fff);border:1px solid var(--nx-line,#ECEDF2);border-radius:12px;box-shadow:0 12px 32px rgba(20,22,40,.16);padding:5px;z-index:80;max-height:360px;overflow:auto;display:none}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-results.open{display:block}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-sec{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-ink3,#9296a8);padding:8px 9px 4px}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-item{display:flex;align-items:center;gap:11px;padding:9px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--nx-ink,#1B1D29);min-width:0;border-left:3px solid transparent}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-item:hover,:where(:root[data-page="payroll-dashboard"]) .nx-qs-item.sel{background:rgba(1,139,70,.08);border-left:3px solid var(--brand,#018B46);border-radius:0 9px 9px 0}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-main{display:flex;flex-direction:column;min-width:0;gap:1px}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-num{font-size:11px;font-weight:600;color:var(--nx-ink3,#9296a8)}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-item .nx-qs-sub{margin-left:auto;flex:0 0 auto;text-align:right;font-size:11px;color:var(--nx-ink2,#5B6072);white-space:nowrap;padding-left:12px}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-ic{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-ic svg{width:15px;height:15px;color:inherit}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-ic svg *{stroke:currentColor}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-ic.page svg *{stroke:none;fill:currentColor}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-ic.req{background:rgba(1,139,70,.12);color:var(--brand,#018B46)}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-ic.page{background:rgba(91,96,114,.12);color:var(--nx-ink2,#5B6072)}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-ic.fac{background:rgba(59,130,180,.14);color:#2F6FA6}
:where(:root[data-page="payroll-dashboard"]) .nx-qs-empty{padding:14px 10px;font-size:12.5px;color:var(--nx-ink2,#5B6072);text-align:center}
:where(:root[data-page="payroll-dashboard"]) .nx-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--nx-ink3)}
:where(:root[data-page="payroll-dashboard"]) .nx-search input{width:100%;border:1px solid var(--nx-line2);background:var(--nx-rail);border-radius:10px;padding:9px 12px 9px 34px;font-size:13px;font-family:inherit;color:var(--nx-ink)}
:where(:root[data-page="payroll-dashboard"]) .nx-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="payroll-dashboard"]) .nx-top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
:where(:root[data-page="payroll-dashboard"]) .nx-theme-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--nx-line2);background:var(--nx-elev);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2)}
:where(:root[data-page="payroll-dashboard"]) .nx-theme-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="payroll-dashboard"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="payroll-dashboard"]) .nx-theme-btn .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="payroll-dashboard"]) .nx-theme-btn .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="payroll-dashboard"]) .nx-theme-btn .nx-ic-moon{display:block}
:where(:root[data-page="payroll-dashboard"]) .nx-icon-btn{position:relative;width:36px;height:36px;border-radius:10px;border:1px solid var(--nx-line2);background:var(--nx-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2)}
:where(:root[data-page="payroll-dashboard"]) .nx-icon-btn:hover{border-color:var(--nx-line2);color:var(--nx-ink)}
:where(:root[data-page="payroll-dashboard"]) .nx-icon-btn svg{width:16px;height:16px}
:where(:root[data-page="payroll-dashboard"]) .nx-filter-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;background:var(--brand);color:#fff;font-size:9.5px;font-weight:700;line-height:16px;text-align:center;border-radius:8px;border:2px solid var(--nx-surface)}
:where(:root[data-page="payroll-dashboard"]) .nx-user{position:relative;display:flex;align-items:center}
:where(:root[data-page="payroll-dashboard"]) .nx-user-av-btn{padding:0;border:none;background:none;cursor:pointer;border-radius:50%;display:flex}
:where(:root[data-page="payroll-dashboard"]) .nx-user-av{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;text-transform:uppercase}
:where(:root[data-page="payroll-dashboard"]) .nx-user-av-btn:hover .nx-user-av,:where(:root[data-page="payroll-dashboard"]) .nx-user-av-btn:focus-visible .nx-user-av{box-shadow:0 0 0 3px var(--brand-lt);outline:none}
:where(:root[data-page="payroll-dashboard"]) .nx-user-av.lg{width:38px;height:38px;font-size:13px;flex:0 0 auto}
:where(:root[data-page="payroll-dashboard"]) .nx-user-pop{position:absolute;top:calc(100% + 9px);right:0;min-width:236px;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:14px;box-shadow:0 18px 44px rgba(20,22,28,.20);padding:7px;display:none;z-index:120}
:where(:root[data-page="payroll-dashboard"]) .nx-user-pop.open{display:block;animation:pdPop .16s ease}
:where(:root[data-page="payroll-dashboard"]) .nx-user-pop-id{display:flex;align-items:center;gap:11px;padding:9px 9px 11px}
:where(:root[data-page="payroll-dashboard"]) .nx-user-pop-meta{min-width:0;line-height:1.25}
:where(:root[data-page="payroll-dashboard"]) .nx-user-pop-name{display:block;font-size:13.5px;font-weight:700;color:var(--nx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="payroll-dashboard"]) .nx-user-pop-sub{display:block;font-size:11.5px;color:var(--nx-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="payroll-dashboard"]) .nx-user-pop-sep{height:1px;background:var(--nx-line);margin:2px 4px 6px}
:where(:root[data-page="payroll-dashboard"]) .nx-user-pop-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 10px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#6B7280;text-align:left;text-decoration:none}
:where(:root[data-page="payroll-dashboard"]) .nx-user-pop-item svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="payroll-dashboard"]) .nx-user-pop-item:hover{background:var(--nx-hover)}
:where(:root[data-page="payroll-dashboard"]) .nx-user-pop-item.danger{color:#D4453B}
:where(:root[data-page="payroll-dashboard"]) .nx-user-pop-item.danger svg{color:#D4453B}

:where(:root[data-page="payroll-dashboard"]) .nx-scroll{flex:1;overflow-y:auto;padding:20px 22px 28px}
/* Track always reserved (fixed 10px) so content never shifts. Thumb is
   transparent until the pointer is over the scrollbar strip. */
:where(:root[data-page="payroll-dashboard"]) .nx-scroll::-webkit-scrollbar{width:10px;height:10px;background:transparent}
:where(:root[data-page="payroll-dashboard"]) .nx-scroll::-webkit-scrollbar-track{background:transparent}
:where(:root[data-page="payroll-dashboard"]) .nx-scroll::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
:where(:root[data-page="payroll-dashboard"]) .nx-scroll::-webkit-scrollbar-thumb:hover{background:var(--nx-ink3);background-clip:padding-box}
:where(:root[data-page="payroll-dashboard"]) .nx-scroll:hover::-webkit-scrollbar-thumb{background:var(--nx-line2);background-clip:padding-box}
:where(:root[data-page="payroll-dashboard"]) .nx-pagehead{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
:where(:root[data-page="payroll-dashboard"]) .nx-h1{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0}
:where(:root[data-page="payroll-dashboard"]) .nx-pagehead .nx-sub{font-size:12.5px;color:var(--nx-ink3)}
:where(:root[data-page="payroll-dashboard"]) .nx-pagehead-right{margin-left:auto;display:flex;gap:8px}
:where(:root[data-page="payroll-dashboard"]) .nx-pill-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-surface);border-radius:9px;padding:7px 12px;font-size:12px;font-weight:600;color:var(--nx-ink2);cursor:pointer;text-decoration:none}
:where(:root[data-page="payroll-dashboard"]) .nx-pill-btn:hover{border-color:var(--nx-line2);color:var(--nx-ink)}
:where(:root[data-page="payroll-dashboard"]) .nx-pill-btn svg{width:14px;height:14px}
:where(:root[data-page="payroll-dashboard"]) .nx-pill-btn.active{border-color:var(--brand);color:var(--brand);background:var(--brand-lt)}
:where(:root[data-page="payroll-dashboard"]) .nx-pill-badge{min-width:16px;height:16px;padding:0 5px;box-sizing:border-box;background:var(--brand);color:#fff;font-size:9.5px;font-weight:700;line-height:16px;text-align:center;border-radius:8px}

/* ── Stat cards ──────────────────────────────────────────────────────── */
:where(:root[data-page="payroll-dashboard"]) .nx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
@media(max-width:760px){:where(:root[data-page="payroll-dashboard"]) .nx-stats{grid-template-columns:1fr}}
:where(:root[data-page="payroll-dashboard"]) .pd-kpi{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:16px 17px}
:where(:root[data-page="payroll-dashboard"]) .pd-kpi-top{display:flex;align-items:center;gap:9px;margin-bottom:13px}
:where(:root[data-page="payroll-dashboard"]) .pd-kpi-chip{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center}
:where(:root[data-page="payroll-dashboard"]) .pd-kpi-chip svg{width:16px;height:16px}
:where(:root[data-page="payroll-dashboard"]) .pd-kpi-label{font-size:12.5px;font-weight:600;color:var(--nx-ink2)}
:where(:root[data-page="payroll-dashboard"]) .pd-kpi-val{font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1}
:where(:root[data-page="payroll-dashboard"]) .pd-kpi-foot{display:flex;align-items:center;gap:8px;margin-top:10px}
:where(:root[data-page="payroll-dashboard"]) .pd-kpi-delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
:where(:root[data-page="payroll-dashboard"]) .pd-kpi-delta.up{color:var(--nx-down);background:var(--nx-down-bg)}     /* cost up = red */
:where(:root[data-page="payroll-dashboard"]) .pd-kpi-delta.down{color:var(--nx-up);background:var(--nx-up-bg)}       /* cost down = green */
:where(:root[data-page="payroll-dashboard"]) .pd-kpi-sub{font-size:11px;color:var(--nx-ink3)}

/* ── Click-to-filter chips (what the page is filtered to right now) ── */
:where(:root[data-page="payroll-dashboard"]) .pd-cross{display:none;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px}
:where(:root[data-page="payroll-dashboard"]) .pd-cross.show{display:flex}
:where(:root[data-page="payroll-dashboard"]) .pd-cross-lead{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-ink3)}
:where(:root[data-page="payroll-dashboard"]) .pd-cross-chip{display:inline-flex;align-items:center;gap:7px;background:var(--brand-lt);border:1px solid var(--brand);color:var(--brand);border-radius:20px;padding:4px 5px 4px 12px;font-size:12px;font-weight:700}
:where(:root[data-page="payroll-dashboard"]) .pd-cross-chip .k{font-weight:600;opacity:.72}
:where(:root[data-page="payroll-dashboard"]) .pd-cross-chip .x{border:none;background:none;cursor:pointer;color:inherit;display:flex;padding:3px;border-radius:50%}
:where(:root[data-page="payroll-dashboard"]) .pd-cross-chip .x:hover{background:rgba(1,139,70,.16)}
:where(:root[data-page="payroll-dashboard"]) .pd-cross-chip .x svg{width:11px;height:11px}
:where(:root[data-page="payroll-dashboard"]) .pd-cross-chip.excl{background:var(--nx-down-bg,#FCEBEB);border-color:var(--nx-down,#DC2626);color:var(--nx-down,#DC2626)}
:where(:root[data-page="payroll-dashboard"]) .pd-cross-chip.excl .v{opacity:.9}
:where(:root[data-page="payroll-dashboard"]) .pd-cross-chip.excl .x:hover{background:rgba(220,38,38,.16)}
:where(:root[data-page="payroll-dashboard"]) .pd-cross-hint{font-size:11px;color:var(--nx-ink3);margin-left:2px}
:where(:root[data-page="payroll-dashboard"]) .pd-cross-clear{font-family:inherit;font-size:12px;font-weight:600;color:var(--nx-ink2);background:none;border:none;cursor:pointer;padding:5px 9px;border-radius:8px}
:where(:root[data-page="payroll-dashboard"]) .pd-cross-clear:hover{background:var(--nx-hover);color:var(--nx-ink)}

/* Things you can click for a breakdown */
:where(:root[data-page="payroll-dashboard"]) .pd-kpi.clickable{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
:where(:root[data-page="payroll-dashboard"]) .pd-kpi.clickable:hover{border-color:var(--nx-line2);box-shadow:0 6px 20px rgba(20,22,40,.09);transform:translateY(-1px)}
:where(:root[data-page="payroll-dashboard"]) .pd-kpi.clickable:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="payroll-dashboard"]) .nx-table tbody tr.pd-clickable{cursor:pointer}
:where(:root[data-page="payroll-dashboard"]) .nx-table tbody tr.pd-clickable:hover td{background:var(--nx-hover)}
:where(:root[data-page="payroll-dashboard"]) .nx-leg-row.pd-clickable{cursor:pointer;border-radius:7px;padding:2px 5px;margin:-2px -5px}
:where(:root[data-page="payroll-dashboard"]) .nx-leg-row.pd-clickable:hover{background:var(--nx-hover)}
:where(:root[data-page="payroll-dashboard"]) .nx-leg-row.pd-dim{opacity:.42}
:where(:root[data-page="payroll-dashboard"]) .nx-leg-row.pd-out .nx-leg-name,:where(:root[data-page="payroll-dashboard"]) .nx-leg-row.pd-out .nx-leg-val{opacity:.4}

/* ── Breakdown pop-up ────────────────────────────────── */
:where(:root[data-page="payroll-dashboard"]) .pd-modal-back{position:fixed;inset:0;background:rgba(24,26,38,.40);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:230}
:where(:root[data-page="payroll-dashboard"]) .pd-modal-back.open{opacity:1;visibility:visible}
:where(:root[data-page="payroll-dashboard"]) .pd-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 64px);background:var(--nx-surface);border-radius:18px;box-shadow:0 28px 80px rgba(20,22,28,.32);z-index:231;display:none;flex-direction:column;overflow:hidden}
:where(:root[data-page="payroll-dashboard"]) .pd-modal.open{display:flex;animation:pdModalIn .18s ease}
@keyframes pdModalIn{from{opacity:0;transform:translate(-50%,-46%) scale(.985)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:560px){:where(:root[data-page="payroll-dashboard"]) .pd-modal{width:calc(100vw - 16px);max-height:calc(100vh - 24px)}}
:where(:root[data-page="payroll-dashboard"]) .pd-modal-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 15px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="payroll-dashboard"]) .pd-modal-head .ic{width:34px;height:34px;border-radius:10px;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
:where(:root[data-page="payroll-dashboard"]) .pd-modal-head .ic svg{width:16px;height:16px}
:where(:root[data-page="payroll-dashboard"]) .pd-modal-htext{flex:1;min-width:0}
:where(:root[data-page="payroll-dashboard"]) .pd-modal-title{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
:where(:root[data-page="payroll-dashboard"]) .pd-modal-sub{font-size:11.5px;color:var(--nx-ink3);margin-top:2px}
:where(:root[data-page="payroll-dashboard"]) .pd-modal-x{border:none;background:none;cursor:pointer;color:var(--nx-ink3);padding:5px;border-radius:8px;display:flex;flex:0 0 auto}
:where(:root[data-page="payroll-dashboard"]) .pd-modal-x:hover{background:var(--nx-rail);color:var(--nx-ink)}
:where(:root[data-page="payroll-dashboard"]) .pd-modal-x svg{width:16px;height:16px}
:where(:root[data-page="payroll-dashboard"]) .pd-modal-body{flex:1;overflow-y:auto;padding:4px 20px 18px}
:where(:root[data-page="payroll-dashboard"]) .pd-modal-foot{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--nx-line);background:var(--nx-rail)}
:where(:root[data-page="payroll-dashboard"]) .pd-modal-foot .note{flex:1;min-width:0;font-size:11.5px;color:var(--nx-ink3)}
:where(:root[data-page="payroll-dashboard"]) .pd-drill-sec{margin-top:16px}
:where(:root[data-page="payroll-dashboard"]) .pd-drill-sec-t{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-ink3);margin-bottom:6px}
:where(:root[data-page="payroll-dashboard"]) .pd-dtable{width:100%;border-collapse:collapse;table-layout:fixed}
:where(:root[data-page="payroll-dashboard"]) .pd-dtable th{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink3);text-align:left;padding:8px 10px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="payroll-dashboard"]) .pd-dtable td{padding:10px;border-bottom:1px solid var(--nx-line);font-size:12.5px;color:var(--nx-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="payroll-dashboard"]) .pd-dtable tbody tr:last-child td{border-bottom:none}
:where(:root[data-page="payroll-dashboard"]) .pd-dtable .ta-r{text-align:right}
:where(:root[data-page="payroll-dashboard"]) .pd-dtable .num{font-weight:700;letter-spacing:-.02em}
:where(:root[data-page="payroll-dashboard"]) .pd-dtable .muted{color:var(--nx-ink3)}
:where(:root[data-page="payroll-dashboard"]) .pd-dtable tbody tr.pd-clickable{cursor:pointer}
:where(:root[data-page="payroll-dashboard"]) .pd-dtable tbody tr.pd-clickable:hover td{background:var(--nx-hover)}
:where(:root[data-page="payroll-dashboard"]) .pd-dtable tbody tr.pd-sum td{background:var(--nx-rail);font-weight:700;border-bottom:none}
:where(:root[data-page="payroll-dashboard"]) .pd-dtable tbody tr.pd-on td{background:var(--brand-lt)}
:where(:root[data-page="payroll-dashboard"]) .pd-dtable tbody tr.pd-out td{color:var(--nx-ink3);opacity:.6}
:where(:root[data-page="payroll-dashboard"]) .pd-dt-empty{color:var(--nx-ink3);text-align:center;padding:18px 10px;font-size:12.5px}
:where(:root[data-page="payroll-dashboard"]) .pd-tagpill{display:inline-block;font-size:10.5px;font-weight:700;border-radius:20px;padding:2px 8px}
/* Department names in the middle of the donut can be long — keep them on one line. */
:where(:root[data-page="payroll-dashboard"]) .nx-donut-center .l{max-width:78%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Panels ──────────────────────────────────────────────────────────── */
:where(:root[data-page="payroll-dashboard"]) .nx-row{display:grid;gap:16px;margin-bottom:16px;align-items:start}
:where(:root[data-page="payroll-dashboard"]) .nx-row.cols-2-1{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
:where(:root[data-page="payroll-dashboard"]) .nx-row.cols-1-1{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:stretch}
@media(max-width:980px){:where(:root[data-page="payroll-dashboard"]) .nx-row.cols-2-1,:where(:root[data-page="payroll-dashboard"]) .nx-row.cols-1-1{grid-template-columns:1fr}}
:where(:root[data-page="payroll-dashboard"]) .nx-card{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);display:flex;flex-direction:column}
:where(:root[data-page="payroll-dashboard"]) .nx-card>.nx-chart-wrap.sm{flex:1 1 auto;height:auto;min-height:230px}
:where(:root[data-page="payroll-dashboard"]) .nx-card-head{display:flex;align-items:center;gap:10px;padding:15px 17px}
:where(:root[data-page="payroll-dashboard"]) .nx-card-ic{width:26px;height:26px;border-radius:8px;background:var(--nx-rail);border:1px solid var(--nx-line2);display:flex;align-items:center;justify-content:center;color:var(--nx-ink2)}
:where(:root[data-page="payroll-dashboard"]) .nx-card-ic svg{width:14px;height:14px}
:where(:root[data-page="payroll-dashboard"]) .nx-chart-toggle{cursor:pointer;padding:0;font-family:inherit;transition:background .12s,color .12s,border-color .12s}
:where(:root[data-page="payroll-dashboard"]) .nx-chart-toggle:hover{background:var(--nx-hover);color:var(--brand);border-color:var(--brand)}
:where(:root[data-page="payroll-dashboard"]) .nx-chart-toggle:active{transform:scale(.94)}
:where(:root[data-page="payroll-dashboard"]) .nx-card-title{font-size:13.5px;font-weight:700}
:where(:root[data-page="payroll-dashboard"]) .nx-card-head .nx-card-right{margin-left:auto;display:flex;align-items:center;gap:8px}
:where(:root[data-page="payroll-dashboard"]) .nx-tag{font-size:11px;font-weight:600;color:var(--nx-ink2);border:1px solid var(--nx-line2);border-radius:8px;padding:5px 10px}
:where(:root[data-page="payroll-dashboard"]) .nx-link{font-size:12px;font-weight:600;color:var(--nx-violet);text-decoration:none}
:where(:root[data-page="payroll-dashboard"]) .nx-card-body{padding:4px 17px 17px}
:where(:root[data-page="payroll-dashboard"]) .nx-hero-figure{padding:0 17px}
:where(:root[data-page="payroll-dashboard"]) .nx-hero-num{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1}
:where(:root[data-page="payroll-dashboard"]) .nx-hero-meta{display:flex;align-items:center;gap:8px;margin-top:8px;margin-bottom:6px}
:where(:root[data-page="payroll-dashboard"]) .nx-chart-wrap{position:relative;height:290px;padding:6px 8px 10px}
:where(:root[data-page="payroll-dashboard"]) .nx-chart-wrap canvas{max-height:100%}
:where(:root[data-page="payroll-dashboard"]) .nx-chart-wrap.sm{height:230px}

/* donut + legend */
:where(:root[data-page="payroll-dashboard"]) .nx-donut-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 17px 18px}
:where(:root[data-page="payroll-dashboard"]) .nx-donut{position:relative;width:100%;max-width:300px;aspect-ratio:1/1;height:auto;flex:0 0 auto;margin:0 auto}
:where(:root[data-page="payroll-dashboard"]) .nx-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
:where(:root[data-page="payroll-dashboard"]) .nx-donut-center .v{font-size:28px;font-weight:800;letter-spacing:-.02em}
:where(:root[data-page="payroll-dashboard"]) .nx-donut-center .l{font-size:10px;color:var(--nx-ink3);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
:where(:root[data-page="payroll-dashboard"]) .nx-legend{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
/* Pie mode: size to content so the legend fits. The row sibling is matched via
   JS (nxSyncRowHeights) so both cards share the taller height, and reset back
   to the fixed chart height when neither is in pie mode. */
:where(:root[data-page="payroll-dashboard"]) .nx-chart-wrap.pie-mode,:where(:root[data-page="payroll-dashboard"]) .nx-chart-wrap.sm.pie-mode{height:auto}
:where(:root[data-page="payroll-dashboard"]) .nx-leg-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px}
:where(:root[data-page="payroll-dashboard"]) .nx-leg-dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
:where(:root[data-page="payroll-dashboard"]) .nx-leg-name{font-size:12px;color:var(--nx-ink2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="payroll-dashboard"]) .nx-leg-val{font-size:12px;font-weight:700;letter-spacing:-.02em}

/* table */
:where(:root[data-page="payroll-dashboard"]) .nx-table{width:100%;border-collapse:collapse;table-layout:fixed}
:where(:root[data-page="payroll-dashboard"]) .nx-table col.c-name{width:auto}
:where(:root[data-page="payroll-dashboard"]) .nx-table col.c-count{width:21%}
:where(:root[data-page="payroll-dashboard"]) .nx-table col.c-share{width:20%}
:where(:root[data-page="payroll-dashboard"]) .nx-table col.c-amount{width:21%}
:where(:root[data-page="payroll-dashboard"]) .nx-table th,:where(:root[data-page="payroll-dashboard"]) .nx-table td{overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="payroll-dashboard"]) .nx-table .ta-r{text-align:right}
:where(:root[data-page="payroll-dashboard"]) .nx-table thead th{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3);text-align:left;padding:10px 17px;background:var(--nx-rail);border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="payroll-dashboard"]) .nx-table tbody td{padding:13px 17px;border-bottom:1px solid var(--nx-line);font-size:12.5px;vertical-align:middle}
:where(:root[data-page="payroll-dashboard"]) .nx-table tbody tr:last-child td{border-bottom:none}
/* Make the requests+punches card fill its row (no bottom white space) and
   distribute the rows of both tables evenly across the available height. */
:where(:root[data-page="payroll-dashboard"]) #reqBody,:where(:root[data-page="payroll-dashboard"]) #punBody{display:flex;flex-direction:column;flex:1 1 auto}
:where(:root[data-page="payroll-dashboard"]) #reqBody>.nx-table,:where(:root[data-page="payroll-dashboard"]) #punBody>.nx-table{flex:1 1 auto}
:where(:root[data-page="payroll-dashboard"]) #reqBody>.nx-table tbody tr,:where(:root[data-page="payroll-dashboard"]) #punBody>.nx-table tbody tr{height:1px}
:where(:root[data-page="payroll-dashboard"]) #reqBody>.nx-table tbody td,:where(:root[data-page="payroll-dashboard"]) #punBody>.nx-table tbody td{vertical-align:middle}
:where(:root[data-page="payroll-dashboard"]) .nx-row-ic{display:inline-flex;align-items:center;gap:9px;font-weight:600}
:where(:root[data-page="payroll-dashboard"]) .nx-row-ic .ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
:where(:root[data-page="payroll-dashboard"]) .nx-row-ic .ic svg{width:15px;height:15px}
:where(:root[data-page="payroll-dashboard"]) .nx-meter{display:inline-block;vertical-align:middle;height:6px;width:90px;border-radius:4px;background:var(--nx-line);overflow:hidden}
:where(:root[data-page="payroll-dashboard"]) .nx-meter span{display:block;height:6px;border-radius:4px}
:where(:root[data-page="payroll-dashboard"]) .nx-num{font-weight:700;letter-spacing:-.02em}
:where(:root[data-page="payroll-dashboard"]) .nx-muted{color:var(--nx-ink3)}
:where(:root[data-page="payroll-dashboard"]) .pd-loading,:where(:root[data-page="payroll-dashboard"]) .pd-empty{padding:22px 17px;font-size:12.5px;color:var(--nx-ink3);text-align:center}

/* attention banner (kept; restyled) */
:where(:root[data-page="payroll-dashboard"]) .pd-attn{display:none;gap:10px;flex-wrap:wrap;background:var(--nx-attn-bg,#FFF8E8);border:1px solid var(--nx-attn-line,#F3E2AE);border-radius:var(--nx-radius);padding:12px 15px;margin-bottom:16px}
:where(:root[data-page="payroll-dashboard"]) .pd-attn.show{display:flex}
:where(:root[data-page="payroll-dashboard"]) .pd-attn-title{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:var(--amber-text);text-transform:uppercase;letter-spacing:.04em;width:100%}
:where(:root[data-page="payroll-dashboard"]) .pd-attn-title svg{width:15px;height:15px}
:where(:root[data-page="payroll-dashboard"]) .pd-attn-item{display:inline-flex;align-items:center;gap:7px;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:20px;padding:6px 13px;font-size:12.5px;color:var(--nx-ink);text-decoration:none;font-weight:500}
:where(:root[data-page="payroll-dashboard"]) .pd-attn-item:hover{border-color:var(--nx-line2)}
:where(:root[data-page="payroll-dashboard"]) .pd-attn-dot{width:8px;height:8px;border-radius:50%}
:where(:root[data-page="payroll-dashboard"]) .pd-attn-dot.red{background:var(--nx-down)}:where(:root[data-page="payroll-dashboard"]) .pd-attn-dot.amber{background:var(--amber)}

/* ── Filter drawer + backdrop ────────────────────────────────────────── */
:where(:root[data-page="payroll-dashboard"]) .pd-backdrop{position:fixed;inset:0;background:rgba(24,26,38,.40);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;z-index:200}
:where(:root[data-page="payroll-dashboard"]) .pd-backdrop.open{opacity:1;visibility:visible}
/* a floating card drawer, inset from the edges */
:where(:root[data-page="payroll-dashboard"]) .pd-drawer{position:fixed;top:14px;bottom:14px;right:14px;width:min(390px,calc(100vw - 28px));background:var(--nx-surface);border-radius:18px;box-shadow:0 24px 70px rgba(20,22,28,.28);transform:translateX(calc(100% + 18px));transition:transform .26s cubic-bezier(.22,.61,.36,1);z-index:201;display:flex;flex-direction:column;overflow:hidden}
:where(:root[data-page="payroll-dashboard"]) .pd-drawer.open{transform:translateX(0)}
@media(max-width:560px){:where(:root[data-page="payroll-dashboard"]) .pd-drawer{top:0;bottom:0;right:0;border-radius:0;width:100vw}}
:where(:root[data-page="payroll-dashboard"]) .pd-drawer-head{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 16px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="payroll-dashboard"]) .pd-drawer-head .ic{width:34px;height:34px;border-radius:10px;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
:where(:root[data-page="payroll-dashboard"]) .pd-drawer-head .ic svg{width:16px;height:16px}
:where(:root[data-page="payroll-dashboard"]) .pd-drawer-htext{flex:1;min-width:0}
:where(:root[data-page="payroll-dashboard"]) .pd-drawer-title{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
:where(:root[data-page="payroll-dashboard"]) .pd-drawer-sub{font-size:11.5px;color:var(--nx-ink3);margin-top:2px}
:where(:root[data-page="payroll-dashboard"]) .pd-drawer-x{border:none;background:none;cursor:pointer;color:var(--nx-ink3);padding:5px;border-radius:8px;display:flex;flex:0 0 auto}
:where(:root[data-page="payroll-dashboard"]) .pd-drawer-x:hover{background:var(--nx-rail);color:var(--nx-ink)}
:where(:root[data-page="payroll-dashboard"]) .pd-drawer-x svg{width:16px;height:16px}
:where(:root[data-page="payroll-dashboard"]) .pd-drawer-body{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:22px}
:where(:root[data-page="payroll-dashboard"]) .pd-drawer-foot{display:flex;gap:10px;padding:14px 20px;border-top:1px solid var(--nx-line);background:var(--nx-rail)}
:where(:root[data-page="payroll-dashboard"]) .pd-drawer-foot .nx-btn{flex:1}
:where(:root[data-page="payroll-dashboard"]) .nx-btn{justify-content:center;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:11px;padding:10px 14px;font-size:13px;font-weight:600;color:var(--nx-ink);cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s}
:where(:root[data-page="payroll-dashboard"]) .nx-btn:hover{border-color:var(--nx-line2)}
:where(:root[data-page="payroll-dashboard"]) .nx-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="payroll-dashboard"]) .nx-btn.primary:hover{background:var(--blue-dk);box-shadow:0 4px 14px rgba(1,139,70,.28)}

:where(:root[data-page="payroll-dashboard"]) .pd-field{display:flex;flex-direction:column;gap:9px}
:where(:root[data-page="payroll-dashboard"]) .pd-field-head{display:flex;align-items:center;gap:8px}
:where(:root[data-page="payroll-dashboard"]) .pd-field-head label{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--nx-ink2)}
:where(:root[data-page="payroll-dashboard"]) .pd-field-count{font-size:10.5px;font-weight:700;color:var(--brand);background:var(--brand-lt);border-radius:20px;padding:1px 8px}
:where(:root[data-page="payroll-dashboard"]) .pd-field-note{display:block;font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--nx-ink3);margin-top:-2px}
:where(:root[data-page="payroll-dashboard"]) .pd-preset-row{display:flex;flex-wrap:wrap;gap:7px}
:where(:root[data-page="payroll-dashboard"]) .pd-preset{font-family:inherit;font-size:12px;font-weight:500;color:var(--nx-ink2);background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:18px;padding:6px 13px;cursor:pointer;transition:all .12s}
:where(:root[data-page="payroll-dashboard"]) .pd-preset:hover{border-color:var(--nx-line2);color:var(--nx-ink)}
:where(:root[data-page="payroll-dashboard"]) .pd-preset.active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
:where(:root[data-page="payroll-dashboard"]) .pd-preset.loading{opacity:.6}
:where(:root[data-page="payroll-dashboard"]) .pd-date-row{display:flex;align-items:center;gap:8px}
:where(:root[data-page="payroll-dashboard"]) .pd-date{flex:1;min-width:0;font-family:inherit;font-size:12.5px;color:var(--nx-ink);border:1px solid var(--nx-line2);border-radius:10px;padding:9px 11px;background:var(--nx-elev)}
:where(:root[data-page="payroll-dashboard"]) .pd-date:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="payroll-dashboard"]) .pd-date-sep{font-size:11.5px;color:var(--nx-ink3)}

/* ── Searchable-select popups ────────────────────────────────────────── */
:where(:root[data-page="payroll-dashboard"]) select.dt-native-hidden,:where(:root[data-page="payroll-dashboard"]) select[data-dt-multi]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:where(:root[data-page="payroll-dashboard"]) .dt-combo{position:relative;display:block;width:100%}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-btn{display:flex;align-items:center;gap:8px;width:100%;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:11px;padding:10px 13px;font-size:13px;color:var(--nx-ink);cursor:pointer;font-family:inherit;text-align:left;transition:border-color .12s,box-shadow .12s}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-btn .dt-combo-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-btn .dt-combo-caret{flex:0 0 auto;width:13px;height:13px;color:var(--nx-ink3);transition:transform .18s}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-btn:hover{border-color:var(--nx-line2)}
:where(:root[data-page="payroll-dashboard"]) .dt-combo.open .dt-combo-btn{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="payroll-dashboard"]) .dt-combo.open .dt-combo-caret{transform:rotate(180deg);color:var(--brand)}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-btn.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-pop{position:absolute;z-index:210;top:calc(100% + 7px);left:0;width:100%;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:14px;box-shadow:0 18px 44px rgba(20,22,28,.20);overflow:hidden;display:none;transform-origin:top;animation:none}
:where(:root[data-page="payroll-dashboard"]) .dt-combo.open .dt-combo-pop{display:block;animation:pdPop .16s ease}
@keyframes pdPop{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-search{padding:11px 11px 9px;border-bottom:1px solid var(--nx-line);position:relative}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-search svg{position:absolute;left:21px;top:50%;transform:translateY(-30%);width:14px;height:14px;color:var(--nx-ink3);pointer-events:none}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-search input{width:100%;box-sizing:border-box;padding:8px 10px 8px 31px;font-size:13px;font-family:inherit;color:var(--nx-ink);border:1px solid var(--nx-line2);border-radius:9px;background:var(--nx-rail)}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-search input:focus{outline:none;border-color:var(--brand);background:var(--nx-elev);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-list{max-height:266px;overflow-y:auto;padding:6px}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--nx-ink);white-space:nowrap;transition:background .1s}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-opt:hover,:where(:root[data-page="payroll-dashboard"]) .dt-combo-opt.active{background:var(--nx-rail)}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-opt.selected{color:var(--brand);font-weight:600;background:var(--brand-lt)}
/* checkbox-style indicator on the left for multi-selects */
:where(:root[data-page="payroll-dashboard"]) .dt-combo-opt .dt-combo-check{order:-1;flex:0 0 auto;width:17px;height:17px;border-radius:6px;border:1.6px solid var(--nx-line2);color:#fff;display:flex;align-items:center;justify-content:center;opacity:1;background:var(--nx-elev);transition:background .12s,border-color .12s}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-opt .dt-combo-check svg{width:11px;height:11px;opacity:0;transition:opacity .1s}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-opt.selected .dt-combo-check{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-opt.selected .dt-combo-check svg{opacity:1}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-opt[data-value=""] .dt-combo-check{display:none}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-empty{padding:16px 12px;text-align:center;color:var(--nx-ink3);font-size:13px}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-foot{display:flex;align-items:center;gap:8px;padding:7px 9px;border-top:1px solid var(--nx-line);background:var(--nx-rail)}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-clear,:where(:root[data-page="payroll-dashboard"]) .dt-combo-mode{font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;border-radius:8px;padding:6px 11px;background:none;border:none;color:var(--nx-ink2)}
:where(:root[data-page="payroll-dashboard"]) .dt-combo-clear:hover,:where(:root[data-page="payroll-dashboard"]) .dt-combo-mode:hover{color:var(--brand);background:var(--brand-lt)}
/* The one/several switch sits at the right, under the list it changes. */
:where(:root[data-page="payroll-dashboard"]) .dt-combo-mode{margin-left:auto}

/* ── Embedded page iframe (right pane swaps to full pages) ───────────── */
:where(:root[data-page="payroll-dashboard"]) .nx-frame-wrap{flex:1;position:relative;min-height:0;overflow:hidden;background:var(--nx-surface)}
:where(:root[data-page="payroll-dashboard"]) .nx-frame{width:calc(100% + 22px);height:100%;border:0;display:block;background:var(--nx-surface);overflow:hidden}
:where(:root[data-page="payroll-dashboard"]) .nx-frames{position:absolute;inset:0}
:where(:root[data-page="payroll-dashboard"]) .nx-frames .nx-frame{position:absolute;inset:0;width:calc(100% + 22px);height:100%;opacity:0;transition:opacity .18s ease}
:where(:root[data-page="payroll-dashboard"]) .nx-frames .nx-frame:not(.active){opacity:0;pointer-events:none;z-index:0}
:where(:root[data-page="payroll-dashboard"]) .nx-frames .nx-frame.active{opacity:1;z-index:1}
:where(:root[data-page="payroll-dashboard"]) .nx-frame-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--nx-ink3);background:var(--nx-surface);z-index:3;opacity:1;transition:opacity .2s ease}
:where(:root[data-page="payroll-dashboard"]) .nx-frame-wrap.loaded .nx-frame-load{opacity:0;pointer-events:none}
/* Right pane views fade instead of hard-swapping */
:where(:root[data-page="payroll-dashboard"]) .nx-view{transition:opacity .18s ease}
:where(:root[data-page="payroll-dashboard"]) .nx-view.nx-hide{opacity:0;pointer-events:none}

/* Page-specific action buttons lifted into the shell header */
:where(:root[data-page="payroll-dashboard"]) .nx-page-actions{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0;flex:0 1 auto;overflow:hidden}
:where(:root[data-page="payroll-dashboard"]) .nx-page-actions:empty{margin-left:0}
:where(:root[data-page="payroll-dashboard"]) .nx-page-actions .nx-pbtn{height:36px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:10px;padding:0 12px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1}
:where(:root[data-page="payroll-dashboard"]) .nx-page-actions .nx-pbtn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="payroll-dashboard"]) .nx-page-actions .nx-pbtn svg{width:14px;height:14px}
:where(:root[data-page="payroll-dashboard"]) .nx-page-actions .nx-pbtn.primary{border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="payroll-dashboard"]) .nx-page-actions .nx-pbtn.primary:hover{background:var(--brand-lt)}
/* Mirror the embedded page's spinner animation so loading buttons (e.g. the
   Department Totals "Syncing…" button) actually spin once lifted into the
   shell header — the .dt-spin class rides along in the button HTML, but its
   keyframes live in the page, so we redefine them here. */
:where(:root[data-page="payroll-dashboard"]) .nx-page-actions .dt-spin{animation:dt-spin .7s linear infinite}
@keyframes dt-spin{to{transform:rotate(360deg)}}
/* Spinner for the top-bar download button while a PDF is generating. */
:where(:root[data-page="payroll-dashboard"]) .nx-theme-btn .dt-spin{animation:dt-spin .7s linear infinite}

/* Always-visible Filter button in the top bar (combined scope + filter pill) */
:where(:root[data-page="payroll-dashboard"]) .nx-filter-btn{position:relative;height:36px;display:inline-flex;align-items:center;gap:9px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:10px;padding:0 13px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1}
:where(:root[data-page="payroll-dashboard"]) .nx-filter-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="payroll-dashboard"]) .nx-filter-btn svg{width:15px;height:15px;flex:none}
:where(:root[data-page="payroll-dashboard"]) .nx-filter-btn.has-filters{border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="payroll-dashboard"]) .nx-filter-btn .nx-pill-badge{position:static;margin-left:1px}
:where(:root[data-page="payroll-dashboard"]) .pd-scope-part{color:var(--nx-ink2);font-size:13px;display:inline-flex;align-items:center;gap:6px;max-width:none;white-space:nowrap}
:where(:root[data-page="payroll-dashboard"]) #pdScopeLabel{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
/* Long facility names shorten with an ellipsis; the date always shows in full. */
:where(:root[data-page="payroll-dashboard"]) .nx-filter-btn .pd-scope-fac{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="payroll-dashboard"]) .nx-filter-btn .pd-scope-sep,:where(:root[data-page="payroll-dashboard"]) .nx-filter-btn .pd-scope-date{flex:none}
@media(max-width:900px){:where(:root[data-page="payroll-dashboard"]) .nx-filter-btn .pd-scope-fac{max-width:110px}}
:where(:root[data-page="payroll-dashboard"]) .nx-filter-btn .pd-scope-fac{color:var(--nx-ink);font-weight:600}
:where(:root[data-page="payroll-dashboard"]) .nx-filter-btn .pd-scope-sep,:where(:root[data-page="payroll-dashboard"]) .nx-filter-btn .pd-scope-date{color:#7D8293;font-weight:600}
:root[data-theme="dark"]:where([data-page="payroll-dashboard"]) .nx-filter-btn .pd-scope-sep,:root[data-theme="dark"]:where([data-page="payroll-dashboard"]) .nx-filter-btn .pd-scope-date{color:#98A0B2}
:where(:root[data-page="payroll-dashboard"]) .nx-filter-btn .pd-scope-part .pd-pin{color:var(--brand)}
:where(:root[data-page="payroll-dashboard"]) .pd-filter-sep{width:1px;height:16px;flex:none;background:var(--nx-line2)}
@media(max-width:620px){:where(:root[data-page="payroll-dashboard"]) .nx-filter-btn .pd-scope-fac{max-width:80px}}
/* when page actions are present, the top-actions group shouldn't also push left */
:where(:root[data-page="payroll-dashboard"]) .nx-page-actions:not(:empty) ~ .nx-top-actions{margin-left:14px}

/* Page sub-nav in the left rail */
:where(:root[data-page="payroll-dashboard"]) .nx-subnav{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:10px;border-top:1px solid var(--nx-line2)}
:where(:root[data-page="payroll-dashboard"]) .nx-subnav:empty{display:none;border-top:none;margin-top:0;padding-top:0}
:where(:root[data-page="payroll-dashboard"]) .nx-subnav-head{font-size:11px;font-weight:700;letter-spacing:-.01em;color:var(--nx-ink);padding:2px 10px 7px;display:flex;align-items:center;gap:7px}
:where(:root[data-page="payroll-dashboard"]) .nx-subnav-head::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--brand);flex:0 0 auto}
:where(:root[data-page="payroll-dashboard"]) .nx-subnav .nx-subsec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3);padding:9px 10px 4px}
:where(:root[data-page="payroll-dashboard"]) .nx-subnav .nx-subitem{display:flex;align-items:center;gap:11px;padding:8px 11px 8px 18px;border-radius:10px;color:var(--nx-ink2);font-size:12.5px;font-weight:500;cursor:pointer;border:none;background:none;font-family:inherit;width:100%;text-align:left}
:where(:root[data-page="payroll-dashboard"]) .nx-subnav .nx-subitem .nx-sub-badge{margin-left:auto;background:#E5322D;color:#fff;font-size:10px;font-weight:700;border-radius:999px;min-width:16px;height:16px;padding:0 5px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:0 0 auto}
:where(:root[data-page="payroll-dashboard"]) .nx-subnav .nx-subitem svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="payroll-dashboard"]) .nx-subnav .nx-subitem:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="payroll-dashboard"]) .nx-subnav .nx-subitem.active{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="payroll-dashboard"]) .nx-subnav .nx-subitem.active svg{color:var(--brand)}

:where(:root[data-page="payroll-dashboard"]) body{page:pg-payroll-dashboard}


/* ----------------------------------------------------------------------------
 * 15.33  Accounting -- the Financials dashboard frame
 * accounting/financials-dashboard.php, data-page="financials-dashboard"
 * -------------------------------------------------------------------------- */
/* ── Nexus theme tokens (layered over portal.css; brand stays CareRite green) ── */
:root:where([data-page="financials-dashboard"]){
  --brand:#185FA5;
  --brand-lt:#E3EBF5;
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="financials-dashboard"]){
  --nx-up:#34D27B;--nx-up-bg:#16301F;
  --nx-down:#F4756B;--nx-down-bg:#3A1E1C;
  --brand:#4F97E0;
  --brand-lt:#16283C;
  color-scheme:dark;
}
:where(:root[data-page="financials-dashboard"]) *, *:where([data-page="financials-dashboard"]){box-sizing:border-box}
html:where([data-page="financials-dashboard"]),:where(:root[data-page="financials-dashboard"]) body{height:100%;margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px;overflow:hidden}
:where(:root[data-page="financials-dashboard"]) body{overflow:hidden}
html:where([data-page="financials-dashboard"]){scrollbar-gutter:auto}
:where(:root[data-page="financials-dashboard"]) button{font-family:inherit}

@media print{
  @page pg-financials-dashboard{margin:12mm}
  :where(:root[data-page="financials-dashboard"]) *, *:where([data-page="financials-dashboard"]){-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
  html:where([data-page="financials-dashboard"]),:where(:root[data-page="financials-dashboard"]) body{overflow:visible !important;height:auto !important;background:#fff !important}
  :where(:root[data-page="financials-dashboard"]) .nx-app{display:block !important;height:auto !important;margin:0 !important;border:none !important;border-radius:0 !important;box-shadow:none !important;overflow:visible !important}
  :where(:root[data-page="financials-dashboard"]) .nx-rail,:where(:root[data-page="financials-dashboard"]) .nx-topbar{display:none !important}
  :where(:root[data-page="financials-dashboard"]) .nx-main{display:block !important;height:auto !important;overflow:visible !important}
  :where(:root[data-page="financials-dashboard"]) .nx-scroll{overflow:visible !important;height:auto !important;max-height:none !important;flex:none !important}
  :where(:root[data-page="financials-dashboard"]) .nx-view[style*="display:none"]{display:none !important}
  :where(:root[data-page="financials-dashboard"]) .nx-card,:where(:root[data-page="financials-dashboard"]) .pd-kpi{break-inside:avoid}
}

/* App frame */
:where(:root[data-page="financials-dashboard"]) .nx-app{display:grid;grid-template-columns:248px minmax(0,1fr);height:calc(100vh - 16px);max-width:none;margin:8px;background:var(--nx-surface);border-radius:16px;overflow:hidden;box-shadow:0 16px 48px rgba(27,29,41,.10);border:1px solid var(--nx-line);transition:grid-template-columns .18s ease}
:where(:root[data-page="financials-dashboard"]) .nx-app.rail-collapsed{grid-template-columns:64px minmax(0,1fr)}
@media(max-width:980px){:where(:root[data-page="financials-dashboard"]) .nx-app{grid-template-columns:1fr;margin:0;border-radius:0;border:none;height:100vh}}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
:where(:root[data-page="financials-dashboard"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px;overflow:hidden}
:where(:root[data-page="financials-dashboard"]) .nx-rail-toggle{width:32px;height:32px;flex:0 0 auto;border:1px solid var(--nx-line2);background:var(--nx-surface);border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2);margin:0 0 6px auto}
:where(:root[data-page="financials-dashboard"]) .nx-rail-toggle:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .nx-rail-toggle svg{width:16px;height:16px;transition:transform .18s ease}
:where(:root[data-page="financials-dashboard"]) .rail-collapsed .nx-rail{padding:18px 10px;align-items:center}
:where(:root[data-page="financials-dashboard"]) .rail-collapsed .nx-rail-toggle{margin:0 0 8px 0}
:where(:root[data-page="financials-dashboard"]) .rail-collapsed .nx-rail-toggle svg{transform:rotate(180deg)}
:where(:root[data-page="financials-dashboard"]) .rail-collapsed .nx-brand-name,
:where(:root[data-page="financials-dashboard"]) .rail-collapsed .nx-navsec{display:none}
:where(:root[data-page="financials-dashboard"]) .rail-collapsed .nx-brand{justify-content:center;padding:6px 0 18px}
:where(:root[data-page="financials-dashboard"]) .rail-collapsed .nx-nav{position:relative;justify-content:center;gap:0;padding:0;font-size:0;width:40px;height:40px;border-radius:10px;margin:2px auto}
:where(:root[data-page="financials-dashboard"]) .rail-collapsed .nx-nav svg{width:18px;height:18px;font-size:0}
@media(max-width:980px){:where(:root[data-page="financials-dashboard"]) .nx-rail{display:none}}
:where(:root[data-page="financials-dashboard"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="financials-dashboard"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#0B4C86);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
:where(:root[data-page="financials-dashboard"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .nx-navsec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3);padding:14px 10px 6px}
:where(:root[data-page="financials-dashboard"]) .nx-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--nx-ink2);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,color .12s}
:where(:root[data-page="financials-dashboard"]) .nx-nav svg{width:17px;height:17px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="financials-dashboard"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .nx-nav.active{background:var(--brand);color:#fff}
:where(:root[data-page="financials-dashboard"]) .nx-nav.active svg{color:#fff}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0;flex:0 1 auto;overflow:hidden}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions:empty{margin-left:0}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-pbtn{height:36px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:10px;padding:0 12px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1;white-space:nowrap}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-pbtn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-pbtn svg{width:14px;height:14px}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-pbtn.primary{border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-pbtn.primary:hover{background:var(--brand-lt)}
/* A two-way switch sent up by the open page (e.g. Dollars / PPD). */
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-seg-ctl{position:relative;display:inline-flex;height:36px;border:1px solid var(--nx-line2);border-radius:10px;background:var(--nx-surface);padding:3px;box-sizing:border-box}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-seg-ind{position:absolute;top:3px;left:0;width:0;height:calc(100% - 6px);background:var(--brand-lt);border-radius:8px;transition:left .18s ease,width .18s ease;z-index:0;pointer-events:none}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-seg{position:relative;z-index:1;border:none;background:transparent;color:var(--nx-ink2);font-family:inherit;font-size:12.5px;font-weight:600;padding:0 14px;border-radius:8px;cursor:pointer;line-height:1;white-space:nowrap;transition:color .18s ease}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-seg:hover:not(.active){color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-seg.active{color:var(--brand);font-weight:700}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions:not(:empty) ~ .nx-top-actions{margin-left:14px}
:where(:root[data-page="financials-dashboard"]) .nx-subnav{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:10px;border-top:1px solid var(--nx-line2)}
:where(:root[data-page="financials-dashboard"]) .nx-subnav:empty{display:none;border-top:none;margin-top:0;padding-top:0}
:where(:root[data-page="financials-dashboard"]) .nx-subnav-head{font-size:11px;font-weight:700;letter-spacing:-.01em;color:var(--nx-ink);padding:2px 10px 7px;display:flex;align-items:center;gap:7px}
:where(:root[data-page="financials-dashboard"]) .nx-subnav-head::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--brand);flex:0 0 auto}
:where(:root[data-page="financials-dashboard"]) .nx-subnav .nx-subsec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3);padding:9px 10px 4px}
:where(:root[data-page="financials-dashboard"]) .nx-subnav .nx-subitem{display:flex;align-items:center;gap:11px;padding:8px 11px 8px 18px;border-radius:10px;color:var(--nx-ink2);font-size:12.5px;font-weight:500;cursor:pointer;border:none;background:none;font-family:inherit;width:100%;text-align:left}
:where(:root[data-page="financials-dashboard"]) .nx-subnav .nx-subitem svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="financials-dashboard"]) .nx-subnav .nx-subitem:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .nx-subnav .nx-subitem.active{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="financials-dashboard"]) .nx-subnav .nx-subitem.active svg{color:var(--brand)}
/* An item that is listed but not yours. It stays in the menu so nobody has to
   wonder where the page went; it just does not take a click. The rail is
   overflow:hidden, so a hover note beside it would be cut off - the reason is
   printed on the item instead, as a small tag that is always there. */
:where(:root[data-page="financials-dashboard"]) .nx-subnav .nx-subitem.locked{color:var(--nx-ink3);opacity:.6;cursor:not-allowed}
:where(:root[data-page="financials-dashboard"]) .nx-subnav .nx-subitem.locked:hover{background:none;color:var(--nx-ink3)}
:where(:root[data-page="financials-dashboard"]) .nx-subnav .nx-subitem.locked span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="financials-dashboard"]) .nx-sublock{margin-left:auto;flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--nx-ink3);background:var(--nx-hover);
  border:1px solid var(--nx-line2);border-radius:20px;padding:2px 7px}
:where(:root[data-page="financials-dashboard"]) .rail-collapsed .nx-sublock{display:none}
:where(:root[data-page="financials-dashboard"]) .rail-collapsed .nx-subnav{align-items:center;border-top:1px solid var(--nx-line2);margin-top:10px;padding-top:10px}
:where(:root[data-page="financials-dashboard"]) .rail-collapsed .nx-subnav-head,
:where(:root[data-page="financials-dashboard"]) .rail-collapsed .nx-subnav .nx-subsec{display:none}
:where(:root[data-page="financials-dashboard"]) .rail-collapsed .nx-subnav .nx-subitem{position:relative;justify-content:center;gap:0;padding:0;width:40px;height:40px;border-radius:10px;margin:2px auto}
:where(:root[data-page="financials-dashboard"]) .rail-collapsed .nx-subnav .nx-subitem span{display:none}
:where(:root[data-page="financials-dashboard"]) .rail-collapsed .nx-subnav .nx-subitem svg{width:17px;height:17px}

/* ── Main column ─────────────────────────────────────────────────────── */
:where(:root[data-page="financials-dashboard"]) .nx-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
:where(:root[data-page="financials-dashboard"]) .nx-topbar{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="financials-dashboard"]) .nx-topname{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--nx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
:where(:root[data-page="financials-dashboard"]) .nx-top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
:where(:root[data-page="financials-dashboard"]) .nx-top-actions .nx-pbtn{height:36px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:10px;padding:0 12px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1;white-space:nowrap}
:where(:root[data-page="financials-dashboard"]) .nx-top-actions .nx-pbtn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .nx-top-actions .nx-pbtn svg{width:14px;height:14px;flex:none}
:where(:root[data-page="financials-dashboard"]) .nx-top-actions .nx-pbtn:disabled{opacity:.6;cursor:default}
:where(:root[data-page="financials-dashboard"]) .nx-theme-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--nx-line2);background:var(--nx-elev);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2)}
:where(:root[data-page="financials-dashboard"]) .nx-theme-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="financials-dashboard"]) .nx-theme-btn .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="financials-dashboard"]) .nx-theme-btn .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="financials-dashboard"]) .nx-theme-btn .nx-ic-moon{display:block}
:where(:root[data-page="financials-dashboard"]) .nx-user{position:relative;display:flex;align-items:center}
:where(:root[data-page="financials-dashboard"]) .nx-user-av-btn{padding:0;border:none;background:none;cursor:pointer;border-radius:50%;display:flex}
:where(:root[data-page="financials-dashboard"]) .nx-user-av{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;text-transform:uppercase}
:where(:root[data-page="financials-dashboard"]) .nx-user-av-btn:hover .nx-user-av,:where(:root[data-page="financials-dashboard"]) .nx-user-av-btn:focus-visible .nx-user-av{box-shadow:0 0 0 3px var(--brand-lt);outline:none}
:where(:root[data-page="financials-dashboard"]) .nx-user-av.lg{width:38px;height:38px;font-size:13px;flex:0 0 auto}
:where(:root[data-page="financials-dashboard"]) .nx-user-pop{position:absolute;top:calc(100% + 9px);right:0;min-width:236px;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:14px;box-shadow:0 18px 44px rgba(20,22,28,.20);padding:7px;display:none;z-index:120}
:where(:root[data-page="financials-dashboard"]) .nx-user-pop.open{display:block;animation:pdPop .16s ease}
:where(:root[data-page="financials-dashboard"]) .nx-user-pop-id{display:flex;align-items:center;gap:11px;padding:9px 9px 11px}
:where(:root[data-page="financials-dashboard"]) .nx-user-pop-meta{min-width:0;line-height:1.25}
:where(:root[data-page="financials-dashboard"]) .nx-user-pop-name{display:block;font-size:13.5px;font-weight:700;color:var(--nx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="financials-dashboard"]) .nx-user-pop-sub{display:block;font-size:11.5px;color:var(--nx-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="financials-dashboard"]) .nx-user-pop-sep{height:1px;background:var(--nx-line);margin:2px 4px 6px}
:where(:root[data-page="financials-dashboard"]) .nx-user-pop-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 10px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#6B7280;text-align:left;text-decoration:none}
:where(:root[data-page="financials-dashboard"]) .nx-user-pop-item svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="financials-dashboard"]) .nx-user-pop-item:hover{background:var(--nx-hover)}
:where(:root[data-page="financials-dashboard"]) .nx-user-pop-item.danger{color:#D4453B}
:where(:root[data-page="financials-dashboard"]) .nx-user-pop-item.danger svg{color:#D4453B}

:where(:root[data-page="financials-dashboard"]) .nx-scroll{flex:1;overflow-y:auto;padding:20px 22px 28px}
:where(:root[data-page="financials-dashboard"]) .nx-scroll::-webkit-scrollbar{width:10px;height:10px;background:transparent}
:where(:root[data-page="financials-dashboard"]) .nx-scroll::-webkit-scrollbar-track{background:transparent}
:where(:root[data-page="financials-dashboard"]) .nx-scroll::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
:where(:root[data-page="financials-dashboard"]) .nx-scroll::-webkit-scrollbar-thumb:hover{background:var(--nx-ink3);background-clip:padding-box}
:where(:root[data-page="financials-dashboard"]) .nx-scroll:hover::-webkit-scrollbar-thumb{background:var(--nx-line2);background-clip:padding-box}
:where(:root[data-page="financials-dashboard"]) .nx-pagehead{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
:where(:root[data-page="financials-dashboard"]) .nx-h1{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0}
:where(:root[data-page="financials-dashboard"]) .nx-pill-badge{min-width:16px;height:16px;padding:0 5px;box-sizing:border-box;background:var(--brand);color:#fff;font-size:9.5px;font-weight:700;line-height:16px;text-align:center;border-radius:8px}

/* ── Stat cards ──────────────────────────────────────────────────────── */
:where(:root[data-page="financials-dashboard"]) .nx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
@media(max-width:1100px){:where(:root[data-page="financials-dashboard"]) .nx-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){:where(:root[data-page="financials-dashboard"]) .nx-stats{grid-template-columns:1fr}}
:where(:root[data-page="financials-dashboard"]) .pd-kpi{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:16px 17px}
:where(:root[data-page="financials-dashboard"]) .pd-kpi-top{display:flex;align-items:center;gap:9px;margin-bottom:13px}
:where(:root[data-page="financials-dashboard"]) .pd-kpi-chip{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center}
:where(:root[data-page="financials-dashboard"]) .pd-kpi-chip svg{width:16px;height:16px}
:where(:root[data-page="financials-dashboard"]) .pd-kpi-label{font-size:12.5px;font-weight:600;color:var(--nx-ink2)}
:where(:root[data-page="financials-dashboard"]) .pd-kpi-val{font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1}
:where(:root[data-page="financials-dashboard"]) .pd-kpi-sub{display:block;font-size:11px;color:var(--nx-ink3);margin-top:9px}

/* ── Panels ──────────────────────────────────────────────────────────── */
:where(:root[data-page="financials-dashboard"]) .nx-row{display:grid;gap:16px;margin-bottom:16px;align-items:start}
:where(:root[data-page="financials-dashboard"]) .nx-row.cols-2-1{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
:where(:root[data-page="financials-dashboard"]) .nx-row.cols-1-1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:980px){:where(:root[data-page="financials-dashboard"]) .nx-row.cols-2-1,:where(:root[data-page="financials-dashboard"]) .nx-row.cols-1-1{grid-template-columns:1fr}}
:where(:root[data-page="financials-dashboard"]) .nx-card{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);display:flex;flex-direction:column}
:where(:root[data-page="financials-dashboard"]) .nx-card-head{display:flex;align-items:center;gap:10px;padding:15px 17px}
:where(:root[data-page="financials-dashboard"]) .nx-card-ic{width:26px;height:26px;border-radius:8px;background:var(--nx-rail);border:1px solid var(--nx-line2);display:flex;align-items:center;justify-content:center;color:var(--nx-ink2)}
:where(:root[data-page="financials-dashboard"]) .nx-card-ic svg{width:14px;height:14px}
:where(:root[data-page="financials-dashboard"]) .nx-card-title{font-size:13.5px;font-weight:700}
:where(:root[data-page="financials-dashboard"]) .nx-card-head .nx-card-right{margin-left:auto;display:flex;align-items:center;gap:8px}
:where(:root[data-page="financials-dashboard"]) .nx-tag{font-size:11px;font-weight:600;color:var(--nx-ink2);border:1px solid var(--nx-line2);border-radius:8px;padding:5px 10px}
:where(:root[data-page="financials-dashboard"]) .nx-chart-wrap{position:relative;height:290px;padding:6px 8px 10px}
:where(:root[data-page="financials-dashboard"]) .nx-chart-wrap canvas{max-height:100%}
:where(:root[data-page="financials-dashboard"]) .nx-chart-wrap.sm{height:230px}
:where(:root[data-page="financials-dashboard"]) .nx-donut-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 17px 18px}
:where(:root[data-page="financials-dashboard"]) .nx-donut{position:relative;width:100%;max-width:280px;aspect-ratio:1/1;height:auto;flex:0 0 auto;margin:0 auto}
:where(:root[data-page="financials-dashboard"]) .nx-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
:where(:root[data-page="financials-dashboard"]) .nx-donut-center .v{font-size:24px;font-weight:800;letter-spacing:-.02em}
:where(:root[data-page="financials-dashboard"]) .nx-donut-center .l{font-size:10px;color:var(--nx-ink3);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;max-width:78%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="financials-dashboard"]) .nx-legend{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
:where(:root[data-page="financials-dashboard"]) .nx-leg-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px}
:where(:root[data-page="financials-dashboard"]) .nx-leg-dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
:where(:root[data-page="financials-dashboard"]) .nx-leg-name{font-size:12px;color:var(--nx-ink2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="financials-dashboard"]) .nx-leg-val{font-size:12px;font-weight:700;letter-spacing:-.02em}
:where(:root[data-page="financials-dashboard"]) .pd-loading,:where(:root[data-page="financials-dashboard"]) .pd-empty{padding:22px 17px;font-size:12.5px;color:var(--nx-ink3);text-align:center}

/* ── Filter drawer + backdrop ────────────────────────────────────────── */
:where(:root[data-page="financials-dashboard"]) .pd-backdrop{position:fixed;inset:0;background:rgba(24,26,38,.40);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;z-index:200}
:where(:root[data-page="financials-dashboard"]) .pd-backdrop.open{opacity:1;visibility:visible}
:where(:root[data-page="financials-dashboard"]) .pd-drawer{position:fixed;top:14px;bottom:14px;right:14px;width:min(390px,calc(100vw - 28px));background:var(--nx-surface);border-radius:18px;box-shadow:0 24px 70px rgba(20,22,28,.28);transform:translateX(calc(100% + 18px));transition:transform .26s cubic-bezier(.22,.61,.36,1);z-index:201;display:flex;flex-direction:column;overflow:hidden}
:where(:root[data-page="financials-dashboard"]) .pd-drawer.open{transform:translateX(0)}
@media(max-width:560px){:where(:root[data-page="financials-dashboard"]) .pd-drawer{top:0;bottom:0;right:0;border-radius:0;width:100vw}}
:where(:root[data-page="financials-dashboard"]) .pd-drawer-head{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 16px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="financials-dashboard"]) .pd-drawer-head .ic{width:34px;height:34px;border-radius:10px;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
:where(:root[data-page="financials-dashboard"]) .pd-drawer-head .ic svg{width:16px;height:16px}
:where(:root[data-page="financials-dashboard"]) .pd-drawer-htext{flex:1;min-width:0}
:where(:root[data-page="financials-dashboard"]) .pd-drawer-title{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
:where(:root[data-page="financials-dashboard"]) .pd-drawer-sub{font-size:11.5px;color:var(--nx-ink3);margin-top:2px}
:where(:root[data-page="financials-dashboard"]) .pd-drawer-x{border:none;background:none;cursor:pointer;color:var(--nx-ink3);padding:5px;border-radius:8px;display:flex;flex:0 0 auto}
:where(:root[data-page="financials-dashboard"]) .pd-drawer-x:hover{background:var(--nx-rail);color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .pd-drawer-x svg{width:16px;height:16px}
:where(:root[data-page="financials-dashboard"]) .pd-drawer-body{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:22px}
:where(:root[data-page="financials-dashboard"]) .pd-drawer-foot{display:flex;gap:10px;padding:14px 20px;border-top:1px solid var(--nx-line);background:var(--nx-rail)}
:where(:root[data-page="financials-dashboard"]) .pd-drawer-foot .nx-btn{flex:1}
:where(:root[data-page="financials-dashboard"]) .nx-btn{justify-content:center;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:11px;padding:10px 14px;font-size:13px;font-weight:600;color:var(--nx-ink);cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s}
:where(:root[data-page="financials-dashboard"]) .nx-btn:hover{border-color:var(--nx-line2)}
:where(:root[data-page="financials-dashboard"]) .nx-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="financials-dashboard"]) .nx-btn.primary:hover{box-shadow:0 4px 14px rgba(24,95,165,.30)}

:where(:root[data-page="financials-dashboard"]) .pd-field{display:flex;flex-direction:column;gap:9px}
:where(:root[data-page="financials-dashboard"]) .pd-field-head{display:flex;align-items:center;gap:8px}
:where(:root[data-page="financials-dashboard"]) .pd-field-head label{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--nx-ink2)}
:where(:root[data-page="financials-dashboard"]) .pd-field-note{display:block;font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--nx-ink3);margin-top:-2px}
/* Which month the presets are counting back from, and whose it is. */
:where(:root[data-page="financials-dashboard"]) .pd-anchor-note{font-size:11px;font-weight:500;line-height:1.5;color:var(--nx-ink3);margin:8px 0 0}
:where(:root[data-page="financials-dashboard"]) .pd-anchor-note b{font-weight:600;color:var(--nx-ink2)}
:where(:root[data-page="financials-dashboard"]) .pd-preset-row{display:flex;flex-wrap:wrap;gap:7px}
:where(:root[data-page="financials-dashboard"]) .pd-preset{font-family:inherit;font-size:12px;font-weight:500;color:var(--nx-ink2);background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:18px;padding:6px 13px;cursor:pointer;transition:all .12s}
:where(:root[data-page="financials-dashboard"]) .pd-preset:hover{border-color:var(--nx-line2);color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .pd-preset.active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
:where(:root[data-page="financials-dashboard"]) .pd-date-row{display:flex;align-items:center;gap:8px}
:where(:root[data-page="financials-dashboard"]) .pd-date{flex:1;min-width:0;font-family:inherit;font-size:12.5px;color:var(--nx-ink);border:1px solid var(--nx-line2);border-radius:10px;padding:9px 11px;background:var(--nx-elev)}
:where(:root[data-page="financials-dashboard"]) .pd-date:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="financials-dashboard"]) .pd-date-sep{font-size:11.5px;color:var(--nx-ink3)}

/* ── Searchable-select popups ────────────────────────────────────────── */
:where(:root[data-page="financials-dashboard"]) select.dt-native-hidden,:where(:root[data-page="financials-dashboard"]) select[data-dt-multi]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:where(:root[data-page="financials-dashboard"]) .dt-combo{position:relative;display:block;width:100%}
:where(:root[data-page="financials-dashboard"]) .dt-combo-btn{display:flex;align-items:center;gap:8px;width:100%;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:11px;padding:10px 13px;font-size:13px;color:var(--nx-ink);cursor:pointer;font-family:inherit;text-align:left;transition:border-color .12s,box-shadow .12s}
:where(:root[data-page="financials-dashboard"]) .dt-combo-btn .dt-combo-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
:where(:root[data-page="financials-dashboard"]) .dt-combo-btn .dt-combo-caret{flex:0 0 auto;width:13px;height:13px;color:var(--nx-ink3);transition:transform .18s}
:where(:root[data-page="financials-dashboard"]) .dt-combo-btn:hover{border-color:var(--nx-line2)}
:where(:root[data-page="financials-dashboard"]) .dt-combo.open .dt-combo-btn{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="financials-dashboard"]) .dt-combo.open .dt-combo-caret{transform:rotate(180deg);color:var(--brand)}
:where(:root[data-page="financials-dashboard"]) .dt-combo-btn.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
:where(:root[data-page="financials-dashboard"]) .dt-combo-pop{position:absolute;z-index:210;top:calc(100% + 7px);left:0;width:100%;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:14px;box-shadow:0 18px 44px rgba(20,22,28,.20);overflow:hidden;display:none;transform-origin:top;animation:none}
:where(:root[data-page="financials-dashboard"]) .dt-combo.open .dt-combo-pop{display:block;animation:pdPop .16s ease}
@keyframes pdPop{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
:where(:root[data-page="financials-dashboard"]) .dt-combo-search{padding:11px 11px 9px;border-bottom:1px solid var(--nx-line);position:relative}
:where(:root[data-page="financials-dashboard"]) .dt-combo-search svg{position:absolute;left:21px;top:50%;transform:translateY(-30%);width:14px;height:14px;color:var(--nx-ink3);pointer-events:none}
:where(:root[data-page="financials-dashboard"]) .dt-combo-search input{width:100%;box-sizing:border-box;padding:8px 10px 8px 31px;font-size:13px;font-family:inherit;color:var(--nx-ink);border:1px solid var(--nx-line2);border-radius:9px;background:var(--nx-rail)}
:where(:root[data-page="financials-dashboard"]) .dt-combo-search input:focus{outline:none;border-color:var(--brand);background:var(--nx-elev);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="financials-dashboard"]) .dt-combo-list{max-height:266px;overflow-y:auto;padding:6px}
:where(:root[data-page="financials-dashboard"]) .dt-combo-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--nx-ink);white-space:nowrap;transition:background .1s}
:where(:root[data-page="financials-dashboard"]) .dt-combo-opt:hover,:where(:root[data-page="financials-dashboard"]) .dt-combo-opt.active{background:var(--nx-rail)}
:where(:root[data-page="financials-dashboard"]) .dt-combo-opt.selected{color:var(--brand);font-weight:600;background:var(--brand-lt)}
:where(:root[data-page="financials-dashboard"]) .dt-combo-opt .dt-combo-check{order:-1;flex:0 0 auto;width:17px;height:17px;border-radius:6px;border:1.6px solid var(--nx-line2);color:#fff;display:flex;align-items:center;justify-content:center;opacity:1;background:var(--nx-elev);transition:background .12s,border-color .12s}
:where(:root[data-page="financials-dashboard"]) .dt-combo-opt .dt-combo-check svg{width:11px;height:11px;opacity:0;transition:opacity .1s}
:where(:root[data-page="financials-dashboard"]) .dt-combo-opt.selected .dt-combo-check{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="financials-dashboard"]) .dt-combo-opt.selected .dt-combo-check svg{opacity:1}
:where(:root[data-page="financials-dashboard"]) .dt-combo-opt[data-value=""] .dt-combo-check{display:none}
:where(:root[data-page="financials-dashboard"]) .dt-combo-empty{padding:16px 12px;text-align:center;color:var(--nx-ink3);font-size:13px}
:where(:root[data-page="financials-dashboard"]) .dt-combo-foot{display:flex;align-items:center;padding:7px 9px;border-top:1px solid var(--nx-line);background:var(--nx-rail)}
:where(:root[data-page="financials-dashboard"]) .dt-combo-clear{font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;border-radius:8px;padding:6px 11px;background:none;border:none;color:var(--nx-ink2)}
:where(:root[data-page="financials-dashboard"]) .dt-combo-clear:hover{color:var(--brand);background:var(--brand-lt)}
:where(:root[data-page="financials-dashboard"]) .dt-combo-foot .dt-combo-clear{margin-left:auto}
/* The two switches at the foot of the facility list. Styled here rather
   than left as tick boxes so they read as part of the site. */
:where(:root[data-page="financials-dashboard"]) .dt-combo-mode{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:12px;
               font-weight:600;cursor:pointer;border-radius:8px;padding:6px 10px;background:none;
               border:none;color:var(--nx-ink2)}
:where(:root[data-page="financials-dashboard"]) .dt-combo-mode:hover{color:var(--brand);background:var(--brand-lt)}
:where(:root[data-page="financials-dashboard"]) .dt-combo-mode .dt-combo-box{flex:0 0 auto;width:15px;height:15px;border-radius:5px;
               border:1.6px solid var(--nx-line2);background:var(--nx-elev);color:#fff;
               display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
:where(:root[data-page="financials-dashboard"]) .dt-combo-mode .dt-combo-box svg{width:10px;height:10px;opacity:0;transition:opacity .1s}
:where(:root[data-page="financials-dashboard"]) .dt-combo-mode.on{color:var(--brand)}
:where(:root[data-page="financials-dashboard"]) .dt-combo-mode.on .dt-combo-box{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="financials-dashboard"]) .dt-combo-mode.on .dt-combo-box svg{opacity:1}
:where(:root[data-page="financials-dashboard"]) .dt-combo-mode[disabled]{opacity:.45;cursor:default}
:where(:root[data-page="financials-dashboard"]) .dt-combo-mode[disabled]:hover{color:var(--nx-ink2);background:none}

/* ── Embedded page iframe ────────────────────────────────────────────── */
:where(:root[data-page="financials-dashboard"]) .nx-frame-wrap{flex:1;position:relative;min-height:0;overflow:hidden;background:var(--nx-surface)}
:where(:root[data-page="financials-dashboard"]) .nx-frames{position:absolute;inset:0}
/* Frames are no longer made 22px wider to hide the page's scrollbar -
   that clipped a different amount on each page and made the content shift
   between tabs. The pages now bring their own thin scrollbar instead. */
/* Shown and hidden outright. A frame parked on a see-through layer keeps a
   picture of itself that the browser will not always redraw when the
   window changes size, which left the report as a blank white sheet.
   Hidden this way the page inside is still loaded and still where it was
   left - it simply is not drawn. */
:where(:root[data-page="financials-dashboard"]) .nx-frames .nx-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--nx-surface);overflow:hidden;visibility:hidden;z-index:0;pointer-events:none}
:where(:root[data-page="financials-dashboard"]) .nx-frames .nx-frame.active{visibility:visible;z-index:1;pointer-events:auto}
:where(:root[data-page="financials-dashboard"]) .nx-frame-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--nx-ink3);background:var(--nx-surface);z-index:3;opacity:1;transition:opacity .2s ease}
:where(:root[data-page="financials-dashboard"]) .nx-frame-wrap.loaded .nx-frame-load{opacity:0;pointer-events:none}
:where(:root[data-page="financials-dashboard"]) .nx-view{transition:opacity .18s ease}
:where(:root[data-page="financials-dashboard"]) .nx-view.nx-hide{opacity:0;pointer-events:none}

/* Header action buttons */
:where(:root[data-page="financials-dashboard"]) .nx-page-actions{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0;flex:0 1 auto;overflow:hidden}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-pbtn{height:36px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:10px;padding:0 12px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1;white-space:nowrap}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-pbtn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-pbtn svg{width:14px;height:14px;flex:none}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-pbtn.primary{border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-pbtn.primary:hover{background:var(--brand-lt)}
:where(:root[data-page="financials-dashboard"]) .nx-page-actions .nx-pbtn:disabled{opacity:.6;cursor:default}
:where(:root[data-page="financials-dashboard"]) .fd-spin{animation:fd-spin .7s linear infinite}
@keyframes fd-spin{to{transform:rotate(360deg)}}
:where(:root[data-page="financials-dashboard"]) .nx-theme-btn .fd-spin{animation:fd-spin .7s linear infinite}

/* Filter button (combined scope + filter pill) */
:where(:root[data-page="financials-dashboard"]) .nx-filter-btn{position:relative;height:36px;display:inline-flex;align-items:center;gap:9px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:10px;padding:0 13px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1}
:where(:root[data-page="financials-dashboard"]) .nx-filter-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .nx-filter-btn svg{width:15px;height:15px;flex:none}
:where(:root[data-page="financials-dashboard"]) .nx-filter-btn.has-filters{border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="financials-dashboard"]) .nx-filter-btn .nx-pill-badge{position:static;margin-left:1px}
:where(:root[data-page="financials-dashboard"]) .pd-scope-part{color:var(--nx-ink2);font-size:13px;display:inline-flex;align-items:center;gap:6px;max-width:none;white-space:nowrap}
:where(:root[data-page="financials-dashboard"]) #pdScopeLabel{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
:where(:root[data-page="financials-dashboard"]) .nx-filter-btn .pd-scope-fac{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nx-ink);font-weight:600}
:where(:root[data-page="financials-dashboard"]) .nx-filter-btn .pd-scope-sep,:where(:root[data-page="financials-dashboard"]) .nx-filter-btn .pd-scope-date{flex:none;color:#7D8293;font-weight:600}
:root[data-theme="dark"]:where([data-page="financials-dashboard"]) .nx-filter-btn .pd-scope-sep,:root[data-theme="dark"]:where([data-page="financials-dashboard"]) .nx-filter-btn .pd-scope-date{color:#98A0B2}
:where(:root[data-page="financials-dashboard"]) .nx-filter-btn .pd-scope-part .pd-pin{color:var(--brand)}
:where(:root[data-page="financials-dashboard"]) .pd-filter-sep{width:1px;height:16px;flex:none;background:var(--nx-line2)}
@media(max-width:900px){:where(:root[data-page="financials-dashboard"]) .nx-filter-btn .pd-scope-fac{max-width:110px}}
@media(max-width:620px){:where(:root[data-page="financials-dashboard"]) .nx-filter-btn .pd-scope-fac{max-width:80px}}

/* ── Confirm pop-up (custom, no browser confirm) ─────────────────────── */
:where(:root[data-page="financials-dashboard"]) .pd-modal-back{position:fixed;inset:0;background:rgba(24,26,38,.40);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:230}
:where(:root[data-page="financials-dashboard"]) .pd-modal-back.open{opacity:1;visibility:visible}
:where(:root[data-page="financials-dashboard"]) .pd-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));background:var(--nx-surface);border-radius:18px;box-shadow:0 28px 80px rgba(20,22,28,.32);z-index:231;display:none;flex-direction:column;overflow:hidden}
:where(:root[data-page="financials-dashboard"]) .pd-modal.open{display:flex;animation:pdModalIn .18s ease}
@keyframes pdModalIn{from{opacity:0;transform:translate(-50%,-46%) scale(.985)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
:where(:root[data-page="financials-dashboard"]) .pd-modal-head{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 15px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="financials-dashboard"]) .pd-modal-head .ic{width:34px;height:34px;border-radius:10px;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
:where(:root[data-page="financials-dashboard"]) .pd-modal-head .ic svg{width:16px;height:16px}
:where(:root[data-page="financials-dashboard"]) .pd-modal-htext{flex:1;min-width:0}
:where(:root[data-page="financials-dashboard"]) .pd-modal-title{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
:where(:root[data-page="financials-dashboard"]) .pd-modal-sub{font-size:11.5px;color:var(--nx-ink3);margin-top:2px}
:where(:root[data-page="financials-dashboard"]) .pd-modal-x{border:none;background:none;cursor:pointer;color:var(--nx-ink3);padding:5px;border-radius:8px;display:flex;flex:0 0 auto}
:where(:root[data-page="financials-dashboard"]) .pd-modal-x:hover{background:var(--nx-rail);color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .pd-modal-x svg{width:16px;height:16px}
:where(:root[data-page="financials-dashboard"]) .pd-modal-body{flex:1;overflow-y:auto;padding:16px 20px;font-size:13px;color:var(--nx-ink2);line-height:1.55}
:where(:root[data-page="financials-dashboard"]) .pd-modal-body b{color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .pd-modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:12px 20px;border-top:1px solid var(--nx-line);background:var(--nx-rail)}
:where(:root[data-page="financials-dashboard"]) .fd-pick{margin-bottom:14px}
:where(:root[data-page="financials-dashboard"]) .fd-pick-lbl{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--nx-ink3);margin-bottom:7px}
:where(:root[data-page="financials-dashboard"]) .fd-pick-search{position:relative;margin-bottom:8px}
:where(:root[data-page="financials-dashboard"]) .fd-pick-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--nx-ink3);pointer-events:none}
:where(:root[data-page="financials-dashboard"]) .fd-pick-search input{width:100%;box-sizing:border-box;padding:8px 10px 8px 31px;border:1px solid var(--nx-line2);border-radius:10px;background:var(--nx-surface);color:var(--nx-ink);font:inherit;font-size:13px;outline:none}
:where(:root[data-page="financials-dashboard"]) .fd-pick-search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="financials-dashboard"]) .fd-pick-list{max-height:186px;overflow-y:auto;border:1px solid var(--nx-line);border-radius:12px;padding:4px}
:where(:root[data-page="financials-dashboard"]) .fd-pick-row{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;text-align:left;border:none;background:none;cursor:pointer;padding:8px 9px;border-radius:9px;color:var(--nx-ink);font:inherit;font-size:13px}
:where(:root[data-page="financials-dashboard"]) .fd-pick-row:hover{background:var(--nx-hover)}
:where(:root[data-page="financials-dashboard"]) .fd-pick-row .tick{width:16px;height:16px;flex:0 0 auto;border:1.5px solid var(--nx-line2);border-radius:50%;display:flex;align-items:center;justify-content:center}
:where(:root[data-page="financials-dashboard"]) .fd-pick-row .tick svg{width:9px;height:9px;color:#fff;opacity:0}
:where(:root[data-page="financials-dashboard"]) .fd-pick-row.sel{background:var(--brand-lt)}
:where(:root[data-page="financials-dashboard"]) .fd-pick-row.sel .tick{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="financials-dashboard"]) .fd-pick-row.sel .tick svg{opacity:1}
:where(:root[data-page="financials-dashboard"]) .fd-pick-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="financials-dashboard"]) .fd-pick-row .co{font-size:11px;color:var(--nx-ink3);flex:0 0 auto}
:where(:root[data-page="financials-dashboard"]) .fd-pick-empty{padding:14px 10px;font-size:12.5px;color:var(--nx-ink3);text-align:center}
:where(:root[data-page="financials-dashboard"]) .fd-pick-err{color:var(--nx-down);font-size:12.5px;margin-top:9px;display:none}
/* Opening balances pop-up */
:where(:root[data-page="financials-dashboard"]) .fd-ob-note{font-size:12.5px;color:var(--nx-ink2);margin:12px 0 4px;line-height:1.45}
:where(:root[data-page="financials-dashboard"]) .fd-ob-note.err{color:var(--nx-down)}
:where(:root[data-page="financials-dashboard"]) .fd-ob-years{border:1px solid var(--nx-line);border-radius:12px;padding:4px;margin-top:8px;max-height:150px;overflow-y:auto}
:where(:root[data-page="financials-dashboard"]) .fd-ob-yrow{display:flex;align-items:baseline;gap:10px;padding:6px 9px;border-radius:8px;font-size:12.5px;color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .fd-ob-yrow:nth-child(even){background:var(--nx-hover)}
:where(:root[data-page="financials-dashboard"]) .fd-ob-yrow .y{font-weight:700;min-width:70px}
:where(:root[data-page="financials-dashboard"]) .fd-ob-yrow .a{color:var(--nx-ink3);flex:1}
:where(:root[data-page="financials-dashboard"]) .fd-ob-yrow .n{font-variant-numeric:tabular-nums;font-weight:600;margin-left:auto}
:where(:root[data-page="financials-dashboard"]) .fd-ob-yrow .stale{color:var(--nx-down);font-size:11.5px;font-weight:600}
:where(:root[data-page="financials-dashboard"]) .fd-ob-yrow.err .a{color:var(--nx-down)}
:where(:root[data-page="financials-dashboard"]) .fd-ob-yrow.total{border-top:1px solid var(--nx-line);border-radius:0;margin-top:2px;padding-top:8px;background:none}
:where(:root[data-page="financials-dashboard"]) .fd-ob-results{margin-top:10px}
:where(:root[data-page="financials-dashboard"]) .fd-ob-results:empty{display:none}
:where(:root[data-page="financials-dashboard"]) .fd-pick-err.show{display:block}
:where(:root[data-page="financials-dashboard"]) .fd-pick-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
:where(:root[data-page="financials-dashboard"]) .fd-pick-head .fd-pick-lbl{margin-bottom:0;flex:1;min-width:0}
:where(:root[data-page="financials-dashboard"]) .fd-pick-mini{border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);font:inherit;font-size:11px;font-weight:600;padding:3px 8px;border-radius:7px;cursor:pointer;white-space:nowrap}
:where(:root[data-page="financials-dashboard"]) .fd-pick-mini:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .fd-pick-mini.on{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="financials-dashboard"]) .fd-pick-mini.on:hover{background:var(--brand);color:#fff;filter:brightness(1.08)}
:where(:root[data-page="financials-dashboard"]) .fd-chunk-note{font-size:11.5px;color:var(--nx-ink3);line-height:1.45;margin-top:6px}
:where(:root[data-page="financials-dashboard"]) .fd-pick-count{font-size:11.5px;color:var(--nx-ink3);margin-top:7px}
/* Months to pull - custom month range picker inside the sync pop-up */
:where(:root[data-page="financials-dashboard"]) .fd-mr{display:flex;align-items:center;gap:8px;margin-bottom:8px}
:where(:root[data-page="financials-dashboard"]) .fd-mr-btn{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font:inherit;font-size:13px;color:var(--nx-ink);background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:10px;padding:8px 11px;cursor:pointer;text-align:left}
:where(:root[data-page="financials-dashboard"]) .fd-mr-btn:hover{background:var(--nx-hover)}
:where(:root[data-page="financials-dashboard"]) .fd-mr-btn.open{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="financials-dashboard"]) .fd-mr-btn .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
:where(:root[data-page="financials-dashboard"]) .fd-mr-btn svg{width:11px;height:11px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="financials-dashboard"]) .fd-mr-sep{font-size:11.5px;color:var(--nx-ink3);flex:0 0 auto}
:where(:root[data-page="financials-dashboard"]) .fd-mr-panel{display:none;border:1px solid var(--nx-line);border-radius:12px;padding:9px;margin-bottom:8px}
:where(:root[data-page="financials-dashboard"]) .fd-mr-panel.open{display:block}
:where(:root[data-page="financials-dashboard"]) .fd-mr-year{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:8px}
:where(:root[data-page="financials-dashboard"]) .fd-mr-year .y{font-size:13px;font-weight:700;color:var(--nx-ink);min-width:52px;text-align:center;font-variant-numeric:tabular-nums}
:where(:root[data-page="financials-dashboard"]) .fd-mr-arrow{border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);width:24px;height:24px;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
:where(:root[data-page="financials-dashboard"]) .fd-mr-arrow svg{width:11px;height:11px}
:where(:root[data-page="financials-dashboard"]) .fd-mr-arrow:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .fd-mr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
:where(:root[data-page="financials-dashboard"]) .fd-mr-m{font:inherit;font-size:12px;font-weight:600;color:var(--nx-ink2);background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:9px;padding:7px 0;cursor:pointer}
:where(:root[data-page="financials-dashboard"]) .fd-mr-m:hover{color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .fd-mr-m.sel{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="financials-dashboard"]) .fd-mr-m.off{opacity:.35;cursor:default}
:where(:root[data-page="financials-dashboard"]) .fd-mr-err{color:var(--nx-down);font-size:12.5px;margin-bottom:8px;display:none}
:where(:root[data-page="financials-dashboard"]) .fd-mr-err.show{display:block}
:where(:root[data-page="financials-dashboard"]) .fd-pick-count b{color:var(--nx-ink);font-weight:700}
:where(:root[data-page="financials-dashboard"]) .fd-pick-row .tick{border-radius:5px}
:where(:root[data-page="financials-dashboard"]) .fd-opt{display:flex;align-items:flex-start;gap:9px;margin-top:12px;cursor:pointer;font-size:12.5px;color:var(--nx-ink2);line-height:1.45}
:where(:root[data-page="financials-dashboard"]) .fd-opt .box{width:16px;height:16px;flex:0 0 auto;margin-top:1px;border:1.5px solid var(--nx-line2);border-radius:5px;display:flex;align-items:center;justify-content:center}
:where(:root[data-page="financials-dashboard"]) .fd-opt .box svg{width:9px;height:9px;color:#fff;opacity:0}
:where(:root[data-page="financials-dashboard"]) .fd-opt.on .box{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="financials-dashboard"]) .fd-opt.on .box svg{opacity:1}
:where(:root[data-page="financials-dashboard"]) .fd-stop{border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);font:inherit;font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px;cursor:pointer;flex:none;margin-left:8px}
:where(:root[data-page="financials-dashboard"]) .fd-stop:hover{background:var(--nx-hover);color:var(--nx-down);border-color:var(--nx-down)}
:where(:root[data-page="financials-dashboard"]) .fd-log-sum{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
:where(:root[data-page="financials-dashboard"]) .fd-log-chip{font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:8px;background:var(--nx-rail);color:var(--nx-ink2);border:1px solid var(--nx-line)}
:where(:root[data-page="financials-dashboard"]) .fd-log-chip b{font-weight:800;color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .fd-log-chip.ok{background:var(--nx-up-bg);border-color:transparent;color:var(--nx-up)}
:where(:root[data-page="financials-dashboard"]) .fd-log-chip.ok b{color:var(--nx-up)}
:where(:root[data-page="financials-dashboard"]) .fd-log-chip.bad{background:var(--nx-down-bg);border-color:transparent;color:var(--nx-down)}
:where(:root[data-page="financials-dashboard"]) .fd-log-chip.bad b{color:var(--nx-down)}
:where(:root[data-page="financials-dashboard"]) .fd-log-now{font-size:12.5px;color:var(--nx-ink2);margin-bottom:9px;min-height:17px}
:where(:root[data-page="financials-dashboard"]) .fd-log-list{max-height:300px;overflow-y:auto;border:1px solid var(--nx-line);border-radius:12px}
:where(:root[data-page="financials-dashboard"]) .fd-log-row{display:flex;align-items:baseline;gap:9px;padding:7px 11px;font-size:12.5px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .fd-log-row:last-child{border-bottom:none}
:where(:root[data-page="financials-dashboard"]) .fd-log-row .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="financials-dashboard"]) .fd-log-row .mo{flex:0 0 auto;color:var(--nx-ink3);font-size:11.5px;font-variant-numeric:tabular-nums}
:where(:root[data-page="financials-dashboard"]) .fd-log-row .st{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:6px;background:var(--nx-rail);color:var(--nx-ink3)}
:where(:root[data-page="financials-dashboard"]) .fd-log-row.ok .st{background:var(--nx-up-bg);color:var(--nx-up)}
:where(:root[data-page="financials-dashboard"]) .fd-log-row.fail .st{background:var(--nx-down-bg);color:var(--nx-down)}
:where(:root[data-page="financials-dashboard"]) .fd-log-row.run .st{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="financials-dashboard"]) .fd-log-row .why{flex:0 0 100%;font-size:11.5px;color:var(--nx-down);padding-left:0;margin-top:2px}
:where(:root[data-page="financials-dashboard"]) .fd-log-row{flex-wrap:wrap}
:where(:root[data-page="financials-dashboard"]) .fd-log-empty{padding:16px 10px;font-size:12.5px;color:var(--nx-ink3);text-align:center}
:where(:root[data-page="financials-dashboard"]) .fd-run-row{display:block;width:100%;box-sizing:border-box;text-align:left;border:none;background:none;cursor:pointer;padding:10px 12px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink);font:inherit}
:where(:root[data-page="financials-dashboard"]) .fd-run-row:last-child{border-bottom:none}
:where(:root[data-page="financials-dashboard"]) .fd-run-row:hover{background:var(--nx-hover)}
:where(:root[data-page="financials-dashboard"]) .fd-run-row .top{display:flex;align-items:baseline;gap:8px;font-size:12.5px}
:where(:root[data-page="financials-dashboard"]) .fd-run-row .top .when{font-weight:700}
:where(:root[data-page="financials-dashboard"]) .fd-run-row .top .who{color:var(--nx-ink3);font-size:11.5px;margin-left:auto;white-space:nowrap}
:where(:root[data-page="financials-dashboard"]) .fd-run-row .bits{margin-top:5px;display:flex;flex-wrap:wrap;gap:5px}
:where(:root[data-page="financials-dashboard"]) .fd-run-back{display:inline-flex;align-items:center;gap:6px;border:none;background:none;color:var(--nx-ink3);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:0;margin-bottom:9px}
:where(:root[data-page="financials-dashboard"]) .fd-run-back:hover{color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .fd-run-back svg{width:12px;height:12px}

/* ── Toast (custom message pop, no browser alert) ────────────────────── */
:where(:root[data-page="financials-dashboard"]) .fd-toast-wrap{position:fixed;top:18px;right:18px;z-index:260;display:flex;flex-direction:column;gap:9px;pointer-events:none}
:where(:root[data-page="financials-dashboard"]) .fd-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;min-width:240px;max-width:380px;background:var(--nx-surface);border:1px solid var(--nx-line2);border-left:4px solid var(--brand);border-radius:12px;box-shadow:0 14px 40px rgba(20,22,28,.22);padding:12px 14px;font-size:12.5px;color:var(--nx-ink);animation:fdToastIn .2s ease}
:where(:root[data-page="financials-dashboard"]) .fd-toast.err{border-left-color:var(--nx-down)}
:where(:root[data-page="financials-dashboard"]) .fd-toast .t-x{margin-left:auto;border:none;background:none;cursor:pointer;color:var(--nx-ink3);padding:2px;border-radius:6px;display:flex;flex:0 0 auto}
:where(:root[data-page="financials-dashboard"]) .fd-toast .t-x:hover{background:var(--nx-rail);color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .fd-toast .t-x svg{width:13px;height:13px}
@keyframes fdToastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── Download: one arrow, with its own menu under it ─────────────────── */
:where(:root[data-page="financials-dashboard"]) .fd-dl{position:relative;display:flex;align-items:center}
:where(:root[data-page="financials-dashboard"]) .fd-dl-pop{min-width:168px;padding:6px;right:0}
:where(:root[data-page="financials-dashboard"]) .fd-dl-pop .nx-user-pop-item{font-weight:600}
:where(:root[data-page="financials-dashboard"]) .fd-dl-pop .nx-user-pop-item.off{opacity:.42;cursor:default}
:where(:root[data-page="financials-dashboard"]) .fd-dl-pop .nx-user-pop-item.off:hover{background:none}
/* Our own hover note, instead of the browser's yellow tooltip. */
:where(:root[data-page="financials-dashboard"]) .fd-tip{position:relative}
:where(:root[data-page="financials-dashboard"]) .fd-tip::after{
  content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;
  background:var(--nx-toast-bg,#1f2430);color:var(--nx-toast-ink,#fff);
  font-size:11.5px;font-weight:600;line-height:1.3;padding:6px 9px;border-radius:9px;
  white-space:nowrap;box-shadow:var(--nx-shadow-lg);opacity:0;pointer-events:none;
  transform:translateY(-3px);transition:opacity .14s ease,transform .14s ease;z-index:200}
:where(:root[data-page="financials-dashboard"]) .fd-tip:hover::after{opacity:1;transform:none}
:where(:root[data-page="financials-dashboard"]) .fd-dl.open .fd-tip::after{opacity:0}

/* ── The report page's walk-through, drawn out here ─────────────────────────
   Same two pieces the standalone page uses: the dim is the SHADOW of the
   ring, thrown 9999px in every direction, so there is one box to move and it
   catches no mouse events - the shell and the page under it both stay live
   while the walk is on. The glide is put on only for the move between steps;
   left on, the ring would trail behind anything being scrolled in the frame.
   No anchor parks the ring in the middle at no size, which leaves the shadow
   covering the lot. */
:where(:root[data-page="financials-dashboard"]) .nx-tour-hole{position:fixed;z-index:1200;pointer-events:none;border-radius:12px;
  box-shadow:0 0 0 9999px rgba(11,15,25,.52),0 0 0 2px var(--brand) inset}
:root[data-theme="dark"]:where([data-page="financials-dashboard"]) .nx-tour-hole{box-shadow:0 0 0 9999px rgba(0,0,0,.62),0 0 0 2px var(--brand) inset}
:where(:root[data-page="financials-dashboard"]) .nx-tour-hole.blank{box-shadow:0 0 0 9999px rgba(11,15,25,.52)}
:root[data-theme="dark"]:where([data-page="financials-dashboard"]) .nx-tour-hole.blank{box-shadow:0 0 0 9999px rgba(0,0,0,.62)}
:where(:root[data-page="financials-dashboard"]) .nx-tour-hole.move,:where(:root[data-page="financials-dashboard"]) .nx-tour-card.move{transition:top .22s ease,left .22s ease,width .22s ease,height .22s ease}
:where(:root[data-page="financials-dashboard"]) .nx-tour-card{position:fixed;z-index:1202;width:342px;max-width:calc(100vw - 32px);
  background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:16px;
  box-shadow:0 18px 44px rgba(16,24,40,.24);padding:16px 18px 14px}
:where(:root[data-page="financials-dashboard"]) .nx-tour-card h4{margin:0 0 7px;font-size:14px;font-weight:800;color:var(--nx-ink)}
:where(:root[data-page="financials-dashboard"]) .nx-tour-card p{margin:0;font-size:12.5px;line-height:1.62;color:var(--nx-ink2)}
:where(:root[data-page="financials-dashboard"]) .nx-tour-foot{display:flex;align-items:center;gap:8px;margin-top:15px}
:where(:root[data-page="financials-dashboard"]) .nx-tour-count{font-size:11px;font-weight:700;color:var(--nx-ink3);letter-spacing:.04em}
:where(:root[data-page="financials-dashboard"]) .nx-tour-foot .nx-tour-grow{flex:1 1 auto}
:where(:root[data-page="financials-dashboard"]) .nx-tour-card button{font-family:inherit;cursor:pointer}
:where(:root[data-page="financials-dashboard"]) .nx-tour-b{padding:8px 14px;font-size:12.5px;border-radius:12px;font-weight:600;
  border:1px solid var(--brand);background:var(--brand);color:#fff}
:where(:root[data-page="financials-dashboard"]) .nx-tour-b.ghost{background:var(--nx-elev);color:var(--brand);border-color:var(--nx-line2)}
:where(:root[data-page="financials-dashboard"]) .nx-tour-b.ghost:hover{background:var(--brand-lt);border-color:var(--brand)}
:where(:root[data-page="financials-dashboard"]) .nx-tour-skip{border:none;background:none;color:var(--nx-ink3);font-size:12px;font-weight:600;padding:6px 2px}
:where(:root[data-page="financials-dashboard"]) .nx-tour-skip:hover{color:var(--nx-ink2)}
@media print{:where(:root[data-page="financials-dashboard"]) .nx-tour-hole,:where(:root[data-page="financials-dashboard"]) .nx-tour-card{display:none !important}}

:where(:root[data-page="financials-dashboard"]) body{page:pg-financials-dashboard}


/* ----------------------------------------------------------------------------
 * 15.34  Accounting -- Financials
 * accounting/financials.php, data-page="financials"
 * -------------------------------------------------------------------------- */
/* ── Accent: cobalt blue ─────────────────────────────────────
   This module is about money, not HR or operations — we lean
   into a serious financial-blue accent so it visually
   distinguishes itself from HR (teal) and payroll (green).
   Scoped to the app frame so the rest of the portal is unaffected. */
:where(:root[data-page="financials"]) .nx-app,
:where(:root[data-page="financials"]) .fin-modal-overlay{
  --blue:#2563EB;          /* primary buttons + active nav */
  --blue-dk:#1E40AF;       /* deeper blue for text/links on light bg */
  --blue-lt:#E0E9FF;       /* very pale tint for backgrounds */
  --accent-blue:#2563EB;
  --accent-blue-lt:#E0E9FF;
}

/* Thin, stable-gutter scrollbar — same pattern as hr.php so width changes
   on appearance don't make the layout jump. */
:where(:root[data-page="financials"]) .nx-scroll{scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#CFD3D8 transparent}
:where(:root[data-page="financials"]) .nx-scroll::-webkit-scrollbar{width:10px;height:10px}
:where(:root[data-page="financials"]) .nx-scroll::-webkit-scrollbar-track{background:transparent}
:where(:root[data-page="financials"]) .nx-scroll::-webkit-scrollbar-thumb{background:#CFD3D8;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
:where(:root[data-page="financials"]) .nx-scroll::-webkit-scrollbar-thumb:hover{background:#A8ADB3;background-clip:padding-box;border:2px solid transparent}
:where(:root[data-page="financials"]) .sb-subname{font-size:11px;font-weight:500;color:var(--text3);letter-spacing:-.01em;margin-top:1px}

/* ── Topbar picker (facility + month) ──────────────────── */
:where(:root[data-page="financials"]) .fin-picker{display:flex;gap:10px;align-items:center;flex:1;flex-wrap:wrap}:where(:root[data-page="financials"]) .fin-picker label{font-size:12px;color:var(--text2);font-weight:500;margin-right:2px}
:where(:root[data-page="financials"]) .fin-picker select{
  background:var(--nx-surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:7px 28px 7px 11px;font-size:13.5px;color:var(--text);
  min-width:170px;cursor:pointer;font-family:inherit;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2354595E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;
  transition:border-color .12s;
}
:where(:root[data-page="financials"]) .fin-picker select:hover{border-color:#B3B7BC}
:where(:root[data-page="financials"]) .fin-picker select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
:where(:root[data-page="financials"]) .fin-picker select:disabled{opacity:.55;cursor:not-allowed}

/* Picker row moved out of the top bar — now the first row in the body. */
/* The Facility/Month row is gone - the site-wide filter decides the scope.
   The selects stay in the page (hidden) because the code still drives them. */
:where(:root[data-page="financials"]) .fin-body-scope{display:none !important}
:where(:root[data-page="financials"]) .fin-body-scope .fin-picker{flex:0 1 auto}

/* ── Searchable combobox (replaces the native facility / month selects) ──
   The native <select>s are kept in the DOM (visually hidden) so all existing
   JS — .value, .options, change listeners — keeps working. A custom button +
   popover mirrors them and writes back on selection. */
:where(:root[data-page="financials"]) .fin-picker select.fin-native-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
:where(:root[data-page="financials"]) .fin-combo{position:relative;display:inline-block}
:where(:root[data-page="financials"]) .fin-combo-btn{
  display:flex;align-items:center;gap:8px;background:var(--nx-surface);border:1px solid var(--border);
  border-radius:10px;padding:7px 11px;font-size:13.5px;color:var(--text);min-width:190px;
  cursor:pointer;font-family:inherit;transition:border-color .12s,box-shadow .12s;text-align:left;
}
:where(:root[data-page="financials"]) .fin-combo-btn .fin-combo-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="financials"]) .fin-combo-btn .fin-combo-caret{flex-shrink:0;width:12px;height:12px;color:var(--text3);transition:transform .15s}
:where(:root[data-page="financials"]) .fin-combo-btn:hover{border-color:#B3B7BC}
:where(:root[data-page="financials"]) .fin-combo.open .fin-combo-btn,:where(:root[data-page="financials"]) .fin-combo-btn:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
:where(:root[data-page="financials"]) .fin-combo.open .fin-combo-caret{transform:rotate(180deg)}
:where(:root[data-page="financials"]) .fin-combo-btn.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
:where(:root[data-page="financials"]) .fin-combo-pop{
  position:absolute;z-index:90;top:calc(100% + 6px);left:0;min-width:240px;width:max-content;max-width:340px;
  background:var(--nx-surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 32px rgba(20,22,28,.16);overflow:hidden;display:none;
}
:where(:root[data-page="financials"]) .fin-combo.open .fin-combo-pop{display:block}
:where(:root[data-page="financials"]) .fin-combo-search{padding:10px 10px 8px;border-bottom:1px solid var(--border);position:relative}
:where(:root[data-page="financials"]) .fin-combo-search svg{position:absolute;left:20px;top:50%;transform:translateY(-30%);width:14px;height:14px;color:var(--text3);pointer-events:none}
:where(:root[data-page="financials"]) .fin-combo-search input{
  width:100%;box-sizing:border-box;padding:7px 10px 7px 30px;font-size:13px;font-family:inherit;color:var(--text);
  border:1px solid var(--border);border-radius:8px;background:var(--nx-surface);
}
:where(:root[data-page="financials"]) .fin-combo-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
:where(:root[data-page="financials"]) .fin-combo-list{max-height:300px;overflow-y:auto;padding:5px}
:where(:root[data-page="financials"]) .fin-combo-opt{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;
  font-size:13.5px;color:var(--text);white-space:nowrap;
}
:where(:root[data-page="financials"]) .fin-combo-opt:hover,:where(:root[data-page="financials"]) .fin-combo-opt.active{background:var(--blue-lt)}
:where(:root[data-page="financials"]) .fin-combo-opt.selected{color:var(--blue-dk);font-weight:600}
:where(:root[data-page="financials"]) .fin-combo-opt .fin-combo-check{flex-shrink:0;width:14px;height:14px;color:var(--blue);opacity:0}
:where(:root[data-page="financials"]) .fin-combo-opt.selected .fin-combo-check{opacity:1}
:where(:root[data-page="financials"]) .fin-combo-empty{padding:14px 12px;text-align:center;color:var(--text3);font-size:13px}

:where(:root[data-page="financials"]) .fin-empty{display:flex;align-items:center;justify-content:center;min-height:380px;color:var(--text3);font-size:14px;text-align:center;padding:40px}
:where(:root[data-page="financials"]) .fin-empty-inner{max-width:480px}
/* The drop zone in the empty state gets more WIDTH than the surrounding copy so
   it doesn't read as a cramped little box — but it keeps the same HEIGHT as the
   standard drop zone on the Uploads page (no extra vertical bulk). The Monthly
   Overview and TTM & Statements empty states both carry .fin-empty-drop, so the
   box is identical on both. (The :has() rule is a progressive-enhancement
   fallback for the same effect.) */
:where(:root[data-page="financials"]) .fin-empty-inner.fin-empty-drop,
:where(:root[data-page="financials"]) .fin-empty-inner:has(.fin-drop){max-width:960px;width:100%}
:where(:root[data-page="financials"]) .fin-empty-inner.fin-empty-drop h2,
:where(:root[data-page="financials"]) .fin-empty-inner:has(.fin-drop) h2{max-width:480px;margin-left:auto;margin-right:auto}
:where(:root[data-page="financials"]) .fin-empty-inner.fin-empty-drop .fin-drop,
:where(:root[data-page="financials"]) .fin-empty-inner:has(.fin-drop) .fin-drop{padding:18px 40px;width:100%;box-sizing:border-box}
:where(:root[data-page="financials"]) .fin-empty-inner h2{font-size:18px;color:var(--text);margin:0 0 8px;font-weight:600}
:where(:root[data-page="financials"]) .fin-empty-inner p{margin:6px 0;line-height:1.55}
:where(:root[data-page="financials"]) .fin-empty-inner .btn{margin-top:16px}
/* Icon-only button (e.g. download-as-PDF) — square, centered glyph, matches
   the standard .btn chrome from portal.css. */
:where(:root[data-page="financials"]) .fin-icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px;line-height:0;color:var(--text2)}
:where(:root[data-page="financials"]) .fin-icon-btn:disabled{opacity:.45;cursor:not-allowed}
/* Spinner shown inside the download button while a PDF is being generated
   (same feel as the Department Totals export button). */
:where(:root[data-page="financials"]) .fin-spin{animation:fin-spin .7s linear infinite}
@keyframes fin-spin{to{transform:rotate(360deg)}}

/* ── Snapshot cards ─────────────────────────────────────── */
:where(:root[data-page="financials"]) .fin-snap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
@media (max-width:960px){:where(:root[data-page="financials"]) .fin-snap{grid-template-columns:repeat(2,1fr)}}
/* Same card build as the Dashboard KPIs and the Financials Report tiles.
   Values below are copied from the report page so the two match exactly:
   16px corners, #E7E9EF border, its ink colors, and plain Inter (portal.css
   turns on alternate letter shapes; the report doesn't, so we turn them
   off here). */
:where(:root[data-page="financials"]) .fin-snap{font-family:var(--nx-font);font-feature-settings:normal}
:where(:root[data-page="financials"]) .fin-card{background:var(--nx-surface);border:1px solid #E7E9EF;border-radius:16px;padding:16px 18px}
:where(:root[data-page="financials"]) .fin-card-top{display:flex;align-items:center;gap:9px;margin-bottom:12px}
:where(:root[data-page="financials"]) .fin-card-chip{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center}
:where(:root[data-page="financials"]) .fin-card-chip svg{width:16px;height:16px}
:where(:root[data-page="financials"]) .fin-card-label{font-size:12.5px;font-weight:600;color:var(--nx-ink2)}
:where(:root[data-page="financials"]) .fin-card-value{font-size:24px;font-weight:800;color:var(--nx-ink);letter-spacing:-.03em;line-height:1}
:where(:root[data-page="financials"]) .fin-card-delta{font-size:11.5px;font-weight:500;display:flex;align-items:center;gap:5px;margin-top:8px}
:where(:root[data-page="financials"]) .fin-card-delta.up{color:#15803D}
:where(:root[data-page="financials"]) .fin-card-delta.down{color:#B91C1C}
:where(:root[data-page="financials"]) .fin-card-delta.flat{color:var(--nx-ink3)}
:where(:root[data-page="financials"]) .fin-card-delta .arrow{font-size:13px;line-height:1}
:where(:root[data-page="financials"]) .fin-card.neg .fin-card-value{color:#B91C1C}

/* ── Panels (re-used across sections) ───────────────────── */
:where(:root[data-page="financials"]) .fin-panel{background:var(--nx-surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:18px;overflow:hidden}
:where(:root[data-page="financials"]) .fin-panel-head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--border)}
:where(:root[data-page="financials"]) .fin-panel-head h3{margin:0;font-size:14.5px;color:var(--text);font-weight:600;letter-spacing:-.01em}
:where(:root[data-page="financials"]) .fin-panel-head .head-sub{font-size:12px;color:var(--text3);margin-left:10px}
/* Expand all / Collapse all control in the Operating Expenses panel head. */
:where(:root[data-page="financials"]) .fin-expand-all{
  flex-shrink:0;background:var(--nx-surface);border:1px solid var(--border);border-radius:8px;
  padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--blue-dk);
  cursor:pointer;font-family:inherit;transition:border-color .12s,background .12s;
}
:where(:root[data-page="financials"]) .fin-expand-all:hover{border-color:var(--blue);background:var(--blue-lt)}
:where(:root[data-page="financials"]) .fin-expand-all:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
:where(:root[data-page="financials"]) .fin-panel-body{padding:14px 18px 18px}

/* ── Tables (census, staffing, flagged lines, flagged sections) ─ */
:where(:root[data-page="financials"]) .fin-table{width:100%;border-collapse:collapse;font-size:12.5px;color:var(--text)}
:where(:root[data-page="financials"]) .fin-table th,:where(:root[data-page="financials"]) .fin-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
:where(:root[data-page="financials"]) .fin-table th{font-weight:600;color:var(--text2);background:var(--nx-rail);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
:where(:root[data-page="financials"]) .fin-table td.num,:where(:root[data-page="financials"]) .fin-table th.num{text-align:right;font-variant-numeric:tabular-nums}
/* Month group header spans the month's $ and PPD sub-columns — center it over
   the pair rather than right-aligning it (which parked it over PPD alone). */
:where(:root[data-page="financials"]) .fin-table th.num.month-group{text-align:center}
/* Vertical separator between months in the Flagged Line Items grid: a light
   gray line on the leading ($) cell of each month pair (and its group header),
   so the eye can tell one month's two columns from the next. */
:where(:root[data-page="financials"]) .fin-table th.month-start,:where(:root[data-page="financials"]) .fin-table td.month-start{border-left:1px solid var(--border)}
:where(:root[data-page="financials"]) .fin-table td.label{font-weight:500}
:where(:root[data-page="financials"]) .fin-table tr:last-child td{border-bottom:none}
:where(:root[data-page="financials"]) .fin-table tr.flagged{background:transparent}
/* Census & Staffing: uniform row height so every row lines up regardless of
   whether the cell has a sub-label (e.g. "% of total"). */
:where(:root[data-page="financials"]) .fin-census-table tbody td,:where(:root[data-page="financials"]) .fin-census-table tbody th{height:48px;box-sizing:border-box}
:where(:root[data-page="financials"]) .fin-census-table thead th{height:auto}
:where(:root[data-page="financials"]) .fin-census-table .ppd{margin-top:0}
:where(:root[data-page="financials"]) .fin-table tr.flag-food{background:#FFEAEA}
:where(:root[data-page="financials"]) .fin-table .chg-up   {color:#B91C1C;font-weight:500}
:where(:root[data-page="financials"]) .fin-table .chg-down {color:#15803D;font-weight:500}
:where(:root[data-page="financials"]) .fin-table .chg-flat {color:var(--text3)}
:where(:root[data-page="financials"]) .fin-table .section-name{font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:.04em;font-size:11.5px;background:var(--blue-lt);color:var(--blue-dk)}
:where(:root[data-page="financials"]) .fin-table .section-name td{padding:6px 12px}
/* Department/section title rows are not interactive — don't let the global
   tbody hover tint override their band color. */
:where(:root[data-page="financials"]) .fin-table tr.section-name:hover td{background:var(--blue-lt)}
:where(:root[data-page="financials"]) .fin-table .ppd{color:var(--text3);font-size:12px;display:block;margin-top:1px}
:where(:root[data-page="financials"]) .fin-table .note-cell{max-width:280px;font-size:12.5px;color:var(--text2);line-height:1.45}
:where(:root[data-page="financials"]) .fin-table .note-cell .note-wrap{display:flex;align-items:flex-start;gap:4px}
:where(:root[data-page="financials"]) .fin-table .note-cell .note-edit{
  display:inline-block;flex:1;min-width:0;min-height:18px;padding:3px 6px;margin:-3px 0 -3px -6px;
  border-radius:4px;border:1px dashed transparent;color:var(--text);outline:none;
  word-break:break-word;
}
:where(:root[data-page="financials"]) .fin-table .note-cell .note-edit:hover{border-color:var(--border)}
:where(:root[data-page="financials"]) .fin-table .note-cell .note-edit:focus{border-color:var(--blue);background:var(--nx-surface);box-shadow:0 0 0 3px rgba(37,99,235,.13)}
:where(:root[data-page="financials"]) .fin-table .note-cell .auto{color:var(--text3);font-style:italic}
:where(:root[data-page="financials"]) .fin-table .note-cell .auto::before{content:"(auto) ";color:var(--text3);font-style:normal}

/* ── Section totals — narrative bullets ─────────────────── */
:where(:root[data-page="financials"]) .fin-driver-list{margin:6px 0 0;padding:0;list-style:none;font-size:12px;color:var(--text3);line-height:1.5}
:where(:root[data-page="financials"]) .fin-driver-list li{display:flex;gap:4px;align-items:baseline}
:where(:root[data-page="financials"]) .fin-driver-list li::before{content:"·";color:var(--blue);font-weight:700;margin-right:2px}

/* ── 12-month trend chart grid ──────────────────────────── */
:where(:root[data-page="financials"]) .fin-trends{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media (max-width:1280px){:where(:root[data-page="financials"]) .fin-trends{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){:where(:root[data-page="financials"]) .fin-trends{grid-template-columns:1fr}}
:where(:root[data-page="financials"]) .fin-trend-card{background:var(--nx-surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}
:where(:root[data-page="financials"]) .fin-trend-card h4{margin:0 0 4px;font-size:12.5px;color:var(--text2);font-weight:600;letter-spacing:.02em}
:where(:root[data-page="financials"]) .fin-trend-card .latest{font-size:18px;font-weight:700;color:var(--text);margin-bottom:6px;letter-spacing:-.01em}
/* A positioned wrapper of a fixed height owns the chart's box. Chart.js
   (responsive + maintainAspectRatio:false) then sizes the canvas backing store
   to this exact box, so backing-store and on-screen aspect ratios always match
   — which is what keeps the hover dot perfectly round and correctly placed.
   We deliberately do NOT force the canvas's own width/height with !important
   (that fought Chart.js's sizing and caused the stretch/oval). */
:where(:root[data-page="financials"]) .fin-trend-canvas-wrap{position:relative;width:100%;height:78px}
:where(:root[data-page="financials"]) .fin-trend-card canvas{display:block}
/* External (HTML) tooltip for trend charts — rendered on <body> so it is never
   clipped by the panel's overflow:hidden, unlike Chart.js's in-canvas tooltip
   which was getting cut off against the small 78px canvas. */
:where(:root[data-page="financials"]) .fin-chart-tip{
  position:fixed;z-index:80;pointer-events:none;opacity:0;transition:opacity .1s;
  background:#111827;color:var(--nx-on-brand);border-radius:8px;padding:8px 11px;
  box-shadow:0 6px 20px rgba(0,0,0,.28);font-family:var(--nx-font);
  white-space:nowrap;transform:translate(-50%,-100%);
}
:where(:root[data-page="financials"]) .fin-chart-tip .tip-metric{font-size:10.5px;font-weight:600;color:#C7D2FE;text-transform:uppercase;letter-spacing:.04em}
:where(:root[data-page="financials"]) .fin-chart-tip .tip-month{font-size:11px;color:#9CA3C4;margin-top:1px}
:where(:root[data-page="financials"]) .fin-chart-tip .tip-value{font-size:15px;font-weight:700;margin-top:3px;line-height:1.1}
:where(:root[data-page="financials"]) .fin-chart-tip::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#111827;border-bottom:0}
/* Hover dot for the trend charts — an HTML circle so it's perfectly round
   regardless of the canvas's non-square backing-store scaling. Centered on the
   data point via translate(-50%,-50%). */
:where(:root[data-page="financials"]) .fin-chart-dot{
  position:fixed;z-index:79;pointer-events:none;opacity:0;transition:opacity .1s;
  width:9px;height:9px;border-radius:50%;background:#2563EB;border:2px solid var(--nx-surface);
  box-shadow:0 1px 3px rgba(0,0,0,.25);transform:translate(-50%,-50%);
}

/* ── TTM (trailing-twelve-month) table ──────────────────── */
:where(:root[data-page="financials"]) .fin-ttm-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;flex-wrap:wrap;gap:8px}
:where(:root[data-page="financials"]) .fin-ttm-head h2{margin:0;font-size:20px;font-weight:600;color:var(--text);letter-spacing:-.015em}
:where(:root[data-page="financials"]) .fin-ttm-head .sub{font-size:12px;color:var(--text3)}

/* Sub-tab strip for the statements view. */
:where(:root[data-page="financials"]) .fin-tabs{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
:where(:root[data-page="financials"]) .fin-tab{
  background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:8px 14px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;font-family:inherit;
  transition:color .12s,border-color .12s;
}
:where(:root[data-page="financials"]) .fin-tab:hover{color:var(--text)}
:where(:root[data-page="financials"]) .fin-tab.active{color:var(--blue-dk);border-bottom-color:var(--blue);font-weight:600}

/* PPD include/exclude toggle. */
:where(:root[data-page="financials"]) .fin-ppd-toggle{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text2);font-weight:500;cursor:pointer;user-select:none}
:where(:root[data-page="financials"]) .fin-ppd-toggle input{width:15px;height:15px;cursor:pointer;accent-color:var(--blue)}

:where(:root[data-page="financials"]) .fin-ttm-scroll{overflow-x:auto}
/* The table fills the panel width. With few months the columns share the
   available space evenly (no empty gutter); with many months the table grows
   past the container and .fin-ttm-scroll provides horizontal scrolling. The
   label column gets a sensible minimum so labels aren't cramped. */
:where(:root[data-page="financials"]) .fin-ttm-table{width:100%;border-collapse:collapse;font-size:12.5px;color:var(--text)}
:where(:root[data-page="financials"]) .fin-ttm-table th:first-child,:where(:root[data-page="financials"]) .fin-ttm-table td:first-child{min-width:200px}
/* The statement panel spans the full available page width. */
:where(:root[data-page="financials"]) .fin-ttm-panel{width:auto;max-width:100%}
:where(:root[data-page="financials"]) .fin-ttm-table th,:where(:root[data-page="financials"]) .fin-ttm-table td{padding:9px 12px;border-bottom:1px solid var(--border);white-space:nowrap;height:42px;box-sizing:border-box}
:where(:root[data-page="financials"]) .fin-ttm-table thead th{font-weight:600;color:var(--text2);background:var(--nx-rail);font-size:11px;letter-spacing:.04em;text-transform:uppercase;text-align:right}
:where(:root[data-page="financials"]) .fin-ttm-table thead th:first-child{text-align:left;background:var(--nx-rail)}
:where(:root[data-page="financials"]) .fin-ttm-table thead th.sub{font-size:10px;height:24px;padding-top:2px;padding-bottom:2px;color:var(--text3)}
:where(:root[data-page="financials"]) .fin-ttm-table td{text-align:right;font-variant-numeric:tabular-nums}
:where(:root[data-page="financials"]) .fin-ttm-table td.label,:where(:root[data-page="financials"]) .fin-ttm-table th:first-child{text-align:left;font-weight:500;color:var(--text);position:sticky;left:0;background:var(--nx-surface);z-index:1}
:where(:root[data-page="financials"]) .fin-ttm-table td.label.indent{padding-left:24px;font-weight:400;color:var(--text2)}
:where(:root[data-page="financials"]) .fin-ttm-table tr:last-child td{border-bottom:none}
/* Section total band — spans the whole row, stays put on hover. */
:where(:root[data-page="financials"]) .fin-ttm-table tr.section-name td{font-weight:700;background:var(--blue-lt);color:var(--blue-dk);text-transform:none;font-size:12px}
:where(:root[data-page="financials"]) .fin-ttm-table tr.section-name td.label,:where(:root[data-page="financials"]) .fin-ttm-table tr.section-name td:first-child{background:var(--blue-lt);color:var(--blue-dk)}
:where(:root[data-page="financials"]) .fin-ttm-table tr.section-name:hover td{background:var(--blue-lt)}
/* Section total rows are clickable toggles that reveal/hide their line-item
   detail. A caret in the label cell indicates expand state. */
:where(:root[data-page="financials"]) .fin-ttm-table tr.section-name.toggle{cursor:pointer}
:where(:root[data-page="financials"]) .fin-ttm-table tr.section-name.toggle:hover td,
:where(:root[data-page="financials"]) .fin-ttm-table tr.section-name.toggle:hover td.label,
:where(:root[data-page="financials"]) .fin-ttm-table tr.section-name.toggle:hover td:first-child{background:#C9D7F5}
:where(:root[data-page="financials"]) .fin-ttm-table tr.section-name td.label .sec-caret{
  display:inline-block;width:0;height:0;margin-right:8px;vertical-align:middle;
  border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .15s;transform-origin:25% 50%;
}
:where(:root[data-page="financials"]) .fin-ttm-table tr.section-name.open td.label .sec-caret{transform:rotate(90deg)}
/* Detail line rows stay hidden until their section is expanded. */
:where(:root[data-page="financials"]) .fin-ttm-table tr.opex-detail{display:none}
:where(:root[data-page="financials"]) .fin-ttm-table tr.opex-detail.show{display:table-row}
/* TTM summary column — highlighted (no sticky, so PPD's 2-col TTM lines up). */
:where(:root[data-page="financials"]) .fin-ttm-table td.ttm-total,:where(:root[data-page="financials"]) .fin-ttm-table th.ttm-total{background:var(--blue-lt);color:var(--blue-dk);font-weight:700}
:where(:root[data-page="financials"]) .fin-ttm-table th.ttm-total{font-weight:600}
/* PPD sub-column — slightly muted so the dollar column reads as primary. */
:where(:root[data-page="financials"]) .fin-ttm-table td.ppd-col{color:var(--text2);font-size:11.5px}
/* Row hover: highlight the WHOLE row so it's clear what's hovered. The sticky
   first (label) column and the highlighted TTM column each get their own hover
   shade (they have opaque backgrounds that would otherwise hide a generic
   row tint). Section-total bands are excluded — they keep their fixed band. */
:where(:root[data-page="financials"]) .fin-ttm-table tbody tr:not(.section-name):hover td{background:var(--nx-bg)}
:where(:root[data-page="financials"]) .fin-ttm-table tbody tr:not(.section-name):hover td.label{background:var(--nx-bg)}
:where(:root[data-page="financials"]) .fin-ttm-table tbody tr:not(.section-name):hover td.ttm-total{background:#C9D7F5}

/* ── Consolidated Balance Sheet table (point-in-time, two columns) ──────── */
/* The balance sheet is a narrow two-column statement. Shrink its panel to the
   table width so there isn't a large empty area to the right of the numbers. */
:where(:root[data-page="financials"]) .fin-panel.fin-bs-panel{max-width:640px}
:where(:root[data-page="financials"]) .fin-bs-table{width:100%;border-collapse:collapse;font-size:13px;color:var(--text)}
:where(:root[data-page="financials"]) .fin-bs-table th,:where(:root[data-page="financials"]) .fin-bs-table td{padding:8px 14px;border-bottom:1px solid var(--border)}
:where(:root[data-page="financials"]) .fin-bs-table thead th{font-weight:600;color:var(--text2);background:var(--nx-rail);font-size:11px;letter-spacing:.04em;text-transform:uppercase;text-align:left}
:where(:root[data-page="financials"]) .fin-bs-table thead th.num{text-align:right}
:where(:root[data-page="financials"]) .fin-bs-table td.num{text-align:right;font-variant-numeric:tabular-nums}
:where(:root[data-page="financials"]) .fin-bs-table td.bs-label{color:var(--text)}
:where(:root[data-page="financials"]) .fin-bs-table tr:last-child td{border-bottom:none}
/* Group header (Current Assets, Fixed Assets…) — banded, no value. */
:where(:root[data-page="financials"]) .fin-bs-table tr.bs-group td{font-weight:600;color:var(--blue-dk);background:var(--blue-lt);text-transform:uppercase;font-size:11px;letter-spacing:.03em}
/* Subtotal (Total Current Assets…) — bold with a top rule. */
:where(:root[data-page="financials"]) .fin-bs-table tr.bs-subtotal td{font-weight:600;border-top:1px solid var(--border)}
/* Grand totals (TOTAL ASSETS / TOTAL LIABILITIES & MEMBERS' EQUITY). */
:where(:root[data-page="financials"]) .fin-bs-table tr.bs-grand td{font-weight:700;color:var(--text);border-top:2px solid var(--text3);border-bottom:2px solid var(--text3);background:var(--nx-rail)}
/* Standalone equity line. */
:where(:root[data-page="financials"]) .fin-bs-table tr.bs-equity td{font-weight:600}


/* ── Upload area ─────────────────────────────────────── */
:where(:root[data-page="financials"]) .fin-drop{
  border:2px dashed var(--border);border-radius:var(--radius);padding:18px 16px;text-align:center;
  background:var(--nx-rail);cursor:pointer;transition:background .12s,border-color .12s;
  display:flex;flex-direction:column;justify-content:center;min-height:150px;
}
:where(:root[data-page="financials"]) .fin-drop:hover,:where(:root[data-page="financials"]) .fin-drop.dragover{background:var(--blue-lt);border-color:var(--blue)}
:where(:root[data-page="financials"]) .fin-drop-title{font-size:13.5px;font-weight:600;color:var(--text);margin:0 0 6px;letter-spacing:-.01em}
:where(:root[data-page="financials"]) .fin-drop p{margin:4px 0;color:var(--text2);font-size:12.5px;line-height:1.4}
:where(:root[data-page="financials"]) .fin-drop .fin-drop-hint{font-size:11.5px;color:var(--text3);margin-top:6px}
:where(:root[data-page="financials"]) .fin-drop .fin-drop-hint em{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;background:var(--nx-bg);padding:1px 4px;border-radius:3px}
:where(:root[data-page="financials"]) .fin-drop input[type=file]{display:none}

/* ── Uploads list search ─────────────────────────────── */
:where(:root[data-page="financials"]) .fin-uploads-search{position:relative;padding:12px 18px 0}
:where(:root[data-page="financials"]) .fin-uploads-search svg{position:absolute;left:30px;top:50%;transform:translateY(-44%);width:15px;height:15px;color:var(--text3);pointer-events:none}
:where(:root[data-page="financials"]) .fin-uploads-search input{
  width:100%;box-sizing:border-box;padding:8px 12px 8px 34px;font-size:13.5px;font-family:inherit;color:var(--text);
  border:1px solid var(--border);border-radius:10px;background:var(--nx-surface);transition:border-color .12s,box-shadow .12s;
}
:where(:root[data-page="financials"]) .fin-uploads-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
:where(:root[data-page="financials"]) .fin-uploads-search input::placeholder{color:var(--text3)}
:where(:root[data-page="financials"]) .fin-uploads-noresults{padding:18px;text-align:center;color:var(--text3);font-size:13px}

/* ── Upload button drag-and-drop ─────────────────────── */
/* The "+ Upload Notes" button in the topbar doubles as a drop target:
   drag files over it and it highlights so the user knows they can drop here.
   Styled to match the Department Totals upload button: while a file is dragged
   over it, the button shows a thin 1px dashed blue border (small, fine dashes —
   not a chunky 2px outline), a pale blue fill, and a soft focus-ring glow. */
:where(:root[data-page="financials"]) #uploadBtn{transition:background .12s,border-color .12s,box-shadow .12s,color .12s}
:where(:root[data-page="financials"]) #uploadBtn.dragover{
  border:1px dashed var(--blue);background:var(--blue-lt);color:var(--blue);
  box-shadow:0 0 0 3px rgba(37,99,235,.18);
}

/* ── Per-file progress list (shown during/after a batch upload) ── */
:where(:root[data-page="financials"]) .fin-progress{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;display:flex;flex-direction:column;gap:8px}
:where(:root[data-page="financials"]) .fin-progress-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
:where(:root[data-page="financials"]) .fin-progress-head .clear-link{background:none;border:none;color:var(--blue-dk);cursor:pointer;font-size:12px;font-weight:500;font-family:inherit;text-transform:none;letter-spacing:0;padding:0}
:where(:root[data-page="financials"]) .fin-progress-head .clear-link:hover{text-decoration:underline}
:where(:root[data-page="financials"]) .fin-prog-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
:where(:root[data-page="financials"]) .fin-prog-row:last-child{border-bottom:none}
:where(:root[data-page="financials"]) .fin-prog-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;margin-top:1px;flex-shrink:0}
:where(:root[data-page="financials"]) .fin-prog-icon.uploading{color:var(--blue-dk)}
:where(:root[data-page="financials"]) .fin-prog-icon.ok{color:#15803D}
:where(:root[data-page="financials"]) .fin-prog-icon.err{color:#B91C1C}
:where(:root[data-page="financials"]) .fin-prog-icon.stored{color:var(--blue-dk)}
:where(:root[data-page="financials"]) .fin-prog-icon .fin-spinner{width:13px;height:13px;border:2px solid var(--blue);border-top-color:transparent;margin:0}
:where(:root[data-page="financials"]) .fin-prog-name{color:var(--text);font-weight:500;min-width:0;word-break:break-word}
:where(:root[data-page="financials"]) .fin-prog-name .kind{display:inline-block;font-size:10.5px;font-weight:600;color:var(--blue-dk);background:var(--blue-lt);padding:1px 6px;border-radius:99px;margin-left:6px;text-transform:uppercase;letter-spacing:.04em;vertical-align:1px}
:where(:root[data-page="financials"]) .fin-prog-msg{color:var(--text3);font-size:12px;margin-top:2px;line-height:1.45}
:where(:root[data-page="financials"]) .fin-prog-row.ok .fin-prog-msg{color:#15803D}
:where(:root[data-page="financials"]) .fin-prog-row.err .fin-prog-msg{color:#B91C1C}
:where(:root[data-page="financials"]) .fin-prog-status{font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:99px;background:var(--blue-lt);color:var(--blue-dk);white-space:nowrap}
:where(:root[data-page="financials"]) .fin-prog-row.ok .fin-prog-status{background:#E6F6EC;color:#15803D}
:where(:root[data-page="financials"]) .fin-prog-row.err .fin-prog-status{background:#FFE9E9;color:#B91C1C}

/* ── Uploads list ─────────────────────────────────────── */
:where(:root[data-page="financials"]) .fin-up-row{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px}
:where(:root[data-page="financials"]) .fin-up-row:last-child{border-bottom:none}
:where(:root[data-page="financials"]) .fin-up-check{display:flex;align-items:center;justify-content:center}
:where(:root[data-page="financials"]) .fin-up-check input,:where(:root[data-page="financials"]) .fin-bulk-all input{width:15px;height:15px;cursor:pointer;accent-color:var(--blue)}
:where(:root[data-page="financials"]) .fin-up-name{color:var(--text);font-weight:500;min-width:0;word-break:break-word}
:where(:root[data-page="financials"]) .fin-up-meta{color:var(--text3);font-size:11.5px;margin-top:2px}
:where(:root[data-page="financials"]) .fin-up-status{font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:99px;background:var(--blue-lt);color:var(--blue-dk)}
:where(:root[data-page="financials"]) .fin-up-status.ok{background:#E6F6EC;color:#15803D}
:where(:root[data-page="financials"]) .fin-up-status.err{background:#FFE9E9;color:#B91C1C}
:where(:root[data-page="financials"]) .fin-up-status.warn{background:#FEF3DA;color:#9C4A14}
:where(:root[data-page="financials"]) .fin-up-actions{display:flex;gap:6px}
:where(:root[data-page="financials"]) .fin-up-actions .btn-icon{
  background:transparent;border:1px solid var(--border);border-radius:6px;padding:5px 8px;
  cursor:pointer;color:var(--text2);font-size:11.5px;font-family:inherit;
}
:where(:root[data-page="financials"]) .fin-up-actions .btn-icon:hover{background:var(--nx-bg);color:var(--text)}
:where(:root[data-page="financials"]) .fin-up-actions .btn-icon.danger:hover{background:#FFE9E9;color:#B91C1C;border-color:#FFB8B8}

/* ── Bulk-action bar for the uploads list ───────────────── */
:where(:root[data-page="financials"]) .fin-bulk-bar{display:flex;align-items:center;gap:14px;padding:9px 18px;border-bottom:1px solid var(--border);background:var(--nx-rail)}
:where(:root[data-page="financials"]) .fin-bulk-all{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text2);font-weight:500;cursor:pointer}
:where(:root[data-page="financials"]) .fin-bulk-count{font-size:12px;color:var(--text3)}
:where(:root[data-page="financials"]) .fin-bulk-bar .btn-icon{
  margin-left:auto;background:transparent;border:1px solid var(--border);border-radius:6px;padding:6px 12px;
  cursor:pointer;color:var(--text2);font-size:12px;font-weight:500;font-family:inherit;
}
:where(:root[data-page="financials"]) .fin-bulk-bar .btn-icon.danger{color:#B91C1C;border-color:#FFB8B8}
:where(:root[data-page="financials"]) .fin-bulk-bar .btn-icon.danger:hover:not(:disabled){background:#FFE9E9}
:where(:root[data-page="financials"]) .fin-bulk-bar .btn-icon:disabled{opacity:.5;cursor:not-allowed}

/* ── Modal (threshold editor) ─────────────────────────── */
:where(:root[data-page="financials"]) .fin-modal-overlay{position:fixed;inset:0;background:rgba(20,22,28,.45);display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
:where(:root[data-page="financials"]) .fin-modal-overlay.open{display:flex}
:where(:root[data-page="financials"]) .fin-modal{background:var(--nx-surface);border-radius:10px;width:100%;max-width:480px;box-shadow:0 16px 48px rgba(20,22,28,.22);overflow:hidden}
:where(:root[data-page="financials"]) .fin-modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
:where(:root[data-page="financials"]) .fin-modal-head h3{margin:0;font-size:15px;font-weight:600;color:var(--text)}
:where(:root[data-page="financials"]) .fin-modal-close{background:transparent;border:none;cursor:pointer;color:var(--text3);font-size:20px;padding:4px;line-height:1}
:where(:root[data-page="financials"]) .fin-modal-close:hover{color:var(--text)}
:where(:root[data-page="financials"]) .fin-modal-body{padding:18px 20px;display:flex;flex-direction:column;gap:12px}
:where(:root[data-page="financials"]) .fin-modal-body label{font-size:12.5px;color:var(--text2);font-weight:500;display:flex;flex-direction:column;gap:5px}
:where(:root[data-page="financials"]) .fin-modal-body input{
  padding:8px 11px;border:1px solid var(--border);border-radius:var(--radius);font-size:13.5px;font-family:inherit;
  font-variant-numeric:tabular-nums;
}
:where(:root[data-page="financials"]) .fin-modal-body input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
:where(:root[data-page="financials"]) .fin-modal-body .scope{
  display:flex;gap:6px;background:#F4F6F9;padding:3px;border-radius:8px;align-items:stretch;
}
:where(:root[data-page="financials"]) .fin-modal-body .scope label{flex:1;cursor:pointer;background:var(--nx-surface);border-radius:6px;padding:7px 10px;text-align:center;font-weight:500;color:var(--text2);border:1px solid var(--border);font-size:12px;justify-content:center;flex-direction:row;align-items:center;display:flex}
:where(:root[data-page="financials"]) .fin-modal-body .scope label.active{background:var(--blue);color:var(--nx-on-brand);border-color:var(--blue)}
:where(:root[data-page="financials"]) .fin-modal-body .scope label input{display:none}
:where(:root[data-page="financials"]) .fin-modal-foot{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;background:var(--nx-rail)}

/* ── Facility picker modal ─────────────────────────────────── */
:where(:root[data-page="financials"]) .fin-fp-info{background:var(--blue-lt);border-radius:var(--radius);padding:10px 12px;margin:4px 0 2px;font-size:12.5px;color:var(--blue-dk);line-height:1.55}
:where(:root[data-page="financials"]) .fin-fp-info strong{color:var(--text)}
:where(:root[data-page="financials"]) .fin-fp-search{
  padding:8px 11px;border:1px solid var(--border);border-radius:var(--radius);font-size:13.5px;font-family:inherit;width:100%;
}
:where(:root[data-page="financials"]) .fin-fp-search:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
:where(:root[data-page="financials"]) .fin-fp-list{max-height:280px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--nx-surface)}
:where(:root[data-page="financials"]) .fin-fp-list:empty::after{content:"No facilities match.";display:block;padding:14px;color:var(--text3);font-size:13px;text-align:center}
:where(:root[data-page="financials"]) .fin-fp-item{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:9px 12px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13.5px;
  transition:background .1s;
}
:where(:root[data-page="financials"]) .fin-fp-item:last-child{border-bottom:none}
:where(:root[data-page="financials"]) .fin-fp-item:hover{background:var(--nx-rail)}
:where(:root[data-page="financials"]) .fin-fp-item.active{background:var(--blue-lt);color:var(--blue-dk)}
:where(:root[data-page="financials"]) .fin-fp-item .name{color:var(--text);font-weight:500;flex:1;min-width:0;word-break:break-word}
:where(:root[data-page="financials"]) .fin-fp-item.active .name{color:var(--blue-dk)}
:where(:root[data-page="financials"]) .fin-fp-item .badge{font-size:10.5px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:99px;background:var(--nx-bg);white-space:nowrap}
:where(:root[data-page="financials"]) .fin-fp-item.active .badge{background:var(--nx-surface);color:var(--blue-dk)}

/* ── Progress row: needs-facility callout ──────────────────── */
:where(:root[data-page="financials"]) .fin-prog-row.needs .fin-prog-icon{color:#9C4A14}
:where(:root[data-page="financials"]) .fin-prog-row.needs .fin-prog-status{background:#FEF3DA;color:#9C4A14}
:where(:root[data-page="financials"]) .fin-prog-row.needs .fin-prog-msg{color:#9C4A14}
:where(:root[data-page="financials"]) .fin-prog-actions{margin-top:5px;display:flex;gap:6px;flex-wrap:wrap}
:where(:root[data-page="financials"]) .fin-prog-actions .btn-link{
  background:transparent;border:none;padding:0;color:var(--blue-dk);
  cursor:pointer;font-size:12px;font-family:inherit;font-weight:500;text-decoration:underline;
}
:where(:root[data-page="financials"]) .fin-prog-actions .btn-link:hover{color:var(--blue)}

/* ── Toast ─────────────────────────────────────────── */
:where(:root[data-page="financials"]) .fin-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#222;color:var(--nx-on-brand);padding:11px 18px;border-radius:8px;font-size:13.5px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);opacity:0;transition:opacity .2s,transform .2s;z-index:70;
  max-width:520px;text-align:center;
}
:where(:root[data-page="financials"]) .fin-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
:where(:root[data-page="financials"]) .fin-toast.err{background:#B91C1C}
:where(:root[data-page="financials"]) .fin-toast.ok{background:#15803D}

/* ── Skeleton + spinner ─────────────────────────────── */
:where(:root[data-page="financials"]) .fin-spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--nx-surface);border-top-color:transparent;border-radius:50%;animation:fspin .8s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes fspin{to{transform:rotate(360deg)}}
:where(:root[data-page="financials"]) .fin-loading{padding:40px;text-align:center;color:var(--text3);font-size:13.5px}

/* ── Condensed pass ──────────────────────────────────────────
   Tightens spacing, padding and font sizes across the page so
   more fits on screen at once. Placed last so it overrides the
   sizing in the rules above. */
/* Snapshot cards keep the shared tile sizing - no shrinking here, so they
   stay the same height as the Dashboard and Financials Report cards. */
:where(:root[data-page="financials"]) .fin-snap{gap:16px;margin-bottom:22px}
/* Panels */
:where(:root[data-page="financials"]) .fin-panel{margin-bottom:13px}
:where(:root[data-page="financials"]) .fin-panel-head{padding:9px 14px;min-height:38px;box-sizing:border-box}
:where(:root[data-page="financials"]) .fin-panel-head h3{font-size:13.5px}
:where(:root[data-page="financials"]) .fin-panel-body{padding:10px 14px 14px}
/* General tables */
:where(:root[data-page="financials"]) .fin-table{font-size:11.5px}
:where(:root[data-page="financials"]) .fin-table th,:where(:root[data-page="financials"]) .fin-table td{padding:6px 10px}
/* Header cells: keep an explicit line-height and a little more vertical room.
   These tables use a two-row uppercase header; with the tightened padding the
   caps could clip against the panel's rounded, overflow-hidden top edge on
   some viewports/zoom levels. line-height + min-height guarantees the text
   always has room regardless of how narrow the table gets (e.g. months near
   the start of a facility's history, where only 1–2 month columns render). */
:where(:root[data-page="financials"]) .fin-table th{font-size:10px;line-height:1.4;padding-top:7px;padding-bottom:7px}
:where(:root[data-page="financials"]) .fin-table thead tr:first-child th{padding-top:11px}
/* With only one or two month columns (a facility near the start of its
   history, or the oldest-two-months filter) the table is narrow and the
   uppercase two-row header can ride up against the panel's rounded,
   overflow-hidden top edge — clipping the caps. Table cells ignore min-height,
   so use an explicit row height (which cells honour as a minimum) plus a
   bottom-aligned label to guarantee the text always clears the rounded corner
   regardless of column count. */
:where(:root[data-page="financials"]) .fin-table thead tr:first-child th{height:26px;vertical-align:bottom}
:where(:root[data-page="financials"]) .fin-table thead tr:nth-child(2) th{height:18px;vertical-align:top}
/* Census & Staffing rows: fixed uniform height. Some cells carry a second
   line (e.g. "% of total" under Medicare/Commercial Days), which would push
   those rows taller than single-line rows. A height tall enough for two lines,
   applied to every body cell, keeps all rows equal regardless of content. */
:where(:root[data-page="financials"]) .fin-census-table tbody td,:where(:root[data-page="financials"]) .fin-census-table tbody th{height:48px;padding-top:6px;padding-bottom:6px}
:where(:root[data-page="financials"]) .fin-table .section-name td{padding:4px 10px}
/* Trend charts */
:where(:root[data-page="financials"]) .fin-trends{gap:10px;margin-bottom:13px}
:where(:root[data-page="financials"]) .fin-trend-card{padding:9px 11px}
:where(:root[data-page="financials"]) .fin-trend-card .latest{font-size:16px;margin-bottom:4px}
:where(:root[data-page="financials"]) .fin-trend-canvas-wrap{height:64px}
/* TTM table + heading */
:where(:root[data-page="financials"]) .fin-ttm-head{margin-bottom:11px}
:where(:root[data-page="financials"]) .fin-ttm-head h2{font-size:17px}
:where(:root[data-page="financials"]) .fin-tabs{margin-bottom:11px}
:where(:root[data-page="financials"]) .fin-tab{padding:6px 12px;font-size:12.5px}
:where(:root[data-page="financials"]) .fin-ttm-table{font-size:11.5px}
:where(:root[data-page="financials"]) .fin-ttm-table th,:where(:root[data-page="financials"]) .fin-ttm-table td{padding:6px 10px;height:34px}
:where(:root[data-page="financials"]) .fin-ttm-table thead th{font-size:10px}
/* Balance sheet */
:where(:root[data-page="financials"]) .fin-bs-table{font-size:12px}
:where(:root[data-page="financials"]) .fin-bs-table th,:where(:root[data-page="financials"]) .fin-bs-table td{padding:6px 12px}

/* ── Print / Save-as-PDF ─────────────────────────────────────
   When printing we strip the app chrome (sidebar, topbar controls, drop
   zones, upload affordances, editable-note hints) and let the active report
   flow naturally across pages. printReport() sets body[data-print-view] so we
   only show the view the user is currently looking at. */
@media print{
  @page pg-financials{margin:12mm}
  html:where([data-page="financials"]),:where(:root[data-page="financials"]) body{background:#fff !important}
  /* Preserve the colored bands / accents browsers strip by default. */
  :where(:root[data-page="financials"]) *, *:where([data-page="financials"]){-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
  /* Collapse the app frame to a single flowing column. */
  html:where([data-page="financials"]),:where(:root[data-page="financials"]) body{overflow:visible !important;height:auto !important}
  :where(:root[data-page="financials"]) .nx-app{display:block !important;height:auto !important;margin:0 !important;border:none !important;border-radius:0 !important;box-shadow:none !important;overflow:visible !important}
  :where(:root[data-page="financials"]) .nx-rail,:where(:root[data-page="financials"]) .nx-topbar,:where(:root[data-page="financials"]) .fin-toast,:where(:root[data-page="financials"]) .fin-chart-tip,:where(:root[data-page="financials"]) .fin-chart-dot{display:none !important}
  :where(:root[data-page="financials"]) .nx-main{display:block !important;height:auto !important;overflow:visible !important}
  :where(:root[data-page="financials"]) .nx-scroll{overflow:visible !important;height:auto !important;max-height:none !important;flex:none !important;padding:0 !important}
  /* Hide everything view-related, then reveal only the active view. */
  :where(:root[data-page="financials"]) #view-overview,:where(:root[data-page="financials"]) #view-ttm,:where(:root[data-page="financials"]) #view-uploads{display:none !important}
  :where(:root[data-page="financials"]) body[data-print-view="overview"] #view-overview,
  :where(:root[data-page="financials"]) body[data-print-view="ttm"]      #view-ttm,
  :where(:root[data-page="financials"]) body[data-print-view="uploads"]  #view-uploads{display:block !important}
  /* Fit-to-page: scale the active view down by the JS-measured factor so wide
     content (e.g. a 12-month TTM table) fits the page width and ALL columns
     print. transform-origin top-left keeps it anchored under the page margin.
     The visible views all live in .nx-scroll, so scaling each is enough. */
  :where(:root[data-page="financials"]) body[data-print-view="overview"] #view-overview,
  :where(:root[data-page="financials"]) body[data-print-view="ttm"]      #view-ttm,
  :where(:root[data-page="financials"]) body[data-print-view="uploads"]  #view-uploads{
    transform:scale(var(--print-scale,1));
    transform-origin:top left;
    width:calc(100% / var(--print-scale,1));   /* reclaim the space scale frees */
  }
  /* No interactive upload/drop UI on paper. */
  :where(:root[data-page="financials"]) .fin-drop,:where(:root[data-page="financials"]) .fin-progress,:where(:root[data-page="financials"]) .fin-bulk-bar,:where(:root[data-page="financials"]) .fin-uploads-search,:where(:root[data-page="financials"]) .fin-up-actions,
  :where(:root[data-page="financials"]) .fin-up-check,:where(:root[data-page="financials"]) .fin-combo,:where(:root[data-page="financials"]) .fin-body-scope,:where(:root[data-page="financials"]) .fin-tabs .fin-tab:not(.active){display:none !important}
  /* Every scroll container expands to its full content (no clipping). */
  :where(:root[data-page="financials"]) .fin-panel-body,:where(:root[data-page="financials"]) .fin-ttm-scroll,:where(:root[data-page="financials"]) .fin-panel{overflow:visible !important;max-height:none !important}
  /* The TTM label column is sticky on screen (for horizontal scroll); sticky
     positioning drops/overlaps in print, so pin it back to static. */
  :where(:root[data-page="financials"]) .fin-ttm-table td.label,:where(:root[data-page="financials"]) .fin-ttm-table th:first-child{position:static !important}
  /* Tables keep their NATURAL width (do NOT force 100% — that squeezed/clipped
     columns). The fit-to-page scale above handles making them fit. */
  :where(:root[data-page="financials"]) .fin-ttm-table th,:where(:root[data-page="financials"]) .fin-ttm-table td,:where(:root[data-page="financials"]) .fin-table th,:where(:root[data-page="financials"]) .fin-table td{height:auto !important}
  :where(:root[data-page="financials"]) .fin-ttm-panel{width:auto !important;max-width:none !important}
  /* Note cells: show the text, drop the editable affordance + focus ring, and
     let the note text wrap fully rather than being clipped. */
  :where(:root[data-page="financials"]) .fin-table .note-cell{max-width:none !important;white-space:normal !important}
  :where(:root[data-page="financials"]) .fin-table .note-cell .note-edit{border:none !important;box-shadow:none !important;padding:0 !important;margin:0 !important}
  /* Keep panels, cards and table rows from splitting awkwardly across pages. */
  :where(:root[data-page="financials"]) .fin-panel,:where(:root[data-page="financials"]) .fin-card,:where(:root[data-page="financials"]) .fin-trend-card{break-inside:avoid;box-shadow:none !important}
  :where(:root[data-page="financials"]) .fin-table tr,:where(:root[data-page="financials"]) .fin-ttm-table tr,:where(:root[data-page="financials"]) .fin-bs-table tr{break-inside:avoid}
  :where(:root[data-page="financials"]) .fin-panel{border:1px solid #ccc !important}
  /* Snapshot cards + trend grid: keep their multi-column layout on paper. */
  :where(:root[data-page="financials"]) .fin-snap{display:grid !important;grid-template-columns:repeat(4,1fr) !important}
  :where(:root[data-page="financials"]) .fin-trends{display:grid !important;grid-template-columns:repeat(4,1fr) !important}
  :where(:root[data-page="financials"]) .fin-trend-canvas-wrap{height:60px !important}
  :where(:root[data-page="financials"]) .fin-trend-card canvas{max-width:100% !important}
}
/* ── Sidebar removed: nav now lives in a topbar avatar dropdown. ──────── */
/* App frame: same shape as the Payroll dashboard -- a rounded white panel on a
   grey canvas, a left menu, a slim top bar, and one scrolling area. The page
   itself never scrolls; only .nx-scroll does. */
:root:where([data-page="financials"]){
  --nx-hover:#EEF1FA;
}
html:where([data-page="financials"]),:where(:root[data-page="financials"]) body{height:100%;margin:0;overflow:hidden;background:var(--nx-bg)}
/* portal.css keeps a permanent scrollbar gutter on <html>; this page never
   scrolls at the page level, so cancel it and lose the always-on edge bar. */
html:where([data-page="financials"]){scrollbar-gutter:auto}

:where(:root[data-page="financials"]) .nx-app{display:grid;grid-template-columns:248px minmax(0,1fr);height:calc(100vh - 16px);margin:8px;background:var(--nx-surface);border-radius:16px;overflow:hidden;box-shadow:0 16px 48px rgba(27,29,41,.10);border:1px solid var(--nx-line);transition:grid-template-columns .18s ease}
:where(:root[data-page="financials"]) .nx-app.rail-collapsed{grid-template-columns:64px minmax(0,1fr)}
@media(max-width:980px){:where(:root[data-page="financials"]) .nx-app{grid-template-columns:1fr;margin:0;border-radius:0;border:none;height:100vh}}

/* Left menu */
:where(:root[data-page="financials"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px;overflow:hidden}
@media(max-width:980px){:where(:root[data-page="financials"]) .nx-rail{display:none}}
:where(:root[data-page="financials"]) .nx-rail-toggle{width:32px;height:32px;flex:0 0 auto;border:1px solid var(--nx-line2);background:var(--nx-surface);border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2);margin:0 0 6px auto}
:where(:root[data-page="financials"]) .nx-rail-toggle:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="financials"]) .nx-rail-toggle svg{width:16px;height:16px;transition:transform .18s ease}
:where(:root[data-page="financials"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="financials"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--blue),#1E40AF);display:flex;align-items:center;justify-content:center;color:var(--nx-on-brand);font-weight:800;font-size:15px;flex:0 0 auto}
:where(:root[data-page="financials"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink);white-space:nowrap}
:where(:root[data-page="financials"]) .nx-navsec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3);padding:14px 10px 6px}
:where(:root[data-page="financials"]) .nx-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--nx-ink2);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap}
:where(:root[data-page="financials"]) .nx-nav svg{width:17px;height:17px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="financials"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="financials"]) .nx-nav.active{background:var(--blue);color:var(--nx-on-brand)}
:where(:root[data-page="financials"]) .nx-nav.active svg{color:var(--nx-on-brand)}

/* Collapsed menu: labels off, icons centred. */
:where(:root[data-page="financials"]) .rail-collapsed .nx-rail{padding:18px 10px;align-items:center}
:where(:root[data-page="financials"]) .rail-collapsed .nx-rail-toggle{margin:0 0 8px 0}
:where(:root[data-page="financials"]) .rail-collapsed .nx-rail-toggle svg{transform:rotate(180deg)}
:where(:root[data-page="financials"]) .rail-collapsed .nx-brand-name,:where(:root[data-page="financials"]) .rail-collapsed .nx-navsec{display:none}
:where(:root[data-page="financials"]) .rail-collapsed .nx-brand{justify-content:center;padding:6px 0 18px}
:where(:root[data-page="financials"]) .rail-collapsed #sbNav{width:100%}
:where(:root[data-page="financials"]) .rail-collapsed .nx-nav{position:relative;justify-content:center;gap:0;padding:0;font-size:0;width:40px;height:40px;border-radius:10px;margin:2px auto}
:where(:root[data-page="financials"]) .rail-collapsed .nx-nav svg{width:18px;height:18px;font-size:0}

/* Main column */
:where(:root[data-page="financials"]) .nx-main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
:where(:root[data-page="financials"]) .nx-topbar{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--nx-line);background:var(--nx-surface)}
:where(:root[data-page="financials"]) .nx-title{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="financials"]) .nx-top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
:where(:root[data-page="financials"]) .nx-scroll{flex:1;min-height:0;overflow-y:auto;padding:20px 22px 28px}

/* ── Inside financials-dashboard.php (?embed=1) ───────────────────
   The shell gives the white frame, the left menu and the account button, so
   ours come off and the page menu moves into the top bar as tabs. */
html.is-embed:where([data-page="financials"]),html.is-embed:where([data-page="financials"]) body{background:transparent}
html.is-embed:where([data-page="financials"]) .nx-app,
html.is-embed:where([data-page="financials"]) .nx-app.rail-collapsed{grid-template-columns:minmax(0,1fr);height:100vh;margin:0;border:none;border-radius:0;box-shadow:none;background:transparent}
html.is-embed:where([data-page="financials"]) .nx-rail{display:none}
html.is-embed:where([data-page="financials"]) .nx-topbar{display:none}
html.is-embed:where([data-page="financials"]) .fin-body-scope{display:none !important}
/* The shell no longer clips the right side, so plain even padding. The
   thin 10px scrollbar sits after it, same as the Dashboard view. */
html.is-embed:where([data-page="financials"]) .nx-scroll{padding:20px 22px 28px}

/* While the report is open it fills the area with no padding around it. */
:where(:root[data-page="financials"]) .nx-app.fin-embed-mode .nx-scroll{padding:0;overflow:hidden;display:flex;flex-direction:column}

/* ── Financials Report shown inside this page ──────────────────────────
   The report is a page of its own (financials-report.php). When it is the
   chosen view we drop the body padding and let it fill the whole area, so
   it reads as part of this page rather than a box inside it. */
:where(:root[data-page="financials"]) #view-report{flex:1;min-height:0}
:where(:root[data-page="financials"]) #finReportFrame{width:100%;height:100%;border:0;display:block;background:transparent}

:where(:root[data-page="financials"]) .dt-user{position:relative;flex-shrink:0}
:where(:root[data-page="financials"]) .dt-user-btn{display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer;border-radius:50%}
:where(:root[data-page="financials"]) .dt-user-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--blue);color:var(--nx-on-brand);font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
:where(:root[data-page="financials"]) .dt-user-btn:hover .dt-user-avatar,
:where(:root[data-page="financials"]) .dt-user-btn:focus-visible .dt-user-avatar{box-shadow:0 0 0 3px rgba(1,139,70,.18);outline:none}
:where(:root[data-page="financials"]) .dt-user-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:232px;max-height:min(78vh,560px);overflow-y:auto;background:var(--nx-surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(20,22,28,.16);display:none;z-index:120;padding:6px}
:where(:root[data-page="financials"]) .dt-user.open .dt-user-pop{display:block}
:where(:root[data-page="financials"]) .dt-user-info{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:6px}
:where(:root[data-page="financials"]) .dt-user-name{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.2}
:where(:root[data-page="financials"]) .dt-user-role{font-size:11.5px;color:var(--text3);margin-top:2px}
:where(:root[data-page="financials"]) .dt-user-sec{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px 4px}
:where(:root[data-page="financials"]) .dt-user-pop .dt-user-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 10px;margin:0;border:none;background:none;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--text);text-align:left;text-decoration:none;transition:background .1s}
:where(:root[data-page="financials"]) .dt-user-pop .dt-user-item svg{width:15px;height:15px;flex-shrink:0;color:var(--text3)}
:where(:root[data-page="financials"]) .dt-user-pop .dt-user-item:hover{background:var(--surface2,#F3F4F6)}
:where(:root[data-page="financials"]) .dt-user-pop .dt-user-item:hover svg{color:var(--text)}
:where(:root[data-page="financials"]) .dt-user-pop .pg-nav.active{background:var(--surface2,#F3F4F6);color:var(--blue);font-weight:600}
:where(:root[data-page="financials"]) .dt-user-pop .pg-nav.active svg{color:var(--blue)}
:where(:root[data-page="financials"]) .dt-user-divider{height:1px;background:var(--border);margin:6px 4px}
:where(:root[data-page="financials"]) .dt-user-danger{color:var(--red,#C5221F)}
:where(:root[data-page="financials"]) .dt-user-danger svg{color:#A01711}

:where(:root[data-page="financials"]) body{page:pg-financials}


/* ----------------------------------------------------------------------------
 * 15.35  Payroll -- Transfers
 * payroll/transfers.php, data-page="transfers"
 * -------------------------------------------------------------------------- */
/* ==== Nexus theme tokens (layered over portal.css; brand stays CareRite green) ==== */
:root:where([data-page="transfers"]){
  --tr-row-hover:#F5F6F8; --tr-row-active:#E6F3EB;
  --nx-warn:#B9791C;--nx-warn-bg:#FBF1DE;
  --brand:var(--blue); --brand-lt:var(--blue-lt);
  --bg:var(--nx-bg);--bg2:var(--nx-rail);--surface:var(--nx-surface);--surface2:#F3F4F6;
  --border:var(--nx-line);--border2:var(--nx-line2);--text:var(--nx-ink);--text2:var(--nx-ink2);--text3:var(--nx-ink3);
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="transfers"]){
  --tr-row-hover:#1F222C; --tr-row-active:#162A20;
  --nx-up:#34D27B;--nx-up-bg:#16301F;--nx-down:#F4756B;--nx-down-bg:#3A1E1C;
  --nx-warn:#E8C25A;--nx-warn-bg:#2A2510;
  --brand:#1FB866;--brand-lt:#13361F;
  --bg:var(--nx-bg);--bg2:var(--nx-surface);--surface:var(--nx-surface);--surface2:var(--nx-hover);
  --border:var(--nx-line);--border2:var(--nx-line2);--text:var(--nx-ink);--text2:var(--nx-ink2);--text3:var(--nx-ink3);
  --blue:#1FB866;--blue-dk:#13361F;--blue-lt:#15301F;
  color-scheme:dark;
}
:where(:root[data-page="transfers"]) *, *:where([data-page="transfers"]){box-sizing:border-box}
html:where([data-page="transfers"]),:where(:root[data-page="transfers"]) body{height:100%;margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px}
:where(:root[data-page="transfers"]) button{font-family:inherit}

:where(:root[data-page="transfers"]) .nx-app{display:grid;grid-template-columns:248px 1fr;height:calc(100vh - 24px);max-width:1760px;margin:12px;background:var(--nx-surface);border-radius:18px;overflow:hidden;box-shadow:0 16px 48px rgba(27,29,41,.10);border:1px solid var(--nx-line)}
@media(min-width:1784px){:where(:root[data-page="transfers"]) .nx-app{margin:12px auto}}
@media(max-width:980px){:where(:root[data-page="transfers"]) .nx-app{grid-template-columns:1fr;margin:0;border-radius:0;border:none;min-height:100vh}}

:where(:root[data-page="transfers"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px}
@media(max-width:980px){:where(:root[data-page="transfers"]) .nx-rail{display:none}}
:where(:root[data-page="transfers"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="transfers"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#04a85a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
:where(:root[data-page="transfers"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .nx-navsec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3);padding:14px 10px 6px}
:where(:root[data-page="transfers"]) .nx-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--nx-ink2);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,color .12s}
:where(:root[data-page="transfers"]) .nx-nav svg{width:17px;height:17px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .nx-nav.active{background:var(--brand);color:#fff}
:where(:root[data-page="transfers"]) .nx-nav.active svg{color:#fff}
:where(:root[data-page="transfers"]) .nx-subnav{margin-top:10px;display:flex;flex-direction:column;gap:2px}
:where(:root[data-page="transfers"]) .nx-subnav-head{font-size:11px;font-weight:700;letter-spacing:-.01em;color:var(--nx-ink);padding:2px 10px 7px;display:flex;align-items:center;gap:7px}
:where(:root[data-page="transfers"]) .nx-subnav-head::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--brand);flex:0 0 auto}
:where(:root[data-page="transfers"]) .nx-subitem{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:8px 11px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--nx-ink2);text-align:left}
:where(:root[data-page="transfers"]) .nx-subitem svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .nx-subitem:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .nx-subitem.active{background:var(--surface2,#F3F4F6);color:var(--brand);font-weight:600}
:where(:root[data-page="transfers"]) .nx-subitem.active svg{color:var(--brand)}
:where(:root[data-page="transfers"]) .nx-rail-foot{margin-top:auto;padding-top:14px}
:where(:root[data-page="transfers"]) .nx-promo{background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:14px;padding:13px}
:where(:root[data-page="transfers"]) .nx-promo-row{display:flex;align-items:center;gap:9px}
:where(:root[data-page="transfers"]) .nx-promo-mark{width:30px;height:30px;border-radius:9px;background:var(--nx-elev);display:flex;align-items:center;justify-content:center}
:where(:root[data-page="transfers"]) .nx-promo-mark svg{width:16px;height:16px;color:var(--nx-violet)}
:where(:root[data-page="transfers"]) .nx-promo-t{font-size:12px;font-weight:700;line-height:1.2}
:where(:root[data-page="transfers"]) .nx-promo-s{font-size:10.5px;color:var(--nx-ink2)}

:where(:root[data-page="transfers"]) .nx-main{display:flex;flex-direction:column;min-width:0;min-height:0}
:where(:root[data-page="transfers"]) .nx-topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="transfers"]) .nx-search{flex:1;max-width:340px;position:relative}
:where(:root[data-page="transfers"]) .nx-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .nx-search input{width:100%;border:1px solid var(--nx-line2);background:var(--nx-rail);border-radius:10px;padding:9px 12px 9px 34px;font-size:13px;font-family:inherit;color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .nx-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="transfers"]) .nx-top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
:where(:root[data-page="transfers"]) .nx-page-actions{display:flex;align-items:center;gap:8px}
:where(:root[data-page="transfers"]) .nx-pbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-surface);border-radius:10px;padding:8px 13px;font-size:12.5px;font-weight:600;color:var(--nx-ink2);cursor:pointer}
:where(:root[data-page="transfers"]) .nx-pbtn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .nx-pbtn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="transfers"]) .nx-pbtn.primary:hover{filter:brightness(.96);color:#fff}
:where(:root[data-page="transfers"]) .nx-pbtn svg{width:15px;height:15px}
:where(:root[data-page="transfers"]) .nx-theme-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--nx-line2);background:var(--nx-elev);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2)}
:where(:root[data-page="transfers"]) .nx-theme-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="transfers"]) .nx-theme-btn .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="transfers"]) .nx-theme-btn .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="transfers"]) .nx-theme-btn .nx-ic-moon{display:block}
:where(:root[data-page="transfers"]) .nx-user{position:relative;display:flex;align-items:center}
:where(:root[data-page="transfers"]) .nx-user-av-btn{padding:0;border:none;background:none;cursor:pointer;border-radius:50%;display:flex}
:where(:root[data-page="transfers"]) .nx-user-av{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;text-transform:uppercase}
:where(:root[data-page="transfers"]) .nx-user-av-btn:hover .nx-user-av{box-shadow:0 0 0 3px var(--brand-lt);outline:none}
:where(:root[data-page="transfers"]) .nx-user-av.lg{width:38px;height:38px;font-size:13px;flex:0 0 auto}
:where(:root[data-page="transfers"]) .nx-user-pop{position:absolute;top:calc(100% + 9px);right:0;min-width:236px;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:14px;box-shadow:0 18px 44px rgba(20,22,28,.20);padding:7px;display:none;z-index:120}
:where(:root[data-page="transfers"]) .nx-user-pop.open{display:block}
:where(:root[data-page="transfers"]) .nx-user-pop-id{display:flex;align-items:center;gap:11px;padding:9px 9px 11px}
:where(:root[data-page="transfers"]) .nx-user-pop-meta{min-width:0;line-height:1.25}
:where(:root[data-page="transfers"]) .nx-user-pop-name{display:block;font-size:13.5px;font-weight:700;color:var(--nx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="transfers"]) .nx-user-pop-sub{display:block;font-size:11.5px;color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .nx-user-pop-sep{height:1px;background:var(--nx-line);margin:2px 4px 6px}
:where(:root[data-page="transfers"]) .nx-user-pop-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 10px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#6B7280;text-align:left;text-decoration:none}
:where(:root[data-page="transfers"]) .nx-user-pop-item svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .nx-user-pop-item:hover{background:var(--nx-hover)}
:where(:root[data-page="transfers"]) .nx-user-pop-item.danger{color:#D4453B}
:where(:root[data-page="transfers"]) .nx-user-pop-item.danger svg{color:#D4453B}

:where(:root[data-page="transfers"]) .nx-scroll{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:20px 22px 22px}
:where(:root[data-page="transfers"]) .nx-scroll::-webkit-scrollbar{width:10px;height:10px;background:transparent}
:where(:root[data-page="transfers"]) .nx-scroll::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
:where(:root[data-page="transfers"]) .nx-scroll.sb-show::-webkit-scrollbar-thumb{background:var(--nx-line2);background-clip:padding-box}
@supports (-moz-appearance:none){:where(:root[data-page="transfers"]) .nx-scroll{scrollbar-width:thin;scrollbar-color:transparent transparent}:where(:root[data-page="transfers"]) .nx-scroll.sb-show{scrollbar-color:var(--nx-line2) transparent}}

:where(:root[data-page="transfers"]) .nx-pagehead{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
:where(:root[data-page="transfers"]) .nx-h1{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0}
:where(:root[data-page="transfers"]) .nx-sub{font-size:12.5px;color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .nx-pagehead-right{display:flex;gap:8px;align-items:center}

/* Week selector */
:where(:root[data-page="transfers"]) .tr-week{display:inline-flex;align-items:center;gap:8px}
:where(:root[data-page="transfers"]) .tr-week select{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:10px;padding:8px 32px 8px 12px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%239499AB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
:where(:root[data-page="transfers"]) .tr-week select:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .tr-week select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="transfers"]) .tr-week button{width:34px;height:34px;border-radius:9px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);cursor:pointer;font-size:15px;line-height:1}
:where(:root[data-page="transfers"]) .tr-week button:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-thisweek{width:auto !important;height:34px;padding:0 14px !important;font-size:12.5px !important;font-weight:600;border-radius:9px;border:1px solid var(--nx-line2) !important;background:var(--nx-elev) !important;color:var(--nx-ink) !important}
:where(:root[data-page="transfers"]) .tr-week button:disabled{opacity:.35;cursor:default;pointer-events:none}
:where(:root[data-page="transfers"]) .tr-thisweek:hover{border-color:var(--nx-ink3) !important;color:var(--nx-ink) !important}
:where(:root[data-page="transfers"]) .tr-refresh-btn{display:inline-flex;align-items:center;gap:6px}
:where(:root[data-page="transfers"]) .tr-refresh-btn svg{width:14px;height:14px}
:where(:root[data-page="transfers"]) .tr-refresh-btn.spinning svg{animation:tr-spin .7s linear infinite}
@keyframes tr-spin{to{transform:rotate(360deg)}}
:where(:root[data-page="transfers"]) .tr-thisweek.on{background:var(--brand) !important;border-color:var(--brand) !important;color:#fff !important}
:where(:root[data-page="transfers"]) .tr-thisweek.on:hover{filter:brightness(.96);color:#fff !important}
:where(:root[data-page="transfers"]) .tr-holiday-btn{display:inline-flex;align-items:center;justify-content:center;width:34px !important;height:34px;padding:0 !important;border-radius:9px;border:1px solid var(--nx-line2) !important;background:var(--nx-elev) !important;color:var(--nx-ink2) !important;cursor:pointer}
:where(:root[data-page="transfers"]) .tr-holiday-btn svg{width:16px;height:16px}
:where(:root[data-page="transfers"]) .tr-lock-btn{display:inline-flex;align-items:center;justify-content:center;width:34px !important;height:34px;padding:0 !important;border-radius:9px;border:1px solid var(--nx-line2) !important;background:var(--nx-elev) !important;color:var(--nx-ink2) !important;cursor:pointer}
:where(:root[data-page="transfers"]) .tr-lock-btn svg{width:16px;height:16px}
:where(:root[data-page="transfers"]) .tr-lock-btn.is-open{border-color:var(--brand) !important;color:var(--brand) !important}
:where(:root[data-page="transfers"]) .tr-lock-btn:hover{border-color:var(--nx-ink3) !important;color:var(--nx-ink) !important}
:where(:root[data-page="transfers"]) .tr-lock-btn.is-open:hover{border-color:var(--brand) !important;color:var(--brand) !important}
:where(:root[data-page="transfers"]) .tr-lock-btn[data-tip]{position:relative}
:where(:root[data-page="transfers"]) .tr-lock-btn[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);background:var(--nx-ink);color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;padding:6px 9px;border-radius:8px;box-shadow:0 6px 18px rgba(20,22,28,.22);opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;z-index:60}
:where(:root[data-page="transfers"]) .tr-lock-btn[data-tip]::before{content:"";position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%) translateY(-4px);border:5px solid transparent;border-bottom-color:var(--nx-ink);opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;z-index:60}
:where(:root[data-page="transfers"]) .tr-lock-btn[data-tip]:hover::after,:where(:root[data-page="transfers"]) .tr-lock-btn[data-tip]:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}
:where(:root[data-page="transfers"]) .tr-holiday-btn[data-tip]{position:relative}
:where(:root[data-page="transfers"]) .tr-holiday-btn[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-4px);background:var(--nx-ink);color:#fff;font-size:11.5px;font-weight:600;white-space:nowrap;padding:6px 9px;border-radius:8px;box-shadow:0 6px 18px rgba(20,22,28,.22);opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;z-index:60}
:where(:root[data-page="transfers"]) .tr-holiday-btn[data-tip]::before{content:"";position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%) translateY(-4px);border:5px solid transparent;border-bottom-color:var(--nx-ink);opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;z-index:60}
:where(:root[data-page="transfers"]) .tr-holiday-btn[data-tip]:hover::after,:where(:root[data-page="transfers"]) .tr-holiday-btn[data-tip]:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}
:where(:root[data-page="transfers"]) .tr-holiday-btn:hover{border-color:var(--nx-ink3) !important;color:var(--nx-ink) !important}
:where(:root[data-page="transfers"]) .tr-holiday-btn.on{background:var(--nx-warn-bg) !important;border-color:var(--nx-warn) !important;color:var(--nx-warn) !important}
:where(:root[data-page="transfers"]) .tr-holiday-btn.on svg{fill:var(--nx-warn)}

/* KPI cards */
:where(:root[data-page="transfers"]) .nx-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:18px}
@media(max-width:900px){:where(:root[data-page="transfers"]) .nx-stats{grid-template-columns:1fr 1fr}}
/* Tighter top and bottom than the 16px these used to carry, and less air
   under the label row: the tiles are a glance, not a page of their own, and
   the height they gave back is the worklist's. The sides keep their 17px. */
:where(:root[data-page="transfers"]) .pd-kpi{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:10px 17px 11px}
:where(:root[data-page="transfers"]) .pd-kpi-top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
:where(:root[data-page="transfers"]) .pd-kpi-chip{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="transfers"]) .pd-kpi-chip.c-blue{background:rgba(76,110,245,.14);color:#4C6EF5}
:where(:root[data-page="transfers"]) .pd-kpi-chip.c-green{background:var(--nx-up-bg);color:var(--nx-up)}
:where(:root[data-page="transfers"]) .pd-kpi-chip.c-amber{background:var(--nx-warn-bg);color:var(--nx-warn)}
:where(:root[data-page="transfers"]) .pd-kpi-chip.c-red{background:var(--nx-down-bg);color:var(--nx-down)}
:where(:root[data-page="transfers"]) .pd-kpi-chip svg{width:16px;height:16px}
:where(:root[data-page="transfers"]) .pd-kpi-label{font-size:11px;font-weight:600;color:var(--nx-ink3);text-transform:uppercase;letter-spacing:.04em}
:where(:root[data-page="transfers"]) .pd-kpi-val{font-size:23px;font-weight:800;letter-spacing:-.02em}
:where(:root[data-page="transfers"]) .pd-kpi-sub{font-size:11.5px;color:var(--nx-ink3);margin-top:3px}

/* Table -- columns sit close together; only as wide as the content needs. */
:where(:root[data-page="transfers"]) .nx-card{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);overflow:hidden}
:where(:root[data-page="transfers"]) .tr-tablewrap{overflow:auto;flex:1;min-height:0;border-radius:inherit}
/* One step down from the old 12.5px. The money columns are a share of the
   table's width, so a smaller face is what lets a figure show its cents
   instead of being clipped mid-decimal. Total, Diff, Facility and Day all
   inherit from here; the boxes and the two label spans are set to match
   below, and the headings, pills and badges keep their own sizes. */
:where(:root[data-page="transfers"]) table.tr-table{width:100%;border-collapse:collapse;font-size:11.5px}
:where(:root[data-page="transfers"]) .tr-table thead th.sortable{cursor:pointer;user-select:none}
:where(:root[data-page="transfers"]) .tr-table thead th.sortable:hover{color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-table thead th .sort-ar{display:inline-block;width:8px;font-size:9px;color:var(--brand);margin-left:1px}
:where(:root[data-page="transfers"]) .tr-table thead th.sort-asc .sort-ar::after{content:"\2191"}
:where(:root[data-page="transfers"]) .tr-table thead th.sort-desc .sort-ar::after{content:"\2193"}
:where(:root[data-page="transfers"]) .tr-table thead th .sort-order{display:inline-flex;align-items:center;justify-content:center;min-width:13px;height:13px;margin-left:3px;padding:0 3px;border-radius:7px;background:var(--brand);color:#fff;font-size:8px;font-weight:700;vertical-align:middle}
:where(:root[data-page="transfers"]) .tr-table thead th{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--nx-ink3);text-align:center;padding:11px 10px;background:var(--nx-rail);border:none;box-shadow:inset 0 -1px 0 var(--nx-line);white-space:nowrap;position:sticky;top:0;z-index:2}
:where(:root[data-page="transfers"]) .tr-table thead th.num{text-align:center}
:where(:root[data-page="transfers"]) .tr-table tbody td{padding:5px 10px;border-bottom:1px solid var(--nx-line);vertical-align:middle;white-space:nowrap}
:where(:root[data-page="transfers"]) .tr-table tbody tr:hover td{background:var(--tr-row-hover) !important}
/* The row a right-click menu is open for. Tinted so it is obvious which row
   the menu belongs to. Stated after the hover rule so it still shows while
   the pointer is somewhere else. */
:where(:root[data-page="transfers"]) .tr-table tbody tr.tr-ctx-row td{background:var(--tr-row-active) !important}
/* The final row's underline: portal.css can override the plain tbody td rule,
   and border-collapse can shave the last edge, so state it explicitly. */
:where(:root[data-page="transfers"]) .tr-table tbody tr:last-child td:not(.tr-empty){border-bottom:1px solid var(--nx-line) !important}
:where(:root[data-page="transfers"]) .tr-table tbody td.tr-empty{border-bottom:none !important}
:where(:root[data-page="transfers"]) .tr-table td.num{text-align:right;font-variant-numeric:tabular-nums}
:where(:root[data-page="transfers"]) .tr-fac{font-weight:600;color:var(--nx-ink);white-space:nowrap}
:where(:root[data-page="transfers"]) .tr-bank{font-size:11px;color:var(--nx-ink2)}
/* Masked facility password + reveal button (Settings > Facilities) */
:where(:root[data-page="transfers"]) .tr-pw{display:inline-flex;align-items:center;gap:6px}
:where(:root[data-page="transfers"]) .tr-pw-val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;letter-spacing:.04em;color:var(--nx-ink2)}
:where(:root[data-page="transfers"]) .tr-pw-val[data-shown="1"]{color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-pw-eye{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--nx-ink2);cursor:pointer}
:where(:root[data-page="transfers"]) .tr-pw-eye:hover{background:var(--nx-line);color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-pw-eye.on{color:var(--brand)}
:where(:root[data-page="transfers"]) .tr-pw-eye svg{width:14px;height:14px}
/* Password field inside the add/edit facility modal */
:where(:root[data-page="transfers"]) .af-pw{position:relative;display:block}
:where(:root[data-page="transfers"]) .af-pw .af-in{padding-right:36px;width:100%;box-sizing:border-box}
:where(:root[data-page="transfers"]) .af-pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:5px;background:transparent;color:var(--nx-ink2);cursor:pointer}
:where(:root[data-page="transfers"]) .af-pw-eye:hover{background:var(--nx-line);color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .af-pw-eye.on{color:var(--brand)}
:where(:root[data-page="transfers"]) .af-pw-eye svg{width:15px;height:15px}
:where(:root[data-page="transfers"]) .tr-cell-muted{color:var(--nx-ink3)}
/* Clickable bank/company/day cells */
:where(:root[data-page="transfers"]) .tr-clickfilter{cursor:pointer;border-radius:6px;transition:opacity .12s}
:where(:root[data-page="transfers"]) .tr-clickfilter:hover{opacity:.7;text-decoration:underline}
:where(:root[data-page="transfers"]) .tr-badge-pdf.tr-clickfilter:hover{text-decoration:none;opacity:1;filter:brightness(.94)}
:where(:root[data-page="transfers"]) .tr-co-badge.tr-clickfilter:hover,:where(:root[data-page="transfers"]) .tr-clickfilter .tr-co-badge{text-decoration:none}
:where(:root[data-page="transfers"]) .tr-pill.tr-clickfilter:hover{text-decoration:none;opacity:1;filter:brightness(.94)}
/* Filter chip bar */
:where(:root[data-page="transfers"]) .tr-filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
:where(:root[data-page="transfers"]) .tr-fchip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-lt);color:var(--brand);border:1px solid var(--brand);border-radius:20px;padding:4px 6px 4px 11px;font-size:12px;font-weight:600}
:where(:root[data-page="transfers"]) .tr-fchip b{font-weight:700}
:where(:root[data-page="transfers"]) .tr-fchip button{border:none;background:none;color:var(--brand);cursor:pointer;font-size:15px;line-height:1;padding:0 3px;opacity:.7}
:where(:root[data-page="transfers"]) .tr-fchip button:hover{opacity:1}
/* "is not" chip -- a value the user chose to hide with Ctrl/Cmd + click */
:where(:root[data-page="transfers"]) .tr-fchip-not{background:var(--nx-down-bg);color:#D4453B;border-color:#D4453B}
:where(:root[data-page="transfers"]) .tr-fchip-not button{color:#D4453B}
:where(:root[data-page="transfers"]) .tr-pill.tr-clickfilter{position:relative}
:where(:root[data-page="transfers"]) .tr-fclear{border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer}
:where(:root[data-page="transfers"]) .tr-fclear:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-co-badge{display:inline-block;padding:2px 9px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap}
:where(:root[data-page="transfers"]) .tr-dash{color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .tr-in{width:100%;min-width:0;border:1px solid transparent;background:transparent;border-radius:6px;padding:5px 7px;font-size:11.5px;font-family:inherit;color:var(--nx-ink);text-align:right}
:where(:root[data-page="transfers"]) .tr-in::placeholder{color:var(--nx-ink3);opacity:1}
:where(:root[data-page="transfers"]) .tr-in:focus::placeholder{color:transparent}
:where(:root[data-page="transfers"]) .tr-in:hover{border-color:var(--nx-line2)}
/* When the columns are squeezed narrow, a value can get clipped as you type.
   On focus, let the box grow rightward over its neighbours so the whole number
   is visible. Absolute + right-anchored keeps it aligned to the cell and stops
   it from shoving the table layout around. */
:where(:root[data-page="transfers"]) .tr-table td.tr-valcol{position:relative}
:where(:root[data-page="transfers"]) .tr-in:focus{outline:none;border-color:var(--brand);position:absolute;top:2px;right:2px;left:2px;width:auto;min-width:118px;z-index:5;background:var(--nx-surface);box-shadow:0 6px 18px rgba(27,29,41,.16),0 0 0 3px var(--brand-lt)}
/* Estimate styling lives on the Total only. Typed boxes stay regular + black. */
/* Taxes not counted in this facility's total: lighter grey + italic, so it
   reads as "shown for reference, not added up". Goes back to normal while
   the box is being typed in so the number stays easy to read. */
:where(:root[data-page="transfers"]) .tr-tax-off .tr-in{color:#AAAFC0;font-style:italic}
:root[data-theme="dark"]:where([data-page="transfers"]) .tr-tax-off .tr-in{color:#5E6579}
:where(:root[data-page="transfers"]) .tr-tax-off .tr-in:focus{color:var(--nx-ink);font-style:normal}
/* Room for the slant. Inter is loaded with weights only and no italic face
   (see the font link in <head>), so font-style:italic here is synthetic: the
   browser shears the upright glyphs. Shearing moves the ink but not the
   advance width -- measured identical to the digit -- so the layout believes
   the figure fits exactly while the last digit leans up to 2.3px past the box
   and the browser slices it. The same figure upright paints inside its box
   and is fine, which is why only the italic ones were cut.
   So: 3px more on the right for the lean, and the same 3px off the left,
   which a right-aligned box was not using. The room for the figure itself is
   unchanged, and this is cheaper than pulling down an italic face for one
   de-emphasised column. Applies to the other synthetic italic in the grid
   too -- a negative Transferred amount. */
:where(:root[data-page="transfers"]) .tr-tax-off .tr-in:not(:focus),
:where(:root[data-page="transfers"]) .tr-in.tr-neg:not(:focus){padding-right:10px;padding-left:4px}

/* Total column: just bold text, no fill or lines. */
:where(:root[data-page="transfers"]) .tr-table td.tr-total{text-align:right;font-variant-numeric:tabular-nums}
:where(:root[data-page="transfers"]) .tr-total-val{font-weight:800;color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-total-val.est{color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .tr-diff-ok{color:var(--nx-up)}
:where(:root[data-page="transfers"]) .tr-diff-bad{color:var(--nx-down)}

/* Value columns share the leftover space evenly. */
:where(:root[data-page="transfers"]) .tr-table th.tr-valcol,:where(:root[data-page="transfers"]) .tr-table td.tr-valcol{width:9.5%}

/* Label columns are only as wide as their text, and steady across weeks. */
:where(:root[data-page="transfers"]) .tr-table th.tr-lbl-fac,:where(:root[data-page="transfers"]) .tr-table td.tr-lbl-fac{width:200px}
:where(:root[data-page="transfers"]) .tr-table th.tr-lbl-co,:where(:root[data-page="transfers"]) .tr-table td.tr-lbl-co{width:120px}
/* The PDF / FINAL tag sits in its own column so every tag lines up. */
:where(:root[data-page="transfers"]) .tr-table th.tr-lbl-src,:where(:root[data-page="transfers"]) .tr-table td.tr-lbl-src{width:76px;text-align:center}
:where(:root[data-page="transfers"]) .tr-table th.tr-lbl-bank,:where(:root[data-page="transfers"]) .tr-table td.tr-lbl-bank{width:90px}
:where(:root[data-page="transfers"]) .tr-table th.tr-lbl-day,:where(:root[data-page="transfers"]) .tr-table td.tr-lbl-day{width:60px}
:where(:root[data-page="transfers"]) .tr-table th.tr-lbl-status,:where(:root[data-page="transfers"]) .tr-table td.tr-lbl-status{width:142px;text-align:center}
:where(:root[data-page="transfers"]) .tr-table th.tr-lbl-diff,:where(:root[data-page="transfers"]) .tr-table td.tr-lbl-diff{width:70px}
/* Payroll and Cash layouts. Payroll sees the table as it always was. The Cash
   layout (body.tr-cashview) adds Cash rep and folds away Report, Company and
   Bank until "More" in the Facility header opens them (body.tr-cash-open). */
:where(:root[data-page="transfers"]) .tr-table th.tr-lbl-rep,:where(:root[data-page="transfers"]) .tr-table td.tr-lbl-rep{width:130px}
:where(:root[data-page="transfers"]) .tr-rep{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;font-size:11px;color:var(--nx-ink2)}
:where(:root[data-page="transfers"]) .tr-rep.none{color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) body:not(.tr-cashview) .tr-table .tr-lbl-rep{display:none}
/* Approve: a manager's sign-off on the week's payroll. Only payroll managers,
   payroll directors and admins get the column -- boot() adds the body class
   when the server says so, and the server checks again on the save, because a
   hidden column is not a permission. */
:where(:root[data-page="transfers"]) .tr-table th.tr-lbl-appr,:where(:root[data-page="transfers"]) .tr-table td.tr-lbl-appr{width:64px;text-align:center}
/* The heading is the widest thing in this column now, so it gets the narrow
   padding -- the cell below it only ever holds a 26px box. */
:where(:root[data-page="transfers"]) .tr-table th.tr-lbl-appr{padding-left:4px;padding-right:4px}
:where(:root[data-page="transfers"]) body:not(.tr-can-approve) .tr-table .tr-lbl-appr{display:none}
/* Waiting on a manager: the violet box, with a tick where the word was. */
:where(:root[data-page="transfers"]) .tr-appr-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:24px;padding:0;border-radius:7px;border:1px solid rgba(108,75,244,.35);background:rgba(108,75,244,.10);color:var(--nx-violet);cursor:pointer}
:where(:root[data-page="transfers"]) .tr-appr-btn svg{width:13px;height:13px}
:where(:root[data-page="transfers"]) .tr-appr-btn:hover{background:var(--nx-violet);border-color:var(--nx-violet);color:#fff}
/* Nothing to approve yet: an empty box. The tick comes out of it -- a greyed
   tick is still a tick, and at a glance it reads as approved, which is the one
   thing this cell must never say by mistake. Three states, three marks: empty
   box, violet box with a tick, bare tick. */
:where(:root[data-page="transfers"]) .tr-appr-btn:disabled{background:none;border-color:var(--nx-line2);cursor:not-allowed}
:where(:root[data-page="transfers"]) .tr-appr-btn:disabled svg{display:none}
/* Approved: the same tick, out of its box. Nothing is being offered any more,
   so the box goes and the mark stands on its own. */
:where(:root[data-page="transfers"]) .tr-appr-done{display:inline-flex;align-items:center;justify-content:center;color:var(--nx-violet)}
:where(:root[data-page="transfers"]) .tr-appr-done svg{width:15px;height:15px}
:where(:root[data-page="transfers"]) body.tr-cashview:not(.tr-cash-open) .tr-table .tr-lbl-src,
:where(:root[data-page="transfers"]) body.tr-cashview:not(.tr-cash-open) .tr-table .tr-lbl-co,
:where(:root[data-page="transfers"]) body.tr-cashview:not(.tr-cash-open) .tr-table .tr-lbl-bank{display:none}
:where(:root[data-page="transfers"]) .tr-xpand{display:none;align-items:center;gap:2px;margin-left:8px;padding:1px 6px 1px 7px;border:1px solid var(--nx-line2);border-radius:10px;background:var(--nx-surface);color:var(--nx-ink2);font:inherit;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;vertical-align:middle}
:where(:root[data-page="transfers"]) .tr-xpand:hover{border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="transfers"]) .tr-xpand svg{width:10px;height:10px;transition:transform .15s}
:where(:root[data-page="transfers"]) body.tr-cashview .tr-xpand{display:inline-flex}
:where(:root[data-page="transfers"]) body.tr-cash-open .tr-xpand svg{transform:rotate(180deg)}
:where(:root[data-page="transfers"]) .tr-pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.02em}
:where(:root[data-page="transfers"]) .tr-pill.est{background:rgba(125,133,150,.16);color:var(--nx-ink2)}
:where(:root[data-page="transfers"]) .tr-pill.prelim{background:rgba(108,75,244,.14);color:var(--nx-violet)}
:where(:root[data-page="transfers"]) .tr-pill.done{background:var(--nx-up-bg);color:var(--nx-up)}
:where(:root[data-page="transfers"]) .tr-pill.need{background:var(--nx-down-bg);color:var(--nx-down)}
:where(:root[data-page="transfers"]) .tr-pill.amounts{background:rgba(234,120,30,.16);color:#D97218}
:where(:root[data-page="transfers"]) .tr-pill.need-urgent{background:var(--nx-down);color:#fff}
:where(:root[data-page="transfers"]) .tr-pill.need-urgent svg{stroke:#fff}
/* Same look as need-urgent, but two days out -- a heads-up, not an alarm. */
:where(:root[data-page="transfers"]) .tr-pill.need-soon{background:#EA781E;color:#fff}
:where(:root[data-page="transfers"]) .tr-pill.need-soon svg{stroke:#fff}
/* Final: the real numbers are in, but nothing has been sent yet. Deliberately
   not the green used by Transferred -- teal keeps the two apart at a glance. */
:where(:root[data-page="transfers"]) .tr-pill.final{background:rgba(13,148,136,.14);color:#0D9488}
/* The bank balance does not cover the payroll comfortably. Low Balance is a
   heads-up: the money is there, but less than that facility's cushion (15%
   unless it is set otherwise) is left over. UNDERFUNDED
   means the balance is below the payroll itself -- bright red, flashing, with
   a siren either side, because that payroll cannot go out as it stands. */
:where(:root[data-page="transfers"]) .tr-pill.lowbal{background:#E09000;color:#fff}
:where(:root[data-page="transfers"]) .tr-pill.lowbal svg{stroke:#fff}
/* No bank balance has been entered against a transfer that has gone out. Not
   a money problem -- a missing figure -- so it is grey rather than amber. */
:where(:root[data-page="transfers"]) .tr-pill.nobal{background:#5B6270;color:#fff}
:where(:root[data-page="transfers"]) .tr-pill.nobal svg{stroke:#fff}
:where(:root[data-page="transfers"]) .tr-pill.underfunded{background:#FF1A1A;color:#fff;letter-spacing:.05em;animation:trUnderPulse 1s ease-in-out infinite}
:where(:root[data-page="transfers"]) .tr-pill.underfunded svg{stroke:#fff}
:where(:root[data-page="transfers"]) .tr-siren{width:12px;height:12px;flex:none;animation:trSirenFlash 1s steps(1,end) infinite}
:where(:root[data-page="transfers"]) .tr-siren.b{animation-delay:.5s}
@keyframes trUnderPulse{
  0%{background:#FF1A1A;box-shadow:0 0 0 0 rgba(255,26,26,.55)}
  70%{background:#C10000;box-shadow:0 0 0 7px rgba(255,26,26,0)}
  100%{background:#FF1A1A;box-shadow:0 0 0 0 rgba(255,26,26,0)}
}
@keyframes trSirenFlash{0%{opacity:1}50%{opacity:.18}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  :where(:root[data-page="transfers"]) .tr-pill.underfunded,:where(:root[data-page="transfers"]) .tr-siren{animation:none}
}
/* ---- Funding alert -------------------------------------------------------
   The pop-up that fires when a final report leaves a row UNDERFUNDED or
   Short. Red-edged, and above every other modal on the page: it is the one
   thing here that cannot wait for someone to scroll down to the row. */
:where(:root[data-page="transfers"]) .tr-fund-card{background:var(--nx-surface);border:1px solid #FF1A1A;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.34),0 0 0 4px rgba(255,26,26,.13);padding:20px 22px;width:min(520px,92vw);display:flex;flex-direction:column}
:where(:root[data-page="transfers"]) .tr-fund-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
:where(:root[data-page="transfers"]) .tr-fund-siren{flex:none;width:34px;height:34px;border-radius:10px;background:#FF1A1A;color:#fff;display:inline-flex;align-items:center;justify-content:center;animation:trUnderPulse 1s ease-in-out infinite}
:where(:root[data-page="transfers"]) .tr-fund-siren svg{width:19px;height:19px}
:where(:root[data-page="transfers"]) .tr-fund-title{font-size:16px;font-weight:800;color:#FF1A1A;letter-spacing:.03em}
:where(:root[data-page="transfers"]) .tr-fund-sub{font-size:13px;line-height:1.5;color:var(--nx-ink2);margin-top:3px}
:where(:root[data-page="transfers"]) .tr-fund-list{display:flex;flex-direction:column;gap:9px;max-height:46vh;overflow:auto}
:where(:root[data-page="transfers"]) .tr-fund-row{border:1px solid var(--nx-line2);border-left:3px solid #FF1A1A;border-radius:11px;padding:11px 13px;display:flex;align-items:center;gap:12px}
:where(:root[data-page="transfers"]) .tr-fund-row .who{flex:1;min-width:0}
:where(:root[data-page="transfers"]) .tr-fund-row .fac{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="transfers"]) .tr-fund-row .det{font-size:12.5px;line-height:1.45;color:var(--nx-ink2);margin-top:2px}
:where(:root[data-page="transfers"]) .tr-fund-go{flex:none;font-size:12px;font-weight:700;color:var(--brand,#018B46);background:none;border:0;padding:4px 2px;cursor:pointer;text-decoration:underline}
:where(:root[data-page="transfers"]) .tr-fund-go:hover{opacity:.75}
@media (prefers-reduced-motion:reduce){ :where(:root[data-page="transfers"]) .tr-fund-siren{animation:none} }
/* The row the alert sent you to, briefly ringed so it is findable in a long
   table. Red rather than the green the shell's find bar uses -- this jump is
   always to a problem. */
@keyframes trJumpFlash{0%,100%{background:transparent}18%,62%{background:rgba(255,26,26,.14)}}
:where(:root[data-page="transfers"]) tr.tr-jump-flash>td{animation:trJumpFlash 2.3s ease}
:where(:root[data-page="transfers"]) tr.tr-jump-flash{outline:2px solid rgba(255,26,26,.6);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){ :where(:root[data-page="transfers"]) tr.tr-jump-flash>td{animation:none} }
:where(:root[data-page="transfers"]) .tr-badge-pdf{font-size:9.5px;font-weight:700;color:var(--brand);background:var(--brand-lt);border-radius:6px;padding:1px 5px;cursor:pointer}
/* The same badge slot, but for a row whose FINAL register was uploaded. */
:where(:root[data-page="transfers"]) .tr-badge-pdf.fin{color:#0D9488;background:rgba(13,148,136,.14)}
/* And once a manager has approved the row, which outranks both. */
:where(:root[data-page="transfers"]) .tr-badge-pdf.appr{color:var(--nx-violet);background:rgba(108,75,244,.14)}
/* Small check next to the facility once the payroll has been submitted. */
:where(:root[data-page="transfers"]) .tr-sub{display:inline-flex;align-items:center;margin-left:5px;color:var(--nx-up)}
:where(:root[data-page="transfers"]) .tr-sub svg{width:12px;height:12px}
:where(:root[data-page="transfers"]) .tr-pdf-wrap{display:inline-flex;align-items:center;justify-content:center}
:where(:root[data-page="transfers"]) .tr-pdf-wrap .tr-badge-pdf{margin-left:0}
:where(:root[data-page="transfers"]) .tr-status-sel{width:100%;min-width:0;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:7px;padding:5px 20px 5px 7px;font-size:10.5px;font-family:inherit;cursor:pointer;font-weight:600;appearance:none;-webkit-appearance:none;-moz-appearance:none;text-overflow:ellipsis;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%239499AB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 5px center}
:where(:root[data-page="transfers"]) .tr-status-sel:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .tr-status-sel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="transfers"]) .tr-status-sel:disabled{opacity:.6;cursor:default;background-image:none;padding-right:9px}
:where(:root[data-page="transfers"]) .tr-check{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
:where(:root[data-page="transfers"]) .tr-empty{padding:44px 20px;text-align:center;color:var(--nx-ink3)}

/* Views */
:where(:root[data-page="transfers"]) .tr-view{display:none}
:where(:root[data-page="transfers"]) .tr-view.active{display:block}
:where(:root[data-page="transfers"]) #view-worklist.active{display:flex;flex-direction:column;flex:1;min-height:0}
:where(:root[data-page="transfers"]) #view-worklist .nx-card{display:flex;flex-direction:column;min-height:0;flex:1}
:where(:root[data-page="transfers"]) #view-settings.active{display:block;flex:1;min-height:0;overflow-y:auto}
:where(:root[data-page="transfers"]) #view-history.active{display:flex;flex-direction:column;flex:1;min-height:0}
:where(:root[data-page="transfers"]) #view-history .nx-card{display:flex;flex-direction:column;min-height:0;flex:1}
:where(:root[data-page="transfers"]) #view-activity.active{display:flex;flex-direction:column;flex:1;min-height:0}
:where(:root[data-page="transfers"]) #view-activity .nx-card{display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden}
:where(:root[data-page="transfers"]) #view-activity #acBody{flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable}

/* ============ History view ============ */
/* The grid is wide (facility + company + bank + this week + 6 weeks + avg + %),
   so it scrolls sideways inside the card while the left columns stay put.

   Padding here deliberately mirrors .tr-table on the worklist -- 11px headers,
   5px body rows -- so switching between the two views doesn't feel like landing
   on a different page. */
:where(:root[data-page="transfers"]) .hi-scroll{overflow:auto;flex:1;min-height:0}
:where(:root[data-page="transfers"]) .hi-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
:where(:root[data-page="transfers"]) .hi-tbl thead th{position:sticky;top:0;z-index:2;background:var(--nx-rail);
  font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--nx-ink3);
  text-align:right;padding:11px 10px;border:none;box-shadow:inset 0 -1px 0 var(--nx-line);white-space:nowrap}
:where(:root[data-page="transfers"]) .hi-tbl thead th.lft{text-align:left}
/* Row height is matched to the worklist on purpose. A worklist row is taller
   than its text because every number cell holds a .tr-in input (~29px: text +
   5px padding + 1px border, top and bottom). History cells are plain text, so
   without a floor here the rows would sit noticeably tighter and the two views
   wouldn't line up. Set the same box height rather than padding it out by eye --
   if .tr-in ever changes, this is the one number to revisit. */
:where(:root[data-page="transfers"]) .hi-tbl tbody td{padding:5px 10px;height:29px;box-sizing:content-box;border-bottom:1px solid var(--nx-line);vertical-align:middle;white-space:nowrap}
:where(:root[data-page="transfers"]) .hi-tbl tbody td.num{text-align:right;font-variant-numeric:tabular-nums}
:where(:root[data-page="transfers"]) .hi-tbl tbody tr:hover td{background:var(--nx-hover,rgba(0,0,0,.02))}

/* Sortable headers. Clicking cycles the direction; the active one shows an arrow. */
:where(:root[data-page="transfers"]) .hi-tbl th.hi-th{cursor:pointer;user-select:none}
:where(:root[data-page="transfers"]) .hi-tbl th.hi-th:hover{color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .hi-tbl th.hi-th.sorted{color:var(--brand)}
:where(:root[data-page="transfers"]) .hi-ar{display:inline-block;width:9px;margin-left:2px;font-size:8px;color:var(--brand)}

/* The three identity columns are pinned left while the weeks scroll under them.
   Each needs its own `left` offset -- sticky stacks by explicit position, not by
   source order. Keep these widths in step with the offsets. */
:where(:root[data-page="transfers"]) .hi-tbl th.hi-fac, :where(:root[data-page="transfers"]) .hi-tbl td.hi-fac,
:where(:root[data-page="transfers"]) .hi-tbl th.hi-co,  :where(:root[data-page="transfers"]) .hi-tbl td.hi-co,
:where(:root[data-page="transfers"]) .hi-tbl th.hi-bank,:where(:root[data-page="transfers"]) .hi-tbl td.hi-bank{position:sticky;z-index:1;background:var(--nx-surface);text-align:left}
:where(:root[data-page="transfers"]) .hi-tbl th.hi-fac, :where(:root[data-page="transfers"]) .hi-tbl td.hi-fac { left:0;    min-width:170px;max-width:170px}
:where(:root[data-page="transfers"]) .hi-tbl th.hi-co,  :where(:root[data-page="transfers"]) .hi-tbl td.hi-co  { left:170px;min-width:112px;max-width:112px}
:where(:root[data-page="transfers"]) .hi-tbl th.hi-bank,:where(:root[data-page="transfers"]) .hi-tbl td.hi-bank{ left:282px;min-width:118px;max-width:118px;
  box-shadow:inset -1px 0 0 var(--nx-line2)}
:where(:root[data-page="transfers"]) .hi-tbl td.hi-bank .tr-bank{display:inline-block;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;vertical-align:middle}
:where(:root[data-page="transfers"]) .hi-tbl thead th.hi-fac,:where(:root[data-page="transfers"]) .hi-tbl thead th.hi-co,:where(:root[data-page="transfers"]) .hi-tbl thead th.hi-bank{z-index:3;background:var(--nx-rail);
  box-shadow:inset 0 -1px 0 var(--nx-line)}
:where(:root[data-page="transfers"]) .hi-tbl thead th.hi-bank{box-shadow:inset 0 -1px 0 var(--nx-line), inset -1px 0 0 var(--nx-line2)}
:where(:root[data-page="transfers"]) .hi-tbl tbody tr:hover td.hi-fac,
:where(:root[data-page="transfers"]) .hi-tbl tbody tr:hover td.hi-co,
:where(:root[data-page="transfers"]) .hi-tbl tbody tr:hover td.hi-bank{background:var(--nx-rail)}

/* This week's number: the anchor of the whole row, so it reads heavier. */
:where(:root[data-page="transfers"]) .hi-tbl td.hi-cur{font-weight:700;background:var(--brand-lt)}
:where(:root[data-page="transfers"]) .hi-tbl thead th.hi-cur{color:var(--brand)}

/* Holiday weeks are dimmed -- they show, but they don't count in the average. */
:where(:root[data-page="transfers"]) .hi-tbl td.hi-hol{color:var(--nx-ink3);font-style:italic}

:where(:root[data-page="transfers"]) .hi-tbl td.hi-avg{font-weight:600;background:var(--nx-rail)}
:where(:root[data-page="transfers"]) .hi-blank{color:var(--nx-ink3)}

/* The % off column, and its alert states. */
/* Settings opened by the Cash team: the Facilities list and the low balance %
   box, nothing else. Hidden here as well as skipped in JS so a stray click
   can never reach a tab they may not use. */
:where(:root[data-page="transfers"]) body.tr-lowbal-only #settab-deds,
:where(:root[data-page="transfers"]) body.tr-lowbal-only #settab-taxes,
:where(:root[data-page="transfers"]) body.tr-lowbal-only #settab-holds,
:where(:root[data-page="transfers"]) body.tr-lowbal-only #settab-pauses,
:where(:root[data-page="transfers"]) body.tr-lowbal-only #trFacAddBtn,
:where(:root[data-page="transfers"]) body.tr-lowbal-only .tr-fac-pwcol{display:none !important}
/* Everyone else who can open Transfers gets Settings with the Cash reps tab
   and nothing more. */
:where(:root[data-page="transfers"]) body.tr-reps-only #settab-facilities,
:where(:root[data-page="transfers"]) body.tr-reps-only #settab-deds,
:where(:root[data-page="transfers"]) body.tr-reps-only #settab-taxes,
:where(:root[data-page="transfers"]) body.tr-reps-only #settab-holds,
:where(:root[data-page="transfers"]) body.tr-reps-only #settab-pauses{display:none !important}
:where(:root[data-page="transfers"]) .hi-pct{display:inline-flex;align-items:center;gap:3px;justify-content:flex-end;
  font-weight:700;font-variant-numeric:tabular-nums}
:where(:root[data-page="transfers"]) .hi-pct.ok{color:var(--nx-ink3);font-weight:500}
:where(:root[data-page="transfers"]) .hi-pct.high,:where(:root[data-page="transfers"]) .hi-pct.low{color:#B42318}
:where(:root[data-page="transfers"]) .hi-pct svg{width:11px;height:11px}
:where(:root[data-page="transfers"]) tr.hi-alert td.hi-fac{box-shadow:inset 3px 0 0 #B42318}

/* The flagged "Off avg" cell explains itself on hover. Underline it so people
   discover that there's something to hover over. */
:where(:root[data-page="transfers"]) .hi-tbl td.hi-why{cursor:help}
:where(:root[data-page="transfers"]) .hi-tbl td.hi-why .hi-pct{text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:3px;text-decoration-thickness:1px}
:where(:root[data-page="transfers"]) .hi-tbl tbody tr:hover td.hi-why{background:#FEF3F2}

/* ---- The "why is it off" card ----
   Fixed to the viewport so it escapes the table's scroll box. Placed by JS. */
:where(:root[data-page="transfers"]) .hi-tip{position:fixed;z-index:9998;width:390px;pointer-events:none;
  background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);padding:13px 15px;font-size:12.5px;color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .hi-tip-h{font-size:13px;font-weight:600;padding-bottom:9px;margin-bottom:9px;
  border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="transfers"]) .hi-tip-h b{font-weight:800}
:where(:root[data-page="transfers"]) .hi-tip-h.up{color:#B42318}
:where(:root[data-page="transfers"]) .hi-tip-h.dn{color:#B54708}

/* This week / average / difference, as a tight two-column list. */
:where(:root[data-page="transfers"]) .hi-tip-sum{display:grid;grid-template-columns:1fr auto;gap:3px 14px;margin-bottom:12px;
  color:var(--nx-ink2)}
:where(:root[data-page="transfers"]) .hi-tip-sum .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .hi-tip-sum .tot{padding-top:5px;margin-top:2px;border-top:1px solid var(--nx-line);font-weight:700}
:where(:root[data-page="transfers"]) .hi-tip-sum .v.tot.up{color:#B42318}
:where(:root[data-page="transfers"]) .hi-tip-sum .v.tot.dn{color:#B54708}

:where(:root[data-page="transfers"]) .hi-tip-lbl{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--nx-ink3);margin-bottom:5px}

:where(:root[data-page="transfers"]) .hi-tip-t{width:100%;border-collapse:collapse;font-size:12px}
:where(:root[data-page="transfers"]) .hi-tip-t th{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  color:var(--nx-ink3);text-align:right;padding:0 0 4px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="transfers"]) .hi-tip-t th:first-child{text-align:left}
:where(:root[data-page="transfers"]) .hi-tip-t td{padding:5px 0;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="transfers"]) .hi-tip-t tr:last-child td{border-bottom:0}
:where(:root[data-page="transfers"]) .hi-tip-t td.n{text-align:right;font-variant-numeric:tabular-nums;padding-left:12px}
:where(:root[data-page="transfers"]) .hi-tip-t td.n.up{color:#B42318;font-weight:700}
:where(:root[data-page="transfers"]) .hi-tip-t td.n.dn{color:#B54708;font-weight:700}
/* The part (or parts) doing most of the work get the emphasis. */
:where(:root[data-page="transfers"]) .hi-tip-t tr.big td{font-weight:700;background:var(--nx-rail)}
:where(:root[data-page="transfers"]) .hi-tip-t tr.big td:first-child{border-radius:5px 0 0 5px;padding-left:5px}
:where(:root[data-page="transfers"]) .hi-tip-t tr.big td:last-child{border-radius:0 5px 5px 0;padding-right:5px}
:where(:root[data-page="transfers"]) .hi-tip-pct{display:block;font-size:10px;font-weight:500;color:var(--nx-ink3);
  font-variant-numeric:normal;margin-top:1px}
:where(:root[data-page="transfers"]) .hi-tip-note{margin-top:9px;padding-top:8px;border-top:1px solid var(--nx-line);
  font-size:11px;color:var(--nx-ink3);white-space:normal;line-height:1.4}

/* Alert summary strip above the table. */
:where(:root[data-page="transfers"]) .hi-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--nx-line2);
  border-radius:var(--nx-radius);background:var(--nx-rail);margin-bottom:12px;font-size:12.5px}
:where(:root[data-page="transfers"]) .hi-bar.warn{border-color:#FDA29B;background:#FEF3F2;color:#912018}
:where(:root[data-page="transfers"]) .hi-bar svg{width:15px;height:15px;flex:none}
:where(:root[data-page="transfers"]) .hi-bar b{font-weight:700}
:where(:root[data-page="transfers"]) .hi-reset{border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);
  border-radius:7px;padding:4px 9px;font-size:11.5px;font-weight:600;cursor:pointer}
:where(:root[data-page="transfers"]) .hi-reset:hover{border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="transfers"]) .hi-note{margin-left:auto;color:var(--nx-ink3);font-size:11.5px;font-weight:500}
:where(:root[data-page="transfers"]) .hi-bar.warn .hi-note{color:#B42318}

/* Upload view */
:where(:root[data-page="transfers"]) .tr-drop{border:2px dashed var(--nx-line2);border-radius:var(--nx-radius);background:var(--nx-rail);padding:38px 20px;text-align:center;cursor:pointer;transition:border-color .12s,background .12s}
:where(:root[data-page="transfers"]) .tr-drop:hover,:where(:root[data-page="transfers"]) .tr-drop.drag{border-color:var(--brand);background:var(--brand-lt)}
:where(:root[data-page="transfers"]) .tr-drop svg{width:34px;height:34px;color:var(--nx-ink3);margin-bottom:10px}
:where(:root[data-page="transfers"]) .tr-drop-t{font-size:14px;font-weight:700}
:where(:root[data-page="transfers"]) .tr-drop-s{font-size:12px;color:var(--nx-ink3);margin-top:5px}
/* Header band on the upload-confirm popup. */
:where(:root[data-page="transfers"]) .tr-cfm-head{border:1px solid var(--nx-line2);border-radius:12px;background:var(--nx-rail);padding:12px 14px;margin-bottom:12px}
:where(:root[data-page="transfers"]) .tr-cfm-row{display:flex;align-items:center;gap:10px}
:where(:root[data-page="transfers"]) .tr-cfm-fac{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--nx-ink);flex:1;min-width:0;word-break:break-word}
:where(:root[data-page="transfers"]) .tr-cfm-date{display:flex;align-items:baseline;gap:8px;margin-top:7px}
:where(:root[data-page="transfers"]) .tr-cfm-date .k{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .tr-cfm-date .v{font-size:15px;font-weight:700;color:var(--nx-ink);font-variant-numeric:tabular-nums}
:where(:root[data-page="transfers"]) .tr-cfm-file{margin-top:7px;font-size:11.5px;color:var(--nx-ink3);word-break:break-all}
:where(:root[data-page="transfers"]) .tr-parsed{margin-top:18px;display:none}
:where(:root[data-page="transfers"]) .tr-parsed.show{display:block}
:where(:root[data-page="transfers"]) .tr-parsed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:12px}
:where(:root[data-page="transfers"]) .tr-parsed-cell{background:var(--nx-rail);border:1px solid var(--nx-line);border-radius:11px;padding:12px 14px}
:where(:root[data-page="transfers"]) .tr-parsed-cell .k{font-size:10.5px;font-weight:700;color:var(--nx-ink3);text-transform:uppercase;letter-spacing:.04em}
:where(:root[data-page="transfers"]) .tr-parsed-cell .v{font-size:17px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}

/* ============ Activity view ============ */
/* A change log: one line per field change, newest first, grouped by day. Reads
   like the history table so switching views feels the same. */
:where(:root[data-page="transfers"]) .ac-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
:where(:root[data-page="transfers"]) .ac-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Custom multi-select filter. A button that opens a checkbox panel, styled to
   match the user popover so the page feels like one thing. No native <select>
   anywhere -- those render as OS chrome and break the look. */
:where(:root[data-page="transfers"]) .ac-f{position:relative}
:where(:root[data-page="transfers"]) .ac-fbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--nx-line2);
  background:var(--nx-surface);color:var(--nx-ink);border-radius:8px;padding:6px 10px;
  font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;
  min-width:132px;max-width:210px;text-align:left}
:where(:root[data-page="transfers"]) .ac-fbtn:hover{border-color:var(--brand)}
:where(:root[data-page="transfers"]) .ac-f.open .ac-fbtn{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="transfers"]) .ac-fbtn-lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="transfers"]) .ac-fbtn.on .ac-fbtn-lbl{color:var(--brand)}
:where(:root[data-page="transfers"]) .ac-fbtn-cnt{flex:0 0 auto;min-width:17px;height:17px;padding:0 5px;border-radius:9px;
  background:var(--brand);color:#fff;font-size:10.5px;font-weight:700;
  display:none;align-items:center;justify-content:center}
:where(:root[data-page="transfers"]) .ac-fbtn.on .ac-fbtn-cnt{display:inline-flex}
:where(:root[data-page="transfers"]) .ac-fcar{flex:0 0 auto;width:13px;height:13px;color:var(--nx-ink3);transition:transform .15s}
:where(:root[data-page="transfers"]) .ac-f.open .ac-fcar{transform:rotate(180deg)}

:where(:root[data-page="transfers"]) .ac-fpop{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;max-width:320px;
  background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:12px;
  box-shadow:0 18px 44px rgba(20,22,28,.20);padding:7px;display:none;z-index:130}
:where(:root[data-page="transfers"]) .ac-f.open .ac-fpop{display:block}
:where(:root[data-page="transfers"]) .ac-f.flip .ac-fpop{left:auto;right:0}
:where(:root[data-page="transfers"]) .ac-fsearch{position:relative;margin:1px 1px 6px}
:where(:root[data-page="transfers"]) .ac-fsearch input{width:100%;border:1px solid var(--nx-line2);background:var(--nx-rail);
  border-radius:8px;padding:7px 10px;font-size:12.5px;font-family:inherit;color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .ac-fsearch input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="transfers"]) .ac-flist{max-height:264px;overflow-y:auto;margin:0 -1px}
:where(:root[data-page="transfers"]) .ac-fopt{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;
  font-size:12.5px;font-weight:500;color:var(--nx-ink);cursor:pointer;user-select:none}
:where(:root[data-page="transfers"]) .ac-fopt:hover{background:var(--nx-hover)}
:where(:root[data-page="transfers"]) .ac-fbox{flex:0 0 auto;width:15px;height:15px;border:1.5px solid var(--nx-line2);
  border-radius:4px;background:var(--nx-surface);display:flex;align-items:center;
  justify-content:center;color:#fff}
:where(:root[data-page="transfers"]) .ac-fbox svg{width:10px;height:10px;opacity:0}
:where(:root[data-page="transfers"]) .ac-fopt.on .ac-fbox{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="transfers"]) .ac-fopt.on .ac-fbox svg{opacity:1}
:where(:root[data-page="transfers"]) .ac-fopt-txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="transfers"]) .ac-fnone{padding:10px 9px;font-size:12px;color:var(--nx-ink3);text-align:center}
:where(:root[data-page="transfers"]) .ac-ffoot{display:flex;gap:6px;border-top:1px solid var(--nx-line);margin:6px -7px -7px;
  padding:7px 7px 7px}
:where(:root[data-page="transfers"]) .ac-ffbtn{flex:1;border:1px solid var(--nx-line2);background:var(--nx-surface);
  color:var(--nx-ink2);border-radius:7px;padding:5px 8px;font-size:11.5px;font-weight:600;
  font-family:inherit;cursor:pointer}
:where(:root[data-page="transfers"]) .ac-ffbtn:hover{border-color:var(--brand);color:var(--brand)}

:where(:root[data-page="transfers"]) .ac-reset{border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);
  border-radius:8px;padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer}
:where(:root[data-page="transfers"]) .ac-reset:hover{border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="transfers"]) .ac-note{margin-left:auto;color:var(--nx-ink3);font-size:11.5px;font-weight:500}

/* One flat table, newest first. The day used to be a heading above each group;
   it is a real column now so every row carries its own date and the columns
   line up all the way down.

   Fixed layout + colgroup means the widths never shift as you filter -- the
   table looks identical whether it is showing 3 rows or 300. */
:where(:root[data-page="transfers"]) .ac-tbl{width:100%;min-width:1094px;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
:where(:root[data-page="transfers"]) .ac-tbl thead th{background:var(--nx-rail);position:sticky;top:0;z-index:2;
  font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--nx-ink3);
  text-align:left;padding:9px 10px;border:none;box-shadow:inset 0 -1px 0 var(--nx-line);white-space:nowrap}
:where(:root[data-page="transfers"]) .ac-tbl thead th.num{text-align:right}
:where(:root[data-page="transfers"]) .ac-tbl tbody td{padding:8px 10px;border-bottom:1px solid var(--nx-line);vertical-align:middle;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="transfers"]) .ac-tbl tbody tr:last-child td{border-bottom:0}
:where(:root[data-page="transfers"]) .ac-tbl tbody tr:hover td{background:var(--nx-hover,rgba(0,0,0,.02))}
:where(:root[data-page="transfers"]) .ac-tbl td.ac-date{color:var(--nx-ink);font-weight:600;font-variant-numeric:tabular-nums}
:where(:root[data-page="transfers"]) .ac-tbl td.ac-when{color:var(--nx-ink3);font-size:11.5px;font-variant-numeric:tabular-nums}
:where(:root[data-page="transfers"]) .ac-tbl td.ac-who{font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .ac-tbl td.ac-dept{color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .ac-tbl td.ac-fac{font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .ac-tbl td.ac-wk{color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .ac-tbl td.ac-fld{font-weight:600;color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .ac-tbl td.ac-from,:where(:root[data-page="transfers"]) .ac-tbl td.ac-to{text-align:right;font-variant-numeric:tabular-nums}
:where(:root[data-page="transfers"]) .ac-tbl td.ac-from{color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .ac-tbl td.ac-to{color:var(--brand);font-weight:700}
:where(:root[data-page="transfers"]) .ac-tbl .blank{color:var(--nx-ink3);font-style:italic;text-decoration:none}
:where(:root[data-page="transfers"]) .ac-empty{padding:34px 14px;text-align:center;color:var(--nx-ink3);font-size:13px}

/* ============ Settings view ============ */
:where(:root[data-page="transfers"]) .tr-set-wrap{max-width:1080px;margin:0 auto;padding:4px 0 40px}

/* Header of the whole Settings area */
:where(:root[data-page="transfers"]) .tr-set-head{margin:2px 2px 20px}
:where(:root[data-page="transfers"]) .tr-set-head h2{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0 0 3px;color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-set-head p{font-size:12.5px;color:var(--nx-ink3);margin:0}

/* Segmented pill tab bar sitting in a subtle track */
:where(:root[data-page="transfers"]) .tr-set-tabsx{display:inline-flex;gap:3px;padding:4px;margin-bottom:22px;background:var(--nx-rail);border:1px solid var(--nx-line);border-radius:13px}
:where(:root[data-page="transfers"]) .tr-set-tab{position:relative;display:inline-flex;align-items:center;gap:7px;border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--nx-ink2);padding:8px 15px;border-radius:9px;cursor:pointer;transition:background .13s,color .13s,box-shadow .13s}
:where(:root[data-page="transfers"]) .tr-set-tab:hover{color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-set-tab.active{background:var(--nx-surface);color:var(--nx-ink);box-shadow:0 1px 2px rgba(20,22,28,.10),0 0 0 1px var(--nx-line2)}
:root[data-theme="dark"]:where([data-page="transfers"]) .tr-set-tab.active{box-shadow:0 1px 2px rgba(0,0,0,.4),0 0 0 1px var(--nx-line2)}
:where(:root[data-page="transfers"]) .tr-set-tab .tr-tab-badge{font-size:10px;font-weight:800;color:#fff;background:var(--nx-warn);min-width:18px;height:18px;padding:0 5px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center}

/* One panel per tab */
:where(:root[data-page="transfers"]) .tr-set-panel{display:none;animation:trSetIn .18s ease}
:where(:root[data-page="transfers"]) .tr-set-panel.active{display:block}
@keyframes trSetIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* A titled block wrapping each table */
:where(:root[data-page="transfers"]) .tr-set-block{background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:15px;overflow:hidden;box-shadow:0 1px 2px rgba(20,22,28,.04)}
:where(:root[data-page="transfers"]) .tr-set-block + .tr-set-block{margin-top:18px}
:where(:root[data-page="transfers"]) .tr-set-blockhead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:17px 18px 15px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="transfers"]) .tr-set-h{font-size:13.5px;font-weight:700;letter-spacing:-.01em;margin:0 0 2px;color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-set-p{font-size:12px;line-height:1.5;color:var(--nx-ink3);margin:0;max-width:640px}
:where(:root[data-page="transfers"]) .tr-set-blocktools{flex:0 0 auto;display:flex;align-items:center;gap:10px}

/* Search box in a block header */
:where(:root[data-page="transfers"]) .tr-set-search{position:relative;display:flex;align-items:center}
:where(:root[data-page="transfers"]) .tr-set-search svg{position:absolute;left:11px;width:15px;height:15px;color:var(--nx-ink3);pointer-events:none}
:where(:root[data-page="transfers"]) .tr-set-search input{width:230px;max-width:100%;height:36px;padding:0 32px 0 33px;border:1px solid var(--nx-line2);background:var(--nx-rail);border-radius:9px;font-size:13px;font-family:inherit;color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-set-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="transfers"]) .tr-set-search input::placeholder{color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .tr-set-search .tr-set-clear{position:absolute;right:6px;width:22px;height:22px;border:none;background:none;color:var(--nx-ink3);cursor:pointer;border-radius:6px;display:none;align-items:center;justify-content:center;padding:0}
:where(:root[data-page="transfers"]) .tr-set-search .tr-set-clear:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-set-search.has-val .tr-set-clear{display:flex}
:where(:root[data-page="transfers"]) .tr-set-search .tr-set-clear svg{position:static;width:13px;height:13px}
@media(max-width:560px){:where(:root[data-page="transfers"]) .tr-set-search input{width:150px}}

/* Tables inside blocks */
:where(:root[data-page="transfers"]) .tr-set-tablewrap{overflow-x:auto}
:where(:root[data-page="transfers"]) .tr-set-table{width:100%;border-collapse:collapse;font-size:12.5px}
:where(:root[data-page="transfers"]) .tr-set-table th{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-ink3);text-align:left;padding:11px 18px;background:var(--nx-rail);border-bottom:1px solid var(--nx-line)}
/* Sortable headers. The arrow sits in a fixed-width slot so the label doesn't
   shift sideways when it appears. */
:where(:root[data-page="transfers"]) .tr-set-table th.tr-set-th-sort{cursor:pointer;user-select:none}
:where(:root[data-page="transfers"]) .tr-set-table th.tr-set-th-sort:hover{color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-set-table th.sort-asc,:where(:root[data-page="transfers"]) .tr-set-table th.sort-desc{color:var(--brand)}
:where(:root[data-page="transfers"]) .tr-set-thin{display:inline-flex;align-items:center;gap:1px}
:where(:root[data-page="transfers"]) .tr-set-ar{display:inline-block;width:9px;font-size:9px;color:var(--brand)}
:where(:root[data-page="transfers"]) .tr-set-table th.sort-asc  .tr-set-ar::after{content:"\2191"}
:where(:root[data-page="transfers"]) .tr-set-table th.sort-desc .tr-set-ar::after{content:"\2193"}
:where(:root[data-page="transfers"]) .tr-set-table td{padding:11px 18px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink);vertical-align:middle}
:where(:root[data-page="transfers"]) .tr-set-table tbody tr:last-child td{border-bottom:none}
:where(:root[data-page="transfers"]) .tr-set-table tbody tr:hover td{background:var(--tr-row-hover)}
:where(:root[data-page="transfers"]) .tr-fac-row{cursor:pointer}
:where(:root[data-page="transfers"]) .tr-set-table .tr-bank{color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .tr-set-table .tr-empty{padding:34px 18px;text-align:center;color:var(--nx-ink3);font-size:12.5px}

/* Status pills */
:where(:root[data-page="transfers"]) .tr-pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
:where(:root[data-page="transfers"]) .tr-pill.on{color:var(--nx-up);background:var(--nx-up-bg)}
:where(:root[data-page="transfers"]) .tr-pill.off{color:var(--nx-ink3);background:var(--surface2)}
:where(:root[data-page="transfers"]) .tr-pill.newp{color:var(--nx-warn);background:var(--nx-warn-bg)}

/* Row delete / icon buttons */
:where(:root[data-page="transfers"]) .tr-iconbtn{border:none;background:none;cursor:pointer;color:var(--nx-ink3);padding:5px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
:where(:root[data-page="transfers"]) .tr-iconbtn:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-iconbtn.danger:hover{background:var(--nx-down-bg);color:var(--nx-down)}
:where(:root[data-page="transfers"]) .tr-iconbtn svg{width:15px;height:15px}

/* Pause builder — a real toolbar row */
:where(:root[data-page="transfers"]) .tr-pause-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:16px 18px;background:var(--nx-rail);border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="transfers"]) .tr-pause-form label{display:flex;flex-direction:column;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .tr-pause-form select,:where(:root[data-page="transfers"]) .tr-pause-form input{height:36px;padding:0 11px;border-radius:9px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink);font-size:13px;font-family:inherit}
:where(:root[data-page="transfers"]) .tr-pause-form select:focus,:where(:root[data-page="transfers"]) .tr-pause-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="transfers"]) .tr-pause-form select{min-width:200px}
/* Settings > Cash reps. The name is a button; clicking it swaps in a picker,
   so the row's text (search, sort) is only ever the rep who is set. */
:where(:root[data-page="transfers"]) .tr-rep-btn{height:30px;padding:0 11px;border-radius:8px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink);font-size:12.5px;font-family:inherit;cursor:pointer;min-width:150px;text-align:left}
:where(:root[data-page="transfers"]) .tr-rep-btn:hover{border-color:var(--brand)}
:where(:root[data-page="transfers"]) .tr-rep-btn.empty{color:var(--nx-ink3);font-style:italic}
:where(:root[data-page="transfers"]) .tr-rep-sel{height:30px;padding:0 8px;border-radius:8px;border:1px solid var(--brand);box-shadow:0 0 0 3px var(--brand-lt);background:var(--nx-surface);color:var(--nx-ink);font-size:12.5px;font-family:inherit;min-width:150px}
:where(:root[data-page="transfers"]) .tr-rep-sel:focus{outline:none}
:where(:root[data-page="transfers"]) .tr-rep-ck{width:1%;padding-right:0 !important}
:where(:root[data-page="transfers"]) .tr-rep-ck input{width:15px;height:15px;margin:0;accent-color:var(--brand);cursor:pointer;vertical-align:middle}
:where(:root[data-page="transfers"]) .tr-set-table tr.tr-rep-picked td{background:var(--brand-lt)}
/* The bar that assigns one rep to every ticked facility. */
:where(:root[data-page="transfers"]) .tr-rep-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
:where(:root[data-page="transfers"]) .tr-rep-bulk .tr-rep-count{font-size:12px;font-weight:600;color:var(--nx-ink3);white-space:nowrap}
:where(:root[data-page="transfers"]) .tr-rep-bulk.on .tr-rep-count{color:var(--brand)}
:where(:root[data-page="transfers"]) .tr-rep-bulk select{height:36px;padding:0 10px;border-radius:9px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink);font-size:13px;font-family:inherit;min-width:170px}
:where(:root[data-page="transfers"]) .tr-rep-bulk select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="transfers"]) .tr-rep-go{height:36px;padding:0 16px;border-radius:9px;border:1px solid var(--brand);background:var(--brand);color:#fff;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer}
:where(:root[data-page="transfers"]) .tr-rep-go:hover{filter:brightness(1.06)}
:where(:root[data-page="transfers"]) .tr-rep-go:disabled{opacity:.45;cursor:not-allowed;filter:none}
:where(:root[data-page="transfers"]) .tr-rep-bulk .tr-rep-none{border:none;background:none;color:var(--nx-ink3);font-size:12px;font-family:inherit;cursor:pointer;padding:0 4px;text-decoration:underline}
:where(:root[data-page="transfers"]) .tr-pause-form input[type=text]{min-width:190px;flex:1}
:where(:root[data-page="transfers"]) .tr-pause-del{border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:8px;padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer}
:where(:root[data-page="transfers"]) .tr-pause-del:hover{border-color:var(--nx-down);color:var(--nx-down)}
:where(:root[data-page="transfers"]) .tr-pause-open{color:var(--nx-warn);font-weight:600}
/* Add/edit facility modal fields */
:where(:root[data-page="transfers"]) .af-lab{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;color:var(--nx-ink3);text-transform:uppercase;letter-spacing:.05em}
:where(:root[data-page="transfers"]) .af-in{font:inherit;font-size:13px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--nx-ink);border:1px solid var(--nx-line2);background:var(--nx-rail);border-radius:9px;padding:9px 11px;width:100%}
:where(:root[data-page="transfers"]) .af-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="transfers"]) .af-in.af-invalid{border-color:var(--nx-down);box-shadow:0 0 0 3px var(--nx-down-bg)}
/* A field that is shown but cannot be changed -- the facility name on an
   existing facility. Reads clearly as "look, don't touch". */
:where(:root[data-page="transfers"]) .af-in.af-locked{background:var(--nx-line);color:var(--nx-ink3);cursor:not-allowed;border-color:var(--nx-line2);pointer-events:none;user-select:none}
:where(:root[data-page="transfers"]) .af-in.af-locked:focus{outline:none;border-color:var(--nx-line2);box-shadow:none}
:where(:root[data-page="transfers"]) .af-in.af-invalid:focus{border-color:var(--nx-down);box-shadow:0 0 0 3px var(--nx-down-bg)}
:where(:root[data-page="transfers"]) .af-lab.af-invalid-lab{color:var(--nx-down)}
:where(:root[data-page="transfers"]) .af-row{display:flex;gap:12px}
:where(:root[data-page="transfers"]) .af-row > .af-lab{flex:1;min-width:0}
/* Small plain-English note under a field in the facility modal. */
:where(:root[data-page="transfers"]) .af-hint{font-size:11px;font-weight:400;text-transform:none;letter-spacing:0;line-height:1.45;color:var(--nx-ink3)}
/* Tab strip inside Settings */
:where(:root[data-page="transfers"]) .tr-confirm-quote{display:none;margin:-8px 0 18px;padding:10px 12px;border-left:3px solid var(--nx-line2);background:var(--nx-elev);border-radius:0 8px 8px 0;font-size:12.5px;line-height:1.5;color:var(--nx-ink2);white-space:pre-wrap;word-break:break-word;max-height:120px;overflow-y:auto}
:where(:root[data-page="transfers"]) .tr-confirm-quote.on{display:block}
:where(:root[data-page="transfers"]) .tr-xfer-wrap{display:flex;align-items:center;gap:4px}
:where(:root[data-page="transfers"]) .tr-xfer-wrap .tr-in{flex:1;min-width:0}
/* Kept on purpose, a negative amount is only a note -- show it as one. */
:where(:root[data-page="transfers"]) .tr-in.tr-neg{color:var(--nx-down);font-style:italic}
/* Money went out but nobody said what is left in the account. Ring the box so
   it is obvious which figure is missing. */
:where(:root[data-page="transfers"]) .tr-in.tr-need-bal{border-color:#E09000;background:rgba(224,144,0,.10)}
:where(:root[data-page="transfers"]) .tr-in.tr-need-bal::placeholder{color:#C07C00;opacity:1}
:where(:root[data-page="transfers"]) .tr-note{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;border-radius:5px;color:var(--nx-ink3);cursor:pointer}
:where(:root[data-page="transfers"]) .tr-note svg{width:13px;height:13px}
:where(:root[data-page="transfers"]) .tr-note:hover{color:var(--brand,#018B46);background:var(--nx-elev)}
:where(:root[data-page="transfers"]) .tr-note[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:var(--nx-ink);color:#fff;font-size:11.5px;font-weight:500;line-height:1.45;text-align:left;white-space:normal;width:max-content;max-width:260px;padding:8px 10px;border-radius:8px;box-shadow:0 6px 18px rgba(20,22,28,.22);opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;z-index:60}
:where(:root[data-page="transfers"]) .tr-note[data-tip]::before{content:"";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%) translateY(4px);border:5px solid transparent;border-top-color:var(--nx-ink);opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;z-index:60}
:where(:root[data-page="transfers"]) .tr-note[data-tip]:hover::after,:where(:root[data-page="transfers"]) .tr-note[data-tip]:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}
:where(:root[data-page="transfers"]) .tr-in:disabled{cursor:default;pointer-events:none}
:where(:root[data-page="transfers"]) .tr-short-clear{display:flex;align-items:center;gap:9px;margin-top:12px;cursor:pointer;font-size:13px;color:var(--nx-ink2);user-select:none}
:where(:root[data-page="transfers"]) .tr-short-clear input{width:16px;height:16px;cursor:pointer;accent-color:var(--brand,#018B46);margin:0}
:where(:root[data-page="transfers"]) .tr-short-clear:hover{color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-onhold .tr-fac{color:#c0392b;font-weight:800}
:where(:root[data-page="transfers"]) [data-theme=dark] .tr-onhold .tr-fac, [data-theme=dark]:where([data-page="transfers"]) .tr-onhold .tr-fac{color:#ff6b5e}
/* Right-click menu on the Status pill (Cash/admin only: hold + short actions) */
:where(:root[data-page="transfers"]) .tr-ctx-menu{position:fixed;min-width:210px;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:14px;box-shadow:0 18px 44px rgba(20,22,28,.20);padding:7px;display:none;z-index:600}
:where(:root[data-page="transfers"]) .tr-ctx-menu.open{display:block}
/* Held open behind the file viewer: hidden while the viewer is up, back again
   the moment it is closed, so several files can be opened in a row. */
:where(:root[data-page="transfers"]) .tr-ctx-menu.open.tucked{display:none}
:where(:root[data-page="transfers"]) .tr-ctx-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:6px 10px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--nx-ink2);text-align:left}
:where(:root[data-page="transfers"]) .tr-ctx-item:hover{background:var(--nx-line2);color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-ctx-item.danger{color:#D4453B}
:where(:root[data-page="transfers"]) .tr-ctx-item.danger:hover{background:var(--nx-down-bg)}
:where(:root[data-page="transfers"]) .tr-ctx-sep{height:1px;background:var(--nx-line);margin:5px 4px}
:where(:root[data-page="transfers"]) .tr-ctx-caret{margin-left:auto;font-size:15px;line-height:1;color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .tr-ctx-item.sub-open{background:var(--nx-line2);color:var(--nx-ink)}
/* ---- "View files" sub-menu (right-click > View files) ------------------- */
:where(:root[data-page="transfers"]) .tr-fm-menu{width:max-content;min-width:280px;max-width:min(640px,88vw);max-height:60vh;overflow-y:auto;overflow-x:hidden;z-index:601}
:where(:root[data-page="transfers"]) .tr-fm-msg{padding:9px 10px;font-size:12.5px;color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .tr-fm-item{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-width:0;box-sizing:border-box;padding:7px 10px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:inherit;text-align:left}
:where(:root[data-page="transfers"]) .tr-fm-item.off{cursor:default;opacity:.55}
:where(:root[data-page="transfers"]) .tr-fm-item:not(.off):hover{background:var(--nx-line2)}
:where(:root[data-page="transfers"]) .tr-fm-name{max-width:100%;font-size:13px;font-weight:600;color:var(--nx-ink);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="transfers"]) .tr-fm-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:11px;color:var(--nx-ink3)}
:where(:root[data-page="transfers"]) .tr-fm-tag{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.02em;background:var(--nx-line2);color:var(--nx-ink2)}
:where(:root[data-page="transfers"]) .tr-fm-tag.final{background:var(--nx-up-bg,var(--nx-line2));color:var(--nx-up,var(--nx-ink2))}
:where(:root[data-page="transfers"]) .tr-fm-tag.none{background:transparent;border:1px dashed var(--nx-line2);color:var(--nx-ink3);font-weight:600}
/* Each file sits on a row: the name on the left, an eye and a download button
   on the right. */
:where(:root[data-page="transfers"]) .tr-fm-row{display:flex;align-items:center;gap:2px;width:100%;min-width:0;box-sizing:border-box}
:where(:root[data-page="transfers"]) .tr-fm-row .tr-fm-item{flex:1 1 auto;min-width:0;width:auto}
:where(:root[data-page="transfers"]) .tr-fm-acts{display:flex;align-items:center;gap:2px;flex:0 0 auto;padding-right:4px}
:where(:root[data-page="transfers"]) .tr-fm-ico{width:28px;height:28px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:8px;color:var(--nx-ink3);cursor:pointer;padding:0;text-decoration:none}
:where(:root[data-page="transfers"]) .tr-fm-ico svg{width:15px;height:15px;display:block}
:where(:root[data-page="transfers"]) .tr-fm-ico:hover{background:var(--nx-line2);color:var(--nx-ink)}
/* Remove this file. Stays quiet until hovered, then turns red. */
:where(:root[data-page="transfers"]) .tr-fm-ico.del:hover{background:var(--nx-down-bg);color:var(--nx-down)}
/* ---- Uploaded file viewer ---------------------------------------------- */
:where(:root[data-page="transfers"]) .tr-fv-back{display:none;position:fixed;inset:0;background:rgba(10,12,18,.45);z-index:560;align-items:center;justify-content:center;padding:20px}
:where(:root[data-page="transfers"]) .tr-fv-back.open{display:flex}
:where(:root[data-page="transfers"]) .tr-fv-box{background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.3);width:min(1040px,97vw);height:min(92vh,1000px);display:flex;flex-direction:column;overflow:hidden}
:where(:root[data-page="transfers"]) .tr-fv-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="transfers"]) .tr-fv-title{font-size:14.5px;font-weight:700;color:var(--nx-ink);letter-spacing:-.01em;word-break:break-all}
:where(:root[data-page="transfers"]) .tr-fv-sub{font-size:11.5px;color:var(--nx-ink3);margin-top:2px}
:where(:root[data-page="transfers"]) .tr-fv-acts{display:flex;align-items:center;gap:8px;flex:0 0 auto}
:where(:root[data-page="transfers"]) .tr-fv-kind{display:flex;align-items:center;gap:0;margin-right:4px}
:where(:root[data-page="transfers"]) .tr-fv-link{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--nx-line2);border-radius:10px;background:none;font-size:12.5px;font-weight:600;color:var(--nx-ink2);text-decoration:none}
:where(:root[data-page="transfers"]) .tr-fv-link:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-fv-x{flex:0 0 auto;width:30px;height:30px;border:none;background:none;color:var(--nx-ink3);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
:where(:root[data-page="transfers"]) .tr-fv-x svg{width:15px;height:15px}
:where(:root[data-page="transfers"]) .tr-fv-x:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-fv-body{flex:1;min-height:0;background:var(--nx-line2)}
:where(:root[data-page="transfers"]) .tr-fv-body iframe{width:100%;height:100%;border:none;display:block}
/* ---- Facility history panel (right-click > View history) ---------------- */
:where(:root[data-page="transfers"]) .tr-fh-back{display:none;position:fixed;inset:0;background:rgba(10,12,18,.45);z-index:540;align-items:center;justify-content:center;padding:20px}
:where(:root[data-page="transfers"]) .tr-fh-back.open{display:flex}
:where(:root[data-page="transfers"]) .tr-fh-box{background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.3);width:min(1180px,97vw);max-height:94vh;display:flex;flex-direction:column;overflow:hidden}
:where(:root[data-page="transfers"]) .tr-fh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 22px 14px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="transfers"]) .tr-fh-title{font-size:15.5px;font-weight:700;color:var(--nx-ink);letter-spacing:-.01em}
:where(:root[data-page="transfers"]) .tr-fh-sub{font-size:12px;color:var(--nx-ink3);margin-top:3px}
:where(:root[data-page="transfers"]) .tr-fh-x{flex:0 0 auto;width:30px;height:30px;border:none;background:none;color:var(--nx-ink3);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
:where(:root[data-page="transfers"]) .tr-fh-x svg{width:15px;height:15px}
:where(:root[data-page="transfers"]) .tr-fh-x:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="transfers"]) .tr-fh-body{overflow:auto;padding:0 0 4px}
:where(:root[data-page="transfers"]) .tr-fh-msg{padding:34px 22px;text-align:center;color:var(--nx-ink3);font-size:13px}
:where(:root[data-page="transfers"]) .tr-fh-table{width:100%;border-collapse:collapse;font-size:12.5px}
:where(:root[data-page="transfers"]) .tr-fh-table th,:where(:root[data-page="transfers"]) .tr-fh-table td{padding:7px 14px;border-bottom:1px solid var(--nx-line);white-space:nowrap}
:where(:root[data-page="transfers"]) .tr-fh-table tbody td{height:46px;box-sizing:border-box;vertical-align:middle}
:where(:root[data-page="transfers"]) .tr-fh-table thead th{position:sticky;top:0;background:var(--nx-rail);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--nx-ink3);text-align:right;z-index:2}
:where(:root[data-page="transfers"]) .tr-fh-table thead th:first-child{text-align:left;left:0;z-index:3}
:where(:root[data-page="transfers"]) .tr-fh-table th.tr-fh-now{color:var(--brand);font-weight:800}
:where(:root[data-page="transfers"]) .tr-fh-table th.tr-fh-now .tr-fh-nowtag{display:block;margin-top:2px;font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--brand);opacity:.75}
:where(:root[data-page="transfers"]) .tr-fh-table td{text-align:right;color:var(--nx-ink);font-variant-numeric:tabular-nums}
:where(:root[data-page="transfers"]) .tr-fh-lbl{text-align:left !important;font-weight:600;color:var(--nx-ink2);position:sticky;left:0;background:var(--nx-surface);z-index:1}
:where(:root[data-page="transfers"]) .tr-fh-table tbody tr:hover td{background:var(--tr-row-hover)}
:where(:root[data-page="transfers"]) .tr-fh-table tbody tr:hover .tr-fh-lbl{background:var(--tr-row-hover)}
:where(:root[data-page="transfers"]) .tr-fh-table tr.tr-fh-totrow td{font-weight:700;border-top:1px solid var(--nx-line2);background:var(--nx-rail)}
:where(:root[data-page="transfers"]) .tr-fh-table tr.tr-fh-totrow:hover td{background:var(--nx-rail)}
/* The Total row's thick bottom border is what splits the payroll figures
   (Net .. Total) from the cash figures (Transferred, Bank Balance, Difference). */
:where(:root[data-page="transfers"]) .tr-fh-table tr.tr-fh-totrow td{border-bottom:3px solid var(--nx-line2)}
:where(:root[data-page="transfers"]) .tr-fh-dash{color:var(--nx-ink3)}
/* Week-over-week change, shown small under each number */
:where(:root[data-page="transfers"]) .tr-fh-wow{display:inline-block;font-size:13px;font-weight:800;line-height:1;margin-right:6px;vertical-align:baseline}
:where(:root[data-page="transfers"]) .tr-fh-up{color:var(--nx-up)}
:where(:root[data-page="transfers"]) .tr-fh-down{color:#D4453B}
:where(:root[data-page="transfers"]) .tr-fh-hol{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.05em;color:var(--nx-warn);margin-left:5px}
@media(max-width:620px){:where(:root[data-page="transfers"]) .tr-fh-table th,:where(:root[data-page="transfers"]) .tr-fh-table td{padding:6px 10px;font-size:11.5px}:where(:root[data-page="transfers"]) .tr-fh-table tbody td{height:42px}}

:where(:root[data-page="transfers"]) .tr-switch{position:relative;display:inline-block;width:38px;height:22px}
:where(:root[data-page="transfers"]) .tr-switch input{display:none}
:where(:root[data-page="transfers"]) .tr-switch span{position:absolute;inset:0;background:var(--nx-line2);border-radius:22px;transition:.15s;cursor:pointer}
:where(:root[data-page="transfers"]) .tr-switch span::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
:where(:root[data-page="transfers"]) .tr-switch input:checked+span{background:var(--brand)}
:where(:root[data-page="transfers"]) .tr-switch input:checked+span::before{transform:translateX(16px)}

:where(:root[data-page="transfers"]) .tr-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--nx-ink);color:#fff;padding:14px 18px;border-radius:11px;font-size:12.5px;font-weight:600;opacity:0;pointer-events:none;transition:.2s;z-index:400;max-width:min(680px,92vw)}
:where(:root[data-page="transfers"]) .tr-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
:where(:root[data-page="transfers"]) .tr-toast.err{background:var(--nx-down);padding-right:56px}
:where(:root[data-page="transfers"]) .tr-toast-msg{overflow-wrap:anywhere}
:where(:root[data-page="transfers"]) .tr-toast-acts{display:none;position:absolute;top:8px;right:8px;align-items:center;gap:4px}
:where(:root[data-page="transfers"]) .tr-toast.err .tr-toast-acts{display:flex}
:where(:root[data-page="transfers"]) .tr-toast-btn{border:none;background:rgba(255,255,255,.16);color:#fff;border-radius:7px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-family:inherit;cursor:pointer;padding:0}
:where(:root[data-page="transfers"]) .tr-toast-btn:hover{background:rgba(255,255,255,.3)}
:where(:root[data-page="transfers"]) .tr-toast-btn svg{width:13px;height:13px}
:where(:root[data-page="transfers"]) #trToastClose{font-size:17px;line-height:1}

/* Embed: hide own chrome (shell provides it) */
html.cr-embed:where([data-page="transfers"]){height:100%;min-height:0;overflow:hidden;background:var(--nx-surface)}
:where(:root[data-page="transfers"]) body.embed .nx-app{grid-template-columns:1fr;grid-template-rows:100vh;margin:0;max-width:none;border-radius:0;border:none;min-height:0;box-shadow:none;height:100vh}
:where(:root[data-page="transfers"]) body.embed .nx-main{height:100vh}
:where(:root[data-page="transfers"]) body.embed .nx-rail{display:none}
:where(:root[data-page="transfers"]) body.embed .nx-topbar{display:none}

/* The find-in-page flash. The page used to add this from its own script. */
@keyframes crFindFlash{0%,100%{background:transparent}18%,62%{background:rgba(1,139,70,.18)}}
:where(:root[data-page="transfers"]) tr.cr-find-flash>td{animation:crFindFlash 2.2s ease;box-shadow:inset 0 0 0 9999px transparent}
:where(:root[data-page="transfers"]) tr.cr-find-flash{outline:2px solid rgba(1,139,70,.55);outline-offset:-2px;border-radius:6px}


/* ----------------------------------------------------------------------------
 * 15.36  Accounting -- Financials report
 * accounting/financials-report.php, data-page="financials-report"
 * -------------------------------------------------------------------------- */
/* ── Nexus tokens - the same set financials-report.php uses ── */
:root:where([data-page="financials-report"]){
  --nx-line:#E7E9EF; --nx-line2:#DADCE4; --nx-rail:#F5F6F9; --nx-hover:#EEF0F4;
  /* Section headings sit a shade lighter than the total rows, so the two
     kinds of grey row do not read as the same thing. */
  --nx-sect:var(--nx-surface);
  --brand:var(--accent-blue, #185FA5); --brand-lt:var(--accent-blue-lt, #E3EBF5);
  --seg-fill:var(--accent-blue-lt, #E3EBF5); --seg-ink:var(--accent-blue, #185FA5);
  /* The fill behind a picked-out row. Its own token, not --brand-lt: that one
     also sits behind chips, focus rings and the segment bar, where it is a
     small patch of colour and can afford to be stronger. Here it runs the
     whole width of the table under black text, and at --brand-lt's weight a
     handful of them fought the figures for attention. */
  --hi-bg:#EFF4FB;
  /* The fill behind a heading that is OPEN - the row that is the total of
     everything under it. Quieter than --hi-bg, which is spoken for. */
  --tot-bg:var(--nx-rail);
  --up:var(--nx-up); --up-bg:var(--nx-up-bg); --down:#E0544A; --down-bg:var(--nx-down-bg);
  --warn:var(--amber-text); --warn-bg:#FFF3D6; --warn-line:#F3E2AE;
  /* An opened line's rows. Deliberately a tint, not a grey - grey is what a
     hover means, and two near-identical greys made a hover look like it lit
     up the whole block. */
  --open-bg:#F3F7FD; --open-hover:var(--brand-lt);
  /* The pill behind a number the pointer is on. Has to be a clear step past
     the row's own hover colour, or it disappears into it. */
  --pill-bg:#C6DAF3;
  /* One colour per year, used wherever both years' notes can sit together:
     the hover tooltip, the notes pop-up, the note box on a drill-down. The
     -tip pair is for the tooltip, which is painted on a dark card and needs
     lighter ink than the same colour would use on a var(--nx-surface) one. */
  --yr-now:var(--brand); --yr-prior:#A5590A;
  --tip-yr-now:#8FC4FF; --tip-yr-prior:#F2C879;
  /* Cards that count days rather than dollars. */
  --acc-p:#6B4FD8; --acc-p-bg:#EFEBFC;
  /* Average Census, so it stands apart from the day-count cards beside it. */
  --acc-t:#0E8A8A; --acc-t-bg:#E1F4F3;
  /* Available Days, set apart from Patient Days the same way. */
  --acc-m:#C0357A; --acc-m-bg:#FBE8F1;
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="financials-report"]){
  --nx-line:#242833; --nx-line2:#2E323E; --nx-rail:#12141C; --nx-hover:#1F232D;
  --nx-sect:var(--nx-elev);
  --brand:#5B95E0; --brand-lt:#1A2740;
  --seg-fill:#1F2E49; --seg-ink:#8FB6EE;
  --hi-bg:#161E2C;
  --tot-bg:#181C24;
  --up:#34D27B; --up-bg:#16301F; --down:#F4756B; --down-bg:#3A1E1C;
  --warn:#E0C063; --warn-bg:#2A2510; --warn-line:#4A411C;
  --yr-now:var(--brand); --yr-prior:#E0A55C;
  --tip-yr-now:#1C63B0; --tip-yr-prior:#8A5A00;
  --acc-p:#A48BF0; --acc-p-bg:#241E3A;
  --acc-t:#3CC7C0; --acc-t-bg:#12302F;
  --acc-m:#F07AB4; --acc-m-bg:#3A1829;
  --open-bg:#141B27; --open-hover:#1E2B44;
  --pill-bg:#33507D;
  color-scheme:dark;
}
:where(:root[data-page="financials-report"]) *, *:where([data-page="financials-report"]){box-sizing:border-box}
html:where([data-page="financials-report"]),:where(:root[data-page="financials-report"]) body{height:auto;overflow:auto;margin:0;background:var(--nx-bg);color:var(--nx-ink);font-family:var(--nx-font)}
/* Thin, stable-gutter scrollbar - the same 10px the other financial pages
   use, so nothing shifts sideways when switching between them. */
html:where([data-page="financials-report"]){scrollbar-width:thin;scrollbar-color:#CFD3D8 transparent;scrollbar-gutter:stable}
:root[data-theme="dark"]:where([data-page="financials-report"]) html,html[data-theme="dark"]:where([data-page="financials-report"]){scrollbar-color:#3A4050 transparent}
:root[data-theme="dark"]:where([data-page="financials-report"]) ::-webkit-scrollbar-thumb{background:#3A4050;background-clip:padding-box}
:root[data-theme="dark"]:where([data-page="financials-report"]) ::-webkit-scrollbar-thumb:hover{background:#4C5468;background-clip:padding-box}
:where(:root[data-page="financials-report"]) ::-webkit-scrollbar, :where([data-page="financials-report"])::-webkit-scrollbar{width:10px;height:10px}
:where(:root[data-page="financials-report"]) ::-webkit-scrollbar-track, :where([data-page="financials-report"])::-webkit-scrollbar-track{background:transparent}
:where(:root[data-page="financials-report"]) ::-webkit-scrollbar-thumb, :where([data-page="financials-report"])::-webkit-scrollbar-thumb{background:#CFD3D8;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
:where(:root[data-page="financials-report"]) ::-webkit-scrollbar-thumb:hover, :where([data-page="financials-report"])::-webkit-scrollbar-thumb:hover{background:#A8ADB3;background-clip:padding-box;border:2px solid transparent}
:where(:root[data-page="financials-report"]) button{font-family:inherit}
:where(:root[data-page="financials-report"]) .shell{min-height:100vh;overflow:visible}
:where(:root[data-page="financials-report"]) .wrap{max-width:none;margin:0;padding:30px 16px 60px;color:var(--nx-ink)}

/* page head */
:where(:root[data-page="financials-report"]) .pagehead{display:flex;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
:where(:root[data-page="financials-report"]) .pagehead-text{min-width:0}
:where(:root[data-page="financials-report"]) h1{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0}
:where(:root[data-page="financials-report"]) .sub{font-size:13px;color:var(--nx-ink3);margin:4px 0 0;line-height:1.45}
:where(:root[data-page="financials-report"]) .pagehead-actions{margin-left:auto;display:flex;align-items:center;gap:9px}
:where(:root[data-page="financials-report"]) .nx-theme-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--nx-line2);background:var(--nx-elev);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2)}
:where(:root[data-page="financials-report"]) .nx-theme-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="financials-report"]) .nx-theme-btn .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="financials-report"]) .nx-theme-btn .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="financials-report"]) .nx-theme-btn .nx-ic-moon{display:block}

/* toolbar card */
:where(:root[data-page="financials-report"]) .bar{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:18px 20px;margin-bottom:22px}
:where(:root[data-page="financials-report"]) .fld{display:flex;flex-direction:column;gap:8px}
:where(:root[data-page="financials-report"]) .fld label{font-size:12px;font-weight:600;color:var(--nx-ink2)}
:where(:root[data-page="financials-report"]) .fld select,:where(:root[data-page="financials-report"]) .fld input{padding:11px 13px;border:1px solid var(--nx-line2);border-radius:var(--nx-radius-sm);font-size:13px;min-width:240px;background:var(--nx-elev);color:var(--nx-ink);font-family:inherit;font-weight:500}
:where(:root[data-page="financials-report"]) .fld select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%239499AB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:15px}
:where(:root[data-page="financials-report"]) .fld select:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .fld select:focus,:where(:root[data-page="financials-report"]) .fld input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="financials-report"]) .fld.narrow select{min-width:170px}
:where(:root[data-page="financials-report"]) .btn{padding:11px 20px;border:1px solid var(--brand);border-radius:var(--nx-radius-sm);background:var(--brand);color:#fff;font-weight:600;font-size:13px;cursor:pointer}
:where(:root[data-page="financials-report"]) .btn:disabled{opacity:.5;cursor:default}
:where(:root[data-page="financials-report"]) .btn-ghost{background:var(--nx-elev);color:var(--brand);border:1px solid var(--nx-line2)}
:where(:root[data-page="financials-report"]) .btn-ghost:hover:not(:disabled){background:var(--brand-lt);border-color:var(--brand)}
/* Empty rows are hidden on arrival. The button lights up while they are
   showing, so which way round it is set can be seen rather than guessed. */
:where(:root[data-page="financials-report"]) .btn-ghost.on{background:var(--seg-fill);color:var(--seg-ink);border-color:var(--brand)}
:where(:root[data-page="financials-report"]) .btn-sm{padding:8px 14px;font-size:12.5px;border-radius:12px}
:where(:root[data-page="financials-report"]) .spin{display:none;color:var(--nx-ink3);font-size:13px;padding-bottom:11px}
:where(:root[data-page="financials-report"]) .spin.on{display:inline}
:where(:root[data-page="financials-report"]) .msg{padding:11px 15px;border-radius:var(--nx-radius-sm);font-size:13px;margin-bottom:18px;display:none}
:where(:root[data-page="financials-report"]) .msg.err{background:var(--down-bg);color:var(--down);display:block}
:where(:root[data-page="financials-report"]) .msg.ok{background:var(--up-bg);color:var(--up);display:block}
:where(:root[data-page="financials-report"]) .note{padding:10px 14px;border-radius:var(--nx-radius-sm);font-size:12px;margin-bottom:16px;background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn);display:none}
:where(:root[data-page="financials-report"]) .note.show{display:block}
:where(:root[data-page="financials-report"]) .note-btn{margin-left:10px;border:1px solid currentColor;background:transparent;color:inherit;border-radius:8px;padding:4px 11px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit}
:where(:root[data-page="financials-report"]) .note-btn:hover{background:rgba(0,0,0,.06)}

:root[data-theme="dark"]:where([data-page="financials-report"]) .note-btn:hover{background:rgba(255,255,255,.08)}

/* page selector: sliding button row, the switches to its right */
:where(:root[data-page="financials-report"]) .ctlrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
/* A button in the row of switches is the same height as the switches. Left to
   their own padding they came out 32px against the switches' 40px, so Wings,
   vs. Group and Refresh all sat short of the pill beside them. 40px is what a
   .tgl measures - the same trick the dashboard shell uses, where its buttons
   and its switches are both pinned to 36px. */
:where(:root[data-page="financials-report"]) .ctlrow .btn-sm{height:40px}
:where(:root[data-page="financials-report"]) .segbar{position:relative;display:inline-flex;gap:2px;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:12px;padding:4px;max-width:100%;overflow-x:auto;scrollbar-width:none}
:where(:root[data-page="financials-report"]) .segbar::-webkit-scrollbar{display:none}
:where(:root[data-page="financials-report"]) .seg-ind{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--seg-fill);border-radius:9px;transition:left .18s ease,width .18s ease;z-index:0}
:where(:root[data-page="financials-report"]) .seg-tab{position:relative;z-index:1;border:none;background:transparent;color:var(--nx-ink2);border-radius:9px;padding:8px 15px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:color .18s ease}
:where(:root[data-page="financials-report"]) .seg-tab:hover{color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .seg-tab.active{color:var(--seg-ink);font-weight:700}
/* A page that is there but not yours: greyed, no hover, no pointer. It stays
   in the strip so nobody has to wonder where it went, and says why on hover. */
:where(:root[data-page="financials-report"]) .seg-tab.locked{color:var(--nx-ink3);opacity:.55;cursor:not-allowed}
:where(:root[data-page="financials-report"]) .seg-tab.locked:hover{color:var(--nx-ink3)}
/* A switch whose fill slides to the half you picked, the same way the page
   picker above it does, instead of blinking on. */
:where(:root[data-page="financials-report"]) .tgl{position:relative;display:inline-flex;border:1px solid var(--nx-line2);border-radius:12px;background:var(--nx-elev);padding:3px;box-sizing:border-box}
:where(:root[data-page="financials-report"]) .tgl-ind{position:absolute;top:3px;left:0;width:0;height:calc(100% - 6px);background:var(--seg-fill);border-radius:9px;transition:left .18s ease,width .18s ease;z-index:0;pointer-events:none}
:where(:root[data-page="financials-report"]) .tgl button{position:relative;z-index:1;border:none;background:transparent;color:var(--nx-ink2);font-family:inherit;font-size:12px;font-weight:600;padding:8px 15px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:color .18s ease}
:where(:root[data-page="financials-report"]) .tgl button.active{color:var(--seg-ink);font-weight:700}
:where(:root[data-page="financials-report"]) .tgl button:not(.active):hover{color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .tgl button:disabled{opacity:.45;cursor:default}

/* Download: an arrow on its own, with a menu under it. The word beside the
   arrow is only used while a workbook is being built. */
/* nowrap because a two-word label - "vs. Group" - is a label that can break
   across two lines and take the button's height with it. */
:where(:root[data-page="financials-report"]) .btn-ic{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
:where(:root[data-page="financials-report"]) .btn-ic svg{width:14px;height:14px;flex:none}
:where(:root[data-page="financials-report"]) .btn-ic span:empty{display:none}
/* A tick box that happens to be a button: the box is the icon, so it takes the
   brand colour when it is ticked and the ordinary outline colour when it is
   not, and the label beside it firms up the way a chosen switch does. */
:where(:root[data-page="financials-report"]) .btn-chk svg{width:15px;height:15px;color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .btn-chk.on svg{color:var(--brand)}
:where(:root[data-page="financials-report"]) .btn-chk.on{color:var(--nx-ink);font-weight:700}
:where(:root[data-page="financials-report"]) .dl-wrap{position:relative;display:inline-flex;align-items:center}
:where(:root[data-page="financials-report"]) .dl-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:168px;z-index:140;
  background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:14px;
  box-shadow:var(--nx-shadow-lg);padding:6px;display:none}
:where(:root[data-page="financials-report"]) .dl-menu.open{display:block;animation:dlPop .16s ease}
@keyframes dlPop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
:where(:root[data-page="financials-report"]) .dl-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
  padding:9px 10px;border:none;background:none;border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--nx-ink2);text-align:left}
:where(:root[data-page="financials-report"]) .dl-item svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .dl-item:hover{background:var(--nx-hover)}
/* Our own hover note, instead of the browser's yellow tooltip. */
:where(:root[data-page="financials-report"]) .dl-tip{position:relative}
:where(:root[data-page="financials-report"]) .dl-tip::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;
  background:var(--nx-toast-bg,#1f2430);color:var(--nx-toast-ink,#fff);font-size:11.5px;
  font-weight:600;line-height:1.3;padding:6px 9px;border-radius:9px;white-space:nowrap;
  box-shadow:var(--nx-shadow-lg);opacity:0;pointer-events:none;transform:translateY(-3px);
  transition:opacity .14s ease,transform .14s ease;z-index:200}
:where(:root[data-page="financials-report"]) .dl-tip:hover::after{opacity:1;transform:none}
:where(:root[data-page="financials-report"]) .dl-wrap.open .dl-tip::after{opacity:0}
/* Refresh: the arrow turns while the rebuild is out. */
:where(:root[data-page="financials-report"]) #refreshBtn.spin-on svg{animation:refSpin .8s linear infinite}
:where(:root[data-page="financials-report"]) #refreshBtn[disabled]{opacity:.6;cursor:default}
@keyframes refSpin{to{transform:rotate(360deg)}}

/* ---- The Admin page ------------------------------------------------------ */
:where(:root[data-page="financials-report"]) .adm-card{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:6px 20px}
:where(:root[data-page="financials-report"]) .adm-row{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--nx-line)}
:where(:root[data-page="financials-report"]) .adm-row:first-child{border-top:none}
:where(:root[data-page="financials-report"]) .adm-ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="financials-report"]) .adm-ic svg{width:17px;height:17px}
:where(:root[data-page="financials-report"]) .adm-txt{flex:1;min-width:0}
:where(:root[data-page="financials-report"]) .adm-t{display:block;font-size:13.5px;font-weight:650;color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .adm-d{display:block;font-size:12.5px;color:var(--nx-ink3);margin-top:3px;line-height:1.5}
:where(:root[data-page="financials-report"]) .adm-row .btn{flex:0 0 auto}
:where(:root[data-page="financials-report"]) .adm-note{margin:14px 0 4px;font-size:12.5px;color:var(--nx-ink3);line-height:1.5}
:where(:root[data-page="financials-report"]) .adm-note:empty{display:none;margin:0}
@media(max-width:640px){:where(:root[data-page="financials-report"]) .adm-row{flex-wrap:wrap}:where(:root[data-page="financials-report"]) .adm-txt{flex:1 1 100%;order:3}}

/* summary tiles */
:where(:root[data-page="financials-report"]) .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
@media(max-width:900px){:where(:root[data-page="financials-report"]) .tiles{grid-template-columns:1fr 1fr}}
:where(:root[data-page="financials-report"]) .tile{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:11px 16px}
:where(:root[data-page="financials-report"]) .tile-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
:where(:root[data-page="financials-report"]) .tile-chip{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="financials-report"]) .tile-chip svg{width:16px;height:16px}
/* Each card's chip is coloured by what the card is, not by the brand: money
   in, money out, the result, and the counts. Four identical chips said
   nothing. */
:where(:root[data-page="financials-report"]) .tile-chip.c-in{background:var(--up-bg);color:var(--up)}
:where(:root[data-page="financials-report"]) .tile-chip.c-out{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="financials-report"]) .tile-chip.c-net{background:var(--warn-bg);color:var(--warn)}
:where(:root[data-page="financials-report"]) .tile-chip.c-day{background:var(--acc-p-bg);color:var(--acc-p)}
:where(:root[data-page="financials-report"]) .tile-chip.c-avg{background:var(--acc-t-bg);color:var(--acc-t)}
:where(:root[data-page="financials-report"]) .tile-chip.c-avail{background:var(--acc-m-bg);color:var(--acc-m)}
:where(:root[data-page="financials-report"]) .tile-label{font-size:12.5px;font-weight:600;color:var(--nx-ink2)}
/* Which month the big figure on the card is for. The cards read the LATEST
   month in whatever is filtered, not the whole range, and without this said
   on the card there was nothing to tell you that. */
:where(:root[data-page="financials-report"]) .tile-when{margin-left:auto;flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.04em;
           text-transform:uppercase;color:var(--brand);background:var(--brand-lt);
           border-radius:20px;padding:3px 9px;white-space:nowrap}
:where(:root[data-page="financials-report"]) .tile-val{font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1}
:where(:root[data-page="financials-report"]) .tile-sub{font-size:11.5px;color:var(--nx-ink3);margin-top:6px}
/* The trend line under a card's figure. Newest month at the LEFT, the same
   direction the table's columns run. The box is stretched to the card's
   width, so every stroke is drawn non-scaling or it would come out thicker
   across than down. */
:where(:root[data-page="financials-report"]) .tile-spark{display:block;width:100%;height:24px;margin-top:7px;overflow:visible}
:where(:root[data-page="financials-report"]) .tile-spark .py{fill:none;stroke:var(--nx-line2);stroke-width:1.6;stroke-linejoin:round}
:where(:root[data-page="financials-report"]) .tile-spark .now{fill:none;stroke:var(--spark,var(--brand));stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
:where(:root[data-page="financials-report"]) .tile-spark .dot{fill:none;stroke:var(--spark,var(--brand));stroke-width:6;stroke-linecap:round}
:where(:root[data-page="financials-report"]) .tile-spark .zero{stroke:var(--nx-line);stroke-width:1}
:where(:root[data-page="financials-report"]) .tile-spark .hit{fill:transparent}
/* Under the line: the year to date, last year and the difference, as three
   small columns rather than one long sentence. */
:where(:root[data-page="financials-report"]) .tile-foot{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;
           margin-top:7px;padding-top:7px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="financials-report"]) .tf-c{min-width:0}
:where(:root[data-page="financials-report"]) .tf-k{display:block;font-size:9.5px;font-weight:700;letter-spacing:.06em;
      text-transform:uppercase;color:var(--nx-ink3);white-space:nowrap}
:where(:root[data-page="financials-report"]) .tf-v{display:block;margin-top:3px;font-size:12.5px;font-weight:650;color:var(--nx-ink2);
      font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="financials-report"]) .tf-v.good{color:var(--up)}
:where(:root[data-page="financials-report"]) .tf-v.bad{color:var(--down)}

/* panels + tables
   Each table is its own scroll box. It never pushes the page sideways: it
   fits the screen and scrolls inside itself, both ways. Because the box is
   what scrolls, the column headings can stay pinned to its top and the
   line-name column to its left. */
:where(:root[data-page="financials-report"]) .fin-panel{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);margin-bottom:22px;overflow:auto;width:auto;max-width:100%;max-height:calc(100vh - 210px);overscroll-behavior-x:contain}
/* Grab the table and pull it about. The hand only shows when there is
   something to pull to. */
:where(:root[data-page="financials-report"]) .fin-panel.can-pan{cursor:grab}
:where(:root[data-page="financials-report"]) .fin-panel{scrollbar-width:thin;scrollbar-color:#CFD3D8 transparent}
:root[data-theme="dark"]:where([data-page="financials-report"]) .fin-panel,:root[data-theme="dark"]:where([data-page="financials-report"]) .map-list{scrollbar-color:#3A4050 transparent}
:root[data-theme="dark"]:where([data-page="financials-report"]) .fin-panel::-webkit-scrollbar-thumb,
:root[data-theme="dark"]:where([data-page="financials-report"]) .map-list::-webkit-scrollbar-thumb{background:#3A4050;background-clip:padding-box}
:where(:root[data-page="financials-report"]) .fin-panel::-webkit-scrollbar{width:12px;height:12px}
:where(:root[data-page="financials-report"]) .fin-panel::-webkit-scrollbar-track{background:transparent}
:where(:root[data-page="financials-report"]) .fin-panel::-webkit-scrollbar-thumb{background:#CFD3D8;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
:where(:root[data-page="financials-report"]) .fin-panel::-webkit-scrollbar-thumb:hover{background:#A8ADB3;background-clip:padding-box}
:where(:root[data-page="financials-report"]) .fin-panel::-webkit-scrollbar-corner{background:transparent}
:where(:root[data-page="financials-report"]) .fin-panel.panning,:where(:root[data-page="financials-report"]) .fin-panel.panning *{cursor:grabbing}
:where(:root[data-page="financials-report"]) .fin-panel.panning{user-select:none;-webkit-user-select:none}
:where(:root[data-page="financials-report"]) .fin-panel-head{display:flex;align-items:center;gap:24px;padding:12px 16px;border-bottom:1px solid var(--nx-line);position:sticky;left:0}
:where(:root[data-page="financials-report"]) .fin-panel-head h3{margin:0;font-size:11px;color:var(--nx-ink2);font-weight:800;letter-spacing:.07em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
:where(:root[data-page="financials-report"]) .fin-panel-head .head-sub{font-size:11.5px;color:var(--nx-ink3);margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500}
:where(:root[data-page="financials-report"]) .fin-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:11.5px;color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .fin-table th,:where(:root[data-page="financials-report"]) .fin-table td{text-align:right;padding:0 13px;height:30px;border-bottom:1px solid var(--nx-line);vertical-align:middle;white-space:nowrap}
:where(:root[data-page="financials-report"]) .fin-table th{font-weight:700;color:var(--nx-ink3);background:var(--nx-rail);font-size:10px;letter-spacing:.06em;text-transform:uppercase;position:sticky;top:0;z-index:60;border-bottom:1px solid var(--nx-line2)}
:where(:root[data-page="financials-report"]) .fin-table td.num,:where(:root[data-page="financials-report"]) .fin-table td.ppd{font-variant-numeric:tabular-nums}
:where(:root[data-page="financials-report"]) .fin-table td.label{text-align:left;font-weight:inherit}
:where(:root[data-page="financials-report"]) .fin-table th:first-child,:where(:root[data-page="financials-report"]) .fin-table td:first-child{text-align:left;width:250px;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="financials-report"]) .fin-table td.num,:where(:root[data-page="financials-report"]) .fin-table td.ppd,:where(:root[data-page="financials-report"]) .fin-table th.num,:where(:root[data-page="financials-report"]) .fin-table th.ppd{overflow:hidden;text-overflow:ellipsis}
/* A number column is wide enough for the biggest figure that can land in it,
   so nothing is cut off. This is the width of a MONTH column; the narrower
   kinds take it back further down. The rows inside an opened line use the
   same widths, so they stay under the right headings. When the columns add
   up to more than the screen the table scrolls sideways. */
:where(:root[data-page="financials-report"]) .fin-table th.num,:where(:root[data-page="financials-report"]) .fin-table td.num,:where(:root[data-page="financials-report"]) .fin-table th.ppd,:where(:root[data-page="financials-report"]) .fin-table td.ppd,
:where(:root[data-page="financials-report"]) .fin-detail-table th.num,:where(:root[data-page="financials-report"]) .fin-detail-table td.num{width:156px}
:where(:root[data-page="financials-report"]) .fin-table td.ppd,:where(:root[data-page="financials-report"]) .fin-table th.ppd{color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .fin-table tr:last-child td{border-bottom:none}
 /* Totals and group headings are drawn exactly like any other row - same
    white, same size, same weight. Depth below the top is carried by the
    indent and the caret instead of by fills and bolding, the way a
    spreadsheet carries it.
    The ONE exception is the bar at the top of each section - TOTAL REVENUES,
    SNF OPERATING EXPENSES - which is bold, name and figures together. It is
    the only row that names a whole block of the statement, and on a long page
    it is what you look for to find your place. */
:where(:root[data-page="financials-report"]) .fin-table tr.section-name td{font-weight:700;background:var(--nx-elev);color:var(--nx-ink)}
/* THE ROWS THAT CARRY THE ANSWER - Total Revenues, Net Earnings (Loss),
   EBIDARC. On a statement of a few hundred rows these are the handful anyone
   actually goes looking for, so they are picked out in the brand blue rather
   than left to be found by reading. Which rows get it is a tick per row on
   the Mapping tab (fin_report_tree.hilite), not a list of names in here -
   every facility words its statement slightly differently, and a hard-coded
   list would quietly stop matching.
   The FILL is what marks the row - the text stays black. Blue text on a blue
   fill would have left these rows with nothing to give the hover, and the
   page uses blue text for one thing only: this is what your pointer is on.
   The selectors carry .fin-table and repeat :first-child because the plain
   ones lose to ".fin-table td:first-child" and to the row rules above. */
:where(:root[data-page="financials-report"]) .fin-table tbody tr.hilite>td,
:where(:root[data-page="financials-report"]) .fin-table tbody tr.hilite>td:first-child{background:var(--hi-bg);color:var(--nx-ink);font-weight:700}
/* The fill stays while the row is held at the top of the table, and while it
   is hovered - otherwise it would flicker back to an ordinary row. */
:where(:root[data-page="financials-report"]) .fin-table tbody tr.hilite.frozen>td,
:where(:root[data-page="financials-report"]) .fin-table tbody tr.hilite:hover>td,
:where(:root[data-page="financials-report"]) .fin-table tbody tr.hilite:hover>td:first-child{background:var(--hi-bg)}
/* Workbench: the line-name column stays put while the months scroll. */
:where(:root[data-page="financials-report"]) .fin-table td:first-child{position:sticky;left:0;z-index:2;background:var(--nx-elev);border-right:1px solid var(--nx-line2)}
:where(:root[data-page="financials-report"]) .fin-table th:first-child{position:sticky;left:0;z-index:62;background:var(--nx-rail);border-right:1px solid var(--nx-line2)}
:where(:root[data-page="financials-report"]) .fin-table tr.section-name td:first-child{background:var(--nx-elev)}
/* An opened line's block is one wide cell spanning the table. It must not
   clip its own contents: a clipping cell becomes its own scroll box, which
   stops the account rows inside it from staying on the left. The selectors
   are deliberately long-winded - the plain ones lose to
   ".fin-table td:first-child" above. */
:where(:root[data-page="financials-report"]) .fin-table tbody tr.fin-detail-row>td{overflow:visible;width:auto;text-overflow:clip;
                                      position:static;padding:0;border-right:none}
/* Scrolling down: whatever you have opened stays on screen while you are
   inside it - the section bar, a group within it, and a line opened into its
   accounts - one under the other. Which rows are held, how far down each one
   sits and which sits over which are all worked out as you scroll (see
   freezeRows), because they depend on what is open and where you are. These
   rules only say that a held row can be pinned. */
:where(:root[data-page="financials-report"]) .fin-table tbody tr.frozen>td{position:sticky;background:var(--nx-elev)}

/* Intacct's tree: a parent row opens into the rows beneath it */
:where(:root[data-page="financials-report"]) .fin-table tr.fin-group-row{cursor:pointer}
:where(:root[data-page="financials-report"]) .fin-table tr.fin-group-row>td{background:var(--nx-elev);font-weight:inherit;color:var(--nx-ink)}

:where(:root[data-page="financials-report"]) .fin-table tr.fin-group-row .ncaret{display:inline-block;width:11px;color:var(--nx-ink3);transition:transform .15s}
:where(:root[data-page="financials-report"]) .fin-table tr.fin-group-row.closed .ncaret{transform:rotate(-90deg)}

/* A heading whose only line repeats its own name has nothing to open into,
   so it loses the arrow and the pointer. The blank keeps the name lined up
   with the headings above and below it. */
:where(:root[data-page="financials-report"]) .fin-table tr.noexp{cursor:default}
:where(:root[data-page="financials-report"]) .fin-table tr.noexp .caret-blank{display:inline-block;width:11px}

/* WHICH ROW IS THE TOTAL OF THE ONES UNDER IT
   A heading carries its own figures and there are no total rows, so the
   moment it is opened it sits at the top of its own block reading much like
   the lines beneath it. Three things now say it is their total: the row goes
   bold, it sits on a faint fill, and a hairline runs under it - between the
   total and the parts it is made of - in the text colour rather than the grid
   grey, so it reads as a statement rule and not as one more row separator.
   A SHUT heading gets none of this: nothing is under it to be told apart
   from, and marking every shut heading would put a line under half the page.
   The picked-out rows (Total Revenues, Net Earnings) keep their own fill -
   they are already the loudest thing on the page. */
:where(:root[data-page="financials-report"]) .fin-table tbody tr.fin-group-row:not(.closed):not(.hilite)>td,
:where(:root[data-page="financials-report"]) .fin-table tbody tr.fin-group-row:not(.closed):not(.hilite)>td:first-child{
     font-weight:700;background:var(--tot-bg);
     border-bottom:1px solid var(--nx-line2)}
:where(:root[data-page="financials-report"]) .fin-table tbody tr.fin-sec-row:not(.closed):not(.hilite)>td,
:where(:root[data-page="financials-report"]) .fin-table tbody tr.fin-sec-row:not(.closed):not(.hilite)>td:first-child{
     border-bottom:1px solid var(--nx-line2)}
/* A heading keeps its own figures on its own row whether it is open or shut -
   the number does not move to a total row at the bottom when you open it, and
   there are no total rows. Its text sits in .gnum rather than .amt-pill, so
   it needs its own hover. */
:where(:root[data-page="financials-report"]) .fin-table td.gcell.amt-cell .gnum:hover{color:var(--brand);font-weight:700}
/* The grey section bar at the top of the tree closes as well. */
:where(:root[data-page="financials-report"]) .fin-table tr.fin-sec-row{cursor:pointer}

:where(:root[data-page="financials-report"]) .fin-table tr.fin-sec-row .ncaret{display:inline-block;width:11px;color:var(--nx-ink3);transition:transform .15s}
:where(:root[data-page="financials-report"]) .fin-table tr.fin-sec-row.closed .ncaret{transform:rotate(-90deg)}
/* The rule that closes off a block of the statement. Its own row, no height
   of its own - only the line. One pixel, in the text colour rather than the
   grid grey, so it reads as a statement rule and not as one more of the row
   separators it has to be told apart from. The long selector is to beat the
   height, the padding and the sticky-left every other cell of the table gets. */
:where(:root[data-page="financials-report"]) .fin-table tbody tr.fin-rule>td{height:0;padding:0;position:static;
     background:var(--nx-elev);border-bottom:1px solid var(--nx-ink)}
:where(:root[data-page="financials-report"]) .tree-pad{display:inline-block;vertical-align:middle}
/* The account number and description inside an opened line freeze too. */
:where(:root[data-page="financials-report"]) .fin-detail-table th:first-child,:where(:root[data-page="financials-report"]) .fin-detail-table td:first-child{position:sticky;left:0;z-index:2;background:var(--nx-elev);border-right:1px solid var(--nx-line2)}
:where(:root[data-page="financials-report"]) .fin-detail-table th:first-child{background:var(--nx-rail);z-index:4}
/* Which layer sits over which, as the months slide past underneath:
   column headings 60 (their own first cell 62), then the held rows, numbered
   as you scroll from 50 downwards - the outermost highest, so an inner one
   lets go and slides away behind it - then the account names inside an opened
   line 3, an ordinary line's name 2, and the figures themselves 0. The whole
   ladder stays well under the pop-up's 500, which is what v46 got wrong. */
:where(:root[data-page="financials-report"]) .fin-detail-table td:first-child{z-index:3}
:where(:root[data-page="financials-report"]) .fin-table td.num,:where(:root[data-page="financials-report"]) .fin-table td.ppd,:where(:root[data-page="financials-report"]) .fin-detail-table td.num{z-index:0}
:where(:root[data-page="financials-report"]) .fin-table td.num,:where(:root[data-page="financials-report"]) .fin-detail-table td.num{position:relative}
/* Change marker: a small arrow only, shown when the month moved enough to
   matter. How big the move was lives in the tooltip, not on the row. */
:where(:root[data-page="financials-report"]) .dchip{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
       border-radius:5px;cursor:default;position:absolute;right:32px;top:50%;margin-top:-8px}
:where(:root[data-page="financials-report"]) .dchip svg{width:9px;height:9px}
/* Green when the move was good and red when it was not - which is not the
   same as up and down. Expenses falling is green with a down arrow. */
:where(:root[data-page="financials-report"]) .dchip.good{color:var(--up);background:var(--up-bg)}
:where(:root[data-page="financials-report"]) .dchip.bad{color:var(--down);background:var(--down-bg)}
/* TWO SLOTS ON THE RIGHT OF EVERY NUMBER COLUMN, IN THIS ORDER: the figure,
   then its up/down arrow, then its note icon hard against the edge. Both
   markers are pinned rather than run on after the figure, so they are in the
   same place on every row and a figure lands on exactly the same edge whether
   it carries an arrow, a note, both or neither - line rows, account rows and
   the month headings alike. The padding is what holds the two slots open. */
:where(:root[data-page="financials-report"]) .fin-table td.num,:where(:root[data-page="financials-report"]) .fin-table td.ppd,:where(:root[data-page="financials-report"]) .fin-table th.num,:where(:root[data-page="financials-report"]) .fin-table th.ppd,
:where(:root[data-page="financials-report"]) .fin-detail-table td.num,:where(:root[data-page="financials-report"]) .fin-detail-table th.num{padding-right:54px}
:where(:root[data-page="financials-report"]) .fin-table td.num>.note-ic,:where(:root[data-page="financials-report"]) .fin-table td.ppd>.note-ic,
:where(:root[data-page="financials-report"]) .fin-detail-table td.num>.note-ic{position:absolute;right:9px;top:50%;margin:-8px 0 0}
/* No arrow on this figure, so the icon takes the arrow's slot rather than
   sitting out at the edge with a gap where the arrow would have been. */
:where(:root[data-page="financials-report"]) .fin-table td.num>.note-ic.near,:where(:root[data-page="financials-report"]) .fin-table td.ppd>.note-ic.near,
:where(:root[data-page="financials-report"]) .fin-detail-table td.num>.note-ic.near{right:32px}

/* HOW THE PAGE SHOWS WHAT YOU ARE OVER
   Not with a fill, and not a whole row at a time. portal.css paints every
   table row grey on hover and this page used to paint its own blue-grey over
   the top of that; both are turned off by the first selector. What is left is
   the ONE thing under the pointer going bold and blue - the single figure, or
   the row's name - which is what tells you what a click will act on. A row
   name opens the row; a figure opens the pop-up behind it. */
:where(:root[data-page="financials-report"]) .fin-table tbody tr:hover>td,:where(:root[data-page="financials-report"]) .fin-table tbody tr:hover>td:first-child,
:where(:root[data-page="financials-report"]) .fin-detail-table tbody tr:hover>td,:where(:root[data-page="financials-report"]) .fin-detail-table tbody tr:hover>td:first-child{background:var(--nx-elev)}
:where(:root[data-page="financials-report"]) .fin-table tr.fin-sec-row>td.label:hover,
:where(:root[data-page="financials-report"]) .fin-table tr.fin-group-row>td.label:hover,
:where(:root[data-page="financials-report"]) .fin-detail-table tr.fin-detail-acct>td:first-child:hover{color:var(--brand);font-weight:700;cursor:pointer}
/* A STATEMENT LINE'S NAME IS NOT LIT UP. Colour on this page means "there is
   something behind this", and on a line's name there usually is not - it
   opens the accounts it is made of, which the arrow beside it already says.
   The one name that IS marked out is one carrying a note: it keeps its
   dashed underline (.note-name below) with the note icon beside it, so the
   mark means one thing again. The pointer still shows the row is clickable. */
:where(:root[data-page="financials-report"]) .fin-table tr.fin-line-row>td.label:hover{cursor:pointer}

/* clickable statement lines */
:where(:root[data-page="financials-report"]) .fin-line-row{cursor:pointer}

:where(:root[data-page="financials-report"]) .fin-line-row .caret{display:inline-block;width:14px;color:var(--nx-ink3);transition:transform .12s}
:where(:root[data-page="financials-report"]) .fin-line-row.open .caret{transform:rotate(90deg)}
/* A line with nothing on it. It keeps the same left padding as the rows with
   an arrow, so the names still line up. */
/* Two kinds of row that do not open: one with nothing behind it, and one with
   a single account behind it. Both keep the left padding of the rows that DO
   have an arrow, so every name still lines up. */
:where(:root[data-page="financials-report"]) .fin-empty-row td.label .tree-pad+span,
:where(:root[data-page="financials-report"]) .fin-solo-row td.label .tree-pad+span{padding-left:0}
:where(:root[data-page="financials-report"]) .fin-empty-row td.label,
:where(:root[data-page="financials-report"]) .fin-solo-row td.label{color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .fin-empty-row .caret-blank,
:where(:root[data-page="financials-report"]) .fin-solo-row .caret-blank{display:inline-block;width:14px}
/* Its account number is on the name, in the page's own tooltip. The dotted
   underline is the only thing saying so - without it nobody would think to
   hover, and it is quieter than a tag on every second row of the page. */
:where(:root[data-page="financials-report"]) .fin-solo-row td.label{cursor:help}
/* Average Census under Available Days on the census tab - worked out on the
   page, not a GL line. */
:where(:root[data-page="financials-report"]) .fin-avg-row td.label{color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .fin-avg-row .caret-blank{display:inline-block;width:14px}
:where(:root[data-page="financials-report"]) .fin-avg-top{cursor:pointer}
:where(:root[data-page="financials-report"]) .fin-avg-top .caret{display:inline-block;width:14px;color:var(--nx-ink3);transition:transform .12s}
:where(:root[data-page="financials-report"]) .fin-avg-top.open .caret{transform:rotate(90deg)}
:where(:root[data-page="financials-report"]) .fin-solo-row .solo-name{border-bottom:1px dotted var(--nx-line2)}
:where(:root[data-page="financials-report"]) .fin-solo-row td.label:hover .solo-name{border-bottom-color:var(--brand);color:var(--brand)}
/* The rule belongs to the one wide cell that holds the whole block, so ">"
   here matters - without it every cell of the inner table got its own. */
:where(:root[data-page="financials-report"]) .fin-detail-row>td{background:var(--nx-elev);padding:0}
:where(:root[data-page="financials-report"]) .fin-detail-wrap{padding:0;position:relative}
:where(:root[data-page="financials-report"]) .fin-detail-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:11.5px;color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .fin-detail-table th,:where(:root[data-page="financials-report"]) .fin-detail-table td{text-align:right;padding:0 13px;height:30px;border-bottom:1px solid var(--nx-line);vertical-align:middle;white-space:nowrap}
/* 13px, the same left padding the outer table's name column has, so the two
   line up exactly. The indent itself comes from the row's own tree-pad now,
   the way every other row of the tree gets it - the old flat 28px here was
   standing in for that and would double up with it. */
:where(:root[data-page="financials-report"]) .fin-detail-table th:first-child,:where(:root[data-page="financials-report"]) .fin-detail-table td:first-child{text-align:left;padding-left:13px;width:250px;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="financials-report"]) .fin-detail-table td.num{font-variant-numeric:tabular-nums;text-align:right}
:where(:root[data-page="financials-report"]) .fin-detail-acct td{font-weight:inherit;color:var(--nx-ink);background:var(--nx-elev)}
:where(:root[data-page="financials-report"]) .fin-detail-acct td:first-child{font-weight:inherit;background:var(--nx-elev)}

/* An opened block sits inside a row of the outer table, so hovering anything
   in the block counts as hovering that outer row too. These repeat the
   block's own colour with enough weight to win, so only the account row
   actually under the pointer changes. */
:where(:root[data-page="financials-report"]) .fin-table tbody tr.fin-detail-row>td,
:where(:root[data-page="financials-report"]) .fin-table tbody tr.fin-detail-row:hover>td{background:var(--nx-elev)}
:where(:root[data-page="financials-report"]) .fin-table tbody tr.fin-detail-acct>td,
:where(:root[data-page="financials-report"]) .fin-table tbody tr.fin-detail-acct>td:first-child{background:var(--nx-elev)}
:where(:root[data-page="financials-report"]) .fin-table tbody tr.fin-detail-acct:hover>td,
:where(:root[data-page="financials-report"]) .fin-table tbody tr.fin-detail-acct:hover>td:first-child{background:var(--nx-elev)}
:where(:root[data-page="financials-report"]) .fin-detail-loading{padding:11px 13px;color:var(--nx-ink3);font-size:12px;display:flex;align-items:center;gap:8px}
:where(:root[data-page="financials-report"]) .fin-spin{width:12px;height:12px;flex:0 0 auto;border:2px solid var(--nx-line2);border-top-color:var(--brand);border-radius:50%;animation:finSpin .7s linear infinite}
@keyframes finSpin{to{transform:rotate(360deg)}}

/* Every amount on the page is clickable - a group total, a line, a single
   account, a day count, a computed figure. Ones with a ledger behind them
   open the bills and the entries; the rest open the pop-up and say why there
   is nothing to show. Nothing marks them out until the pointer is on them,
   so the grid is not a wall of links. */
/* A figure below nothing, in red. The pointer still turns whatever it is on
   the brand colour, so a negative under the pointer reads as a live cell
   rather than staying red. */
:where(:root[data-page="financials-report"]) .neg{color:var(--down)}
:where(:root[data-page="financials-report"]) .amt-cell .amt-pill.neg:hover{color:var(--brand)}

/* COMPARE TO LAST YEAR
   A compared period is THREE columns - this year, last year, the change -
   under one heading that names the period, so what is being held against
   what is written down rather than left to be worked out from two similar
   dates sitting next to each other.
   The group is boxed by a solid rule on its left edge; inside it, last year
   and the change are separated by hairlines and read a shade lighter, so the
   eye lands on this year's figure first. */
:where(:root[data-page="financials-report"]) .fin-table th.grp{text-align:center;font-size:10px;letter-spacing:.08em;
     color:var(--nx-ink2);border-left:1px solid var(--nx-line2);
     border-bottom:1px solid var(--nx-line)}
/* The year row sits centred under the month above it, so the three columns of
   a group read as one block. The 20px of extra right padding every figure
   column carries - the room the change arrows sit in - is taken back off
   here, otherwise "centred" would land 10px left of centre. The figures
   themselves stay right-aligned; only the heading is centred. */
:where(:root[data-page="financials-report"]) .fin-table thead tr.subhead th{top:30px;text-align:center;padding-right:13px}
/* The second heading row has no line-name cell of its own - the one above it
   spans both rows - so its FIRST cell is a figure column sitting in the SECOND
   table column, and it must not pick up any of the rules written for the
   frozen line-name column.
   Undoing the left pin is not enough on its own. That cell was still carrying
   the z-index that lifts the frozen column OVER the grid, and a background to
   go with it, so on the way past it was painted ON TOP of the frozen "Line"
   heading: scroll sideways and a stray period label slid across the one
   heading that is supposed to stay put. It sits at the ordinary heading's
   z-index now, under the frozen column where it belongs.
   Its width is the colgroup's business too - the 130px here was the line
   column's width on a cell that is not the line column. */
:where(:root[data-page="financials-report"]) .fin-table thead tr.subhead th:first-child{position:sticky;left:auto;z-index:60;
     width:auto;text-align:center;border-right:none}
:where(:root[data-page="financials-report"]) .fin-table thead tr.subhead th.cmp-col{color:var(--nx-ink3);font-weight:600}
:where(:root[data-page="financials-report"]) .fin-table th.cmp-col,:where(:root[data-page="financials-report"]) .fin-table td.cmp-col,
:where(:root[data-page="financials-report"]) .fin-detail-table th.cmp-col,:where(:root[data-page="financials-report"]) .fin-detail-table td.cmp-col{border-left:1px dotted var(--nx-line)}
/* The left edge of a whole group, on every row, so the three columns read as
   one block from the heading all the way down. Only while the comparison is
   on - an ordinary grid has no vertical rules at all. */
:where(:root[data-page="financials-report"]) .fin-table.cmp-on th.num:not(.cmp-col):not(.pp-col),
:where(:root[data-page="financials-report"]) .fin-table.cmp-on td.num:not(.cmp-col):not(.pp-col){border-left:1px solid var(--nx-line2)}
/* $ + PPD. Each pair gets the same left edge a compared group does, and the
   PPD column reads as part of the dollars beside it - no rule between the two.
   Its figures are in the same ink as the dollars, black on a plain column. */
:where(:root[data-page="financials-report"]) .fin-table.both-on th.num:not(.cmp-col):not(.pp-col),
:where(:root[data-page="financials-report"]) .fin-table.both-on td.num:not(.cmp-col):not(.pp-col){border-left:1px solid var(--nx-line2)}
:where(:root[data-page="financials-report"]) .fin-table th.cmp-col.pp-col,:where(:root[data-page="financials-report"]) .fin-table td.cmp-col.pp-col,
:where(:root[data-page="financials-report"]) .fin-detail-table td.cmp-col.pp-col{border-left:none}
/* EVERY COLUMN IS SIZED FOR WHAT IT ACTUALLY HOLDS.
   A figure column keeps room on its right for two things - the change arrow
   and the note icon - and that room is room the figure cannot use. A column
   that can carry neither should not be paying for both, which is what used
   to put "..." on an eight-figure total while an inch of empty space sat to
   the right of it.
   Only a MONTH column gets an arrow: year to date, the trailing twelve, last
   year's column and the PPD figure have no month before them to have moved
   from. A Change column covers no period of its own, so it carries no notes
   either and needs nothing held open at all. So: a month keeps both slots,
   last year and the year-to-date keep one, a Change column keeps none, and
   the width of each follows.
   The grid's widths are set by its <colgroup> (its first heading row spans
   the groups, so it cannot carry them); the accounts table inside an opened
   line takes the same widths from here, and sizeTables() adds them up. */
:where(:root[data-page="financials-report"]) .fin-table col.bp-lbl{width:250px}
:where(:root[data-page="financials-report"]) .fin-table col.bp-usd{width:156px}
:where(:root[data-page="financials-report"]) .fin-table col.bp-py{width:124px}
:where(:root[data-page="financials-report"]) .fin-table col.bp-chg{width:112px}
:where(:root[data-page="financials-report"]) .fin-table col.bp-ppd{width:90px}
:where(:root[data-page="financials-report"]) .fin-detail-table td.cmp-col,:where(:root[data-page="financials-report"]) .fin-detail-table th.cmp-col{width:124px}
:where(:root[data-page="financials-report"]) .fin-detail-table td.chg-col,:where(:root[data-page="financials-report"]) .fin-detail-table th.chg-col{width:112px}
:where(:root[data-page="financials-report"]) .fin-table.both-on .fin-detail-table td.pp-col{width:90px}
/* One slot, not two - there is no arrow on any of these - and the note icon
   moves out to the edge rather than sitting in the arrow's empty place. */
:where(:root[data-page="financials-report"]) .fin-table td.cmp-col,:where(:root[data-page="financials-report"]) .fin-table th.cmp-col,
:where(:root[data-page="financials-report"]) .fin-table td.ytd-col,:where(:root[data-page="financials-report"]) .fin-table th.ytd-col,
:where(:root[data-page="financials-report"]) .fin-table td.ttm-col,:where(:root[data-page="financials-report"]) .fin-table th.ttm-col,
:where(:root[data-page="financials-report"]) .fin-detail-table td.cmp-col,:where(:root[data-page="financials-report"]) .fin-detail-table th.cmp-col{padding-right:32px}
:where(:root[data-page="financials-report"]) .fin-table td.cmp-col>.note-ic.near,:where(:root[data-page="financials-report"]) .fin-table td.ytd-col>.note-ic.near,
:where(:root[data-page="financials-report"]) .fin-table td.ttm-col>.note-ic.near,
:where(:root[data-page="financials-report"]) .fin-detail-table td.cmp-col>.note-ic.near{right:9px}
/* Neither slot: no arrow, and a Change column has no period to hold a note
   against. */
:where(:root[data-page="financials-report"]) .fin-table td.chg-col,:where(:root[data-page="financials-report"]) .fin-table th.chg-col,
:where(:root[data-page="financials-report"]) .fin-detail-table td.chg-col,:where(:root[data-page="financials-report"]) .fin-detail-table th.chg-col,
:where(:root[data-page="financials-report"]) .fin-table td.pp-col,:where(:root[data-page="financials-report"]) .fin-table th.pp-col,
:where(:root[data-page="financials-report"]) .fin-detail-table td.pp-col,:where(:root[data-page="financials-report"]) .fin-detail-table th.pp-col{padding-right:13px}
:where(:root[data-page="financials-report"]) .fin-table td.cmp-col .amt-pill,:where(:root[data-page="financials-report"]) .fin-table td.cmp-col .gnum,
:where(:root[data-page="financials-report"]) .fin-detail-table td.cmp-col .amt-pill{color:var(--nx-ink3)}
/* A last-year figure opens like any other, so it lights up like any other. */
:where(:root[data-page="financials-report"]) .fin-table td.cmp-col .amt-pill:hover,
:where(:root[data-page="financials-report"]) .fin-table td.cmp-col.gcell .gnum:hover{color:var(--brand);font-weight:700}
/* The change carries the colour: green when the move was good for that line,
   red when it was not - which is not the same as up and down. A cost falling
   is green. */
:where(:root[data-page="financials-report"]) .fin-table td.chg-good .amt-pill,:where(:root[data-page="financials-report"]) .fin-table td.chg-good .gnum,
:where(:root[data-page="financials-report"]) .fin-detail-table td.chg-good .amt-pill{color:var(--up)}
:where(:root[data-page="financials-report"]) .fin-table td.chg-bad .amt-pill,:where(:root[data-page="financials-report"]) .fin-table td.chg-bad .gnum,
:where(:root[data-page="financials-report"]) .fin-detail-table td.chg-bad .amt-pill{color:var(--down)}
/* A comparison column has no bills or ledger behind it - only the months on
   the grid are kept - so it opens nothing of its own. The click belongs to
   the row, and the pointer says so by taking the row's own cursor rather
   than sitting there as an arrow. Hovering still says what the column is,
   in the page's own tooltip. */
:where(:root[data-page="financials-report"]) .fin-table td.chg-col{cursor:inherit}

/* ── FACILITIES ACROSS ────────────────────────────────────────────────────
   Each facility is one column group and gets a rule down its left so the eye
   can run down a home without losing which one it is on. The Total closes the
   grid and is ruled off harder, the way YTD is on the month axis. */
:where(:root[data-page="financials-report"]) .fin-table th.fac-col,:where(:root[data-page="financials-report"]) .fin-table td.fac-col{border-left:1px solid var(--nx-line2)}
:where(:root[data-page="financials-report"]) .fin-table thead th.grp{border-left:1px solid var(--nx-line2)}
:where(:root[data-page="financials-report"]) .fin-table th.fac-tot,:where(:root[data-page="financials-report"]) .fin-table td.fac-tot,
:where(:root[data-page="financials-report"]) .fin-table thead th.grp.fac-tot{border-left:2px solid var(--nx-line2)}
:where(:root[data-page="financials-report"]) .fin-table td.fac-tot{font-weight:600}
/* A FACILITY'S NAME IS DRAGGED TO MOVE IT (v1.29). It reads as something to
   pick up, the one being carried goes faint, and a bar in the brand blue on
   the heading under the pointer says which side it will land. touch-action
   keeps a finger's sideways drag on a name for the move, not the scroll. */
:where(:root[data-page="financials-report"]) .fin-table thead th.grp.fac-move{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
:where(:root[data-page="financials-report"]) .fin-table thead th.grp.fac-move:hover{color:var(--nx-ink);background:var(--nx-hover)}
:where(:root[data-page="financials-report"]) .fin-table thead th.grp.fac-dragging{opacity:.45}
:where(:root[data-page="financials-report"]) .fin-table thead th.grp.fac-drop-l{box-shadow:inset 3px 0 0 var(--brand)}
:where(:root[data-page="financials-report"]) .fin-table thead th.grp.fac-drop-r{box-shadow:inset -3px 0 0 var(--brand)}
:where(:root[data-page="financials-report"]) body.fac-moving,:where(:root[data-page="financials-report"]) body.fac-moving *{cursor:grabbing !important;user-select:none;-webkit-user-select:none}
/* SHORT OF THE PERIOD. A facility column adds the whole span up inside
   itself, so a home missing a month or two of it simply reads low - nine
   months of one home held against eight of another, laid out as though they
   were the same question. The tag says how much of the period is really behind
   the column; the tooltip names the months.
   It sits on the PERIOD row rather than beside the facility's name. What it
   qualifies is the period, not the home - and a facility column is 156px, so
   a long name with a tag after it would spill into the column beside it while
   the row underneath has the room to spare. Small and amber rather than loud:
   it qualifies the heading, it does not shout over it. */
:where(:root[data-page="financials-report"]) .fin-table thead th .gaptag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;
     font-size:9px;font-weight:800;letter-spacing:.02em;text-transform:none;white-space:nowrap;
     vertical-align:1px;background:var(--warn-bg);color:var(--warn)}
/* The gap to the group reads as a comparison figure, not as a figure of its
   own, so it takes the same quieter treatment the change column has. */
:where(:root[data-page="financials-report"]) .fin-table th.vsg-col,:where(:root[data-page="financials-report"]) .fin-table td.vsg-col{border-left:1px dotted var(--nx-line)}
/* NOT ON THIS LAYOUT - the block at the foot holding what the chosen layout
   has no row for. It is not part of the statement, so it does not read like
   one: ruled off above, and the name quieter than the sections it follows. */
:where(:root[data-page="financials-report"]) .fin-table tbody tr.offlayout>td{border-top:1px solid var(--nx-line2);padding-top:9px}
:where(:root[data-page="financials-report"]) .fin-table tbody tr.offlayout>td.label{color:var(--nx-ink3)}
/* HOW ONE HOME SITS AGAINST THE REST, as a tint behind the figure. Two steps
   each way so a real outlier reads darker than a mild one, and light enough
   that a column of them still reads as a financial statement. Only ever drawn
   in PPD or % - see heatCls(). */
:where(:root[data-page="financials-report"]) .fin-table td.heat-good1{background:rgba(30,142,62,.07)}
:where(:root[data-page="financials-report"]) .fin-table td.heat-good2{background:rgba(30,142,62,.15)}
:where(:root[data-page="financials-report"]) .fin-table td.heat-bad1{background:rgba(234,67,53,.06)}
:where(:root[data-page="financials-report"]) .fin-table td.heat-bad2{background:rgba(234,67,53,.14)}
:root[data-theme="dark"]:where([data-page="financials-report"]) .fin-table td.heat-good1{background:rgba(52,199,89,.10)}
:root[data-theme="dark"]:where([data-page="financials-report"]) .fin-table td.heat-good2{background:rgba(52,199,89,.20)}
:root[data-theme="dark"]:where([data-page="financials-report"]) .fin-table td.heat-bad1{background:rgba(255,105,97,.09)}
:root[data-theme="dark"]:where([data-page="financials-report"]) .fin-table td.heat-bad2{background:rgba(255,105,97,.19)}
/* THE FIGURE IS THE BUTTON, NOT THE CELL. A number column is 130px wide and
   its figure is rarely half of that, so the empty room either side used to
   turn the number blue and take the click from a good yard away. The cursor,
   the colour and the click all belong to the number itself now; the rest of
   the cell is blank space and behaves like it, passing the click on to the
   row. .gnum is a heading's figure, .amt-pill everything else - both are
   inline-block so their box is exactly as wide as the text in them. */
:where(:root[data-page="financials-report"]) .amt-cell{cursor:inherit}
:where(:root[data-page="financials-report"]) .amt-cell .amt-pill,:where(:root[data-page="financials-report"]) .fin-table td.gcell.amt-cell .gnum{display:inline-block;cursor:pointer}
:where(:root[data-page="financials-report"]) .amt-cell .amt-pill:hover{color:var(--brand);font-weight:700}
:where(:root[data-page="financials-report"]) .fin-detail-table td.amt-cell{color:inherit}

/* The little labels a row can carry: a mapping still being decided, an
   allocated fringe block, an EBIDAR add-back. */
:where(:root[data-page="financials-report"]) .rtag{display:inline-block;font-size:10px;font-weight:700;border-radius:6px;padding:1px 7px;margin-left:7px;
      background:var(--warn-bg);color:var(--warn);vertical-align:1px;white-space:nowrap;letter-spacing:0;text-transform:none}
:where(:root[data-page="financials-report"]) .rtag.ok{background:var(--up-bg);color:var(--up)}
:where(:root[data-page="financials-report"]) .rtag.dim{background:var(--nx-hover);color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .empty{padding:16px;color:var(--nx-ink2);font-size:14px}

/* Our own tooltip - the browser's default one is never used. pre-line so a
   tooltip holding several months' notes keeps one to a line. */
:where(:root[data-page="financials-report"]) .tip{position:fixed;z-index:900;background:var(--nx-ink);color:var(--nx-surface);font-size:11px;font-weight:600;
     padding:6px 10px;border-radius:8px;max-width:340px;white-space:pre-line;pointer-events:none;opacity:0;
     transition:opacity .12s ease;box-shadow:0 8px 22px rgba(16,24,40,.28)}
:where(:root[data-page="financials-report"]) .tip.show{opacity:1}
/* A tooltip holding several months' notes. One month to a line, its note
   under it, and enough air between them to tell one from the next. */
:where(:root[data-page="financials-report"]) .tip.rich{max-width:400px;font-weight:500;line-height:1.45;text-align:left;padding:9px 12px}
:where(:root[data-page="financials-report"]) .tip .tip-note{margin-top:9px}
:where(:root[data-page="financials-report"]) .tip .tip-note:first-child{margin-top:0}
:where(:root[data-page="financials-report"]) .tip .tip-mo{display:block;font-weight:800;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
     color:var(--tip-yr-now);margin-bottom:2px}
/* Last year's months, when the comparison is on and both years' notes are in
   the same tooltip. */
:where(:root[data-page="financials-report"]) .tip .tip-note.py .tip-mo{color:var(--tip-yr-prior)}
/* The sum behind a Change figure, read DOWN rather than across: this year on
   one line, last year under it, a rule, then the change and how big it was.
   Written as a sentence it was one long run of numbers and dates that nobody
   could find the middle of. */
:where(:root[data-page="financials-report"]) .tip .tip-cmp{min-width:210px;white-space:normal}
:where(:root[data-page="financials-report"]) .tip .tip-cmp .h{font-weight:800;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
     color:var(--brand-on-dark,#7FD1A6);margin-bottom:5px}
:where(:root[data-page="financials-report"]) .tip .tip-cmp .r{display:flex;align-items:baseline;justify-content:space-between;gap:22px;padding:2px 0}
:where(:root[data-page="financials-report"]) .tip .tip-cmp .l{font-weight:600;opacity:.75}
:where(:root[data-page="financials-report"]) .tip .tip-cmp .v{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
:where(:root[data-page="financials-report"]) .tip .tip-cmp .tot{margin-top:5px;padding-top:5px;border-top:1px solid rgba(255,255,255,.22)}
:root[data-theme="dark"]:where([data-page="financials-report"]) .tip .tip-cmp .tot{border-top-color:rgba(0,0,0,.28)}
:where(:root[data-page="financials-report"]) .tip .tip-cmp .v.good{color:var(--brand-on-dark,#7FD1A6)}
:where(:root[data-page="financials-report"]) .tip .tip-cmp .v.bad{color:#F4756B}

/* ---- Financial notes -----------------------------------------------------
   A note is never shown on hover. Anything carrying one - a figure, or a
   line's own NAME - is underlined with a dashed brand rule AND gets a small
   icon just to its right. The underline says WHICH figure the note is about,
   the icon is what you click to read it. */
:where(:root[data-page="financials-report"]) .amt-pill.has-note{border-bottom:1px dashed var(--brand)}
:where(:root[data-page="financials-report"]) .gnum.has-note{border-bottom:1px dashed var(--brand)}
:where(:root[data-page="financials-report"]) .note-name{border-bottom:1px dashed var(--brand)}
:where(:root[data-page="financials-report"]) .note-ic{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
     margin-left:5px;padding:0;border:0;background:transparent;color:var(--brand);cursor:pointer;
     border-radius:5px;vertical-align:-3px;opacity:.7;flex:0 0 auto;line-height:0;box-shadow:none;
     font-family:inherit}
:where(:root[data-page="financials-report"]) .note-ic:hover,:where(:root[data-page="financials-report"]) .note-ic.on{opacity:1;background:var(--brand-lt)}
:where(:root[data-page="financials-report"]) .note-ic svg{width:12px;height:12px;display:block}
/* The note panel. It looks like the page's tooltip, but it is opened by a
   click and stays until it is closed, so the note can be read and copied.
   The X sits outside the scrolling part, or it would slide away with it. */
:where(:root[data-page="financials-report"]) .npop{position:fixed;z-index:940;background:var(--nx-ink);color:var(--nx-surface);border-radius:10px;
     padding:10px 30px 10px 12px;max-width:360px;min-width:170px;font-size:12px;font-weight:500;
     line-height:1.45;text-align:left;box-shadow:0 10px 26px rgba(16,24,40,.3);
     opacity:0;visibility:hidden;transition:opacity .12s ease}
:where(:root[data-page="financials-report"]) .npop.show{opacity:1;visibility:visible}
:where(:root[data-page="financials-report"]) .npop-body{max-height:260px;overflow:auto;white-space:pre-line}
:where(:root[data-page="financials-report"]) .npop-x{position:absolute;top:5px;right:5px;width:19px;height:19px;padding:0;border:0;border-radius:6px;
     background:transparent;color:inherit;opacity:.6;cursor:pointer;font-family:inherit;font-size:11px;
     line-height:1;display:flex;align-items:center;justify-content:center}
:where(:root[data-page="financials-report"]) .npop-x:hover{opacity:1;background:rgba(255,255,255,.16)}
:root[data-theme="dark"]:where([data-page="financials-report"]) .npop-x:hover{background:rgba(0,0,0,.22)}
/* Same lay-out the tooltip used for a stack of notes: the month in small
   caps, its note under it, air between them, and the two years in their
   own colours. */
:where(:root[data-page="financials-report"]) .npop .tip-note{margin-top:9px}
:where(:root[data-page="financials-report"]) .npop .tip-note:first-child{margin-top:0}
/* The month sticks to the top of the panel while its own notes are still
   going past, then the next month pushes it out. It needs the panel's own
   background behind it, or the notes would scroll through the lettering. */
:where(:root[data-page="financials-report"]) .npop .tip-mo{display:block;position:sticky;top:0;z-index:1;font-weight:800;font-size:10px;
     letter-spacing:.05em;text-transform:uppercase;color:var(--tip-yr-now);
     background:var(--nx-ink);padding:3px 0 4px;margin-bottom:0}
:where(:root[data-page="financials-report"]) .npop .tip-note.py .tip-mo{color:var(--tip-yr-prior)}
/* The facility a note came from, when several facilities are added together.
   A month can carry eight of these at once, and run together they read as one
   paragraph. So each facility is its own block: the name on its own line, its
   note under it, and a hairline between one facility and the next. */
:where(:root[data-page="financials-report"]) .note-facs{display:block}
:where(:root[data-page="financials-report"]) .note-fl{display:block;padding:8px 0}
:where(:root[data-page="financials-report"]) .note-fl:first-child{padding-top:0}
:where(:root[data-page="financials-report"]) .note-fl:last-child{padding-bottom:0}
:where(:root[data-page="financials-report"]) .note-fac{display:block;font-size:11px;font-weight:800;letter-spacing:.02em;margin-bottom:2px}
:where(:root[data-page="financials-report"]) .note-ft{display:block;white-space:pre-line}
/* On the dark note panel and tooltip: the name at full strength, its writing
   a shade back, and the rule between them barely there. */
:where(:root[data-page="financials-report"]) .tip .note-fl+.note-fl,:where(:root[data-page="financials-report"]) .npop .note-fl+.note-fl{border-top:1px solid rgba(255,255,255,.15)}
:root[data-theme="dark"]:where([data-page="financials-report"]) .tip .note-fl+.note-fl,
:root[data-theme="dark"]:where([data-page="financials-report"]) .npop .note-fl+.note-fl{border-top-color:rgba(0,0,0,.2)}
:where(:root[data-page="financials-report"]) .tip .note-ft,:where(:root[data-page="financials-report"]) .npop .note-ft{opacity:.84}
/* In the blue note box and the notes list, both on a light card. */
:where(:root[data-page="financials-report"]) .note-line .note-fl+.note-fl{border-top:1px solid var(--brand)}
:where(:root[data-page="financials-report"]) .note-tx .note-fl+.note-fl{border-top:1px solid var(--nx-line)}
:where(:root[data-page="financials-report"]) .note-line .note-fac,:where(:root[data-page="financials-report"]) .note-tx .note-fac{color:var(--brand)}
:where(:root[data-page="financials-report"]) .note-line .note-facs{margin-top:3px}
/* The blue box at the top of the pop-up. */
:where(:root[data-page="financials-report"]) .note-box{background:var(--brand-lt);border:1px solid var(--brand);border-radius:12px;padding:11px 13px;margin:2px 0 12px}
:where(:root[data-page="financials-report"]) .note-box-h{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:6px}
:where(:root[data-page="financials-report"]) .note-line{font-size:12.5px;line-height:1.45;color:var(--nx-ink);margin-top:4px;white-space:pre-line}
:where(:root[data-page="financials-report"]) .note-line:first-of-type{margin-top:0}
:where(:root[data-page="financials-report"]) .note-line .mo{display:inline-block;min-width:56px;font-weight:800;color:var(--yr-now)}
:where(:root[data-page="financials-report"]) .note-line.py .mo{color:var(--yr-prior)}
/* Every note on one line, month by month. ONE list, not a stack of framed
   cards: the month sits in its own narrow column on the left and the note
   runs beside it, with a hairline between rows. Read down, it is one
   write-up about the line rather than a dozen separate things. */
:where(:root[data-page="financials-report"]) .note-list{border-top:1px solid var(--nx-line)}
:where(:root[data-page="financials-report"]) .note-row{display:flex;align-items:flex-start;gap:16px;padding:11px 2px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="financials-report"]) .note-mo{flex:0 0 104px;font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--yr-now);
     line-height:1.45;white-space:nowrap}
:where(:root[data-page="financials-report"]) .note-row.py .note-mo{color:var(--yr-prior)}
:where(:root[data-page="financials-report"]) .note-tx{flex:1;min-width:0;font-size:12.5px;line-height:1.45;color:var(--nx-ink);white-space:pre-line}
/* Which colour is which year - only drawn when both years are in the list. */
:where(:root[data-page="financials-report"]) .note-key{display:flex;gap:16px;margin:0 0 2px;font-size:10.5px;font-weight:700;letter-spacing:.03em}
:where(:root[data-page="financials-report"]) .note-key span{display:inline-flex;align-items:center;gap:6px;color:var(--nx-ink2)}
:where(:root[data-page="financials-report"]) .note-key i{width:9px;height:9px;border-radius:50%;background:var(--yr-now)}
:where(:root[data-page="financials-report"]) .note-key .py i{background:var(--yr-prior)}
:where(:root[data-page="financials-report"]) .pop-card.small-card{height:auto;max-height:84vh}
/* The import panel. The file box is our own button - the browser's grey
   "Choose File" control belongs to no site. */
:where(:root[data-page="financials-report"]) .imp-row{display:flex;align-items:center;gap:12px;margin-bottom:11px}
:where(:root[data-page="financials-report"]) .imp-row>label{width:92px;flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .imp-row select{flex:1;min-width:0;font-family:inherit;font-size:13px;font-weight:600;color:var(--nx-ink);
  background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:10px;padding:8px 11px;appearance:none;cursor:pointer}
:where(:root[data-page="financials-report"]) .imp-file{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
/* Drop the workbooks straight on. The box is also the button - clicking it
   opens the file picker - so there is one thing to aim at either way. */
:where(:root[data-page="financials-report"]) .imp-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:22px 16px;margin-bottom:11px;cursor:pointer;
  border:1.5px dashed var(--nx-line2);border-radius:12px;background:var(--nx-elev);
  transition:border-color .12s,background .12s}
:where(:root[data-page="financials-report"]) .imp-drop:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .imp-drop.over{border-color:var(--brand);border-style:solid;background:var(--nx-hover)}
:where(:root[data-page="financials-report"]) .imp-drop svg{width:22px;height:22px;color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .imp-drop.over svg{color:var(--brand)}
:where(:root[data-page="financials-report"]) .imp-dt{font-size:13px;font-weight:700;color:var(--nx-ink);text-align:center}
:where(:root[data-page="financials-report"]) .imp-ds{font-size:12px;color:var(--nx-ink3);text-align:center}
/* How far through a batch we are - only shown while one is running. */
:where(:root[data-page="financials-report"]) .imp-bar{height:4px;margin-top:12px;border-radius:99px;background:var(--nx-line2);overflow:hidden}
:where(:root[data-page="financials-report"]) .imp-bar:not(.on){display:none}
:where(:root[data-page="financials-report"]) .imp-bar span{display:block;height:100%;width:0;border-radius:99px;background:var(--brand);
  transition:width .2s ease}
:where(:root[data-page="financials-report"]) .imp-name{font-size:12.5px;color:var(--nx-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="financials-report"]) .imp-act{display:flex;align-items:center;gap:12px;margin-top:16px}
:where(:root[data-page="financials-report"]) .imp-msg{font-size:12.5px;font-weight:600;color:var(--nx-ink2)}
:where(:root[data-page="financials-report"]) .imp-msg.err{color:var(--warn)}
:where(:root[data-page="financials-report"]) .imp-msg.ok{color:var(--up)}
/* One line per file after an import - what it was read as, and how it went. */
:where(:root[data-page="financials-report"]) .imp-res{margin-top:14px;border-top:1px solid var(--nx-line2);max-height:38vh;overflow:auto}
:where(:root[data-page="financials-report"]) .imp-res:empty{display:none;border-top:0;margin-top:0}
:where(:root[data-page="financials-report"]) .imp-r{display:flex;align-items:flex-start;gap:10px;padding:9px 2px;border-bottom:1px solid var(--nx-line2)}
:where(:root[data-page="financials-report"]) .imp-r:last-child{border-bottom:0}
:where(:root[data-page="financials-report"]) .imp-r i{flex:0 0 auto;width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--up)}
:where(:root[data-page="financials-report"]) .imp-r.bad i{background:var(--warn)}
:where(:root[data-page="financials-report"]) .imp-rt{min-width:0;flex:1}
:where(:root[data-page="financials-report"]) .imp-rf{display:block;font-size:12.5px;font-weight:700;color:var(--nx-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="financials-report"]) .imp-rd{display:block;font-size:12px;color:var(--nx-ink2);line-height:1.5;margin-top:2px}
:where(:root[data-page="financials-report"]) .imp-rd b{font-weight:700;color:var(--nx-ink)}

/* pop-up: bills + journal entries behind an amount */
:where(:root[data-page="financials-report"]) .popover{display:none;position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:500;align-items:center;justify-content:center;padding:20px}
:where(:root[data-page="financials-report"]) .popover.show{display:flex}
:where(:root[data-page="financials-report"]) .pop-card.um-card{width:min(900px,96vw)}
:where(:root[data-page="financials-report"]) .pop-card{background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:18px;width:min(740px,96vw);height:min(640px,84vh);display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(16,24,40,.35);overflow:hidden}
/* The one behind an amount carries a four-column table, so it gets the room
   for it. The small pop-ups keep the narrower card. */
:where(:root[data-page="financials-report"]) .pop-card.detail-card{width:min(1120px,96vw);height:min(760px,88vh)}
:where(:root[data-page="financials-report"]) .pop-head{padding:16px 22px 13px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="financials-report"]) .pop-head .row1{display:flex;align-items:center;gap:11px}
/* The period the pop-up is showing, on its own line under the name, instead
   of run together with it behind a dot. */
:where(:root[data-page="financials-report"]) .pop-sub{font-size:12px;font-weight:600;color:var(--nx-ink3);margin-top:3px}
:where(:root[data-page="financials-report"]) .pop-acct{font-size:11px;font-weight:700;letter-spacing:.05em;background:var(--brand-lt);color:var(--brand);border-radius:7px;padding:4px 9px;font-variant-numeric:tabular-nums;white-space:nowrap}
:where(:root[data-page="financials-report"]) .pop-title{font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--nx-ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="financials-report"]) .pop-name{flex:1;min-width:0}
:where(:root[data-page="financials-report"]) .pop-name .pop-title{flex:none;font-size:15.5px}
:where(:root[data-page="financials-report"]) .pop-x{border:none;background:var(--nx-hover);border-radius:9px;width:30px;height:30px;font-size:17px;line-height:1;cursor:pointer;color:var(--nx-ink2);flex-shrink:0}
:where(:root[data-page="financials-report"]) .pop-x:hover{background:var(--nx-line2);color:var(--nx-ink)}
/* Three standalone cards, same shape as the tiles on the main page. */
/* Four tiles across the top, filling the width. On a narrow window they
   fall into two rows of two rather than being squeezed. */
:where(:root[data-page="financials-report"]) .pop-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:13px}
:where(:root[data-page="financials-report"]) .pop-stat{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius-sm);padding:11px 14px}
:where(:root[data-page="financials-report"]) .pop-stat .l{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .pop-stat .v{font-size:14.5px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums;color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .pop-stat .v.neg{color:var(--down)}
:where(:root[data-page="financials-report"]) .pop-stat .s{font-size:10.5px;font-weight:600;color:var(--nx-ink3);margin-top:2px;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The bottom padding belongs to the button row rather than to the list below
   it: the list scrolls, so a gap that lived on the list slid away with the
   first row and left the rows running into the buttons. */
:where(:root[data-page="financials-report"]) .pop-seg{display:flex;gap:4px;padding:11px 22px 10px}
:where(:root[data-page="financials-report"]) .seg{border:none;background:transparent;color:var(--nx-ink2);border-radius:9px;padding:7px 13px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
:where(:root[data-page="financials-report"]) .seg:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .seg.active{background:var(--brand-lt);color:var(--brand);font-weight:700}
:where(:root[data-page="financials-report"]) .seg .n{font-size:10px;opacity:.7;margin-left:4px}
:where(:root[data-page="financials-report"]) .seg.back{background:var(--nx-hover);color:var(--nx-ink2);display:inline-flex;align-items:center}
:where(:root[data-page="financials-report"]) .seg.back:hover{background:var(--nx-line2);color:var(--nx-ink)}
/* Period switch on the right of the pop-up's tab row: the column that was
   clicked, or every month the grid is showing. */
:where(:root[data-page="financials-report"]) .pop-scope{margin-left:auto;display:flex;border:1px solid var(--nx-line2);border-radius:10px;overflow:hidden;align-self:center}
:where(:root[data-page="financials-report"]) .pop-scope button{border:none;background:var(--nx-elev);color:var(--nx-ink2);font-family:inherit;font-size:11px;font-weight:700;padding:6px 11px;cursor:pointer;white-space:nowrap}
:where(:root[data-page="financials-report"]) .pop-scope button:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .pop-scope button.active{background:var(--brand);color:#fff}
:where(:root[data-page="financials-report"]) .pop-body{overflow-y:auto;overflow-x:hidden;padding:0 22px 20px;flex:1}
:where(:root[data-page="financials-report"]) .pop-body>.pop-tbl{margin-top:2px}
/* Both lists in the pop-up - the bills and the ledger - are the same table.
   Fixed columns, one line to a row, every row the same height, and each
   piece of information in a column of its own rather than run together on
   one line under the vendor's name. Anything too long for its column is cut
   with an ellipsis and shows in full on hover, in the site's own tooltip. */
:where(:root[data-page="financials-report"]) .pop-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;table-layout:fixed;
         border:1px solid var(--nx-line);border-radius:12px;overflow:hidden}
:where(:root[data-page="financials-report"]) .pop-tbl th{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--nx-ink3);
            text-align:left;padding:0 14px;height:32px;background:var(--nx-rail);white-space:nowrap;
            border-bottom:1px solid var(--nx-line2);position:sticky;top:0;z-index:1}
:where(:root[data-page="financials-report"]) .pop-tbl th.r{text-align:right}
/* Every heading sorts. The one that is sorting is picked out and carries a
   small arrow saying which way round it is. */
:where(:root[data-page="financials-report"]) .pop-tbl th.sortable{cursor:pointer;user-select:none}
:where(:root[data-page="financials-report"]) .pop-tbl th.sortable:hover{color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .pop-tbl th.sorted{color:var(--brand)}
:where(:root[data-page="financials-report"]) .pop-tbl th .sort-ar{margin-left:4px;font-size:9px}
:where(:root[data-page="financials-report"]) .pop-tbl td{height:34px;padding:0 14px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink2);
            vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Every other row carries a tint, so the eye keeps its place crossing a
   wide row from the date to the amount. */
:where(:root[data-page="financials-report"]) .pop-tbl tbody tr:nth-child(even) td{background:var(--nx-rail)}
:where(:root[data-page="financials-report"]) .pop-tbl tbody tr:hover td,
:where(:root[data-page="financials-report"]) .pop-tbl tbody tr:nth-child(even):hover td{background:var(--brand-lt)}
:where(:root[data-page="financials-report"]) .pop-tbl tbody tr:last-child td{border-bottom:none}
:where(:root[data-page="financials-report"]) .pop-tbl td.mo{font-weight:700;color:var(--brand)}
:where(:root[data-page="financials-report"]) .pop-tbl td.dt{color:var(--nx-ink3);font-variant-numeric:tabular-nums}
:where(:root[data-page="financials-report"]) .pop-tbl td.no{font-weight:600;color:var(--nx-ink2);font-variant-numeric:tabular-nums}
:where(:root[data-page="financials-report"]) .pop-tbl td.tx{color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .pop-tbl td.tx.dim{color:var(--nx-ink2)}
:where(:root[data-page="financials-report"]) .pop-tbl td.tx.none,:where(:root[data-page="financials-report"]) .pop-tbl td.no.none{color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .pop-tbl td.vn{font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .pop-tbl td.doc{padding:0 10px}
:where(:root[data-page="financials-report"]) .pop-tbl td.am{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .pop-tbl td.am.neg,:where(:root[data-page="financials-report"]) .pop-tbl tfoot td.am.neg{color:var(--down)}
/* The total sits on the bottom of the table and stays there while the list
   scrolls, so what is on screen always has its sum beside it. */
:where(:root[data-page="financials-report"]) .pop-tbl tfoot td{position:sticky;bottom:0;background:var(--nx-elev);border-top:1px solid var(--nx-line2);
                  border-bottom:none;font-weight:800;color:var(--nx-ink);z-index:1}
:where(:root[data-page="financials-report"]) .pop-tbl tfoot td.lbl{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--nx-ink3)}
/* Set column by column, so a column is the same width whether or not the
   Month and Account columns are showing, and the two wide text columns get
   what is left over in a settled share rather than an even split. */
:where(:root[data-page="financials-report"]) .pop-tbl col.c-mo{width:64px}
:where(:root[data-page="financials-report"]) .pop-tbl col.c-dt{width:100px}
:where(:root[data-page="financials-report"]) .pop-tbl col.c-bn{width:118px}
:where(:root[data-page="financials-report"]) .pop-tbl col.c-ac{width:88px}
:where(:root[data-page="financials-report"]) .pop-tbl col.c-an{width:150px}
:where(:root[data-page="financials-report"]) .pop-tbl col.c-dc{width:72px}
:where(:root[data-page="financials-report"]) .pop-tbl col.c-am{width:132px}
:where(:root[data-page="financials-report"]) .pop-tbl col.c-vn{width:26%}
:where(:root[data-page="financials-report"]) .pop-tbl col.c-je{width:36%}
/* Those are only what the table starts on. The real widths are measured
   against the data once the rows are up - see fitPopCols. */
:where(:root[data-page="financials-report"]) .pop-tbl td.dt,:where(:root[data-page="financials-report"]) .pop-tbl td.mo,:where(:root[data-page="financials-report"]) .pop-tbl td.am,:where(:root[data-page="financials-report"]) .pop-tbl td.doc{text-overflow:clip}
/* The vendor's name is a button - it opens every bill from that vendor. It
   is drawn as plain text until you point at it, so the column does not turn
   into a wall of links. */
:where(:root[data-page="financials-report"]) .pop-tbl .vlink{border:none;background:none;padding:0;margin:0;font:inherit;font-weight:700;color:inherit;
                cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
                display:block;text-align:left;border-bottom:1px dashed transparent}
:where(:root[data-page="financials-report"]) .pop-tbl .vlink:hover{color:var(--brand);border-bottom-color:var(--brand)}
:where(:root[data-page="financials-report"]) .pop-doc{display:inline-flex;align-items:center;gap:4px;background:var(--brand-lt);color:var(--brand);border-radius:7px;padding:3px 9px;font-size:10px;font-weight:700;text-decoration:none;flex-shrink:0;white-space:nowrap}
:where(:root[data-page="financials-report"]) a.pop-doc:hover{background:var(--brand);color:#fff}
:where(:root[data-page="financials-report"]) .pop-doc svg{width:10px;height:10px}
:where(:root[data-page="financials-report"]) .pop-empty{padding:24px;text-align:center;color:var(--nx-ink3);font-size:12px}

@media print{
  :where(:root[data-page="financials-report"]) body{background:#fff}
  :where(:root[data-page="financials-report"]) .pagehead-actions,:where(:root[data-page="financials-report"]) .bar,:where(:root[data-page="financials-report"]) .ctlrow,:where(:root[data-page="financials-report"]) .tiles,:where(:root[data-page="financials-report"]) .note,:where(:root[data-page="financials-report"]) .msg{display:none !important}
  :where(:root[data-page="financials-report"]) .fin-panel{border:0;max-height:none;overflow:visible}
  :where(:root[data-page="financials-report"]) .caret,:where(:root[data-page="financials-report"]) .ncaret{display:none !important}
}

/* ── Shown inside financials.php / financials-dashboard.php (?embed=1) ──────
   The dashboard frames this page and already gives it a top bar and a menu,
   so our own title row and theme button come off and the outer padding is
   trimmed. Everything below the bar behaves exactly as it does on its own. */
html.is-embed:where([data-page="financials-report"]),html.is-embed:where([data-page="financials-report"]) body{background:transparent}
/* Scroll on <body>, not the window: the window scrollbar keeps a default-width
   gutter reserved, which left a gap to the right of our thinner scrollbar. */
html.is-embed:where([data-page="financials-report"]){height:100%;overflow:hidden;scrollbar-gutter:auto}
html.is-embed:where([data-page="financials-report"]) body{height:100%;overflow-y:auto;scrollbar-gutter:stable}
html.is-embed:where([data-page="financials-report"]) .shell{min-height:0}
html.is-embed:where([data-page="financials-report"]) .wrap{max-width:none;padding:20px 22px 44px}
html.is-embed:where([data-page="financials-report"]) .pagehead{display:none}

/* When the dashboard sends its site filter down, this page's own facility /
   month bar goes away - the filter drives it instead - and the page row and
   the Dollars / PPD switch move up into the shell's menu and top bar. */
html.shell-scoped:where([data-page="financials-report"]) .bar,:where(:root[data-page="financials-report"]) body.shell-scoped .bar{display:none}
html.shell-scoped:where([data-page="financials-report"]) .ctlrow,:where(:root[data-page="financials-report"]) body.shell-scoped .ctlrow{display:none}

/* The "which location is the home" question. Asked once per facility, the
   first time anyone turns Consolidated off for it. */
:where(:root[data-page="financials-report"]) .pick-card{height:auto;max-height:84vh}
:where(:root[data-page="financials-report"]) .pick-note{margin:0 0 16px;font-size:13px;color:var(--nx-ink2);line-height:1.55}
:where(:root[data-page="financials-report"]) .pick-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 14px;
          border:1px solid var(--nx-line2);border-radius:var(--nx-radius-sm);background:var(--nx-surface);
          color:var(--nx-ink);font-size:13.5px;font-family:inherit;cursor:pointer;margin-bottom:8px}
:where(:root[data-page="financials-report"]) .pick-opt:hover{border-color:var(--brand);color:var(--brand);font-weight:700}
:where(:root[data-page="financials-report"]) .pick-opt .pick-id{margin-left:auto;font-size:11.5px;color:var(--nx-ink3);font-weight:400}
:where(:root[data-page="financials-report"]) .pick-opt:hover .pick-id{color:var(--brand)}
:where(:root[data-page="financials-report"]) .pick-opt.on{border-color:var(--brand);background:var(--hi-bg)}
/* Main locations, on the Admin page: a facility a row, its locations in a
   dropdown, and whether the one showing was chosen or only worked out. The
   search narrows the rows by facility or by location. */
:where(:root[data-page="financials-report"]) #mainPick .pop-body{overflow:auto}
:where(:root[data-page="financials-report"]) .ml-search{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--nx-line2);
           border-radius:var(--nx-radius-sm);font-size:13px;font-family:inherit;
           background:var(--nx-elev);color:var(--nx-ink);margin-bottom:10px}
:where(:root[data-page="financials-report"]) .ml-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="financials-report"]) .ml-row:last-child{border-bottom:none}
:where(:root[data-page="financials-report"]) .ml-fac{flex:1 1 auto;min-width:0;font-size:13px;font-weight:600;color:var(--nx-ink);
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="financials-report"]) .ml-sel{flex:0 0 280px;max-width:280px;padding:6px 8px;border:1px solid var(--nx-line2);border-radius:8px;
        font-size:12.5px;font-family:inherit;background:var(--nx-elev);color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .ml-tag{flex:0 0 84px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.04em;
        text-transform:uppercase;border-radius:20px;padding:3px 0;color:var(--nx-ink3);background:var(--nx-hover)}
:where(:root[data-page="financials-report"]) .ml-tag.guess{color:var(--warn);background:var(--warn-bg)}
:where(:root[data-page="financials-report"]) .ml-empty{padding:18px;text-align:center;color:var(--nx-ink3);font-size:12.5px}
/* Financials start - the same rows, a month button in place of the dropdown,
   and the page's own month picker floating over the list. */
:where(:root[data-page="financials-report"]) .st-first{margin-left:8px;font-weight:400;font-size:12px;color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .st-pick{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-width:164px;
        padding:7px 10px 7px 11px;border:1px solid var(--nx-line2);border-radius:999px;background:var(--nx-elev);
        font:inherit;font-size:12.5px;font-weight:500;color:var(--nx-ink3);cursor:pointer;
        transition:border-color .12s,background .12s,color .12s}
:where(:root[data-page="financials-report"]) .st-pick svg{width:14px;height:14px;flex:0 0 auto}
:where(:root[data-page="financials-report"]) .st-pick span{flex:1 1 auto;text-align:left}
:where(:root[data-page="financials-report"]) .st-pick .st-chev{width:12px;height:12px;opacity:.6}
:where(:root[data-page="financials-report"]) .st-pick:hover{border-color:var(--brand);color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .st-pick.set{background:var(--brand-lt);border-color:transparent;color:var(--brand);font-weight:600}
:where(:root[data-page="financials-report"]) .st-pick:disabled{opacity:.55;cursor:default}
:where(:root[data-page="financials-report"]) .st-cal{display:none;position:fixed;z-index:600;width:248px;box-sizing:border-box;padding:12px;
        background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:14px;
        box-shadow:0 18px 48px rgba(16,24,40,.22)}
:where(:root[data-page="financials-report"]) .st-cal.show{display:block}
:where(:root[data-page="financials-report"]) .st-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
:where(:root[data-page="financials-report"]) .st-cal-year{font-size:14px;font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .st-cal-nav{display:grid;place-items:center;width:28px;height:28px;border:none;border-radius:8px;
        background:none;color:var(--nx-ink2);cursor:pointer}
:where(:root[data-page="financials-report"]) .st-cal-nav svg{width:14px;height:14px}
:where(:root[data-page="financials-report"]) .st-cal-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .st-cal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
:where(:root[data-page="financials-report"]) .st-cal-m{height:34px;border:none;border-radius:8px;background:none;font:inherit;font-size:12.5px;
        font-weight:500;color:var(--nx-ink);cursor:pointer;position:relative}
:where(:root[data-page="financials-report"]) .st-cal-m:hover{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="financials-report"]) .st-cal-m.now{box-shadow:inset 0 0 0 1px var(--nx-line2);font-weight:700}
:where(:root[data-page="financials-report"]) .st-cal-m.first::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;
        margin-left:-2px;border-radius:50%;background:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .st-cal-m.sel{background:var(--brand);color:#fff;font-weight:600;box-shadow:none}
:where(:root[data-page="financials-report"]) .st-cal-m.sel::after{background:#fff}
:where(:root[data-page="financials-report"]) .st-cal-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
        margin-top:10px;padding-top:10px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="financials-report"]) .st-cal-foot span{font-size:11.5px;color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .st-cal-foot button{border:none;background:none;padding:4px 8px;margin-left:-8px;border-radius:6px;
        font:inherit;font-size:12px;font-weight:600;color:var(--brand);cursor:pointer}
:where(:root[data-page="financials-report"]) .st-cal-foot button:hover{background:var(--brand-lt)}
:where(:root[data-page="financials-report"]) .st-cal-foot button:disabled{color:var(--nx-ink3);background:none;cursor:default;opacity:.6}

/* ── The Mapping tab ────────────────────────────────────────────────────────
   The structure behind a page, side by side with an editor for whichever row
   is picked. The list is plain text, one row per line, so a tree of a few
   thousand rows still opens at once; all the controls live in the panel on
   the right and there is only ever one set of them. */
/* The list fills the height it is given rather than stopping at its last row.
   Inside the dashboard that is the frame; on its own it is the window. */
:where(:root[data-page="financials-report"]) #mapPane{display:flex;flex-direction:column;min-height:0}
:where(:root[data-page="financials-report"]) .map-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:stretch}
@media (max-width:900px){:where(:root[data-page="financials-report"]) .map-wrap{grid-template-columns:minmax(0,1fr)}}
:where(:root[data-page="financials-report"]) .map-bar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
:where(:root[data-page="financials-report"]) .map-bar .grow{margin-left:auto;display:flex;align-items:center;gap:10px}
:where(:root[data-page="financials-report"]) .map-dirty{font-size:12px;color:var(--warn);font-weight:700}
/* The search box. Built out of the page's own field so it lines up with the
   structure picker beside it, with the magnifier and the clear cross inside. */
:where(:root[data-page="financials-report"]) .map-find{position:relative;display:flex}
:where(:root[data-page="financials-report"]) .map-find input{padding-left:34px;padding-right:30px;min-width:220px}
:where(:root[data-page="financials-report"]) .map-find-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;
             color:var(--nx-ink3);pointer-events:none}
:where(:root[data-page="financials-report"]) .map-find-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:20px;height:20px;
            border:none;background:none;color:var(--nx-ink3);font-size:17px;line-height:1;cursor:pointer;
            border-radius:50%;font-family:inherit;padding:0}
:where(:root[data-page="financials-report"]) .map-find-x:hover{background:var(--nx-rail);color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .map-found{font-size:12px;color:var(--nx-ink3);font-weight:600}
:where(:root[data-page="financials-report"]) .map-list{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);
          overflow:auto;height:max(380px, calc(100vh - 320px))}
:where(:root[data-page="financials-report"]) .map-list{scrollbar-width:thin;scrollbar-color:#CFD3D8 transparent}
:where(:root[data-page="financials-report"]) .map-row{display:flex;align-items:center;gap:8px;padding:0 14px;height:32px;font-size:12.5px;
         color:var(--nx-ink);border-bottom:1px solid var(--nx-line);cursor:pointer;white-space:nowrap}
:where(:root[data-page="financials-report"]) .map-row:last-child{border-bottom:none}
:where(:root[data-page="financials-report"]) .map-row:hover .map-name{color:var(--brand);font-weight:700}
:where(:root[data-page="financials-report"]) .map-row.hi .map-name{color:var(--brand);font-weight:700}
:where(:root[data-page="financials-report"]) .map-row.sel{background:var(--open-bg)}
:where(:root[data-page="financials-report"]) .map-row.sel .map-name{color:var(--brand);font-weight:700}
:where(:root[data-page="financials-report"]) .map-name{overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="financials-report"]) .map-row .map-pad{flex:0 0 auto}
/* The triangle that folds a heading away. Rows with nothing under them keep
   the space so every name still starts in the same place. */
:where(:root[data-page="financials-report"]) .map-car{flex:0 0 auto;width:16px;height:16px;padding:0;margin:0;border:none;background:none;
         color:var(--nx-ink3);cursor:pointer;border-radius:4px;font-family:inherit;
         display:inline-flex;align-items:center;justify-content:center}
:where(:root[data-page="financials-report"]) .map-car svg{width:9px;height:9px;transition:transform .12s ease}
:where(:root[data-page="financials-report"]) .map-car:hover{background:var(--nx-rail);color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .map-car.shut svg{transform:rotate(-90deg)}
:where(:root[data-page="financials-report"]) .map-car.none{visibility:hidden;cursor:default}
/* How deep the row sits, said outright rather than left to the eye. */
:where(:root[data-page="financials-report"]) .map-lvl{flex:0 0 auto;min-width:22px;text-align:center;font-size:9.5px;font-weight:800;
         letter-spacing:.03em;border-radius:6px;padding:1px 5px;
         background:var(--nx-rail);color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .map-row.d0 .map-lvl{background:var(--brand);color:#fff}
:where(:root[data-page="financials-report"]) .map-row.d1 .map-lvl{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="financials-report"]) .map-row.d0 .map-name{font-weight:800}
:where(:root[data-page="financials-report"]) .map-row.d1 .map-name{font-weight:700}
/* One guide line per step of the indent, so the level can be counted. */
:where(:root[data-page="financials-report"]) .map-gd{flex:0 0 auto;display:inline-block;width:16px;height:32px;border-left:1px solid var(--nx-line)}
/* How many rows are folded away inside a closed heading. */
:where(:root[data-page="financials-report"]) .map-inn{flex:0 0 auto;font-size:9.5px;font-weight:800;border-radius:6px;padding:1px 5px;
         background:var(--brand-lt);color:var(--brand)}
/* Expand all / Collapse all, beside the filter switch. */
:where(:root[data-page="financials-report"]) .map-xc{display:flex;gap:6px}
:where(:root[data-page="financials-report"]) .map-btn.sm{padding:8px 12px}
:where(:root[data-page="financials-report"]) .map-kindtag{flex:0 0 auto;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
             border-radius:6px;padding:1px 6px;background:var(--nx-rail);color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .map-kindtag.line{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="financials-report"]) .map-kindtag.warn{background:var(--warn-bg);color:var(--warn)}
:where(:root[data-page="financials-report"]) .map-ref.warn{color:var(--warn);font-weight:700}
/* The headings printed above a line in the Needs setting up view. There for
   reading, not for working on, so they sit back. */
:where(:root[data-page="financials-report"]) .map-row.ctx{background:transparent;color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .map-row.ctx .map-name{color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .map-row.ctx:hover .map-name{color:var(--nx-ink2);font-weight:400}
:where(:root[data-page="financials-report"]) .map-same{margin-top:14px;padding-top:14px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="financials-report"]) .map-same .map-btn{width:100%;padding:8px 10px}
:where(:root[data-page="financials-report"]) .map-same h4{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.07em;
             text-transform:uppercase;color:var(--nx-ink2)}
/* The tick list of rows or blocks to set. Drawn by hand rather than with the
   browser's own boxes, so it reads like the rest of the site. */
:where(:root[data-page="financials-report"]) .map-picks{margin:10px 0;border:1px solid var(--nx-line);border-radius:var(--nx-radius-sm);
           overflow:hidden;max-height:220px;overflow-y:auto}
:where(:root[data-page="financials-report"]) .map-pick{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;cursor:pointer;
          background:var(--nx-surface);border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="financials-report"]) .map-pick:last-child{border-bottom:none}
:where(:root[data-page="financials-report"]) .map-pick:hover{background:var(--open-bg)}
:where(:root[data-page="financials-report"]) .map-pick.still{cursor:default}
:where(:root[data-page="financials-report"]) .map-pick.still:hover{background:transparent}
:where(:root[data-page="financials-report"]) .map-tick{flex:0 0 auto;width:14px;height:14px;margin-top:2px;border:1px solid var(--nx-line2);
          border-radius:4px;background:var(--nx-surface);position:relative}
:where(:root[data-page="financials-report"]) .map-pick.on .map-tick{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="financials-report"]) .map-pick.on .map-tick::after{content:"";position:absolute;left:4px;top:1px;width:3px;height:7px;
          border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
:where(:root[data-page="financials-report"]) .map-pick-t{display:flex;flex-direction:column;gap:2px;min-width:0}
:where(:root[data-page="financials-report"]) .map-pick-p{font-size:12px;color:var(--nx-ink);line-height:1.35;word-break:break-word}
:where(:root[data-page="financials-report"]) .map-pick-n{font-size:11px;color:var(--nx-ink3);line-height:1.35}
:where(:root[data-page="financials-report"]) .map-pick-n.warn{color:var(--warn);font-weight:700}
/* The switch that keeps every copy of a name together. It sits on its own
   rather than in a list, so it does not read as one choice among many. */
:where(:root[data-page="financials-report"]) .map-mirror{border:1px solid var(--nx-line2);border-radius:var(--nx-radius-sm);margin-top:10px}
:where(:root[data-page="financials-report"]) .map-mirror.on{border-color:var(--brand);background:var(--brand-lt)}
:where(:root[data-page="financials-report"]) .map-mirror.on:hover{background:var(--brand-lt)}
:where(:root[data-page="financials-report"]) .map-mirror .map-pick-p{font-weight:700}
/* How many times this name is on the page. Only drawn when it is more than once. */
:where(:root[data-page="financials-report"]) .map-dup{flex:0 0 auto;font-size:9.5px;font-weight:800;border-radius:6px;padding:1px 5px;
         background:var(--nx-rail);color:var(--nx-ink3)}
/* A row that has been shut or hidden - one chip per level, so which setting
   it is on can be read off the list without picking the row. */
:where(:root[data-page="financials-report"]) .map-lock{flex:0 0 auto;font-size:9.5px;font-weight:800;border-radius:6px;padding:1px 5px;
          background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
:where(:root[data-page="financials-report"]) .map-lock.hard{background:var(--down-bg);color:var(--down);border-color:var(--down)}
/* Who can SEE it reads as the heavier of the two, because a row nobody can
   see is gone whatever its open setting says. */
:where(:root[data-page="financials-report"]) .map-see{flex:0 0 auto;font-size:9.5px;font-weight:800;border-radius:6px;padding:1px 5px;
         background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
:where(:root[data-page="financials-report"]) .map-see.hard{background:var(--nx-ink);color:var(--nx-on-brand);border-color:var(--nx-ink)}
/* The gentlest of the settings - Regionals see it too - so it reads quieter
   than the CareRite-Services-and-Owners chip beside it. */
:where(:root[data-page="financials-report"]) .map-lock.soft,:where(:root[data-page="financials-report"]) .map-see.soft{background:var(--nx-rail);color:var(--nx-ink3);
                             border-color:var(--nx-line)}
/* In dark the ink is near-white, so white writing on it disappears. */
:root[data-theme="dark"]:where([data-page="financials-report"]) .map-see.hard{color:var(--nx-bg)}
/* A row set to arrive already opened. Green, because nothing is being kept
   back - it is the one chip that says MORE is shown, not less. */
:where(:root[data-page="financials-report"]) .map-open{flex:0 0 auto;font-size:9.5px;font-weight:800;border-radius:6px;padding:1px 5px;
          background:var(--brand-lt);color:var(--brand);border:1px solid var(--brand)}
/* An inactive row - kept in the mapping, off the report. Struck through and
   greyed so it reads as switched off without picking it. */
:where(:root[data-page="financials-report"]) .map-row.off .map-name{color:var(--nx-ink3);text-decoration:line-through}
:where(:root[data-page="financials-report"]) .map-row.off .map-kindtag,:where(:root[data-page="financials-report"]) .map-row.off .map-ref{opacity:.55}
:where(:root[data-page="financials-report"]) .map-off{flex:0 0 auto;font-size:9.5px;font-weight:800;border-radius:6px;padding:1px 5px;
         background:var(--nx-rail);color:var(--nx-ink3);border:1px dashed var(--nx-line2)}
:where(:root[data-page="financials-report"]) .map-ref{margin-left:auto;flex:0 0 auto;font-size:11px;color:var(--nx-ink3);
         overflow:hidden;text-overflow:ellipsis;max-width:44%}
:where(:root[data-page="financials-report"]) .map-edit{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:16px;
          align-self:start;position:sticky;top:14px;max-height:max(380px, calc(100vh - 320px));overflow:auto}
:where(:root[data-page="financials-report"]) .map-edit h3{margin:0 0 12px;font-size:11px;color:var(--nx-ink2);font-weight:800;letter-spacing:.07em;text-transform:uppercase}
:where(:root[data-page="financials-report"]) .map-edit label{display:block;font-size:11px;font-weight:700;color:var(--nx-ink3);margin:12px 0 5px;
                letter-spacing:.04em;text-transform:uppercase}
:where(:root[data-page="financials-report"]) .map-edit input[type=text],:where(:root[data-page="financials-report"]) .map-edit select{width:100%;padding:9px 11px;border:1px solid var(--nx-line2);
       border-radius:var(--nx-radius-sm);background:var(--nx-surface);color:var(--nx-ink);font-size:13px;
       font-family:inherit;box-sizing:border-box}
:where(:root[data-page="financials-report"]) .map-edit input[type=text]:focus,:where(:root[data-page="financials-report"]) .map-edit select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="financials-report"]) .map-edit .hint{font-size:11px;color:var(--nx-ink3);margin-top:5px;white-space:normal;line-height:1.45}
:where(:root[data-page="financials-report"]) .map-edit .hint.hint-warn{color:var(--warn);font-weight:700}
:where(:root[data-page="financials-report"]) .map-moves{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}
:where(:root[data-page="financials-report"]) .map-btn{padding:8px 0;border:1px solid var(--nx-line2);border-radius:var(--nx-radius-sm);
         background:var(--nx-surface);color:var(--nx-ink2);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
:where(:root[data-page="financials-report"]) .map-btn:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="financials-report"]) .map-btn:disabled{opacity:.4;cursor:default}
:where(:root[data-page="financials-report"]) .map-btn.wide{grid-column:span 2}
:where(:root[data-page="financials-report"]) .map-btn.danger:hover:not(:disabled){border-color:var(--down);color:var(--down)}
:where(:root[data-page="financials-report"]) .map-empty{padding:26px 14px;text-align:center;color:var(--nx-ink3);font-size:12.5px;line-height:1.5}
:where(:root[data-page="financials-report"]) .map-grp-accts{margin-top:12px;padding:10px 12px;border:1px solid var(--nx-line2);border-radius:var(--nx-radius-sm);background:var(--nx-surface)}
:where(:root[data-page="financials-report"]) .map-grp-accts:empty{display:none}
:where(:root[data-page="financials-report"]) .mga-head{font-size:12.5px;font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .mga-n{font-weight:500;color:var(--nx-ink3);margin-left:4px}
:where(:root[data-page="financials-report"]) .mga-sub{font-size:11px;color:var(--nx-ink3);margin:3px 0 8px;line-height:1.45}
:where(:root[data-page="financials-report"]) .mga-list{list-style:none;margin:0;padding:0;max-height:220px;overflow:auto}
:where(:root[data-page="financials-report"]) .mga-list li{font-size:12px;padding:3px 0;border-top:1px solid var(--nx-line2);display:flex;align-items:center;gap:6px}
:where(:root[data-page="financials-report"]) .mga-list li:first-child{border-top:0}
:where(:root[data-page="financials-report"]) .mga-a{font-variant-numeric:tabular-nums;font-weight:600;color:var(--nx-ink2)}
:where(:root[data-page="financials-report"]) .mga-t{color:var(--nx-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="financials-report"]) .mga-tag.add{font-size:10px;padding:1px 6px;border-radius:9px;background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="financials-report"]) .mga-x{margin-left:auto;border:0;background:none;color:var(--nx-ink3);font-size:15px;cursor:pointer;line-height:1;padding:0 4px}
:where(:root[data-page="financials-report"]) .mga-x:hover{color:var(--down)}
:where(:root[data-page="financials-report"]) .mga-gone{font-size:11.5px;color:var(--warn);margin-top:8px;line-height:1.5}
:where(:root[data-page="financials-report"]) .mga-back{border:0;background:none;color:var(--brand);cursor:pointer;font-size:11px;padding:0 2px;font-family:inherit}
:where(:root[data-page="financials-report"]) .mga-addrow{display:flex;gap:6px;margin-top:10px}
:where(:root[data-page="financials-report"]) .mga-addrow input{flex:1}

/* The unmapped-accounts pop-up, opened from the Mapping tab. */
:where(:root[data-page="financials-report"]) .um-tools{display:flex;align-items:center;gap:10px;margin:14px 0 10px;position:sticky;top:0;
          background:var(--nx-surface);z-index:2;padding-top:2px}
:where(:root[data-page="financials-report"]) .um-tools input{flex:1 1 auto;padding:8px 11px;border:1px solid var(--nx-line2);
       border-radius:var(--nx-radius-sm);background:var(--nx-surface);color:var(--nx-ink);
       font-size:13px;font-family:inherit;box-sizing:border-box}
:where(:root[data-page="financials-report"]) .um-tools input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="financials-report"]) .um-count{font-size:11.5px;color:var(--nx-ink3);white-space:nowrap}
:where(:root[data-page="financials-report"]) .um-table{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
:where(:root[data-page="financials-report"]) .um-table col.c-no{width:104px}
:where(:root[data-page="financials-report"]) .um-table col.c-where{width:150px}
:where(:root[data-page="financials-report"]) .um-table col.c-when{width:112px}
:where(:root[data-page="financials-report"]) .um-table col.c-amt{width:120px}
:where(:root[data-page="financials-report"]) .um-table th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.05em;
       text-transform:uppercase;color:var(--nx-ink3);padding:7px 8px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="financials-report"]) .um-table th.num,:where(:root[data-page="financials-report"]) .um-table td.num{text-align:right;font-variant-numeric:tabular-nums}
:where(:root[data-page="financials-report"]) .um-table td{padding:8px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink);
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="financials-report"]) .um-table tbody tr.um-line{cursor:pointer}
:where(:root[data-page="financials-report"]) .um-table tbody tr.um-line:hover td{background:var(--open-bg)}
:where(:root[data-page="financials-report"]) .um-table tbody tr.um-line.on td{background:var(--open-bg);font-weight:700}
:where(:root[data-page="financials-report"]) .um-no{font-weight:700;white-space:nowrap}
:where(:root[data-page="financials-report"]) .um-detail td{white-space:normal;background:var(--nx-elev);padding:10px 8px 12px}
:where(:root[data-page="financials-report"]) .um-m{display:inline-flex;align-items:baseline;gap:6px;margin:0 14px 6px 0;font-size:12px;
      color:var(--nx-ink);font-variant-numeric:tabular-nums}
:where(:root[data-page="financials-report"]) .um-m b{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .um-fac{margin:0 0 10px}
:where(:root[data-page="financials-report"]) .um-fac>b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.04em;
          text-transform:uppercase;color:var(--nx-ink2);margin:0 0 4px}
:where(:root[data-page="financials-report"]) .um-copy{display:inline-block;width:auto;padding:6px 12px;margin-top:4px}
:where(:root[data-page="financials-report"]) .um-copy.um-copied{border-color:var(--brand);color:var(--brand)}

/* The mapping-sets pop-up, opened from the Admin page. */
:where(:root[data-page="financials-report"]) .pop-card.ms-card{width:min(880px,96vw)}
:where(:root[data-page="financials-report"]) .ms-wrap{display:grid;grid-template-columns:270px 1fr;gap:0;min-height:340px}
:where(:root[data-page="financials-report"]) .ms-left{border-right:1px solid var(--nx-line);padding:0 14px 0 0;display:flex;
         flex-direction:column;min-height:0}
:where(:root[data-page="financials-report"]) .ms-right{padding:0 0 0 16px;min-height:0;display:flex;flex-direction:column}
:where(:root[data-page="financials-report"]) .ms-h{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
      color:var(--nx-ink3);margin:12px 0 7px}
:where(:root[data-page="financials-report"]) .ms-list{flex:1 1 auto;overflow:auto;min-height:0;margin:0 -4px}
:where(:root[data-page="financials-report"]) .ms-it{display:block;width:100%;text-align:left;border:1px solid transparent;background:none;
       padding:8px 10px;border-radius:var(--nx-radius-sm);cursor:pointer;font:inherit;
       color:var(--nx-ink);margin-bottom:2px}
:where(:root[data-page="financials-report"]) .ms-it:hover{background:var(--open-bg)}
:where(:root[data-page="financials-report"]) .ms-it.on{background:var(--brand-lt);border-color:var(--brand);font-weight:700}
:where(:root[data-page="financials-report"]) .ms-it .n{display:block;font-size:13px;line-height:1.3}
:where(:root[data-page="financials-report"]) .ms-it .s{display:block;font-size:11px;color:var(--nx-ink3);margin-top:2px;font-weight:400}
:where(:root[data-page="financials-report"]) .ms-it.on .s{color:var(--nx-ink2)}
:where(:root[data-page="financials-report"]) .ms-base{display:inline-block;margin-left:6px;font-size:9.5px;font-weight:800;letter-spacing:.04em;
         text-transform:uppercase;color:var(--brand);border:1px solid var(--brand);
         border-radius:99px;padding:1px 6px;vertical-align:1px}
:where(:root[data-page="financials-report"]) .ms-add{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--nx-line)}
:where(:root[data-page="financials-report"]) .ms-add input,:where(:root[data-page="financials-report"]) .ms-add select{flex:1 1 auto;min-width:0;padding:7px 9px;border:1px solid var(--nx-line2);
       border-radius:var(--nx-radius-sm);background:var(--nx-surface);color:var(--nx-ink);
       font-size:12.5px;font-family:inherit;box-sizing:border-box}
:where(:root[data-page="financials-report"]) .ms-add input:focus,:where(:root[data-page="financials-report"]) .ms-add select:focus{outline:none;border-color:var(--brand);
       box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="financials-report"]) .ms-name{display:flex;gap:6px;align-items:center;margin:12px 0 4px}
:where(:root[data-page="financials-report"]) .ms-name input{flex:1 1 auto;min-width:0;padding:8px 10px;border:1px solid var(--nx-line2);
       border-radius:var(--nx-radius-sm);background:var(--nx-surface);color:var(--nx-ink);
       font-size:13.5px;font-weight:700;font-family:inherit;box-sizing:border-box}
:where(:root[data-page="financials-report"]) .ms-name input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="financials-report"]) .ms-pages{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
:where(:root[data-page="financials-report"]) .ms-pg{font-size:11px;color:var(--nx-ink2);background:var(--nx-elev);border:1px solid var(--nx-line);
       border-radius:99px;padding:2px 9px}
:where(:root[data-page="financials-report"]) .ms-pg.none{color:var(--down);border-color:var(--down)}
:where(:root[data-page="financials-report"]) .ms-facs{flex:1 1 auto;overflow:auto;min-height:120px;border:1px solid var(--nx-line);
         border-radius:var(--nx-radius-sm);padding:4px}
/* One block per company, with a tick at the top that takes the whole
   company on or off in one go. */
:where(:root[data-page="financials-report"]) .ms-co{margin-bottom:6px}
:where(:root[data-page="financials-report"]) .ms-co:last-child{margin-bottom:0}
:where(:root[data-page="financials-report"]) .ms-co-h{background:var(--nx-elev);border:1px solid var(--nx-line);font-weight:700;
         position:sticky;top:0;z-index:1}
:where(:root[data-page="financials-report"]) .ms-co-h:hover{background:var(--open-bg)}
:where(:root[data-page="financials-report"]) .ms-co-h .o{font-weight:400}
:where(:root[data-page="financials-report"]) .ms-co-f{padding-left:20px}
:where(:root[data-page="financials-report"]) .ms-f{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--nx-radius-sm);
      cursor:pointer;font-size:12.5px;color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .ms-f:hover{background:var(--open-bg)}
:where(:root[data-page="financials-report"]) .ms-f input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;flex:none}
:where(:root[data-page="financials-report"]) .ms-f .o{margin-left:auto;font-size:11px;color:var(--nx-ink3);white-space:nowrap}
:where(:root[data-page="financials-report"]) .ms-act{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;
        border-top:1px solid var(--nx-line);flex:none}
/* The card is already a fixed height, so this card's body must not grow with
   the list of facilities - if it does, Save falls off the bottom and has to
   be scrolled to. The list scrolls on its own instead and Save stays put. */
:where(:root[data-page="financials-report"]) #msPop .pop-body{overflow:hidden;display:flex;flex-direction:column;min-height:0}
:where(:root[data-page="financials-report"]) #msPop .ms-wrap{flex:1 1 auto;min-height:0}
:where(:root[data-page="financials-report"]) #msPop .ms-left,:where(:root[data-page="financials-report"]) #msPop .ms-right{min-height:0;overflow:hidden}
:where(:root[data-page="financials-report"]) #msPop .ms-facs{min-height:0}
:where(:root[data-page="financials-report"]) .ms-act .grow{margin-left:auto}
:where(:root[data-page="financials-report"]) .ms-msg{font-size:12px;color:var(--nx-ink2)}
:where(:root[data-page="financials-report"]) .ms-msg.err{color:var(--down)}
:where(:root[data-page="financials-report"]) .ms-msg.ok{color:var(--brand)}
:where(:root[data-page="financials-report"]) .ms-none{padding:22px 12px;text-align:center;color:var(--nx-ink3);font-size:12.5px;line-height:1.5}
@media (max-width:720px){:where(:root[data-page="financials-report"]) .ms-wrap{grid-template-columns:1fr}
  :where(:root[data-page="financials-report"]) .ms-left{border-right:none;border-bottom:1px solid var(--nx-line);padding:0 0 12px}
  :where(:root[data-page="financials-report"]) .ms-right{padding:0}
  /* Narrow: the two halves stack, so the body scrolls again. */
  :where(:root[data-page="financials-report"]) #msPop .pop-body{overflow:auto;display:block}
  :where(:root[data-page="financials-report"]) #msPop .ms-left,:where(:root[data-page="financials-report"]) #msPop .ms-right{overflow:visible}}

/* The fringe-allocation pop-up. Same two-column shape as the mapping sets
   card, so it reads the same way: what you are editing on the left, what it
   is made of on the right. */
:where(:root[data-page="financials-report"]) #fgPop .pop-body{overflow:hidden;display:flex;flex-direction:column;min-height:0}
:where(:root[data-page="financials-report"]) #fgPop .ms-wrap{flex:1 1 auto;min-height:0}
:where(:root[data-page="financials-report"]) #fgPop .ms-left,:where(:root[data-page="financials-report"]) #fgPop .ms-right{min-height:0;overflow:hidden}
:where(:root[data-page="financials-report"]) #fgPop .ms-facs{min-height:0}
:where(:root[data-page="financials-report"]) .fg-set{margin-left:8px;font-size:11.5px;font-weight:700;color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .fg-find{flex:none;margin:0 0 8px}
:where(:root[data-page="financials-report"]) .fg-find input{width:100%;padding:8px 10px;border:1px solid var(--nx-line2);
       border-radius:var(--nx-radius-sm);background:var(--nx-surface);color:var(--nx-ink);
       font-size:12.5px;font-family:inherit;box-sizing:border-box}
:where(:root[data-page="financials-report"]) .fg-find input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="financials-report"]) .fg-who{font-size:11.5px;color:var(--nx-ink3);line-height:1.5;margin:2px 0 10px}
:where(:root[data-page="financials-report"]) .fg-base{background:var(--accent-blue-lt);border-color:var(--accent-blue)}
:where(:root[data-page="financials-report"]) .fg-n{margin-left:auto;font-size:11px;color:var(--nx-ink3);white-space:nowrap}
/* What the recipe is not covering. Sits under the note at the top of the
   pop-up, above both columns, because it is about the whole recipe and not
   about whichever department happens to be open. */
:where(:root[data-page="financials-report"]) .fg-warn{margin:0 0 16px;padding:10px 12px;border-radius:var(--nx-radius-sm);
       background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn);
       font-size:12px;line-height:1.55;max-height:32vh;overflow:auto}
/* The head keeps its own height whatever the banner says, so a long list of
   groups scrolls inside the banner instead of squeezing the columns away. */
:where(:root[data-page="financials-report"]) #fgPop .pop-head{flex:none}
:where(:root[data-page="financials-report"]) .fg-warn.ok{background:var(--up-bg);border-color:var(--up);color:var(--up)}
:where(:root[data-page="financials-report"]) .fg-warn b{font-weight:800}
:where(:root[data-page="financials-report"]) .fg-wrow{margin-top:8px}
:where(:root[data-page="financials-report"]) .fg-wrow:first-child{margin-top:0}
:where(:root[data-page="financials-report"]) .fg-said{margin-top:8px;opacity:.85;font-size:11.5px}
:where(:root[data-page="financials-report"]) .fg-g{display:inline-block;margin:4px 4px 0 0;padding:2px 8px;border-radius:999px;
       background:var(--nx-surface);border:1px solid var(--warn-line);color:var(--warn);
       font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
:where(:root[data-page="financials-report"]) .fg-g:hover{border-color:var(--warn);text-decoration:underline}
:where(:root[data-page="financials-report"]) .fg-on{font-size:11px;font-weight:400;opacity:.85}
@media (max-width:720px){
  :where(:root[data-page="financials-report"]) #fgPop .pop-body{overflow:auto;display:block}
  :where(:root[data-page="financials-report"]) #fgPop .ms-left,:where(:root[data-page="financials-report"]) #fgPop .ms-right{overflow:visible}}
html.shell-scoped:where([data-page="financials-report"]) #mapPane{flex:1 1 auto;min-height:0;overflow:hidden}
html.shell-scoped:where([data-page="financials-report"]) .map-wrap{flex:1 1 auto;min-height:0}
html.shell-scoped:where([data-page="financials-report"]) .map-list{height:100%}
html.shell-scoped:where([data-page="financials-report"]) .map-edit{max-height:100%}
html.shell-scoped:where([data-page="financials-report"]) #admPane{flex:1 1 auto;min-height:0;overflow:auto}

/* -- Fitted to the dashboard frame ----------------------------------------
   Inside the dashboard the page fills the frame exactly and never scrolls as
   a whole. Only the table moves: down for more lines, sideways for more
   months. The class goes on <html> as well as <body> so the page itself can
   be pinned. */
html.shell-scoped:where([data-page="financials-report"]),html.shell-scoped:where([data-page="financials-report"]) body{height:100%;overflow:hidden}
html.shell-scoped:where([data-page="financials-report"]) .shell{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
/* The SNF / AL / IL picker - one row per location, its wing on the right. */
:where(:root[data-page="financials-report"]) .wing-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px}
:where(:root[data-page="financials-report"]) .wing-row+.wing-row{margin-top:4px}
:where(:root[data-page="financials-report"]) .wing-row:hover{background:var(--row-hover,rgba(0,0,0,.04))}
:where(:root[data-page="financials-report"]) .wing-nm{flex:1 1 auto;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="financials-report"]) .wing-id{flex:0 0 auto;font-size:11px;opacity:.6}
:where(:root[data-page="financials-report"]) .wing-pick{flex:0 0 auto;display:flex;gap:4px}
:where(:root[data-page="financials-report"]) .wing-pick button{border:1px solid var(--line,#d8dbe0);background:transparent;color:inherit;
  font:inherit;font-size:11px;line-height:1;padding:5px 8px;border-radius:6px;cursor:pointer}
:where(:root[data-page="financials-report"]) .wing-pick button.on{background:var(--blue,#018B46);border-color:var(--blue,#018B46);color:#fff}
html.shell-scoped:where([data-page="financials-report"]) .wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:20px 22px}
html.shell-scoped:where([data-page="financials-report"]) .pagehead{display:none}
html.shell-scoped:where([data-page="financials-report"]) #msg,
html.shell-scoped:where([data-page="financials-report"]) #gapNote,
html.shell-scoped:where([data-page="financials-report"]) #balNote,
html.shell-scoped:where([data-page="financials-report"]) .tiles{flex:0 0 auto}
/* Nothing picked means every facility, a default rather than a choice, so the
   report waits and says so in the middle of the empty page. */
:where(:root[data-page="financials-report"]) .pickfac{display:none;align-items:center;justify-content:center;min-height:50vh;
  font-size:14px;color:var(--nx-ink3)}
:where(:root[data-page="financials-report"]) .pickfac.show{display:flex}
html.shell-scoped:where([data-page="financials-report"]) .pickfac{flex:1 1 auto;min-height:0}
html.shell-scoped:where([data-page="financials-report"]) #report{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
html.shell-scoped:where([data-page="financials-report"]) #panes{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
/* As tall as its rows and no taller - a nine-row census tab is a nine-row
   box, not a screen of empty white. It grows as rows are opened and stops at
   the frame, where the bottom edge and the scrollbar along it stay on screen
   and the table scrolls inside itself instead. */
html.shell-scoped:where([data-page="financials-report"]) #panes>.fin-panel{flex:0 1 auto;min-height:0;max-height:100%;margin-bottom:0}

/* ── Show me around ─────────────────────────────────────────────────────────
   The dim is not a sheet over the page - it is the SHADOW of the ring, thrown
   9999px in every direction. That way there is only ever one box to move, the
   hole is always exactly where the ring is, and a box-shadow catches no mouse
   events, so the page under it stays live and the thing being described can
   be tried while it is on screen. A step with nothing to point at parks the
   ring in the middle at no size, which leaves the shadow covering the lot. */
:where(:root[data-page="financials-report"]) .tour-hole{position:fixed;z-index:1000;pointer-events:none;border-radius:12px;
  box-shadow:0 0 0 9999px rgba(11,15,25,.52),0 0 0 2px var(--brand) inset}
/* The glide is for MOVING BETWEEN STEPS and nothing else. It is put on for
   the length of the move and taken straight off again: left on, it would
   also be there while the page is being scrolled, and the ring would trail a
   fifth of a second behind the row it is meant to be drawn round. */
:where(:root[data-page="financials-report"]) .tour-hole.move,:where(:root[data-page="financials-report"]) .tour-card.move{transition:top .22s ease,left .22s ease,width .22s ease,height .22s ease}
:root[data-theme="dark"]:where([data-page="financials-report"]) .tour-hole{box-shadow:0 0 0 9999px rgba(0,0,0,.62),0 0 0 2px var(--brand) inset}
:where(:root[data-page="financials-report"]) .tour-hole.blank{box-shadow:0 0 0 9999px rgba(11,15,25,.52)}
:root[data-theme="dark"]:where([data-page="financials-report"]) .tour-hole.blank{box-shadow:0 0 0 9999px rgba(0,0,0,.62)}

:where(:root[data-page="financials-report"]) .tour-card{position:fixed;z-index:1002;width:342px;max-width:calc(100vw - 32px);
  background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:var(--nx-radius);
  box-shadow:0 18px 44px rgba(16,24,40,.24);padding:16px 18px 14px}
:where(:root[data-page="financials-report"]) .tour-card h4{margin:0 0 7px;font-size:14px;font-weight:800;color:var(--nx-ink)}
:where(:root[data-page="financials-report"]) .tour-card p{margin:0;font-size:12.5px;line-height:1.62;color:var(--nx-ink2)}
:where(:root[data-page="financials-report"]) .tour-foot{display:flex;align-items:center;gap:8px;margin-top:15px}
:where(:root[data-page="financials-report"]) .tour-count{font-size:11px;font-weight:700;color:var(--nx-ink3);letter-spacing:.04em}
:where(:root[data-page="financials-report"]) .tour-foot .tour-grow{flex:1 1 auto}
:where(:root[data-page="financials-report"]) .tour-skip{border:none;background:none;color:var(--nx-ink3);font-family:inherit;
  font-size:12px;font-weight:600;cursor:pointer;padding:6px 2px}
:where(:root[data-page="financials-report"]) .tour-skip:hover{color:var(--nx-ink2)}

/* The dot is the whole of the invitation. It goes the first time the walk is
   seen through to the end and does not come back. */
:where(:root[data-page="financials-report"]) #tourBtn{position:relative}
:where(:root[data-page="financials-report"]) #tourBtn.tour-new::after{content:'';position:absolute;top:3px;right:3px;width:6px;height:6px;
  border-radius:50%;background:var(--brand)}
@media print{:where(:root[data-page="financials-report"]) .tour-hole,:where(:root[data-page="financials-report"]) .tour-card{display:none !important}}


/* ----------------------------------------------------------------------------
 * 15.37  Payroll -- Department Totals
 * payroll/department-totals.php, data-page="department-totals"
 * -------------------------------------------------------------------------- */
/* ==== Nexus theme + components (from payroll-dashboard) ==== */

/* ── Nexus theme tokens (layered over portal.css; brand stays CareRite green) ── */
:root:where([data-page="department-totals"]){
  --brand:var(--blue);        /* CareRite green from portal.css */
  --brand-lt:var(--blue-lt);
  /* Remap legacy portal tokens (used throughout the DT page CSS) onto the
     Nexus scale so the whole page -- including the inlined DT styles -- follows
     the theme and flips in dark mode. */
  --bg:var(--nx-bg);
  --bg2:var(--nx-rail);
  --surface:var(--nx-surface);
  --surface2:#F3F4F6;
  --border:var(--nx-line);
  --border2:var(--nx-line2);
  --text:var(--nx-ink);
  --text2:var(--nx-ink2);
  --text3:var(--nx-ink3);
  color-scheme:light;
}
/* ── Dark theme ──────────────────────────────────────────────────────── */
:root[data-theme="dark"]:where([data-page="department-totals"]){
  --nx-up:#34D27B;--nx-up-bg:#16301F;
  --nx-down:#F4756B;--nx-down-bg:#3A1E1C;
  --brand:#1FB866;            /* lift brand green for contrast on dark */
  --brand-lt:#13361F;
  --nx-attn-bg:var(--amber-lt);--nx-attn-line:#4A411C;
  /* Legacy portal tokens -> dark, so the inlined DT page CSS flips correctly. */
  --bg:var(--nx-bg);
  --bg2:var(--nx-surface);
  --surface:var(--nx-surface);
  --surface2:var(--nx-hover);
  --border:var(--nx-line);
  --border2:var(--nx-line2);
  --text:var(--nx-ink);
  --text2:var(--nx-ink2);
  --text3:var(--nx-ink3);
  --blue:#1FB866;--blue-dk:#13361F;--blue-lt:#15301F;
  --green:#34D27B;--green-lt:#16301F;
  --amber:#E0A93B;--amber-lt:#2A2510;--amber-text:#E8C25A;
  --red:#F4756B;--red-lt:#3A1E1C;--red-text:#F4756B;
  color-scheme:dark;
}
:where(:root[data-page="department-totals"]) *, *:where([data-page="department-totals"]){box-sizing:border-box}
html:where([data-page="department-totals"]),:where(:root[data-page="department-totals"]) body{height:100%;margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px}
:where(:root[data-page="department-totals"]) button{font-family:inherit}

/* App frame: a rounded white surface floating on the grey canvas */
:where(:root[data-page="department-totals"]) .nx-app{display:grid;grid-template-columns:248px 1fr;min-height:calc(100vh - 24px);max-width:1760px;margin:12px;background:var(--nx-surface);border-radius:18px;overflow:hidden;box-shadow:0 16px 48px rgba(27,29,41,.10);border:1px solid var(--nx-line)}
@media(min-width:1784px){:where(:root[data-page="department-totals"]) .nx-app{margin:12px auto}}
@media(max-width:980px){:where(:root[data-page="department-totals"]) .nx-app{grid-template-columns:1fr;margin:0;border-radius:0;border:none;min-height:100vh}}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
:where(:root[data-page="department-totals"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px}
@media(max-width:980px){:where(:root[data-page="department-totals"]) .nx-rail{display:none}}
:where(:root[data-page="department-totals"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="department-totals"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#04a85a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
:where(:root[data-page="department-totals"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="department-totals"]) .nx-navsec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3);padding:14px 10px 6px}
:where(:root[data-page="department-totals"]) .nx-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--nx-ink2);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,color .12s}
:where(:root[data-page="department-totals"]) .nx-nav svg{width:17px;height:17px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="department-totals"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="department-totals"]) .nx-nav.active{background:var(--brand);color:#fff}
:where(:root[data-page="department-totals"]) .nx-nav.active svg{color:#fff}
:where(:root[data-page="department-totals"]) .nx-nav .nx-badge{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--nx-line2);color:var(--nx-ink2);border-radius:8px;padding:1px 7px}
:where(:root[data-page="department-totals"]) .nx-nav.active .nx-badge{background:rgba(255,255,255,.25);color:#fff}
:where(:root[data-page="department-totals"]) .nx-rail-foot{margin-top:auto;padding-top:14px}
:where(:root[data-page="department-totals"]) .nx-promo{background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:14px;padding:13px}
:where(:root[data-page="department-totals"]) .nx-promo-row{display:flex;align-items:center;gap:9px}
:where(:root[data-page="department-totals"]) .nx-promo-mark{width:30px;height:30px;border-radius:9px;background:var(--nx-elev);display:flex;align-items:center;justify-content:center}
:where(:root[data-page="department-totals"]) .nx-promo-mark svg{width:16px;height:16px;color:var(--nx-violet)}
:where(:root[data-page="department-totals"]) .nx-promo-t{font-size:12px;font-weight:700;line-height:1.2}
:where(:root[data-page="department-totals"]) .nx-promo-s{font-size:10.5px;color:var(--nx-ink2)}
:where(:root[data-page="department-totals"]) .nx-promo-btn{display:block;text-align:center;margin-top:10px;background:var(--brand);color:#fff;border:none;border-radius:9px;padding:8px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none}

/* ── Main column ─────────────────────────────────────────────────────── */
:where(:root[data-page="department-totals"]) .nx-main{display:flex;flex-direction:column;min-width:0}
:where(:root[data-page="department-totals"]) .nx-topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="department-totals"]) .nx-search{flex:1;max-width:340px;position:relative}
:where(:root[data-page="department-totals"]) .nx-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--nx-ink3)}
:where(:root[data-page="department-totals"]) .nx-search input{width:100%;border:1px solid var(--nx-line2);background:var(--nx-rail);border-radius:10px;padding:9px 12px 9px 34px;font-size:13px;font-family:inherit;color:var(--nx-ink)}
:where(:root[data-page="department-totals"]) .nx-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="department-totals"]) .nx-top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
:where(:root[data-page="department-totals"]) .nx-theme-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--nx-line2);background:var(--nx-elev);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2)}
:where(:root[data-page="department-totals"]) .nx-theme-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}

/* ── Insights lightbulb button + dropdown (top right) ─────────────────── */
:where(:root[data-page="department-totals"]) .dt-insights-menu{position:relative}
:where(:root[data-page="department-totals"]) .dt-insights-btn{position:relative;width:36px;height:36px;border-radius:10px;border:1px solid var(--nx-line2);background:var(--nx-elev);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2)}
:where(:root[data-page="department-totals"]) .dt-insights-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="department-totals"]) .dt-insights-btn svg{width:17px;height:17px}
:where(:root[data-page="department-totals"]) .dt-insights-btn .dt-insights-count{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#DC2626;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center}
/* When there are insights to read, light the bulb yellow instead of showing a red count. */
:where(:root[data-page="department-totals"]) .dt-insights-btn.has-insights{border-color:#E5B800;color:#E5B800}
:where(:root[data-page="department-totals"]) .dt-insights-btn.has-insights:hover{border-color:#E5B800;color:#E5B800}
:where(:root[data-page="department-totals"]) .dt-insights-btn.has-insights svg{fill:#FFF6D6}
:where(:root[data-page="department-totals"]) .dt-insights-pop{position:absolute;top:calc(100% + 8px);right:0;width:380px;max-width:calc(100vw - 32px);max-height:70vh;overflow-y:auto;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:14px;box-shadow:0 16px 44px rgba(16,18,26,.18);padding:12px;z-index:60;display:none}
:where(:root[data-page="department-totals"]) .dt-insights-pop.open{display:block}
:where(:root[data-page="department-totals"]) .dt-insights-pop-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:2px 4px 10px}
:where(:root[data-page="department-totals"]) .dt-insights-pop-title{font-size:13px;font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="department-totals"]) .dt-insights-pop-sub{font-size:11px;color:var(--nx-ink3)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-insights-btn{background:var(--nx-elev)}
:where(:root[data-page="department-totals"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="department-totals"]) .nx-theme-btn .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="department-totals"]) .nx-theme-btn .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="department-totals"]) .nx-theme-btn .nx-ic-moon{display:block}
:where(:root[data-page="department-totals"]) .nx-icon-btn{position:relative;width:36px;height:36px;border-radius:10px;border:1px solid var(--nx-line2);background:var(--nx-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2)}
:where(:root[data-page="department-totals"]) .nx-icon-btn:hover{border-color:var(--nx-line2);color:var(--nx-ink)}
:where(:root[data-page="department-totals"]) .nx-icon-btn svg{width:16px;height:16px}
:where(:root[data-page="department-totals"]) .nx-filter-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;background:var(--brand);color:#fff;font-size:9.5px;font-weight:700;line-height:16px;text-align:center;border-radius:8px;border:2px solid var(--nx-surface)}
:where(:root[data-page="department-totals"]) .nx-user{position:relative;display:flex;align-items:center}
:where(:root[data-page="department-totals"]) .nx-user-av-btn{padding:0;border:none;background:none;cursor:pointer;border-radius:50%;display:flex}
:where(:root[data-page="department-totals"]) .nx-user-av{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;text-transform:uppercase}
:where(:root[data-page="department-totals"]) .nx-user-av-btn:hover .nx-user-av,:where(:root[data-page="department-totals"]) .nx-user-av-btn:focus-visible .nx-user-av{box-shadow:0 0 0 3px var(--brand-lt);outline:none}
:where(:root[data-page="department-totals"]) .nx-user-av.lg{width:38px;height:38px;font-size:13px;flex:0 0 auto}
:where(:root[data-page="department-totals"]) .nx-user-pop{position:absolute;top:calc(100% + 9px);right:0;min-width:236px;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:14px;box-shadow:0 18px 44px rgba(20,22,28,.20);padding:7px;display:none;z-index:120}
:where(:root[data-page="department-totals"]) .nx-user-pop.open{display:block;animation:pdPop .16s ease}
:where(:root[data-page="department-totals"]) .nx-user-pop-id{display:flex;align-items:center;gap:11px;padding:9px 9px 11px}
:where(:root[data-page="department-totals"]) .nx-user-pop-meta{min-width:0;line-height:1.25}
:where(:root[data-page="department-totals"]) .nx-user-pop-name{display:block;font-size:13.5px;font-weight:700;color:var(--nx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="department-totals"]) .nx-user-pop-sub{display:block;font-size:11.5px;color:var(--nx-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="department-totals"]) .nx-user-pop-sep{height:1px;background:var(--nx-line);margin:2px 4px 6px}
:where(:root[data-page="department-totals"]) .nx-user-pop-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 10px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:#6B7280;text-align:left;text-decoration:none}
:where(:root[data-page="department-totals"]) .nx-user-pop-item svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="department-totals"]) .nx-user-pop-item:hover{background:var(--nx-hover)}
:where(:root[data-page="department-totals"]) .nx-user-pop-item.danger{color:#D4453B}
:where(:root[data-page="department-totals"]) .nx-user-pop-item.danger svg{color:#D4453B}

:where(:root[data-page="department-totals"]) .nx-scroll{flex:1;overflow-y:auto;padding:20px 22px 28px}
/* Scrollbar space is always reserved via the 10px webkit track (no layout
   shift). The thumb is invisible until .sb-show is added by JS on right-edge
   hover. NOTE: do NOT set scrollbar-width here — in modern Chrome that disables
   the ::-webkit-scrollbar custom styling and forces a default grey bar. */
:where(:root[data-page="department-totals"]) .nx-scroll::-webkit-scrollbar{width:10px;height:10px;background:transparent}
:where(:root[data-page="department-totals"]) .nx-scroll::-webkit-scrollbar-track{background:transparent}
:where(:root[data-page="department-totals"]) .nx-scroll::-webkit-scrollbar-thumb{background:transparent;border-radius:8px;border:3px solid transparent;background-clip:padding-box}
:where(:root[data-page="department-totals"]) .nx-scroll.sb-show::-webkit-scrollbar-thumb{background:var(--nx-line2);background-clip:padding-box}
:where(:root[data-page="department-totals"]) .nx-scroll.sb-show::-webkit-scrollbar-thumb:hover{background:var(--nx-ink3);background-clip:padding-box}
/* Firefox fallback (ignored by Chrome): thin, transparent until revealed. */
@supports (-moz-appearance:none){
  :where(:root[data-page="department-totals"]) .nx-scroll{scrollbar-width:thin;scrollbar-color:transparent transparent}
  :where(:root[data-page="department-totals"]) .nx-scroll.sb-show{scrollbar-color:var(--nx-line2) transparent}
}
:where(:root[data-page="department-totals"]) .nx-pagehead{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
:where(:root[data-page="department-totals"]) .nx-h1{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0}
:where(:root[data-page="department-totals"]) .nx-pagehead .nx-sub{font-size:12.5px;color:var(--nx-ink3)}
:where(:root[data-page="department-totals"]) .nx-pagehead-right{margin-left:auto;display:flex;gap:8px}
:where(:root[data-page="department-totals"]) .nx-pill-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-surface);border-radius:9px;padding:7px 12px;font-size:12px;font-weight:600;color:var(--nx-ink2);cursor:pointer;text-decoration:none}
:where(:root[data-page="department-totals"]) .nx-pill-btn:hover{border-color:var(--nx-line2);color:var(--nx-ink)}
:where(:root[data-page="department-totals"]) .nx-pill-btn svg{width:14px;height:14px}
:where(:root[data-page="department-totals"]) .nx-pill-btn.active{border-color:var(--brand);color:var(--brand);background:var(--brand-lt)}
:where(:root[data-page="department-totals"]) .nx-pill-badge{min-width:16px;height:16px;padding:0 5px;box-sizing:border-box;background:var(--brand);color:#fff;font-size:9.5px;font-weight:700;line-height:16px;text-align:center;border-radius:8px}

/* ── Stat cards ──────────────────────────────────────────────────────── */
:where(:root[data-page="department-totals"]) .nx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
@media(max-width:760px){:where(:root[data-page="department-totals"]) .nx-stats{grid-template-columns:1fr}}
:where(:root[data-page="department-totals"]) .pd-kpi{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:16px 17px}
:where(:root[data-page="department-totals"]) .pd-kpi-top{display:flex;align-items:center;gap:9px;margin-bottom:13px}
:where(:root[data-page="department-totals"]) .pd-kpi-chip{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center}
:where(:root[data-page="department-totals"]) .pd-kpi-chip svg{width:16px;height:16px}
:where(:root[data-page="department-totals"]) .pd-kpi-label{font-size:12.5px;font-weight:600;color:var(--nx-ink2)}
:where(:root[data-page="department-totals"]) .pd-kpi-val{font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1}
:where(:root[data-page="department-totals"]) .pd-kpi-foot{display:flex;align-items:center;gap:8px;margin-top:10px}
:where(:root[data-page="department-totals"]) .pd-kpi-delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
:where(:root[data-page="department-totals"]) .pd-kpi-delta.up{color:var(--nx-down);background:var(--nx-down-bg)}     /* cost up = red */
:where(:root[data-page="department-totals"]) .pd-kpi-delta.down{color:var(--nx-up);background:var(--nx-up-bg)}       /* cost down = green */
:where(:root[data-page="department-totals"]) .pd-kpi-sub{font-size:11px;color:var(--nx-ink3)}

/* ── Panels ──────────────────────────────────────────────────────────── */
:where(:root[data-page="department-totals"]) .nx-row{display:grid;gap:16px;margin-bottom:16px}
:where(:root[data-page="department-totals"]) .nx-row.cols-2-1{grid-template-columns:1.7fr 1fr}
:where(:root[data-page="department-totals"]) .nx-row.cols-1-1{grid-template-columns:1fr 1.25fr}
@media(max-width:980px){:where(:root[data-page="department-totals"]) .nx-row.cols-2-1,:where(:root[data-page="department-totals"]) .nx-row.cols-1-1{grid-template-columns:1fr}}
:where(:root[data-page="department-totals"]) .nx-card{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);display:flex;flex-direction:column}
:where(:root[data-page="department-totals"]) .nx-card-head{display:flex;align-items:center;gap:10px;padding:15px 17px}
:where(:root[data-page="department-totals"]) .nx-card-ic{width:26px;height:26px;border-radius:8px;background:var(--nx-rail);border:1px solid var(--nx-line2);display:flex;align-items:center;justify-content:center;color:var(--nx-ink2)}
:where(:root[data-page="department-totals"]) .nx-card-ic svg{width:14px;height:14px}
:where(:root[data-page="department-totals"]) .nx-card-title{font-size:13.5px;font-weight:700}
:where(:root[data-page="department-totals"]) .nx-card-head .nx-card-right{margin-left:auto;display:flex;align-items:center;gap:8px}
:where(:root[data-page="department-totals"]) .nx-tag{font-size:11px;font-weight:600;color:var(--nx-ink2);border:1px solid var(--nx-line2);border-radius:8px;padding:5px 10px}
:where(:root[data-page="department-totals"]) .nx-link{font-size:12px;font-weight:600;color:var(--nx-violet);text-decoration:none}
:where(:root[data-page="department-totals"]) .nx-card-body{padding:4px 17px 17px}
:where(:root[data-page="department-totals"]) .nx-hero-figure{padding:0 17px}
:where(:root[data-page="department-totals"]) .nx-hero-num{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1}
:where(:root[data-page="department-totals"]) .nx-hero-meta{display:flex;align-items:center;gap:8px;margin-top:8px;margin-bottom:6px}
:where(:root[data-page="department-totals"]) .nx-chart-wrap{position:relative;height:268px;padding:6px 12px 14px}
/* Bar / line switch in the trend card header. Segmented pill, styled to match
   the rest of the Nexus chrome -- no native controls. */
:where(:root[data-page="department-totals"]) .dt-charttype{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--nx-line2);background:var(--nx-rail);border-radius:9px}
:where(:root[data-page="department-totals"]) .dt-charttype-btn{display:flex;align-items:center;justify-content:center;width:28px;height:24px;border:none;background:transparent;border-radius:7px;cursor:pointer;color:var(--nx-ink3);transition:background .12s,color .12s}
:where(:root[data-page="department-totals"]) .dt-charttype-btn svg{width:15px;height:15px}
:where(:root[data-page="department-totals"]) .dt-charttype-btn:hover{color:var(--nx-ink)}
:where(:root[data-page="department-totals"]) .dt-charttype-btn.active{background:var(--nx-surface);color:var(--brand);box-shadow:0 1px 2px rgba(27,29,41,.08)}
:where(:root[data-page="department-totals"]) .nx-chart-wrap canvas{max-height:100%}
:where(:root[data-page="department-totals"]) .nx-chart-wrap.sm{height:230px}

/* donut + legend */
:where(:root[data-page="department-totals"]) .nx-donut-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 17px 18px}
:where(:root[data-page="department-totals"]) .nx-donut{position:relative;width:210px;height:210px;flex:0 0 auto}
:where(:root[data-page="department-totals"]) .nx-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
:where(:root[data-page="department-totals"]) .nx-donut-center .v{font-size:23px;font-weight:800;letter-spacing:-.02em}
:where(:root[data-page="department-totals"]) .nx-donut-center .l{font-size:10px;color:var(--nx-ink3);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
:where(:root[data-page="department-totals"]) .nx-legend{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
:where(:root[data-page="department-totals"]) .nx-leg-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px}
:where(:root[data-page="department-totals"]) .nx-leg-dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
:where(:root[data-page="department-totals"]) .nx-leg-name{font-size:12px;color:var(--nx-ink2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="department-totals"]) .nx-leg-val{font-size:12px;font-weight:700;letter-spacing:-.02em}

/* table */
:where(:root[data-page="department-totals"]) .nx-table{width:100%;border-collapse:collapse;table-layout:fixed}
:where(:root[data-page="department-totals"]) .nx-table col.c-name{width:auto}
:where(:root[data-page="department-totals"]) .nx-table col.c-count{width:21%}
:where(:root[data-page="department-totals"]) .nx-table col.c-share{width:20%}
:where(:root[data-page="department-totals"]) .nx-table col.c-amount{width:21%}
:where(:root[data-page="department-totals"]) .nx-table th,:where(:root[data-page="department-totals"]) .nx-table td{overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="department-totals"]) .nx-table .ta-r{text-align:right}
:where(:root[data-page="department-totals"]) .nx-table thead th{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3);text-align:left;padding:10px 17px;background:var(--nx-rail);border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="department-totals"]) .nx-table tbody td{padding:13px 17px;border-bottom:1px solid var(--nx-line);font-size:12.5px;vertical-align:middle}
:where(:root[data-page="department-totals"]) .nx-table tbody tr:last-child td{border-bottom:none}
:where(:root[data-page="department-totals"]) .nx-row-ic{display:inline-flex;align-items:center;gap:9px;font-weight:600}
:where(:root[data-page="department-totals"]) .nx-row-ic .ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
:where(:root[data-page="department-totals"]) .nx-row-ic .ic svg{width:15px;height:15px}
:where(:root[data-page="department-totals"]) .nx-meter{height:6px;width:90px;border-radius:4px;background:var(--nx-line);overflow:hidden}
:where(:root[data-page="department-totals"]) .nx-meter span{display:block;height:100%;border-radius:4px}
:where(:root[data-page="department-totals"]) .nx-num{font-weight:700;letter-spacing:-.02em}
:where(:root[data-page="department-totals"]) .nx-muted{color:var(--nx-ink3)}
:where(:root[data-page="department-totals"]) .pd-loading,:where(:root[data-page="department-totals"]) .pd-empty{padding:22px 17px;font-size:12.5px;color:var(--nx-ink3);text-align:center}

/* attention banner (kept; restyled) */
:where(:root[data-page="department-totals"]) .pd-attn{display:none;gap:10px;flex-wrap:wrap;background:var(--nx-attn-bg,#FFF8E8);border:1px solid var(--nx-attn-line,#F3E2AE);border-radius:var(--nx-radius);padding:12px 15px;margin-bottom:16px}
:where(:root[data-page="department-totals"]) .pd-attn.show{display:flex}
:where(:root[data-page="department-totals"]) .pd-attn-title{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;color:#A57300;text-transform:uppercase;letter-spacing:.04em;width:100%}
:where(:root[data-page="department-totals"]) .pd-attn-title svg{width:15px;height:15px}
:where(:root[data-page="department-totals"]) .pd-attn-item{display:inline-flex;align-items:center;gap:7px;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:20px;padding:6px 13px;font-size:12.5px;color:var(--nx-ink);text-decoration:none;font-weight:500}
:where(:root[data-page="department-totals"]) .pd-attn-item:hover{border-color:var(--nx-line2)}
:where(:root[data-page="department-totals"]) .pd-attn-dot{width:8px;height:8px;border-radius:50%}
:where(:root[data-page="department-totals"]) .pd-attn-dot.red{background:var(--nx-down)}:where(:root[data-page="department-totals"]) .pd-attn-dot.amber{background:#F9AB00}

/* ── Filter drawer + backdrop ────────────────────────────────────────── */
:where(:root[data-page="department-totals"]) .pd-backdrop{position:fixed;inset:0;background:rgba(24,26,38,.40);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;z-index:200}
:where(:root[data-page="department-totals"]) .pd-backdrop.open{opacity:1;visibility:visible}
/* a floating card drawer, inset from the edges */
:where(:root[data-page="department-totals"]) .pd-drawer{position:fixed;top:14px;bottom:14px;right:14px;width:min(390px,calc(100vw - 28px));background:var(--nx-surface);border-radius:18px;box-shadow:0 24px 70px rgba(20,22,28,.28);transform:translateX(calc(100% + 18px));transition:transform .26s cubic-bezier(.22,.61,.36,1);z-index:201;display:flex;flex-direction:column;overflow:hidden}
:where(:root[data-page="department-totals"]) .pd-drawer.open{transform:translateX(0)}
@media(max-width:560px){:where(:root[data-page="department-totals"]) .pd-drawer{top:0;bottom:0;right:0;border-radius:0;width:100vw}}
:where(:root[data-page="department-totals"]) .pd-drawer-head{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 16px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="department-totals"]) .pd-drawer-head .ic{width:34px;height:34px;border-radius:10px;background:var(--brand-lt);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
:where(:root[data-page="department-totals"]) .pd-drawer-head .ic svg{width:16px;height:16px}
:where(:root[data-page="department-totals"]) .pd-drawer-htext{flex:1;min-width:0}
:where(:root[data-page="department-totals"]) .pd-drawer-title{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
:where(:root[data-page="department-totals"]) .pd-drawer-sub{font-size:11.5px;color:var(--nx-ink3);margin-top:2px}
:where(:root[data-page="department-totals"]) .pd-drawer-x{border:none;background:none;cursor:pointer;color:var(--nx-ink3);padding:5px;border-radius:8px;display:flex;flex:0 0 auto}
:where(:root[data-page="department-totals"]) .pd-drawer-x:hover{background:var(--nx-rail);color:var(--nx-ink)}
:where(:root[data-page="department-totals"]) .pd-drawer-x svg{width:16px;height:16px}
:where(:root[data-page="department-totals"]) .pd-drawer-body{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:22px}
:where(:root[data-page="department-totals"]) .pd-drawer-foot{display:flex;gap:10px;padding:14px 20px;border-top:1px solid var(--nx-line);background:var(--nx-rail)}
:where(:root[data-page="department-totals"]) .pd-drawer-foot .nx-btn{flex:1}
:where(:root[data-page="department-totals"]) .nx-btn{justify-content:center;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:11px;padding:10px 14px;font-size:13px;font-weight:600;color:var(--nx-ink);cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s}
:where(:root[data-page="department-totals"]) .nx-btn:hover{border-color:var(--nx-line2)}
:where(:root[data-page="department-totals"]) .nx-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="department-totals"]) .nx-btn.primary:hover{background:var(--blue-dk);box-shadow:0 4px 14px rgba(1,139,70,.28)}

:where(:root[data-page="department-totals"]) .pd-field{display:flex;flex-direction:column;gap:9px}
:where(:root[data-page="department-totals"]) .pd-field-head{display:flex;align-items:center;gap:8px}
:where(:root[data-page="department-totals"]) .pd-field-head label{font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--nx-ink2)}
:where(:root[data-page="department-totals"]) .pd-field-count{font-size:10.5px;font-weight:700;color:var(--brand);background:var(--brand-lt);border-radius:20px;padding:1px 8px}
:where(:root[data-page="department-totals"]) .pd-field-note{display:block;font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--nx-ink3);margin-top:-2px}
:where(:root[data-page="department-totals"]) .pd-preset-row{display:flex;flex-wrap:wrap;gap:7px}
:where(:root[data-page="department-totals"]) .pd-preset{font-family:inherit;font-size:12px;font-weight:500;color:var(--nx-ink2);background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:18px;padding:6px 13px;cursor:pointer;transition:all .12s}
:where(:root[data-page="department-totals"]) .pd-preset:hover{border-color:var(--nx-line2);color:var(--nx-ink)}
:where(:root[data-page="department-totals"]) .pd-preset.active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
:where(:root[data-page="department-totals"]) .pd-date-row{display:flex;align-items:center;gap:8px}
:where(:root[data-page="department-totals"]) .pd-date{flex:1;min-width:0;font-family:inherit;font-size:12.5px;color:var(--nx-ink);border:1px solid var(--nx-line2);border-radius:10px;padding:9px 11px;background:var(--nx-elev)}
:where(:root[data-page="department-totals"]) .pd-date:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="department-totals"]) .pd-date-sep{font-size:11.5px;color:var(--nx-ink3)}

/* ── Searchable-select popups ────────────────────────────────────────── */
:where(:root[data-page="department-totals"]) select.dt-native-hidden,:where(:root[data-page="department-totals"]) select[data-dt-multi]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:where(:root[data-page="department-totals"]) .dt-combo{position:relative;display:block;width:100%}
:where(:root[data-page="department-totals"]) .dt-combo-btn{display:flex;align-items:center;gap:8px;width:100%;background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:11px;padding:10px 13px;font-size:13px;color:var(--nx-ink);cursor:pointer;font-family:inherit;text-align:left;transition:border-color .12s,box-shadow .12s}
:where(:root[data-page="department-totals"]) .dt-combo-btn .dt-combo-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
:where(:root[data-page="department-totals"]) .dt-combo-btn .dt-combo-caret{flex:0 0 auto;width:13px;height:13px;color:var(--nx-ink3);transition:transform .18s}
:where(:root[data-page="department-totals"]) .dt-combo-btn:hover{border-color:var(--nx-line2)}
:where(:root[data-page="department-totals"]) .dt-combo.open .dt-combo-btn{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="department-totals"]) .dt-combo.open .dt-combo-caret{transform:rotate(180deg);color:var(--brand)}
:where(:root[data-page="department-totals"]) .dt-combo-btn.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
:where(:root[data-page="department-totals"]) .dt-combo-pop{position:absolute;z-index:210;top:calc(100% + 7px);left:0;width:100%;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:14px;box-shadow:0 18px 44px rgba(20,22,28,.20);overflow:hidden;display:none;transform-origin:top;animation:none}
:where(:root[data-page="department-totals"]) .dt-combo.open .dt-combo-pop{display:block;animation:pdPop .16s ease}
@keyframes pdPop{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
:where(:root[data-page="department-totals"]) .dt-combo-search{padding:11px 11px 9px;border-bottom:1px solid var(--nx-line);position:relative}
:where(:root[data-page="department-totals"]) .dt-combo-search svg{position:absolute;left:21px;top:50%;transform:translateY(-30%);width:14px;height:14px;color:var(--nx-ink3);pointer-events:none}
:where(:root[data-page="department-totals"]) .dt-combo-search input{width:100%;box-sizing:border-box;padding:8px 10px 8px 31px;font-size:13px;font-family:inherit;color:var(--nx-ink);border:1px solid var(--nx-line2);border-radius:9px;background:var(--nx-rail)}
:where(:root[data-page="department-totals"]) .dt-combo-search input:focus{outline:none;border-color:var(--brand);background:var(--nx-elev);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="department-totals"]) .dt-combo-list{max-height:266px;overflow-y:auto;padding:6px}
:where(:root[data-page="department-totals"]) .dt-combo-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--nx-ink);white-space:nowrap;transition:background .1s}
:where(:root[data-page="department-totals"]) .dt-combo-opt:hover,:where(:root[data-page="department-totals"]) .dt-combo-opt.active{background:var(--nx-rail)}
:where(:root[data-page="department-totals"]) .dt-combo-opt.selected{color:var(--brand);font-weight:600;background:var(--brand-lt)}
/* checkbox-style indicator on the left for multi-selects */
:where(:root[data-page="department-totals"]) .dt-combo-opt .dt-combo-check{order:-1;flex:0 0 auto;width:17px;height:17px;border-radius:6px;border:1.6px solid var(--nx-line2);color:#fff;display:flex;align-items:center;justify-content:center;opacity:1;background:var(--nx-elev);transition:background .12s,border-color .12s}
:where(:root[data-page="department-totals"]) .dt-combo-opt .dt-combo-check svg{width:11px;height:11px;opacity:0;transition:opacity .1s}
:where(:root[data-page="department-totals"]) .dt-combo-opt.selected .dt-combo-check{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="department-totals"]) .dt-combo-opt.selected .dt-combo-check svg{opacity:1}
:where(:root[data-page="department-totals"]) .dt-combo-opt[data-value=""] .dt-combo-check{display:none}
:where(:root[data-page="department-totals"]) .dt-combo-empty{padding:16px 12px;text-align:center;color:var(--nx-ink3);font-size:13px}
:where(:root[data-page="department-totals"]) .dt-combo-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border-top:1px solid var(--nx-line);background:var(--nx-rail)}
:where(:root[data-page="department-totals"]) .dt-combo-clear,:where(:root[data-page="department-totals"]) .dt-combo-mode{font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;border-radius:8px;padding:6px 11px;background:none;border:none;color:var(--nx-ink2)}
:where(:root[data-page="department-totals"]) .dt-combo-clear:hover,:where(:root[data-page="department-totals"]) .dt-combo-mode:hover{color:var(--brand);background:var(--brand-lt)}
/* With nothing to its left the one/several switch would sit alone on the
   left edge; it belongs under the list it changes, at the right. */
:where(:root[data-page="department-totals"]) .dt-combo-mode{margin-left:auto}

/* ── Embedded page iframe (right pane swaps to full pages) ───────────── */
:where(:root[data-page="department-totals"]) .nx-frame-wrap{flex:1;position:relative;min-height:0;background:var(--nx-bg)}
:where(:root[data-page="department-totals"]) .nx-frame{width:100%;height:100%;border:0;display:block;background:var(--nx-bg)}
:where(:root[data-page="department-totals"]) .nx-frame-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--nx-ink3);background:var(--nx-bg);z-index:1}
:where(:root[data-page="department-totals"]) .nx-frame-wrap.loaded .nx-frame-load{display:none}

/* Page-specific action buttons lifted into the shell header */
:where(:root[data-page="department-totals"]) .nx-page-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
:where(:root[data-page="department-totals"]) .nx-page-actions:empty{margin-left:0}
:where(:root[data-page="department-totals"]) .nx-page-actions .nx-pbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1}
:where(:root[data-page="department-totals"]) .nx-page-actions .nx-pbtn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="department-totals"]) .nx-page-actions .nx-pbtn svg{width:14px;height:14px}
:where(:root[data-page="department-totals"]) .nx-page-actions .nx-pbtn.primary{border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="department-totals"]) .nx-page-actions .nx-pbtn.primary:hover{background:var(--brand-lt)}
/* Mirror the embedded page's spinner animation so loading buttons (e.g. the
   Department Totals "Syncing…" button) actually spin once lifted into the
   shell header — the .dt-spin class rides along in the button HTML, but its
   keyframes live in the page, so we redefine them here. */
:where(:root[data-page="department-totals"]) .nx-page-actions .dt-spin{animation:dt-spin .7s linear infinite}
@keyframes dt-spin{to{transform:rotate(360deg)}}

/* Always-visible Filter button in the top bar */
:where(:root[data-page="department-totals"]) .nx-filter-btn{position:relative;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:10px;padding:8px 13px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1}
:where(:root[data-page="department-totals"]) .nx-filter-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="department-totals"]) .nx-filter-btn svg{width:15px;height:15px}
:where(:root[data-page="department-totals"]) .nx-filter-btn.has-filters{border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="department-totals"]) .nx-filter-btn .nx-pill-badge{position:static;margin-left:1px}
@media(max-width:620px){:where(:root[data-page="department-totals"]) .nx-filter-btn span:not(.nx-pill-badge){display:none}}
/* when page actions are present, the top-actions group shouldn't also push left */
:where(:root[data-page="department-totals"]) .nx-page-actions:not(:empty) ~ .nx-top-actions{margin-left:14px}

/* Page sub-nav in the left rail */
:where(:root[data-page="department-totals"]) .nx-subnav{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:10px;border-top:1px solid var(--nx-line2)}
:where(:root[data-page="department-totals"]) .nx-subnav:empty{display:none;border-top:none;margin-top:0;padding-top:0}
:where(:root[data-page="department-totals"]) .nx-subnav-head{font-size:11px;font-weight:700;letter-spacing:-.01em;color:var(--nx-ink);padding:2px 10px 7px;display:flex;align-items:center;gap:7px}
:where(:root[data-page="department-totals"]) .nx-subnav-head::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--brand);flex:0 0 auto}
:where(:root[data-page="department-totals"]) .nx-subnav .nx-subsec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3);padding:9px 10px 4px}
:where(:root[data-page="department-totals"]) .nx-subnav .nx-subitem{display:flex;align-items:center;gap:11px;padding:8px 11px 8px 18px;border-radius:10px;color:var(--nx-ink2);font-size:12.5px;font-weight:500;cursor:pointer;border:none;background:none;font-family:inherit;width:100%;text-align:left}
:where(:root[data-page="department-totals"]) .nx-subnav .nx-subitem svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="department-totals"]) .nx-subnav .nx-subitem:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="department-totals"]) .nx-subnav .nx-subitem.active{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="department-totals"]) .nx-subnav .nx-subitem.active svg{color:var(--brand)}
/* ==== DT-specific component CSS (grid table, employee drill-down, modals,
       comboboxes, insights). Uses portal tokens, which the Nexus theme above
       remaps -- so these inherit the new palette + dark mode. ==== */

/* Sidebar wordmark subheader - names the current page beneath the brand. */
:where(:root[data-page="department-totals"]) .sb-subname{font-size:11px;font-weight:500;color:var(--text3);letter-spacing:-.01em;margin-top:1px}

/* Top-left brand block - colored square + two-tone name + page sub. */
:where(:root[data-page="department-totals"]) .pg-brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
:where(:root[data-page="department-totals"]) .pg-brand-icon{width:34px;height:34px;border-radius:8px;background:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-weight:700;font-size:15px;letter-spacing:-.02em}
:where(:root[data-page="department-totals"]) .pg-brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
:where(:root[data-page="department-totals"]) .pg-brand-name{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="department-totals"]) .pg-brand-name .pg-cr{color:var(--blue)}
:where(:root[data-page="department-totals"]) .pg-brand-sub{font-size:11.5px;font-weight:500;color:var(--text3);letter-spacing:-.01em}

/* The sidebar nav was moved into the header; this spacer pushes the user
   footer to the bottom of the sidebar where the nav used to hold the space. */
:where(:root[data-page="department-totals"]) .sb-spacer{flex:1}

/* Header greeting + page nav. The old page title is hidden (JS still keeps
   #pageTitle in sync for any code that reads it) and replaced by a friendly
   greeting plus a small segmented control for Dashboard / Upload History. */
:where(:root[data-page="department-totals"]) .page-head{display:flex;align-items:center;gap:14px;min-width:0}
:where(:root[data-page="department-totals"]) .page-head .page-title{display:none}
:where(:root[data-page="department-totals"]) .dt-greeting{
  font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px
}
:where(:root[data-page="department-totals"]) .dt-nav-seg{
  display:inline-flex;align-items:center;gap:2px;background:var(--bg);
  border:1px solid var(--border);border-radius:10px;padding:3px
}
:where(:root[data-page="department-totals"]) .dt-nav-tab{
  display:inline-flex;align-items:center;gap:7px;border:0;background:none;
  cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:500;
  color:var(--text2);padding:5px 11px;border-radius:8px;letter-spacing:-.01em;
  transition:background .1s,color .1s
}
:where(:root[data-page="department-totals"]) .dt-nav-tab svg{width:14px;height:14px;flex-shrink:0;opacity:.6}
:where(:root[data-page="department-totals"]) .dt-nav-tab:hover{color:var(--text);background:var(--surface2,#F3F4F6)}
:where(:root[data-page="department-totals"]) .dt-nav-tab:hover svg{opacity:1}
:where(:root[data-page="department-totals"]) .dt-nav-tab.active{background:#fff;color:var(--blue);font-weight:600;box-shadow:0 1px 2px rgba(20,22,28,.06)}
:where(:root[data-page="department-totals"]) .dt-nav-tab.active svg{opacity:1}
@media (max-width:900px){ :where(:root[data-page="department-totals"]) .dt-greeting{display:none} }

/* -- Topbar scope filter (financials-style pickers) --------------------
   Lives on the top bar. A row of label + picker pairs (Company, Facility)
   that flex between the page title and the right-hand actions. Each picker
   is a native <select> enhanced into a searchable combobox (.dt-combo). */
:where(:root[data-page="department-totals"]) .dt-topbar-scope{
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  margin:0 16px;flex-wrap:wrap
}
:where(:root[data-page="department-totals"]) .dt-picker{display:flex;align-items:center;gap:7px}
:where(:root[data-page="department-totals"]) .dt-picker label{font-size:12px;color:var(--text2);font-weight:500}
@media (max-width:900px){ :where(:root[data-page="department-totals"]) .dt-topbar-scope{margin:0 8px} }

/* -- Body scope row (greeting + pickers moved out of the top bar) ------
   Now the first row inside the dashboard page body. Reset the flex/margins
   the topbar layout imposed and let the greeting show at all widths. */
:where(:root[data-page="department-totals"]) .dt-body-scope{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:0 0 16px;
}
:where(:root[data-page="department-totals"]) .dt-body-scope .dt-greeting{display:block;max-width:none}
:where(:root[data-page="department-totals"]) .dt-body-scope .dt-topbar-scope{flex:0 1 auto;margin:0}
@media (max-width:900px){ :where(:root[data-page="department-totals"]) .dt-body-scope .dt-greeting{display:block} }

/* -- User menu (initials avatar + dropdown) ----------------------------
   Sits at the right end of the topbar. Replaces the old sidebar footer
   account controls after the side nav was removed. */
:where(:root[data-page="department-totals"]) .dt-user{position:relative;flex-shrink:0}
:where(:root[data-page="department-totals"]) .dt-user-btn{
  display:flex;align-items:center;justify-content:center;padding:0;border:none;
  background:none;cursor:pointer;border-radius:50%;
}
:where(:root[data-page="department-totals"]) .dt-user-avatar{
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--blue);color:#fff;font-size:12px;
  font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  font-family:var(--font);font-feature-settings:var(--font-feat);
  transition:box-shadow .12s;
}
:where(:root[data-page="department-totals"]) .dt-user-btn:hover .dt-user-avatar,
:where(:root[data-page="department-totals"]) .dt-user-btn:focus-visible .dt-user-avatar{box-shadow:0 0 0 3px rgba(1,139,70,.18);outline:none}
:where(:root[data-page="department-totals"]) .dt-user-pop{
  position:absolute;top:calc(100% + 8px);right:0;min-width:208px;
  background:#fff;border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 32px rgba(20,22,28,.16);overflow:hidden;
  display:none;z-index:120;padding:6px;
}
:where(:root[data-page="department-totals"]) .dt-user.open .dt-user-pop{display:block}
:where(:root[data-page="department-totals"]) .dt-user-info{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:6px}
:where(:root[data-page="department-totals"]) .dt-user-name{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.2}
:where(:root[data-page="department-totals"]) .dt-user-role{font-size:11.5px;color:var(--text3);margin-top:2px}
:where(:root[data-page="department-totals"]) .dt-user-item{
  display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
  padding:9px 10px;border:none;background:none;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:13px;color:var(--text);text-align:left;
  text-decoration:none;transition:background .1s;
}
:where(:root[data-page="department-totals"]) .dt-user-item svg{width:15px;height:15px;flex-shrink:0;color:var(--text3)}
:where(:root[data-page="department-totals"]) .dt-user-item:hover svg{color:var(--text3)}
:where(:root[data-page="department-totals"]) .dt-user-item:hover{background:var(--surface2,#F3F4F6)}
/* Dashboard / Upload History live inside the avatar menu now. Strip the old
   segmented-control look and use a simple accent for the active page. */
:where(:root[data-page="department-totals"]) .dt-user-pop .dt-nav-tab{background:none;box-shadow:none;font-weight:inherit}
:where(:root[data-page="department-totals"]) .dt-user-pop .dt-nav-tab:hover{background:var(--surface2,#F3F4F6)}
:where(:root[data-page="department-totals"]) .dt-user-divider{height:1px;background:var(--border);margin:6px 4px}
:where(:root[data-page="department-totals"]) .dt-user-pop .dt-nav-tab.active{background:var(--surface2,#F3F4F6);color:var(--blue);font-weight:600;box-shadow:none}
:where(:root[data-page="department-totals"]) .dt-user-pop .dt-nav-tab.active svg{opacity:1;color:var(--blue)}
:where(:root[data-page="department-totals"]) .dt-user-danger{color:var(--red,#C5221F)}
:where(:root[data-page="department-totals"]) .dt-user-danger svg,:where(:root[data-page="department-totals"]) .dt-user-danger:hover svg{color:var(--red,#C5221F)}

/* -- Code mapping page --------------------------------------------------- */
:where(:root[data-page="department-totals"]) #page-mapping > .panel{padding:18px 20px}
:where(:root[data-page="department-totals"]) .dt-map-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border)}
:where(:root[data-page="department-totals"]) .dt-map-tab{
  appearance:none;background:none;border:none;border-bottom:2px solid transparent;
  font-family:var(--font);font-size:13px;font-weight:600;color:var(--text2);
  padding:8px 14px;margin-bottom:-1px;cursor:pointer;letter-spacing:-.01em;
  transition:color .1s,border-color .1s;outline:none
}
:where(:root[data-page="department-totals"]) .dt-map-tab:focus,:where(:root[data-page="department-totals"]) .dt-map-tab:focus-visible{outline:none}
:where(:root[data-page="department-totals"]) .dt-map-tab:hover{color:var(--text)}
:where(:root[data-page="department-totals"]) .dt-map-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
:where(:root[data-page="department-totals"]) .dt-map-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
:where(:root[data-page="department-totals"]) #dtMapPaneCodes .dt-map-head{max-width:640px}
:where(:root[data-page="department-totals"]) #dtMapPaneDepts .dt-map-head{max-width:560px}
:where(:root[data-page="department-totals"]) .dt-map-sub{font-size:12px;color:var(--text3);margin-top:3px;max-width:560px;line-height:1.5}
:where(:root[data-page="department-totals"]) .dt-map-tools{display:flex;align-items:center;gap:12px;flex-shrink:0}
:where(:root[data-page="department-totals"]) .dt-map-search{
  padding:7px 11px;border:1px solid var(--border);border-radius:8px;
  font-family:var(--font);font-size:13px;color:var(--text);min-width:200px;
}
:where(:root[data-page="department-totals"]) .dt-map-search:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,139,70,.08)}
:where(:root[data-page="department-totals"]) .dt-map-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
:where(:root[data-page="department-totals"]) #dtMapBody{max-width:640px}
:where(:root[data-page="department-totals"]) #dtGrpBody{max-width:920px}
:where(:root[data-page="department-totals"]) .dt-map-table.dt-dept-map col.c-dcode{width:12%}
:where(:root[data-page="department-totals"]) .dt-map-table.dt-dept-map col.c-draw{width:30%}
:where(:root[data-page="department-totals"]) .dt-map-table.dt-dept-map col.c-dshow{width:30%}
:where(:root[data-page="department-totals"]) .dt-map-table.dt-dept-map col.c-dcat{width:28%}
:where(:root[data-page="department-totals"]) .dt-map-name{padding:6px 9px;border:1px solid var(--nx-line2);border-radius:7px;font-family:var(--font);font-size:12.5px;color:var(--nx-ink);background:var(--nx-elev);width:100%;max-width:230px;box-sizing:border-box}
:where(:root[data-page="department-totals"]) .dt-map-name:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="department-totals"]) .dt-map-name:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="department-totals"]) .dt-map-table.dt-dept-map td.dt-dept-raw{color:var(--nx-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Categories tab - the list of table sections, in the order they stack. */
:where(:root[data-page="department-totals"]) .dt-cat-list{max-width:560px;display:flex;flex-direction:column;gap:8px;margin-top:4px}
:where(:root[data-page="department-totals"]) .dt-cat-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--nx-line2);
  border-radius:11px;background:var(--nx-elev)}
:where(:root[data-page="department-totals"]) .dt-cat-pos{width:22px;text-align:center;font-size:11.5px;font-weight:700;color:var(--text3);
  font-variant-numeric:tabular-nums;flex:none}
:where(:root[data-page="department-totals"]) .dt-cat-main{flex:1;min-width:0}
:where(:root[data-page="department-totals"]) .dt-cat-main .dt-map-name{max-width:none}
:where(:root[data-page="department-totals"]) .dt-cat-sub{margin-top:4px;font-size:11px;color:var(--text3)}
:where(:root[data-page="department-totals"]) .dt-cat-btns{display:flex;align-items:center;gap:4px;flex:none}
:where(:root[data-page="department-totals"]) .dt-cat-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:8px;color:var(--nx-ink);
  font-size:11px;line-height:1;cursor:pointer;transition:border-color .12s,background .12s,color .12s}
:where(:root[data-page="department-totals"]) .dt-cat-btn:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="department-totals"]) .dt-cat-btn:disabled{opacity:.35;cursor:default}
:where(:root[data-page="department-totals"]) .dt-cat-btn.del{font-size:16px}
:where(:root[data-page="department-totals"]) .dt-cat-btn.del:hover{border-color:var(--red);color:var(--red)}
:where(:root[data-page="department-totals"]) .dt-cat-btn.spacer{border-color:transparent;background:none;cursor:default}
:where(:root[data-page="department-totals"]) .dt-cat-foot{display:flex;align-items:center;gap:10px;margin-top:14px;max-width:560px}
:where(:root[data-page="department-totals"]) .dt-cat-note{font-size:11.5px;color:var(--text3)}
:where(:root[data-page="department-totals"]) .nx-btn:disabled{opacity:.5;cursor:default}
:where(:root[data-page="department-totals"]) .dt-map-table col.c-code{width:18%}
:where(:root[data-page="department-totals"]) .dt-map-table col.c-desc{width:32%}
:where(:root[data-page="department-totals"]) .dt-map-table col.c-bucket{width:25%}
:where(:root[data-page="department-totals"]) .dt-map-table col.c-hours{width:25%}
:where(:root[data-page="department-totals"]) .dt-map-table col.c-grp-code{width:18%}
:where(:root[data-page="department-totals"]) .dt-map-table col.c-grp-dept{width:46%}
:where(:root[data-page="department-totals"]) .dt-map-table col.c-grp-sel{width:36%}
:where(:root[data-page="department-totals"]) .dt-map-table col.c-lines{width:11%}
:where(:root[data-page="department-totals"]) .dt-map-table col.c-total{width:14%}
:where(:root[data-page="department-totals"]) .dt-map-table col.c-rule{width:16%}
:where(:root[data-page="department-totals"]) .dt-map-table col.c-grp-code{width:10%}
:where(:root[data-page="department-totals"]) .dt-map-table col.c-grp-dept{width:30%}
:where(:root[data-page="department-totals"]) .dt-map-table col.c-grp-sel{width:21%}
:where(:root[data-page="department-totals"]) .dt-map-table th{
  text-align:left;font-size:10.5px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
:where(:root[data-page="department-totals"]) .dt-map-table th.num,:where(:root[data-page="department-totals"]) .dt-map-table td.num{text-align:right}
:where(:root[data-page="department-totals"]) .dt-map-table td{padding:9px 10px;border-bottom:1px solid var(--surface2,#EEF0F2);vertical-align:middle}
:where(:root[data-page="department-totals"]) .dt-map-code{font-weight:700;color:var(--text);font-feature-settings:var(--font-feat)}
:where(:root[data-page="department-totals"]) .dt-map-rule{font-size:11.5px;color:var(--text3)}
:where(:root[data-page="department-totals"]) .dt-map-desc{font-size:12.5px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="department-totals"]) .dt-map-sel{
  padding:6px 9px;border:1px solid var(--border);border-radius:7px;
  font-family:var(--font);font-size:12.5px;color:var(--text);background:#fff;cursor:pointer;width:100%;max-width:150px;
}
:where(:root[data-page="department-totals"]) .dt-map-sel:focus{outline:none;border-color:var(--blue)}
:where(:root[data-page="department-totals"]) .dt-map-sel.overridden{border-color:var(--blue);box-shadow:0 0 0 2px rgba(1,139,70,.10)}
:where(:root[data-page="department-totals"]) .dt-map-badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;margin-left:8px}
:where(:root[data-page="department-totals"]) .dt-map-badge.over{background:rgba(1,139,70,.12);color:var(--blue)}
:where(:root[data-page="department-totals"]) .dt-map-empty{padding:30px;text-align:center;color:var(--text3);font-size:13px}

/* (Removed scrollbar-gutter:stable - it reserved a permanent strip on the
   right edge on top of the base .scroll-area padding, leaving the content
   short of the right side. The searchable-select popover already anchors
   itself (dt-align-right) so it won't overflow and shift the layout.) */

/* Native selects are kept in the DOM (visually hidden) as the source of
   truth; the combobox button + popover below mirrors them. Applies anywhere
   a select has been enhanced (topbar scope filter AND the Upload History
   facility filter), not just the topbar. */
:where(:root[data-page="department-totals"]) select.dt-native-hidden,
:where(:root[data-page="department-totals"]) select[data-dt-multi]{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
:where(:root[data-page="department-totals"]) .dt-combo{position:relative;display:inline-block}
:where(:root[data-page="department-totals"]) .dt-combo-btn{
  display:flex;align-items:center;gap:8px;background:var(--nx-surface);border:1px solid var(--border);
  border-radius:10px;padding:7px 11px;font-size:13.5px;color:var(--text);min-width:180px;
  cursor:pointer;font-family:inherit;transition:border-color .12s,box-shadow .12s;text-align:left;
}
:where(:root[data-page="department-totals"]) .dt-combo-btn .dt-combo-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="department-totals"]) .dt-combo-btn .dt-combo-caret{flex-shrink:0;width:12px;height:12px;color:var(--text3);transition:transform .15s}
:where(:root[data-page="department-totals"]) .dt-combo-btn:hover{border-color:#B3B7BC}
:where(:root[data-page="department-totals"]) .dt-combo.open .dt-combo-btn,:where(:root[data-page="department-totals"]) .dt-combo-btn:focus{outline:none;border-color:#B3B7BC;box-shadow:none}
:where(:root[data-page="department-totals"]) .dt-combo.open .dt-combo-caret{transform:rotate(180deg)}
:where(:root[data-page="department-totals"]) .dt-combo-btn.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
:where(:root[data-page="department-totals"]) .dt-combo-pop{
  position:absolute;z-index:90;top:calc(100% + 6px);left:0;min-width:230px;width:max-content;max-width:340px;
  background:var(--nx-surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 12px 32px rgba(20,22,28,.16);overflow:hidden;display:none;
}
:where(:root[data-page="department-totals"]) .dt-combo.open .dt-combo-pop{display:block}
/* When the picker sits near the right edge, anchor the popover to its right
   side so it opens leftward and never overflows the viewport (which would add
   a horizontal scrollbar and shift the page). Set by open() in _DtCombo when
   a left-anchored popover wouldn't fit. The Upload History facility picker
   lives at the right edge of the panel head, so right-align it unconditionally
   as well - belt and suspenders, with no dependence on measurement timing. */
:where(:root[data-page="department-totals"]) .dt-combo.dt-align-right .dt-combo-pop,
:where(:root[data-page="department-totals"]) .dt-uploads-tools .dt-combo .dt-combo-pop{left:auto;right:0}

/* Panels default to overflow:hidden (for rounded corners), which clips the
   facility picker's dropdown popover where it extends below the panel header.
   The Upload History panel has no sticky table that needs clipping, so let it
   (and its head / tools row) overflow visibly so the popover can render in
   full instead of being cut off at the panel/header edge. */
:where(:root[data-page="department-totals"]) #page-uploads > .panel{overflow:visible}
:where(:root[data-page="department-totals"]) #page-uploads > .panel > .panel-head{overflow:visible}
:where(:root[data-page="department-totals"]) #page-uploads .dt-uploads-tools{overflow:visible}
/* Float the popover above the dropzone and table rows that sit beneath the
   header so it's never hidden behind later content. */
:where(:root[data-page="department-totals"]) .dt-uploads-tools .dt-combo-pop{z-index:120}
:where(:root[data-page="department-totals"]) .dt-combo-search{padding:10px 10px 8px;border-bottom:1px solid var(--border);position:relative}
:where(:root[data-page="department-totals"]) .dt-combo-search svg{position:absolute;left:20px;top:50%;transform:translateY(-30%);width:14px;height:14px;color:var(--text3);pointer-events:none}
:where(:root[data-page="department-totals"]) .dt-combo-search input{
  width:100%;box-sizing:border-box;padding:7px 10px 7px 30px;font-size:13px;font-family:inherit;color:var(--text);
  border:1px solid var(--border);border-radius:8px;background:var(--nx-surface);
}
:where(:root[data-page="department-totals"]) .dt-combo-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,139,70,.14)}
:where(:root[data-page="department-totals"]) .dt-combo-list{max-height:300px;overflow-y:auto;padding:5px}
:where(:root[data-page="department-totals"]) .dt-combo-opt{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;
  font-size:13.5px;color:var(--text);white-space:nowrap;
}
:where(:root[data-page="department-totals"]) .dt-combo-opt:hover,:where(:root[data-page="department-totals"]) .dt-combo-opt.active{background:var(--blue-lt)}
:where(:root[data-page="department-totals"]) .dt-combo-opt.selected{color:var(--blue);font-weight:600}
:where(:root[data-page="department-totals"]) .dt-combo-opt .dt-combo-check{flex-shrink:0;width:14px;height:14px;color:var(--blue);opacity:0}
:where(:root[data-page="department-totals"]) .dt-combo-opt.selected .dt-combo-check{opacity:1}
:where(:root[data-page="department-totals"]) .dt-combo-empty{padding:14px 12px;text-align:center;color:var(--text3);font-size:13px}
/* Footer for pickers that can hold several: Clear all, and the switch
   between picking one and picking several (right-aligned, under the list
   it changes). */
:where(:root[data-page="department-totals"]) .dt-combo-foot{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-top:1px solid var(--border);background:#fff;
}
:where(:root[data-page="department-totals"]) .dt-combo-clear,:where(:root[data-page="department-totals"]) .dt-combo-mode{
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  border-radius:8px;padding:6px 12px;transition:background .12s,color .12s;
  background:none;border:none;color:var(--text2);
}
:where(:root[data-page="department-totals"]) .dt-combo-clear:hover,:where(:root[data-page="department-totals"]) .dt-combo-mode:hover{color:var(--blue);background:var(--blue-lt)}
:where(:root[data-page="department-totals"]) .dt-combo-mode{margin-left:auto}

/* Icon-only button (square) - used for the download-PDF arrow. */
:where(:root[data-page="department-totals"]) .dt-icon-btn{padding:7px 9px;display:inline-flex;align-items:center;justify-content:center}
:where(:root[data-page="department-totals"]) .dt-icon-btn svg{display:block}
:where(:root[data-page="department-totals"]) .dt-spin{animation:dt-spin .7s linear infinite}
@keyframes dt-spin{to{transform:rotate(360deg)}}

/* -- Topbar upload status (inline, no card) ----------------------------- */
:where(:root[data-page="department-totals"]) .dt-upload-status{
  font-size:11.5px;color:var(--text2);font-weight:500;
  padding:5px 10px;border-radius:var(--radius);background:var(--bg2);
  border:1px solid var(--border);max-width:340px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
:where(:root[data-page="department-totals"]) .dt-upload-status.err{color:var(--red);background:var(--red-lt);border-color:#FBC9C9}
:where(:root[data-page="department-totals"]) .dt-upload-status.ok{color:var(--green);background:#E6F4EA;border-color:#C8E6C9}

/* -- Sync date-range picker (inside the confirm dialog body) ------------- */
:where(:root[data-page="department-totals"]) .dt-sync-range{display:flex;gap:14px;margin:4px 0 14px}
:where(:root[data-page="department-totals"]) .dt-sync-range label{
  flex:1;font-size:11.5px;font-weight:600;color:var(--text2);line-height:1.5
}
:where(:root[data-page="department-totals"]) .dt-sync-range input[type="date"]{
  width:100%;margin-top:4px;padding:7px 9px;font-size:13px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg);color:var(--text);box-sizing:border-box
}
:where(:root[data-page="department-totals"]) .dt-sync-range-err{
  color:var(--red);font-size:12px;font-weight:500;margin:-6px 0 12px
}

/* -- Sync progress box (one facility / one month at a time) ------------- */
:where(:root[data-page="department-totals"]) .dt-sync-prog{padding:2px 0 2px}
:where(:root[data-page="department-totals"]) .dt-sync-now{
  font-size:13px;font-weight:600;color:var(--text);margin-bottom:9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
:where(:root[data-page="department-totals"]) .dt-sync-bar{
  height:8px;border-radius:99px;background:var(--bg2);
  border:1px solid var(--border);overflow:hidden
}
:where(:root[data-page="department-totals"]) .dt-sync-bar i{
  display:block;height:100%;width:0;background:var(--brand,#018B46);
  transition:width .18s ease
}
:where(:root[data-page="department-totals"]) .dt-sync-count{font-size:11.5px;color:var(--text2);font-weight:500;margin:7px 0 10px}
:where(:root[data-page="department-totals"]) .dt-sync-log{
  max-height:190px;overflow:auto;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--bg2);padding:6px 9px
}
:where(:root[data-page="department-totals"]) .dt-sync-line{
  font-size:11.5px;line-height:1.65;color:var(--text2);
  display:flex;gap:10px;justify-content:space-between
}
:where(:root[data-page="department-totals"]) .dt-sync-line b{font-weight:600;color:var(--text);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="department-totals"]) .dt-sync-line span{white-space:nowrap}
:where(:root[data-page="department-totals"]) .dt-sync-line.skip{opacity:.55}
:where(:root[data-page="department-totals"]) .dt-sync-line.err b,:where(:root[data-page="department-totals"]) .dt-sync-line.err span{color:var(--red)}
:where(:root[data-page="department-totals"]) .dt-sync-note{font-size:11.5px;color:var(--text2);margin:-4px 0 12px}

/* Site-styled tick box for the sync dialog (no browser default look). */
:where(:root[data-page="department-totals"]) .dt-sync-opt{display:flex;gap:9px;align-items:flex-start;margin:0 0 12px;cursor:pointer}
:where(:root[data-page="department-totals"]) .dt-sync-opt input{position:absolute;opacity:0;width:0;height:0}
:where(:root[data-page="department-totals"]) .dt-sync-opt .box{
  flex:0 0 auto;width:16px;height:16px;margin-top:1px;border-radius:5px;
  border:1px solid var(--border2,#cfd6d1);background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,border-color .12s
}
:where(:root[data-page="department-totals"]) .dt-sync-opt .box svg{width:10px;height:10px;opacity:0;color:#fff}
:where(:root[data-page="department-totals"]) .dt-sync-opt input:checked + .box{background:var(--brand,#018B46);border-color:var(--brand,#018B46)}
:where(:root[data-page="department-totals"]) .dt-sync-opt input:checked + .box svg{opacity:1}
:where(:root[data-page="department-totals"]) .dt-sync-opt input:focus-visible + .box{box-shadow:0 0 0 3px rgba(1,139,70,.18)}
:where(:root[data-page="department-totals"]) .dt-sync-opt .txt{font-size:12px;color:var(--text);font-weight:600;line-height:1.45}
:where(:root[data-page="department-totals"]) .dt-sync-opt .txt em{display:block;font-style:normal;font-weight:500;color:var(--text2);font-size:11.5px}

/* Upload button doubles as a drag target (financials-style). While a file
   is dragged over the button itself it highlights with a green dashed border
   so the user knows they can drop right here. */
:where(:root[data-page="department-totals"]) #dtUploadBtn.dt-btn-drag{
  border:1px dashed var(--blue);background:var(--blue-lt);color:var(--blue);
  box-shadow:0 0 0 3px rgba(1,139,70,.18)
}

/* -- Tab strip - Regular $, Regular hrs, OT $, OT hrs, Other $, Retro -- */
:where(:root[data-page="department-totals"]) .dt-tabs{
  display:flex;gap:2px;background:var(--nx-surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:4px;margin-bottom:14px;flex-wrap:wrap;
  position:relative
}
/* Sliding highlight that sits behind the tabs and animates to the active one.
   Positioned by dtMoveTabSlider() from the active tab's box. */
:where(:root[data-page="department-totals"]) .dt-tab-slider{
  position:absolute;top:4px;left:0;height:0;width:0;
  background:var(--blue-lt);border-radius:var(--radius);
  transition:transform .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1),height .22s cubic-bezier(.4,0,.2,1);
  pointer-events:none;z-index:0
}
:where(:root[data-page="department-totals"]) .dt-tab{
  padding:8px 14px;border-radius:var(--radius);font-size:12px;font-weight:500;
  color:var(--text2);cursor:pointer;transition:color .12s;letter-spacing:-.01em;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  position:relative;z-index:1;background:transparent
}
:where(:root[data-page="department-totals"]) .dt-tab:hover{color:var(--text)}
:where(:root[data-page="department-totals"]) .dt-tab.active{color:var(--blue);font-weight:600}
:where(:root[data-page="department-totals"]) .dt-tab .dt-tab-sub{font-size:10.5px;color:var(--text3);font-weight:500}
:where(:root[data-page="department-totals"]) .dt-tab.active .dt-tab-sub{color:var(--blue)}

/* -- Period header strip (no dropdown, no arrows) ----------------------- */
:where(:root[data-page="department-totals"]) .dt-period-bar{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
  font-size:12px;color:var(--text2);flex-wrap:wrap
}
:where(:root[data-page="department-totals"]) .dt-period-bar .dt-period-meta{font-size:11px;color:var(--text3);font-style:italic}
/* Facilities label sits at the right of the bar - keep it dark + upright so
   it reads clearly, unlike the muted meta text. */
:where(:root[data-page="department-totals"]) #dtScopeFacilities{color:var(--text);font-style:normal;font-weight:600;font-size:12px}

/* -- Metric cards (Rochester Hills-style: highest / lowest / total) ---- */
:where(:root[data-page="department-totals"]) .dt-metric-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px
}
@media (max-width:780px){:where(:root[data-page="department-totals"]) .dt-metric-grid{grid-template-columns:1fr}}
:where(:root[data-page="department-totals"]) .dt-mc{
  background:var(--nx-surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:14px 16px
}
:where(:root[data-page="department-totals"]) .dt-mc-lbl{font-size:10.5px;color:var(--text3);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
:where(:root[data-page="department-totals"]) .dt-mc-val{font-size:22px;font-weight:700;color:var(--text);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
:where(:root[data-page="department-totals"]) .dt-mc-sub{font-size:11px;color:var(--text3);margin-top:3px}

/* -- Chart panel ------------------------------------------------------- */
:where(:root[data-page="department-totals"]) .dt-chart-wrap{
  background:var(--nx-surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:12px 16px 14px;margin-bottom:14px;position:relative
}
:where(:root[data-page="department-totals"]) .dt-chart-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px
}
:where(:root[data-page="department-totals"]) .dt-chart-title{font-size:12.5px;font-weight:700;color:var(--text);letter-spacing:-.02em}
:where(:root[data-page="department-totals"]) .dt-chart-sub{font-size:11px;color:var(--text3);margin-top:1px}
:where(:root[data-page="department-totals"]) .dt-chart-canvas-wrap{position:relative;height:160px}

/* -- Insights & anomalies panel ---------------------------------------- */
:where(:root[data-page="department-totals"]) .dt-insights{
  background:var(--nx-surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:12px 16px 14px;margin-bottom:14px
}
:where(:root[data-page="department-totals"]) .dt-insights-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
:where(:root[data-page="department-totals"]) .dt-insights-title{
  display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  color:var(--text);letter-spacing:-.02em
}
:where(:root[data-page="department-totals"]) .dt-insights-title svg{color:var(--blue);flex-shrink:0}
:where(:root[data-page="department-totals"]) .dt-insights-sub{font-size:11px;color:var(--text3)}
:where(:root[data-page="department-totals"]) .dt-insights-list{display:flex;flex-direction:column;gap:8px}
/* ============================================================================
   INSIGHTS & ANOMALIES - rebuilt from scratch to match the Nexus theme.
   Each insight is a soft card with a colored left rail by severity. When it
   has a breakdown, the whole card expands to reveal Nexus-style tables that
   mirror the department grid (rail header, thin row lines, tabular numbers).
   Explicit hex fallbacks sit beside every token so it renders even if a
   theme token is missing.
   ========================================================================== */
:where(:root[data-page="department-totals"]) .dt-insight{
  display:flex;gap:11px;align-items:flex-start;
  border:1px solid var(--border,#ECEDF2);border-left:3px solid var(--border,#ECEDF2);
  border-radius:12px;padding:12px 14px;background:var(--nx-elev,#fff)
}
:where(:root[data-page="department-totals"]) .dt-insight-ico{
  flex-shrink:0;width:26px;height:26px;border-radius:8px;display:flex;
  align-items:center;justify-content:center;margin-top:1px
}
:where(:root[data-page="department-totals"]) .dt-insight-ico svg{width:14px;height:14px}
:where(:root[data-page="department-totals"]) .dt-insight-body{flex:1;min-width:0}
:where(:root[data-page="department-totals"]) .dt-insight-txt{font-size:13px;color:var(--text,#1B1D29);line-height:1.5}
:where(:root[data-page="department-totals"]) .dt-insight-txt strong{font-weight:700}
:where(:root[data-page="department-totals"]) .dt-insight-meta{font-size:11.5px;color:var(--text3,#9499AB);margin-top:3px}
:where(:root[data-page="department-totals"]) .dt-insight-tag{display:inline-block;font-size:10.5px;font-weight:700;line-height:1.4;padding:1px 7px;border-radius:7px;background:var(--surface2,#F3F4F6);color:var(--text2,#5B6072);white-space:nowrap;vertical-align:1px}
:where(:root[data-page="department-totals"]) .dt-insight.sev-high .dt-insight-tag{background:#FEE2E2;color:#B91C1C}
:where(:root[data-page="department-totals"]) .dt-insight.sev-warn .dt-insight-tag{background:#FEF3C7;color:#B45309}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-insight-tag{background:var(--nx-line2);color:var(--nx-ink2)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-insight.sev-high .dt-insight-tag{background:var(--red-lt);color:var(--red)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-insight.sev-warn .dt-insight-tag{background:#3A3416;color:var(--amber-text)}

/* Severity accents (light). Dark overrides live in the dark block below. */
:where(:root[data-page="department-totals"]) .dt-insight.sev-high{border-left-color:#DC2626}
:where(:root[data-page="department-totals"]) .dt-insight.sev-high .dt-insight-ico{background:#FEE2E2;color:#DC2626}
:where(:root[data-page="department-totals"]) .dt-insight.sev-warn{border-left-color:#D97706}
:where(:root[data-page="department-totals"]) .dt-insight.sev-warn .dt-insight-ico{background:#FEF3C7;color:#B45309}
:where(:root[data-page="department-totals"]) .dt-insight.sev-info{border-left-color:var(--brand,#018B46)}
:where(:root[data-page="department-totals"]) .dt-insight.sev-info .dt-insight-ico{background:var(--brand-lt,#E6F4EC);color:var(--brand,#018B46)}

/* Expandable: whole card toggles; chevron rotates. */
:where(:root[data-page="department-totals"]) .dt-insight-expandable{cursor:pointer;outline:none;transition:box-shadow .12s}
:where(:root[data-page="department-totals"]) .dt-insight-expandable:hover{box-shadow:0 1px 4px rgba(16,18,26,.06)}
:where(:root[data-page="department-totals"]) .dt-insight-expandable:focus-visible{box-shadow:0 0 0 3px var(--brand-lt,#E6F4EC)}
:where(:root[data-page="department-totals"]) .dt-insight-chev{flex-shrink:0;color:var(--text3,#9499AB);margin-top:3px;transition:transform .18s}
:where(:root[data-page="department-totals"]) .dt-insight-expandable.open .dt-insight-chev{transform:rotate(180deg)}

/* Detail: hidden until open. */
:where(:root[data-page="department-totals"]) .dt-insight-detail{display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--border,#ECEDF2)}
:where(:root[data-page="department-totals"]) .dt-insight-expandable.open .dt-insight-detail{display:block}

/* Section label above each table. */
:where(:root[data-page="department-totals"]) .dt-insight-note{
  font-size:10px;font-weight:700;color:var(--text3,#9499AB);margin:14px 0 7px;
  text-transform:uppercase;letter-spacing:.07em
}
:where(:root[data-page="department-totals"]) .dt-insight-note:first-child{margin-top:0}

/* Nexus-style detail table - mirrors .dt-grid-table. */
:where(:root[data-page="department-totals"]) .dt-itbl-wrap{
  border:1px solid var(--border,#ECEDF2);border-radius:11px;overflow:hidden;
  background:var(--nx-elev,#fff)
}
:where(:root[data-page="department-totals"]) .dt-itbl{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
/* Shared column widths so every detail table lines up: Item flexes, Change and
   Amount are fixed. Item is the first col (no class), so target by position. */
:where(:root[data-page="department-totals"]) .dt-itbl col.dt-col-item{width:auto}
:where(:root[data-page="department-totals"]) .dt-itbl col.dt-col-mid{width:32%}
:where(:root[data-page="department-totals"]) .dt-itbl col.dt-col-num{width:20%}
:where(:root[data-page="department-totals"]) .dt-itbl thead th{
  background:var(--bg2,#FBFBFD);border-bottom:1px solid var(--border,#ECEDF2);
  padding:8px 13px;font-size:9.5px;font-weight:700;color:var(--text3,#9499AB);
  text-transform:uppercase;letter-spacing:.06em;text-align:left;white-space:nowrap
}
:where(:root[data-page="department-totals"]) .dt-itbl thead th.dt-itbl-num,:where(:root[data-page="department-totals"]) .dt-itbl thead th.dt-itbl-mid{text-align:right}
:where(:root[data-page="department-totals"]) .dt-itbl tbody td{
  padding:9px 13px;border-bottom:1px solid var(--border,#ECEDF2);
  color:var(--text,#1B1D29);vertical-align:middle
}
:where(:root[data-page="department-totals"]) .dt-itbl tbody tr:last-child td{border-bottom:0}
:where(:root[data-page="department-totals"]) .dt-itbl-label{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="department-totals"]) .dt-itbl-mid{
  text-align:right;color:var(--text3,#9499AB);font-size:11.5px;
  font-variant-numeric:tabular-nums;white-space:nowrap
}
:where(:root[data-page="department-totals"]) .dt-itbl-num{
  text-align:right;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--text,#1B1D29)
}
:where(:root[data-page="department-totals"]) .dt-itbl-num.is-up{color:#059669}
:where(:root[data-page="department-totals"]) .dt-itbl-num.is-down{color:#DC2626}

/* Clickable department rows: hover tint + a "View" chip on the right. */
:where(:root[data-page="department-totals"]) .dt-itbl-link{cursor:pointer;transition:background .12s}
:where(:root[data-page="department-totals"]) .dt-itbl-link:hover td{background:var(--brand-lt,#E6F4EC)}
:where(:root[data-page="department-totals"]) .dt-itbl-link:focus-visible{outline:2px solid var(--brand,#018B46);outline-offset:-2px}
:where(:root[data-page="department-totals"]) .dt-itbl-go{
  display:inline-block;margin-left:9px;font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--brand,#018B46);
  opacity:0;transition:opacity .12s;vertical-align:middle
}
:where(:root[data-page="department-totals"]) .dt-itbl-link:hover .dt-itbl-go{opacity:1}

@media (max-width:560px){
  :where(:root[data-page="department-totals"]) .dt-itbl thead th.dt-itbl-mid,:where(:root[data-page="department-totals"]) .dt-itbl td.dt-itbl-mid{display:none}
}
/* -- Agency staffing ---------------------------------------------------
   Agency is off until someone switches it on. This page has always meant
   payroll, and folding in staffing that never went through payroll changes
   what every figure on it means - so it is a deliberate act, and agency
   rows carry a tag wherever they appear. A total can then never quietly
   turn into a different total.                                           */
/* The switch rides on the tab strip's row. The tabs keep their natural
   width so they never shrink and wrap inside themselves; when the window
   is too narrow for both, the switch drops to the line below instead. */
:where(:root[data-page="department-totals"]) .dt-tabsrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
:where(:root[data-page="department-totals"]) .dt-tabsrow > .dt-tabs{flex:0 0 auto;margin-bottom:0}
/* The switch is as tall as the tab strip it sits beside, rather than a
   shorter button floating next to it - they are one row of "what am I
   looking at". Stretching to the row's height keeps the two level whatever
   the tabs measure. On a narrow window the switch wraps to its own line and
   goes back to its natural height. */
:where(:root[data-page="department-totals"]) .dt-tabsrow > .dt-agency{align-self:stretch}
:where(:root[data-page="department-totals"]) .dt-agency{display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 9px;
  border:1px solid var(--border);background:var(--nx-surface);border-radius:var(--radius-lg);
  font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--text2);
  letter-spacing:-.01em;cursor:pointer;user-select:none;
  transition:border-color .12s,color .12s,box-shadow .12s}
:where(:root[data-page="department-totals"]) .dt-agency:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="department-totals"]) .dt-agency.on{border-color:var(--brand);color:var(--text);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="department-totals"]) .dt-agency-sw{position:relative;flex:none;width:30px;height:17px;border-radius:9px;
  background:var(--nx-ink3);transition:background .16s}
:where(:root[data-page="department-totals"]) .dt-agency-sw i{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.28);transition:transform .16s}
:where(:root[data-page="department-totals"]) .dt-agency.on .dt-agency-sw{background:var(--brand)}
:where(:root[data-page="department-totals"]) .dt-agency.on .dt-agency-sw i{transform:translateX(13px)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-agency{background:transparent}
/* In a modal header the switch shares the row with the 32px close button,
   so it is trimmed to sit level with it rather than tower over the title. */
:where(:root[data-page="department-totals"]) .dt-agency-sm{padding:5px 11px 5px 7px;font-size:12px;border-radius:10px}
:where(:root[data-page="department-totals"]) .dt-agency-sm .dt-agency-sw{width:26px;height:15px;border-radius:8px}
:where(:root[data-page="department-totals"]) .dt-agency-sm .dt-agency-sw i{width:11px;height:11px}
:where(:root[data-page="department-totals"]) .dt-agency-sm.on .dt-agency-sw i{transform:translateX(11px)}

/* The tag on an agency row. Amber rather than one of the pay-type colours,
   which all mean a column of numbers - this means a kind of person.       */
:where(:root[data-page="department-totals"]) .dt-agency-tag{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:5px;
  background:rgba(180,83,9,.12);color:#B45309;font-size:9.5px;font-weight:800;
  letter-spacing:.055em;text-transform:uppercase;vertical-align:1px;white-space:nowrap}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-agency-tag{background:rgba(251,191,36,.16);color:#FBBF24}

/* A name with the Agency tag after it keeps to one line: a tag that wrapped
   would make that row taller than every other one in the table. A name too
   long to fit beside its tag is cut with an ellipsis and carries the whole
   thing in its tooltip. */
:where(:root[data-page="department-totals"]) .dt-emp-tagged{display:flex;align-items:center;min-width:0}
:where(:root[data-page="department-totals"]) .dt-emp-tagged > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="department-totals"]) .dt-emp-tagged .dt-agency-tag{flex:0 0 auto}

@media print{
  :where(:root[data-page="department-totals"]) .dt-insights{break-inside:avoid;border:1px solid #ccc}
  :where(:root[data-page="department-totals"]) .dt-insight{background:#fff!important}
  :where(:root[data-page="department-totals"]) .dt-insight-detail{display:block!important}
  :where(:root[data-page="department-totals"]) .dt-insight-chev{display:none}
  :where(:root[data-page="department-totals"]) .dt-itbl-go{display:none}
}

/* -- Wide grid table: dept rows x period columns ----------------------- */
/* Horizontal scroll only - show every department row without a vertical
   scrollbar so the dashboard reads top-to-bottom without clipping. */
/* Drag-to-scroll (dtInitDragScroll): grab hand over a box that can scroll,
   closed hand + no text selection while dragging. */
:where(:root[data-page="department-totals"]) .dt-drag-ok{cursor:grab}
:where(:root[data-page="department-totals"]) body.dt-dragging,:where(:root[data-page="department-totals"]) body.dt-dragging *{cursor:grabbing!important;user-select:none!important}
:where(:root[data-page="department-totals"]) .dt-grid-wrap{overflow-x:auto;overflow-y:visible;
  border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--nx-surface)}
:where(:root[data-page="department-totals"]) .dt-grid-table{
  width:100%;border-collapse:collapse;font-size:11.5px;
  font-variant-numeric:tabular-nums;min-width:780px
}
:where(:root[data-page="department-totals"]) .dt-grid-table thead th{
  background:var(--bg2);border-bottom:1px solid var(--border);
  padding:9px 10px;font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.06em;text-align:center;
  white-space:nowrap;position:sticky;top:0;z-index:3
}
:where(:root[data-page="department-totals"]) .dt-grid-table thead th:first-child{
  text-align:left;position:sticky;left:0;background:var(--bg2);z-index:5;
  min-width:180px;max-width:240px
}
:where(:root[data-page="department-totals"]) .dt-grid-table thead th.dt-total-col{color:var(--text2);background:#F8FAFC}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody td{
  padding:7px 10px;border-bottom:1px solid #F1F3F4;text-align:right;
  white-space:nowrap;color:var(--text)
}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody td:first-child{
  text-align:left;font-weight:500;color:var(--text2);
  position:sticky;left:0;background:var(--nx-surface);z-index:1;
  min-width:180px;max-width:240px
}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr:hover td:first-child,
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr:hover td{background:var(--nx-rail)}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr:hover td:first-child{background:var(--nx-rail)}

/* Group-header row: thin gray-uppercase strip between departments.
   Same pattern the Rochester Hills inspo uses.
   It sticks just below the month-header row as you scroll, so the section
   you're reading (Clinical, Admin, ...) stays labeled until the next section's
   header scrolls up and replaces it. top must match the month-header height. */
:where(:root[data-page="department-totals"]) .dt-grid-table thead th{height:37px;box-sizing:border-box}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-grp td{
  background:var(--nx-bg)!important;color:var(--text3);
  font-size:9.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:5px 10px;text-align:left;
  position:sticky;top:37px;z-index:2;
  border-bottom:1px solid var(--border)
}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-grp td:first-child{
  background:var(--nx-bg)!important;position:sticky;left:0;top:37px;z-index:4
}

/* Numeric cell hover/click feedback. Zero cells look muted and aren't
   interactive. The row-max cell gets a red accent (high outlier). */
:where(:root[data-page="department-totals"]) .dt-grid-cell{
  border-radius:3px;padding:2px 4px;display:inline-block;
  transition:background .1s,color .1s;font-weight:600
}
:where(:root[data-page="department-totals"]) .dt-grid-cell.zero{color:var(--text3);font-weight:400}
:where(:root[data-page="department-totals"]) .dt-grid-cell.row-max{color:#B91C1C}

/* Peak-week explainer banner shown inside the cell popup when the opened
   cell is that department's highest (red) week. */
:where(:root[data-page="department-totals"]) .dt-cell-peak{margin:14px 18px 0;padding:10px 12px;border-radius:10px;background:#FEF2F2;border:1px solid #FBD5D0;color:#991B1B;font-size:12.5px;line-height:1.5;display:flex;gap:9px;align-items:flex-start}
:where(:root[data-page="department-totals"]) .dt-cell-peak svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
:where(:root[data-page="department-totals"]) .dt-cell-peak strong{font-weight:700}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-cell-peak{background:var(--red-lt);border-color:#5B2320;color:var(--red)}

/* Whole-cell click target - the <td> carries the click handler so the
   padding around the number is clickable too, not just the digits. But
   the visual highlight stays wrapped around the number pill only (the
   original look), rather than tinting the entire cell. */
:where(:root[data-page="department-totals"]) .dt-grid-table tbody td.dt-cell-clickable{cursor:pointer}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody td.dt-cell-clickable:hover .dt-grid-cell{background:var(--blue-lt);color:var(--blue)}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody td.dt-cell-clickable:hover .dt-grid-cell.row-max{background:#FEF2F2;color:#B91C1C}

/* Right-most "Total" column gets emphasis to anchor the row. */
:where(:root[data-page="department-totals"]) .dt-grid-table tbody td.dt-total{
  background:#F8FAFC;font-weight:700;color:var(--text)
}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr:hover td.dt-total{background:#EFF3F7}

/* Grand-total footer row pinned at the bottom of the body. */
:where(:root[data-page="department-totals"]) .dt-grid-table tfoot td{
  background:var(--bg2);border-top:2px solid var(--border);
  font-weight:700;color:var(--text);font-size:12px;
  text-align:right;padding:10px 10px;position:sticky;bottom:0;z-index:3
}
:where(:root[data-page="department-totals"]) .dt-grid-table tfoot td:first-child{
  text-align:left;position:sticky;left:0;background:var(--bg2);z-index:4
}
:where(:root[data-page="department-totals"]) .dt-grid-table tfoot td.dt-total{background:#E8EEF4}
/* Grand-total figures open the pay-code breakdown. The highlight wraps the
   number only, matching how the body cells behave. */
:where(:root[data-page="department-totals"]) .dt-grid-table tfoot td.dt-foot-clickable{cursor:pointer}
:where(:root[data-page="department-totals"]) .dt-foot-val{display:inline-block;padding:2px 7px;border-radius:6px;font-variant-numeric:tabular-nums}
:where(:root[data-page="department-totals"]) .dt-grid-table tfoot td.dt-foot-clickable:hover .dt-foot-val{background:var(--blue-lt);color:var(--blue)}

/* Expandable department rows (Financials-style). The name cell toggles the
   employees underneath; the figures keep opening the cell popup.
   Open row: tinted and bold.
   Employee rows: lighter, indented, smaller/regular weight, and a rule under
   the last one to close the group. */
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-dept-row td{cursor:pointer}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody td.dt-dept-name{user-select:none}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-dept-row:hover td.dt-dept-name{color:var(--text)}
/* Only the number itself opens the cell popup, so only it lights up - the
   rest of the cell belongs to the row's expand click. */
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-dept-row td.dt-cell-clickable:hover .dt-grid-cell{background:transparent;color:inherit}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-dept-row td.dt-cell-clickable:hover .dt-grid-cell.row-max{background:transparent;color:#B91C1C}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-dept-row td.dt-cell-clickable .dt-grid-cell:hover{background:var(--blue-lt);color:var(--blue)}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-dept-row td.dt-cell-clickable .dt-grid-cell.row-max:hover{background:#FDE2E2;color:#B91C1C}
:where(:root[data-page="department-totals"]) .dt-caret{display:inline-block;width:14px;font-size:13px;line-height:1;text-align:center;color:var(--text3);transition:transform .12s}
:where(:root[data-page="department-totals"]) .dt-dept-row.open .dt-caret{transform:rotate(90deg);color:var(--brand)}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-dept-row.open td,
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-dept-row.open td:first-child{background:#F3F5F8}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-dept-row.open td.dt-total{background:#EAEFF5}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-dept-row.open td:first-child{font-weight:700;color:var(--text)}

:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-emp-row td{font-size:11px;color:var(--text2);background:var(--nx-surface)}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-emp-row td:first-child{padding-left:40px;font-weight:400;background:var(--nx-surface);overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-emp-row td.dt-total{font-weight:500;background:#F8FAFC}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-emp-row .dt-grid-cell{font-weight:400}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-emp-row:hover td{background:var(--nx-rail)}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-emp-row:hover td.dt-total{background:#EFF3F7}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-emp-row.dt-emp-last td{border-bottom:1px solid var(--border)}
:where(:root[data-page="department-totals"]) .dt-emp-link{cursor:pointer;border-radius:3px;padding:1px 3px;margin-left:-3px}
:where(:root[data-page="department-totals"]) .dt-emp-link:hover{background:var(--blue-lt);color:var(--blue);text-decoration:underline}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody tr.dt-emp-row td.dt-emp-msg{text-align:left;color:var(--text3);font-style:italic}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody tr.dt-emp-row td,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody tr.dt-emp-row td:first-child{background:var(--nx-surface)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody tr.dt-emp-row td.dt-total{background:var(--nx-surface)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody tr.dt-emp-row:hover td{background:var(--nx-hover)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody tr.dt-dept-row.open td,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody tr.dt-dept-row.open td:first-child{background:var(--nx-hover)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody tr.dt-dept-row.open td.dt-total{background:var(--nx-line)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody tr.dt-dept-row td.dt-cell-clickable .dt-grid-cell:hover{background:var(--brand-lt);color:var(--brand)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-emp-link:hover{background:var(--brand-lt);color:var(--brand)}

/* -- Pay-code breakdown modal (opened from a Grand total) --------------- */
:where(:root[data-page="department-totals"]) .modal.dt-extra-wide #dtCodeBody{overflow-y:auto;overflow-x:auto;flex:1;min-height:0;display:flex;flex-direction:column}
:where(:root[data-page="department-totals"]) .modal.dt-extra-wide #dtCodeBody .dt-emp-card{flex:1;min-height:0;display:flex;flex-direction:column}
:where(:root[data-page="department-totals"]) .modal.dt-extra-wide #dtCodeBody .dt-emp-card-body{flex:1;min-height:0;max-height:none;border-bottom-left-radius:var(--nx-radius);border-bottom-right-radius:var(--nx-radius)}
:where(:root[data-page="department-totals"]) #dtCodeBody{padding:16px 18px;background:var(--nx-surface,#fff)}
:where(:root[data-page="department-totals"]) #dtCodeBody .dt-emp-table{font-size:11.5px}
:where(:root[data-page="department-totals"]) #dtCodeBody .dt-emp-table td{padding:5px 12px}
:where(:root[data-page="department-totals"]) #dtCodeBody .dt-emp-table th{padding-top:8px;padding-bottom:8px}
:where(:root[data-page="department-totals"]) #dtCodeBody .dt-emp-table tbody tr:last-child td{border-bottom:none}
:where(:root[data-page="department-totals"]) #dtCodeBody .dt-emp-table tfoot td{padding-top:8px;padding-bottom:8px;border-top:1px solid var(--nx-line,#ECEDF2);border-bottom:none}
:where(:root[data-page="department-totals"]) .dt-code-mono{font-weight:700;letter-spacing:.02em}
:where(:root[data-page="department-totals"]) .dt-code-desc{color:var(--text2)}
:where(:root[data-page="department-totals"]) .dt-code-pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:700}
:where(:root[data-page="department-totals"]) .dt-code-note{margin-top:10px;font-size:11.5px;color:var(--text2);line-height:1.5}
:where(:root[data-page="department-totals"]) .dt-code-share{color:var(--text3);font-size:11px}
:where(:root[data-page="department-totals"]) #dtCodeBody .dt-emp-table .dt-emp-amt{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* -- Modal extensions - wide modals for drill-down --------------------- */
:where(:root[data-page="department-totals"]) .modal.dt-wide{width:780px;max-width:96vw}
:where(:root[data-page="department-totals"]) .modal.dt-extra-wide{width:1180px;max-width:96vw;max-height:92vh;display:flex;flex-direction:column}
:where(:root[data-page="department-totals"]) .modal.dt-extra-wide #dtCellBody{overflow-y:auto;flex:1;min-height:0;display:flex;flex-direction:column}
/* In the cell modal, let the Employees card grow to fill leftover space and
   scroll INSIDE its own table, so the peak banner + KPI boxes don't push the
   whole body into a second scrollbar. */
:where(:root[data-page="department-totals"]) .modal.dt-extra-wide #dtCellBody .dt-emp-card{flex:1;min-height:0;display:flex;flex-direction:column}
:where(:root[data-page="department-totals"]) .modal.dt-extra-wide #dtCellBody .dt-emp-card-body{flex:1;min-height:0;max-height:none;border-bottom-left-radius:var(--nx-radius);border-bottom-right-radius:var(--nx-radius)}
/* Employee drill-down modal - wide enough to show the full code x week
   matrix without horizontal scrolling on typical screens. Grows to the
   viewport width (capped) and lets the body scroll vertically if a very
   tall code list overflows. */
:where(:root[data-page="department-totals"]) .modal.dt-emp-modal{width:min(1400px,97vw);max-width:97vw;max-height:92vh;display:flex;flex-direction:column}
:where(:root[data-page="department-totals"]) .modal.dt-emp-modal #dtEmpBody{overflow-y:auto;flex:1;min-height:0}
:where(:root[data-page="department-totals"]) .dt-modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--border);gap:14px
}
:where(:root[data-page="department-totals"]) .dt-modal-head h3{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.02em;margin:0}
:where(:root[data-page="department-totals"]) .dt-modal-head .sub{font-size:11px;color:var(--text3);margin-top:3px}
:where(:root[data-page="department-totals"]) .dt-modal-close{
  background:none;border:none;color:var(--text3);cursor:pointer;
  font-size:16px;line-height:1;padding:4px 8px;border-radius:4px;flex-shrink:0
}
:where(:root[data-page="department-totals"]) .dt-modal-close:hover{background:var(--bg);color:var(--text2)}

/* -- Confirm modal (replaces window.confirm) --------------------------- */
:where(:root[data-page="department-totals"]) .modal.dt-confirm{width:440px;max-width:94vw}
:where(:root[data-page="department-totals"]) .dt-confirm-body{
  font-size:13px;color:var(--text2);line-height:1.5;white-space:pre-line;
  margin-bottom:18px
}
:where(:root[data-page="department-totals"]) .dt-confirm-body strong{color:var(--text);font-weight:600}
:where(:root[data-page="department-totals"]) .dt-confirm-actions{display:flex;justify-content:flex-end;gap:8px}

:where(:root[data-page="department-totals"]) .dt-emp-table{width:100%;border-collapse:collapse;font-size:12px}
:where(:root[data-page="department-totals"]) .dt-emp-table th{
  text-align:left;padding:8px 12px;font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.06em;background:var(--bg2);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:3;box-shadow:inset 0 1px 0 var(--border), inset 0 -1px 0 var(--border)
}
:where(:root[data-page="department-totals"]) .dt-emp-table th.dt-sort-th{cursor:pointer;user-select:none}
:where(:root[data-page="department-totals"]) .dt-emp-table th.dt-sort-th:hover{color:var(--blue)}
:where(:root[data-page="department-totals"]) .dt-emp-table th.dt-sort-th .dt-sort-lbl{display:flex;align-items:center;gap:4px;justify-content:flex-start}
:where(:root[data-page="department-totals"]) .dt-emp-table th.dt-sort-th[style*="text-align:right"] .dt-sort-lbl{justify-content:flex-end}
:where(:root[data-page="department-totals"]) .dt-emp-table .dt-sort-ar{font-size:11px;line-height:1;flex-shrink:0}
:where(:root[data-page="department-totals"]) .dt-emp-table td{padding:9px 12px;border-bottom:1px solid var(--nx-line,#ECEDF2);font-variant-numeric:tabular-nums}
/* Cell drill-down Employees list: tighter rows so more fit without scrolling. */
:where(:root[data-page="department-totals"]) #dtCellBody .dt-emp-table td{padding:5px 12px}
:where(:root[data-page="department-totals"]) #dtCellBody .dt-emp-table th{padding-top:8px;padding-bottom:8px}
/* Slightly smaller text in the cell drill-down Employees table. */
:where(:root[data-page="department-totals"]) #dtCellBody .dt-emp-table{font-size:11.5px}
/* Keep the Total (footer) row the same height as the body rows. */
:where(:root[data-page="department-totals"]) #dtCellBody .dt-emp-table tfoot td{padding-top:8px;padding-bottom:8px;border-top:1px solid var(--nx-line,#ECEDF2);border-bottom:none}
/* Last body row already has a bottom border; the footer adds a top border too,
   which reads as a doubled line. Drop the last row's border so only one shows. */
:where(:root[data-page="department-totals"]) #dtCellBody .dt-emp-table tbody tr:last-child td{border-bottom:none}

/* Match the department-breakdown look on the employee modal's two tables:
   the "Dollars by code" matrix and the check-detail table. Same 11.5px font
   and skinnier rows. Scoped to #dtEmpBody so nothing else is affected. */
:where(:root[data-page="department-totals"]) #dtEmpBody .dt-emp-table{font-size:11.5px}
:where(:root[data-page="department-totals"]) #dtEmpBody .dt-emp-matrix th,
:where(:root[data-page="department-totals"]) #dtEmpBody .dt-emp-matrix td{padding-top:5px;padding-bottom:5px}
:where(:root[data-page="department-totals"]) #dtEmpBody table.dt-emp-charge th,
:where(:root[data-page="department-totals"]) #dtEmpBody table.dt-emp-charge td{padding-top:5px;padding-bottom:5px}
:where(:root[data-page="department-totals"]) #dtEmpBody table.dt-emp-charge-single tr.dt-charge-date-row td{padding-top:5px;padding-bottom:5px;font-size:11.5px}
:where(:root[data-page="department-totals"]) #dtEmpBody table.dt-emp-charge-single tfoot tr.dt-charge-grand td{font-size:11.5px}
:where(:root[data-page="department-totals"]) .dt-emp-table td.dt-emp-num,:where(:root[data-page="department-totals"]) .dt-emp-table th.dt-emp-num{
  font-size:12px;color:var(--text3);font-variant-numeric:tabular-nums;white-space:nowrap
}
:where(:root[data-page="department-totals"]) .dt-emp-table td.dt-emp-num:hover{color:var(--blue)}
:where(:root[data-page="department-totals"]) .dt-emp-table tbody tr{cursor:pointer;transition:background .1s}
:where(:root[data-page="department-totals"]) .dt-emp-table tbody tr:hover td{background:var(--nx-hover,#F1F0FB)}
/* Split click targets in the scoped (per-pay-type) cell modal: the name
   and the hours/amount cells each carry their own handler, so we give
   them an individual hover affordance instead of a whole-row one. */
:where(:root[data-page="department-totals"]) .dt-emp-table td.dt-emp-clickable{cursor:pointer}
/* Contained-highlight hover, like the main department grid: the inner value
   highlights (color change), the cell background stays put. Applies to the
   employee name, the dollar amount, the bucket pills, and the hours pills. */
:where(:root[data-page="department-totals"]) .dt-emp-table .emp-name{font-weight:600;color:var(--text);line-height:1.3}
:where(:root[data-page="department-totals"]) .dt-emp-table .emp-sub{font-size:11px;color:var(--text3);margin-top:1px}
:where(:root[data-page="department-totals"]) .dt-emp-table td.dt-emp-clickable:hover .emp-name{color:var(--blue)}
:where(:root[data-page="department-totals"]) .dt-emp-table td.dt-emp-clickable:hover .emp-sub{color:var(--blue)}
:where(:root[data-page="department-totals"]) .dt-emp-table td.dt-emp-clickable:hover .dt-emp-amt{background:var(--blue-lt);color:var(--blue)}
:where(:root[data-page="department-totals"]) .dt-emp-table td.dt-emp-clickable .dt-emp-amt{
  display:inline-block;padding:3px 9px;margin-right:-9px;border-radius:5px;
  font-weight:600;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap;
  transition:background .12s,color .12s
}
/* Bucket dollar pills already carry a bucket color; on hover, swap to the
   shared highlight so behavior matches the other columns. */
:where(:root[data-page="department-totals"]) .dt-emp-table td.dt-emp-clickable:hover .dt-pay-pill{background:var(--blue-lt)!important;color:var(--blue)!important}
/* Worked / PTO hours cells: only the inner value pill highlights on hover. */
:where(:root[data-page="department-totals"]) .dt-emp-table td.dt-hours-cell{cursor:pointer}
:where(:root[data-page="department-totals"]) .dt-emp-table td.dt-hours-cell .dt-hours-pill{
  display:inline-block;padding:3px 9px;margin-right:-9px;border-radius:5px;
  font-weight:600;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap;
  transition:background .12s,color .12s
}
:where(:root[data-page="department-totals"]) .dt-emp-table td.dt-hours-cell:hover .dt-hours-pill{background:var(--blue-lt);color:var(--blue)}
:where(:root[data-page="department-totals"]) .dt-emp-table .num{text-align:right;font-weight:600}
/* Number pills are pulled flush right (margin-right:-9px) so their digits end
   12px from the cell edge, matching the plain-text header and footer. */
:where(:root[data-page="department-totals"]) .dt-emp-table th.dt-sort-th[style*="text-align:right"]{padding-right:12px}
:where(:root[data-page="department-totals"]) .dt-emp-table th.dt-emp-num,:where(:root[data-page="department-totals"]) .dt-emp-table th.dt-sort-th[style*="text-align:left"]{padding-left:12px}
:where(:root[data-page="department-totals"]) .dt-emp-table .dt-punch{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text2)}
:where(:root[data-page="department-totals"]) .dt-emp-table .rate{text-align:right;font-weight:500;color:var(--text3)}
:where(:root[data-page="department-totals"]) .dt-emp-table .rate.unknown{color:var(--text3);font-weight:500;font-style:italic}
:where(:root[data-page="department-totals"]) .dt-emp-table tfoot td{background:var(--bg2);font-weight:700;border-top:2px solid var(--border);border-bottom:none;text-align:right}
:where(:root[data-page="department-totals"]) .dt-emp-table tfoot td:first-child{text-align:left}
/* Body numeric values sit inside pills with 9px inner padding; match that on
   the footer totals so the digits line up vertically with the columns above. */
:where(:root[data-page="department-totals"]) .dt-emp-table tfoot td.num{padding-right:12px;padding-left:12px}
/* Body rows read as plain text; only the Total (footer) row is bold, so the
   eye lands on the totals. Overrides every per-value weight above. */
:where(:root[data-page="department-totals"]) .dt-emp-table tbody td,
:where(:root[data-page="department-totals"]) .dt-emp-table tbody td *{font-weight:400 !important}
:where(:root[data-page="department-totals"]) .dt-emp-table tfoot td,
:where(:root[data-page="department-totals"]) .dt-emp-table tfoot td *{font-weight:700 !important}

/* All-view detail table: fixed layout + colgroup gives the numeric
   columns (Hours, Dollars, Regular, OT, Retro, Other) identical widths
   so the buckets line up uniformly. Long values ellipsize rather than
   widening their column. */
:where(:root[data-page="department-totals"]) .dt-emp-table.dt-emp-all{table-layout:fixed;min-width:100%}
/* When the All view's fixed columns total wider than the modal, scroll
   horizontally rather than collapsing the employee-name column. */
:where(:root[data-page="department-totals"]) #dtCellBody{overflow-x:auto}
:where(:root[data-page="department-totals"]) .dt-emp-table.dt-emp-all th,
:where(:root[data-page="department-totals"]) .dt-emp-table.dt-emp-all td{overflow:visible;text-overflow:clip}
:where(:root[data-page="department-totals"]) .dt-emp-table.dt-emp-all td:first-child{white-space:normal}

/* Employee week-over-week trend line (Level 1). */
:where(:root[data-page="department-totals"]) .dt-emp-trend{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 14px 12px;margin-bottom:14px
}
:where(:root[data-page="department-totals"]) .dt-emp-trend-title{font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
:where(:root[data-page="department-totals"]) .dt-emp-trend-canvas{position:relative;height:130px}
/* Trend title + pager on one row in the employee view. The title rule keeps
   its own bottom margin; this just spreads the two apart. */
:where(:root[data-page="department-totals"]) .dt-emp-trend-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
:where(:root[data-page="department-totals"]) .dt-emp-trend-head .dt-emp-trend-title{margin-bottom:0}

/* -- Period pager (older / newer through the visible window) -----------
   Used on the dashboard (chart head) and in the employee detail. A pair of
   compact buttons flanking a "X-Y of Z" range label. */
:where(:root[data-page="department-totals"]) .dt-pager{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
:where(:root[data-page="department-totals"]) .dt-pager-btn{
  display:inline-flex;align-items:center;gap:3px;
  background:#fff;border:1px solid var(--border);border-radius:8px;
  padding:4px 9px;font-size:11.5px;font-weight:600;color:var(--text2);
  font-family:inherit;cursor:pointer;transition:border-color .12s,background .12s,color .12s;
  white-space:nowrap
}
:where(:root[data-page="department-totals"]) .dt-pager-btn svg{display:block;flex-shrink:0}
:where(:root[data-page="department-totals"]) .dt-pager-btn:hover:not([disabled]){border-color:var(--blue);color:var(--blue);background:var(--blue-lt)}
:where(:root[data-page="department-totals"]) .dt-pager-btn[disabled]{opacity:.4;cursor:not-allowed}
:where(:root[data-page="department-totals"]) .dt-pager-label{font-size:11px;color:var(--text3);font-weight:500;
  font-variant-numeric:tabular-nums;white-space:nowrap;min-width:78px;text-align:center}
:where(:root[data-page="department-totals"]) .dt-pager-label-strong{font-size:12px;color:var(--text);font-weight:600;min-width:0}

/* Employee week-over-week matrix (code x week). Fills the (wide) modal so
   typical week counts fit without a horizontal scrollbar; only scrolls
   when an unusually long span genuinely overflows. The Code column stays
   pinned on scroll. */
:where(:root[data-page="department-totals"]) .dt-emp-matrix-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
:where(:root[data-page="department-totals"]) .dt-emp-matrix{font-variant-numeric:tabular-nums;width:100%}
:where(:root[data-page="department-totals"]) .dt-emp-matrix th,
:where(:root[data-page="department-totals"]) .dt-emp-matrix td{padding:5px 8px}
:where(:root[data-page="department-totals"]) .dt-emp-matrix thead th:first-child,
:where(:root[data-page="department-totals"]) .dt-emp-matrix tbody td:first-child,
:where(:root[data-page="department-totals"]) .dt-emp-matrix tfoot td:first-child{
  position:sticky;left:0;background:var(--nx-surface);z-index:1;text-align:left;min-width:108px;white-space:nowrap
}
:where(:root[data-page="department-totals"]) .dt-emp-matrix thead th:first-child,
:where(:root[data-page="department-totals"]) .dt-emp-matrix tfoot td:first-child{background:var(--bg2)}
:where(:root[data-page="department-totals"]) .dt-emp-matrix .dt-wk-col{cursor:pointer}
:where(:root[data-page="department-totals"]) .dt-emp-matrix .dt-wk-col:hover{color:var(--blue)}
:where(:root[data-page="department-totals"]) .dt-emp-matrix td.dt-wk-cell{cursor:pointer}
:where(:root[data-page="department-totals"]) .dt-emp-matrix td.dt-wk-cell .dt-wk-pill{
  display:inline-block;padding:3px 9px;border-radius:5px;
  font-weight:600;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap;
  transition:background .12s,color .12s
}
:where(:root[data-page="department-totals"]) .dt-emp-matrix td.dt-wk-cell:hover .dt-wk-pill{background:var(--blue-lt);color:var(--blue)}

/* Single continuous charge-date table: one sticky column header at the top,
   date-section rows, and a grand-total footer. The wrap is overflow:visible
   so position:sticky resolves to the modal body (#dtEmpBody), the real
   vertical scroll container. */
:where(:root[data-page="department-totals"]) .dt-emp-charge-single-wrap{overflow:visible}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-charge-single-wrap{border:none;border-radius:0}
/* Frozen "All payrolls" bar at the very top of the single-payroll view -
   stays put while the line table scrolls. */
:where(:root[data-page="department-totals"]) .dt-emp-week-bar{
  position:sticky;top:0;z-index:4;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 2px;margin-bottom:8px;background:var(--nx-surface);
  border-bottom:1px solid var(--border)
}
:where(:root[data-page="department-totals"]) .dt-emp-week-back{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--blue);font-weight:600;text-decoration:none}
:where(:root[data-page="department-totals"]) .dt-emp-week-back:hover{text-decoration:underline}
:where(:root[data-page="department-totals"]) .dt-emp-week-title{font-size:12px;font-weight:600;color:var(--text2)}
/* Column header sticks to the top of the scrolling modal body. The card
   header above it is not sticky, so the offset is 0. */
:where(:root[data-page="department-totals"]) table.dt-emp-charge-single thead tr.dt-charge-colhead th{
  position:sticky;top:0;z-index:3;background:var(--bg2);
  box-shadow:inset 0 -1px 0 var(--border)
}
:where(:root[data-page="department-totals"]) table.dt-emp-charge-single tr.dt-charge-date-row td{
  background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  font-size:12px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;
  text-transform:none;letter-spacing:-.01em
}
:where(:root[data-page="department-totals"]) table.dt-emp-charge-single tr.dt-charge-date-row td.num{text-align:right}
:where(:root[data-page="department-totals"]) table.dt-emp-charge-single tr.dt-charge-date-row td.dt-charge-date-lbl{text-align:left}
:where(:root[data-page="department-totals"]) table.dt-emp-charge-single tfoot tr.dt-charge-grand td{
  background:var(--bg2);border-top:2px solid var(--border);border-bottom:none;
  font-size:12px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums
}
:where(:root[data-page="department-totals"]) table.dt-emp-charge-single tfoot tr.dt-charge-grand td.num{text-align:right}
/* Fixed column layout for the charge-date sub-blocks so every block's
   columns line up vertically regardless of each day's content width.
   Columns: Facility, Department, Pay type, Code, Time in, Time out,
   Hours, Dollars. */
:where(:root[data-page="department-totals"]) table.dt-emp-charge{table-layout:fixed}
:where(:root[data-page="department-totals"]) table.dt-emp-charge th,
:where(:root[data-page="department-totals"]) table.dt-emp-charge td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="department-totals"]) table.dt-emp-charge col.c-fac{width:22%}
:where(:root[data-page="department-totals"]) table.dt-emp-charge col.c-dept{width:28%}
:where(:root[data-page="department-totals"]) table.dt-emp-charge col.c-code{width:12%}
:where(:root[data-page="department-totals"]) table.dt-emp-charge col.c-in{width:12%}
:where(:root[data-page="department-totals"]) table.dt-emp-charge col.c-out{width:12%}
:where(:root[data-page="department-totals"]) table.dt-emp-charge col.c-hrs{width:7%}
:where(:root[data-page="department-totals"]) table.dt-emp-charge col.c-amt{width:7%}
:where(:root[data-page="department-totals"]) table.dt-emp-charge td.num,
:where(:root[data-page="department-totals"]) table.dt-emp-charge th[style*="text-align:right"]{text-align:right}
/* Fixed layout for the code x payroll matrix - the colgroup widths are
   emitted inline by dtRenderEmpHistory (Code + N periods + Total) in pixels.
   width:auto + min-width:100% lets the table grow to the sum of its columns
   (scrolling the wrap) when there are many payrolls, while still filling the
   modal when there are few. No ellipsis - every dollar value shows in full. */
:where(:root[data-page="department-totals"]) table.dt-emp-matrix-fixed{table-layout:fixed;width:auto;min-width:100%}
:where(:root[data-page="department-totals"]) table.dt-emp-matrix-fixed th,
:where(:root[data-page="department-totals"]) table.dt-emp-matrix-fixed td{white-space:nowrap}
/* With every filtered payroll as a column the matrix scrolls sideways - keep
   the Code column pinned so each row stays readable. */
:where(:root[data-page="department-totals"]) table.dt-emp-matrix-fixed th:first-child,
:where(:root[data-page="department-totals"]) table.dt-emp-matrix-fixed td:first-child{position:sticky;left:0;z-index:2;background:var(--nx-elev,#fff)}
:where(:root[data-page="department-totals"]) table.dt-emp-matrix-fixed thead th:first-child{z-index:3}

/* Colored pill around a bucket dollar amount (Regular/OT/Bonus/Retro/Other).
   Wraps just the number so the value reads in its bucket color rather than
   tinting the whole column. */
:where(:root[data-page="department-totals"]) .dt-pay-pill{
  display:inline-block;padding:3px 9px;border-radius:5px;
  font-weight:700;font-variant-numeric:tabular-nums;line-height:1.4;
  white-space:nowrap
}

/* Week line-breakdown selection (level 3). The clicked code's lines are
   highlighted; the rest dim so the matching set stands out. */
:where(:root[data-page="department-totals"]) .dt-wk-line.dt-line-selected td{background:var(--blue-lt)!important}
:where(:root[data-page="department-totals"]) .dt-wk-line.dt-line-selected td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
:where(:root[data-page="department-totals"]) .dt-wk-line.dt-line-dim td{opacity:.45}

/* -- Check-detail timeline (replaces the old line table) --------------- */
:where(:root[data-page="department-totals"]) .dt-tl-context{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text2);
  padding:12px 16px 10px}
:where(:root[data-page="department-totals"]) .dt-tl-ctx-ic{width:13px;height:13px;flex-shrink:0;background:currentColor;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;
  -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="2" width="7" height="12" rx="1" stroke="black" stroke-width="1.3"/><path d="M9.5 6h4v8h-4M4.5 5h1M4.5 7.5h1M4.5 10h1M11.5 8.5h.5M11.5 11h.5" stroke="black" stroke-width="1.1" stroke-linecap="round"/></svg>');
  mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="2" width="7" height="12" rx="1" stroke="black" stroke-width="1.3"/><path d="M9.5 6h4v8h-4M4.5 5h1M4.5 7.5h1M4.5 10h1M11.5 8.5h.5M11.5 11h.5" stroke="black" stroke-width="1.1" stroke-linecap="round"/></svg>');color:var(--text3)}
/* Two-column day cards. Days flow left column then right; each card holds its
   shifts and the day's total, hugging the content instead of stretching. */
:where(:root[data-page="department-totals"]) .dt-tl-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;padding:6px 16px 10px}
:where(:root[data-page="department-totals"]) .dt-tl-card{display:flex;gap:10px;padding:7px 6px;border-bottom:1px solid var(--nx-line,#ECEDF2);
  border-radius:6px;cursor:pointer;transition:background .1s}
:where(:root[data-page="department-totals"]) .dt-tl-card:hover{background:var(--bg2,#F8FAFC)}
:where(:root[data-page="department-totals"]) .dt-tl-card-main{flex:1;min-width:0}
:where(:root[data-page="department-totals"]) .dt-tl-card-date{font-size:12.5px;font-weight:700;color:var(--text,#1B1D29);letter-spacing:-.01em;margin-bottom:3px}
:where(:root[data-page="department-totals"]) .dt-tl-dow{color:var(--text3);font-weight:400}
:where(:root[data-page="department-totals"]) .dt-tl-lines{display:flex;flex-direction:column;gap:3px}
:where(:root[data-page="department-totals"]) .dt-tl-line{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;font-variant-numeric:tabular-nums}
/* Punch pairs stack one per line so a shift with two in/out sets reads down. */
:where(:root[data-page="department-totals"]) .dt-tl-punch{color:var(--text2);min-width:0;display:flex;flex-direction:column;gap:1px;padding-top:1px}
:where(:root[data-page="department-totals"]) .dt-tl-pair{white-space:nowrap}
:where(:root[data-page="department-totals"]) .dt-tl-shift-loc{color:var(--text3);font-size:11px;padding-top:1px}
:where(:root[data-page="department-totals"]) .dt-tl-shift-nums{color:var(--text2);font-size:11px;padding-top:1px;white-space:nowrap}
/* Retro days get a red accent on the date so they stand out. */
:where(:root[data-page="department-totals"]) .dt-tl-card-retro .dt-tl-card-date{color:#B91C1C}
/* Day total, right-aligned inside the card. */
:where(:root[data-page="department-totals"]) .dt-tl-card-tot{text-align:right;white-space:nowrap;font-size:11.5px;font-variant-numeric:tabular-nums;padding-top:1px}
:where(:root[data-page="department-totals"]) .dt-tl-card-hrs{display:block;color:var(--text2)}
:where(:root[data-page="department-totals"]) .dt-tl-card-amt{display:block;font-weight:700;color:var(--text,#1B1D29)}
/* Code-highlight selection on a whole day card. */
:where(:root[data-page="department-totals"]) .dt-tl-card.dt-line-selected{background:var(--blue-lt)!important;box-shadow:inset 3px 0 0 var(--blue)}
:where(:root[data-page="department-totals"]) .dt-tl-card.dt-line-dim{opacity:.4}
/* Grand total footer. */
:where(:root[data-page="department-totals"]) .dt-tl-grand{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:11px 16px;border-top:1px solid var(--nx-line,#ECEDF2);margin-top:2px}
:where(:root[data-page="department-totals"]) .dt-tl-grand-lbl{font-size:12px;font-weight:700;color:var(--text,#1B1D29)}
:where(:root[data-page="department-totals"]) .dt-tl-grand-tot{font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
:where(:root[data-page="department-totals"]) .dt-tl-grand-hrs{color:var(--text2);margin-right:10px}
:where(:root[data-page="department-totals"]) .dt-tl-grand-amt{font-weight:700}
/* On a narrow modal (or mobile embed) collapse to a single column. */
@media (max-width:720px){ :where(:root[data-page="department-totals"]) .dt-tl-grid{grid-template-columns:1fr;gap:0} }

/* -- Simple line-item list (amount click) ------------------------------ */
:where(:root[data-page="department-totals"]) .dt-li-table{width:100%;border-collapse:collapse}
:where(:root[data-page="department-totals"]) .dt-li-table th{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  color:var(--text3);padding:8px 14px;border-bottom:1px solid var(--nx-line,#ECEDF2)}
:where(:root[data-page="department-totals"]) .dt-li-row{cursor:pointer}
:where(:root[data-page="department-totals"]) .dt-li-row td{padding:5px 14px;border-bottom:1px solid var(--nx-line,#ECEDF2);font-size:11.5px;font-variant-numeric:tabular-nums}
:where(:root[data-page="department-totals"]) .dt-li-row:hover td{background:var(--bg2,#F8FAFC)}
:where(:root[data-page="department-totals"]) .dt-li-date{color:var(--text2)}
:where(:root[data-page="department-totals"]) .dt-li-row.dt-line-selected td{background:var(--blue-lt)!important}
:where(:root[data-page="department-totals"]) .dt-li-row.dt-line-selected td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
:where(:root[data-page="department-totals"]) .dt-li-row.dt-line-dim td{opacity:.4}
:where(:root[data-page="department-totals"]) .dt-li-foot td{padding:9px 14px;font-size:12px;font-weight:700;color:var(--text,#1B1D29);
  border-top:1px solid var(--nx-line,#ECEDF2)}
:where(:root[data-page="department-totals"]) .dt-li-table tfoot .num{font-variant-numeric:tabular-nums}
/* "View timecard" button in the line-items header. */
:where(:root[data-page="department-totals"]) .dt-view-tc-btn{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;
  color:var(--blue,#018B46);background:var(--blue-lt,#E6F4EC);border:1px solid transparent;
  border-radius:8px;padding:5px 11px;cursor:pointer;line-height:1;transition:background .12s,border-color .12s}
:where(:root[data-page="department-totals"]) .dt-view-tc-btn:hover{background:#D3ECDD;border-color:var(--blue,#018B46)}
/* Timecard (times) table: date, time in, time out. */
:where(:root[data-page="department-totals"]) .dt-tc-table{width:100%;border-collapse:collapse}
:where(:root[data-page="department-totals"]) .dt-tc-table th{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  color:var(--text3);padding:8px 14px;border-bottom:1px solid var(--nx-line,#ECEDF2)}
:where(:root[data-page="department-totals"]) .dt-tc-row td{padding:4px 14px;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--text2)}
:where(:root[data-page="department-totals"]) .dt-tc-date{color:var(--text,#1B1D29);font-weight:600}
/* A subtle divider above the first row of each new day. */
:where(:root[data-page="department-totals"]) .dt-tc-daytop td{border-top:1px solid var(--nx-line,#ECEDF2)}
:where(:root[data-page="department-totals"]) .dt-tc-table tbody tr:first-child td{border-top:none}

:where(:root[data-page="department-totals"]) .dt-summary-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px
}
:where(:root[data-page="department-totals"]) .dt-summary-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 12px
}
:where(:root[data-page="department-totals"]) .dt-summary-label{font-size:9.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
:where(:root[data-page="department-totals"]) .dt-summary-val{font-size:16px;font-weight:700;color:var(--text);letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
:where(:root[data-page="department-totals"]) .dt-summary-card.rate{background:var(--blue-lt);border-color:var(--blue-lt)}
:where(:root[data-page="department-totals"]) .dt-summary-card.rate .dt-summary-val{color:var(--blue)}

/* -- Dollar-breakdown strip (All-view cell modal) ---------------------
   Shown above the employee table in the cell drill-down when the active
   tab is "All". Mirrors the chart palette so the same color always means
   the same dollar type. */
:where(:root[data-page="department-totals"]) .dt-bd-wrap{
  background:var(--nx-surface,#fff);border:1px solid var(--nx-line,#ECEDF2);border-radius:14px;
  padding:16px 18px;margin-bottom:16px;
  box-shadow:0 1px 2px rgba(16,18,26,.04)
}
:where(:root[data-page="department-totals"]) .dt-bd-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
:where(:root[data-page="department-totals"]) .dt-bd-title{font-size:10.5px;font-weight:700;color:var(--nx-ink3,#9499AB);text-transform:uppercase;letter-spacing:.07em}
:where(:root[data-page="department-totals"]) .dt-bd-total{font-size:15px;font-weight:800;color:var(--nx-ink,#1B1D29);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
:where(:root[data-page="department-totals"]) .dt-bd-bar{
  display:flex;height:9px;width:100%;border-radius:6px;overflow:hidden;
  background:var(--nx-line,#ECEDF2);margin-bottom:14px;gap:2px
}
:where(:root[data-page="department-totals"]) .dt-bd-bar span{display:block;height:100%;border-radius:3px}
:where(:root[data-page="department-totals"]) .dt-bd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
:where(:root[data-page="department-totals"]) .dt-bd-card{
  display:flex;flex-direction:column;gap:6px;
  background:var(--nx-rail,#FBFBFD);border:1px solid var(--nx-line,#ECEDF2);border-radius:10px;
  padding:11px 13px
}
:where(:root[data-page="department-totals"]) .dt-bd-swatch{width:8px;height:8px;border-radius:2px;flex:0 0 8px;display:inline-block;vertical-align:middle;margin-right:5px}
:where(:root[data-page="department-totals"]) .dt-bd-meta{min-width:0;flex:1}
:where(:root[data-page="department-totals"]) .dt-bd-label{font-size:9.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center}
:where(:root[data-page="department-totals"]) .dt-bd-val{font-size:14px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
:where(:root[data-page="department-totals"]) .dt-bd-sub{font-size:10.5px;color:var(--text3);margin-top:1px;font-variant-numeric:tabular-nums}
@media (max-width: 640px){
  :where(:root[data-page="department-totals"]) .dt-bd-grid{grid-template-columns:repeat(2,1fr)}
}

/* Generic toast (matches the rest of the portal). */
:where(:root[data-page="department-totals"]) .dt-toast{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  padding:11px 16px;border-radius:var(--radius);background:var(--text);
  color:#fff;font-size:12.5px;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,.18);
  opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;
  pointer-events:none
}
:where(:root[data-page="department-totals"]) .dt-toast.show{opacity:1;transform:translateY(0)}
:where(:root[data-page="department-totals"]) .dt-toast.err{background:var(--red)}
:where(:root[data-page="department-totals"]) .dt-toast.ok{background:var(--green)}

:where(:root[data-page="department-totals"]) .dt-empty{padding:40px 20px;text-align:center;color:var(--text3);font-size:12.5px}
:where(:root[data-page="department-totals"]) .dt-loading{padding:30px 16px;text-align:center;color:var(--text3);font-size:12px}

/* -- Upload History: facility filter + bulk delete ------------------------ */
:where(:root[data-page="department-totals"]) .dt-uploads-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Keep View + Delete on one line (they were wrapping in the narrow Actions
   column, stacking vertically). nowrap + an inline-flex wrapper holds them
   side by side. */
:where(:root[data-page="department-totals"]) .dt-action-cell{white-space:nowrap}
:where(:root[data-page="department-totals"]) .dt-action-cell .dt-action-group{display:inline-flex;gap:6px;justify-content:flex-end}
/* Bulk action bar above the table, visible only with a live selection. */
:where(:root[data-page="department-totals"]) .dt-bulkbar{
  display:flex;align-items:center;gap:10px;margin:0 16px 12px;
  padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--blue-lt)
}
:where(:root[data-page="department-totals"]) .dt-bulk-count{font-size:12px;font-weight:600;color:var(--blue)}
/* Row-select checkbox column. */
:where(:root[data-page="department-totals"]) .dt-chk-col{width:34px;text-align:center}
:where(:root[data-page="department-totals"]) .dt-chk-col input{cursor:pointer}
:where(:root[data-page="department-totals"]) tr.dt-row-selected td{background:var(--blue-lt)!important}

/* Upload-page drop zone (financials-style): dashed box, click to browse,
   drag-over highlight. */
:where(:root[data-page="department-totals"]) .dt-dropzone{
  display:flex;align-items:center;gap:12px;justify-content:center;
  margin:16px;padding:18px 16px;cursor:pointer;
  border:2px dashed var(--border2);border-radius:var(--radius-lg);
  background:var(--bg2);color:var(--text2);
  transition:border-color .12s,background .12s,color .12s
}
:where(:root[data-page="department-totals"]) .dt-dropzone:hover{border-color:#B3B7BC;background:var(--bg)}
:where(:root[data-page="department-totals"]) .dt-dropzone.is-drag{border:2px dashed var(--blue);background:var(--blue-lt);color:var(--blue)}
:where(:root[data-page="department-totals"]) .dt-dropzone svg{flex-shrink:0;color:var(--text3)}
:where(:root[data-page="department-totals"]) .dt-dropzone.is-drag svg{color:var(--blue)}
:where(:root[data-page="department-totals"]) .dt-dropzone-text{display:flex;flex-direction:column;line-height:1.3}
:where(:root[data-page="department-totals"]) .dt-dropzone-text strong{font-size:13px;font-weight:600;letter-spacing:-.01em}
:where(:root[data-page="department-totals"]) .dt-dropzone-text span{font-size:11.5px;color:var(--text3)}

/* -- Per-file upload status panel (financials-style) ---------------------
   A bordered card listing each file in the current upload batch with a
   status icon, the filename, a result/progress line, and the file size. */
:where(:root[data-page="department-totals"]) .dt-upload-panel{
  margin:0 16px 16px;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--nx-surface);overflow:hidden
}
:where(:root[data-page="department-totals"]) .dt-upload-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 14px;border-bottom:1px solid var(--border);background:var(--bg2);
  font-size:11px;font-weight:600;color:var(--text3);
  text-transform:uppercase;letter-spacing:.06em
}
:where(:root[data-page="department-totals"]) .dt-upload-panel-clear{
  background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:11px;font-weight:600;color:var(--blue);letter-spacing:0;
  text-transform:none;padding:2px 4px;border-radius:4px
}
:where(:root[data-page="department-totals"]) .dt-upload-panel-clear:hover{background:var(--blue-lt)}
:where(:root[data-page="department-totals"]) .dt-upload-panel-list{display:flex;flex-direction:column}
:where(:root[data-page="department-totals"]) .dt-fileitem{
  display:flex;align-items:center;gap:11px;padding:10px 14px;
  border-bottom:1px solid #F1F3F4
}
:where(:root[data-page="department-totals"]) .dt-fileitem:last-child{border-bottom:none}
:where(:root[data-page="department-totals"]) .dt-fileitem.ok{background:#FBFDFB}
:where(:root[data-page="department-totals"]) .dt-fileitem.err{background:#FFFBFB}
:where(:root[data-page="department-totals"]) .dt-fileitem-ic{flex-shrink:0;width:16px;height:16px;display:block}
:where(:root[data-page="department-totals"]) .dt-fileitem-body{flex:1;min-width:0}
:where(:root[data-page="department-totals"]) .dt-fileitem-name{
  font-size:12.5px;font-weight:600;color:var(--text);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
:where(:root[data-page="department-totals"]) .dt-fileitem-msg{font-size:11px;color:var(--text2);margin-top:2px}
:where(:root[data-page="department-totals"]) .dt-fileitem.err .dt-fileitem-msg{color:var(--red)}
:where(:root[data-page="department-totals"]) .dt-fileitem.ok  .dt-fileitem-msg{color:var(--green)}
:where(:root[data-page="department-totals"]) .dt-fileitem-size{flex-shrink:0;font-size:10.5px;color:var(--text3);font-variant-numeric:tabular-nums}

:where(:root[data-page="department-totals"]) .dt-retro-badge{
  display:inline-block;padding:1px 6px;border-radius:4px;
  font-size:9.5px;font-weight:700;background:var(--amber-lt);color:var(--amber-text);
  letter-spacing:.04em;text-transform:uppercase;margin-left:4px
}

/* -- Print stylesheet (fallback) -----------------------------------------
   The "Print / PDF" button opens a dedicated, cleanly-formatted print
   window (see dtPrintPdf), which is the primary path. This @media print
   block is a sensible fallback for a direct browser Ctrl+P on the live
   app: it strips chrome and lets the dashboard flow onto pages.
   Landscape + reduced margins so the wide deptxperiod table fits across
   the page without horizontal clipping. */
@page pg-department-totals{ size: landscape; margin: 0.4in; }
@media print{
  /* Hide chrome */
  :where(:root[data-page="department-totals"]) .sidebar, :where(:root[data-page="department-totals"]) .topbar, :where(:root[data-page="department-totals"]) .dt-upload-status, :where(:root[data-page="department-totals"]) .dt-toast,
  :where(:root[data-page="department-totals"]) .modal-overlay, :where(:root[data-page="department-totals"]) .panel-action, :where(:root[data-page="department-totals"]) #dtTabs,
  :where(:root[data-page="department-totals"]) .dt-topbar-scope{
    display:none!important
  }
  /* Let the main column take the full page width */
  html:where([data-page="department-totals"]),:where(:root[data-page="department-totals"]) body{background:#fff;width:100%;margin:0;padding:0}
  :where(:root[data-page="department-totals"]) .shell{display:block;width:100%}
  :where(:root[data-page="department-totals"]) .main{margin:0;padding:0;width:100%}
  :where(:root[data-page="department-totals"]) .scroll-area{overflow:visible;padding:0;width:100%}
  :where(:root[data-page="department-totals"]) .page{display:block!important}
  :where(:root[data-page="department-totals"]) #page-uploads{display:none!important}
  /* Show all cells of the grid - no horizontal scroll on paper. The
     table is allowed to size to its content so nothing clips. */
  :where(:root[data-page="department-totals"]) .dt-grid-wrap{max-height:none;overflow:visible!important;border:none;width:100%}
  :where(:root[data-page="department-totals"]) .dt-grid-table{font-size:8.5px;min-width:0;width:100%;table-layout:auto}
  :where(:root[data-page="department-totals"]) .dt-grid-table thead th,
  :where(:root[data-page="department-totals"]) .dt-grid-table tbody td,
  :where(:root[data-page="department-totals"]) .dt-grid-table tfoot td{
    padding:3px 4px;white-space:nowrap;overflow:visible
  }
  /* Department column: allow wrapping but cap its width so the numeric
     columns get the room they need. */
  :where(:root[data-page="department-totals"]) .dt-grid-table tbody td:first-child,
  :where(:root[data-page="department-totals"]) .dt-grid-table thead th:first-child,
  :where(:root[data-page="department-totals"]) .dt-grid-table tfoot td:first-child{
    white-space:normal;word-break:break-word;max-width:130px
  }
  :where(:root[data-page="department-totals"]) .dt-grid-table thead th{position:static;background:#fff!important;color:#000!important}
  :where(:root[data-page="department-totals"]) .dt-grid-table tbody td:first-child,
  :where(:root[data-page="department-totals"]) .dt-grid-table thead th:first-child,
  :where(:root[data-page="department-totals"]) .dt-grid-table tfoot td:first-child{position:static;background:#fff!important}
  :where(:root[data-page="department-totals"]) .dt-grid-table tbody td{background:#fff!important;color:#000!important}
  :where(:root[data-page="department-totals"]) .dt-grid-table tfoot td{position:static;background:#F4F4F4!important;color:#000!important}
  /* Avoid breaking rows across pages */
  :where(:root[data-page="department-totals"]) .dt-grid-table tr{page-break-inside:avoid}
  /* Make the cell pills invisible - print just the number */
  :where(:root[data-page="department-totals"]) .dt-grid-cell{background:transparent!important;color:#000!important;
    padding:0!important;font-weight:600}
  :where(:root[data-page="department-totals"]) .dt-grid-cell.zero{color:#888!important}
  /* Chart panel shrinks to fit */
  :where(:root[data-page="department-totals"]) .dt-chart-canvas-wrap{height:120px}
  :where(:root[data-page="department-totals"]) .dt-chart-wrap{page-break-after:avoid}
  /* Print header - synthesized by dtPrintPdf() */
  :where(:root[data-page="department-totals"]) .dt-print-header{display:block!important;margin:0 0 12px}
  :where(:root[data-page="department-totals"]) .dt-print-header h1{font-size:16px;margin:0 0 4px;color:#000}
  :where(:root[data-page="department-totals"]) .dt-print-header .meta{font-size:10.5px;color:#555}
}
:where(:root[data-page="department-totals"]) .dt-print-header{display:none}

/* ── Comparison sub-page ──────────────────────────────────────────────── */
/* The table itself is the dashboard's .dt-grid-table, so it inherits every
   theme, hover and sticky-column rule already written for it. What is here
   is only what the comparison adds: the controls row, the two-line column
   headers (facility over how many pay dates it has), and the high/low marks
   that answer "which home is the outlier" at a glance. */
:where(:root[data-page="department-totals"]) .dt-cmp-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
:where(:root[data-page="department-totals"]) .dt-cmp-bar .dt-cmp-spacer{margin-left:auto}
:where(:root[data-page="department-totals"]) .dt-cmp-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3)}
:where(:root[data-page="department-totals"]) .dt-cmp-sel{
  appearance:none;-webkit-appearance:none;
  background:var(--nx-elev) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.5L8 10.5l4-4' stroke='%239499AB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
  background-size:14px;
  border:1px solid var(--border2);border-radius:9px;
  padding:7px 28px 7px 10px;font:inherit;font-size:12.5px;font-weight:600;
  color:var(--text);cursor:pointer;min-width:132px;
}
:where(:root[data-page="department-totals"]) .dt-cmp-sel:focus{outline:2px solid var(--brand-lt);outline-offset:1px}
/* Segmented view switch (Total / Per pay date / Mix). Same shape language as
   the chart-type group beside the trend card. */
:where(:root[data-page="department-totals"]) .dt-cmp-seg{display:inline-flex;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:2px;gap:2px}
:where(:root[data-page="department-totals"]) .dt-cmp-seg-btn{
  border:none;background:none;font:inherit;font-size:12px;font-weight:600;
  color:var(--text2);padding:6px 11px;border-radius:8px;cursor:pointer;white-space:nowrap;
}
:where(:root[data-page="department-totals"]) .dt-cmp-seg-btn:hover{color:var(--text)}
:where(:root[data-page="department-totals"]) .dt-cmp-seg-btn.active{background:var(--nx-elev);color:var(--brand);box-shadow:0 1px 2px rgba(16,24,40,.06)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-cmp-seg-btn.active{box-shadow:none;background:var(--nx-elev)}
/* Two-line facility header: the home's name, and under it how many pay dates
   of its own fall in the window. Unequal counts are what make a straight
   column-to-column read misleading, so they are on the page, not implied. */
:where(:root[data-page="department-totals"]) .dt-cmp-th{line-height:1.25}
:where(:root[data-page="department-totals"]) .dt-cmp-th-name{display:block}
:where(:root[data-page="department-totals"]) .dt-cmp-th-sub{display:block;font-size:10px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text3)}
:where(:root[data-page="department-totals"]) .dt-cmp-th-sub.odd{color:var(--nx-down)}
/* High and low of each row. Only drawn when the row actually spreads - a
   department that costs the same everywhere has no outlier to point at. */
:where(:root[data-page="department-totals"]) .dt-cmp-hi{color:var(--nx-down);font-weight:700}
:where(:root[data-page="department-totals"]) .dt-cmp-lo{color:var(--nx-up)}
:where(:root[data-page="department-totals"]) .dt-cmp-spread{font-variant-numeric:tabular-nums;color:var(--text2);font-weight:600}
:where(:root[data-page="department-totals"]) .dt-cmp-spread.wide{color:var(--nx-down)}
:where(:root[data-page="department-totals"]) .dt-grid-table tbody td.dt-cmp-spread-cell,
:where(:root[data-page="department-totals"]) .dt-grid-table tfoot td.dt-cmp-spread-cell{border-left:1px solid var(--border2)}
/* Legend under the card head, so the colours are explained once. */
:where(:root[data-page="department-totals"]) .dt-cmp-key{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text3);font-weight:500}
:where(:root[data-page="department-totals"]) .dt-cmp-key i{width:7px;height:7px;border-radius:2px;display:inline-block}
:where(:root[data-page="department-totals"]) .dt-cmp-key i.hi{background:var(--nx-down)}
:where(:root[data-page="department-totals"]) .dt-cmp-key i.lo{background:var(--nx-up)}
/* ── One payroll (#page-week) ─────────────────────────────────────────── */
/* Same table and controls row as the comparison. Adds the back button and
   title, the payroll dates in the dashboard table's head that open it, the
   rule between the hours and dollars blocks, and over / under budget. */
:where(:root[data-page="department-totals"]) .dt-wk-back{display:inline-flex;align-items:center;gap:6px}
:where(:root[data-page="department-totals"]) .dt-wk-back svg{width:14px;height:14px}
:where(:root[data-page="department-totals"]) .dt-wk-titles{display:flex;flex-direction:column;gap:1px;margin-left:4px;min-width:0}
:where(:root[data-page="department-totals"]) .dt-wk-title{font-size:16px;font-weight:700;color:var(--text)}
:where(:root[data-page="department-totals"]) .dt-wk-sub{font-size:12px;color:var(--text3)}
:where(:root[data-page="department-totals"]) .dt-cmp-seg-btn:disabled{opacity:.4;cursor:default}
:where(:root[data-page="department-totals"]) .dt-cmp-seg-btn:disabled:hover{color:var(--text2)}
:where(:root[data-page="department-totals"]) .dt-grid-table thead th.dt-wk-link{cursor:pointer}
:where(:root[data-page="department-totals"]) .dt-grid-table thead th.dt-wk-link:hover{color:var(--brand);text-decoration:underline}
:where(:root[data-page="department-totals"]) .dt-wk-table thead th.dt-wk-sep,
:where(:root[data-page="department-totals"]) .dt-wk-table tbody td.dt-wk-sep,
:where(:root[data-page="department-totals"]) .dt-wk-table tfoot td.dt-wk-sep{border-left:1px solid var(--border2)}
:where(:root[data-page="department-totals"]) .dt-wk-over{color:var(--nx-down)}
:where(:root[data-page="department-totals"]) .dt-wk-under{color:var(--nx-up)}
:where(:root[data-page="department-totals"]) .dt-wk-table tr.dt-wk-shared{cursor:default}
:where(:root[data-page="department-totals"]) .dt-wk-shared-sub{display:block;font-size:11px;font-weight:400;color:var(--text3);white-space:normal;max-width:260px}
/* ==== Bridge between DT page classes and the Nexus shell ==== */
/* The DT logic targets some classes by name; make sure they sit correctly in
   the Nexus layout. Most styling comes from the two blocks above. */
:where(:root[data-page="department-totals"]) .nx-scroll .page{display:none}
:where(:root[data-page="department-totals"]) .nx-scroll .page.active{display:block}

/* Standalone: this page owns its frame. Embedded: the shell owns it. */
/* When embedded, lock the app to fill the iframe exactly so .nx-scroll is the
   ONLY scroller. Keyed off body.embed (server-rendered) and html.cr-embed
   (added by JS) so it works without relying on :has() support. */
:where(:root[data-page="department-totals"]) body.embed{height:100%;min-height:0;overflow:hidden;background:var(--nx-surface)}
html.cr-embed:where([data-page="department-totals"]){height:100%;min-height:0;overflow:hidden;background:var(--nx-surface)}
:where(:root[data-page="department-totals"]) body.embed .nx-app{margin:0;border:none;border-radius:0;height:100%;min-height:0;max-width:none;grid-template-columns:1fr;grid-template-rows:100%;box-shadow:none;background:var(--nx-surface);overflow:hidden}
:where(:root[data-page="department-totals"]) body.embed .nx-main{min-height:0;height:100%;overflow:hidden}
:where(:root[data-page="department-totals"]) body.embed .nx-rail{display:none}
:where(:root[data-page="department-totals"]) body.embed .nx-topbar{display:none}
:where(:root[data-page="department-totals"]) body.embed .nx-scroll{padding:20px 22px 26px;position:relative}
/* In embed mode the shell renders the lightbulb in its own header (right of
   Sync), so hide this frame's copy of the button. The dropdown still lives
   here -- float it top-right, just under the shell header, when opened. */
:where(:root[data-page="department-totals"]) body.embed .dt-insights-menu{position:static}
:where(:root[data-page="department-totals"]) body.embed .dt-insights-btn{display:none}
:where(:root[data-page="department-totals"]) body.embed .dt-insights-pop{position:fixed;top:12px;right:16px;z-index:9999}
/* Greeting/title removed in embed - the dashboard shell already shows it.
   Collapse the empty pagehead so the content sits at the top. */
:where(:root[data-page="department-totals"]) body.embed .nx-pagehead{display:none}

/* DT period bar + tabs spacing inside the Nexus scroll */
:where(:root[data-page="department-totals"]) .dt-period-bar{margin-bottom:16px}
:where(:root[data-page="department-totals"]) .dt-tabs{margin-bottom:16px}
:where(:root[data-page="department-totals"]) .dt-tabsrow{margin-bottom:16px}

/* Keep the DT toast above the Nexus app frame */
:where(:root[data-page="department-totals"]) .dt-toast{z-index:99999}

/* Sub-nav item icons inherit currentColor */
:where(:root[data-page="department-totals"]) .nx-subitem svg{flex:0 0 auto}

/* ============================================================================
   Nexus modals + popups -- cohesive look across all DT dialogs.
   Matches the dashboard's drawer/pop aesthetic: deeper rounding, elevated
   surface, soft blurred backdrop, rail-colored headers, pill action buttons.
   ========================================================================== */
:where(:root[data-page="department-totals"]) .modal-overlay{background:rgba(16,18,26,.52);backdrop-filter:blur(6px) saturate(115%);-webkit-backdrop-filter:blur(6px) saturate(115%)}
:where(:root[data-page="department-totals"]) .modal{
  background:var(--nx-surface,#fff);
  border:1px solid var(--nx-line2,#E2E4EC);
  border-radius:20px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 80px rgba(16,18,26,.32),0 8px 24px rgba(16,18,26,.14);
  padding:0;
  overflow:hidden;
  display:flex;flex-direction:column;
  max-height:92vh;
}
:root[data-theme="dark"]:where([data-page="department-totals"]) .modal{box-shadow:0 30px 80px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.4)}
:where(:root[data-page="department-totals"]) .modal.dt-confirm{max-height:none}

/* Modal header -> clean Nexus bar: title icon chip, title + subtitle, close.
   A hairline accent sits under the header to echo the topbar. */
:where(:root[data-page="department-totals"]) .dt-modal-head{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;margin:0;
  border-bottom:1px solid var(--nx-line,#ECEDF2);
  background:linear-gradient(180deg,var(--nx-rail,#FBFBFD) 0%,var(--nx-surface,#fff) 100%);
}
:where(:root[data-page="department-totals"]) .dt-modal-head::after{
  content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--brand,#018B46) 0%,transparent 42%);
  opacity:.9;border-radius:2px;
}
:where(:root[data-page="department-totals"]) .dt-modal-head>div:first-child{display:flex;align-items:center;gap:12px;min-width:0}
/* Whatever the header carries on the right - the Agency switch, the close
   button - travels as one group so space-between still pushes it to the
   far edge and the title keeps the rest. */
:where(:root[data-page="department-totals"]) .dt-modal-head-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
/* Title icon chip -- same language as the KPI chips */
:where(:root[data-page="department-totals"]) .dt-modal-ico{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-lt,#E7F3EC);color:var(--brand,#018B46);
}
:where(:root[data-page="department-totals"]) .dt-modal-ico svg{width:18px;height:18px;display:block}
:where(:root[data-page="department-totals"]) .dt-modal-head .dt-modal-titles{min-width:0}
:where(:root[data-page="department-totals"]) .dt-modal-head h3{font-size:15px;font-weight:700;color:var(--nx-ink,#1B1D29);letter-spacing:-.01em;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="department-totals"]) .dt-modal-head .sub{font-size:11.5px;color:var(--nx-ink3,#9499AB);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="department-totals"]) .dt-modal-close{
  width:32px;height:32px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--nx-line2,#E2E4EC);background:var(--nx-elev,#fff);
  border-radius:10px;color:var(--nx-ink3,#9499AB);cursor:pointer;
  font-size:0;line-height:0;padding:0;
  transition:border-color .12s,color .12s,background .12s,transform .12s;
}
:where(:root[data-page="department-totals"]) .dt-modal-close::before{content:"";width:13px;height:13px;background:currentColor;
  -webkit-mask:no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  mask:no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");}
:where(:root[data-page="department-totals"]) .dt-modal-close:hover{border-color:var(--nx-ink3,#9499AB);color:var(--nx-ink,#1B1D29);background:var(--nx-rail,#FBFBFD);transform:rotate(90deg)}

/* Modal body padding (the header/footer are flush; body gets the gutter) */
:where(:root[data-page="department-totals"]) .dt-confirm-body{padding:18px 20px}
/* Employee popup body: white, like the cell popup, boxes+cards inside. */
:where(:root[data-page="department-totals"]) #dtEmpBody{padding:16px 18px;background:var(--nx-surface,#fff)}
:where(:root[data-page="department-totals"]) #dtEmpBody .nx-card{margin-bottom:14px}
:where(:root[data-page="department-totals"]) #dtEmpBody .nx-card:last-child{margin-bottom:0}
/* Trend chart card: give the canvas room. */
:where(:root[data-page="department-totals"]) .dt-emp-chart-card .nx-card-body{padding:8px 14px 14px}
:where(:root[data-page="department-totals"]) .dt-emp-chart-card .dt-emp-trend-canvas{position:relative;height:150px}
/* Cell drill-down body: white, boxes + a card inside. */
:where(:root[data-page="department-totals"]) #dtCellBody{padding:16px 18px;background:var(--nx-surface,#fff)}

/* KPI box row (mirrors the dashboard's pd-kpi grid) */
:where(:root[data-page="department-totals"]) .dt-kpi-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;margin-bottom:14px
}
/* Popup boxes are a touch smaller than the dashboard's own KPI boxes. On the
   white body they take the rail fill so they stay visible. */
:where(:root[data-page="department-totals"]) .dt-kpi-row .pd-kpi{padding:12px 13px;border-radius:12px;background:var(--nx-rail,#FBFBFD)}
:where(:root[data-page="department-totals"]) .dt-kpi-row .pd-kpi-top{margin-bottom:9px;gap:8px}
:where(:root[data-page="department-totals"]) .dt-kpi-row .pd-kpi-chip{width:26px;height:26px;border-radius:8px}
:where(:root[data-page="department-totals"]) .dt-kpi-row .pd-kpi-chip svg{width:14px;height:14px}
:where(:root[data-page="department-totals"]) .dt-kpi-row .pd-kpi-label{font-size:11.5px}
:where(:root[data-page="department-totals"]) .dt-kpi-row .pd-kpi-val{font-size:20px}
:where(:root[data-page="department-totals"]) .dt-kpi-row .pd-kpi-foot{margin-top:7px}

/* Employee list card: table lives inside a dashboard nx-card now. Note:
   no overflow:hidden on the card or its body -- it would break the sticky
   header. Corners stay tidy because the header background fills the top and
   the footer fills the bottom, both matching the card radius. */
:where(:root[data-page="department-totals"]) .dt-emp-card{overflow:visible}
:where(:root[data-page="department-totals"]) .dt-emp-card .nx-card-head{border-top-left-radius:var(--nx-radius);border-top-right-radius:var(--nx-radius)}
:where(:root[data-page="department-totals"]) .dt-emp-card-body{padding:0;overflow:auto;max-height:52vh}
:where(:root[data-page="department-totals"]) .dt-emp-card-body:has(.dt-emp-charge-single){border-top:1px solid var(--nx-line)}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-table tfoot td:first-child{border-bottom-left-radius:var(--nx-radius)}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-table tfoot td:last-child{border-bottom-right-radius:var(--nx-radius)}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-table{font-size:12.5px}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-table thead th{position:sticky;top:0;z-index:2}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-table th{
  border-radius:0;padding:10px 14px;font-size:10.5px;
  background:var(--nx-rail);border-top:none;border-bottom:none;
  box-shadow:inset 0 1px 0 var(--nx-line), inset 0 -1px 0 var(--nx-line)
}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-charge-single thead tr.dt-charge-colhead th{border-top:none}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-table td{padding:11px 14px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-charge-single td{padding:6px 14px}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-matrix td,
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-matrix th{padding:6px 14px}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-charge-single tr.dt-charge-date-row td{padding:5px 14px}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-table tbody tr:last-child td{border-bottom:none}
/* Zebra striping so rows are easy to follow across the wide table. */
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-table tbody tr:nth-child(even) td{background:var(--nx-rail)}
/* The check view groups rows under gray date headers, so striping the
   line rows on top of that reads as noise. Keep every line row white. */
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-charge-single tbody tr.dt-wk-line td{background:var(--nx-elev,#fff)}
:where(:root[data-page="department-totals"]) .dt-emp-charge-single tbody tr.dt-wk-line{cursor:default}
/* Split line: a single timecard line broken across rows (one in/out pair
   each). Same height on every row, no border between them, and a left
   accent bar so the group reads as one line. */
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-charge-single tbody tr.dt-split td{height:33px;box-sizing:border-box}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-charge-single tbody tr.dt-split-first td{border-bottom:none}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-charge-single tbody tr.dt-split-cont td.dt-punch{color:var(--text2)}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-charge-single tbody tr.dt-split-cont td.dt-punch:first-of-type{position:relative}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-charge-single tbody tr.dt-split-cont td.dt-punch:first-of-type::before{content:"\21B3";color:var(--text3);margin-right:6px;font-size:11px}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-table tbody tr:hover td{background:var(--nx-hover)}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-charge-single tbody tr.dt-wk-line:hover td{background:var(--nx-hover)}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-table tfoot td{padding:11px 14px;border-top:1px solid var(--nx-line2)}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-table tfoot td.num{padding-right:14px}
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-charge-single tfoot td,
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-matrix tfoot td{padding:6px 14px}
/* Divider before the pay-type columns, separating them from Dollars. */
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-table th.dt-bucket-sep,
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-table td.dt-bucket-sep{border-left:1px solid var(--nx-line2)}
/* Pay-type amounts: colored number, no pill background. */
:where(:root[data-page="department-totals"]) .dt-bucket-amt{font-weight:600;font-variant-numeric:tabular-nums;display:inline-block;padding:3px 9px;margin-right:-9px;border-radius:7px;transition:background .12s}
/* On hover, the amount gets a soft background in that pay type's color. */
:where(:root[data-page="department-totals"]) .dt-emp-card .dt-emp-table td.dt-bucket-cell:hover .dt-bucket-amt{background:var(--bkbg)}

/* Confirm dialog footer -> pill buttons */
:where(:root[data-page="department-totals"]) .dt-confirm-body{font-size:13px;color:var(--nx-ink2);line-height:1.55}
:where(:root[data-page="department-totals"]) .dt-confirm-body strong{color:var(--nx-ink);font-weight:600}
:where(:root[data-page="department-totals"]) .dt-confirm-actions{
  display:flex;justify-content:flex-end;gap:10px;
  padding:14px 20px;border-top:1px solid var(--nx-line);background:var(--nx-rail);
}

/* Tables inside modals -> Nexus chrome */
:where(:root[data-page="department-totals"]) .dt-emp-table th,
:where(:root[data-page="department-totals"]) .dt-emp-matrix thead th,
:where(:root[data-page="department-totals"]) table.dt-emp-charge-single thead tr.dt-charge-colhead th{
  background:var(--nx-rail);color:var(--nx-ink3);
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:1px solid var(--nx-line);
}
:where(:root[data-page="department-totals"]) .dt-emp-table td,:where(:root[data-page="department-totals"]) .dt-emp-matrix td{border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="department-totals"]) .dt-emp-table tbody tr:hover td{background:var(--nx-hover)}

/* Summary / breakdown cards inside modals -> rounded Nexus tiles */
:where(:root[data-page="department-totals"]) .dt-summary-card,:where(:root[data-page="department-totals"]) .dt-bd-wrap,:where(:root[data-page="department-totals"]) .dt-bd-card,:where(:root[data-page="department-totals"]) .dt-emp-trend,
:where(:root[data-page="department-totals"]) .dt-emp-matrix-wrap{
  border-radius:12px;border:1px solid var(--nx-line);
}
:where(:root[data-page="department-totals"]) .dt-summary-card.rate{background:var(--brand-lt);border-color:var(--brand-lt)}

/* Pay pills + value pills keep their accent colors but match rounding */
:where(:root[data-page="department-totals"]) .dt-pay-pill,:where(:root[data-page="department-totals"]) .dt-emp-amt,:where(:root[data-page="department-totals"]) .dt-hours-pill,:where(:root[data-page="department-totals"]) .dt-wk-pill{border-radius:7px}

/* KPI chip accents (theme-aware) */
:where(:root[data-page="department-totals"]) .pd-kpi-chip.chip-indigo{background:#E8EEFB;color:var(--nx-indigo)}
:where(:root[data-page="department-totals"]) .pd-kpi-chip.chip-amber{background:#FEF3D7;color:#B7791F}
:root[data-theme="dark"]:where([data-page="department-totals"]) .pd-kpi-chip.chip-indigo{background:#1B2740;color:#7FA0F5}
:root[data-theme="dark"]:where([data-page="department-totals"]) .pd-kpi-chip.chip-amber{background:var(--amber-lt);color:var(--amber-text)}

/* ============================================================================
   Dark-mode overrides for DT surfaces that were hard-coded light hexes.
   Light mode is untouched; these only apply under [data-theme="dark"], pointing
   the fixed greys/whites at the dark tokens so nothing stays bright.
   ========================================================================== */
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-wrap,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-mc,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-chart-wrap,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-insights,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-upload-panel,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-emp-week-bar,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-combo-pop,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-combo-btn,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-combo-search input,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-map-sel{background:var(--nx-elev)}

/* Grid table: sticky cells + group/total rows must match the dark surface */
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table thead th,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table thead th:first-child{background:var(--nx-rail)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table thead th.dt-total-col{background:var(--nx-rail)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody td{border-bottom-color:var(--nx-line)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody td:first-child{background:var(--nx-elev)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody tr:hover td,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody tr:hover td:first-child{background:var(--nx-hover)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody td.dt-total{background:var(--nx-rail)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody tr:hover td.dt-total{background:var(--nx-hover)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody tr.dt-grp td,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody tr.dt-grp td:first-child{background:var(--nx-rail) !important;color:var(--nx-ink3)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tfoot td,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tfoot td:first-child{background:var(--nx-rail)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tfoot td.dt-total{background:var(--nx-line)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-grid-table tbody td.dt-cell-clickable:hover .dt-grid-cell{background:var(--brand-lt);color:var(--brand)}

/* Employee modal tables / matrices: sticky first columns + headers */
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-emp-table th,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-emp-table tfoot td,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-emp-matrix thead th:first-child,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-emp-matrix tfoot td:first-child,
:root[data-theme="dark"]:where([data-page="department-totals"]) table.dt-emp-charge-single thead tr.dt-charge-colhead th,
:root[data-theme="dark"]:where([data-page="department-totals"]) table.dt-emp-charge-single tr.dt-charge-date-row td,
:root[data-theme="dark"]:where([data-page="department-totals"]) table.dt-emp-charge-single tfoot tr.dt-charge-grand td{background:var(--nx-rail)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-emp-matrix tbody td:first-child{background:var(--nx-elev)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-emp-table td,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-emp-matrix td{border-bottom-color:var(--nx-line)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-emp-table tbody tr:hover td{background:var(--nx-hover)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-summary-card,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-bd-wrap,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-bd-card,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-emp-trend{background:var(--nx-rail)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-bd-bar{background:var(--nx-line)}

/* Insight cards: neutral fill on dark; severity shows only in the left rail
   and icon, matching the light rebuild. */
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-insight{background:var(--nx-elev);border-color:var(--nx-line)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-insight.sev-high{border-left-color:var(--red)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-insight.sev-high .dt-insight-ico{background:var(--red-lt);color:var(--red)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-insight.sev-warn{border-left-color:var(--amber)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-insight.sev-warn .dt-insight-ico{background:#3A3416;color:var(--amber-text)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-insight.sev-info{border-left-color:var(--brand)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-insight.sev-info .dt-insight-ico{background:var(--brand-lt);color:var(--brand)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-insight-detail{border-top-color:var(--nx-line)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-itbl-wrap{background:var(--nx-elev);border-color:var(--nx-line)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-itbl thead th{background:var(--nx-rail);border-bottom-color:var(--nx-line)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-itbl tbody td{border-bottom-color:var(--nx-line)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-itbl-link:hover td{background:var(--nx-hover)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-itbl-num.is-up{color:#34D399}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-itbl-num.is-down{color:var(--red)}

/* Dropzone + file rows + tabs */
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-dropzone{background:var(--nx-rail);border-color:var(--nx-line2)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-fileitem{border-bottom-color:var(--nx-line)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-fileitem.ok{background:#152418}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-fileitem.err{background:#2A1A1A}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-tabs{background:transparent}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-tab{background:transparent;border-color:transparent}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-tab.active{background:transparent;color:var(--brand)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-tab-slider{background:var(--brand-lt)}

/* Map page rows + the attention/upload status pills */
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-map-table td{border-bottom-color:var(--nx-line)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-upload-status{background:var(--nx-rail);border-color:var(--nx-line2)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-upload-panel-head{background:var(--nx-rail)}

/* =======================================================================
   NEXUS RESTYLE -- Upload History + Code Mapping pages.
   Declared last so it wins the cascade over the legacy rules above.
   Goal: both pages read as native Nexus (token colors, rail-colored
   uppercase headers, pill tabs, nx-radius inputs, full dark mode).
   ======================================================================= */

/* ---- Upload History: table inside the nx-card ------------------------- */
:where(:root[data-page="department-totals"]) #page-uploads .tbl-wrap{
  border-top:1px solid var(--nx-line);
  border-radius:0 0 var(--nx-radius) var(--nx-radius);
  overflow-x:auto;overflow-y:visible;background:var(--nx-elev)
}
:where(:root[data-page="department-totals"]) #page-uploads table{
  width:100%;border-collapse:collapse;
  font-variant-numeric:tabular-nums;min-width:920px
}
:where(:root[data-page="department-totals"]) #page-uploads thead th{
  background:var(--nx-rail);border-bottom:1px solid var(--nx-line);
  padding:10px 14px;font-size:10.5px;font-weight:700;color:var(--nx-ink3);
  text-transform:uppercase;letter-spacing:.05em;text-align:left;white-space:nowrap
}
:where(:root[data-page="department-totals"]) #page-uploads thead th[style*="right"]{text-align:right}
:where(:root[data-page="department-totals"]) #page-uploads tbody td{
  padding:12px 14px;border-bottom:1px solid var(--nx-line);
  font-size:12.5px;color:var(--nx-ink);vertical-align:middle;white-space:nowrap
}
:where(:root[data-page="department-totals"]) #page-uploads tbody tr:last-child td{border-bottom:none}
:where(:root[data-page="department-totals"]) #page-uploads tbody tr:hover td{background:var(--nx-hover)}
:where(:root[data-page="department-totals"]) #page-uploads .emp-name{font-weight:600;color:var(--nx-ink);letter-spacing:-.01em}
:where(:root[data-page="department-totals"]) #page-uploads .dt-chk-col{width:34px;text-align:center}
:where(:root[data-page="department-totals"]) #page-uploads .dt-loading{color:var(--nx-ink3)}

/* Small row action buttons -> Nexus pill look */
:where(:root[data-page="department-totals"]) #page-uploads .dt-action-group .btn{
  border:1px solid var(--nx-line2);background:var(--nx-elev);border-radius:9px;
  padding:5px 12px;font-size:11.5px;font-weight:600;color:var(--nx-ink);
  cursor:pointer;transition:border-color .12s,background .12s;font-family:inherit
}
:where(:root[data-page="department-totals"]) #page-uploads .dt-action-group .btn:hover{border-color:var(--nx-ink3);background:var(--nx-hover)}
:where(:root[data-page="department-totals"]) #page-uploads .dt-action-group .btn.danger{color:var(--red);border-color:var(--nx-line2)}
:where(:root[data-page="department-totals"]) #page-uploads .dt-action-group .btn.danger:hover{border-color:var(--red);background:var(--nx-down-bg)}

/* Bulk action bar -> soft brand-tinted Nexus card */
:where(:root[data-page="department-totals"]) .dt-bulkbar{
  display:flex;align-items:center;gap:10px;margin:0 17px 14px;
  padding:10px 14px;border:1px solid var(--brand);border-radius:var(--nx-radius-sm);
  background:var(--brand-lt)
}
:where(:root[data-page="department-totals"]) .dt-bulk-count{font-size:12px;font-weight:700;color:var(--brand)}
:where(:root[data-page="department-totals"]) tr.dt-row-selected td{background:var(--brand-lt)!important}

/* Facility picker button inside the card head */
:where(:root[data-page="department-totals"]) #page-uploads .dt-combo-btn{
  background:var(--nx-elev);border:1px solid var(--nx-line2);
  border-radius:var(--nx-radius-sm);color:var(--nx-ink)
}
:where(:root[data-page="department-totals"]) #page-uploads .dt-combo-btn:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="department-totals"]) #page-uploads .dt-combo-pop{
  background:var(--nx-elev);border:1px solid var(--nx-line2);
  border-radius:var(--nx-radius-sm);box-shadow:0 12px 32px rgba(20,22,28,.18)
}

/* ---- Code Mapping: card, pill tabs, table --------------------------- */
:where(:root[data-page="department-totals"]) .dt-map-tabs{
  display:inline-flex;gap:6px;margin:14px 17px 18px;padding:0;border-bottom:none
}
:where(:root[data-page="department-totals"]) .dt-map-tab{
  appearance:none;border:1px solid var(--nx-line2);background:var(--nx-surface);
  border-radius:9px;padding:7px 14px;margin:0;
  font-family:var(--font);font-size:12px;font-weight:600;color:var(--nx-ink2);
  cursor:pointer;letter-spacing:-.01em;transition:color .12s,border-color .12s,background .12s;outline:none
}
:where(:root[data-page="department-totals"]) .dt-map-tab:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="department-totals"]) .dt-map-tab.active{color:var(--brand);border-color:var(--brand);background:var(--brand-lt)}

:where(:root[data-page="department-totals"]) .dt-map-head{align-items:center}
:where(:root[data-page="department-totals"]) .dt-map-sub{color:var(--nx-ink3)}
:where(:root[data-page="department-totals"]) .dt-map-search{
  padding:8px 12px;border:1px solid var(--nx-line2);border-radius:var(--nx-radius-sm);
  font-family:var(--font);font-size:13px;color:var(--nx-ink);
  background:var(--nx-elev);min-width:210px
}
:where(:root[data-page="department-totals"]) .dt-map-search:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(1,139,70,.08)}

:where(:root[data-page="department-totals"]) .dt-map-table th{
  background:var(--nx-rail);color:var(--nx-ink3);
  border-bottom:1px solid var(--nx-line);padding:9px 12px
}
:where(:root[data-page="department-totals"]) .dt-map-table td{padding:10px 12px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="department-totals"]) .dt-map-table tbody tr:hover td,:where(:root[data-page="department-totals"]) .dt-map-table tbody tr:hover td{background:var(--nx-hover)}
:where(:root[data-page="department-totals"]) .dt-map-code{color:var(--nx-ink)}
/* Keep the code and its "manual" badge on one line, side by side, rather
   than letting the badge wrap underneath in the narrow code column. */
:where(:root[data-page="department-totals"]) .dt-map-table td:first-child{white-space:nowrap}
:where(:root[data-page="department-totals"]) .dt-map-table col.c-code{width:22%}
:where(:root[data-page="department-totals"]) .dt-map-table col.c-desc{width:28%}
:where(:root[data-page="department-totals"]) .dt-map-desc{color:var(--nx-ink2)}
:where(:root[data-page="department-totals"]) .dt-map-rule{color:var(--nx-ink3)}
:where(:root[data-page="department-totals"]) .dt-map-empty{color:var(--nx-ink3)}
:where(:root[data-page="department-totals"]) .dt-map-sel{
  padding:7px 10px;border:1px solid var(--nx-line2);border-radius:9px;
  font-family:var(--font);font-size:12.5px;color:var(--nx-ink);
  background:var(--nx-elev);cursor:pointer;width:100%;max-width:170px
}
:where(:root[data-page="department-totals"]) .dt-map-sel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px rgba(1,139,70,.08)}
:where(:root[data-page="department-totals"]) .dt-map-sel.overridden{border-color:var(--brand);box-shadow:0 0 0 2px rgba(1,139,70,.10)}
:where(:root[data-page="department-totals"]) .dt-map-badge.over{background:var(--brand-lt);color:var(--brand)}

/* ---- Dark mode for both restyled pages ------------------------------ */
:root[data-theme="dark"]:where([data-page="department-totals"]) #page-uploads .tbl-wrap{background:var(--nx-elev);border-top-color:var(--nx-line)}
:root[data-theme="dark"]:where([data-page="department-totals"]) #page-uploads thead th{background:var(--nx-rail);border-bottom-color:var(--nx-line)}
:root[data-theme="dark"]:where([data-page="department-totals"]) #page-uploads tbody td{border-bottom-color:var(--nx-line);color:var(--nx-ink)}
:root[data-theme="dark"]:where([data-page="department-totals"]) #page-uploads tbody tr:hover td{background:var(--nx-hover)}
:root[data-theme="dark"]:where([data-page="department-totals"]) #page-uploads .dt-action-group .btn{background:var(--nx-elev)}
:root[data-theme="dark"]:where([data-page="department-totals"]) #page-uploads .dt-action-group .btn:hover{background:var(--nx-hover)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-map-tab{background:var(--nx-elev);border-color:var(--nx-line2);color:var(--nx-ink2)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-map-tab.active{background:var(--brand-lt);border-color:var(--brand);color:var(--brand)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-map-search{background:var(--nx-elev);border-color:var(--nx-line2)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-map-table th{background:var(--nx-rail);color:var(--nx-ink3);border-bottom-color:var(--nx-line)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-map-table td{border-bottom-color:var(--nx-line)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-map-table tbody tr:hover td{background:var(--nx-hover)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-map-sel{background:var(--nx-elev);border-color:var(--nx-line2)}

/* ---- Drop notification ---------------------------------------------
   The button sits with Excel in the page actions (CareRite Services only);
   this is its dialog. */
:where(:root[data-page="department-totals"]) .dt-notify-modal{width:min(680px,94vw);max-height:88vh}
:where(:root[data-page="department-totals"]) .dt-notify-body{padding:4px 20px 18px;overflow:auto}
:where(:root[data-page="department-totals"]) .dt-notify-sec{margin-top:16px}
:where(:root[data-page="department-totals"]) .dt-notify-sec:first-child{margin-top:8px}
:where(:root[data-page="department-totals"]) .dt-notify-lbl{
  display:block;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--nx-ink3);margin-bottom:7px
}
:where(:root[data-page="department-totals"]) .dt-notify-lbl .dt-notify-lbl-note{
  text-transform:none;letter-spacing:0;font-weight:500;color:var(--nx-ink3)
}
:where(:root[data-page="department-totals"]) .dt-notify-input,:where(:root[data-page="department-totals"]) .dt-notify-area{
  width:100%;box-sizing:border-box;
  padding:9px 12px;border:1px solid var(--nx-line2);border-radius:10px;
  font-family:var(--font);font-size:13px;color:var(--nx-ink);background:var(--nx-elev)
}
:where(:root[data-page="department-totals"]) .dt-notify-area{min-height:70px;resize:vertical;line-height:1.5}
:where(:root[data-page="department-totals"]) .dt-notify-input:focus,:where(:root[data-page="department-totals"]) .dt-notify-area:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(1,139,70,.08)
}

/* One row per company: tick it to tell that company. */
:where(:root[data-page="department-totals"]) .dt-notify-list{
  border:1px solid var(--nx-line2);border-radius:10px;overflow:hidden;
  max-height:230px;overflow-y:auto;background:var(--nx-elev)
}
:where(:root[data-page="department-totals"]) .dt-notify-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-bottom:1px solid var(--nx-line);cursor:pointer
}
:where(:root[data-page="department-totals"]) .dt-notify-row:last-child{border-bottom:none}
:where(:root[data-page="department-totals"]) .dt-notify-row:hover{background:var(--nx-hover)}
:where(:root[data-page="department-totals"]) .dt-notify-row input{margin:2px 0 0 0;cursor:pointer;flex:none}
:where(:root[data-page="department-totals"]) .dt-notify-row.is-empty{cursor:not-allowed;opacity:.55}
:where(:root[data-page="department-totals"]) .dt-notify-row-main{min-width:0;flex:1}
/* The four lines of a company row stack; they are spans inside a span, so
   each one has to be told to take a line of its own. */
:where(:root[data-page="department-totals"]) .dt-notify-co,:where(:root[data-page="department-totals"]) .dt-notify-facs,:where(:root[data-page="department-totals"]) .dt-notify-who,:where(:root[data-page="department-totals"]) .dt-notify-last{display:block}
:where(:root[data-page="department-totals"]) .dt-notify-co{font-size:13px;font-weight:600;color:var(--nx-ink);letter-spacing:-.01em}
/* The homes this company is being told about - the subject of the email, so
   it sits directly under the name and reads darker than the recipient list. */
:where(:root[data-page="department-totals"]) .dt-notify-facs{font-size:11.5px;font-weight:600;color:var(--nx-ink2);margin-top:3px;line-height:1.45}
:where(:root[data-page="department-totals"]) .dt-notify-facs.warn{color:var(--amber,#C77700);font-weight:500}
:where(:root[data-page="department-totals"]) .dt-notify-who{font-size:11.5px;color:var(--nx-ink3);margin-top:2px;line-height:1.45}
:where(:root[data-page="department-totals"]) .dt-notify-last{font-size:11px;color:var(--nx-ink3);margin-top:3px}
:where(:root[data-page="department-totals"]) .dt-notify-last.warn{color:var(--amber,#C77700)}
/* Check-date picker: a native select wearing the same skin as the inputs. */
:where(:root[data-page="department-totals"]) .dt-notify-date{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%238A8F98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center
}
:where(:root[data-page="department-totals"]) .dt-notify-datesub{font-size:11.5px;color:var(--nx-ink3);margin-top:6px}
:where(:root[data-page="department-totals"]) .dt-notify-n{
  font-size:10.5px;font-weight:700;color:var(--brand);background:var(--brand-lt);
  border-radius:20px;padding:2px 9px;flex:none;white-space:nowrap
}
:where(:root[data-page="department-totals"]) .dt-notify-n.zero{color:var(--nx-ink3);background:var(--nx-hover)}
:where(:root[data-page="department-totals"]) .dt-notify-selall{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:7px;
  font-size:11.5px;font-weight:600;color:var(--nx-ink2);cursor:pointer
}

/* CC chips */
:where(:root[data-page="department-totals"]) .dt-cc-wrap{
  border:1px solid var(--nx-line2);border-radius:10px;padding:10px 11px;background:var(--nx-elev)
}
:where(:root[data-page="department-totals"]) .dt-cc-chips{display:flex;flex-wrap:wrap;gap:6px}
:where(:root[data-page="department-totals"]) .dt-cc-chip{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  background:var(--nx-hover);border:1px solid var(--nx-line2);border-radius:20px;
  padding:4px 6px 4px 11px;font-size:12px;color:var(--nx-ink2)
}
:where(:root[data-page="department-totals"]) .dt-cc-chip.readonly{padding-right:11px}
:where(:root[data-page="department-totals"]) .dt-cc-chip b{font-weight:600;color:var(--nx-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="department-totals"]) .dt-cc-x{
  appearance:none;border:none;background:transparent;cursor:pointer;
  color:var(--nx-ink3);font-size:15px;line-height:1;padding:0 3px;border-radius:50%
}
:where(:root[data-page="department-totals"]) .dt-cc-x:hover{color:var(--red)}
:where(:root[data-page="department-totals"]) .dt-cc-add{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
:where(:root[data-page="department-totals"]) .dt-cc-add .dt-notify-input{flex:1;min-width:150px;padding:7px 11px;font-size:12.5px}
:where(:root[data-page="department-totals"]) .dt-cc-empty{font-size:12px;color:var(--nx-ink3)}
/* Settings > Notifications. One column, a heading and a line of explanation
   over the same chips the dialog uses - nothing here needs a card of its own. */
:where(:root[data-page="department-totals"]) .dt-set-sec{padding-top:15px;max-width:620px}
:where(:root[data-page="department-totals"]) .dt-set-h{margin:0;font-size:13.5px;font-weight:600;color:var(--nx-ink);letter-spacing:-.01em}
:where(:root[data-page="department-totals"]) .dt-set-p{margin:5px 0 12px 0;font-size:12.5px;line-height:1.55;color:var(--nx-ink3)}
/* The import cron's heartbeat. Green while it is keeping time, red when the
   last run failed or is older than the hour it is supposed to run on. */
:where(:root[data-page="department-totals"]) .dt-run{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--nx-line);
        border-radius:var(--nx-radius-sm);background:var(--nx-surface);font-size:12.5px;color:var(--nx-ink2)}
:where(:root[data-page="department-totals"]) .dt-run-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--nx-up)}
:where(:root[data-page="department-totals"]) .dt-run b{color:var(--nx-ink);font-weight:600}
:where(:root[data-page="department-totals"]) .dt-run.warn{border-color:var(--nx-down);background:var(--nx-down-bg)}
:where(:root[data-page="department-totals"]) .dt-run.warn .dt-run-dot{background:var(--nx-down)}
:where(:root[data-page="department-totals"]) .dt-run.idle .dt-run-dot{background:var(--nx-ink3)}
:where(:root[data-page="department-totals"]) .dt-run-note{margin:7px 0 0 0;font-size:12px;line-height:1.5;color:var(--nx-ink3)}
/* Settings page: one column, hairlines between rows. */
:where(:root[data-page="department-totals"]) .dt-set-card{padding:4px 20px 22px}
:where(:root[data-page="department-totals"]) .dt-set-card .dt-set-sec + .dt-set-sec{margin-top:18px}
:where(:root[data-page="department-totals"]) .dt-set-search{width:100%;max-width:360px;box-sizing:border-box;margin-bottom:8px}
:where(:root[data-page="department-totals"]) .dt-set-list{border-top:1px solid var(--nx-line)}
:where(:root[data-page="department-totals"]) .dt-set-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--nx-line);font-size:13px;cursor:pointer}
:where(:root[data-page="department-totals"]) .dt-set-row.readonly{cursor:default}
:where(:root[data-page="department-totals"]) .dt-set-row input{margin:0;flex:none;cursor:inherit}
:where(:root[data-page="department-totals"]) .dt-set-name{color:var(--nx-ink);font-weight:500;min-width:0}
:where(:root[data-page="department-totals"]) .dt-set-mail{color:var(--nx-ink3);font-size:12px;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="department-totals"]) .dt-set-rm{margin-left:10px;border:0;background:none;padding:0;color:var(--nx-ink3);font-size:12px;cursor:pointer;flex:none}
:where(:root[data-page="department-totals"]) .dt-set-rm:hover{color:var(--red)}
:where(:root[data-page="department-totals"]) .dt-set-empty{padding:10px 2px;font-size:12.5px;color:var(--nx-ink3);border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="department-totals"]) .dt-set-card .dt-cc-add{margin-top:10px}

:where(:root[data-page="department-totals"]) .dt-notify-foot{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:14px 20px;border-top:1px solid var(--nx-line);background:var(--nx-rail)
}
:where(:root[data-page="department-totals"]) .dt-notify-count{font-size:12px;color:var(--nx-ink3)}
:where(:root[data-page="department-totals"]) .dt-notify-count b{color:var(--nx-ink2);font-weight:600}
:where(:root[data-page="department-totals"]) .dt-notify-modal .nx-btn[disabled]{opacity:.5;cursor:not-allowed}

/* Per-company outcome after a send. */
:where(:root[data-page="department-totals"]) .dt-notify-result{margin-top:14px;border-top:1px solid var(--nx-line);padding-top:12px}
:where(:root[data-page="department-totals"]) .dt-notify-result-row{display:flex;gap:8px;align-items:baseline;font-size:12.5px;padding:3px 0}
:where(:root[data-page="department-totals"]) .dt-notify-result-row .ok{color:var(--brand);font-weight:700}
:where(:root[data-page="department-totals"]) .dt-notify-result-row .bad{color:var(--red);font-weight:700}
:where(:root[data-page="department-totals"]) .dt-notify-result-err{font-size:11.5px;color:var(--nx-ink3)}

:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-notify-input,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-notify-area,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-notify-list,
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-cc-wrap{background:var(--nx-elev);border-color:var(--nx-line2)}
:root[data-theme="dark"]:where([data-page="department-totals"]) .dt-notify-foot{background:var(--nx-rail);border-top-color:var(--nx-line)}
:where(:root[data-page="department-totals"]) .nx-user-pop.open{display:block;animation:pdPop .16s ease}
:where(:root[data-page="department-totals"]) .modal.dt-confirm.dt-newcodes{width:600px}
:where(:root[data-page="department-totals"]) .dt-newcodes-intro{margin-bottom:12px}
:where(:root[data-page="department-totals"]) .dt-newcodes .dt-map-table col.c-nc-code{width:24%}
:where(:root[data-page="department-totals"]) .dt-newcodes .dt-map-table col.c-nc-seen{width:44%}
:where(:root[data-page="department-totals"]) .dt-newcodes .dt-map-table col.c-nc-bucket{width:32%}
:where(:root[data-page="department-totals"]) .dt-newcodes .dt-nc-wrap{max-height:50vh;overflow-y:auto}
:where(:root[data-page="department-totals"]) .dt-newcodes .dt-nc-seen{font-size:12px;color:var(--nx-ink2,var(--text2));line-height:1.4}
:where(:root[data-page="department-totals"]) .dt-newcodes .dt-nc-seen em{display:block;font-style:normal;color:var(--nx-ink3,var(--text3))}
:where(:root[data-page="department-totals"]) .dt-newcodes .dt-nc-desc{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--nx-ink2,var(--text2));line-height:1.35;overflow-wrap:anywhere}
:where(:root[data-page="department-totals"]) .dt-newcodes .dt-nc-desc.none{color:var(--nx-ink3,var(--text3));font-style:italic}
@media (max-width:560px){
  :where(:root[data-page="department-totals"]) .dt-newcodes .dt-map-table col.c-nc-code{width:30%}
  :where(:root[data-page="department-totals"]) .dt-newcodes .dt-map-table col.c-nc-seen{width:30%}
  :where(:root[data-page="department-totals"]) .dt-newcodes .dt-map-table col.c-nc-bucket{width:40%}
}

:where(:root[data-page="department-totals"]) body{page:pg-department-totals}


/* 15.38 was the Department Totals test copy; the page was deleted 2026-10-14. */


/* ----------------------------------------------------------------------------
 * 15.39  Payroll -- Requests
 * payroll/requests.php, data-page="requests"
 * -------------------------------------------------------------------------- */
/* ============================================================
   NEXUS THEME LAYER  -- remaps the legacy portal tokens this
   page already uses onto the Nexus scale, so the whole page
   reskins. Full light + dark. (Matches payroll-dashboard.)
   ============================================================ */
:root:where([data-page="requests"]){
  /* Payroll check dates on the Charge Date calendar. Indigo so it cannot be
     mistaken for the brand-green selection drawn over the same cells. */
  --cd-check:var(--nx-indigo);
  --brand:var(--blue); --brand-lt:var(--blue-lt);
  /* remap legacy portal tokens onto Nexus */
  --bg:var(--nx-bg); --bg2:var(--nx-rail);
  --surface:var(--nx-surface); --surface2:#F3F4F6;
  --border:var(--nx-line); --border2:var(--nx-line2);
  --text:var(--nx-ink); --text2:var(--nx-ink2); --text3:var(--nx-ink3);
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="requests"]){
  --nx-up:#34D27B; --nx-up-bg:#16301F; --nx-down:#F4756B; --nx-down-bg:#3A1E1C;
  --bg:var(--nx-bg); --bg2:var(--nx-surface);
  --surface:var(--nx-surface); --surface2:var(--nx-hover);
  --border:var(--nx-line); --border2:var(--nx-line2);
  --text:var(--nx-ink); --text2:var(--nx-ink2); --text3:var(--nx-ink3);
  --blue:#1FB866; --blue-dk:#13361F; --blue-lt:#15301F;
  --brand:#1FB866; --brand-lt:#13361F;
  --green:#34D27B; --green-lt:#16301F;
  --amber:#E0A93B; --amber-lt:#2A2510; --amber-text:#E8C25A;
  --red:#F4756B; --red-lt:#3A1E1C; --red-text:#F4756B;
  --accent-blue:#5B8DEF;
  --cd-check:#6C8BF0;
  color-scheme:dark;
}

/* Sidebar wordmark subheader — names the current page beneath the brand. */
:where(:root[data-page="requests"]) .sb-subname{font-size:11px;font-weight:500;color:var(--text3);letter-spacing:-.01em;margin-top:1px}
/* Approval-workflow editor */
:where(:root[data-page="requests"]) .wf-type-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1.5px solid var(--border);border-radius:20px;font-size:12.5px;font-weight:500;color:var(--text2);cursor:pointer;background:#fff}
:where(:root[data-page="requests"]) .wf-type-pill input{accent-color:var(--blue);outline:none;box-shadow:none}
:where(:root[data-page="requests"]) .wf-type-pill input:focus,:where(:root[data-page="requests"]) .wf-type-pill input:focus-visible{outline:none;box-shadow:none}
:where(:root[data-page="requests"]) .wf-type-pill:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,115,232,.12)}
:where(:root[data-page="requests"]) .wf-step{border:1px solid var(--border);border-radius:8px;padding:11px 12px;margin-bottom:9px;background:var(--bg2)}
:where(:root[data-page="requests"]) .wf-step-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
:where(:root[data-page="requests"]) .wf-step-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;font-weight:700}
:where(:root[data-page="requests"]) .wf-step-title{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text)}
:where(:root[data-page="requests"]) .wf-step-rm{border:none;background:none;color:var(--red);cursor:pointer;font-size:12px;padding:2px 6px;border-radius:5px}
:where(:root[data-page="requests"]) .wf-step-rm:hover{background:var(--red-lt,#fce8e6)}
:where(:root[data-page="requests"]) .wf-appr-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
:where(:root[data-page="requests"]) .wf-appr-chip{display:inline-flex;align-items:center;gap:5px;background:#eef6f0;color:var(--text);border:1px solid #cfe6d8;border-radius:14px;padding:3px 9px;font-size:11.5px}
:where(:root[data-page="requests"]) .wf-appr-chip button{border:none;background:none;color:var(--text3);cursor:pointer;font-size:13px;line-height:1;padding:0}
:where(:root[data-page="requests"]) .wf-appr-chip button:hover{color:var(--red)}
:root[data-theme="dark"]:where([data-page="requests"]) .wf-appr-chip{background:var(--green-lt);border-color:#1F5235}
:where(:root[data-page="requests"]) .wf-appr-chip.wf-appr-bad{background:#fdecea;border-color:#f3b6ad}
:root[data-theme="dark"]:where([data-page="requests"]) .wf-appr-chip.wf-appr-bad{background:var(--red-lt);border-color:#5C2E2A}
:where(:root[data-page="requests"]) .wf-self-note{margin-top:9px;padding:8px 10px;border:1px solid var(--border);border-radius:7px;background:var(--bg2);font-size:11.5px;color:var(--text3);line-height:1.5}
:where(:root[data-page="requests"]) .wf-self-note strong{color:var(--text)}
:where(:root[data-page="requests"]) .wf-self-note .wf-self-line{margin-top:5px}
:where(:root[data-page="requests"]) .wf-self-note .wf-self-blocked{color:var(--red)}
:where(:root[data-page="requests"]) .wf-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 9px;border-radius:12px}
:where(:root[data-page="requests"]) .wf-badge.step{background:#eef3fd;color:#1a4fa0;margin-left:4px}
:root[data-theme="dark"]:where([data-page="requests"]) .wf-badge.step{background:#18213A;color:#6C8BF0}
/* Cancelled status — deliberately neutral/grey, not red. A cancellation is
   a withdrawal, not a judgement, so it must not read like a rejection.
   portal.css has no .badge.cancelled rule, so we define it here; the
   #page-history scoping isn't needed because .badge is only styled by
   portal.css and this rule is loaded after it. */
:where(:root[data-page="requests"]) .badge.cancelled{background:var(--bg);color:var(--text3);border:1px solid var(--border)}
/* Request type pills. portal.css only defines .badge.bonus and
   .badge.reimbursement, so any other type rendered as plain unstyled text.
   Types are added and removed from the Settings page now, so we can't name
   them here one by one -- every type pill carries an extra rt-bonus or
   rt-reimbursement class based on which approval chain it follows, and that
   is what gets the colour. The four original bonus sub-types are kept below
   as well so nothing changes for them if the class is ever missing.
   Defined here (loaded after portal.css) rather than editing portal.css,
   which is shared by every page. */
:where(:root[data-page="requests"]) .badge.rt-bonus,
:where(:root[data-page="requests"]) .badge.sign_on_bonus,
:where(:root[data-page="requests"]) .badge.preceptor_bonus,
:where(:root[data-page="requests"]) .badge.shift_pickup_bonus,
:where(:root[data-page="requests"]) .badge.training_bonus{background:var(--accent-blue-lt);color:var(--accent-blue)}
:where(:root[data-page="requests"]) .badge.rt-reimbursement{background:var(--purple-lt);color:var(--purple)}
:where(:root[data-page="requests"]) .stat.grey .stat-val{color:var(--text3)}
/* Approval Workflows page — list rows */
:where(:root[data-page="requests"]) .wf-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;background:#fff;overflow:hidden}
:where(:root[data-page="requests"]) .wf-list-head,:where(:root[data-page="requests"]) .wf-row{display:grid;grid-template-columns:minmax(180px,1.6fr) minmax(110px,.9fr) minmax(150px,1fr) minmax(150px,1fr) 140px;align-items:center;gap:14px;padding:11px 16px}
:where(:root[data-page="requests"]) .wf-list-head{background:var(--bg);border-bottom:1px solid var(--border);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text3)}
:where(:root[data-page="requests"]) .wf-row{border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s}
:where(:root[data-page="requests"]) .wf-row:last-child{border-bottom:none}
:where(:root[data-page="requests"]) .wf-row:hover{background:#f7faf8}
:where(:root[data-page="requests"]) .wf-row-name{font-size:13px;font-weight:600;color:var(--text);letter-spacing:-.01em;line-height:1.25}
:where(:root[data-page="requests"]) .wf-row-fac{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
:where(:root[data-page="requests"]) .wf-row-co{font-size:11px;color:var(--text3);margin-top:1px}
:where(:root[data-page="requests"]) .wf-cell-status{display:flex;align-items:center;gap:8px;min-width:0}
:where(:root[data-page="requests"]) .wf-card-status{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600}
:where(:root[data-page="requests"]) .wf-card-status.ok{color:#1c7a43}
:where(:root[data-page="requests"]) .wf-card-status.no{color:var(--text3)}
:where(:root[data-page="requests"]) .wf-card-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto}
:where(:root[data-page="requests"]) .wf-card-dot.ok{background:#1c7a43}
:where(:root[data-page="requests"]) .wf-card-dot.no{background:var(--text3);opacity:.5}
:where(:root[data-page="requests"]) .wf-cell-status a{font-size:11px;margin-left:auto;white-space:nowrap}
:where(:root[data-page="requests"]) .wf-row-actions{display:flex;justify-content:flex-end}
:where(:root[data-page="requests"]) .wf-row-actions .btn{padding:6px 12px;font-size:11.5px;white-space:nowrap}
@media(max-width:760px){
  :where(:root[data-page="requests"]) .wf-list-head{display:none}
  :where(:root[data-page="requests"]) .wf-row{grid-template-columns:1fr;gap:8px}
  :where(:root[data-page="requests"]) .wf-row-actions{justify-content:flex-start}
}
/* Workflow editor dropdowns reuse the New-Request SearchableSelect look
   (.ss-trigger / .ss-panel / .ss-opt). Panels are position:fixed so they
   never get clipped by the modal. These wrappers just position them. */
:where(:root[data-page="requests"]) .wf-ssfield{position:relative}
:where(:root[data-page="requests"]) .wf-ed-fac-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* The facility options are <label>s inside a .field, so the global
   ".field label" rule (uppercase/bold/gray) would otherwise hijack them.
   Restore the intended multi-drop look: normal-case, regular weight, black. */
:where(:root[data-page="requests"]) .wf-ed-fac-bar .multi-drop-item{text-transform:none;letter-spacing:normal;font-weight:400;font-size:12.5px;color:var(--text)}
:where(:root[data-page="requests"]) .wf-ed-fac-bar .multi-drop-btn span:first-child{text-transform:none;letter-spacing:normal}
:where(:root[data-page="requests"]) .wf-ed-fac-bar .multi-drop-actions span{text-transform:none;letter-spacing:normal}
/* Let the dropdown menus spill outside the editor modal instead of being
   clipped on the right/bottom by the modal's overflow box. */
:where(:root[data-page="requests"]) #wfEditorModal .modal{overflow:visible}
:where(:root[data-page="requests"]) #wfEditorModal .multi-drop-menu{max-width:min(94vw,320px)}
:where(:root[data-page="requests"]) .wf-ss-panel{display:none}
:where(:root[data-page="requests"]) .wf-ss-panel.open{display:flex}
:where(:root[data-page="requests"]) .wf-ss-opt-check{display:inline-flex;align-items:center;gap:8px}
:where(:root[data-page="requests"]) .wf-ss-opt-check input{accent-color:var(--blue);width:14px;height:14px;flex:0 0 auto}
:where(:root[data-page="requests"]) .wf-ss-opt .wf-ss-co{color:var(--text3);font-size:10.5px;margin-left:auto;padding-left:10px}
/* Approver dropdown: let long names wrap instead of being clipped, and allow
   the panel to grow past the shared 420px ss-panel cap. */
:where(:root[data-page="requests"]) .wf-appr-panel{max-width:min(94vw,520px)}
:where(:root[data-page="requests"]) .wf-appr-panel .ss-opt{white-space:normal;overflow:visible;text-overflow:clip}
:where(:root[data-page="requests"]) .wf-appr-panel .wf-ss-opt-check{align-items:flex-start}
/* Nicer native select: rounded border + custom chevron (no default OS box) */
:where(:root[data-page="requests"]) .wf-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:8px 32px 8px 12px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:var(--font);font-size:12.5px;font-weight:500;background:#fff;color:var(--text);cursor:pointer;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M4%206l4%204%204-4'%20stroke='%236b7280'%20stroke-width='1.6'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;transition:border-color .12s,box-shadow .12s}
:where(:root[data-page="requests"]) .wf-select:hover{border-color:#b9c2cc}
:where(:root[data-page="requests"]) .wf-select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,115,232,.12)}
/* ── Sidebar removed: nav now lives in a topbar avatar dropdown. ──────── */
:where(:root[data-page="requests"]) .shell > .main{flex:1;min-width:0}
:where(:root[data-page="requests"]) .pg-brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
:where(:root[data-page="requests"]) .pg-brand-icon{width:34px;height:34px;border-radius:8px;background:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-weight:700;font-size:15px;letter-spacing:-.02em}
:where(:root[data-page="requests"]) .pg-brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
:where(:root[data-page="requests"]) .pg-brand-name{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="requests"]) .pg-brand-name .pg-cr{color:var(--blue)}
:where(:root[data-page="requests"]) .pg-brand-sub{font-size:11.5px;font-weight:500;color:var(--text3);letter-spacing:-.01em}
:where(:root[data-page="requests"]) .topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto}

:where(:root[data-page="requests"]) .dt-user{position:relative;flex-shrink:0}
:where(:root[data-page="requests"]) .dt-user-btn{position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:none;cursor:pointer;border-radius:50%}
:where(:root[data-page="requests"]) .dt-avatar-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;background:var(--red,#C5221F);color:#fff;font-size:10px;font-weight:700;line-height:17px;text-align:center;border-radius:9px;border:2px solid #fff}
:where(:root[data-page="requests"]) .dt-user-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
:where(:root[data-page="requests"]) .dt-user-btn:hover .dt-user-avatar,
:where(:root[data-page="requests"]) .dt-user-btn:focus-visible .dt-user-avatar{box-shadow:0 0 0 3px rgba(1,139,70,.18);outline:none}
:where(:root[data-page="requests"]) .dt-user-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:232px;max-height:min(78vh,560px);overflow-y:auto;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(20,22,28,.16);display:none;z-index:120;padding:6px}
:where(:root[data-page="requests"]) .dt-user.open .dt-user-pop{display:block}
:where(:root[data-page="requests"]) .dt-user-info{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:6px}
:where(:root[data-page="requests"]) .dt-user-name{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.2}
:where(:root[data-page="requests"]) .dt-user-role{font-size:11.5px;color:var(--text3);margin-top:2px}
:where(:root[data-page="requests"]) .dt-user-sec{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px 4px}
/* The nav items keep the .sb-item class for JS, but inside the dropdown they
   render as menu rows — neutralize any inherited sidebar item styling. */
:where(:root[data-page="requests"]) .dt-user-pop .dt-user-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 10px;margin:0;border:none;background:none;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--text);text-align:left;text-decoration:none;transition:background .1s}
:where(:root[data-page="requests"]) .dt-user-pop .dt-user-item svg{width:15px;height:15px;flex-shrink:0;color:var(--text3)}
:where(:root[data-page="requests"]) .dt-user-pop .dt-user-item:hover{background:var(--surface2,#F3F4F6)}
:where(:root[data-page="requests"]) .dt-user-pop .dt-user-item:hover svg{color:var(--text3)}
:where(:root[data-page="requests"]) .dt-user-pop .pg-nav.active{background:var(--surface2,#F3F4F6);color:var(--blue);font-weight:600}
:where(:root[data-page="requests"]) .dt-user-pop .pg-nav.active svg{color:var(--blue)}
:where(:root[data-page="requests"]) .dt-user-pop .sb-badge{margin-left:auto;background:var(--red,#C5221F);color:#fff;font-size:10px;font-weight:700;line-height:1;min-width:16px;height:16px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;box-sizing:border-box}
:where(:root[data-page="requests"]) .dt-user-divider{height:1px;background:var(--border);margin:6px 4px}
:where(:root[data-page="requests"]) .dt-user-pop .dt-user-danger{color:var(--red,#C5221F)}
:where(:root[data-page="requests"]) .dt-user-pop .dt-user-danger svg,:where(:root[data-page="requests"]) .dt-user-pop .dt-user-danger:hover svg{color:var(--red,#C5221F)}

/* ── Records segmented toggle (All / Pending / Approved / Rejected / Unpaid) ──
   Replaces the five separate Records nav items. Sits at the top of the
   page-history view and flips the same page between status filters. */
:where(:root[data-page="requests"]) .req-seg{display:inline-flex;gap:2px;background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:12px;padding:4px;margin-bottom:14px;flex-wrap:wrap}
:where(:root[data-page="requests"]) .req-seg-btn{
  border:0;background:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;
  color:var(--text2);padding:7px 14px;border-radius:8px;letter-spacing:-.01em;
  transition:background .1s,color .1s,box-shadow .1s;white-space:nowrap;
}
:where(:root[data-page="requests"]) .req-seg-btn:hover{color:var(--text)}
:where(:root[data-page="requests"]) .req-seg-btn.active{background:#fff;color:var(--blue);font-weight:600;box-shadow:0 1px 2px rgba(20,22,28,.06)}

/* New Request button: white w/ green outline, fills green on hover */
:where(:root[data-page="requests"]) #newReqBtn{transition:background .12s,color .12s}
:where(:root[data-page="requests"]) #newReqBtn:hover{background:var(--blue)!important;color:#fff!important}

/* 3-month trend metric toggle */
:where(:root[data-page="requests"]) .trend-toggle{display:inline-flex;gap:0;border:1px solid var(--border);border-radius:7px;overflow:hidden}
:where(:root[data-page="requests"]) .trend-tog-btn{border:none;background:#fff;color:var(--text2);font-family:inherit;font-size:12px;font-weight:600;padding:5px 12px;cursor:pointer}
:where(:root[data-page="requests"]) .trend-tog-btn+.trend-tog-btn{border-left:1px solid var(--border)}
:where(:root[data-page="requests"]) .trend-tog-btn.active{background:var(--blue);color:#fff}

/* Missing-field highlight on the New Request form. Cleared on input. */
:where(:root[data-page="requests"]) .field-error,
:where(:root[data-page="requests"]) .field-error input,
:where(:root[data-page="requests"]) .field-error textarea,
:where(:root[data-page="requests"]) .field-error select,
:where(:root[data-page="requests"]) .field-error .ss{border-color:var(--red,#C5221F)!important;box-shadow:0 0 0 3px rgba(197,34,31,.14)!important}

/* Side-by-side workflow editor (Bonus | Reimbursement). */
:where(:root[data-page="requests"]) .wf-applyboth{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text2);font-weight:500;cursor:pointer;margin:0}
:where(:root[data-page="requests"]) .wf-applyboth input{width:15px;height:15px;cursor:pointer;accent-color:var(--blue)}
:where(:root[data-page="requests"]) .wf-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
@media (max-width:760px){:where(:root[data-page="requests"]) .wf-cols{grid-template-columns:1fr}}
:where(:root[data-page="requests"]) .wf-col{border:1px solid var(--border);border-radius:10px;padding:12px;background:var(--bg,#FAFBFC)}
:where(:root[data-page="requests"]) .wf-col-hd{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text2);margin-bottom:10px}
:where(:root[data-page="requests"]) .wf-cols.applyboth #wf_col_reimb{opacity:.55;pointer-events:none}

/* ============================================================
   NEXUS SHELL  -- rail sidebar + topbar + reskinned components.
   Layered last so it wins over the page-local rules above.
   The existing markup IDs/classes are preserved; only the look
   changes. Nav still uses .sb-item + #nav-* + showPage().
   ============================================================ */
:where(:root[data-page="requests"]) *, *:where([data-page="requests"]){box-sizing:border-box}
html:where([data-page="requests"]),:where(:root[data-page="requests"]) body{height:100%;margin:0;font-family:var(--nx-font);background:var(--nx-bg);color:var(--nx-ink);font-size:13px}

/* App frame: rounded white surface floating on grey */
:where(:root[data-page="requests"]) .shell{display:grid;grid-template-columns:248px minmax(0,1fr);height:calc(100vh - 16px);margin:8px;background:var(--nx-surface);border-radius:16px;overflow:hidden;box-shadow:0 16px 48px rgba(27,29,41,.10);border:1px solid var(--nx-line)}
:where(:root[data-page="requests"]) .shell.rail-collapsed{grid-template-columns:64px minmax(0,1fr)}
@media(max-width:980px){:where(:root[data-page="requests"]) .shell{grid-template-columns:1fr;margin:0;border-radius:0;border:none;height:100vh}}

/* ---- Sidebar rail ---- */
:where(:root[data-page="requests"]) .nx-rail{background:var(--nx-rail);border-right:1px solid var(--nx-line);display:flex;flex-direction:column;padding:18px 14px;overflow-y:auto}
@media(max-width:980px){:where(:root[data-page="requests"]) .nx-rail{display:none}}
:where(:root[data-page="requests"]) .nx-rail-toggle{width:32px;height:32px;flex:0 0 auto;border:1px solid var(--nx-line2);background:var(--nx-surface);border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2);margin:0 0 6px auto}
:where(:root[data-page="requests"]) .nx-rail-toggle:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="requests"]) .nx-rail-toggle svg{width:16px;height:16px;transition:transform .18s ease}
:where(:root[data-page="requests"]) .rail-collapsed .nx-rail{padding:18px 10px;align-items:center}
:where(:root[data-page="requests"]) .rail-collapsed .nx-rail-toggle{margin:0 0 8px 0}
:where(:root[data-page="requests"]) .rail-collapsed .nx-rail-toggle svg{transform:rotate(180deg)}
:where(:root[data-page="requests"]) .rail-collapsed .nx-brand-name,
:where(:root[data-page="requests"]) .rail-collapsed .nx-navsec{display:none}
:where(:root[data-page="requests"]) .rail-collapsed .nx-brand{justify-content:center;padding:6px 0 18px}
:where(:root[data-page="requests"]) .rail-collapsed .nx-rail .sb-item{position:relative;justify-content:center;gap:0;padding:0;font-size:0;width:40px;height:40px;border-radius:10px;margin:2px auto}
:where(:root[data-page="requests"]) .rail-collapsed .nx-rail .sb-item svg{width:18px;height:18px;font-size:0}
:where(:root[data-page="requests"]) .rail-collapsed .nx-rail .sb-item .sb-badge{position:absolute;top:2px;right:4px;margin:0;font-size:9px}
:where(:root[data-page="requests"]) .nx-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;text-decoration:none}
:where(:root[data-page="requests"]) .nx-brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),#04a85a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
:where(:root[data-page="requests"]) .nx-brand-name{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="requests"]) .nx-navsec{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nx-ink3);padding:14px 10px 6px}
/* Flat Payroll nav links (top of rail) -- match Department Totals */
:where(:root[data-page="requests"]) .nx-nav{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--nx-ink2);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,color .12s}
:where(:root[data-page="requests"]) .nx-nav svg{width:17px;height:17px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .nx-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="requests"]) .nx-nav.active{background:var(--brand);color:#fff}
:where(:root[data-page="requests"]) .nx-nav.active svg{color:#fff}
/* Requests sub-nav block -- match Department Totals sub-nav */
:where(:root[data-page="requests"]) .nx-subnav{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:10px;border-top:1px solid var(--nx-line2)}
:where(:root[data-page="requests"]) .nx-subnav-head{font-size:11px;font-weight:700;letter-spacing:-.01em;color:var(--nx-ink);padding:2px 10px 7px;display:flex;align-items:center;gap:7px}
:where(:root[data-page="requests"]) .nx-subnav-head::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--brand);flex:0 0 auto}
:where(:root[data-page="requests"]) .nx-subnav .nx-subitem{display:flex;align-items:center;gap:11px;padding:8px 11px 8px 18px;border-radius:10px;color:var(--nx-ink2);font-size:12.5px;font-weight:500;cursor:pointer;border:none;background:none;font-family:inherit;width:100%;text-align:left}
:where(:root[data-page="requests"]) .nx-subnav .nx-subitem svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .nx-subnav .nx-subitem:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="requests"]) .nx-subnav .nx-subitem.active{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="requests"]) .nx-subnav .nx-subitem.active svg{color:var(--brand)}
:where(:root[data-page="requests"]) .nx-subnav .nx-subitem .sb-badge{margin-left:auto !important;font-size:10px !important;font-weight:700 !important;background:#E5322D !important;color:#fff !important;border-radius:999px !important;min-width:16px !important;height:16px !important;padding:0 5px !important;box-sizing:border-box !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;line-height:1 !important;flex:0 0 auto !important}
:where(:root[data-page="requests"]) #pendingBadge{margin-left:auto !important;font-size:10px !important;font-weight:700 !important;background:#E5322D !important;color:#fff !important;border-radius:999px !important;min-width:16px !important;height:16px !important;padding:0 5px !important;box-sizing:border-box !important;align-items:center !important;justify-content:center !important;line-height:1 !important;flex:0 0 auto !important}
:where(:root[data-page="requests"]) #pendingBadge[style*="display: none"],:where(:root[data-page="requests"]) #pendingBadge[style*="display:none"]{display:none !important}

/* Rail sub-nav items carry .sb-item (JS/embed contract) but are styled by the
   .nx-subnav .nx-subitem rules above to match Department Totals. */

/* ---- Main column ---- */
:where(:root[data-page="requests"]) .main{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
:where(:root[data-page="requests"]) .topbar{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--nx-line);background:var(--nx-surface)}
:where(:root[data-page="requests"]) .topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* New Request button -> matches the dashboard's compact pill buttons */
:where(:root[data-page="requests"]) #newReqBtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--brand)!important;background:var(--brand-lt)!important;color:var(--brand)!important;border-radius:9px;padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:background .12s,color .12s}
:where(:root[data-page="requests"]) #newReqBtn:hover{background:var(--brand)!important;color:#fff!important}

/* Theme toggle button */
:where(:root[data-page="requests"]) .nx-theme-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--nx-line2);background:var(--nx-elev);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--nx-ink2)}
:where(:root[data-page="requests"]) .nx-theme-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="requests"]) .nx-theme-btn svg{width:16px;height:16px}
:where(:root[data-page="requests"]) .nx-theme-btn .nx-ic-moon{display:none}
:root[data-theme="dark"]:where([data-page="requests"]) .nx-theme-btn .nx-ic-sun{display:none}
:root[data-theme="dark"]:where([data-page="requests"]) .nx-theme-btn .nx-ic-moon{display:block}

/* ── Topbar (matches Department Totals) ──────────────────────────────── */
:where(:root[data-page="requests"]) .nx-topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="requests"]) .nx-search{flex:1;max-width:340px;position:relative}
:where(:root[data-page="requests"]) .nx-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .nx-search input{width:100%;border:1px solid var(--nx-line2);background:var(--nx-rail);border-radius:10px;padding:9px 12px 9px 34px;font-size:13px;font-family:inherit;color:var(--nx-ink)}
:where(:root[data-page="requests"]) .nx-search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="requests"]) .nx-top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
:where(:root[data-page="requests"]) .nx-search-pop{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:12px;box-shadow:0 18px 44px rgba(20,22,28,.20);padding:6px;max-height:min(66vh,440px);overflow:auto}
:where(:root[data-page="requests"]) .nx-search-pop.open{display:block}
:where(:root[data-page="requests"]) .nx-search-grp{padding:7px 9px 4px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .nx-search-row{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;border:0;background:none;text-align:left;padding:7px 9px;border-radius:8px;font:inherit;font-size:12.5px;color:var(--nx-ink);cursor:pointer}
:where(:root[data-page="requests"]) .nx-search-row:hover{background:var(--nx-hover,#F1F0FB)}
:where(:root[data-page="requests"]) .nx-search-row-main{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="requests"]) .nx-search-row-sub{flex:0 0 auto;font-size:11px;color:var(--nx-ink3);max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="requests"]) .nx-search-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
:where(:root[data-page="requests"]) .nx-search-sep{height:1px;background:var(--nx-line);margin:6px 2px}
:where(:root[data-page="requests"]) .nx-search-note{padding:10px 9px;font-size:12px;color:var(--nx-ink3);font-style:italic}
:where(:root[data-page="requests"]) .nx-pbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1}
:where(:root[data-page="requests"]) .nx-pbtn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="requests"]) .nx-pbtn svg{width:14px;height:14px}
:where(:root[data-page="requests"]) .nx-pbtn-primary{border-color:var(--brand);background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="requests"]) .nx-pbtn-primary:hover{background:var(--brand);color:#fff}
:where(:root[data-page="requests"]) .nx-user{position:relative;display:flex;align-items:center}
:where(:root[data-page="requests"]) .nx-user-av-btn{padding:0;border:none;background:none;cursor:pointer;border-radius:50%;display:flex;position:relative}
:where(:root[data-page="requests"]) .nx-user-av{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;text-transform:uppercase}
:where(:root[data-page="requests"]) .nx-user-av-btn:hover .nx-user-av,:where(:root[data-page="requests"]) .nx-user-av-btn:focus-visible .nx-user-av{box-shadow:0 0 0 3px var(--brand-lt);outline:none}
:where(:root[data-page="requests"]) .nx-user-av.lg{width:38px;height:38px;font-size:13px;flex:0 0 auto}
:where(:root[data-page="requests"]) .nx-user-pop{position:absolute;top:calc(100% + 9px);right:0;min-width:236px;background:var(--nx-surface);border:1px solid var(--nx-line2);border-radius:14px;box-shadow:0 18px 44px rgba(20,22,28,.20);padding:7px;display:none;z-index:120}
:where(:root[data-page="requests"]) .nx-user.open .nx-user-pop{display:block;animation:pdPop .16s ease}
:where(:root[data-page="requests"]) .nx-user-pop-id{display:flex;align-items:center;gap:11px;padding:9px 9px 11px}
:where(:root[data-page="requests"]) .nx-user-pop-meta{min-width:0;line-height:1.25}
:where(:root[data-page="requests"]) .nx-user-pop-name{display:block;font-size:13.5px;font-weight:700;color:var(--nx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="requests"]) .nx-user-pop-sub{display:block;font-size:11.5px;color:var(--nx-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:where(:root[data-page="requests"]) .nx-user-pop-sep{height:1px;background:var(--nx-line);margin:2px 4px 6px}
:where(:root[data-page="requests"]) .nx-user-pop-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 10px;border:none;background:none;border-radius:9px;cursor:pointer;font-family:var(--nx-font);font-size:13px;font-weight:500;color:#6B7280;text-align:left;text-decoration:none}
:where(:root[data-page="requests"]) .nx-user-pop-item svg{width:15px;height:15px;flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .nx-user-pop-item:hover{background:var(--nx-hover)}
:where(:root[data-page="requests"]) .nx-user-pop-item.danger{color:#D4453B}
:where(:root[data-page="requests"]) .nx-user-pop-item.danger svg{color:#D4453B}
:where(:root[data-page="requests"]) .dt-avatar-badge{position:absolute;top:-2px;right:-2px;min-width:15px;height:15px;border-radius:8px;background:var(--red,#C5221F);border:2px solid var(--nx-surface)}
@keyframes pdPop{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}

/* Avatar (topbar) */
:where(:root[data-page="requests"]) .dt-user-avatar{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}

/* Scroll canvas */
:where(:root[data-page="requests"]) .scroll-area{flex:1;padding:20px 22px 28px;overflow-y:scroll;scrollbar-gutter:stable}

/* Page heading */
:where(:root[data-page="requests"]) .dash-greeting{margin-bottom:18px}
:where(:root[data-page="requests"]) .dash-greeting-text,:where(:root[data-page="requests"]) #greetingText{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="requests"]) .dash-greeting-sub{font-size:12.5px;color:var(--nx-ink3);margin-top:3px}

/* Stat cards -> Nexus KPI look with left accent chip stripe */
:where(:root[data-page="requests"]) .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:16px}
@media(max-width:760px){:where(:root[data-page="requests"]) .stats{grid-template-columns:1fr 1fr}}
:where(:root[data-page="requests"]) .stat{background:var(--nx-elev);border:1px solid var(--nx-line);border-top:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:16px 17px;position:relative;overflow:hidden}
/* portal.css gives .stat a colored 2px top border via .stat.blue/.amber/etc.
   Neutralize it so cards match the dashboard's even-bordered KPI cards. */
:where(:root[data-page="requests"]) .stat.blue,:where(:root[data-page="requests"]) .stat.amber,:where(:root[data-page="requests"]) .stat.green,:where(:root[data-page="requests"]) .stat.green2,:where(:root[data-page="requests"]) .stat.red,:where(:root[data-page="requests"]) .stat.purple{border-top-color:var(--nx-line)}
/* Left color stripe removed so cards match the dashboard's clean KPI cards.
   Color-modifier classes (.blue/.amber/.green/.red) are kept as no-ops so the
   existing markup and any JS that toggles them keep working. */
:where(:root[data-page="requests"]) .stat-label{font-size:12px;font-weight:600;color:var(--nx-ink2);margin-bottom:10px;text-transform:none;letter-spacing:0}
:where(:root[data-page="requests"]) .stat-val{font-size:25px;font-weight:800;letter-spacing:-.03em;color:var(--nx-ink)}

/* Toolbar buttons + filter dropdowns -> match the dashboard's soft pill style
   (portal.css draws the legacy solid-green .btn / bordered .multi-drop-btn;
   these load after it so they win). */
:where(:root[data-page="requests"]) .filter-bar .btn,:where(:root[data-page="requests"]) .section-hd .btn{border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:9px;font-size:12px;font-weight:600;padding:7px 12px;transition:border-color .12s,color .12s,background .12s}
:where(:root[data-page="requests"]) .filter-bar .btn:hover,:where(:root[data-page="requests"]) .section-hd .btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink);background:var(--nx-surface)}
:where(:root[data-page="requests"]) .filter-bar .btn.primary,:where(:root[data-page="requests"]) .section-hd .btn.primary{border-color:var(--brand);background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="requests"]) .filter-bar .btn.primary:hover,:where(:root[data-page="requests"]) .section-hd .btn.primary:hover{background:var(--brand);color:#fff}
/* Filter dropdowns -> match Department Totals' dt-combo look. Selectors are
   scoped to .filter-bar so they out-specify portal.css's .multi-drop-btn. */
:where(:root[data-page="requests"]) .filter-bar .multi-drop .multi-drop-btn{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:11px;font-size:13px;font-weight:500;padding:9px 13px;transition:border-color .12s,box-shadow .12s}
:where(:root[data-page="requests"]) .filter-bar .multi-drop .multi-drop-btn:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .filter-bar .multi-drop.open .multi-drop-btn{border-color:var(--brand);color:var(--nx-ink);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="requests"]) .filter-bar .multi-drop.has-selection .multi-drop-btn{border-color:var(--brand);background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="requests"]) .filter-bar input[type="text"],:where(:root[data-page="requests"]) .filter-bar input[type="date"]{border:1px solid var(--nx-line2)!important;background:var(--nx-elev)!important;color:var(--nx-ink)!important;border-radius:11px!important;padding:9px 13px!important;font-size:13px!important}
:where(:root[data-page="requests"]) .filter-bar .multi-drop-menu{border:1px solid var(--nx-line2);border-radius:12px;box-shadow:0 18px 44px rgba(20,22,28,.20)}

/* Panels -> Nexus cards */
:where(:root[data-page="requests"]) .panel{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);overflow:hidden}
:where(:root[data-page="requests"]) .panel-head{display:flex;align-items:center;justify-content:space-between;padding:15px 17px}
:where(:root[data-page="requests"]) .panel-title{font-size:13.5px;font-weight:700;color:var(--nx-ink);letter-spacing:-.01em}
:where(:root[data-page="requests"]) .panel-action{font-size:12px;color:var(--nx-ink2);font-weight:600;cursor:pointer}
:where(:root[data-page="requests"]) .nx-card-ic{width:26px;height:26px;border-radius:8px;background:var(--nx-rail);border:1px solid var(--nx-line2);display:inline-flex;align-items:center;justify-content:center;color:var(--nx-ink2);flex:0 0 auto}
:where(:root[data-page="requests"]) .nx-card-ic svg{width:14px;height:14px}
:where(:root[data-page="requests"]) .panel-action:hover{color:var(--brand)}

/* Tables -> Nexus chrome */
:where(:root[data-page="requests"]) .tbl-wrap table thead th,
:where(:root[data-page="requests"]) .panel table thead th,
:where(:root[data-page="requests"]) table thead th{background:var(--nx-rail);color:var(--nx-ink3);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:11px 16px;border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="requests"]) .tbl-wrap table tbody td,
:where(:root[data-page="requests"]) .panel table tbody td,
:where(:root[data-page="requests"]) table tbody td{padding:13px 16px;border-bottom:1px solid var(--nx-line);font-size:12.5px;color:var(--nx-ink)}
:where(:root[data-page="requests"]) .tbl-wrap table tbody tr:hover td,
:where(:root[data-page="requests"]) .panel table tbody tr:hover td,
:where(:root[data-page="requests"]) table tbody tr:hover td{background:var(--nx-hover)}

/* Records segmented toggle -> Nexus */
:where(:root[data-page="requests"]) .req-seg{background:var(--nx-surface);border:1px solid var(--nx-line)}
:where(:root[data-page="requests"]) .req-seg-btn.active{background:var(--brand-lt);color:var(--brand);font-weight:600;box-shadow:none}

/* Trend toggle -> Nexus */
:where(:root[data-page="requests"]) .trend-toggle{border-color:var(--nx-line2)}
:where(:root[data-page="requests"]) .trend-tog-btn{background:var(--nx-elev);color:var(--nx-ink2)}
:where(:root[data-page="requests"]) .trend-tog-btn.active{background:var(--brand);color:#fff}

/* Quick actions -> Nexus tiles */
:where(:root[data-page="requests"]) .qa{border:1px solid var(--nx-line);border-radius:12px;background:var(--nx-elev)}
:where(:root[data-page="requests"]) .qa:hover{border-color:var(--brand);background:var(--brand-lt)}
:where(:root[data-page="requests"]) .qa-label{color:var(--nx-ink)}

/* Modals -> Nexus rounding/surface */
:where(:root[data-page="requests"]) .modal{border-radius:18px;background:var(--nx-surface)}
:where(:root[data-page="requests"]) .modal-overlay{background:rgba(0,0,0,.45)}

/* ============================================================
   EMBED MODE  -- when the dashboard shell loads this page with
   ?embed=1, hide this page's own rail + topbar so only the
   shell's chrome shows. The shell owns the frame; the page's
   .scroll-area becomes the only scroller.
   ============================================================ */
html.cr-embed:where([data-page="requests"]){height:100%;min-height:0;overflow:hidden;background:var(--nx-surface)}
:where(:root[data-page="requests"]) body.embed{height:100%;min-height:0;overflow:hidden;background:var(--nx-surface)}
:where(:root[data-page="requests"]) body.embed .shell{margin:0;border:none;border-radius:0;height:100%;min-height:0;grid-template-columns:1fr;grid-template-rows:100%;box-shadow:none;background:var(--nx-surface);overflow:hidden}
:where(:root[data-page="requests"]) body.embed .main{min-height:0;height:100%;overflow:hidden}
:where(:root[data-page="requests"]) body.embed .nx-rail{display:none}
:where(:root[data-page="requests"]) body.embed .topbar,:where(:root[data-page="requests"]) body.embed .nx-topbar{display:none}
:where(:root[data-page="requests"]) body.embed .scroll-area{padding:20px 22px 26px}
/* The dashboard shell already shows the page title/greeting, so drop the
   in-page greeting block when embedded to avoid a duplicate heading. */
:where(:root[data-page="requests"]) body.embed .dash-greeting{display:none}

/* ============================================================
   FACILITY SCOPE BAR
   The page has one facility scope (the hf_fac checkboxes -- see
   getScopeFacilities). All Requests has always had a picker for it in its
   own filter bar; the Dashboard, Approvals and Activity read the same scope
   but showed nothing about it, so a narrowed count had no visible reason.
   This bar is that missing readout, and standalone it is also the picker.

   It sits inside .scroll-area rather than the topbar on purpose: the topbar
   is hidden under ?embed=1, which is how the shell loads this page, and a
   control nobody can see in the normal path is no control at all.
   ============================================================ */
:where(:root[data-page="requests"]) .cr-scope{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
:where(:root[data-page="requests"]) .cr-scope-lead{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .cr-scope-lead svg{width:13px;height:13px}
:where(:root[data-page="requests"]) .cr-scope .multi-drop-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:11px;font-size:12.5px;font-weight:600;font-family:inherit;padding:7px 12px;cursor:pointer;line-height:1;transition:border-color .12s,box-shadow .12s}
:where(:root[data-page="requests"]) .cr-scope .multi-drop-btn:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .cr-scope .multi-drop.open .multi-drop-btn{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="requests"]) .cr-scope .multi-drop.has-selection .multi-drop-btn{border-color:var(--brand);background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="requests"]) .cr-scope .multi-drop-btn .cr-scope-caret{width:9px;height:9px;opacity:.6}
:where(:root[data-page="requests"]) .cr-scope .multi-drop-menu{min-width:290px;max-width:min(94vw,340px);max-height:min(60vh,420px);overflow:auto;border:1px solid var(--nx-line2);border-radius:12px;box-shadow:0 18px 44px rgba(20,22,28,.20);background:var(--nx-surface);padding:7px}
/* portal.css opens the menu as a flex column, where children shrink by
   default -- against this one's max-height that squashes every row. The menu
   itself scrolls instead. The same rule set gives its last child overflow and
   flex:1 1 auto, which here is the hint line, so that is put back too. */
:where(:root[data-page="requests"]) .cr-scope .multi-drop-menu > *{flex:0 0 auto}
:where(:root[data-page="requests"]) .cr-scope .multi-drop-menu > .cr-scope-hint{overflow:visible}
:where(:root[data-page="requests"]) .cr-scope-search{width:100%;box-sizing:border-box;border:1px solid var(--nx-line2);background:var(--nx-rail);border-radius:9px;padding:7px 10px;font-size:12.5px;font-family:inherit;color:var(--nx-ink);margin-bottom:6px}
:where(:root[data-page="requests"]) .cr-scope-search:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="requests"]) .cr-scope-co{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px 4px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .cr-scope-co-name{display:inline-flex;align-items:center;gap:6px;min-width:0}
:where(:root[data-page="requests"]) .cr-scope-co-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
:where(:root[data-page="requests"]) .cr-scope-co-all{border:0;background:none;padding:2px 4px;font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--brand);cursor:pointer;border-radius:5px;flex:0 0 auto}
:where(:root[data-page="requests"]) .cr-scope-co-all:hover{background:var(--brand-lt)}
:where(:root[data-page="requests"]) .cr-scope-item{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;border:0;background:none;text-align:left;padding:7px 9px;border-radius:8px;font:inherit;font-size:12.5px;color:var(--nx-ink);cursor:pointer}
:where(:root[data-page="requests"]) .cr-scope-item:hover{background:var(--nx-hover,#F1F0FB)}
:where(:root[data-page="requests"]) .cr-scope-item .cr-scope-tick{width:14px;height:14px;flex:0 0 auto;opacity:0;color:var(--brand)}
:where(:root[data-page="requests"]) .cr-scope-item.on{color:var(--brand);font-weight:600}
:where(:root[data-page="requests"]) .cr-scope-item.on .cr-scope-tick{opacity:1}
:where(:root[data-page="requests"]) .cr-scope-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="requests"]) .cr-scope-sep{height:1px;background:var(--nx-line);margin:6px 2px}
:where(:root[data-page="requests"]) .cr-scope-hint{padding:5px 9px 3px;font-size:10.5px;color:var(--nx-ink3);line-height:1.45}
:where(:root[data-page="requests"]) .cr-scope-empty{padding:12px 9px;font-size:12px;color:var(--nx-ink3);font-style:italic}
/* All Requests footer. Replaced the Prev/Next pager when the list became one
   continuous scroll -- it is a readout now, not a control. */
:where(:root[data-page="requests"]) .hist-foot{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 0 4px;font-size:12px;color:var(--nx-ink3);min-height:20px}
:where(:root[data-page="requests"]) .hist-foot-done{color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .hist-spin{width:13px;height:13px;border:2px solid var(--nx-line2);border-top-color:var(--brand);border-radius:50%;animation:histSpin .7s linear infinite}
@keyframes histSpin{to{transform:rotate(360deg)}}

/* "Pick a facility" gate. CareRite Services can see every home, so landing on
   a data page with nothing picked means looking at all of them at once. The
   gated page is hidden behind this card until a facility is chosen. */
:where(:root[data-page="requests"]) body.scope-gated .page.active{display:none}
:where(:root[data-page="requests"]) .pickfac{display:none;align-items:center;justify-content:center;min-height:52vh;padding:20px 0}
:where(:root[data-page="requests"]) .pickfac.show{display:flex}
:where(:root[data-page="requests"]) .pickfac-card{max-width:440px;text-align:center;padding:28px 26px;border:1px solid var(--nx-line2);border-radius:16px;background:var(--nx-surface);box-shadow:0 10px 32px rgba(20,22,28,.07)}
:where(:root[data-page="requests"]) .pickfac-ic{width:38px;height:38px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;border-radius:11px;background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="requests"]) .pickfac-ic svg{width:19px;height:19px}
:where(:root[data-page="requests"]) .pickfac-title{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--nx-ink);margin-bottom:6px}
:where(:root[data-page="requests"]) .pickfac-sub{font-size:12.5px;line-height:1.55;color:var(--nx-ink3);margin-bottom:16px}
:where(:root[data-page="requests"]) .pickfac-mount{display:flex;flex-direction:column;align-items:center;gap:10px}
:where(:root[data-page="requests"]) .pickfac-all{border:0;background:none;padding:2px 6px;font:inherit;font-size:12px;font-weight:600;color:var(--brand);cursor:pointer;border-radius:6px}
:where(:root[data-page="requests"]) .pickfac-all:hover{background:var(--brand-lt)}
:where(:root[data-page="requests"]) .pickfac-mount .cr-scope{margin-bottom:0}
/* Embedded, the shell's own filter owns the scope, so the bar is a readout. */
:where(:root[data-page="requests"]) .cr-scope-static{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--nx-line2);background:var(--nx-rail);color:var(--nx-ink2);border-radius:11px;font-size:12.5px;font-weight:600;padding:7px 12px;line-height:1}
:where(:root[data-page="requests"]) .cr-scope-static.narrowed{border-color:var(--brand);background:var(--brand-lt);color:var(--brand)}

/* ============================================================================
   NEXUS COMPONENT LAYER  (requests.php)
   Authoritative restyle of every legacy component class this page's markup
   uses, mapped 1:1 onto the Department Totals Nexus components. It comes LAST in
   the page's own CSS so it always wins over portal.css -- no per-rule
   !important needed. Markup + IDs are unchanged; only the look is redefined.
   ============================================================================ */

/* ---- Page greeting header ------------------------------------------------ */
:where(:root[data-page="requests"]) .dash-greeting{margin-bottom:16px}
:where(:root[data-page="requests"]) .dash-greeting-text{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--nx-ink)}
:where(:root[data-page="requests"]) .dash-greeting-sub{font-size:12.5px;color:var(--nx-ink3);margin-top:2px}

/* ---- Stat / KPI cards ---------------------------------------------------- */
:where(:root[data-page="requests"]) .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:16px}
@media(max-width:760px){:where(:root[data-page="requests"]) .stats{grid-template-columns:1fr 1fr}}
:where(:root[data-page="requests"]) .stat{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:16px 17px;position:relative;overflow:hidden;transition:none}
/* portal.css colored top-border + hover lift removed so cards read as clean
   Nexus KPI tiles. Modifier classes kept as no-ops for the markup/JS. */
:where(:root[data-page="requests"]) .stat.blue,:where(:root[data-page="requests"]) .stat.amber,:where(:root[data-page="requests"]) .stat.green,:where(:root[data-page="requests"]) .stat.green2,:where(:root[data-page="requests"]) .stat.red,:where(:root[data-page="requests"]) .stat.purple{border-top-color:var(--nx-line)}
:where(:root[data-page="requests"]) .stat:hover{box-shadow:none;transform:none}
:where(:root[data-page="requests"]) .stat-label{font-size:12.5px;font-weight:600;color:var(--nx-ink2);margin-bottom:10px;text-transform:none;letter-spacing:0}
:where(:root[data-page="requests"]) .stat-val{font-size:25px;font-weight:800;letter-spacing:-.03em;color:var(--nx-ink);line-height:1}
:where(:root[data-page="requests"]) .stat-sub{font-size:11px;color:var(--nx-ink3);margin-top:6px}
:where(:root[data-page="requests"]) .stat-note{font-size:11px;font-weight:600;margin-top:6px}

/* ---- Panels -> Nexus cards ---------------------------------------------- */
:where(:root[data-page="requests"]) .panel{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);overflow:hidden;display:flex;flex-direction:column}
:where(:root[data-page="requests"]) .panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 17px}
:where(:root[data-page="requests"]) .panel-title{font-size:13.5px;font-weight:700;color:var(--nx-ink);letter-spacing:-.01em}
:where(:root[data-page="requests"]) .panel-action{font-size:12px;color:var(--nx-ink2);font-weight:600;cursor:pointer;text-decoration:none}
:where(:root[data-page="requests"]) .panel-action:hover{color:var(--brand)}
:where(:root[data-page="requests"]) .nx-card-ic{width:26px;height:26px;border-radius:8px;background:var(--nx-rail);border:1px solid var(--nx-line2);display:inline-flex;align-items:center;justify-content:center;color:var(--nx-ink2);flex:0 0 auto}
:where(:root[data-page="requests"]) .nx-card-ic svg{width:14px;height:14px}

/* two-column dashboard row */
:where(:root[data-page="requests"]) .two-col{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;align-items:start}
@media(max-width:980px){:where(:root[data-page="requests"]) .two-col{grid-template-columns:1fr}}

/* ---- Tables -> Nexus chrome --------------------------------------------- */
:where(:root[data-page="requests"]) .scroll-area table{width:100%;border-collapse:collapse}
:where(:root[data-page="requests"]) .tbl-wrap table thead th,:where(:root[data-page="requests"]) .panel table thead th,:where(:root[data-page="requests"]) .scroll-area table thead th{
  background:var(--nx-rail);color:var(--nx-ink3);font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:11px 17px;
  border-top:1px solid var(--nx-line);border-bottom:1px solid var(--nx-line)}
:where(:root[data-page="requests"]) .tbl-wrap table tbody td,:where(:root[data-page="requests"]) .panel table tbody td,:where(:root[data-page="requests"]) .scroll-area table tbody td{
  padding:13px 17px;border-bottom:1px solid var(--nx-line);font-size:12.5px;color:var(--nx-ink);vertical-align:middle}
:where(:root[data-page="requests"]) .tbl-wrap table tbody tr:last-child td,:where(:root[data-page="requests"]) .panel table tbody tr:last-child td{border-bottom:none}
:where(:root[data-page="requests"]) .tbl-wrap table tbody tr:hover td,:where(:root[data-page="requests"]) .panel table tbody tr:hover td,:where(:root[data-page="requests"]) .scroll-area table tbody tr:hover td{background:var(--nx-hover)}
:where(:root[data-page="requests"]) .loading-state,:where(:root[data-page="requests"]) .empty-state{text-align:center;color:var(--nx-ink3);font-size:12.5px;padding:26px 16px}

/* ---- Buttons -> Nexus nx-btn (ALL buttons, not just filter bar) --------- */
:where(:root[data-page="requests"]) .scroll-area .btn,:where(:root[data-page="requests"]) .modal .btn,:where(:root[data-page="requests"]) .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);
  border-radius:11px;padding:10px 14px;font-size:13px;font-weight:600;cursor:pointer;
  letter-spacing:-.01em;transition:border-color .12s,background .12s,box-shadow .12s}
:where(:root[data-page="requests"]) .scroll-area .btn:hover,:where(:root[data-page="requests"]) .modal .btn:hover,:where(:root[data-page="requests"]) .btn:hover{border-color:var(--nx-ink3);background:var(--nx-elev)}
:where(:root[data-page="requests"]) .scroll-area .btn:active,:where(:root[data-page="requests"]) .modal .btn:active,:where(:root[data-page="requests"]) .btn:active{transform:none}
:where(:root[data-page="requests"]) .scroll-area .btn.primary,:where(:root[data-page="requests"]) .modal .btn.primary,:where(:root[data-page="requests"]) .btn.primary,
:where(:root[data-page="requests"]) .scroll-area .btn.success,:where(:root[data-page="requests"]) .modal .btn.success,:where(:root[data-page="requests"]) .btn.success{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="requests"]) .scroll-area .btn.primary:hover,:where(:root[data-page="requests"]) .modal .btn.primary:hover,:where(:root[data-page="requests"]) .btn.primary:hover,
:where(:root[data-page="requests"]) .scroll-area .btn.success:hover,:where(:root[data-page="requests"]) .modal .btn.success:hover,:where(:root[data-page="requests"]) .btn.success:hover{background:var(--blue-dk);box-shadow:0 4px 14px rgba(1,139,70,.28)}
:where(:root[data-page="requests"]) .scroll-area .btn.danger,:where(:root[data-page="requests"]) .modal .btn.danger,:where(:root[data-page="requests"]) .btn.danger{background:var(--red,#C5221F);border-color:var(--red,#C5221F);color:#fff}
:where(:root[data-page="requests"]) .scroll-area .btn.danger:hover,:where(:root[data-page="requests"]) .modal .btn.danger:hover,:where(:root[data-page="requests"]) .btn.danger:hover{filter:brightness(.94)}
:where(:root[data-page="requests"]) .scroll-area .btn:disabled,:where(:root[data-page="requests"]) .modal .btn:disabled,:where(:root[data-page="requests"]) .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
:where(:root[data-page="requests"]) .btn-row{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
/* ── Export Settings ──────────────────────────────────────────────────
   Two lists side by side: the columns going into the export (drag to
   reorder) and the ones on the bench. Native HTML5 drag-and-drop, no lib. */
/* Export modal: the approved-only vs everything choice. */
:where(:root[data-page="requests"]) .exp-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 11px;border:1.5px solid var(--nx-line,#E5E7EB);border-radius:9px;cursor:pointer;margin-bottom:7px;transition:border-color .12s,background .12s}
:where(:root[data-page="requests"]) .exp-opt:hover{border-color:var(--nx-ink3,#9CA3AF)}
:where(:root[data-page="requests"]) .exp-opt:has(input:checked){border-color:var(--brand,#018B46);background:var(--brand-lt,#E8F5EE)}
:where(:root[data-page="requests"]) .exp-opt input{accent-color:var(--brand,#018B46);width:15px;height:15px;margin-top:1px;cursor:pointer;flex:0 0 auto}
:where(:root[data-page="requests"]) .exp-opt-b{display:flex;flex-direction:column;gap:2px;min-width:0}
:where(:root[data-page="requests"]) .exp-opt-t{font-size:12.5px;font-weight:700;color:var(--nx-ink,#111827);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
:where(:root[data-page="requests"]) .exp-opt-tag{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--brand,#018B46);background:var(--brand-lt,#E8F5EE);border:1px solid var(--brand,#018B46);border-radius:999px;padding:1px 6px}
:where(:root[data-page="requests"]) .exp-opt-d{font-size:11.5px;font-weight:500;color:var(--nx-ink2,#6B7280);line-height:1.45}
:where(:root[data-page="requests"]) .exp-opt.is-empty{opacity:.55}
:where(:root[data-page="requests"]) .exp-sub{font-size:11.5px;color:var(--nx-ink3,#9CA3AF);line-height:1.45;padding:2px 0 0 22px}
:where(:root[data-page="requests"]) .exp-chk.is-off{opacity:.5;cursor:not-allowed}
:where(:root[data-page="requests"]) .exp-chk.is-off input{cursor:not-allowed}
/* Export modal: a read-only picture of what's about to be downloaded. */
:where(:root[data-page="requests"]) .exp-count{font-size:20px;font-weight:700;color:var(--nx-ink,#111827);margin-bottom:14px;letter-spacing:-.02em}
:where(:root[data-page="requests"]) .exp-count .exp-count-sub{font-size:12.5px;font-weight:500;color:var(--nx-ink3,#9CA3AF);letter-spacing:0}
:where(:root[data-page="requests"]) .exp-summary{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
:where(:root[data-page="requests"]) .exp-line{display:flex;gap:9px;font-size:12.5px;line-height:1.45}
:where(:root[data-page="requests"]) .exp-line-k{flex:0 0 84px;color:var(--nx-ink3,#9CA3AF);font-weight:500}
:where(:root[data-page="requests"]) .exp-line-v{flex:1;color:var(--nx-ink,#111827);font-weight:600;word-break:break-word}
:where(:root[data-page="requests"]) .exp-line-v .exp-all{color:var(--nx-ink2,#6B7280);font-weight:500}
:where(:root[data-page="requests"]) .exp-hint{font-size:11.5px;color:var(--nx-ink3,#9CA3AF);line-height:1.45;padding-top:10px;border-top:1px solid var(--nx-line2,#EEF0F2)}
:where(:root[data-page="requests"]) .exp-warn{margin-top:7px;padding:8px 10px;border-radius:7px;background:#FEF3C7;border:1px solid #FDE68A;color:#92400E;font-size:11.5px;line-height:1.45}
/* Export modal: compact filter checkbox/radio rows. */
:where(:root[data-page="requests"]) .exp-chk{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--text2,#6B7280);cursor:pointer;white-space:nowrap}
:where(:root[data-page="requests"]) .exp-chk input{accent-color:var(--brand,#018B46);width:14px;height:14px;cursor:pointer}
/* Export Settings: layer tabs (My layout / Company default) + status note. */
:where(:root[data-page="requests"]) .exs-tabs{display:inline-flex;gap:2px;padding:3px;background:var(--nx-rail,#F9FAFB);border:1px solid var(--nx-line2,#EEF0F2);border-radius:9px;margin-bottom:12px}
:where(:root[data-page="requests"]) .exs-tab{border:none;background:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--nx-ink2,#6B7280);padding:6px 13px;border-radius:7px;cursor:pointer}
:where(:root[data-page="requests"]) .exs-tab:hover{color:var(--nx-ink,#111827)}
:where(:root[data-page="requests"]) .exs-tab.active{background:var(--nx-elev,#fff);color:var(--brand,#018B46);box-shadow:0 1px 2px rgba(0,0,0,.06)}
:where(:root[data-page="requests"]) .exs-note{font-size:11.5px;line-height:1.45;padding:8px 11px;border-radius:8px;margin-bottom:12px;display:none}
:where(:root[data-page="requests"]) .exs-note.is-info{display:block;background:var(--nx-rail,#F9FAFB);border:1px solid var(--nx-line2,#EEF0F2);color:var(--nx-ink2,#6B7280)}
:where(:root[data-page="requests"]) .exs-note.is-org{display:block;background:#FEF3C7;border:1px solid #FDE68A;color:#92400E}
:where(:root[data-page="requests"]) .exs-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){:where(:root[data-page="requests"]) .exs-wrap{grid-template-columns:1fr}}
:where(:root[data-page="requests"]) .exs-col{background:var(--nx-elev,#fff);border:1px solid var(--nx-line,#E5E7EB);border-radius:var(--nx-radius,12px);padding:14px}
:where(:root[data-page="requests"]) .exs-col h4{margin:0 0 3px;font-size:13px;font-weight:700;color:var(--nx-ink,#111827)}
:where(:root[data-page="requests"]) .exs-col .exs-sub{margin:0 0 12px;font-size:11.5px;color:var(--nx-ink3,#9CA3AF)}
:where(:root[data-page="requests"]) .exs-list{display:flex;flex-direction:column;gap:6px;min-height:60px;border-radius:8px;padding:2px}
:where(:root[data-page="requests"]) .exs-list.drag-over{background:var(--brand-lt,#E8F5EE);outline:2px dashed var(--brand,#018B46);outline-offset:2px}
:where(:root[data-page="requests"]) .exs-item{display:flex;align-items:center;gap:9px;padding:8px 10px;background:var(--nx-rail,#F9FAFB);border:1px solid var(--nx-line2,#EEF0F2);border-radius:8px;cursor:grab;font-size:12.5px}
:where(:root[data-page="requests"]) .exs-item:active{cursor:grabbing}
:where(:root[data-page="requests"]) .exs-item.dragging{opacity:.4}
:where(:root[data-page="requests"]) .exs-item.drop-target{border-top:2px solid var(--brand,#018B46)}
:where(:root[data-page="requests"]) .exs-grip{color:var(--nx-ink3,#9CA3AF);flex:0 0 auto;line-height:0}
:where(:root[data-page="requests"]) .exs-grip svg{width:12px;height:12px}
:where(:root[data-page="requests"]) .exs-name{flex:1;min-width:0}
:where(:root[data-page="requests"]) .exs-label-in{width:100%;border:1px solid transparent;background:transparent;border-radius:5px;padding:3px 5px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--nx-ink,#111827)}
:where(:root[data-page="requests"]) .exs-label-in:hover{border-color:var(--nx-line,#E5E7EB);background:#fff}
:where(:root[data-page="requests"]) .exs-label-in:focus{outline:none;border-color:var(--brand,#018B46);background:#fff}
:where(:root[data-page="requests"]) .exs-key{display:block;padding:0 5px;font-size:10.5px;color:var(--nx-ink3,#9CA3AF)}
:where(:root[data-page="requests"]) .exs-move{background:none;border:1px solid var(--nx-line,#E5E7EB);border-radius:6px;color:var(--nx-ink2,#6B7280);cursor:pointer;font-size:14px;line-height:1;padding:4px 8px;flex:0 0 auto}
:where(:root[data-page="requests"]) .exs-move:hover{background:var(--brand-lt,#E8F5EE);color:var(--brand,#018B46);border-color:var(--brand,#018B46)}
:where(:root[data-page="requests"]) .exs-empty{padding:22px 10px;text-align:center;font-size:12px;color:var(--nx-ink3,#9CA3AF)}
:where(:root[data-page="requests"]) .exs-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
:where(:root[data-page="requests"]) .exs-dirty{font-size:12px;color:#B45309;font-weight:600}
/* Settings: the two sections (Export columns / Request types) sit under one
   tab strip, styled the same as the layer tabs inside Export columns. */
:where(:root[data-page="requests"]) .set-tabs{margin-bottom:14px}
/* Settings > Request types. One row per type: grip, name, which approval
   chain it follows, an on/off switch, and remove. Same row shell as the
   export-column rows so the two tabs look like one screen. */
:where(:root[data-page="requests"]) .rt-panel{max-width:820px}
:where(:root[data-page="requests"]) .rt-head,:where(:root[data-page="requests"]) .rt-item{display:grid;grid-template-columns:16px minmax(120px,1fr) 168px 56px 34px;align-items:center;gap:10px}
:where(:root[data-page="requests"]) .rt-head{padding:0 10px 7px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink3,#9CA3AF)}
:where(:root[data-page="requests"]) .rt-item{padding:8px 10px;background:var(--nx-rail,#F9FAFB);border:1px solid var(--nx-line2,#EEF0F2);border-radius:8px;cursor:grab;font-size:12.5px}
:where(:root[data-page="requests"]) .rt-item:active{cursor:grabbing}
:where(:root[data-page="requests"]) .rt-item.dragging{opacity:.4}
:where(:root[data-page="requests"]) .rt-item.drop-target{border-top:2px solid var(--brand,#018B46)}
:where(:root[data-page="requests"]) .rt-item.is-off{opacity:.62}
:where(:root[data-page="requests"]) .rt-name-in{width:100%;border:1px solid transparent;background:transparent;border-radius:5px;padding:4px 6px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--nx-ink,#111827)}
:where(:root[data-page="requests"]) .rt-name-in:hover{border-color:var(--nx-line,#E5E7EB);background:#fff}
:where(:root[data-page="requests"]) .rt-name-in:focus{outline:none;border-color:var(--brand,#018B46);background:#fff}
:where(:root[data-page="requests"]) .rt-kind{width:100%;border:1px solid var(--nx-line,#E5E7EB);background:#fff;border-radius:7px;padding:5px 7px;font-family:inherit;font-size:12px;color:var(--nx-ink,#111827)}
:where(:root[data-page="requests"]) .rt-kind:disabled{background:var(--nx-rail,#F9FAFB);color:var(--nx-ink3,#9CA3AF);cursor:not-allowed}
:where(:root[data-page="requests"]) .rt-kind:focus{outline:none;border-color:var(--brand,#018B46)}
/* On/off switch -- a styled checkbox, no native control showing through. */
:where(:root[data-page="requests"]) .rt-sw{position:relative;display:inline-block;width:34px;height:19px;flex:0 0 auto}
:where(:root[data-page="requests"]) .rt-sw input{opacity:0;width:0;height:0;position:absolute}
:where(:root[data-page="requests"]) .rt-sw span{position:absolute;inset:0;background:var(--nx-line2,#E5E7EB);border-radius:999px;cursor:pointer;transition:background .15s}
:where(:root[data-page="requests"]) .rt-sw span::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .15s}
:where(:root[data-page="requests"]) .rt-sw input:checked + span{background:var(--brand,#018B46)}
:where(:root[data-page="requests"]) .rt-sw input:checked + span::after{transform:translateX(15px)}
:where(:root[data-page="requests"]) .rt-sw input:disabled + span{opacity:.5;cursor:not-allowed}
:where(:root[data-page="requests"]) .rt-del{background:none;border:1px solid var(--nx-line,#E5E7EB);border-radius:6px;color:var(--nx-ink3,#9CA3AF);cursor:pointer;font-size:13px;line-height:1;padding:4px 7px}
:where(:root[data-page="requests"]) .rt-del:hover{border-color:var(--red,#C5221F);color:var(--red,#C5221F);background:#fff}
:where(:root[data-page="requests"]) .rt-del:disabled{opacity:.32;cursor:not-allowed}
:where(:root[data-page="requests"]) .rt-lock{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--nx-ink3,#9CA3AF);text-align:center}
:where(:root[data-page="requests"]) .rt-used{display:block;padding:0 6px;font-size:10.5px;color:var(--nx-ink3,#9CA3AF)}
@media(max-width:720px){:where(:root[data-page="requests"]) .rt-head{display:none}:where(:root[data-page="requests"]) .rt-item{grid-template-columns:16px 1fr 34px;row-gap:7px}}
/* Settings > Earning codes: the list of homes, and one home's codes */
:where(:root[data-page="requests"]) .ec-panel{max-width:900px}
:where(:root[data-page="requests"]) .ec-head,:where(:root[data-page="requests"]) .ec-row{display:grid;grid-template-columns:minmax(150px,1fr) 150px 210px 44px 16px;align-items:center;gap:12px}
:where(:root[data-page="requests"]) .ec-head{padding:0 12px 7px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--nx-ink3,#9CA3AF)}
:where(:root[data-page="requests"]) .ec-rows{display:flex;flex-direction:column;gap:6px}
:where(:root[data-page="requests"]) .ec-row{padding:10px 12px;background:var(--nx-rail,#F9FAFB);border:1px solid var(--nx-line2,#EEF0F2);border-radius:8px;font-size:12.5px;cursor:pointer;transition:border-color .12s,background .12s}
:where(:root[data-page="requests"]) .ec-row:hover{border-color:var(--brand,#018B46);background:var(--nx-elev,#fff)}
:where(:root[data-page="requests"]) .ec-name{font-weight:600;color:var(--nx-ink,#111827);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="requests"]) .ec-dim{color:var(--nx-ink3,#9CA3AF);font-size:12px}
:where(:root[data-page="requests"]) .ec-warn{color:#B45309}
:where(:root[data-page="requests"]) .ec-go{color:var(--nx-ink3,#9CA3AF);font-size:16px;line-height:1}
:where(:root[data-page="requests"]) .ec-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
:where(:root[data-page="requests"]) .ec-pick{min-width:220px;border:1px solid var(--nx-line,#E5E7EB);background:var(--nx-elev,#fff);border-radius:7px;padding:6px 8px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--nx-ink,#111827)}
:where(:root[data-page="requests"]) .ec-state{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--nx-ink2,#6B7280)}
:where(:root[data-page="requests"]) .ec-code{display:grid;grid-template-columns:200px 1fr 44px;align-items:center;gap:12px;padding:10px 12px;background:var(--nx-rail,#F9FAFB);border:1px solid var(--nx-line2,#EEF0F2);border-radius:8px;font-size:12.5px}
:where(:root[data-page="requests"]) .ec-code-head{grid-template-columns:200px 1fr 44px}
:where(:root[data-page="requests"]) .ec-code.off>span:first-child,:where(:root[data-page="requests"]) .ec-code.off .ec-chip{opacity:.5}
:where(:root[data-page="requests"]) .ec-code b{display:block;font-weight:700;color:var(--nx-ink,#111827)}
:where(:root[data-page="requests"]) .ec-types{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
:where(:root[data-page="requests"]) .ec-chip{display:inline-flex;align-items:center;gap:2px;padding:3px 4px 3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(1,139,70,.10);color:var(--brand,#018B46)}
:where(:root[data-page="requests"]) .ec-chip button{border:0;background:none;cursor:pointer;color:inherit;opacity:.6;font-size:14px;line-height:1;padding:0 5px}
:where(:root[data-page="requests"]) .ec-chip button:hover{opacity:1}
:where(:root[data-page="requests"]) .ec-add{border:1px dashed var(--nx-line,#E5E7EB);background:transparent;border-radius:999px;padding:3px 8px;font-family:inherit;font-size:12px;color:var(--nx-ink2,#6B7280);cursor:pointer;width:112px}
:where(:root[data-page="requests"]) .ec-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:12px}
@media(max-width:720px){:where(:root[data-page="requests"]) .ec-head{display:none}:where(:root[data-page="requests"]) .ec-row{grid-template-columns:1fr 44px 16px;row-gap:4px}:where(:root[data-page="requests"]) .ec-row .ec-co,:where(:root[data-page="requests"]) .ec-row .ec-sum{grid-column:1}:where(:root[data-page="requests"]) .ec-code{grid-template-columns:1fr 44px}:where(:root[data-page="requests"]) .ec-code>.ec-types{grid-column:1/-1;grid-row:2}}
/* Compact soft-pill buttons in filter bars / section heads keep their own size */
:where(:root[data-page="requests"]) .filter-bar .btn,:where(:root[data-page="requests"]) .section-hd .btn{border:1px solid var(--nx-line2);background:var(--nx-surface);color:var(--nx-ink2);border-radius:9px;font-size:12px;font-weight:600;padding:7px 12px}
:where(:root[data-page="requests"]) .filter-bar .btn:hover,:where(:root[data-page="requests"]) .section-hd .btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink);background:var(--nx-surface)}
:where(:root[data-page="requests"]) .filter-bar .btn.primary,:where(:root[data-page="requests"]) .section-hd .btn.primary{border-color:var(--brand);background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="requests"]) .filter-bar .btn.primary:hover,:where(:root[data-page="requests"]) .section-hd .btn.primary:hover{background:var(--brand);color:#fff}

/* ---- Quick-action tiles -------------------------------------------------- */
:where(:root[data-page="requests"]) .quick-grid{display:flex;flex-direction:column;gap:8px;padding:4px 17px 17px}
:where(:root[data-page="requests"]) .qa{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--nx-line);border-radius:12px;background:var(--nx-elev);cursor:pointer;transition:border-color .12s,background .12s}
:where(:root[data-page="requests"]) .qa:hover{border-color:var(--brand);background:var(--brand-lt)}
:where(:root[data-page="requests"]) .qa-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
:where(:root[data-page="requests"]) .qa-label{font-size:13px;font-weight:600;color:var(--nx-ink)}

/* ---- Filter bar dropdowns (multi-drop) -> dt-combo look ----------------- */
:where(:root[data-page="requests"]) .filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}
:where(:root[data-page="requests"]) .filter-bar .multi-drop .multi-drop-btn{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);border-radius:11px;font-size:13px;font-weight:500;padding:9px 13px;transition:border-color .12s,box-shadow .12s}
:where(:root[data-page="requests"]) .filter-bar .multi-drop .multi-drop-btn:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .filter-bar .multi-drop.open .multi-drop-btn{border-color:var(--brand);color:var(--nx-ink);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="requests"]) .filter-bar .multi-drop.has-selection .multi-drop-btn{border-color:var(--brand);background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="requests"]) .filter-bar input[type="text"],:where(:root[data-page="requests"]) .filter-bar input[type="date"]{border:1px solid var(--nx-line2)!important;background:var(--nx-elev)!important;color:var(--nx-ink)!important;border-radius:11px!important;padding:9px 13px!important;font-size:13px!important}
:where(:root[data-page="requests"]) .multi-drop-menu{border:1px solid var(--nx-line2);border-radius:12px;box-shadow:0 18px 44px rgba(20,22,28,.20);background:var(--nx-surface)}
:where(:root[data-page="requests"]) .multi-drop-item{font-size:12.5px;color:var(--nx-ink)}

/* ---- Records segmented toggle ------------------------------------------- */
:where(:root[data-page="requests"]) .req-seg{position:relative;display:inline-flex;gap:2px;background:var(--nx-surface);border:1px solid var(--nx-line);border-radius:12px;padding:4px;margin-bottom:14px;flex-wrap:nowrap}
/* Sliding highlight pill that moves to the active tab */
:where(:root[data-page="requests"]) .req-seg-pill{position:absolute;top:4px;bottom:4px;border-radius:8px;background:var(--brand-lt);transition:left .22s cubic-bezier(.4,0,.2,1),width .22s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}
:where(:root[data-page="requests"]) .req-seg-btn{position:relative;z-index:1;border:0;background:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--nx-ink2);padding:7px 14px;border-radius:8px;letter-spacing:-.01em;transition:color .15s;white-space:nowrap}
:where(:root[data-page="requests"]) .req-seg-btn:hover{color:var(--nx-ink)}
:where(:root[data-page="requests"]) .req-seg-btn.active{background:none;color:var(--brand);font-weight:600;box-shadow:none}

/* ---- 3-month trend metric toggle ---------------------------------------- */
:where(:root[data-page="requests"]) .trend-toggle{display:inline-flex;border:1px solid var(--nx-line2);border-radius:9px;overflow:hidden}
:where(:root[data-page="requests"]) .trend-tog-btn{border:none;background:var(--nx-elev);color:var(--nx-ink2);font-family:inherit;font-size:12px;font-weight:600;padding:6px 13px;cursor:pointer}
:where(:root[data-page="requests"]) .trend-tog-btn+.trend-tog-btn{border-left:1px solid var(--nx-line2)}
:where(:root[data-page="requests"]) .trend-tog-btn.active{background:var(--brand);color:#fff}

/* ---- Activity list ------------------------------------------------------- */
:where(:root[data-page="requests"]) .act-list{display:flex;flex-direction:column}
:where(:root[data-page="requests"]) .section-hd{display:flex;align-items:center;gap:10px;margin:2px 0 12px}

/* ---- Form fields --------------------------------------------------------- */
:where(:root[data-page="requests"]) .field label,:where(:root[data-page="requests"]) .field>label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .field input[type="text"],:where(:root[data-page="requests"]) .field input[type="number"],:where(:root[data-page="requests"]) .field input[type="email"],:where(:root[data-page="requests"]) .field input[type="password"],
:where(:root[data-page="requests"]) .field textarea,:where(:root[data-page="requests"]) .field select{
  border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink);
  border-radius:11px;padding:10px 13px;font-size:13px;font-family:inherit;width:100%;box-sizing:border-box;transition:border-color .12s,box-shadow .12s}
:where(:root[data-page="requests"]) .field input:focus,:where(:root[data-page="requests"]) .field textarea:focus,:where(:root[data-page="requests"]) .field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
/* Shown, not typed in. Same box as the field beside it so a two-column row
   keeps one height -- the Payroll field is worked out from the facility, and
   it used to carry its explanation on a second line, which pushed the rest of
   the form down. */
:where(:root[data-page="requests"]) .field input.field-ro{background:var(--nx-rail);cursor:default}
:where(:root[data-page="requests"]) .field input.field-ro:focus{border-color:var(--nx-line2);box-shadow:none}
/* The trailing half of a field label: a short aside in sentence case, where
   the uppercase label itself can't say it. Lives on the label row, whose
   height doesn't move. */
:where(:root[data-page="requests"]) .field label .lbl-aside{text-transform:none;letter-spacing:normal;font-weight:500;color:var(--nx-ink3)}

/* ---- Charge Date picker --------------------------------------------------
   A dropdown calendar, not a native date input: a charge date is either one
   day or the span of a pay period, and the facility's payroll check dates
   are marked on it -- neither of which the browser's own picker can do.
   Two months show side by side so a period crossing a month boundary is one
   gesture.
   .cd-pop is position:fixed and parked on <body> for the same reason
   .ss-panel is: the New Request form lives in a modal with its own
   scrollbox, which would otherwise clip the panel off the bottom. */
:where(:root[data-page="requests"]) .cd-trigger{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;
  padding:10px 13px;border:1px solid var(--nx-line2);border-radius:11px;
  background:var(--nx-elev);color:var(--nx-ink);font-size:13px;font-family:inherit;
  text-align:left;cursor:pointer;transition:border-color .12s,box-shadow .12s}
:where(:root[data-page="requests"]) .cd-trigger:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .cd-trigger:focus,:where(:root[data-page="requests"]) .cd-trigger.is-open{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="requests"]) .cd-trigger .cd-ic{flex:0 0 auto;color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .cd-trigger .cd-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-variant-numeric:tabular-nums}
:where(:root[data-page="requests"]) .cd-trigger .cd-val.is-ph{color:var(--nx-ink3)}
/* Clear lives inside the trigger, so it is a span rather than a nested
   button; cdClear() stops the click before the trigger re-opens the panel. */
:where(:root[data-page="requests"]) .cd-trigger .cd-x{flex:0 0 auto;display:none;line-height:0;padding:3px;margin:-3px -5px -3px 0;
  border-radius:6px;color:var(--nx-ink3);cursor:pointer}
:where(:root[data-page="requests"]) .cd-trigger.has-val .cd-x{display:block}
:where(:root[data-page="requests"]) .cd-trigger .cd-x:hover{background:var(--nx-hover);color:var(--nx-down)}

:where(:root[data-page="requests"]) .cd-pop{position:fixed;z-index:9100;display:none;flex-direction:column;width:max-content;
  background:var(--nx-elev);border:1px solid var(--nx-line2);border-radius:14px;
  box-shadow:0 16px 40px rgba(12,14,20,.18);padding:13px 14px 11px;
  font-family:var(--font);color:var(--nx-ink)}
:where(:root[data-page="requests"]) .cd-pop.is-open{display:flex}
:where(:root[data-page="requests"]) .cd-head{display:flex;align-items:center;margin-bottom:9px}
:where(:root[data-page="requests"]) .cd-head .cd-spacer{flex:1}
:where(:root[data-page="requests"]) .cd-nav{border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);
  width:27px;height:27px;border-radius:8px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:15px;line-height:1;padding:0;font-family:inherit}
:where(:root[data-page="requests"]) .cd-nav:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="requests"]) .cd-months{display:flex;gap:18px}
:where(:root[data-page="requests"]) .cd-month{width:212px}
:where(:root[data-page="requests"]) .cd-mtitle{font-size:12.5px;font-weight:700;color:var(--nx-ink);text-align:center;
  letter-spacing:-.01em;padding-bottom:7px}
:where(:root[data-page="requests"]) .cd-dow,:where(:root[data-page="requests"]) .cd-grid{display:grid;grid-template-columns:repeat(7,1fr)}
:where(:root[data-page="requests"]) .cd-dow{margin-bottom:3px}
:where(:root[data-page="requests"]) .cd-dow span{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--nx-ink3);text-align:center;padding:2px 0}
/* No column gap, so a selected range reads as one continuous band -- the
   cells carry the rounding at its two ends instead. */
:where(:root[data-page="requests"]) .cd-grid{row-gap:2px;column-gap:0}
:where(:root[data-page="requests"]) .cd-day{position:relative;height:30px;border:none;background:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--nx-ink);
  border-radius:8px;transition:background .1s,color .1s}
:where(:root[data-page="requests"]) .cd-day.is-blank{visibility:hidden;cursor:default}
:where(:root[data-page="requests"]) .cd-day:hover:not(.is-blank){background:var(--nx-hover)}
:where(:root[data-page="requests"]) .cd-day.is-today{font-weight:800;box-shadow:inset 0 0 0 1px var(--nx-line2)}
/* A payroll check date: indigo number plus a dot beneath it. It is picked
   like any other day -- the marking is information, not a restriction. */
:where(:root[data-page="requests"]) .cd-day.is-check{color:var(--cd-check);font-weight:700}
:where(:root[data-page="requests"]) .cd-day.is-check::after{content:'';position:absolute;left:50%;bottom:3px;
  width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--cd-check)}
:where(:root[data-page="requests"]) .cd-day.is-in{background:var(--brand-lt);border-radius:0}
:where(:root[data-page="requests"]) .cd-day.is-a,:where(:root[data-page="requests"]) .cd-day.is-b{background:var(--brand);color:#fff;font-weight:700;box-shadow:none}
:where(:root[data-page="requests"]) .cd-day.is-a:hover,:where(:root[data-page="requests"]) .cd-day.is-b:hover{background:var(--brand)}
:where(:root[data-page="requests"]) .cd-day.is-a{border-radius:8px 0 0 8px}
:where(:root[data-page="requests"]) .cd-day.is-b{border-radius:0 8px 8px 0}
:where(:root[data-page="requests"]) .cd-day.is-a.is-b{border-radius:8px}
:where(:root[data-page="requests"]) .cd-day.is-a::after,:where(:root[data-page="requests"]) .cd-day.is-b::after{background:#fff}
:where(:root[data-page="requests"]) .cd-foot{display:flex;align-items:center;gap:9px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--nx-line)}
:where(:root[data-page="requests"]) .cd-note{flex:1;min-width:0;font-size:11.5px;line-height:1.45;color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .cd-note b{color:var(--nx-ink2);font-weight:600;font-variant-numeric:tabular-nums}
:where(:root[data-page="requests"]) .cd-legend-dot{display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--cd-check);vertical-align:1px;margin-right:4px}
:where(:root[data-page="requests"]) .cd-foot .btn{padding:6px 13px;font-size:12px;white-space:nowrap}
@media(max-width:620px){
  :where(:root[data-page="requests"]) .cd-months{flex-direction:column;gap:12px}
  :where(:root[data-page="requests"]) .cd-month{width:100%;min-width:196px}
  :where(:root[data-page="requests"]) .cd-foot{flex-wrap:wrap}
  :where(:root[data-page="requests"]) .cd-note{flex:1 0 100%;order:-1;margin-bottom:4px}
}
/* A line of explanation under a field, painted into the empty grid cell below
   it rather than taking up room in its own. .form-grid is two columns, so a
   field in the right-hand column of one row has the next row's right-hand
   cell under it -- which is where this sits. Out of flow on purpose: in flow
   it made its own row taller and shoved the whole form down.
   Only use it where the cell below really is free (today: Payroll, with
   Charge Date alone on the row beneath). Two lines fit comfortably; a third
   is the limit before it reaches the row after.
   Under 900px .form-grid collapses to one column, nothing sits beside
   anything, and it goes back into the flow where it reads in order. */
:where(:root[data-page="requests"]) .field.has-hint{position:relative}
:where(:root[data-page="requests"]) .field .field-hint{position:absolute;top:100%;left:0;right:0;margin-top:7px;
  font-size:12px;line-height:1.45;color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .field .field-hint.is-warn{color:var(--amber-text,#9a6700)}
@media(max-width:900px){
  :where(:root[data-page="requests"]) .field .field-hint{position:static;margin-top:5px}
}

/* ---- Modals -> Nexus surface + rounding --------------------------------- */
/* portal.css caps .modal at 90vh. Keep it scrollable: overflow:hidden here
   used to clip Request Details on shorter screens, hiding the attachments
   and the Approve/Reject buttons below the fold. */
:where(:root[data-page="requests"]) .modal-overlay{background:rgba(20,22,28,.45);backdrop-filter:blur(2px)}
:where(:root[data-page="requests"]) .modal{border-radius:18px;background:var(--nx-surface);border:1px solid var(--nx-line);box-shadow:0 24px 64px rgba(20,22,28,.28);overflow-x:hidden;overflow-y:auto}
:where(:root[data-page="requests"]) .modal-head{padding:16px 20px;border-bottom:1px solid var(--nx-line);background:var(--nx-rail);display:flex;align-items:center;gap:10px}
:where(:root[data-page="requests"]) .modal-title{font-size:15px;font-weight:700;color:var(--nx-ink);letter-spacing:-.01em}
:where(:root[data-page="requests"]) .modal-close{margin-left:auto;border:none;background:none;cursor:pointer;color:var(--nx-ink3);width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center}
:where(:root[data-page="requests"]) .modal-close:hover{background:var(--nx-hover);color:var(--nx-ink)}
:where(:root[data-page="requests"]) .modal-body{padding:18px 20px}
:where(:root[data-page="requests"]) .modal-foot{padding:14px 20px;border-top:1px solid var(--nx-line);display:flex;gap:8px;justify-content:flex-end}

/* ---- payroll-dashboard KPI cards (icon-chip style) ----------------------- */
:where(:root[data-page="requests"]) .pd-kpi{background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:var(--nx-radius);padding:16px 17px}
:where(:root[data-page="requests"]) .pd-kpi-top{display:flex;align-items:center;gap:9px;margin-bottom:13px}
:where(:root[data-page="requests"]) .pd-kpi-chip{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
:where(:root[data-page="requests"]) .pd-kpi-chip svg{width:16px;height:16px}
:where(:root[data-page="requests"]) .pd-kpi-label{font-size:12.5px;font-weight:600;color:var(--nx-ink2)}
:where(:root[data-page="requests"]) .pd-kpi-val{font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--nx-ink)}
:where(:root[data-page="requests"]) .pd-kpi-foot{display:flex;align-items:center;gap:8px;margin-top:10px}
:where(:root[data-page="requests"]) .pd-kpi-delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
:where(:root[data-page="requests"]) .pd-kpi-delta.up{color:var(--nx-down);background:var(--nx-down-bg)}
:where(:root[data-page="requests"]) .pd-kpi-delta.down{color:var(--nx-up);background:var(--nx-up-bg)}
:where(:root[data-page="requests"]) .pd-kpi-sub{font-size:11px;color:var(--nx-ink3)}
/* Lock the All Requests / Pending / etc. table so columns stay the same
   width on every tab, no matter the text inside. */
:where(:root[data-page="requests"]) #histTable{table-layout:fixed;width:100%}
/* The New Request form lives inside the popup now, so it must show whether or
   not it has the .page "active" class (tab-switching strips that class). */
:where(:root[data-page="requests"]) #newRequestModal #page-request{display:block}
/* Let the form fill the popup: drop the inner card box, padding, width cap,
   and the repeated "Submit a Request" title. */
:where(:root[data-page="requests"]) #newRequestModal .form-card{border:none;padding:0;margin:0;max-width:none;background:transparent;border-radius:0}
:where(:root[data-page="requests"]) #newRequestModal .form-card-title{display:none}
:where(:root[data-page="requests"]) #newRequestModal .modal-head{background:#fff;border-bottom:1px solid var(--nx-line);align-items:center}
:where(:root[data-page="requests"]) #newRequestModal .modal-head .nx-card-ic,:where(:root[data-page="requests"]) #newRequestModal .modal-title{line-height:1;margin:0}
:where(:root[data-page="requests"]) #newRequestModal .modal-title{display:flex;align-items:center}
:where(:root[data-page="requests"]) #newRequestModal .modal-body{padding:20px 22px}
/* portal.css gives every .modal 28px of padding. This popup draws its own
   header and body, so that padding framed both: the header line stopped
   short of the edges and the scrollbar sat inside the box. Drop it, and let
   only the body scroll so the header stays put and the corners stay round. */
:where(:root[data-page="requests"]) #newRequestModal .modal{padding:0;overflow:hidden}
:where(:root[data-page="requests"]) #newRequestModal .modal-head{padding:16px 22px;flex:none}
:where(:root[data-page="requests"]) #newRequestModal .modal-body{flex:1 1 auto;min-height:0}
:where(:root[data-page="requests"]) #histTable th,:where(:root[data-page="requests"]) #histTable td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Checkbox column: no ellipsis (it was showing ".." after the box) */
:where(:root[data-page="requests"]) #histTable th:first-child,:where(:root[data-page="requests"]) #histTable td:first-child{text-overflow:clip;text-align:center}
/* Type column: the pill overflows the 9% cell, so the browser painted "..."
   right after the badge. Clip instead of ellipsis. */
:where(:root[data-page="requests"]) #histTable th:nth-child(6),:where(:root[data-page="requests"]) #histTable td:nth-child(6){text-overflow:clip}
/* Compact variant: 6-card All Requests row fits without horizontal scroll */
/* Compact = tighter card padding so all 6 fit one row, but text/chips stay
   the same size as the other tabs. */
:where(:root[data-page="requests"]) .stats.compact .pd-kpi{padding:16px 12px}
@media(max-width:1200px){:where(:root[data-page="requests"]) .stats.compact{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:680px){:where(:root[data-page="requests"]) .stats.compact{grid-template-columns:repeat(2,1fr)!important}}
:where(:root[data-page="requests"]) .pd-kpi-chip.chip-brand{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="requests"]) .pd-kpi-chip.chip-amber{background:#FEF3D7;color:#B7791F}
:where(:root[data-page="requests"]) .pd-kpi-chip.chip-green{background:var(--nx-up-bg);color:var(--nx-up)}
:where(:root[data-page="requests"]) .pd-kpi-chip.chip-indigo{background:#E8EEFB;color:var(--nx-indigo)}
:where(:root[data-page="requests"]) .pd-kpi-chip.chip-red{background:var(--nx-down-bg);color:var(--nx-down)}
:root[data-theme="dark"]:where([data-page="requests"]) .pd-kpi-chip.chip-amber{background:var(--amber-lt);color:var(--amber)}
:root[data-theme="dark"]:where([data-page="requests"]) .pd-kpi-chip.chip-indigo{background:#18213A;color:#6C8BF0}

/* ---- Page head (payroll-dashboard title row) ---------------------------- */
:where(:root[data-page="requests"]) .nx-pagehead{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
:where(:root[data-page="requests"]) .nx-pagehead .nx-h1{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--nx-ink)}
:where(:root[data-page="requests"]) .nx-pagehead .nx-sub{font-size:12.5px;color:var(--nx-ink3)}
:where(:root[data-page="requests"]) .nx-pagehead-right{margin-left:auto;display:flex;gap:8px}

/* ---- Toast + tooltip ----------------------------------------------------- */
:where(:root[data-page="requests"]) .toast{border-radius:12px;box-shadow:0 12px 32px rgba(20,22,28,.22)}

/* The find-in-page flash. The page used to add this from its own script. */
@keyframes crFindFlash{0%,100%{background:transparent}18%,62%{background:rgba(1,139,70,.18)}}
:where(:root[data-page="requests"]) tr.cr-find-flash>td{animation:crFindFlash 2.2s ease;box-shadow:inset 0 0 0 9999px transparent}
:where(:root[data-page="requests"]) tr.cr-find-flash{outline:2px solid rgba(1,139,70,.55);outline-offset:-2px;border-radius:6px}


/* ----------------------------------------------------------------------------
 * 15.40  General -- Support (work items)
 * general/support.php, data-page="support"
 * -------------------------------------------------------------------------- */
/* ============================================================================
 * Work Items -- a list, and the one item somebody is reading, beside it.
 *
 * The list is the page. Everything a reader came for -- what it is, whose it
 * is, how far along -- is on the row, and the panel beside it holds the parts
 * that would not fit on one line: the note, who asked, the thread.
 *
 * portal.css and nexus.css carry the theme tokens and the change-password
 * modal. Everything this page draws itself is prefixed --wi- / .wi-.
 * ========================================================================== */

:root:where([data-page="support"]){
  --wi-hover:#F3F4F6;
  --wi-quiet:var(--nx-ink3);
  /* A finished row's wash, and the same again a shade deeper for hover and
   * for the open row. A tint rather than a highlight: the ink on top of it is
   * the ordinary ink, and the row still reads as one row among the rest. It
   * is deliberately at the pale end -- enough green to pick the row out of a
   * column of var(--nx-surface) ones, not enough to pull the eye to it. Finished work is
   * the part of the list you are allowed to skip. */
  --wi-fin:#F2FAF5;
  --wi-fin-h:#E7F4EC;
  /* Pill tones. Each is an ink and a wash, so a pill reads at a glance in
   * both themes without a border doing the work. */
  --wi-t-grey:var(--nx-ink2);      --wi-t-grey-bg:var(--nx-line);
  --wi-t-blue:var(--accent-blue);  --wi-t-blue-bg:var(--accent-blue-lt);
  --wi-t-purple:var(--purple);     --wi-t-purple-bg:var(--purple-lt);
  --wi-t-teal:var(--teal);         --wi-t-teal-bg:var(--teal-lt);
  --wi-t-green:var(--green);       --wi-t-green-bg:var(--green-lt);
  --wi-t-amber:var(--amber-text);  --wi-t-amber-bg:var(--amber-lt);
  --wi-t-red:var(--red-text);      --wi-t-red-bg:var(--red-lt);
}
:root[data-theme="dark"]:where([data-page="support"]){
  --wi-hover:#22242B;
  --wi-fin:#141F18;
  --wi-fin-h:#1A2A20;
}

:where(:root[data-page="support"]) *, *:where([data-page="support"]){box-sizing:border-box}
html:where([data-page="support"]),:where(:root[data-page="support"]) body{height:100%}
:where(:root[data-page="support"]) body{
  margin:0;background:var(--nx-bg);color:var(--nx-ink);
  font-family:var(--nx-font);
  font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;
}

/* Wide, but not to the edges. Seven columns and one of them is a sentence
 * somebody wrote, so 1400px was too tight -- it wrapped the note. Running the
 * full width of a desk monitor was too loose: a row with nothing either side
 * of it has no shape, and the eye loses its place tracking across. This sits
 * between the two, with a gutter left on both sides. */
:where(:root[data-page="support"]) .wi{max-width:1700px;margin:0 auto;padding:0 32px;min-height:100%;display:flex;flex-direction:column}

/* -- Inside the General frame ----------------------------------------------
 * The frame draws the sidebar and top bar, so this page's own bar goes and the
 * list runs the width it is given. The frame hides the last 22px on the right
 * (its scrollbar), so the right gutter is doubled to leave 22px showing. */
html.wi-embed:where([data-page="support"]) body{background:var(--nx-surface)}
html.wi-embed:where([data-page="support"]) .wi-top{display:none}
html.wi-embed:where([data-page="support"]) .wi{max-width:none;padding:18px 44px 0 22px}
@media (max-width:720px){ html.wi-embed:where([data-page="support"]) .wi{padding:12px 34px 0 12px} }

/* -- Top bar -------------------------------------------------------------- */
:where(:root[data-page="support"]) .wi-top{
  display:flex;align-items:center;gap:12px;padding:16px 0 14px;
  border-bottom:1px solid var(--nx-line);flex-wrap:wrap;
}
:where(:root[data-page="support"]) .wi-top a{color:var(--nx-ink2);text-decoration:none;font-weight:600}
:where(:root[data-page="support"]) .wi-top a:hover{color:var(--blue)}
:where(:root[data-page="support"]) .wi-here{font-weight:700;color:var(--nx-ink)}
:where(:root[data-page="support"]) .wi-here:before{content:'/';color:var(--nx-ink3);margin-right:12px;font-weight:400}
:where(:root[data-page="support"]) .wi-top-r{margin-left:auto;display:flex;align-items:center;gap:8px}
:where(:root[data-page="support"]) .wi-scope{
  font-size:12px;color:var(--nx-ink2);background:var(--nx-surface);
  border:1px solid var(--nx-line2);border-radius:999px;padding:4px 11px;
}

/* -- Buttons -------------------------------------------------------------- */
:where(:root[data-page="support"]) .wi-btn{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  background:var(--nx-surface);color:var(--nx-ink2);
  border:1px solid var(--nx-line2);border-radius:9px;padding:7px 13px;
  transition:background var(--nx-speed),color var(--nx-speed),border-color var(--nx-speed);
}
:where(:root[data-page="support"]) .wi-btn:hover{background:var(--wi-hover);color:var(--nx-ink)}
:where(:root[data-page="support"]) .wi-btn.on{background:var(--blue);border-color:var(--blue);color:#fff}
:where(:root[data-page="support"]) .wi-btn.on:hover{background:var(--blue-dk);border-color:var(--blue-dk);color:#fff}
:where(:root[data-page="support"]) .wi-btn.danger:hover{color:var(--red-text);border-color:var(--red)}
:where(:root[data-page="support"]) .wi-btn:disabled{opacity:.5;cursor:default}

/* -- Toolbar -------------------------------------------------------------- */
:where(:root[data-page="support"]) .wi-bar{display:flex;align-items:center;gap:10px;padding:14px 0;flex-wrap:wrap}
:where(:root[data-page="support"]) .wi-search{
  flex:1 1 220px;max-width:340px;font:inherit;font-size:13px;
  background:var(--nx-surface);color:var(--nx-ink);
  border:1px solid var(--nx-line2);border-radius:9px;padding:8px 12px;
}
:where(:root[data-page="support"]) .wi-search:focus{outline:none;border-color:var(--blue)}
:where(:root[data-page="support"]) .wi-search::placeholder{color:var(--nx-ink3)}
:where(:root[data-page="support"]) .wi-bar-r{margin-left:auto;display:flex;gap:8px;align-items:center}
:where(:root[data-page="support"]) .wi-count{font-size:12px;color:var(--nx-ink3)}

/* -- The split ------------------------------------------------------------ */
:where(:root[data-page="support"]) .wi-split{display:flex;gap:16px;align-items:flex-start;padding-bottom:24px;flex:1}
:where(:root[data-page="support"]) .wi-list{flex:1 1 auto;min-width:0}
:where(:root[data-page="support"]) .wi-panel{
  flex:0 0 380px;position:sticky;top:16px;
  background:var(--nx-surface);border:1px solid var(--nx-line);
  border-radius:var(--nx-radius);box-shadow:var(--nx-shadow);overflow:hidden;
}

/* -- The table ------------------------------------------------------------ */
:where(:root[data-page="support"]) .wi-card{
  background:var(--nx-surface);border:1px solid var(--nx-line);
  border-radius:var(--nx-radius);box-shadow:var(--nx-shadow);overflow:hidden;
}

:where(:root[data-page="support"]) table.wi-tbl{width:100%;border-collapse:collapse}
:where(:root[data-page="support"]) .wi-tbl th{
  text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--nx-ink3);
  padding:11px 14px;border-bottom:1px solid var(--nx-line);
  background:var(--nx-rail);white-space:nowrap;cursor:pointer;user-select:none;
}
:where(:root[data-page="support"]) .wi-tbl th:hover{color:var(--nx-ink2)}
:where(:root[data-page="support"]) .wi-tbl th .caret{opacity:0;margin-left:4px}
:where(:root[data-page="support"]) .wi-tbl th.sorted .caret{opacity:1}
:where(:root[data-page="support"]) .wi-tbl td{padding:11px 14px;border-bottom:1px solid var(--nx-line);vertical-align:top}
:where(:root[data-page="support"]) .wi-tbl tr:last-child td{border-bottom:0}
:where(:root[data-page="support"]) .wi-tbl tbody tr{cursor:pointer}
:where(:root[data-page="support"]) .wi-tbl tbody tr:hover{background:var(--wi-hover)}
:where(:root[data-page="support"]) .wi-tbl tbody tr.sel{background:var(--wi-hover)}
:where(:root[data-page="support"]) .wi-tbl tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--blue)}

/* A finished row -- Fixed or Done -- sits where the sort put it and goes
 * green. These come after the hover and sel rules deliberately: same
 * specificity, so later wins and the green holds while the mouse is over it.
 * The Status pill is still what says which of the two endings it is. */
:where(:root[data-page="support"]) .wi-tbl tbody tr.fin{background:var(--wi-fin)}
:where(:root[data-page="support"]) .wi-tbl tbody tr.fin:hover,:where(:root[data-page="support"]) .wi-tbl tbody tr.fin.sel{background:var(--wi-fin-h)}
:where(:root[data-page="support"]) .wi-name{font-weight:600;color:var(--nx-ink)}
:where(:root[data-page="support"]) .wi-sub{font-size:12px;color:var(--nx-ink3);margin-top:2px}
:where(:root[data-page="support"]) .wi-dash{color:var(--nx-ink3)}
:where(:root[data-page="support"]) .wi-nowrap{white-space:nowrap}
:where(:root[data-page="support"]) .wi-late{color:var(--red-text);font-weight:600}

/* -- Pills ---------------------------------------------------------------- */
:where(:root[data-page="support"]) .wi-pill{
  display:inline-block;font-size:12px;font-weight:600;line-height:1.35;
  padding:3px 10px;border-radius:999px;white-space:nowrap;
  background:var(--wi-t-grey-bg);color:var(--wi-t-grey);
}
:where(:root[data-page="support"]) .wi-pill.t-blue{background:var(--wi-t-blue-bg);color:var(--wi-t-blue)}
:where(:root[data-page="support"]) .wi-pill.t-purple{background:var(--wi-t-purple-bg);color:var(--wi-t-purple)}
:where(:root[data-page="support"]) .wi-pill.t-teal{background:var(--wi-t-teal-bg);color:var(--wi-t-teal)}
:where(:root[data-page="support"]) .wi-pill.t-green{background:var(--wi-t-green-bg);color:var(--wi-t-green)}
:where(:root[data-page="support"]) .wi-pill.t-amber{background:var(--wi-t-amber-bg);color:var(--wi-t-amber)}
:where(:root[data-page="support"]) .wi-pill.t-red{background:var(--wi-t-red-bg);color:var(--wi-t-red)}
:where(:root[data-page="support"]) .wi-pill.t-quiet{background:transparent;color:var(--nx-ink3);padding-left:0}
:where(:root[data-page="support"]) button.wi-pill{border:0;cursor:pointer;font-family:inherit}
/* Normal has no fill; as a button it still needs somewhere to hover. */
:where(:root[data-page="support"]) button.wi-pill.t-quiet{padding-left:10px}
:where(:root[data-page="support"]) button.wi-pill.t-quiet:hover{background:var(--nx-line);filter:none}
:where(:root[data-page="support"]) button.wi-pill:hover{filter:brightness(.96)}
:root[data-theme="dark"]:where([data-page="support"]) button.wi-pill:hover{filter:brightness(1.18)}
:where(:root[data-page="support"]) .wi-tag{
  display:inline-block;font-size:12px;color:var(--nx-ink2);
  background:var(--nx-line);border-radius:6px;padding:2px 8px;
}

/* -- Empty / loading ------------------------------------------------------ */
:where(:root[data-page="support"]) .wi-empty{padding:52px 24px;text-align:center;color:var(--nx-ink3)}
:where(:root[data-page="support"]) .wi-empty b{display:block;color:var(--nx-ink2);font-size:15px;margin-bottom:6px}
:where(:root[data-page="support"]) .wi-boot{padding:60px;text-align:center;color:var(--nx-ink3)}

/* -- The detail panel ----------------------------------------------------- */
:where(:root[data-page="support"]) .wi-ph{padding:16px 18px;border-bottom:1px solid var(--nx-line);background:var(--nx-rail)}
:where(:root[data-page="support"]) .wi-ph h2{margin:0 0 6px;font-size:15px;font-weight:700;line-height:1.35}
:where(:root[data-page="support"]) .wi-px{
  float:right;margin:-2px -4px 0 8px;background:none;border:0;cursor:pointer;
  color:var(--nx-ink3);font-size:18px;line-height:1;padding:2px 6px;border-radius:6px;
}
:where(:root[data-page="support"]) .wi-px:hover{background:var(--nx-line);color:var(--nx-ink)}
:where(:root[data-page="support"]) .wi-pb{padding:16px 18px;max-height:calc(100vh - 220px);overflow:auto}
:where(:root[data-page="support"]) .wi-row{display:flex;gap:10px;padding:7px 0;font-size:13px;align-items:baseline}
:where(:root[data-page="support"]) .wi-row dt{flex:0 0 96px;color:var(--nx-ink3);font-size:12px}
:where(:root[data-page="support"]) .wi-row dd{margin:0;flex:1;min-width:0;color:var(--nx-ink);word-break:break-word}
:where(:root[data-page="support"]) .wi-notes{
  margin:12px 0 0;padding:12px;background:var(--nx-bg);border-radius:10px;
  font-size:13px;white-space:pre-wrap;word-break:break-word;color:var(--nx-ink2);
}
:where(:root[data-page="support"]) .wi-sec{
  margin:18px 0 8px;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--nx-ink3);
}
:where(:root[data-page="support"]) .wi-steps{display:flex;flex-wrap:wrap;gap:6px}
:where(:root[data-page="support"]) .wi-sec-n{text-transform:none;letter-spacing:0;font-weight:500;margin-left:6px}

/* -- Attachments, from the HELP ticket the notes name ---------------------- */
:where(:root[data-page="support"]) .wi-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
:where(:root[data-page="support"]) .wi-shots a{display:block;border:1px solid var(--nx-line2);border-radius:10px;overflow:hidden;line-height:0}
:where(:root[data-page="support"]) .wi-shots a:hover{border-color:var(--blue)}
:where(:root[data-page="support"]) .wi-shots img{width:100%;height:90px;object-fit:cover;object-position:top left;display:block;background:var(--nx-bg)}
:where(:root[data-page="support"]) .wi-files{display:flex;flex-direction:column;gap:6px}
:where(:root[data-page="support"]) .wi-shots + .wi-files{margin-top:8px}
:where(:root[data-page="support"]) .wi-file{
  display:flex;align-items:center;gap:9px;border:1px solid var(--nx-line2);border-radius:9px;
  padding:8px 11px;text-decoration:none;color:var(--nx-ink);font-size:12.5px;
}
:where(:root[data-page="support"]) .wi-file:hover{background:var(--nx-line)}
:where(:root[data-page="support"]) .wi-file-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="support"]) .wi-file-sz{margin-left:auto;color:var(--nx-ink3);font-size:11.5px;white-space:nowrap}
:where(:root[data-page="support"]) .wi-file.wi-book{border-color:var(--blue);color:var(--blue)}
/* Attaching: the box files are dropped on, and the x that takes one off */
:where(:root[data-page="support"]) .wi-shots a{position:relative}
:where(:root[data-page="support"]) .wi-file-x{
  border:0;background:none;color:var(--nx-ink3);font-size:16px;line-height:1;
  padding:0 2px;cursor:pointer;font-family:inherit;
}
:where(:root[data-page="support"]) .wi-file-x:hover{color:var(--red-text)}
:where(:root[data-page="support"]) .wi-shots .wi-file-x{
  position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;
  background:var(--nx-surface);border:1px solid var(--nx-line2);font-size:14px;
  opacity:0;transition:opacity .12s;
}
:where(:root[data-page="support"]) .wi-shots a:hover .wi-file-x,
:where(:root[data-page="support"]) .wi-shots .wi-file-x:focus{opacity:1}
:where(:root[data-page="support"]) .wi-drop{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:8px;padding:10px 12px;
  border:1px dashed var(--nx-line2);border-radius:10px;font-size:12px;color:var(--nx-ink3);
}
:where(:root[data-page="support"]) .wi-drop.over{border-color:var(--blue);background:var(--nx-bg);color:var(--blue)}
:where(:root[data-page="support"]) .wi-shots + .wi-drop,
:where(:root[data-page="support"]) .wi-files + .wi-drop{margin-top:10px}
:where(:root[data-page="support"]) #wiPend:empty{display:none}

/* -- Per-client ticks on an external item --------------------------------- */
:where(:root[data-page="support"]) .wi-cl{width:100%;border-collapse:collapse;font-size:13px}
:where(:root[data-page="support"]) .wi-cl th{
  text-align:left;font-size:11px;font-weight:600;color:var(--nx-ink3);
  padding:6px 8px;border-bottom:1px solid var(--nx-line);white-space:nowrap;
}
:where(:root[data-page="support"]) .wi-cl td{padding:6px 8px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink)}
:where(:root[data-page="support"]) .wi-cl tr:last-child td{border-bottom:0}
:where(:root[data-page="support"]) .wi-cl th:not(:first-child),:where(:root[data-page="support"]) .wi-cl td:not(:first-child){width:90px}
:where(:root[data-page="support"]) .wi-cl-h{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
:where(:root[data-page="support"]) .wi-cl input[type=checkbox]{width:15px;height:15px;margin:0;cursor:pointer;accent-color:var(--blue)}
:where(:root[data-page="support"]) .wi-cl input[type=checkbox]:disabled{cursor:default}
:where(:root[data-page="support"]) .wi-cl-off{margin:8px 0 0;padding:0}
:where(:root[data-page="support"]) .wi-chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--nx-ink);cursor:pointer;margin-top:8px}
:where(:root[data-page="support"]) .wi-chk[hidden]{display:none}
:where(:root[data-page="support"]) .wi-chk input{width:15px;height:15px;margin:0;accent-color:var(--blue)}

/* -- Comments ------------------------------------------------------------- */
:where(:root[data-page="support"]) .wi-cmt{padding:10px 0;border-top:1px solid var(--nx-line)}
:where(:root[data-page="support"]) .wi-cmt-h{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--nx-ink3)}
:where(:root[data-page="support"]) .wi-cmt-h b{color:var(--nx-ink2);font-weight:600}
:where(:root[data-page="support"]) .wi-cmt-x{
  margin-left:auto;background:none;border:0;cursor:pointer;color:var(--nx-ink3);
  font-size:12px;padding:0 2px;
}
:where(:root[data-page="support"]) .wi-cmt-x:hover{color:var(--red-text)}
:where(:root[data-page="support"]) .wi-cmt-b{font-size:13px;white-space:pre-wrap;word-break:break-word;margin-top:3px}
:where(:root[data-page="support"]) .wi-ta{
  width:100%;font:inherit;font-size:13px;background:var(--nx-surface);color:var(--nx-ink);
  border:1px solid var(--nx-line2);border-radius:9px;padding:9px 11px;resize:vertical;
  min-height:62px;
}
:where(:root[data-page="support"]) .wi-ta:focus{outline:none;border-color:var(--blue)}

/* -- Modal ---------------------------------------------------------------- */
:where(:root[data-page="support"]) .wi-mask{
  position:fixed;inset:0;background:var(--nx-overlay);z-index:900;
  display:flex;align-items:flex-start;justify-content:center;padding:36px 16px;overflow:auto;
}
:where(:root[data-page="support"]) .wi-modal{
  background:var(--nx-surface);border-radius:var(--nx-radius);
  box-shadow:var(--nx-shadow-lg);width:100%;max-width:560px;overflow:hidden;
}
:where(:root[data-page="support"]) .wi-modal.wide{max-width:780px}
:where(:root[data-page="support"]) .wi-mh{
  padding:16px 20px;border-bottom:1px solid var(--nx-line);
  font-size:15px;font-weight:700;display:flex;align-items:center;
}
:where(:root[data-page="support"]) .wi-mb{padding:18px 20px;max-height:calc(100vh - 220px);overflow:auto}
:where(:root[data-page="support"]) .wi-mf{
  padding:14px 20px;border-top:1px solid var(--nx-line);
  display:flex;gap:8px;justify-content:flex-end;background:var(--nx-rail);
}
:where(:root[data-page="support"]) .wi-f{margin-bottom:14px}
:where(:root[data-page="support"]) .wi-f label{display:block;font-size:12px;font-weight:600;color:var(--nx-ink2);margin-bottom:5px}
:where(:root[data-page="support"]) .wi-f .hint{font-weight:400;color:var(--nx-ink3)}
:where(:root[data-page="support"]) .wi-in{
  width:100%;font:inherit;font-size:13.5px;background:var(--nx-surface);color:var(--nx-ink);
  border:1px solid var(--nx-line2);border-radius:9px;padding:9px 11px;
}
:where(:root[data-page="support"]) .wi-in:focus{outline:none;border-color:var(--blue)}
:where(:root[data-page="support"]) .wi-2{display:flex;gap:12px}
:where(:root[data-page="support"]) .wi-2>*{flex:1;min-width:0}
:where(:root[data-page="support"]) .wi-err{color:var(--red-text);font-size:12.5px;margin-bottom:10px;min-height:1px}
/* The box that opens under a picker when "+ Add another" is chosen.
 * The [hidden] rule has to be written out: display:flex on a class beats the
 * browser's own [hidden] {display:none}, so the box would otherwise sit open
 * whatever the attribute says. */
:where(:root[data-page="support"]) .wi-new{display:flex;gap:8px;align-items:center;margin-top:6px}
:where(:root[data-page="support"]) .wi-new[hidden]{display:none}
:where(:root[data-page="support"]) .wi-new .wi-in{flex:1;min-width:0}
:where(:root[data-page="support"]) .wi-x{
  font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  background:none;border:0;color:var(--nx-ink3);padding:4px 2px;
}
:where(:root[data-page="support"]) .wi-x:hover{color:var(--red-text)}
:where(:root[data-page="support"]) .wi-note{font-size:12px;color:var(--nx-ink3);margin-top:5px}

/* -- People screen -------------------------------------------------------- */
:where(:root[data-page="support"]) .wi-ppl{width:100%;border-collapse:collapse;font-size:13px}
:where(:root[data-page="support"]) .wi-ppl th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--nx-ink3);padding:8px 10px;border-bottom:1px solid var(--nx-line);
}
:where(:root[data-page="support"]) .wi-ppl td{padding:9px 10px;border-bottom:1px solid var(--nx-line);vertical-align:top}
:where(:root[data-page="support"]) .wi-ppl tr:last-child td{border-bottom:0}
:where(:root[data-page="support"]) .wi-chip{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  background:var(--nx-line);border-radius:999px;padding:2px 4px 2px 9px;margin:2px 4px 2px 0;
  color:var(--nx-ink2);
}
:where(:root[data-page="support"]) .wi-chip.own{background:var(--wi-t-green-bg);color:var(--wi-t-green)}
:where(:root[data-page="support"]) .wi-chip b{font-weight:600}
:where(:root[data-page="support"]) .wi-chip button{
  background:none;border:0;cursor:pointer;color:inherit;opacity:.6;
  font-size:13px;line-height:1;padding:1px 4px;border-radius:999px;
}
:where(:root[data-page="support"]) .wi-chip button:hover{opacity:1;color:var(--red-text)}
:where(:root[data-page="support"]) .wi-chip.gone{opacity:.55;text-decoration:line-through}
/* CC on the item panel: who is on, then the picker that adds the next */
:where(:root[data-page="support"]) .wi-cc{display:flex;flex-wrap:wrap;align-items:center}
:where(:root[data-page="support"]) .wi-cc-add{flex-basis:100%;margin-top:6px}

/* -- Toast ---------------------------------------------------------------- */
:where(:root[data-page="support"]) .wi-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--nx-toast-bg);color:var(--nx-toast-ink);
  padding:10px 18px;border-radius:10px;font-size:13px;font-weight:500;
  box-shadow:var(--nx-shadow-lg);opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;z-index:1000;
}
:where(:root[data-page="support"]) .wi-toast.on{opacity:1;transform:translate(-50%,0)}

/* -- Menu ----------------------------------------------------------------- */
:where(:root[data-page="support"]) .wi-pop{
  position:absolute;z-index:950;background:var(--nx-elev);
  border:1px solid var(--nx-line2);border-radius:11px;box-shadow:var(--nx-shadow-lg);
  padding:5px;min-width:168px;
}
:where(:root[data-page="support"]) .wi-pop button{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  font:inherit;font-size:13px;background:none;border:0;cursor:pointer;
  color:var(--nx-ink);padding:7px 9px;border-radius:8px;
}
:where(:root[data-page="support"]) .wi-pop button:hover{background:var(--wi-hover)}

/* The last note on an item, in its own column.
 *
 * One line, and then it stops. A note is the one thing on the row with no
 * length to it, and every row staying the same height is what makes a board
 * scannable -- somebody typing three sentences should not push everyone
 * else's row down. Hovering gives the whole of it; so does opening the item.
 */
:where(:root[data-page="support"]) .wi-last{
  font-size:12.5px;line-height:1.45;color:var(--nx-ink2);
  /* Clamped rather than nowrap: a nowrap line's smallest possible width is
   * the whole sentence, so the table hands this column everything and the
   * title is left with a word a line. Clamping lets the text still wrap as
   * far as the table is concerned, and shows one line of it. */
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
:where(:root[data-page="support"]) .wi-last-m{font-size:11.5px;color:var(--nx-ink3);margin-top:3px}

/* Owners click the Latest note cell to type a note there; Enter posts it. */
:where(:root[data-page="support"]) .wi-note-cell{cursor:text}
:where(:root[data-page="support"]) .wi-note-cell:hover:not(.on){background:var(--nx-hover,rgba(127,127,127,.06))}
:where(:root[data-page="support"]) .wi-note-add{display:none;font-size:12px;color:var(--nx-ink3)}
:where(:root[data-page="support"]) .wi-note-cell:hover .wi-note-add{display:inline}
:where(:root[data-page="support"]) .wi-note-cell:hover .wi-dash{display:none}
:where(:root[data-page="support"]) .wi-note-in{
  width:100%;font:inherit;font-size:12.5px;line-height:1.45;background:var(--nx-surface);color:var(--nx-ink);
  border:1px solid var(--blue);border-radius:8px;padding:6px 9px;resize:vertical;min-height:44px;display:block
}
:where(:root[data-page="support"]) .wi-note-in:focus{outline:none}
:where(:root[data-page="support"]) .wi-note-in:disabled{opacity:.6}

/* The whole note, on hover.
 *
 * Drawn by the page rather than left to the title attribute, which gets an
 * operating-system box in an operating-system font, a second late, and in
 * some browsers with the end of a long note chopped off. This one matches
 * the panels and menus around it, keeps the line breaks somebody typed, and
 * takes no clicks -- the row underneath is still the thing being clicked.
 */
:where(:root[data-page="support"]) .wi-tip{
  position:fixed;z-index:1300;max-width:440px;pointer-events:none;
  background:var(--nx-elev);color:var(--nx-ink);
  border:1px solid var(--nx-line2);border-radius:11px;
  box-shadow:var(--nx-shadow-lg);padding:11px 13px;
  font-size:12.5px;line-height:1.5;
  opacity:0;transform:translateY(-3px);
  transition:opacity var(--nx-speed),transform var(--nx-speed);
}
:where(:root[data-page="support"]) .wi-tip.on{opacity:1;transform:translateY(0)}
:where(:root[data-page="support"]) .wi-tip-h{
  font-size:11.5px;font-weight:600;color:var(--nx-ink3);
  padding-bottom:6px;margin-bottom:7px;border-bottom:1px solid var(--nx-line);
}
:where(:root[data-page="support"]) .wi-tip-b{white-space:pre-wrap;overflow-wrap:anywhere}

/* Under the title instead, on a screen too narrow for the column. */
:where(:root[data-page="support"]) .wi-last-sm{display:none}

/* Two columns carry sentences; the rest are a word or a date and should take
 * only what they need. */
:where(:root[data-page="support"]) .wi-tbl th.c-item{width:26%}
:where(:root[data-page="support"]) .wi-tbl th.c-note{width:26%}

/* -- Dropdowns -------------------------------------------------------------
 * The page draws its own, instead of a native <select>.
 *
 * A select's list belongs to the operating system: a grey Windows panel in
 * the middle of a page that is not grey, in a font that is not the page's,
 * and with nowhere to put a search box. Sixty projects in one of those is a
 * list you scroll looking for something you could have typed three letters
 * of. This is ordinary markup, so it matches everything around it, carries
 * the search, and can show a second line -- which department a project
 * belongs to, which one somebody is in.
 * ------------------------------------------------------------------------ */
:where(:root[data-page="support"]) .wi-dd{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  font:inherit;font-size:13.5px;cursor:pointer;
  background:var(--nx-surface);color:var(--nx-ink);
  border:1px solid var(--nx-line2);border-radius:9px;padding:9px 11px;
  transition:border-color var(--nx-speed);
}
:where(:root[data-page="support"]) .wi-dd:hover{border-color:var(--nx-ink3)}
:where(:root[data-page="support"]) .wi-dd.on{border-color:var(--blue)}
:where(:root[data-page="support"]) .wi-dd.sm{font-size:13px;padding:7px 10px;width:auto;min-width:172px}
:where(:root[data-page="support"]) .wi-ppl .wi-dd.sm{width:100%;min-width:0}
:where(:root[data-page="support"]) .wi-dd-v,:where(:root[data-page="support"]) .wi-dd-p{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(:root[data-page="support"]) .wi-dd-p{color:var(--nx-ink3)}
:where(:root[data-page="support"]) .wi-dd-c{flex:none;width:10px;height:6px;opacity:.55}

:where(:root[data-page="support"]) .wi-ddp{
  position:fixed;z-index:1200;display:flex;flex-direction:column;
  background:var(--nx-elev);border:1px solid var(--nx-line2);
  border-radius:11px;box-shadow:var(--nx-shadow-lg);padding:5px;
  max-width:calc(100vw - 20px);
}
:where(:root[data-page="support"]) .wi-ddq{padding:2px 2px 6px;border-bottom:1px solid var(--nx-line);margin-bottom:5px}
:where(:root[data-page="support"]) .wi-ddq input{
  width:100%;font:inherit;font-size:13px;background:var(--nx-bg);color:var(--nx-ink);
  border:1px solid var(--nx-line2);border-radius:8px;padding:7px 9px;
}
:where(:root[data-page="support"]) .wi-ddq input:focus{outline:none;border-color:var(--blue)}
:where(:root[data-page="support"]) .wi-ddq input::placeholder{color:var(--nx-ink3)}
:where(:root[data-page="support"]) .wi-ddl{overflow:auto;max-height:272px}
:where(:root[data-page="support"]) .wi-ddo{
  display:block;width:100%;text-align:left;font:inherit;font-size:13px;
  background:none;border:0;cursor:pointer;color:var(--nx-ink);
  padding:7px 9px;border-radius:8px;
}
:where(:root[data-page="support"]) .wi-ddo:hover,:where(:root[data-page="support"]) .wi-ddo.on{background:var(--wi-hover)}
:where(:root[data-page="support"]) .wi-ddo.pick{color:var(--blue);font-weight:600}
:where(:root[data-page="support"]) .wi-ddo .s{
  display:block;font-size:11.5px;font-weight:400;color:var(--nx-ink3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
:where(:root[data-page="support"]) .wi-ddn{padding:11px 9px;font-size:12.5px;color:var(--nx-ink3)}

/* A filter's rows: picked, and picked out. The mark does the work, so the
 * two are told apart without relying on the colour alone. */
:where(:root[data-page="support"]) .wi-ddo{position:relative;padding-right:26px}
:where(:root[data-page="support"]) .wi-ddo.in{color:var(--blue);font-weight:600}
:where(:root[data-page="support"]) .wi-ddo.in:after{content:"\2713";position:absolute;right:9px;top:7px;font-weight:700}
:where(:root[data-page="support"]) .wi-ddo.out{color:var(--red-text);opacity:.85}
:where(:root[data-page="support"]) .wi-ddo.out .s,:where(:root[data-page="support"]) .wi-ddo.out{text-decoration:line-through}
:where(:root[data-page="support"]) .wi-ddo.out:after{content:"\2715";position:absolute;right:9px;top:7px;text-decoration:none}
:where(:root[data-page="support"]) .wi-ddh{
  padding:0 9px 7px;font-size:11.5px;color:var(--nx-ink3);
  border-bottom:1px solid var(--nx-line);margin-bottom:5px;
}
:where(:root[data-page="support"]) .wi-ddc{
  display:block;width:100%;text-align:left;font:inherit;font-size:12.5px;
  background:none;border:0;border-top:1px solid var(--nx-line);cursor:pointer;
  color:var(--nx-ink2);padding:8px 9px;margin:5px 0 0;
}
:where(:root[data-page="support"]) .wi-ddc:hover{background:var(--wi-hover);color:var(--nx-ink)}
:where(:root[data-page="support"]) .wi-dda{
  display:block;width:100%;text-align:left;font:inherit;font-size:13px;font-weight:600;
  background:none;border:0;border-top:1px solid var(--nx-line);cursor:pointer;
  color:var(--blue);padding:9px;margin:5px 0 0;
}
:where(:root[data-page="support"]) .wi-dda:hover{background:var(--wi-hover)}
/* An add row and a clear row can both be present; only one border between. */
:where(:root[data-page="support"]) .wi-dda + .wi-ddc{border-top:0;margin-top:0}

/* -- Footer --------------------------------------------------------------- */
:where(:root[data-page="support"]) .wi-foot{
  margin-top:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:16px 0 22px;border-top:1px solid var(--nx-line);
  font-size:12.5px;color:var(--nx-ink3);
}
:where(:root[data-page="support"]) .wi-foot-r{margin-left:auto;display:flex;align-items:center;gap:14px}
:where(:root[data-page="support"]) .wi-foot a,:where(:root[data-page="support"]) .wi-foot button{
  color:var(--nx-ink2);text-decoration:none;font:inherit;font-size:12.5px;
  background:none;border:0;cursor:pointer;padding:0;
}
:where(:root[data-page="support"]) .wi-foot a:hover,:where(:root[data-page="support"]) .wi-foot button:hover{color:var(--blue)}

/* -- Narrow --------------------------------------------------------------- */
/* The note is the widest optional column, and the first one there is no room
 * for. Under about this width the columns stop fitting: the title gets
 * squeezed to a word a line and the rows grow to several times their height.
 * So the note goes back under the title, where one line of it fits, and the
 * rest carry on. */
@media (max-width:1060px){
  :where(:root[data-page="support"]) .wi-hide-md{display:none}
  /* Clamped, not nowrap, for the reason given on .wi-last: a line that
   * cannot wrap is a column that demands the width of the whole sentence. */
  :where(:root[data-page="support"]) .wi-last-sm{
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
    margin-top:5px;font-size:12px;line-height:1.35;
    color:var(--nx-ink2);border-left:2px solid var(--nx-line2);padding-left:8px;
    overflow:hidden;
  }
  :where(:root[data-page="support"]) .wi-last-sm b{font-weight:600}
  :where(:root[data-page="support"]) .wi-tbl th.c-item{width:auto}
}

@media (max-width:1000px){
  :where(:root[data-page="support"]) .wi-split{flex-direction:column}
  :where(:root[data-page="support"]) .wi-panel{
    flex:none;width:100%;position:fixed;inset:auto 0 0 0;top:0;z-index:880;
    border-radius:0;max-height:100%;overflow:auto;
  }
  :where(:root[data-page="support"]) .wi-pb{max-height:none}
}
@media (max-width:720px){
  :where(:root[data-page="support"]) .wi{padding:0 12px}
  :where(:root[data-page="support"]) .wi-hide-sm{display:none}
  :where(:root[data-page="support"]) .wi-tbl th,:where(:root[data-page="support"]) .wi-tbl td{padding:10px 10px}
  :where(:root[data-page="support"]) .wi-bar-r{margin-left:0;width:100%}
  :where(:root[data-page="support"]) .wi-search{max-width:none}
  /* An email address needs the whole width to be typed on a phone. */
  :where(:root[data-page="support"]) .wi-new{flex-wrap:wrap}
  :where(:root[data-page="support"]) .wi-new .wi-in{flex:1 1 100%}
}


/* ----------------------------------------------------------------------------
 * 15.41  Access denied (config.php, the 403 page)
 * config.php, data-page="access-denied"
 * -------------------------------------------------------------------------- */
:where(:root[data-page="access-denied"]) *, *:where([data-page="access-denied"]){box-sizing:border-box;margin:0;padding:0}
:root:where([data-page="access-denied"]){
  --font:var(--nx-font);
  --red-border:#F09595;
  --border:#E8EAED;--bg:var(--nx-bg);--text:#1a1a1a;--text2:#3C4043;--text3:#9AA0A6;
  --radius:7px
}
html:where([data-page="access-denied"]),:where(:root[data-page="access-denied"]) body{height:100%;font-family:var(--font)}
:where(:root[data-page="access-denied"]) body{display:flex;min-height:100vh;background:var(--bg);align-items:center;justify-content:center;padding:24px}
:where(:root[data-page="access-denied"]) .card{background:var(--nx-surface);border:1px solid var(--border);border-radius:14px;padding:48px 40px;width:100%;max-width:460px;text-align:center}
:where(:root[data-page="access-denied"]) .icon{width:56px;height:56px;border-radius:50%;background:var(--red-lt);border:2px solid var(--red-border);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
:where(:root[data-page="access-denied"]) .icon svg{width:26px;height:26px;color:var(--red)}
:where(:root[data-page="access-denied"]) h1{font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.03em;margin-bottom:10px}
:where(:root[data-page="access-denied"]) p{font-size:13.5px;color:var(--text2);line-height:1.6;margin-bottom:24px}
:where(:root[data-page="access-denied"]) .btn{display:inline-block;padding:10px 24px;border-radius:var(--radius);background:var(--blue);
  color:var(--nx-on-brand);font-size:13.5px;font-weight:600;text-decoration:none;font-family:var(--font)}
:where(:root[data-page="access-denied"]) .btn:hover{opacity:.88}
:where(:root[data-page="access-denied"]) .footer{margin-top:28px;font-size:11px;color:var(--text3)}


/* ----------------------------------------------------------------------------
 * 15.42  Accounting -- Financials chat, opened on its own
 * accounting/financials-chat.php, data-page="financials-chat"
 * -------------------------------------------------------------------------- */
/* The same tokens the Financials dashboard sets. On the dashboard the widget
   inherits these; here it has to bring its own. */
:root:where([data-page="financials-chat"]){
  --brand:#185FA5;--brand-lt:#E3EBF5;
  color-scheme:light;
}
:root[data-theme="dark"]:where([data-page="financials-chat"]){
  --nx-down:#F4756B;--nx-down-bg:#3A1E1C;
  --brand:#4F97E0;--brand-lt:#16283C;
  color-scheme:dark;
}
:where(:root[data-page="financials-chat"]) *, *:where([data-page="financials-chat"]){box-sizing:border-box}
html:where([data-page="financials-chat"]),:where(:root[data-page="financials-chat"]) body{height:100%;margin:0;font-family:var(--nx-font);
  background:var(--nx-bg);color:var(--nx-ink);font-size:13px}
:where(:root[data-page="financials-chat"]) .fch-page{height:100%;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center}
:where(:root[data-page="financials-chat"]) .fch-page .in{max-width:380px}
:where(:root[data-page="financials-chat"]) .fch-page h1{margin:0 0 8px;font-size:17px;font-weight:700;letter-spacing:-.015em}
:where(:root[data-page="financials-chat"]) .fch-page p{margin:0;color:var(--nx-ink2);line-height:1.55}
/* Standing on its own, the panel sits in the middle rather than in a corner
   of an empty screen. */
@media(min-width:561px){
  :where(:root[data-page="financials-chat"]) #fch-panel{right:50%;bottom:50%;transform:translate(50%,50%);
    transform-origin:center;height:min(700px,calc(100vh - 48px))}
  :where(:root[data-page="financials-chat"]) #fch-panel.fch-open{animation:none}
}


/* ----------------------------------------------------------------------------
 * 15.43  Accounting -- the "Ask the financials" chat bubble
 * accounting/financials-chat.php, printed by finChatWidget() on any page that
 * wants it (the Financials dashboard, and the chat opened on its own).
 * Not pinned to a page: every selector is #fch-* or .fch-*, which nothing else
 * in the portal uses, so it goes wherever the bubble goes. It has to stay below
 * those two pages' own blocks -- it used to print after their CSS.
 * -------------------------------------------------------------------------- */
#fch-launch,#fch-panel{font-family:var(--nx-font);font-size:13px;
  box-sizing:border-box}
#fch-launch *,#fch-panel *{box-sizing:border-box}

/* The bubble */
/* A rounded square rather than a circle, and small enough to sit in the
   corner without becoming the thing you look at first. */
/* Below the dashboard chrome on purpose. The site filter drawer sits at
   200/201, its modals at 230/231, toasts at 260 and the account menu at
   120; at 9400 the chat button stood in front of all of them, so opening
   the filter left the bubble floating over it. Anything the page puts up
   now comes in over the chat, which is the right way round -- the chat is
   the thing you leave sitting there. */
#fch-launch{position:fixed;right:22px;bottom:22px;z-index:110;width:42px;height:42px;
  border-radius:13px;border:none;cursor:pointer;display:flex;align-items:center;
  justify-content:center;color:#fff;
  background:var(--brand,#185FA5);
  box-shadow:0 6px 18px rgba(24,95,165,.30),0 2px 5px rgba(27,29,41,.16);
  transition:transform .16s ease,box-shadow .16s ease}
#fch-launch:hover{transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(24,95,165,.38),0 3px 7px rgba(27,29,41,.18)}
#fch-launch:active{transform:translateY(0)}
#fch-launch svg{width:19px;height:19px}
#fch-launch.fch-hid{opacity:0;pointer-events:none;transform:scale(.8)}
/* An answer came in while the panel was away. A dot on the corner of the
   button, with a ring in the page colour so it reads against the button
   whatever is behind it. */
#fch-launch.fch-news::after{content:'';position:absolute;top:-3px;right:-3px;
  width:12px;height:12px;border-radius:50%;background:var(--nx-down,#F0594E);
  border:2px solid var(--nx-bg,#EEF0F4);animation:fch-pop .22s ease both}
@keyframes fch-pop{from{transform:scale(0)}to{transform:none}}

/* The panel */
#fch-panel{position:fixed;right:22px;bottom:22px;z-index:111;width:430px;
  height:min(640px,calc(100vh - 44px));display:none;flex-direction:column;
  background:var(--nx-surface,#fff);border:1px solid var(--nx-line2,#E2E4EC);
  border-radius:18px;overflow:hidden;
  box-shadow:0 24px 64px rgba(27,29,41,.22),0 4px 12px rgba(27,29,41,.1);
  transform-origin:bottom right}
#fch-panel.fch-open{display:flex;animation:fch-in .18s ease both}
@keyframes fch-in{from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:none}}

#fch-head{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:13px 13px 13px 16px;
  border-bottom:1px solid var(--nx-line,#ECEDF2);background:var(--nx-rail,#FBFBFD)}
#fch-head .fch-dot{width:8px;height:8px;border-radius:50%;background:#16A34A;flex:0 0 auto}
#fch-head h3{margin:0;font-size:13.5px;font-weight:700;letter-spacing:-.01em;
  color:var(--nx-ink,#1B1D29);flex:1 1 auto}
#fch-head .fch-sub{display:block;font-size:11px;font-weight:500;
  color:var(--nx-ink3,#9499AB);margin-top:1px}
.fch-hbtn{width:28px;height:28px;flex:0 0 auto;border:1px solid var(--nx-line2,#E2E4EC);
  background:var(--nx-surface,#fff);border-radius:8px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;color:var(--nx-ink2,#5B6072)}
.fch-hbtn:hover{border-color:var(--nx-ink3,#9499AB);color:var(--nx-ink,#1B1D29)}
.fch-hbtn svg{width:14px;height:14px}

#fch-log{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:16px;
  display:flex;flex-direction:column;gap:13px;
  background:var(--nx-surface,#fff);scrollbar-width:thin}
#fch-log::-webkit-scrollbar{width:9px}
#fch-log::-webkit-scrollbar-thumb{background:var(--nx-line2,#E2E4EC);border-radius:9px;
  border:3px solid var(--nx-surface,#fff)}

.fch-msg{max-width:100%;line-height:1.52}
.fch-msg.me{align-self:flex-end;max-width:85%;background:var(--brand,#185FA5);color:#fff;
  padding:9px 13px;border-radius:14px 14px 4px 14px;white-space:pre-wrap;
  word-break:break-word;font-weight:500}
.fch-msg.it{align-self:stretch;color:var(--nx-ink,#1B1D29)}
.fch-msg.err{align-self:stretch;color:var(--nx-down,#F0594E);
  background:var(--nx-down-bg,#FCEBEB);padding:10px 13px;border-radius:12px;font-weight:500}

/* What the model writes, kept readable at 430px wide */
.fch-msg.it p{margin:0 0 9px}
.fch-msg.it p:last-child{margin-bottom:0}
.fch-msg.it strong{font-weight:700;color:var(--nx-ink,#1B1D29)}
.fch-msg.it em{font-style:italic;color:var(--nx-ink2,#5B6072)}
.fch-msg.it h4{margin:13px 0 6px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--nx-ink3,#9499AB)}
.fch-msg.it h4:first-child{margin-top:0}
.fch-msg.it ul,.fch-msg.it ol{margin:0 0 9px;padding-left:19px}
.fch-msg.it li{margin:0 0 3px}
.fch-msg.it code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
  background:var(--nx-hover,#F1F0FB);padding:1px 4px;border-radius:4px}
/* The table goes in a scroller rather than being display:block itself. As a
   block with width:100% and nowrap content it was over-constrained -- too
   wide to fit and not free to overflow -- so the browser squeezed the
   columns into one another. The wrapper scrolls; the table lays out
   normally inside it, and only figures refuse to wrap, so a long row label
   takes a second line instead of forcing the table wider than the panel. */
.fch-msg.it .fch-tw{max-width:100%;overflow-x:auto;margin:0 0 10px}
.fch-msg.it table{border-collapse:collapse;width:100%;font-size:11.5px}
.fch-msg.it th{text-align:left;font-weight:700;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--nx-ink3,#9499AB);padding:4px 9px 4px 0;
  border-bottom:1px solid var(--nx-line2,#E2E4EC)}
.fch-msg.it td{padding:5px 9px 5px 0;border-bottom:1px solid var(--nx-line,#ECEDF2);
  color:var(--nx-ink,#1B1D29);font-variant-numeric:tabular-nums}
/* Two figure columns side by side would otherwise touch: both are flush right
   and the left padding is what keeps them apart. A figure never wraps. */
.fch-msg.it td.num,.fch-msg.it th.num{text-align:right;padding-right:0;padding-left:16px;
  white-space:nowrap}

/* The empty state */
#fch-intro{color:var(--nx-ink2,#5B6072);line-height:1.55}
#fch-intro .fch-hi{font-weight:700;color:var(--nx-ink,#1B1D29);font-size:14px;
  margin-bottom:5px}
#fch-intro .fch-note{font-size:11.5px;color:var(--nx-ink3,#9499AB);margin-top:11px}
.fch-eg{display:flex;flex-direction:column;gap:6px;margin-top:13px}
.fch-eg button{text-align:left;border:1px solid var(--nx-line2,#E2E4EC);
  background:var(--nx-surface,#fff);color:var(--nx-ink,#1B1D29);border-radius:10px;
  padding:9px 11px;cursor:pointer;font-size:12px;font-family:inherit;line-height:1.4;
  transition:border-color .14s ease,background .14s ease}
.fch-eg button:hover{border-color:var(--brand,#185FA5);background:var(--nx-hover,#F1F0FB)}

/* Waiting */
#fch-wait{align-self:stretch;display:none;align-items:center;gap:9px;
  color:var(--nx-ink3,#9499AB);font-size:12px;font-weight:500}
#fch-wait.on{display:flex}
.fch-pulse{display:flex;gap:3px;flex:0 0 auto}
.fch-pulse i{width:5px;height:5px;border-radius:50%;background:var(--brand,#185FA5);
  animation:fch-bob 1.1s infinite ease-in-out}
.fch-pulse i:nth-child(2){animation-delay:.14s}
.fch-pulse i:nth-child(3){animation-delay:.28s}
@keyframes fch-bob{0%,60%,100%{opacity:.28;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}}

/* The mark that sits at the end of an answer while it is being written out.
   It is put inside the last thing on screen rather than after the message,
   because the message's own ::after would sit on a line of its own under a
   paragraph -- a block ends the line it is on. */
.fch-caret{display:inline-block;width:6px;height:12px;margin-left:2px;
  vertical-align:-1px;border-radius:1px;background:var(--brand,#185FA5);
  animation:fch-blink 1.05s steps(1) infinite}
@keyframes fch-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.fch-caret{animation:none}}


/* Past conversations. A sheet over the log rather than another panel: the
   list and the conversation are the same place, seen one at a time. */
/* A flex child between the header and the footer, not a sheet pinned to a
   guessed header height -- the header grows a line when the filter name is
   long, and a hard top would have left a gap or covered it. */
#fch-hist{flex:1 1 auto;min-height:0;display:none;flex-direction:column;
  background:var(--nx-surface,#fff)}
#fch-panel.hist #fch-hist{display:flex}
#fch-panel.hist #fch-log,#fch-panel.hist #fch-foot{display:none}
#fch-hist-top{flex:0 0 auto;display:flex;align-items:center;gap:8px;
  padding:11px 13px 9px 16px;border-bottom:1px solid var(--nx-line,#ECEDF2)}
#fch-hist-top b{flex:1 1 auto;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--nx-ink3,#9499AB)}
#fch-hist-list{flex:1 1 auto;overflow-y:auto;padding:7px 10px 12px}
#fch-hist-list .row{display:block;width:100%;text-align:left;border:none;
  background:none;font-family:inherit;cursor:pointer;border-radius:10px;
  padding:9px 10px;color:var(--nx-ink,#1B1D29)}
#fch-hist-list .row:hover{background:var(--nx-hover,#F1F0FB)}
#fch-hist-list .row .t{display:block;font-size:12.5px;font-weight:500;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
#fch-hist-list .row .m{display:block;font-size:10.5px;color:var(--nx-ink3,#9499AB);
  margin-top:3px}
#fch-hist-list .none{padding:16px 10px;color:var(--nx-ink3,#9499AB);font-size:12px;
  line-height:1.5}

#fch-foot{flex:0 0 auto;border-top:1px solid var(--nx-line,#ECEDF2);padding:11px 13px;
  background:var(--nx-rail,#FBFBFD)}
#fch-form{display:flex;align-items:flex-end;gap:8px}
#fch-in{flex:1 1 auto;resize:none;border:1px solid var(--nx-line2,#E2E4EC);
  background:var(--nx-surface,#fff);color:var(--nx-ink,#1B1D29);border-radius:11px;
  padding:9px 11px;font-family:inherit;font-size:12.5px;line-height:1.45;
  max-height:118px;min-height:38px}
#fch-in:focus{outline:none;border-color:var(--brand,#185FA5);
  box-shadow:0 0 0 3px var(--brand-lt,#E3EBF5)}
#fch-in::placeholder{color:var(--nx-ink3,#9499AB)}
#fch-send{flex:0 0 auto;width:38px;height:38px;border:none;border-radius:11px;
  background:var(--brand,#185FA5);color:#fff;cursor:pointer;display:flex;
  align-items:center;justify-content:center}
#fch-send:disabled{opacity:.42;cursor:default}
#fch-send svg{width:16px;height:16px}

@media(max-width:560px){
  #fch-panel{right:0;bottom:0;width:100vw;height:100vh;border-radius:0;border:none}
  #fch-launch{right:16px;bottom:16px}
}
@media print{#fch-launch,#fch-panel{display:none !important}}

/* ============================================================================
 * 15.44  General -- Financial Sync
 * general/fin-sync.php, data-page="fin-sync"
 * -------------------------------------------------------------------------- */
/* Everything here is prefixed fs- so nothing collides with portal.css. */
:root:where([data-page="fin-sync"]){--fs-hover:#F3F6FA;--fs-ok:#1B7A3D;--fs-ok-lt:#EAF6EF;--fs-part:#946400;--fs-part-lt:#FFF4DA;--fs-bad:#A8332C;--fs-bad-lt:#FBEDEB}
:root[data-theme="dark"]:where([data-page="fin-sync"]){--fs-hover:var(--nx-hover);--fs-ok:#5FD08A;--fs-ok-lt:rgba(95,208,138,.14);--fs-part:#F2C14E;--fs-part-lt:rgba(242,193,78,.14);--fs-bad:#F0908A;--fs-bad-lt:rgba(240,144,138,.15)}
html.fs-embed:where([data-page="fin-sync"]) body{background:var(--nx-surface)}
html.fs-embed:where([data-page="fin-sync"]) .nx-app{grid-template-columns:minmax(0,1fr);height:100vh;margin:0;border:0;border-radius:0;box-shadow:none}

/* -- The page: one card at a time, filling the frame -- */
:where(:root[data-page="fin-sync"]) .fs-page{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  padding:20px 44px 22px 22px;gap:14px}   /* the frame hides its last 22px on the right */
:where(:root[data-page="fin-sync"]) .fs-card{flex:1 1 auto;min-height:200px;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(20,35,60,.035)}
:where(:root[data-page="fin-sync"]) .fs-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--nx-line);flex:none}
:where(:root[data-page="fin-sync"]) .fs-find{display:flex;align-items:center;gap:8px;background:var(--nx-elev);border:1px solid var(--nx-line2);
  border-radius:9px;padding:0 11px;height:34px;flex:1;min-width:220px;max-width:390px;color:var(--nx-ink3)}
:where(:root[data-page="fin-sync"]) .fs-find:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-lt)}
:where(:root[data-page="fin-sync"]) .fs-find svg{width:15px;height:15px;flex:none}
:where(:root[data-page="fin-sync"]) .fs-find input{border:0;background:transparent;outline:none;font:inherit;font-size:12.5px;color:var(--nx-ink);width:100%;height:100%}
:where(:root[data-page="fin-sync"]) .fs-seg{display:inline-flex;align-items:center;height:34px;padding:2px;gap:2px;background:var(--nx-rail);border:1px solid var(--nx-line2);border-radius:9px}
:where(:root[data-page="fin-sync"]) .fs-seg button{border:0;background:transparent;color:var(--nx-ink3);font:inherit;font-size:11.5px;font-weight:650;padding:0 11px;height:28px;border-radius:6px;cursor:pointer;white-space:nowrap}
:where(:root[data-page="fin-sync"]) .fs-seg button:hover{color:var(--nx-ink)}
:where(:root[data-page="fin-sync"]) .fs-seg button.on{background:var(--nx-elev);color:var(--brand);box-shadow:0 1px 4px rgba(20,35,60,.1)}
:where(:root[data-page="fin-sync"]) .fs-seg button .n{opacity:.65;font-weight:600;margin-left:4px}
:where(:root[data-page="fin-sync"]) .fs-spacer{flex:1}
:where(:root[data-page="fin-sync"]) .fs-picked{font-size:12px;color:var(--nx-ink2)}
:where(:root[data-page="fin-sync"]) .fs-picked b{color:var(--nx-ink);font-weight:700}
:where(:root[data-page="fin-sync"]) .fs-link{border:0;background:transparent;color:var(--brand);font:inherit;font-size:12px;font-weight:650;cursor:pointer;padding:0 0 0 6px}
:where(:root[data-page="fin-sync"]) .fs-link:hover{text-decoration:underline}

/* -- The facility x month grid -- */
:where(:root[data-page="fin-sync"]) .fs-tblwrap{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-gutter:stable}
:where(:root[data-page="fin-sync"]) .fs-tbl{width:100%;min-width:900px;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:12.5px}
:where(:root[data-page="fin-sync"]) .fs-tbl col.c-fac{width:270px}
:where(:root[data-page="fin-sync"]) .fs-tbl col.c-cli{width:140px}
:where(:root[data-page="fin-sync"]) .fs-tbl th{position:sticky;top:0;z-index:2;background:var(--nx-rail);color:var(--nx-ink3);
  font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:750;text-align:left;
  padding:9px 12px;border-bottom:1px solid var(--nx-line);white-space:nowrap}
:where(:root[data-page="fin-sync"]) .fs-tbl th.mo{text-align:center;cursor:pointer;user-select:none}
:where(:root[data-page="fin-sync"]) .fs-tbl th.mo:hover{color:var(--brand)}
:where(:root[data-page="fin-sync"]) .fs-tbl td{padding:7px 12px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
:where(:root[data-page="fin-sync"]) .fs-tbl td.k{color:var(--nx-ink);font-weight:650}
:where(:root[data-page="fin-sync"]) .fs-tbl td.mute{color:var(--nx-ink3)}
:where(:root[data-page="fin-sync"]) .fs-mute{color:var(--nx-ink3)}
:where(:root[data-page="fin-sync"]) .fs-co{display:inline-block;padding:3px 7px;border-radius:5px;font-size:10px;font-weight:600;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
:where(:root[data-page="fin-sync"]) .fs-cf{cursor:pointer;transition:filter .12s}
:where(:root[data-page="fin-sync"]) .fs-co.fs-cf:hover{filter:brightness(.94)}
:where(:root[data-page="fin-sync"]) .fs-mute.fs-cf:hover{text-decoration:underline}
:where(:root[data-page="fin-sync"]) .fs-fbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 20px;border-bottom:1px solid var(--nx-line);flex:none}
:where(:root[data-page="fin-sync"]) .fs-fbar:empty{display:none}
:where(:root[data-page="fin-sync"]) .fs-fchip{display:inline-flex;align-items:center;gap:6px;background:var(--brand-lt);color:var(--brand);
  border:1px solid var(--brand);border-radius:20px;padding:4px 6px 4px 11px;font-size:12px;font-weight:600}
:where(:root[data-page="fin-sync"]) .fs-fchip b{font-weight:700}
:where(:root[data-page="fin-sync"]) .fs-fchip button{border:none;background:none;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0 3px;opacity:.7}
:where(:root[data-page="fin-sync"]) .fs-fchip button:hover{opacity:1}
:where(:root[data-page="fin-sync"]) .fs-fchip.not{background:var(--nx-down-bg);color:#D4453B;border-color:#D4453B}
:where(:root[data-page="fin-sync"]) .fs-fclear{border:0;background:transparent;color:var(--nx-ink3);font:inherit;font-size:12px;font-weight:650;cursor:pointer;padding:0 4px}
:where(:root[data-page="fin-sync"]) .fs-fclear:hover{color:var(--nx-ink);text-decoration:underline}
:where(:root[data-page="fin-sync"]) .fs-tbl td.mo{text-align:center;padding:6px 8px}
:where(:root[data-page="fin-sync"]) .fs-tbl tbody tr:hover td{background:var(--fs-hover)}
:where(:root[data-page="fin-sync"]) .fs-tbl tbody tr:last-child td{border-bottom:0}
:where(:root[data-page="fin-sync"]) .fs-tbl tr.off td.k{color:var(--nx-ink3)}
:where(:root[data-page="fin-sync"]) .fs-tbl td.fs-none{text-align:center;color:var(--nx-ink3);padding:28px 12px;white-space:normal}
:where(:root[data-page="fin-sync"]) .fs-tbl.hist{table-layout:auto}
:where(:root[data-page="fin-sync"]) .fs-tbl tr.click{cursor:pointer}
:where(:root[data-page="fin-sync"]) .fs-warn{display:inline-block;margin-left:8px;font-size:10px;font-weight:700;color:var(--fs-part);background:var(--fs-part-lt);border-radius:5px;padding:1px 6px;vertical-align:1px}
:where(:root[data-page="fin-sync"]) .fs-dash{color:var(--nx-line2);font-weight:700}
:where(:root[data-page="fin-sync"]) .fs-chip{display:inline-flex;align-items:center;gap:6px;height:28px;width:100%;max-width:92px;justify-content:center;
  border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);border-radius:8px;
  font:inherit;font-size:11.5px;font-weight:650;cursor:pointer;padding:0 8px}
:where(:root[data-page="fin-sync"]) .fs-chip:hover{border-color:var(--brand);color:var(--nx-ink)}
:where(:root[data-page="fin-sync"]) .fs-chip .tick{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--nx-line2);display:inline-flex;align-items:center;justify-content:center;flex:none;color:#fff}
:where(:root[data-page="fin-sync"]) .fs-chip .tick svg{width:10px;height:10px;display:none}
:where(:root[data-page="fin-sync"]) .fs-chip.nopull{background:var(--nx-line);border-color:var(--nx-line2);color:var(--nx-ink3)}
:where(:root[data-page="fin-sync"]) .fs-chip.nopull .tick{background:var(--nx-line2);border-color:var(--nx-ink3)}
:where(:root[data-page="fin-sync"]) .fs-chip.on{background:var(--brand-lt);border-color:var(--brand);color:var(--brand)}
:where(:root[data-page="fin-sync"]) .fs-chip.on .tick{background:var(--brand);border-color:var(--brand)}
:where(:root[data-page="fin-sync"]) .fs-chip.on .tick svg{display:block}
:where(:root[data-page="fin-sync"]) .fs-chip[disabled]{opacity:.45;cursor:not-allowed}
:where(:root[data-page="fin-sync"]) .fs-chip[disabled]:hover{border-color:var(--nx-line2);color:var(--nx-ink2)}
:where(:root[data-page="fin-sync"]) .fs-cell{display:flex;align-items:center;justify-content:center;gap:8px}
:where(:root[data-page="fin-sync"]) .fs-cell .fs-chip{width:auto;flex:none}
:where(:root[data-page="fin-sync"]) .fs-pulled{font-size:10.5px;color:var(--nx-ink3);white-space:nowrap;min-width:62px;text-align:left}
:where(:root[data-page="fin-sync"]) .fs-pulled.none{color:var(--nx-ink3);font-style:italic}
:where(:root[data-page="fin-sync"]) .fs-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 20px;border-top:1px solid var(--nx-line);font-size:11.5px;color:var(--nx-ink3);flex:none}
:where(:root[data-page="fin-sync"]) .fs-help{margin-left:auto}
:where(:root[data-page="fin-sync"]) .fs-load,:where(:root[data-page="fin-sync"]) .fs-empty{display:flex;align-items:center;justify-content:center;gap:9px;padding:46px 20px;color:var(--nx-ink3);font-size:12.5px;text-align:center}
:where(:root[data-page="fin-sync"]) .fs-spin{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:fs-spin .8s linear infinite;flex:none}
:where(:root[data-page="fin-sync"]) .fs-spin.sm{width:10px;height:10px;border-width:1.6px}
@keyframes fs-spin{to{transform:rotate(360deg)}}

/* -- The run and what changed -- */
:where(:root[data-page="fin-sync"]) .fs-run-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--nx-line);flex:none}
:where(:root[data-page="fin-sync"]) .fs-run-t{font-size:15px;font-weight:750;color:var(--nx-ink)}
:where(:root[data-page="fin-sync"]) .fs-run-s{font-size:12px;color:var(--nx-ink3);margin-top:2px}
:where(:root[data-page="fin-sync"]) .fs-run-b{flex:1 1 auto;min-height:0;overflow:auto;padding:14px 20px 20px;display:flex;flex-direction:column;gap:12px}
:where(:root[data-page="fin-sync"]) .fs-job{border:1px solid var(--nx-line);border-radius:12px;overflow:hidden;background:var(--nx-elev);flex:none}
:where(:root[data-page="fin-sync"]) .fs-job-h{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:13px;color:var(--nx-ink);flex-wrap:wrap}
:where(:root[data-page="fin-sync"]) .fs-job-h .mute,:where(:root[data-page="fin-sync"]) .fs-diff-h .mute{color:var(--nx-ink3);font-size:12px}
:where(:root[data-page="fin-sync"]) .fs-pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap;
  background:var(--nx-line);color:var(--nx-ink3)}
:where(:root[data-page="fin-sync"]) .fs-pill.pull{background:var(--brand-lt);color:var(--brand)}
:where(:root[data-page="fin-sync"]) .fs-pill.ok,:where(:root[data-page="fin-sync"]) .fs-pill.same{background:var(--fs-ok-lt);color:var(--fs-ok)}
:where(:root[data-page="fin-sync"]) .fs-pill.chg,:where(:root[data-page="fin-sync"]) .fs-pill.part{background:var(--fs-part-lt);color:var(--fs-part)}
:where(:root[data-page="fin-sync"]) .fs-pill.fail{background:var(--fs-bad-lt);color:var(--fs-bad)}
:where(:root[data-page="fin-sync"]) .fs-diff{border-top:1px solid var(--nx-line);padding:11px 14px}
:where(:root[data-page="fin-sync"]) .fs-modal-b > .fs-diff{border-top:0;padding:0}
:where(:root[data-page="fin-sync"]) .fs-diff-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--nx-ink);margin-bottom:8px}
:where(:root[data-page="fin-sync"]) .fs-same{font-size:12px;color:var(--nx-ink3)}
:where(:root[data-page="fin-sync"]) .fs-err{font-size:12px;color:var(--fs-bad);padding:0 14px 11px;line-height:1.45}
:where(:root[data-page="fin-sync"]) .fs-diff .fs-err{padding:0}
:where(:root[data-page="fin-sync"]) .fs-dt{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
:where(:root[data-page="fin-sync"]) .fs-dt + .fs-dt{margin-top:12px}
:where(:root[data-page="fin-sync"]) .fs-dt th{text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:750;color:var(--nx-ink3);
  padding:6px 10px;border-bottom:1px solid var(--nx-line);background:var(--nx-rail)}
:where(:root[data-page="fin-sync"]) .fs-dt td{padding:6px 10px;border-bottom:1px solid var(--nx-line);color:var(--nx-ink2)}
:where(:root[data-page="fin-sync"]) .fs-dt tr:last-child td{border-bottom:0}
:where(:root[data-page="fin-sync"]) .fs-dt .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
:where(:root[data-page="fin-sync"]) .fs-tag{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--nx-ink3);background:var(--nx-line);border-radius:4px;padding:1px 5px;margin-left:4px}
:where(:root[data-page="fin-sync"]) .fs-note{font-size:11px;color:var(--nx-ink3);margin-top:8px;line-height:1.45}

/* -- Buttons, the confirm and the detail pop-ups, the toast -- */
:where(:root[data-page="fin-sync"]) .fs-btn{height:32px;border:1px solid var(--nx-line2);background:var(--nx-elev);color:var(--nx-ink2);
  border-radius:9px;padding:0 14px;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;white-space:nowrap}
:where(:root[data-page="fin-sync"]) .fs-btn:hover{border-color:var(--nx-ink3);color:var(--nx-ink)}
:where(:root[data-page="fin-sync"]) .fs-btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
:where(:root[data-page="fin-sync"]) .fs-btn.pri:hover{background:var(--blue-dk,var(--brand));color:#fff}
:where(:root[data-page="fin-sync"]) .fs-btn[disabled]{opacity:.5;cursor:default}
:where(:root[data-page="fin-sync"]) .fs-modal{position:fixed;inset:0;z-index:420;background:rgba(17,20,28,.35);display:none;align-items:center;justify-content:center;padding:18px 40px 18px 18px}
:where(:root[data-page="fin-sync"]) .fs-modal.open{display:flex}
:where(:root[data-page="fin-sync"]) .fs-modal-box{width:100%;max-width:520px;max-height:calc(100vh - 60px);display:flex;flex-direction:column;
  background:var(--nx-elev);border:1px solid var(--nx-line);border-radius:14px;box-shadow:var(--nx-shadow-lg);overflow:hidden}
:where(:root[data-page="fin-sync"]) .fs-modal-box.wide{max-width:760px}
:where(:root[data-page="fin-sync"]) .fs-modal-h{padding:16px 20px 12px;border-bottom:1px solid var(--nx-line);font-size:15px;font-weight:750;color:var(--nx-ink);flex:none}
:where(:root[data-page="fin-sync"]) .fs-modal-s{font-size:12px;font-weight:500;color:var(--nx-ink3);margin-top:3px}
:where(:root[data-page="fin-sync"]) .fs-modal-b{flex:1 1 auto;min-height:0;overflow:auto;padding:14px 20px;font-size:12.5px;color:var(--nx-ink2);line-height:1.5}
:where(:root[data-page="fin-sync"]) .fs-modal-b p{margin:0 0 10px}
:where(:root[data-page="fin-sync"]) .fs-conf-list{margin:0;padding-left:18px}
:where(:root[data-page="fin-sync"]) .fs-conf-list li{margin:3px 0}
:where(:root[data-page="fin-sync"]) .fs-modal-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--nx-line);flex:none}
:where(:root[data-page="fin-sync"]) .fs-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:var(--nx-toast-bg);color:var(--nx-toast-ink);padding:10px 16px;border-radius:11px;
  font-size:12.5px;font-weight:600;opacity:0;pointer-events:none;transition:.18s;z-index:500;box-shadow:var(--nx-shadow-lg)}
:where(:root[data-page="fin-sync"]) .fs-toast.open{opacity:1;transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){:where(:root[data-page="fin-sync"]) .fs-toast{transition:none}:where(:root[data-page="fin-sync"]) .fs-spin{animation:none}}