/* ===== Design tokens ===== */
:root {
  --brand-navy:#0b3160; --brand-navy-dark:#062247; --accent-gold:#c7a558;
  --accent-blue:#1e57b8; --accent-blue-soft:#e9f0fb;
  --danger:#d12d2d; --success:#1B9C85; --warning:#F7D060;
  --bg:#f6f6f9; --surface:#ffffff; --surface-2:#f2f4f8; --row-alt:#f7f9fc;
  --text:#363949; --text-muted:#677483; --rule:#e2e8f0; --border:#e7e7e7; --input-border:#c4cdda;
  --header-text:#dfe7f2; --header-text-strong:#ffffff;
  --radius:0.5rem; --radius-pill:1.2rem;
  --shadow:0 .5rem .5rem rgba(132,139,200,.18);
  --shadow-pop:0 8px 28px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06);
}
html[data-theme="dark"] {
  --bg:#0e1726; --surface:#152135; --surface-2:#0b1422; --row-alt:#101a2c;
  --text:#e8eef7; --text-muted:#aebacb; --rule:#243349; --border:#243349; --input-border:#35476a;
  --accent-blue-soft:#16315a;
  --shadow:0 .5rem 1rem rgba(0,0,0,.4); --shadow-pop:0 10px 30px rgba(0,0,0,.5);
}
/* header stays navy in both themes (brand constant) */

/* ===== Base ===== */
body { background:var(--bg); color:var(--text); font-family:'Segoe UI', 'Noto Sans Devanagari', system-ui, sans-serif; }
a { color:var(--accent-blue); }

/* ===== Shell ===== */
.app-shell { display:flex; flex-direction:column; min-height:100vh; }
.app-topbar { position:sticky; top:0; z-index:1000; display:flex; flex-direction:column; align-items:stretch;
  padding:0; background:linear-gradient(90deg,var(--brand-navy),var(--brand-navy-dark));
  box-shadow:0 1px 0 rgba(0,0,0,.15); }
.app-topbar-nav { display:flex; align-items:center; height:48px; padding:0 .5rem; }
.app-content { flex:1; padding:1.1rem 1.5rem; }
.page-animate { animation:fadeIn .18s ease; }
@keyframes fadeIn { from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .page-animate{ animation:none; } }

/* ===== TopNav ===== */
.tn-brand { font-weight:800; letter-spacing:.5px; color:#fff; padding:0 .9rem 0 .4rem;
  border-right:1px solid rgba(255,255,255,.12); margin-right:.5rem; white-space:nowrap; }
.tn-brand .dot { color:var(--accent-gold); }
/* flex:0 0 auto, NOT flex:1. Growing was harmless while nothing sat to the right of this row, but it
   also let the row shrink below its own white-space:nowrap content, and because overflow has to stay
   visible (see below) the menu then paints straight over its neighbour. That is the bug the 1200px
   breakpoint was patching for the app-bar; the quick search made it reappear 200px higher up. Sized
   to content, the menu can no longer collide -- .es-search yields instead. */
.tn-items { display:flex; align-items:center; gap:.05rem; height:100%; flex:0 0 auto; min-width:0; overflow:visible; }
.tn-item { position:relative; height:100%; display:flex; align-items:center; }
.tn-link { display:flex; align-items:center; gap:.35rem; padding:.4rem .6rem; border-radius:6px;
  color:var(--header-text); font-size:.79rem; font-weight:500; white-space:nowrap; cursor:pointer;
  text-decoration:none; border:none; background:none; font-family:inherit; line-height:1;
  transition:background-color .15s,color .15s; }
.tn-link:hover, .tn-item:focus-within > .tn-link { background:rgba(255,255,255,.12); color:#fff; }
.tn-item.active > .tn-link { color:#fff; font-weight:600; }
.tn-item.active::after { content:''; position:absolute; left:.4rem; right:.4rem; bottom:0; height:2px;
  background:var(--accent-gold); border-radius:2px 2px 0 0; }
.tn-caret { font-size:.6rem; transition:transform .2s; }
.tn-item:hover .tn-caret, .tn-item:focus-within .tn-caret { transform:rotate(180deg); }
/* max-height/overflow-y is a safety net for EVERY dropdown, however many children it has: on a short
   viewport even a normal-length list could otherwise run past the bottom edge, same failure mode as
   the long-list bug .tn-dropdown-columns below exists to fix, just triggered by window height instead
   of item count. 100px clears the 68px topbar (see the brand layer's .app-topbar-nav) plus margin. */
.tn-dropdown { position:absolute; top:100%; left:0; min-width:210px; background:var(--surface);
  border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow-pop); padding:.35rem;
  max-height:calc(100vh - 100px); overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s,transform .16s,visibility .16s;
  z-index:1100; }
.tn-item:hover .tn-dropdown, .tn-item:focus-within .tn-dropdown { opacity:1; visibility:visible; transform:none; }
/* Set by TopNav.razor's click handler on a dropdown link, briefly, so the menu closes the instant a
   page is navigated to instead of staying open for as long as the mouse happens to still be sitting
   over it (Blazor's client-side navigation doesn't move the pointer, so plain :hover has nothing else
   to make it stop matching). An attribute, not a class -- see the Razor markup's comment for why a
   class added by raw JS doesn't survive Blazor's own re-render of this element. !important because this
   must win over the :hover/:focus-within rule above even though both target the same element with
   otherwise-equal specificity. */
.tn-item[data-force-close] .tn-dropdown { opacity:0 !important; visibility:hidden !important; }
/* A dropdown with more children than TopNav.razor's ManyChildrenThreshold gets this instead of the
   plain single-column list above: a fixed height (the requested "fix height") that wraps overflow
   items into a second column side-by-side, rather than one tall list a viewport has to scroll (or
   that runs off the bottom, the original bug). flex-direction:column + flex-wrap:wrap is what does the
   wrapping -- items fill the first column top-to-bottom up to `height`, then continue in a second.
   Widened to fit two ~210px columns; each item's width is pinned to half so the two columns line up
   evenly regardless of label length. max-height still wins over height on a short viewport (see the
   base rule above), so this never runs off-screen either. */
.tn-dropdown-columns { display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-start;
  gap:.1rem .6rem; width:480px; height:420px; overflow:visible; }
.tn-dropdown-columns .tn-dd-item { width:calc(50% - .3rem); }
.tn-dd-item { display:flex; align-items:center; gap:.55rem; padding:.5rem .7rem; border-radius:7px;
  color:var(--text); font-size:.79rem; font-weight:500; text-decoration:none; }
.tn-dd-item:hover { background:var(--accent-blue-soft); color:var(--brand-navy); }
.tn-dd-item.active { background:var(--accent-blue-soft); color:var(--brand-navy); font-weight:600; }
.tn-dd-item .bi { color:var(--accent-blue); }

/* ===== Employee quick search (shell, between TopNav and AppBar) =====
   This is the element that gives way when the row runs short: flex-shrink 1 down to min-width, while
   .tn-items above is sized to its content. Measured on the dev tenant's menu, the field degrades
   317px -> 112px between a 1920 and a 1220 row instead of the menu overrunning it. margin-left:auto
   collects the slack, which is why the app-bar drops its own auto margin when the search precedes it
   -- and keeps it when the search is absent, for a role without StaffInfo.Read.
   The panel is always in the DOM and revealed by .open -- see EmployeeSearch.razor for why not @if. */
.es-search { position:relative; flex:0 1 auto; width:clamp(180px,22vw,320px); min-width:3rem; margin-left:auto; }
.es-search + .app-bar { margin-left:.6rem; }
/* z-index above .es-backdrop, unlike the CbsSelect pattern this otherwise copies. There the backdrop
   is allowed to cover its own trigger, because clicking a closed/open dropdown button should toggle
   it. Here the trigger is a text field you have to be able to click back into: leave it under the
   backdrop and a second click in the field hits the backdrop instead, closing the panel and blurring
   the input mid-search. */
.es-field { position:relative; z-index:1095; display:flex; align-items:center; gap:.4rem; height:34px;
  padding:0 .6rem; border-radius:20px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); }
