/* ============================================================
   HR dashboard (#hdRoot in #hrContent-dashboard)
   Markup and behaviour: static/hr_dash.js · data: GET /api/hr/overview

   The page is built from the HR section's own components, whose rules live
   in templates/index.html and are global:
     lv-hero · lv-up · lv-fig · lv-pend-* · lv-card · lv-seg · lv-btn · lv-type   (Leave)
     tox-railbox · tox-card · tox-ring · tox-count · tox-bar · tox-av             (Task Orders)
     hcx-ov · hcx-fig · hcx-mix · hcx-legend · hcx-chart · hcx-col               (Contracts)
   Those pages declare their tokens on their own panel; this panel declares
   the same set so the parts render identically here. What follows is only
   the glue (hd-*): the band's frame, a few small pieces, the records table.
   ============================================================ */

#hrContent-dashboard { --lv-stroke:#E4E6E7; --lv-ink:#070916; --lv-fg2:#4F5158; --lv-fg3:#94969E; --lv-bg:#F5F5F5; --lv-red:#FD0024;
    --tx-stroke:#E4E6E7; --tx-ink:#070916; --tx-fg2:#4F5158; --tx-fg3:#94969E; --tx-bg:#F5F5F5; --tx-red:#FD0024;
    --tx-glass:rgba(255,255,255,.66); --tx-glass-2:rgba(255,255,255,.82); --tx-late:#E5173F; --tx-soon:#F0642A; --tx-near:#E59A0B; --tx-fine:#12A37A; --tx-wait:#8B5CF6;
    font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; color:var(--lv-fg2); font-size:14px }
#hrContent-dashboard svg { display:inline-block; vertical-align:middle }
.hd { padding-bottom:48px }
.hd button { font-family:inherit }

/* summary: the queue figures under the headline */
.hd-figs { margin-top:16px }
.hd-figs .hcx-fig span { font-weight:700 }
.hd-upf { display:inline-flex; flex:none }
.hd-upf .tox-av + .tox-av { margin-left:-10px; box-shadow:0 0 0 2px #fff }
.lv-up-w small .lv-type { flex:none }

/* waiting on HR: the frame of Leave's #leavePendingBanner */

/* rail cards: why the card is on the watch list */
.hd-why { font-size:11.5px; font-weight:800; color:var(--tx-fg3); white-space:nowrap }
.hd-why.late { color:var(--tx-late) } .hd-why.soon { color:var(--tx-soon) } .hd-why.near { color:var(--tx-near) } .hd-why.wait { color:var(--tx-wait) }
#hdBurn .tox-rail-r .lv-seg button { padding:5px 10px }

/* split panels */
#hdShape .hcx-chart { min-height:200px }
.hd-keys { display:inline-flex; gap:4px }
.hd-keys .tox-sum-i { margin-left:8px }
.hd-shape { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:14px; padding-top:12px; border-top:1px solid #F3F4F5 }
.hcx-ov-l .hd-shape { border-top:0; padding-top:0 }
.hd-shape-k { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--tx-fg3); margin:0 4px 0 8px }
.hd-shape-k:first-child { margin-left:0 }
.hd-shape-k b { color:var(--tx-ink); letter-spacing:0 }
.hd-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; background:var(--tx-bg); font-size:12px; font-weight:700; color:var(--tx-fg2); white-space:nowrap }
.hd-chip b { color:var(--tx-ink); font-weight:900 }
.hd-cur { margin:4px 0 0; font-size:13px; font-weight:700; color:var(--tx-fg2) }