.es-search.open .es-field, .es-field:focus-within { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.42); }
.es-icon { color:var(--header-text); font-size:.8rem; }
.es-input { flex:1; min-width:0; border:0; background:none; color:#fff; font-family:inherit; font-size:.76rem; outline:none; }
.es-input::placeholder { color:rgba(255,255,255,.7); }
.es-input::-webkit-search-cancel-button { display:none; }
.es-spin { width:.8rem; height:.8rem; color:#fff; }
.es-kbd { display:inline-block; padding:.05rem .3rem; border:1px solid rgba(255,255,255,.3); border-radius:4px;
  color:rgba(255,255,255,.72); font-family:inherit; font-size:.58rem; font-weight:700; white-space:nowrap; }
/* Specificity, not order, is what keeps these winning over the width rules further down the file. */
.es-field:focus-within .es-kbd, .es-search.open .es-kbd { display:none; }

.es-backdrop { display:none; position:fixed; inset:0; z-index:1090; }
.es-search.open .es-backdrop { display:block; }
.es-panel { position:absolute; top:calc(100% + .35rem); right:0; min-width:340px; max-width:min(420px,90vw);
  background:var(--surface); border:1px solid var(--rule); border-radius:10px; box-shadow:var(--shadow-pop);
  padding:.35rem; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .16s,transform .16s,visibility .16s; z-index:1100; }
.es-search.open .es-panel { opacity:1; visibility:visible; transform:none; }

.es-results { list-style:none; margin:0; padding:0; max-height:340px; overflow-y:auto; }
.es-hit { padding:.45rem .6rem; border-radius:7px; cursor:pointer; }
.es-hit:hover, .es-hit.active { background:var(--accent-blue-soft); }
.es-hit-name { display:flex; align-items:center; gap:.4rem; color:var(--text); font-size:.8rem; font-weight:600; }
.es-hit-meta { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.1rem; color:var(--text-muted); font-size:.7rem; }
.es-hit mark { padding:0; background:none; color:var(--accent-blue); font-weight:750; }
.es-note { padding:.6rem; color:var(--text-muted); font-size:.76rem; text-align:center; }
.es-note-error { color:#b42318; }
.es-all { display:flex; align-items:center; gap:.4rem; width:100%; margin-top:.2rem; padding:.45rem .6rem;
  border:0; border-top:1px solid var(--rule); border-radius:0 0 7px 7px; background:none;
  color:var(--accent-blue); font-family:inherit; font-size:.74rem; font-weight:650; cursor:pointer; text-align:left; }
.es-all:hover { background:var(--accent-blue-soft); }

/* ===== AppBar (second header row / utility strip) ===== */
.app-bar { display:flex; align-items:center; gap:.6rem; height:40px; padding:0 .9rem;
  border-top:1px solid rgba(255,255,255,.1); }
.app-bar .ab-opdate { margin-left:auto; }
.ab-lang { display:flex; border:1px solid rgba(255,255,255,.25); border-radius:20px; overflow:hidden;
  font-weight:700; font-size:.62rem; }
.ab-lang button { padding:.2rem .5rem; color:#aebfd6; background:none; border:none; cursor:pointer; font-family:inherit; }
.ab-lang button.sel { background:var(--accent-gold); color:#082247; }
.ab-icon-btn { display:flex; align-items:center; justify-content:center; width:1.9rem; height:1.9rem;
  border-radius:50%; border:none; background:none; color:var(--header-text); cursor:pointer; }
.ab-icon-btn:hover { background:rgba(255,255,255,.12); }
.ab-branch { text-align:right; line-height:1.2; }
.ab-branch .name { font-size:.73rem; font-weight:600; color:#fff; white-space:nowrap; }
.ab-user { display:flex; align-items:center; gap:.3rem; background:rgba(255,255,255,.14); color:#fff;
  padding:.22rem .55rem; border-radius:20px; font-size:.74rem; font-weight:600; white-space:nowrap; }
.ab-user .bi { color:var(--accent-gold); }
.ab-logout { display:flex; align-items:center; gap:.25rem; padding:.3rem .5rem; border:none; background:none;
  color:#ffb3b3; font-size:.76rem; font-weight:600; cursor:pointer; font-family:inherit; border-radius:6px; }
.ab-logout:hover { background:rgba(255,255,255,.1); color:#fff; }

/* ===== Breadcrumb ===== */
.breadcrumb-bar { display:flex; align-items:center; gap:.45rem; padding:.4rem 1.5rem; background:var(--surface);
  border-bottom:1px solid var(--rule); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  min-height:2rem; }
.bc-parent { color:var(--text-muted); } .bc-sep { color:#94a3b8; } .bc-child { color:var(--brand-navy); }
html[data-theme="dark"] .bc-child { color:var(--accent-gold); }

/* ===== Shared components ===== */
.cbs-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); }
.cbs-card-head { padding:.6rem .9rem; border-bottom:1px solid var(--rule); font-size:.9rem; font-weight:600;
  display:flex; align-items:center; gap:.45rem; color:var(--brand-navy); }
html[data-theme="dark"] .cbs-card-head { color:var(--text); }
.cbs-card-body { padding:.9rem; }
.cbs-btn { font-size:.8rem; font-weight:600; color:#fff; background:var(--brand-navy); border:none;
  border-radius:6px; padding:.4rem .9rem; cursor:pointer; }
.cbs-btn:hover { background:var(--brand-navy-dark); }
.cbs-btn.outline { background:none; color:var(--brand-navy); border:1px solid var(--brand-navy); }
html[data-theme="dark"] .cbs-btn.outline { color:var(--text); border-color:var(--rule); }
.cbs-btn.danger { background:none; color:var(--danger); border:1px solid var(--danger); }
.cbs-input { width:100%; height:1.72rem; padding:.15rem .5rem; font-size:.78rem; line-height:1.35;
  color:var(--text); background:var(--surface); border:1px solid var(--input-border); border-radius:5px;
  transition:border-color .15s, box-shadow .15s; }
.cbs-input::placeholder { color:var(--text-muted); opacity:1; }
.cbs-input:focus { outline:none; border-color:var(--accent-blue); box-shadow:0 0 0 3px var(--accent-blue-soft); }
.cbs-input:disabled { background:var(--surface-2); color:var(--text-muted); cursor:not-allowed; }
.cbs-label { font-size:.72rem; font-weight:600; color:var(--text); margin-bottom:.18rem; display:block;
  letter-spacing:.01em; }
.cbs-chip { display:inline-flex; align-items:center; gap:.3rem; font-size:.78rem; padding:.25rem .65rem;
  border-radius:999px; border:1px solid var(--border); color:var(--text); cursor:pointer; background:var(--surface); }
.cbs-chip.on { background:var(--accent-blue-soft); border-color:var(--accent-blue); color:var(--brand-navy); }
html[data-theme="dark"] .cbs-chip.on { color:var(--text); }
.cbs-select { position:relative; }
.cbs-select-trigger { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  width:100%; text-align:left; cursor:pointer; background:var(--surface); overflow:hidden; }
.cbs-select-trigger:disabled { opacity:.6; cursor:not-allowed; }
/* The trigger inherits .cbs-input's FIXED height (1.72rem), while a multi-select's label is the
   concatenation of every picked item -- unbounded by nature. Without these rules that text wraps,
   escapes the fixed-height box and renders on top of the field's own <label>; three assigned staff on
   Client Setup was enough to do it. Truncate to a single line instead -- the full set is always
   readable in the panel below, and on the "Selected:" row inside it.
   min-width:0 is the load-bearing part: a flex child will NOT shrink below its content width without
   it, so text-overflow alone does nothing here. The caret is pinned so it never gets squeezed out. */
.cbs-select-trigger > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cbs-select-trigger > .cbs-select-caret { flex:0 0 auto; }
.cbs-select-placeholder { color:var(--text-muted); }
.cbs-select-caret { font-size:.7rem; color:var(--text-muted); }
/* Panel + backdrop stay in the DOM; shown only when .cbs-select has .open (avoids a
   Blazor Server quirk where @if-removing the clicked subtree dropped the close render). */
.cbs-select-backdrop { display:none; position:fixed; inset:0; z-index:1000; }
.cbs-select-panel { display:none; position:absolute; z-index:1001; top:calc(100% + 2px); left:0; right:0;
  background:var(--surface); border:1px solid var(--border); border-radius:6px;
  box-shadow:0 6px 20px rgba(0,0,0,.18); padding:.3rem; }
.cbs-select.open .cbs-select-backdrop { display:block; }
.cbs-select.open .cbs-select-panel { display:block; }
/* Set by cbsToggleClass (App.razor) when there is more room above the trigger than below -- otherwise
   a control near the bottom of the page renders its options off-screen, where they cannot be reached.
   That script also caps the panel's height to the space actually available on the chosen side. */
.cbs-select.drop-up .cbs-select-panel { top:auto; bottom:calc(100% + 2px); }
.cbs-select-search { margin-bottom:.3rem; }
.cbs-select-options { list-style:none; margin:0; padding:0; max-height:14rem; overflow-y:auto; }
.cbs-select-option { padding:.4rem .55rem; border-radius:4px; font-size:.85rem; cursor:pointer; color:var(--text); }
.cbs-select-option:hover { background:var(--surface-2); }
.cbs-select-option.on { background:var(--accent-blue-soft); color:var(--brand-navy); }
html[data-theme="dark"] .cbs-select-option.on { color:var(--text); }
/* keyboard cursor (Up/Down) — strong, always-visible highlight, wins over hover/selected */
.cbs-select-option.active { background:var(--accent-blue); color:#fff; }
.cbs-select-empty { padding:.4rem .55rem; font-size:.82rem; color:var(--text-muted); }
/* CbsMultiSelect -- reuses every .cbs-select-* rule above (backdrop/panel/search/options/empty); only
   the "Selected:" chip row and the checkbox-row layout are new. */
/* THE PANEL MUST NOT GROW WITH THE SELECTION.
   The panel is laid out as a column and capped, so the search box keeps its natural height and the
   OPTION LIST takes whatever is left -- the list can never be pushed out of view. This mattered most
   when a pinned "Selected:" chip row sat above the list and grew one line per pick until the remaining
   checkboxes were off the bottom of the screen; that row has since been removed (see
   CbsMultiSelect.razor), but the cap stays, because it is also what keeps a long option list inside
   the window and what cbsToggleClass's drop-up measurement assumes.
   Scoped to .cbs-multiselect so single-select CbsSelect keeps its existing 14rem list untouched. The
   extra class also out-specifies `.cbs-select.open .cbs-select-panel { display:block }`, which is what
   lets display:flex win. */
.cbs-select.cbs-multiselect.open .cbs-select-panel { display:flex; flex-direction:column;
  max-height:min(60vh, 26rem); }
.cbs-multiselect .cbs-select-search { flex:0 0 auto; }
.cbs-multiselect .cbs-select-options { flex:1 1 auto; max-height:none; min-height:5rem; }
.cbs-multiselect-option { padding:0; }
.cbs-multiselect-option:hover { background:var(--surface-2); }
.cbs-multiselect-option label { display:flex; align-items:center; gap:.5rem; padding:.4rem .55rem;
  cursor:pointer; width:100%; margin:0; }
.cbs-multiselect-option input[type="checkbox"] { accent-color:var(--accent-blue); width:14px; height:14px; flex:0 0 auto; }
.cbs-table { width:100%; border-collapse:collapse; background:var(--surface); font-size:.8rem; }
.cbs-table th, .cbs-table td { padding:.4rem .65rem; border-bottom:1px solid var(--rule);
  text-align:left; vertical-align:middle; }
.cbs-table thead th { position:sticky; top:0; z-index:1; background:var(--brand-navy); color:#fff;
  font-weight:600; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.cbs-table tbody td { color:var(--text); }
.cbs-table tbody tr:nth-child(even) { background:var(--row-alt); }
.cbs-table tbody tr:hover { background:var(--accent-blue-soft); }
html[data-theme="dark"] .cbs-table tbody tr:hover { background:var(--surface-2); }
/* right-align numeric/amount columns when marked */
.cbs-table td.num, .cbs-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
.cbs-alert { padding:.5rem .8rem; border-radius:6px; font-size:.85rem; }
.cbs-alert.ok { background:rgba(27,156,133,.14); color:var(--success); }
.cbs-alert.err { background:rgba(209,45,45,.12); color:var(--danger); }
.cbs-alert.warn { background:rgba(247,208,96,.18); color:#8a6d1a; }

/* Bootstrap form controls — compact + clearer, matches .cbs-input (both themes) */
.form-control, .form-select { font-size:.78rem; min-height:1.72rem; height:1.72rem; padding:.15rem .5rem;
  border-color:var(--input-border); color:var(--text); }
.form-control-sm, .form-select-sm { min-height:1.7rem; padding:.15rem .45rem; font-size:.76rem; }
.form-control:focus, .form-select:focus { border-color:var(--accent-blue);
  box-shadow:0 0 0 3px var(--accent-blue-soft); }
.form-label { font-size:.72rem; font-weight:600; color:var(--text); margin-bottom:.18rem; }

/* Bootstrap tables — readable body text + zebra to match .cbs-table */
.table { font-size:.8rem; color:var(--text); --bs-table-striped-bg:var(--row-alt); }
.table > tbody > tr:nth-child(even) > * { background:var(--row-alt); }
.table > tbody > tr:hover > * { background:var(--accent-blue-soft); }

/* Dark-correct Bootstrap form controls */
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select {
  background:var(--surface); color:var(--text); border-color:var(--input-border);
}
html[data-theme="dark"] .form-control::placeholder { color:#7c8aa0; }
html[data-theme="dark"] .table { color:var(--text); }
html[data-theme="dark"] .table > tbody > tr:hover > * { background:var(--surface-2); }

/* ===== HNBG enterprise brand layer ===== */
:root {
  --brand-navy:#285eaa; --brand-navy-dark:#1b4077; --accent-blue:#285eaa;
  --accent-blue-soft:#edf4fd; --accent-gold:#e5252a; --brand-red:#e5252a;
  --bg:#e9eef5; --surface-2:#e5ebf3; --text:#202a3a; --text-muted:#6d7786; --rule:#d9e2ec;
  --shadow:0 12px 32px rgba(28,52,84,.08); --shadow-pop:0 18px 45px rgba(24,45,76,.16);
}
body { min-width:320px; background:var(--bg); font-family:Inter,'Segoe UI','Noto Sans Devanagari',system-ui,sans-serif; }
.app-topbar { background:#285eaa; border-top:3px solid #e5252a; box-shadow:0 3px 16px rgba(24,54,96,.2); }
.app-bar { flex:0 0 auto;height:auto;padding:0;margin-left:auto;background:transparent;border:0;color:#34445a; }
.app-topbar-nav { height:68px; padding:0 .75rem; background:linear-gradient(105deg,#2d66b3 0%,#285eaa 52%,#1d4d8d 100%); }
.tn-brand { height:100%; min-width:225px; display:flex; align-items:center; gap:.85rem; margin-left:-.75rem; margin-right:1.25rem; padding:0 1.4rem 0 .75rem; border-right:1px solid #dce5ef; background:#fff; color:#172033; text-decoration:none; box-shadow:5px 0 18px rgba(14,43,82,.12); }
.tn-brand img { width:92px; height:46px; object-fit:contain; }
.tn-brand-copy { display:flex; flex-direction:column; line-height:1.05; }
.tn-brand-copy strong { color:#1d3f72; font-size:.69rem; text-transform:uppercase; letter-spacing:.09em; }
.tn-brand-copy small { margin-top:.25rem; color:#8a93a0; font-size:.56rem; text-transform:uppercase; letter-spacing:.12em; }
/* Must stay overflow:visible -- an overflow-x here also clips overflow-y, which would cut off the
   group dropdowns. Menu grouping (migration 0042) is what keeps this row short enough to fit. */
.tn-items { gap:.25rem; }
.tn-link { height:42px; padding:.55rem .72rem; color:#e7f0fc; font-size:.78rem; font-weight:650; border-radius:5px; }
.tn-link .bi:not(.tn-caret) { color:#c4d9f3; }
.tn-link:hover,.tn-item:focus-within>.tn-link { color:#fff; background:rgba(255,255,255,.13); }
.tn-item.active>.tn-link { color:#fff; background:rgba(255,255,255,.17); font-weight:750; }
.tn-item.active::after { left:.65rem; right:.65rem; bottom:0; height:3px; background:#e5252a; }
.tn-dropdown { top:calc(100% - 6px); min-width:230px; border:0; border-top:3px solid #e5252a; border-radius:3px 3px 9px 9px; }
/* The last group sits hard against the right edge, so open its panel leftwards -- anchored at
   left:0 it runs past the viewport and gives the whole page a horizontal scrollbar. */
.tn-items > .tn-item:last-child .tn-dropdown { left:auto; right:0; }
.tn-dd-item { border-radius:5px; }
.es-field { height:38px; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.26); }
.es-icon { color:#c4d9f3; }
.app-bar .ab-lang { border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.1); }
.ab-lang button { color:#e4effc; }
.ab-lang button.sel { color:#fff; background:#e5252a; }
.ab-icon-btn { color:#fff; }
.ab-icon-btn:hover { background:rgba(255,255,255,.14); }
.breadcrumb-bar { min-height:34px; padding:.4rem .75rem; border-bottom:1px solid #ccd9e8; background:#e7eff9; color:#65768b; font-size:.62rem; }
.bc-child { color:#285eaa; }
.app-content { padding:.65rem .75rem 2rem; }

/* Dashboard */
.erp-dashboard { max-width:1500px; margin:0 auto; }
.dashboard-hero { position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; min-height:250px; padding:clamp(2rem,4vw,4rem); border-radius:14px; color:#fff; background:linear-gradient(110deg,#1e4c8d 0%,#285eaa 68%,#346eba 100%); box-shadow:0 20px 50px rgba(31,72,130,.2); }
.dashboard-hero::before { content:""; position:absolute; inset:0; opacity:.18; background:repeating-linear-gradient(135deg,transparent 0 42px,rgba(255,255,255,.11) 43px 44px); }
.dashboard-hero::after { content:""; position:absolute; width:430px; height:430px; right:-165px; top:-230px; border-radius:50%; border:70px solid rgba(255,255,255,.06); }
.dashboard-hero-copy,.dashboard-hero-mark { position:relative; z-index:1; }
.eyebrow { margin:0 0 .7rem; color:#285eaa; font-size:.67rem; font-weight:850; text-transform:uppercase; letter-spacing:.14em; }
.dashboard-hero .eyebrow { color:#dceaff; }
.dashboard-hero .eyebrow span { display:inline-block; width:28px; height:3px; margin-right:.55rem; vertical-align:middle; background:#e5252a; }
.dashboard-hero h1 { max-width:760px; margin:0; font-size:clamp(2rem,4vw,3.55rem); line-height:1.08; letter-spacing:-.04em; font-weight:500; }
.dashboard-hero h1 strong { font-weight:850; }
.dashboard-hero-copy>p:last-child { max-width:630px; margin:1.15rem 0 0; color:#dce8f7; font-size:1rem; }
.dashboard-hero-mark { display:flex; flex-direction:column; align-items:flex-end; margin-left:2rem; padding-right:2rem; opacity:.92; }
.dashboard-hero-mark span { font-size:clamp(3.5rem,7vw,7rem); line-height:.8; font-weight:900; letter-spacing:-.08em; }
.dashboard-hero-mark small { margin-top:.8rem; padding:.3rem .65rem; background:#e5252a; font-size:.72rem; font-weight:900; letter-spacing:.22em; }
.dashboard-section { padding:2.4rem 0 1.5rem; }
.dashboard-section-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:1.2rem; }
.dashboard-section-head h2 { margin:0; color:#202a3a; font-size:1.55rem; font-weight:800; letter-spacing:-.025em; }
.dashboard-date { color:#7c8796; font-size:.76rem; font-weight:600; }
.dashboard-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.dashboard-card { position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:1rem; min-height:150px; padding:1.35rem; border:1px solid #e9edf2; border-radius:10px; background:#fff; box-shadow:0 8px 24px rgba(26,49,79,.055); transition:transform .18s,box-shadow .18s,border-color .18s; }
.dashboard-card:hover { transform:translateY(-3px); border-color:#d5deea; box-shadow:0 15px 32px rgba(26,49,79,.1); }
.dashboard-card::after { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--card-accent); }
.dashboard-card>i { display:grid; place-items:center; flex:0 0 46px; height:46px; border-radius:9px; color:var(--card-accent); background:var(--card-soft); font-size:1.2rem; }
.dashboard-card div { display:flex; flex-direction:column; min-width:0; }
.dashboard-card span { color:var(--card-accent); font-size:.64rem; font-weight:850; text-transform:uppercase; letter-spacing:.1em; }
.dashboard-card strong { margin-top:.45rem; color:#263143; font-size:.96rem; }
.dashboard-card small { margin-top:.5rem; color:#7b8492; line-height:1.45; }
.dashboard-card.blue{--card-accent:#285eaa;--card-soft:#edf4fd}.dashboard-card.red{--card-accent:#e5252a;--card-soft:#fff0f1}.dashboard-card.gold{--card-accent:#b67a16;--card-soft:#fff6e3}.dashboard-card.ink{--card-accent:#39485d;--card-soft:#eef1f5}
.dashboard-callout { display:flex; align-items:center; gap:1rem; padding:1.1rem 1.3rem; border-radius:9px; border:1px solid #e4e9f0; background:#fff; }
.callout-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#fff; background:#285eaa; }
.dashboard-callout>div:nth-child(2) { display:flex; flex-direction:column; gap:.15rem; }
.dashboard-callout strong { color:#273244; font-size:.85rem; }.dashboard-callout span { color:#7c8694; font-size:.75rem; }
.callout-rule { flex:1; height:1px; margin-left:1rem; background:linear-gradient(90deg,#e5252a 0 60px,#e8ebef 60px); }

.dashboard-notices { display:flex; flex-direction:column; gap:.75rem; }
.dashboard-notice { display:flex; gap:.9rem; padding:1rem 1.2rem; border:1px solid #e9edf2; border-radius:10px; background:#fff; box-shadow:0 6px 18px rgba(26,49,79,.05); }
.dashboard-notice>i { flex:0 0 34px; height:34px; display:grid; place-items:center; border-radius:8px; color:#b67a16; background:#fff6e3; font-size:1.05rem; }
.dashboard-notice-body { min-width:0; }
.dashboard-notice-body strong { display:block; color:#263143; font-size:.9rem; }
.dashboard-notice-body p { margin:.35rem 0 0; color:#586374; font-size:.8rem; line-height:1.45; white-space:pre-line; }
.dashboard-notice-meta { margin-top:.5rem; color:#8a93a3; font-size:.72rem; display:flex; gap:.3rem; flex-wrap:wrap; }
.dashboard-notice-attachments { margin-top:.5rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.dashboard-notice-attachments button { border:0; background:#f1f5f9; color:#1472b8; font-size:.72rem; padding:.3rem .6rem; border-radius:999px; display:flex; align-items:center; gap:.35rem; }
.dashboard-notice-attachments button:hover { background:#e2e8f0; }
html[data-theme="dark"] .dashboard-notice { background:#152135; border-color:#26364e; }
html[data-theme="dark"] .dashboard-notice-body strong { color:#eef4fb; }
html[data-theme="dark"] .dashboard-notice-body p { color:#a9b4c4; }

html[data-theme="dark"] .app-topbar-nav,html[data-theme="dark"] .app-topbar,html[data-theme="dark"] .breadcrumb-bar { background:#152135; }
html[data-theme="dark"] .tn-brand { border-color:#283750; } html[data-theme="dark"] .tn-link { color:#d4deec; }
html[data-theme="dark"] .es-field { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }
html[data-theme="dark"] .es-panel { background:#152135; border-color:#26364e; }
html[data-theme="dark"] .es-hit:hover,html[data-theme="dark"] .es-hit.active { background:#1d2c44; }
html[data-theme="dark"] .es-hit-name { color:#eef4fb; }
html[data-theme="dark"] .es-all { border-color:#26364e; }
html[data-theme="dark"] .dashboard-card,html[data-theme="dark"] .dashboard-callout { background:#152135; border-color:#26364e; }
html[data-theme="dark"] .dashboard-card strong,html[data-theme="dark"] .dashboard-section-head h2,html[data-theme="dark"] .dashboard-callout strong { color:#eef4fb; }
/* Below this the grouped nav no longer fits on one row beside the brand and the app-bar -- measured
   at ~1085px it overruns the app-bar by 64px -- so give it its own full-width row. Dropdowns then
   anchor to .tn-items (not .tn-item) and span it, so a group near the right edge opens as a panel
   instead of running off-screen. Kept separate from the 1050px block below: this threshold is set by
   how wide the menu row is, not by the brand/dashboard rules that break at a different width. */
/* Once .tn-items takes its own row, row one is brand | search | app-bar. The search's own
   margin-left:auto (base rule) collects the slack, so the two controls stay together on the right
   instead of the search hugging the brand; .app-bar keeps auto here for roles with no search field. */
@media(max-width:1200px){.app-topbar-nav{height:auto;flex-flow:row wrap;padding:.25rem .75rem 0}.app-bar{margin-left:auto}.es-kbd{display:none}.tn-items{order:3;flex:1 0 100%;height:auto;position:relative;flex-wrap:wrap;row-gap:.2rem;padding-bottom:.3rem}.tn-item{position:static}.tn-dropdown,.tn-items>.tn-item:last-child .tn-dropdown{left:0;right:0;min-width:0}
/* The two-column layout assumes it has room to open sideways from its trigger; once the nav wraps to
   its own full-width row there's no room for a second column, so fall back to the plain scrollable
   single-column list every other dropdown already uses at this width. */
.tn-dropdown-columns{display:block;width:auto;height:auto;overflow-y:auto}
.tn-dropdown-columns .tn-dd-item{width:auto}}
@media(max-width:1050px){.tn-brand{min-width:auto}.tn-brand-copy{display:none}.dashboard-grid{grid-template-columns:repeat(2,1fr)}.dashboard-hero-mark{display:none}}
/* Phone: the field stays visible but narrow (a collapse-to-icon toggle buys ~120px and costs a tap),
   and the panel is pinned to the viewport instead of to a 200px field -- its 340px min-width would
   otherwise overhang the right edge. top:auto keeps the fixed panel at its static position, i.e.
   still directly under the field. */
@media(max-width:700px){.app-topbar-nav{min-height:60px;align-items:center}.tn-brand{height:52px;border:0;margin-right:auto}.app-bar{margin-left:0}.es-search{width:clamp(110px,36vw,200px);margin-left:.4rem}.es-panel{position:fixed;top:auto;left:.5rem;right:.5rem;min-width:0;max-width:none}.dashboard-grid{grid-template-columns:1fr}.dashboard-section-head{align-items:flex-start;flex-direction:column;gap:.5rem}.dashboard-hero{min-height:280px}.app-content{padding-bottom:2rem}}

/* ===== Uranus form/table shell (shared across every Staff page: Setup, List, Details) =====
   Originally scoped to StaffInfo.razor.css; promoted here because Blazor's per-component CSS
   isolation means a page's own .razor.css can't style a *different* top-level page's root markup,
   and this shell now needs to render identically on three separate pages. A page with its own scoped
   override (e.g. .status-pill in Approvals.razor.css/UserSetup.razor.css) always wins over this --
   Blazor appends a scope attribute to those selectors, which out-specifies a plain global one -- so
   this is purely a fallback for pages that render these classes with no scoped copy of their own. */
.uranus-page{background:#dfe7f1;border:1px solid #cbd7e5;border-radius:14px;padding:1rem 1.25rem 1.25rem;min-height:70vh}
.uranus-page-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.85rem}
.uranus-toolbar-actions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}

.uranus-top-tabs{display:flex;align-items:center;gap:.25rem;width:max-content;max-width:100%;overflow-x:auto;padding:.3rem;margin:0;border:1px solid #c8d5e4;border-radius:10px;background:#d4dfec;scrollbar-width:thin}
.uranus-top-tabs button{appearance:none;display:flex;align-items:center;gap:.45rem;white-space:nowrap;border:1px solid transparent;background:transparent;padding:.52rem .78rem;color:#53647a;font-size:.76rem;font-weight:700;line-height:1;border-radius:7px;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.uranus-top-tabs button:hover{background:rgba(255,255,255,.72);color:var(--brand-navy)}
.uranus-top-tabs button.active{background:#fff;color:#175fa8;border-color:#c5d2e1;box-shadow:0 2px 7px rgba(15,23,42,.1)}
.uranus-top-tabs button.active i{color:#b78619}
.uranus-top-tabs i{font-size:.9rem;color:#718096}

.uranus-content{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1rem}
.uranus-content.single{display:block}
.uranus-side-tabs{display:flex;flex-direction:column;gap:.65rem}
.uranus-side-tabs button{display:flex;align-items:center;gap:.7rem;text-align:left;border:1px solid #e5eaf2;background:#fff;border-radius:10px;padding:.8rem .85rem;color:#526074;font-size:.78rem;font-weight:650;box-shadow:0 4px 16px rgba(15,23,42,.04);transition:.18s}
.uranus-side-tabs button:hover{transform:translateX(3px);border-color:var(--brand-gold)}
.uranus-side-tabs button.active{background:linear-gradient(135deg,var(--brand-navy),#143c69);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(3,38,73,.18)}

.uranus-form-stack{display:flex;flex-direction:column;gap:1rem;min-width:0}

.uranus-grid{display:grid;gap:.9rem 1rem}
.uranus-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.uranus-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.uranus-field{min-width:0}
.uranus-field label{display:block;font-size:.7rem;color:#475569;font-weight:700;margin:0 0 .32rem}
.uranus-field label b{color:#dc3545}
.uranus-field .form-control,.uranus-field .form-select{font-size:.78rem;min-height:36px;border-color:#ccd8e6;background-color:#fbfdff}
.uranus-field .form-control:focus,.uranus-field .form-select:focus{border-color:#3975bd;box-shadow:0 0 0 .16rem rgba(40,94,170,.13)}
.uranus-field.span-2{grid-column:span 2}
.uranus-check{display:flex;gap:.45rem;align-items:center;min-height:36px;padding-top:1.25rem;font-size:.74rem;font-weight:650;color:#475569}
.uranus-subtitle{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#8b6b21;border-left:3px solid var(--brand-gold);padding-left:.5rem}
.uranus-loading{display:flex;gap:.5rem;align-items:center;justify-content:center;padding:4rem;color:var(--text-muted)}

.uranus-list-toolbar{display:flex;justify-content:flex-end;margin-bottom:.7rem}
.uranus-list-toolbar input{max-width:260px;font-size:.78rem}
.uranus-table{font-size:.73rem;margin:0}
.uranus-table thead th{background:#f5f7fa;color:#516074;text-transform:uppercase;letter-spacing:.035em;font-size:.64rem;border-bottom:1px solid #e3e8ef;white-space:nowrap}
.uranus-table td{vertical-align:middle;color:#334155}

/* Every data table site-wide: capped height, scrolls internally with the header pinned, rather than
   letting a long list grow the whole page. Global (not per-component) because every page's table
   wants the same behaviour -- unlike the rest of this file's page-specific classes, this one is not
   meant to vary. A page's own .razor.css can still override either rule for one specific table (e.g.
   a shorter cap for a small nested grid) since Blazor's scoped-CSS attribute selector always out-
   specifies a plain global class. z-index:1 is enough to clear table content while staying well under
   .app-topbar's 1000, so a sticky header never floats above the nav bar it scrolls under. */
.table-responsive{max-height:60vh;overflow-y:auto}
.table thead th{position:sticky;top:0;z-index:1}
.uranus-table thead th{position:sticky;top:0;z-index:1}
.status-pill{display:inline-flex;border-radius:999px;padding:.2rem .5rem;font-size:.65rem;font-weight:750}
.status-pill.active{background:#dcfce7;color:#166534}
.status-pill.inactive{background:#fee2e2;color:#991b1b}
.icon-action{border:0;background:transparent;color:#1769aa;font-size:.95rem}

.uranus-file-link{cursor:pointer;color:#1769aa;text-decoration:underline;background:none;border:0;padding:0;font:inherit}
.uranus-file-link:hover{color:#0f4c7a}

/* Read-only counterpart of .uranus-grid/.uranus-field above: same column rhythm, but each cell is a
   label above a value rather than a label above a control, so the vertical gap tightens to match.
   Global for the same reason .uranus-field is -- the pages that render these build each field with
   RenderTreeBuilder, and Blazor only stamps its per-component scope attribute onto elements written
   as .razor markup, so a scoped rule would never match them. */
.uranus-view-grid{display:grid;gap:.75rem 1rem}
.uranus-view-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.uranus-view-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.uranus-view-field{min-width:0}
.uranus-view-field label{display:block;font-size:.66rem;font-weight:750;text-transform:uppercase;letter-spacing:.045em;color:#8593a6;margin:0 0 .2rem}
/* The value carries the weight -- it is what the reader came for; the label only says what it is.
   overflow-wrap so a long email or map link cannot push the grid column wider than its track. */
.uranus-view-field span{display:block;font-size:.82rem;color:#26344a;font-weight:600;overflow-wrap:anywhere}
@media(max-width:1200px){.uranus-view-grid.four{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.uranus-view-grid.four,.uranus-view-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.uranus-view-grid.four,.uranus-view-grid.three{grid-template-columns:1fr}}

@media(max-width:1200px){.uranus-grid.four{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1050px){.uranus-page-toolbar{align-items:stretch;flex-direction:column}.uranus-top-tabs{width:100%}.uranus-toolbar-actions{justify-content:flex-end}}
@media(max-width:900px){.uranus-content{grid-template-columns:1fr}.uranus-side-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.uranus-grid.four,.uranus-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.uranus-page{padding:.75rem}.uranus-toolbar-actions{justify-content:flex-start;flex-wrap:wrap}.uranus-grid.four,.uranus-grid.three{grid-template-columns:1fr}.uranus-field.span-2{grid-column:auto}.uranus-side-tabs{grid-template-columns:1fr}}


/* Shared Bikram Sambat calendar grid — used by both CbsDateRangePicker (dual-month range) and
   CbsDatePicker (single month), so a range field and a single-date field always look and behave
   the same. Kept as global (unscoped) classes, not per-component .razor.css, specifically so both
   components can share one definition instead of drifting apart over time. */
.cbs-range-backdrop { position: fixed; inset: 0; z-index: 1300; background: transparent; }
/* Fixed + viewport-centered, not anchored under the trigger field: the field can sit inside a
   narrow/scrollable container (e.g. a modal's own overflow-y-auto body), and an absolutely-positioned
   popup anchored to it would get clipped by that ancestor instead of showing in full. Centering in
   the viewport sidesteps that entirely. */
.cbs-range-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1301;
  background: var(--surface, #fff); border: 1px solid var(--rule, #e2e8f0); border-radius: .75rem;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .25); padding: .85rem; width: max-content;
  max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); overflow-y: auto; }
.cbs-range-month { width: 15.5rem; }
.cbs-range-month-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.cbs-range-month-title { font-size: .8rem; font-weight: 800; color: var(--text, #0f172a); }
.cbs-range-nav { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--rule, #e2e8f0);
  background: var(--surface, #fff); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: .7rem; color: var(--text, #0f172a); }
.cbs-range-nav:hover { background: var(--surface-2, #f1f5f9); }
.cbs-dp-popup .cbs-range-month { width:19rem; }
.cbs-dp-parts { display:grid; grid-template-columns:5.2rem 6.6rem 3.5rem; gap:.25rem; align-items:center; }
.cbs-dp-part { height:1.75rem; min-width:0; border:1px solid var(--rule, #d7e0ea); border-radius:.35rem;
  background:var(--surface, #fff); color:var(--text, #0f172a); padding:0 .35rem; font-size:.7rem; font-weight:700; }
.cbs-dp-part:focus { outline:0; border-color:var(--accent-blue); box-shadow:0 0 0 2px var(--accent-blue-soft); }
.cbs-range-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: .62rem;
  font-weight: 700; color: var(--text-muted, #94a3b8); margin-bottom: .2rem; }
.cbs-range-days { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: .15rem; }
/* Two-layer cells: the button itself is a plain rectangle that carries the light-blue "in range"
   band (so adjacent cells connect edge-to-edge with zero gap, no rounding, no half-shapes), and an
   inner circular span carries the dark "selected start/end" marker on top of that. */
.cbs-day { position: relative; aspect-ratio: 1 / 1; width: 100%; display: flex; align-items: center;
  justify-content: center; border: none; background: transparent; padding: 0; cursor: pointer; }
.cbs-day:hover:not(.is-blank):not(:disabled) .cbs-day-circle { background: var(--surface-2, #f1f5f9); }
.cbs-day.is-blank { cursor: default; }
.cbs-day:disabled { color: var(--text-muted, #cbd5e1); opacity: .5; cursor: not-allowed; }
.cbs-day-circle { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 999px; font-size: .72rem; font-weight: 600; color: var(--text, #0f172a); }
.cbs-day.is-in-range { background: var(--accent-blue-soft, #dbeafe); }
/* The band's outer edges curve into a pill around the start/end marker instead of ending in a hard
   square corner (single-date selection never sets is-in-range, so this never applies there). */
.cbs-day.is-in-range.is-start { border-radius: 999px 0 0 999px; }
.cbs-day.is-in-range.is-end { border-radius: 0 999px 999px 0; }
.cbs-day.is-start .cbs-day-circle, .cbs-day.is-end .cbs-day-circle { background: var(--accent-blue, #0284c7);
  color: #fff; font-weight: 700; }
.cbs-range-footer { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .75rem;
  padding-top: .6rem; border-top: 1px solid var(--rule, #e2e8f0); }
.cbs-range-clear { font-size: .74rem; font-weight: 600; color: var(--text-muted, #64748b); background: none;
  border: none; cursor: pointer; padding: .35rem .6rem; }
/* Date pickers: weekends and holidays in red, like the task calendars. */
.cbs-range-weekdays .is-weekend { color: #ef4444; }
.cbs-day.is-weekend:not(:disabled) .cbs-day-circle,
.cbs-day.is-holiday:not(:disabled) .cbs-day-circle { color: #dc2626; font-weight: 700; }
.cbs-day.is-holiday.is-start .cbs-day-circle, .cbs-day.is-holiday.is-end .cbs-day-circle,
.cbs-day.is-weekend.is-start .cbs-day-circle, .cbs-day.is-weekend.is-end .cbs-day-circle { color: #fff; }

/* ===== HNBG Modern Workspace: High Density & Space Maximizer ===== */
.hnbg-layout-root {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', 'Noto Sans Devanagari', system-ui, sans-serif;
}

.hnbg-layout-root.no-sidebar .hnbg-main-area {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hnbg-page-container {
  flex: 1;
  padding: 0.5rem 0.75rem;
  max-width: 100%;
}

/* Strip legacy .admin-page double-frame bezel and heavy nested padding */
.hnbg-layout-root .admin-page {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
}

/* Crisp, full-width card chrome */
.hnbg-layout-root .admin-list-card,
.hnbg-layout-root .admin-form-card {
  border-radius: 8px !important;
  border: 1px solid var(--border, #cbd8e6) !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
  background: var(--surface, #fff) !important;
  overflow: hidden;
}

/* Compact card headers */
.hnbg-layout-root .admin-list-head {
  padding: 0.6rem 0.85rem !important;
  background: linear-gradient(90deg, #f0f6fd, #f8faff) !important;
  border-bottom: 1px solid var(--border, #d6e1ed) !important;
  gap: 0.5rem !important;
}

html[data-theme="dark"] .hnbg-layout-root .admin-list-head {
  background: #142238 !important;
}

.hnbg-layout-root .admin-list-head h2 {
  font-size: 0.88rem !important;
  margin: 0 !important;
}

.hnbg-layout-root .admin-list-head span {
  font-size: 0.66rem !important;
}

/* Compact toolbar controls */
.hnbg-layout-root .admin-list-tools {
  gap: 0.4rem !important;
}

.hnbg-layout-root .admin-search input {
  padding: 0.25rem 0.55rem 0.25rem 1.75rem !important;
  font-size: 0.74rem !important;
  height: 29px !important;
}

.hnbg-layout-root .admin-list-tools select {
  height: 29px !important;
  font-size: 0.74rem !important;
  padding: 0.15rem 1.7rem 0.15rem 0.5rem !important;
}

.hnbg-layout-root .admin-list-tools button {
  height: 29px !important;
  font-size: 0.74rem !important;
  padding: 0.15rem 0.65rem !important;
}

/* High-density table vertical expansion (fill full viewport instead of capped 60vh) */
.hnbg-layout-root .table-responsive {
  max-height: calc(100vh - 130px) !important;
  overflow-y: auto !important;
}

.hnbg-layout-root .table-responsive table {
  margin-bottom: 0 !important;
}

.hnbg-layout-root .po-table th,
.hnbg-layout-root .admin-table th,
.hnbg-layout-root .cbs-table th,
.hnbg-layout-root .table:not(.ui-datepicker-calendar) th {
  padding: 0.4rem 0.65rem !important;
  font-size: 0.63rem !important;
  line-height: 1.2 !important;
}

.hnbg-layout-root .po-table td,
.hnbg-layout-root .admin-table td,
.hnbg-layout-root .cbs-table td,
.hnbg-layout-root .table:not(.ui-datepicker-calendar) td {
  padding: 0.38rem 0.65rem !important;
  font-size: 0.75rem !important;
}

.hnbg-layout-root .po-table td small {
  margin-top: 0.05rem !important;
  font-size: 0.62rem !important;
}

/* ===== Top Shell & Custom Pinned Navigation Bar ===== */
.hnbg-top-shell {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.85rem;
  background: var(--surface, #ffffff);
  border-bottom: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  backdrop-filter: blur(8px);
}

.hnbg-top-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.hnbg-launcher-trigger {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--border, #cbd5e1);
  background: var(--surface-2, #f1f5f9);
  color: var(--text, #1e293b);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.hnbg-launcher-trigger i {
  color: var(--accent-blue, #2563eb);
  font-size: 1rem;
}

.hnbg-launcher-trigger:hover {
  background: var(--accent-blue-soft, #eff6ff);
  border-color: var(--accent-blue, #2563eb);
  color: var(--accent-blue, #2563eb);
}

.hnbg-top-brand {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  padding: 0.2rem 0.4rem;
}

.hnbg-top-brand-img {
  height: 26px;
  width: auto;
  object-fit: contain;
}

.hnbg-top-brand-badge {
  font-size: 0.62rem;
  font-weight: 800;
  background: #e5252a;
  color: #fff;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  letter-spacing: 0.06em;
}

.hnbg-module-indicator-divider {
  height: 20px;
  width: 1px;
  background: var(--border, #e2e8f0);
  margin: 0 0.2rem;
}

.hnbg-active-module-pill {
  display: flex;
  align-items: center;
  padding: 0.26rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border, #cbd5e1);
  background: var(--surface-2, #f1f5f9);
  font-size: 0.78rem;
  color: var(--text, #1e293b);
  cursor: pointer;
  transition: all 0.15s;
}

.hnbg-active-module-pill:hover {
  border-color: var(--accent-blue);
  background: var(--surface);
}

/* Center Pinned Navigation Tabs */
.hnbg-top-center {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0 0.85rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.hnbg-top-center::-webkit-scrollbar {
  display: none;
}

.hnbg-context-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.hnbg-tab-chip {
  display: flex;
  align-items: center;
  border-radius: 6px;
  position: relative;
  background: transparent;
  transition: all 0.15s;
}

.hnbg-context-tab {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.32rem 0.6rem;
  border-radius: 6px;
  font-size: 0.77rem;
  font-weight: 500;
  color: var(--text-muted, #64748b);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.12s;
  border: 1px solid transparent;
}

.hnbg-context-tab:hover {
  color: var(--text);
  background: var(--surface-2);
}

/* Active tab state with signature RED highlight */
.hnbg-tab-chip.active {
  background: #fff1f2;
  box-shadow: inset 0 -2.5px 0 #e5252a;
  border-radius: 6px 6px 0 0;
}

html[data-theme="dark"] .hnbg-tab-chip.active {
  background: rgba(229, 37, 42, 0.14);
  box-shadow: inset 0 -2.5px 0 #e5252a;
}

.hnbg-tab-chip.active .hnbg-context-tab {
  color: var(--text, #0f172a) !important;
  font-weight: 700 !important;
}

/* ICON HIGHLIGHTED IN RED */
.tab-icon.icon-red,
.hnbg-tab-chip.active .tab-icon,
.hnbg-tab-chip.active i,
.hnbg-active-module-pill i.icon-red,
.icon-red {
  color: #e5252a !important;
  font-size: 0.95rem !important;
}

.hnbg-unpin-tab-btn {
  opacity: 0;
  transition: opacity 0.15s;
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 0 0.3rem 0 0.1rem;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.hnbg-tab-chip:hover .hnbg-unpin-tab-btn {
  opacity: 1;
}

.hnbg-unpin-tab-btn:hover {
  color: #e5252a;
}

.hnbg-tab-chip.unpinned-preview {
  border: 1px dashed rgba(229, 37, 42, 0.4);
}

.hnbg-pin-current-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border: none;
  background: transparent;
  color: #e5252a;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0 0.45rem 0 0.1rem;
}

.hnbg-pin-current-btn:hover {
  text-decoration: underline;
}

.hnbg-customize-top-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px dashed var(--border, #cbd5e1);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  margin-left: 0.25rem;
  transition: all 0.15s;
}

.hnbg-customize-top-btn:hover {
  border-color: #e5252a;
  color: #e5252a;
  background: #fff1f2;
}

/* Top Right Section & Profile Fixes */
.hnbg-top-right {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.hnbg-top-search-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border, #cbd5e1);
  background: var(--surface-2, #f1f5f9);
  color: var(--text-muted);
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.15s;
}

.hnbg-top-search-btn:hover {
  border-color: var(--accent-blue);
  color: var(--text);
  background: var(--surface);
}

.hnbg-top-search-btn kbd {
  font-size: 0.62rem;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.05rem 0.25rem;
}

.hnbg-lang-pill {
  display: flex;
  border: 1px solid var(--border, #cbd5e1);
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-2);
}

.hnbg-lang-pill button {
  padding: 0.15rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.hnbg-lang-pill button.active {
  background: var(--accent-blue);
  color: #fff;
}

.hnbg-header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--border, #cbd5e1);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
}

.hnbg-header-icon-btn:hover {
  background: var(--surface);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

/* Visibility fixes for ProfileMenu & NoticeBell inside hnbg-top-shell */
.hnbg-top-shell .ab-icon-btn {
  color: var(--text, #1e293b) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border, #cbd5e1);
  background: var(--surface-2);
  cursor: pointer;
}

.hnbg-top-shell .ab-icon-btn:hover {
  background: var(--surface);
  border-color: var(--accent-blue);
  color: var(--accent-blue) !important;
}

.hnbg-top-shell .ab-profile-chip {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  background: var(--surface-2, #f1f5f9) !important;
  color: var(--text, #1e293b) !important;
  padding: 0.28rem 0.65rem !important;
  border: 1px solid var(--border, #cbd5e1) !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.hnbg-top-shell .ab-profile-chip:hover {
  background: var(--surface, #fff) !important;
  border-color: var(--accent-blue) !important;
}

.hnbg-top-shell .ab-profile-chip .bi-person-circle {
  color: #e5252a !important;
  font-size: 0.95rem !important;
}

.hnbg-top-shell .ab-profile-chip .ab-profile-name {
  color: var(--text, #1e293b) !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

.hnbg-top-shell .ab-profile-caret {
  color: var(--text-muted) !important;
  font-size: 0.6rem !important;
}

/* Quick Employee Search inside top shell */
.hnbg-top-shell .es-search {
  width: clamp(150px, 16vw, 240px);
  margin-left: 0;
}

.hnbg-top-shell .es-field {
  background: var(--surface-2, #f1f5f9) !important;
  border: 1px solid var(--border, #cbd5e1) !important;
  height: 30px;
  border-radius: 6px;
}

.hnbg-top-shell .es-field:focus-within,
.hnbg-top-shell .es-search.open .es-field {
  background: var(--surface, #ffffff) !important;
  border-color: var(--accent-blue, #2563eb) !important;
  box-shadow: 0 0 0 2px var(--accent-blue-soft, #eff6ff);
}

.hnbg-top-shell .es-icon {
  color: var(--text-muted, #64748b) !important;
}

.hnbg-top-shell .es-input {
  color: var(--text, #1e293b) !important;
}

.hnbg-top-shell .es-input::placeholder {
  color: var(--text-muted, #94a3b8) !important;
}

.hnbg-top-shell .es-kbd {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #cbd5e1);
  color: var(--text-muted, #64748b);
  border-radius: 3px;
}

.hnbg-top-shell .es-spin {
  color: var(--accent-blue, #2563eb) !important;
}

/* Module Launcher Modal Overlay & Pinning UI */
.hnbg-launcher-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: rgba(15,23,42,0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4vh;
  animation: fadeIn 0.15s ease;
}

.hnbg-launcher-modal {
  width: 95%;
  max-width: 940px;
  max-height: 88vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.hnbg-launcher-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.hnbg-launcher-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hnbg-launcher-icon-bubble {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-blue, #2563eb);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.hnbg-launcher-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.hnbg-launcher-subtitle {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.hnbg-launcher-search-box {
  position: relative;
  flex: 0 1 340px;
}

.hnbg-launcher-search-box i {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.85rem;
}

.hnbg-launcher-search-box input {
  width: 100%;
  padding: 0.35rem 2rem 0.35rem 2rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  outline: none;
}

.hnbg-launcher-search-box input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--accent-blue-soft);
}

.hnbg-launcher-search-box .btn-clear {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem;
}

.hnbg-launcher-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 6px;
  transition: all 0.15s;
}

.hnbg-launcher-close-btn:hover {
  background: var(--surface);
  color: var(--text);
}

.hnbg-launcher-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}

.hnbg-launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.hnbg-module-card {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.15s;
}

.hnbg-module-card:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.hnbg-module-card.is-active {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue);
}

.hnbg-module-card.highlight {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

.hnbg-module-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.hnbg-module-card-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--accent-blue, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  border: 1px solid var(--border);
}

.hnbg-module-card-icon.home {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.hnbg-module-card-info {
  display: flex;
  flex-direction: column;
}

.hnbg-module-card-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
}

.hnbg-module-card-desc {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.hnbg-module-links {
  display: flex;
  flex-direction: column;
  padding: 0.4rem;
  gap: 0.1rem;
}

.hnbg-module-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px;
  padding: 0 0.2rem;
  transition: background 0.12s;
}

.hnbg-module-link-row:hover {
  background: var(--accent-blue-soft, #eff6ff);
}

.hnbg-module-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.4rem;
  border-radius: 5px;
  font-size: 0.76rem;
  color: var(--text);
  text-decoration: none;
  flex: 1;
}

.hnbg-module-link i {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.hnbg-module-link:hover {
  color: var(--accent-blue, #2563eb);
}

.hnbg-module-link.current {
  color: #e5252a;
  font-weight: 700;
}

.hnbg-module-link.current i {
  color: #e5252a;
}

.hnbg-pin-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: all 0.12s;
}

.hnbg-pin-btn:hover {
  background: #fff1f2;
  color: #e5252a;
}

.hnbg-pin-btn.pinned {
  color: #e5252a;
}

.hnbg-launcher-empty {
  padding: 3rem 1rem;
  text-align: center;
}

.hnbg-launcher-foot {
  padding: 0.6rem 1.25rem;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--text-muted);
}

.hnbg-launcher-foot kbd {
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--surface);
  color: var(--text, #1e293b) !important;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.05rem 0.25rem;
}