/* records */
.hd-rec { overflow-x:auto; padding:0 20px 14px; border-top:1px solid var(--lv-stroke) }
.hd-tbl { width:100%; border-collapse:collapse; font-size:13px }
.hd-tbl th { padding:12px 6px 10px; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--lv-fg3); text-align:center; white-space:nowrap; border-bottom:1px solid var(--lv-stroke) }
.hd-tbl th svg, .hd-tbl th i { margin-right:3px; opacity:.7 }
.hd-tbl th:first-child { text-align:left }
.hd-tbl td { padding:8px 6px; text-align:center; border-bottom:1px solid #F3F4F5 }
.hd-tbl td:first-child { text-align:left }
.hd-tbl tr:last-child td { border-bottom:0 }
.hd-tbl tr:hover td { background:#FAFAFB }
.hd-nm { display:inline-flex; align-items:center; gap:10px; cursor:pointer }
.hd-nm b { font-weight:800; color:var(--lv-ink) }
.hd-nm:hover b { text-decoration:underline; text-underline-offset:3px }
.hd-yes { color:var(--tx-fine); font-size:12px }
.hd-no { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#FDE8EC; color:#B0213F; font-size:10px; cursor:pointer }
.hd-no:hover { background:#FBD3DB }
.hd-na { font-size:10.5px; font-weight:800; color:#C4C6CC }
.hd-rate { font-size:12px; font-weight:800; white-space:nowrap }
.hd-rate.ok { color:var(--tx-fine) } .hd-rate.mute { color:#B4B7BE } .hd-rate.warn { color:#B45309; cursor:pointer }
.hd-pct { font-weight:900 }
.hd-pct.full { color:var(--tx-fine) } .hd-pct.mid { color:#B45309 } .hd-pct.low { color:var(--tx-late) }
.hd-rm { text-align:right !important; white-space:nowrap }
.hd-last { font-size:11.5px; font-weight:700; color:var(--lv-fg3); margin-left:2px }

.hd-skel { border-radius:18px; background:linear-gradient(90deg,#F2F3F4 0,#F8F9FA 40%,#F2F3F4 80%) 0 0/200% 100%; animation:hdShim 1.4s linear infinite }
@keyframes hdShim { to { background-position:-200% 0 } }
@media (prefers-reduced-motion:reduce) { .hd-skel { animation:none } }

/* ============================================================
   Glass: HR Dashboard, Contracts and Task Orders sit on a soft wash, so
   their frosted panels (--tx-glass, blur) have something to show through
   instead of reading as flat white on grey. The wash is Home's light blue
   (#DCE9FC), one colour, still. Scoped with :has() to those three panels;
   the other HR pages keep the plain stage.
   ============================================================ */
#view-hr:has(#hrContent-dashboard:not(.hidden)),
#view-hr:has(#hrContent-task-orders:not(.hidden)),
#view-hr:has(#hrContent-team-contracts:not(.hidden)) { background:#F3F4F5 }
#view-hr:has(#hrContent-dashboard:not(.hidden))::before,
#view-hr:has(#hrContent-task-orders:not(.hidden))::before,
#view-hr:has(#hrContent-team-contracts:not(.hidden))::before {
    content:""; position:fixed; z-index:0; inset:0 0 0 var(--stage-l,0); pointer-events:none;
    background:
        /* toned down twice on 2026-09-21 ("way too blue up there", then "still a bit
           too blue at the top"): a neutral base and a barely-there wash, weakest at the top */
        radial-gradient(820px 480px at 10% 0%, rgba(220,232,250,.16) 0%, rgba(232,239,250,.07) 42%, rgba(243,244,245,0) 70%),
        radial-gradient(760px 520px at 92% 38%, rgba(222,233,251,.16) 0%, rgba(232,239,251,.07) 45%, rgba(243,244,245,0) 75%),
        radial-gradient(820px 520px at 40% 100%, rgba(224,234,251,.14) 0%, rgba(243,244,245,0) 70%) }
#view-hr:has(#hrContent-dashboard:not(.hidden)) > *,
#view-hr:has(#hrContent-task-orders:not(.hidden)) > *,
#view-hr:has(#hrContent-team-contracts:not(.hidden)) > * { position:relative; z-index:1 }

/* the panels: frosted, a white rim on top, a faint hairline */
#hrContent-dashboard, #hrContent-task-orders, #hrContent-team-contracts {
    --tx-glass:rgba(255,255,255,.58); --tx-glass-2:rgba(255,255,255,.72);
    --hd-glass-sh:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(7,9,22,.04), 0 14px 34px -24px rgba(31,64,122,.28) }
:is(#hrContent-dashboard, #hrContent-task-orders, #hrContent-team-contracts) :is(.tox-railbox, .hcx-ov, .tox-card-box) {
    border-color:rgba(255,255,255,.8); box-shadow:var(--hd-glass-sh);
    -webkit-backdrop-filter:blur(18px) saturate(1.35); backdrop-filter:blur(18px) saturate(1.35) }
:is(#hrContent-task-orders, #hrContent-team-contracts) .tox-card, #hrContent-dashboard .tox-card { border-color:rgba(255,255,255,.85) }
:is(#hrContent-task-orders, #hrContent-team-contracts) .tox-card:hover, #hrContent-dashboard .tox-card:hover { background:rgba(255,255,255,.95) }
/* the dashboard's Leave parts are solid white on the Leave page; frosted here */
#hrContent-dashboard :is(.lv-hero, .lv-card) {
    background:rgba(255,255,255,.62); border-color:rgba(255,255,255,.8); box-shadow:var(--hd-glass-sh);
    -webkit-backdrop-filter:blur(18px) saturate(1.35); backdrop-filter:blur(18px) saturate(1.35) }
#hrContent-dashboard .lv-hero > section + section { border-left-color:rgba(7,9,22,.06) }
#hrContent-dashboard .lv-hero-figs { background:rgba(255,255,255,.35) }
#hrContent-dashboard .lv-hero-figs .lv-fig + .lv-fig { border-top-color:rgba(7,9,22,.06) }
#hrContent-dashboard .lv-up-d { background:rgba(255,255,255,.85) }
#hrContent-dashboard .hd-rec { border-top-color:rgba(7,9,22,.07) }
#hrContent-dashboard .hd-tbl th { border-bottom-color:rgba(7,9,22,.07) }
#hrContent-dashboard .hd-tbl td { border-bottom-color:rgba(7,9,22,.045) }
#hrContent-dashboard .hd-tbl tr:hover td { background:rgba(255,255,255,.55) }