/* Minimal site styles — replace with Tailwind/Bootstrap/your design system later. */

* { box-sizing: border-box; }

html {
    /* Always reserve the vertical scrollbar's width so short pages (a tab's
       brief "Loading…" state) and tall pages (the full table) don't toggle the
       scrollbar — which would shift the .content column sideways and read as a
       jitter every time you switch tabs. overflow-y:scroll is the bulletproof
       fallback for browsers where scrollbar-gutter isn't honoured. */
    scrollbar-gutter: stable;
    overflow-y: scroll;
}

html, body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1a1a1a;
    background: #f7f7f8;
}

a { color: #2563eb; }
a.link-muted { color: #555; text-decoration: none; }
a.link-muted:hover { text-decoration: underline; }
/* On the dark topbar the muted gray is illegible — use the nav-link gray. */
.topbar a.link-muted { color: #d1d5db; }
.topbar a.link-muted:hover { color: white; }

/* Theme toggle in the top bar. */
.theme-toggle {
    background: transparent; border: none; cursor: pointer;
    color: #d1d5db; font-size: 1.05rem; line-height: 1; padding: .15rem .4rem; border-radius: 6px;
}
.theme-toggle:hover { color: white; background: rgba(255, 255, 255, .1); }

.page { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .75rem 1.5rem;
    background: #1f2937;
    color: white;
}
.topbar .brand { color: white; font-weight: 700; text-decoration: none; font-size: 1.1rem; }
.topbar .nav-links { display: flex; gap: 1rem; flex: 1; }
.topbar .nav-links a { color: #d1d5db; text-decoration: none; padding: .25rem .5rem; border-radius: 4px; }
.topbar .nav-links a:hover, .topbar .nav-links a.active { background: #374151; color: white; }

/* "Reports" dropdown — hover/focus on desktop, inline links on mobile. */
.topbar .nav-dropdown { position: relative; }
.topbar .nav-drop-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #d1d5db;
    padding: .25rem .5rem;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
}
.topbar .nav-dropdown.open .nav-drop-btn,
.topbar .nav-dropdown:has(.nav-drop-menu a.active) .nav-drop-btn { background: #374151; color: white; }
/* Backdrop that closes the menu on an outside click/tap (below the menu). */
.topbar .nav-drop-backdrop { position: fixed; inset: 0; z-index: 39; background: transparent; }
.topbar .nav-drop-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 12rem;
    flex-direction: column;
    gap: .1rem;
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 0 0 6px 6px;
    padding: .3rem;
    z-index: 40; /* below .modal-backdrop (50) */
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.topbar .nav-dropdown.open .nav-drop-menu { display: flex; }
.topbar .nav-drop-menu a { color: #d1d5db; text-decoration: none; padding: .45rem .75rem; border-radius: 4px; white-space: nowrap; }
.topbar .nav-drop-menu a:hover, .topbar .nav-drop-menu a.active { background: #374151; color: white; }
.topbar-right { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: #d1d5db; }
.topbar-right .user { color: white; font-weight: 500; }
.topbar-right .badge {
    background: #2563eb;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .8rem;
    color: white;
}
/* Per-restaurant logo lives inside the dashboard header row, just before the
   Refresh button. Same rounded-rectangle shape as the dash-stat cards. */
.dash-stat.dash-logo {
    padding: .3rem .6rem;
    min-width: 0;
    align-items: center;
    justify-content: center;
    background: #fff;          /* opaque-JPEG logo → clean white badge */
    border-radius: 10px;       /* curved edges; white fills to the corners */
    overflow: hidden;
}
.dash-stat.dash-logo img {
    height: 56px;
    max-width: 200px;
    object-fit: contain;
    display: block;
}

/* Settings page */
.logo-grid {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-top: .75rem;
}
.logo-current, .logo-upload {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.logo-preview {
    max-width: 200px;
    max-height: 120px;
    object-fit: contain;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: .5rem;
}
.logo-placeholder {
    background: #f3f4f6;
    border: 1px dashed #d1d5db;
    color: #6b7280;
    padding: 1.5rem;
    text-align: center;
    border-radius: 4px;
    font-size: .9rem;
}

.content {
    flex: 1;
    padding: 1.5rem 2rem;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* HR pages (leave planner, rota) need the full viewport — the timeline and the
   week grid are wide. Applied by MainLayout on /hr routes. */
.content.content-wide {
    max-width: none;
    padding: 1.5rem clamp(1rem, 2vw, 2rem);
}

.filter-bar {
    display: flex;
    gap: .75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 1rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}
.filter-bar label { display: flex; flex-direction: column; font-size: .85rem; color: #555; gap: .25rem; }
.filter-bar label.grow { flex: 1; }
.filter-bar input, .filter-bar select {
    padding: .4rem .5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: .95rem;
    min-width: 160px;
}

.btn-primary, .btn-secondary, button {
    padding: .45rem .9rem;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: .9rem;
    text-decoration: none;              /* anchors styled as buttons */
    display: inline-block;
}
.btn-primary { background: #2563eb; color: white; }
.btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.btn-secondary { background: white; border-color: #d1d5db; color: #1a1a1a; }
.btn-secondary:hover { background: #f3f4f6; }
button:disabled { opacity: .55; cursor: default; }

.grid {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid #e5e7eb;
}
/* Tables in cards get a horizontal scrollbar on narrow screens rather than
   blowing out the layout. The card itself stays the page width. */
.card > table.grid {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
.card > table.grid > thead,
.card > table.grid > tbody {
    display: table;
    width: 100%;
}
.grid th, .grid td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid #f3f4f6; font-size: .9rem; }
.grid thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f9fafb;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6b7280;
    white-space: nowrap;
    border-bottom: 1px solid #e5e7eb;
}
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Employees list: the wrapper owns BOTH scrollbars so the sticky header pins
   and the horizontal bar stays in view. Serial + Name stay pinned on the left
   while scrolling through "Show all fields". */
.emp-scroll { overflow: auto; max-height: calc(100vh - 240px); }
.emp-scroll th:nth-child(1), .emp-scroll td:nth-child(1) {
    position: sticky; left: 0; z-index: 2; background: #fff;
    width: 84px; min-width: 84px; max-width: 84px; overflow: hidden; text-overflow: ellipsis;
}
.emp-scroll th:nth-child(2), .emp-scroll td:nth-child(2) {
    position: sticky; left: 84px; z-index: 2; background: #fff;
    border-right: 1px solid #e5e7eb;
}
.emp-scroll thead th:nth-child(1), .emp-scroll thead th:nth-child(2) { z-index: 4; background: #f9fafb; }
.emp-scroll thead th { z-index: 3; }
:root[data-theme="dark"] .content-wide .emp-scroll th:nth-child(1),
:root[data-theme="dark"] .content-wide .emp-scroll td:nth-child(1),
:root[data-theme="dark"] .content-wide .emp-scroll th:nth-child(2),
:root[data-theme="dark"] .content-wide .emp-scroll td:nth-child(2) { background: #0d1117; border-right-color: #21262d; }
:root[data-theme="dark"] .content-wide .emp-scroll thead th:nth-child(1),
:root[data-theme="dark"] .content-wide .emp-scroll thead th:nth-child(2) { background: #161b22; }
/* Empty cell in the employees "all fields" view — highlights HR data gaps. */
.grid td.miss { background: #fff7ed; box-shadow: inset 0 0 0 1px #fde7c8; }
.miss-key { background: #fff7ed; box-shadow: inset 0 0 0 1px #fde7c8; padding: 0 .3rem; border-radius: 3px; }
:root[data-theme="dark"] .content-wide .grid td.miss { background: #2a1c0c; box-shadow: inset 0 0 0 1px #4a3312; }
:root[data-theme="dark"] .content-wide .miss-key { background: #2a1c0c; box-shadow: inset 0 0 0 1px #4a3312; }
/* Atomic values that must never break mid-token — dates otherwise wrap at
   their hyphens (2024-10-​31), phone/serial numbers at any soft break. */
.grid td.date, .grid th.date,
.grid td.nowrap, .grid th.nowrap { white-space: nowrap; }
.grid td.date { font-variant-numeric: tabular-nums; }
/* Row hover aids scanning across a dense row of columns. */
.grid tbody tr { transition: background-color 120ms ease; }
.grid tbody tr:hover { background: #f8fafc; }
@media (prefers-reduced-motion: reduce) { .grid tbody tr { transition: none; } }
.grid td.actions button { padding: .15rem .45rem; margin-right: .15rem; font-size: .8rem; }
.grid td.actions button.danger { color: #b91c1c; }

/* Compact editable pay-run grid so all columns fit without horizontal scroll. */
.payrun-grid th, .payrun-grid td { padding: .35rem .4rem; }
.payrun-grid td.emp { min-width: 10.5rem; }
.payrun-grid input[type=number] { width: 4.5rem; text-align: right; padding: .3rem .35rem; }
.payrun-grid input.leave { width: 3rem; }
/* Drop the number spinners — they eat width and aren't needed here. */
.payrun-grid input[type=number]::-webkit-outer-spin-button,
.payrun-grid input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.payrun-grid input[type=number] { -moz-appearance: textfield; }

.error {
    background: #fef2f2;
    color: #991b1b;
    padding: .75rem 1rem;
    border: 1px solid #fecaca;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.notice { background: white; padding: 1.5rem; border: 1px solid #e5e7eb; border-radius: 6px; }
.muted { color: #6b7280; font-size: .85rem; }

.restaurant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.restaurant-card {
    display: block;
    padding: 1.25rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    text-decoration: none;
    color: #1a1a1a;
}
.restaurant-card:hover { border-color: #2563eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.restaurant-name { font-weight: 600; font-size: 1.05rem; }
.restaurant-id { color: #6b7280; font-size: .85rem; margin-top: .25rem; }

/* Modal */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 50;
}
.modal {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    width: min(90vw, 420px);
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
/* Wider variant for multi-field forms (e.g. contract edit). */
.modal.wide {
    width: min(92vw, 680px);
    max-height: 90vh;
    overflow-y: auto;
}
/* Extra-large variant for chart popups. */
.modal.xl {
    width: min(96vw, 1150px);
    max-height: 92vh;
    overflow-y: auto;
}
.modal h2 { margin: 0 0 1rem 0; font-size: 1.15rem; }
.modal label { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .9rem; font-size: .85rem; color: #555; }
.modal input, .modal select { padding: .45rem; border: 1px solid #d1d5db; border-radius: 4px; font-size: .95rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }

/* Drag & drop upload ---------- */
.dropzone {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 1.5rem 1rem;
    text-align: center;
    background: #fafafa;
    transition: border-color .15s ease, background .15s ease;
}
.dropzone.dragover { border-color: #3b82f6; background: #eff6ff; }
/* The real file input covers the whole zone, invisible, so a dropped file
   lands on it and fires OnChange — no JavaScript needed. */
.dropzone :is(input[type=file], .form-control) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.dropzone-hint { pointer-events: none; display: flex; flex-direction: column; gap: .2rem; color: #64748b; font-size: .9rem; }
.dropzone-hint strong { color: #334155; }

/* Employee avatar (circular) ---------- */
/* --hr-avatar-scale is a per-browser display preference set from Settings
   (persisted in localStorage, applied in _Host.cshtml). Defaults to 1. */
:root { --hr-avatar-scale: 1; }
.hr-avatar {
    border-radius: 50%;
    object-fit: cover;
    background: #e5e7eb;
    flex-shrink: 0;
    vertical-align: middle;
    display: inline-block;
}
.hr-avatar-sm { width: calc(26px * var(--hr-avatar-scale)); height: calc(26px * var(--hr-avatar-scale)); }
.hr-avatar-md { width: calc(34px * var(--hr-avatar-scale)); height: calc(34px * var(--hr-avatar-scale)); }
.hr-avatar-lg { width: calc(84px * var(--hr-avatar-scale)); height: calc(84px * var(--hr-avatar-scale)); }
/* Sizing-only demo chips used by the Settings photo-size preview. */
.avatar-demo {
    display: inline-flex; align-items: center; justify-content: center;
    background: #cbd5e1; color: #334155; font-size: .7rem; font-weight: 600;
}
.emp-name-cell { display: inline-flex; align-items: center; gap: .5rem; }
.emp-photo-row { display: flex; align-items: center; gap: 1rem; margin-bottom: .75rem; }

/* Rota (staff scheduling) grid ---------- */
.rota-toolbar { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.75rem; }
.rota-seg { display:inline-flex; background:#eef1f6; border:1px solid #e3e7ef; border-radius:8px; padding:2px; }
.rota-seg button { border:0; background:transparent; color:#55617a; font:inherit; font-size:.85rem;
    font-weight:600; padding:.35rem .8rem; border-radius:6px; cursor:pointer; }
.rota-seg button.on { background:#fff; color:#1e293b; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.rota-weeknav { display:inline-flex; align-items:center; gap:.35rem; }
.rota-weeklbl { font-weight:650; font-size:.9rem; min-width:200px; text-align:center; font-variant-numeric:tabular-nums; }
.rota-status { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.2rem .5rem; border-radius:5px; }
.rota-status.draft { background:#eef1f6; color:#7c879b; }
.rota-status.published { background:#e7f6ec; color:#1b7a44; }
.rota-status.provisional { background:#fbf1dc; color:#a9741a; }

.rota-scroll { overflow-x:auto; border:1px solid #e3e7ef; border-radius:10px; }
.rota-grid { display:grid;
    grid-template-columns:190px repeat(7, minmax(112px,1fr)) 62px 62px 62px;
    min-width:1050px; }
.rota-grid > div { border-bottom:1px solid #eef1f6; border-right:1px solid #eef1f6; }
.rota-colhead { position:sticky; top:0; z-index:3; background:#f1f3f8; padding:.5rem .4rem;
    font-size:.72rem; font-weight:700; text-align:center; color:#1e293b; border-bottom:1px solid #cfd6e4; }
.rota-colhead .date { color:#8a94a8; font-weight:600; font-size:.68rem; font-variant-numeric:tabular-nums; }
.rota-colhead.bal { font-size:.62rem; line-height:1.1; color:#55617a; }
.rota-stub { position:sticky; left:0; z-index:2; background:#fff; }
.rota-colhead.rota-stub { z-index:4; text-align:left; padding-left:.7rem; }

.rota-section { grid-column:1 / -1; position:sticky; left:0; padding:.35rem .7rem;
    background:linear-gradient(90deg,#eef0fb,#fff); border-bottom:1px solid #cfd6e4;
    font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#55617a;
    display:flex; align-items:center; gap:.5rem; }
.rota-section .rail { width:5px; height:12px; border-radius:3px; background:#4f46e5; }
.rota-section .n { font-weight:600; color:#8a94a8; letter-spacing:0; text-transform:none; }
.rota-section.collapsible { cursor:pointer; user-select:none; }
.rota-section.collapsible:hover { filter:brightness(.97); }
.rota-section .chev { width:1.1rem; display:inline-block; text-align:center; font-size:.95rem; line-height:1; color:#8a94a8; }
.rota-section.collapsed { opacity:.82; }
:root[data-theme="dark"] .rota-section.collapsible:hover { filter:brightness(1.25); }

.rota-emp { display:flex; align-items:center; gap:.5rem; padding:.15rem .5rem; min-height:34px; }
.rota-emp > div { min-width:0; }   /* let the name/role ellipsize instead of wrapping */
.rota-emp .nm { font-size:.82rem; font-weight:600; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rota-emp .rl { font-size:.68rem; color:#8a94a8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.rota-cell { padding:.2rem .25rem; min-height:34px; display:flex; flex-direction:column; gap:2px; justify-content:center; }
.rota-cell.today { background:#f7f8ff; }
/* Current-day column outline: one absolute overlay measured by rota-interop.js
   (per-cell borders would break at the full-width section bands). */
.rota-grid { position:relative; }
/* Must out-rank ".rota-grid > div", which paints its own 1px border-right/bottom. */
.rota-grid > div.rota-today-overlay { position:absolute; top:0; pointer-events:none; z-index:3;
    box-sizing:border-box; background:none;
    border:2px solid #111827; border-bottom:none; }
/* Default chip = leave / off / lieu / sick: a LIGHT pastel of the leave-plan
   hue with DARK text (theme-independent, reads on light or dark grid) — signals
   "managed on the Leave tab, not editable here". */
.rota-shift { border-radius:6px; padding:.12rem .4rem; border:1px solid;
    background:color-mix(in srgb, var(--c,#7c879b) 26%, white);
    border-color:color-mix(in srgb, var(--c,#7c879b) 46%, white);
    color:#1f2937; font-size:.72rem; font-weight:700; line-height:1.15; }
.rota-shift .badges { display:flex; gap:3px; margin-top:1px; }
.rota-shift .bdg { font-size:.6rem; font-weight:650; padding:0 .25rem; border-radius:3px;
    background:rgba(0,0,0,.10); color:#1f2937; }
.rota-shift.off { font-style:italic; font-weight:600; }
/* Work shift = SOLID hue + white text — signals "editable". A small drop
   shadow lifts the worked shifts off the grid so they read as distinct from
   the flat leave/off chips at a glance. */
.rota-shift.work { background:var(--c,#7c879b); border-color:var(--c,#7c879b); color:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.22); }
:root[data-theme="dark"] .rota-shift.work { box-shadow:0 1px 3px rgba(0,0,0,.5); }
.rota-shift.work .bdg { background:rgba(255,255,255,.24); color:#fff; }
/* Configured hours as a 2nd line under the code (splits show two windows). */
.rota-shift-code { display:block; }
.rota-shift-time { display:block; margin-top:1px; font-size:.62rem; font-weight:600;
    opacity:.8; line-height:1.05; letter-spacing:.01em; }

/* Dark theme: a light pastel would GLOW and all wash together, so leave/off/
   lieu/sick chips instead recede — a muted dark tint of the hue with lightened
   hue text — still distinct from each other by colour, and clearly quieter than
   the solid white-text work shifts. (Light theme keeps the pastel above.) */
:root[data-theme="dark"] .rota-shift:not(.work) {
    background: color-mix(in srgb, var(--c,#7c879b) 20%, #0d1117);
    border-color: color-mix(in srgb, var(--c,#7c879b) 42%, #0d1117);
    color: color-mix(in srgb, var(--c,#7c879b) 62%, white);
}
:root[data-theme="dark"] .rota-shift:not(.work) .bdg {
    background: rgba(255,255,255,.10);
    color: color-mix(in srgb, var(--c,#7c879b) 62%, white);
}
.rota-leave { border-radius:6px; padding:.12rem .4rem; font-size:.72rem; font-weight:700;
    border:1px dashed; background:color-mix(in srgb, var(--c,#c0392b) 10%, transparent);
    border-color:color-mix(in srgb, var(--c,#c0392b) 45%, transparent); color:var(--c,#c0392b); }
.rota-leave.pending { opacity:.55; }

.rota-bal { text-align:center; font-variant-numeric:tabular-nums; padding:.15rem 0; display:flex;
    flex-direction:column; justify-content:center; }
.rota-bal .v { font-size:.9rem; font-weight:700; }
.rota-bal .v.pos { color:#1b7a44; } .rota-bal .v.neg { color:#c0392b; }
.rota-bal.drift { background:#fdecec; }
.rota-bal.drift::after { content:'⚠'; font-size:.6rem; color:#c0392b; }

.rota-cov { display:grid; grid-template-columns:190px repeat(7, minmax(112px,1fr)) 186px;
    min-width:1050px; background:#f1f3f8; border-top:1px solid #cfd6e4; }
.rota-cov > div { border-right:1px solid #eef1f6; padding:.4rem .3rem; text-align:center; font-size:.75rem; }
.rota-cov .lab { position:sticky; left:0; background:#f1f3f8; text-align:left; padding-left:.7rem;
    font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.68rem; color:#55617a; }
.rota-cov .num { font-weight:700; font-variant-numeric:tabular-nums; }
.rota-cov .num.short { color:#c0392b; }

.rota-empty { text-align:center; padding:2.5rem 1rem; color:#8a94a8; }

/* Multi-week horizontal view: a band above each week's columns, and a heavier
   left border marking each week boundary. */
.rota-band { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
    padding:.35rem .6rem; background:#e8ebf4; border-bottom:1px solid #cfd6e4;
    font-size:.78rem; white-space:nowrap; overflow:hidden; }
.rota-band strong { font-size:.8rem; }
.rota-band.rota-stub { z-index:4; }
.rota-colhead.wkstart, .rota-cell.wkstart, .rota-cov > div.wkstart { border-left:2px solid #cfd6e4; }

/* Authoring: the shift palette and paintable cells. Chips reuse .rota-shift
   colors; .pal makes them buttons, .pal-sel marks the active brush. */
.rota-palette { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
    background:#fff; border:1px solid #e3e7ef; border-radius:10px; padding:.5rem .7rem; margin-bottom:.75rem; }
.rota-shift.pal { cursor:pointer; font:inherit; font-size:.72rem; font-weight:700; }
.rota-shift.pal-sel { outline:2px solid var(--c, #4f46e5); outline-offset:1px; }
.rota-cell.paintable { cursor:crosshair; }
.rota-cell.paintable:hover { box-shadow: inset 0 0 0 2px #6366f1; }
/* Drag-to-move (Shift+drag = copy): only editable chips get the grab cursor. */
.rota-shift[draggable="true"] { cursor:grab; }
.rota-shift[draggable="true"]:active { cursor:grabbing; }
/* Pre-publish concerns list. */
.concern-list { margin:.4rem 0 .8rem; padding-left:1.1rem; max-height:46vh; overflow-y:auto;
    display:flex; flex-direction:column; gap:.25rem; }
.concern-list li { color:#8a5a00; font-size:.9rem; line-height:1.35; }
:root[data-theme="dark"] .concern-list li { color:#e3b341; }
@media (prefers-color-scheme: dark) {
  .rota-palette { background:#0d1117; border-color:#21262d; }
}
:root[data-theme="dark"] .rota-palette { background:#0d1117; border-color:#21262d; }
:root[data-theme="light"] .rota-palette { background:#fff; border-color:#e3e7ef; }

.rota-recon { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1rem; }
.chip-stat { background:#f1f3f8; border:1px solid #e3e7ef; border-radius:8px; padding:.35rem .7rem; font-size:.8rem; color:#55617a; }
.chip-stat b { color:#1e293b; font-size:.95rem; }
.chip-stat.ok { background:#e7f6ec; border-color:#9fd9b3; color:#1b7a44; }
.chip-stat.ok b { color:#1b7a44; }
.chip-stat.warn { background:#fbf1dc; border-color:#eccb8c; color:#a9741a; }
.chip-stat.warn b { color:#a9741a; }
:root[data-theme="dark"] {
  .chip-stat { background:#161b22; border-color:#21262d; color:#8b949e; }
  .chip-stat b { color:#d5dbe1; }
}

:root[data-theme="dark"] {
  .rota-seg { background:#161b22; border-color:#21262d; }
  .rota-seg button { color:#8b949e; }
  .rota-seg button.on { background:#0d1117; color:#d5dbe1; }
  .rota-scroll, .rota-grid > div { border-color:#21262d; }
  .rota-colhead { background:#161b22; color:#d5dbe1; border-bottom-color:#30363d; }
  .rota-stub { background:#0d1117; }
  .rota-section { background:linear-gradient(90deg,#0f1a2e,#0d1117); border-bottom-color:#30363d; color:#8b949e; }
  .rota-cell.today { background:#11161d; }
  .rota-grid > div.rota-today-overlay { border-color:#e6edf3; border-bottom:none; }
  .rota-cov, .rota-cov .lab { background:#161b22; }
  .rota-bal.drift { background:#361719; }
  .rota-band { background:#161b22; border-bottom-color:#30363d; }
  .rota-colhead.wkstart, .rota-cell.wkstart, .rota-cov > div.wkstart { border-left-color:#30363d; }
}

/* HR module dark theme (leave planner + rota) — applied when data-theme="dark"
   is stamped on <html> (by the top-bar toggle, or the OS preference when the
   user hasn't chosen). Scoped to .content-wide so the light sales-analysis
   pages are untouched. Palette matches the dark top bar (slate-navy). */
:root[data-theme="dark"] {
    /* Page + structural surfaces — themed GLOBALLY so every module (Reports,
       Settings, Users, HR) goes dark, not just /hr. */
    body { background: #07090d; }
    .content { background: #07090d; color: #c9d1d9; }
    h1, h2, h3, h4 { color: #e6edf3; }
    .muted { color: #8b949e; }
    .content a:not(.btn-primary):not(.btn-secondary):not(.tab):not(.brand) { color: #539bf5; }
    code { background: #161b22; color: #cbd5e1; }

    /* cards, tables, filter bars */
    .card { background: #0d1117; border-color: #21262d; color: #c9d1d9; }
    .grid { background: #0d1117; border-color: #21262d; color: #c9d1d9; }
    .grid th { color: #8b949e; }
    /* the sticky thead paints its own light background — must be re-darkened */
    .grid thead th { background: #161b22; color: #8b949e; border-bottom-color: #30363d; }
    .grid th, .grid td { border-bottom-color: #21262d; }
    .grid tbody tr:hover { background: #1c2129; }
    .filter-bar { background: #0d1117; border-color: #21262d; }
    .filter-bar label, label { color: #8b949e; }

    /* form controls */
    input, select, textarea, .filter-bar select { background: #161b22; color: #d5dbe1; border-color: #30363d; }
    input::placeholder { color: #6e7681; }

    /* sub-nav tabs */
    .hr-navbar, .tabs { border-bottom-color: #30363d; }
    .tabs .tab { color: #8b949e; }
    .tabs .tab:hover { background: #1c2129; }
    .tabs .tab.active {
        background: #07090d; border-color: #30363d; border-bottom-color: #07090d; color: #e6edf3;
    }

    /* buttons (secondary is a light chip in light mode) */
    .btn-secondary { background: #161b22; border-color: #30363d; color: #d5dbe1; }
    .btn-secondary:hover { background: #262c33; }

    /* messages */
    .error { background: #331519; border-color: #7a3236; color: #f0a3a3; }
    .success { background: #12291c; border-color: #2f6b47; color: #8fe0ab; }

    /* dashboard / reports / settings surfaces */
    .dash-stat, .attention-card, .dash-logo, .salary-dept-chart { background: #0d1117; border-color: #21262d; color: #c9d1d9; }
    .dash-stat .k, .attention-card .k { color: #8b949e; }
    .logo-preview, .logo-placeholder { background: #161b22; border-color: #30363d; color: #8b949e; }
    .salary-dept-table tfoot td, .yday-table tfoot td, .payslip-table tfoot td { border-top-color: #30363d; }
    .payslip-table th, .payslip th { color: #8b949e; border-bottom-color: #21262d; }

    /* modals + the Reports dropdown menu */
    .modal { background: #0d1117; color: #c9d1d9; border: 1px solid #21262d; }
    .modal-backdrop { background: rgba(0,0,0,.6); }

    /* leave planner surfaces */
    .lv-name { background: #0d1117; color: #c9d1d9; border-color: #21262d; }
    .lv-cell { background: #0d1117; }
    .lv-row.lv-head .lv-cell, .lv-row.lv-head .lv-name { background: #161b22; }
    .lv-legend { color: #8b949e; }
    .lv-table, .lv-row { border-color: #21262d; }
    .lv-daycell { color: #8b949e; border-color: #21262d; }
    .lv-daycell.wknd, .lv-cell.wknd { background: #10151c; }
}

/* Leave timeline calendar ---------- */
.lv-legend { display: flex; flex-wrap: wrap; gap: .8rem; padding: .25rem .25rem .75rem; font-size: .8rem; color: #4b5563; }
.lv-legend-item { display: inline-flex; align-items: center; gap: .3rem; }
.lv-dot { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }
.lv-dot-pending { background: repeating-linear-gradient(45deg, #9ca3af, #9ca3af 2px, #e5e7eb 2px, #e5e7eb 4px); }
.lv-chip { color: white; padding: .1rem .45rem; border-radius: 4px; font-size: .75rem; white-space: nowrap; }

/* Recently-rejected rows linger in the approval queue, dimmed, with a red stage. */
.lv-row-rejected td { opacity: .6; }
.lv-stage-rejected { color: #dc2626; font-weight: 600; opacity: 1; }

.lv-scroll { overflow-x: auto; }
.lv-table { --lv-name-w: 240px; --lv-day-w: 26px; min-width: calc(var(--lv-name-w) + var(--lv-days) * var(--lv-day-w)); }
.lv-row { display: grid; grid-template-columns: var(--lv-name-w) 1fr; }
.lv-row:nth-child(even):not(.lv-head) .lv-cell { background: #fcfcfd; }
.lv-name {
    position: sticky; left: 0; z-index: 3;
    background: white;
    padding: .3rem .5rem;
    font-size: .8rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #f1f5f9;
    display: flex; align-items: center;
}
.lv-days { display: grid; grid-template-columns: repeat(var(--lv-days), var(--lv-day-w)); position: relative; }
.lv-days > * { grid-row: 1; }
.lv-month {
    background: #1f2937; color: white;
    font-size: .75rem; font-weight: 600;
    padding: .25rem .5rem;
    white-space: nowrap; overflow: hidden;
    border-right: 1px solid #374151;
}
.lv-daycell {
    text-align: center;
    font-size: .7rem; color: #4b5563;
    padding: .15rem 0 .25rem;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #e5e7eb;
    display: flex; flex-direction: column; align-items: center; line-height: 1.15;
}
.lv-dow { color: #9ca3af; font-size: .62rem; text-transform: uppercase; }
.lv-name { justify-content: flex-start; gap: .5rem; }   /* breathing room after the avatar */
.lv-empname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Annual-leave remaining badge next to the employee name. */
.lv-bal {
    flex-shrink: 0;
    margin-left: .4rem;
    font-size: .68rem; font-weight: 700;
    color: #1d4ed8; background: #eff6ff;
    border-radius: 10px; padding: .02rem .4rem;
}
/* Lieu-day balance chip: orange, sits next to the blue annual chip. */
.lv-bal-ld { color: #c2540a; background: #fff3e8; margin-left: .25rem; }
.lv-cell {
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    min-height: 30px;
}
.lv-daycell.wknd, .lv-cell.wknd { background: #f1f5f9; }
/* Today column: black side rails, like the rota's current-day outline — no
   background fill (rails alone mark the day). Inset shadows so the 2px lines
   don't shift the grid layout. */
.lv-cell.today { box-shadow: inset 2px 0 0 #111827, inset -2px 0 0 #111827; }
.lv-daycell.today { box-shadow: inset 2px 0 0 #111827, inset -2px 0 0 #111827, inset 0 2px 0 #111827; }
.lv-bar {
    z-index: 2;
    margin: 4px 1px;
    border-radius: 4px;
    color: white;
    font-size: .7rem; font-weight: 600;
    padding: .12rem .35rem;
    white-space: nowrap; overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.lv-bar.pending { opacity: .55; outline: 2px dashed rgba(0,0,0,.35); outline-offset: -2px; }
.lv-bar:hover { filter: brightness(1.08); }
.lv-timeline { list-style: none; padding: 0; margin: .5rem 0; font-size: .85rem; color: #4b5563; }
.lv-timeline li { padding: .15rem 0; }
.lv-timeline li.danger { color: #b91c1c; }
.lv-attach { margin: .5rem 0 .75rem; padding-top: .5rem; border-top: 1px solid #f1f5f9; }
.lv-attach-list { list-style: none; padding: 0; margin: .35rem 0; font-size: .85rem; }
.lv-attach-list li { display: flex; align-items: center; gap: .5rem; padding: .15rem 0; }
.lv-attach-add {
    display: inline-block;
    font-size: .8rem; font-weight: 600; color: #2563eb;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.lv-attach-add input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Leave timeline — dark. MUST sit after the base .lv-* rules above: those (the
   alternating-row, weekend, today and header rules) are more specific and later
   than the general HR dark block, so they'd otherwise keep the calendar bright.
   Flat, fully-qualified selectors so each one outranks its light counterpart. */
:root[data-theme="dark"] .content-wide .lv-cell { background: #0d1117; border-color: #21262d; }
:root[data-theme="dark"] .content-wide .lv-row:nth-child(even):not(.lv-head) .lv-cell { background: #0b0f14; }
:root[data-theme="dark"] .content-wide .lv-cell.wknd,
:root[data-theme="dark"] .content-wide .lv-daycell.wknd { background: #171f2c; }
:root[data-theme="dark"] .content-wide .lv-cell.today { box-shadow: inset 2px 0 0 #e6edf3, inset -2px 0 0 #e6edf3; }
:root[data-theme="dark"] .content-wide .lv-daycell.today { box-shadow: inset 2px 0 0 #e6edf3, inset -2px 0 0 #e6edf3, inset 0 2px 0 #e6edf3; }
:root[data-theme="dark"] .content-wide .lv-row.lv-head { background: #0b0f14; }
:root[data-theme="dark"] .content-wide .lv-name {
    background: #0d1117; color: #c9d1d9; border-right-color: #21262d; border-bottom-color: #21262d;
}
:root[data-theme="dark"] .content-wide .lv-daycell { color: #8b949e; border-right-color: #21262d; border-bottom-color: #21262d; }
:root[data-theme="dark"] .content-wide .lv-dow { color: #6e7681; }
:root[data-theme="dark"] .content-wide .lv-bal { color: #a9c2ff; background: #1a2540; }
:root[data-theme="dark"] .content-wide .lv-bal-ld { color: #ffb377; background: #3a2410; }
:root[data-theme="dark"] .content-wide .lv-month { background: #161b22; border-right-color: #21262d; }

/* Click / drag-to-request on the timeline (Outlook-style). The .sel selector is
   deliberately over-qualified so it outranks the alternating-row rule
   (.lv-row:nth-child(even):not(.lv-head) .lv-cell) and the wknd/today tints. */
.lv-days { user-select: none; }
.lv-cell.clickable { cursor: pointer; }
.lv-cell.clickable:hover { box-shadow: inset 0 0 0 1px #6366f1; }
.lv-table .lv-row:not(.lv-head) .lv-days .lv-cell.sel {
    background: #bfdbfe;
    box-shadow: inset 0 0 0 1px #3b82f6;
}
:root[data-theme="dark"] .content-wide .lv-table .lv-row:not(.lv-head) .lv-days .lv-cell.sel {
    background: #1e3a5f;
    box-shadow: inset 0 0 0 1px #4f83d1;
}

/* Salary-by-department panel (Contracts charts modal) ---------- */
.salary-dept { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 1.25rem; align-items: start; }
.salary-dept-chart { min-width: 0; }
.salary-dept-table { min-width: 0; overflow-x: auto; }
.salary-dept-table tfoot td { border-top: 2px solid #d1d5db; }
@media (max-width: 720px) {
    .salary-dept { grid-template-columns: 1fr; }
}

/* Manager landing dashboard ---------- */
.dash-title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dash-title-row h1, .dash-title-row h2 { margin: 0; }

.attention-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .75rem;
    margin: 1rem 0;
}
.attention-card {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 1rem 1.15rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .05s ease;
}
.attention-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.attention-card:active { transform: translateY(1px); }
.attention-num {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: #1f2937;
}
/* Small status dot before the count — subtle signal, no heavy accent border. */
.attention-num::before {
    content: "";
    width: .6rem; height: .6rem;
    border-radius: 50%;
    background: #16a34a;
    flex-shrink: 0;
}
.attention-card.warn .attention-num::before { background: #e0842a; }
.attention-card.warn .attention-num { color: #b45309; }
.attention-label { color: #4b5563; font-size: .9rem; }
.attention-cta { margin-top: .35rem; font-size: .8rem; font-weight: 600; color: #2563eb; }

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    margin: .5rem 0 1.25rem;
}
.kpi {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .85rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}
.kpi-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; }
.kpi-value { font-size: 1.5rem; font-weight: 700; color: #1f2937; }
.kpi-sub { font-size: .8rem; color: #9ca3af; }
.kpi-sub.yoy { margin-top: .1rem; font-weight: 500; }
.kpi-sub.yoy.yoy-up { color: #16a34a; }
.kpi-sub.yoy.yoy-down { color: #dc2626; }

/* Yesterday (all restaurants) card */
.yday-card { padding-bottom: .75rem; }
.yday-table { width: 100%; }
.yday-table tfoot td { border-top: 2px solid #d1d5db; }
.kpi-warn { background: #fff7ed; border-color: #fed7aa; }
.kpi-warn .kpi-value { color: #b45309; }
.kpi-good { background: #f0fdf4; border-color: #bbf7d0; }
.kpi-good .kpi-value { color: #15803d; }

/* Dashboard ---------- */
.dash-header {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.dash-stat {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: .65rem 1rem;
    display: flex;
    flex-direction: column;
    min-width: 220px;
}
.dash-stat .label { font-size: .75rem; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.dash-stat .value { font-size: 1.05rem; font-weight: 600; color: #1f2937; }
.dash-header-spacer { flex: 1; }
.refresh-btn { align-self: center; white-space: nowrap; }
.success {
    background: #f0fdf4;
    color: #166534;
    padding: .65rem 1rem;
    border: 1px solid #bbf7d0;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.tabs {
    display: flex;
    gap: .25rem;
    margin: 1rem 0;
    border-bottom: 1px solid #d1d5db;
}
/* HR tab bar with the restaurant logo on the right — the wrapper carries the
   underline so it spans the full width behind both the tabs and the logo. */
.hr-navbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0;
    border-bottom: 1px solid #d1d5db;
    /* Reserve the logo's height. Each tab mounts a fresh HrNav that fetches the
       logo asynchronously; without this floor the bar renders short and then
       jumps taller when the logo arrives, shifting the page on every tab click. */
    min-height: 60px;
}
.hr-navbar .tabs { margin: 0; border-bottom: none; }
.hr-logo {
    height: 52px;
    max-width: 200px;
    object-fit: contain;
    margin-bottom: .4rem;
    flex-shrink: 0;
    /* White rounded badge: the logo asset is an opaque JPEG, so it sits on a
       clean white panel with curved corners (the radius rounds the white). */
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: .3rem .6rem;
    box-sizing: border-box;
}
.tabs .tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
    padding: .55rem 1rem;
    color: #4b5563;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}
.tabs .tab:hover { background: #f3f4f6; }
.tabs .tab.active {
    background: white;
    border-color: #d1d5db;
    border-bottom-color: white;
    color: #111827;
    margin-bottom: -1px;
}

.card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.card h2 { margin: 0 0 .75rem 0; font-size: 1.05rem; }

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 1rem;
}
.chart-grid .chart-wide { grid-column: 1 / -1; }
.chart-wrap { width: 100%; position: relative; }
/* Rich chart tooltip: staff behind a hovered coverage segment, with photos. */
.chart-html-tooltip {
    position: absolute; pointer-events: none; z-index: 30;
    transform: translate(-50%, calc(-100% - 12px));
    background: #fff; color: #1f2937; border: 1px solid #e5e7eb; border-radius: 8px;
    padding: .5rem .6rem; font-size: .8rem; line-height: 1.2;
    box-shadow: 0 8px 24px rgba(0,0,0,.18); min-width: 150px; max-width: 260px;
    transition: opacity .1s ease;
}
.chart-html-tooltip .cht-head { font-weight: 700; margin-bottom: .35rem; display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.chart-html-tooltip .cht-dot { width: .6rem; height: .6rem; border-radius: 2px; flex-shrink: 0; }
.chart-html-tooltip .cht-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.chart-html-tooltip .cht-list li { display: flex; align-items: center; gap: .4rem; }
.chart-html-tooltip .cht-list img, .chart-html-tooltip .cht-noimg {
    width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.chart-html-tooltip .cht-noimg { background: #e5e7eb; color: #4b5563; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; }
:root[data-theme="dark"] .chart-html-tooltip { background: #161b22; color: #e6edf3; border-color: #30363d; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
:root[data-theme="dark"] .chart-html-tooltip .cht-noimg { background: #30363d; color: #c9d1d9; }

.pct-up { color: #15803d; }
.pct-down { color: #b91c1c; }

.week-ending {
    margin: .25rem 0 .75rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #2563eb;
}

.chart-title {
    margin: 0 0 .5rem 0;
    font-size: .95rem;
    font-weight: 600;
    color: #4b5563;
    text-align: center;
}

.chart-wide-block {
    /* Sits below the chart-grid as its own full-width block. */
}
.chart-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-bottom: .5rem;
}
.chart-toolbar label {
    display: flex;
    flex-direction: column;
    font-size: .8rem;
    color: #555;
    gap: .2rem;
}
.chart-toolbar select {
    padding: .35rem .5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: .9rem;
    min-width: 160px;
}

.checkbox-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}
.checkbox-toolbar strong { color: #374151; }
.btn-small {
    padding: .2rem .55rem;
    font-size: .8rem;
}
.checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .65rem;
}
.check-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    font-size: .85rem;
    cursor: pointer;
    user-select: none;
}
.check-chip:has(input:checked) {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}
.check-chip input { margin: 0; }

/* Items / Tree mapper page ---------- */
.items-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 1rem;
    align-items: start;
}
.items-tree-panel {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: .75rem;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.items-tree-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: .35rem;
}
.tree-search {
    width: 100%;
    padding: .35rem .5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: .85rem;
    margin-bottom: .25rem;
}
.tree-toolbar { display: flex; flex-wrap: wrap; gap: .25rem; }
.tree-toolbar .danger { color: #b91c1c; }
.tree-scroll {
    overflow-y: auto;
    flex: 1;
    font-size: .9rem;
}
.tree-node {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem 0;
    cursor: default;
    border-radius: 3px;
}
.tree-node.selected {
    background: #dbeafe;
}
.tree-node:hover { background: #f3f4f6; }
.tree-node.dragging {
    opacity: 0.5;
    background: #fef9c3;
}
.tree-node.drop-target {
    outline: 2px dashed #2563eb;
    outline-offset: -2px;
    background: #eff6ff;
}
.tree-toggle {
    width: 16px;
    text-align: center;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
}
.tree-label { cursor: pointer; user-select: none; flex: 1; }
.tree-level1 { font-weight: 600; color: #1f2937; }
.tree-level2 { color: #374151; }
.tree-level3 { color: #4b5563; }
.tree-count { color: #9ca3af; font-size: .8rem; margin-left: .25rem; }

.items-right-panel {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.items-right-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}
.items-list { max-height: 360px; overflow-y: auto; }
.items-list .grid { font-size: .85rem; }
.items-list .row-selected { background: #eff6ff; }
.filter-bar.compact { margin-bottom: .5rem; padding: .5rem; }
.map-actions {
    display: flex;
    justify-content: center;
    gap: .5rem;
}
.map-actions button { padding: .5rem 1rem; font-size: .9rem; }

/* ============================================================
   Dark theme — page-specific surfaces the global block (~L511)
   doesn't reach: the Items/Categories tree-mapper, the Item-
   Performance item chips, dashboard-header stat values, and
   native form controls. Flat, fully-qualified selectors placed
   AFTER the light base rules (~L780–1048) so each wins by both
   specificity and source order. */

/* Let native checkboxes, radios and scrollbars follow the dark UA
   (the light row-select boxes + light table scrollbars were the
   most obvious remaining giveaways). */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] input[type="checkbox"],
:root[data-theme="dark"] input[type="radio"] { accent-color: #539bf5; background: transparent; }

/* Items & Categories — left category-tree panel */
:root[data-theme="dark"] .items-tree-panel { background: #0d1117; border-color: #21262d; }
:root[data-theme="dark"] .items-tree-panel .panel-header { border-bottom-color: #21262d; }
:root[data-theme="dark"] .tree-search { border-color: #30363d; }
:root[data-theme="dark"] .tree-toggle { color: #8b949e; }
:root[data-theme="dark"] .tree-level1 { color: #e6edf3; }
:root[data-theme="dark"] .tree-level2 { color: #c9d1d9; }
:root[data-theme="dark"] .tree-level3 { color: #adbac7; }
:root[data-theme="dark"] .tree-count { color: #6e7681; }
:root[data-theme="dark"] .tree-toolbar .danger { color: #f85149; }
:root[data-theme="dark"] .tree-node:hover { background: #1c2129; }
:root[data-theme="dark"] .tree-node.selected { background: #1a2540; box-shadow: inset 2px 0 0 #1f6feb; }
:root[data-theme="dark"] .tree-node.dragging { background: #2b2913; }
:root[data-theme="dark"] .tree-node.drop-target { background: #1a2540; outline-color: #539bf5; }
:root[data-theme="dark"] .items-list .row-selected { background: #1a2540; }

/* Item Performance — item chips + empty-state notice */
:root[data-theme="dark"] .checkbox-toolbar strong { color: #e6edf3; }
:root[data-theme="dark"] .check-chip { background: #161b22; border-color: #30363d; color: #c9d1d9; }
:root[data-theme="dark"] .check-chip:has(input:checked) { background: #1a2540; border-color: #1f6feb; color: #a9c2ff; }
:root[data-theme="dark"] .notice { background: #0d1117; border-color: #21262d; }

/* Dashboard header (used by Item Performance) — stat value/label + chart title */
:root[data-theme="dark"] .dash-stat .value { color: #e6edf3; }
:root[data-theme="dark"] .dash-stat .label { color: #8b949e; }
:root[data-theme="dark"] .chart-title { color: #e6edf3; }

/* Dashboard — month sales KPI cards. Keep the amber/green semantic coding but
   in dark tints (was solid white / cream / mint with near-black numbers). */
:root[data-theme="dark"] .kpi { background: #161b22; border-color: #30363d; }
:root[data-theme="dark"] .kpi-label { color: #8b949e; }
:root[data-theme="dark"] .kpi-value { color: #e6edf3; }
:root[data-theme="dark"] .kpi-sub { color: #8b949e; }
:root[data-theme="dark"] .kpi-sub.yoy.yoy-up { color: #3fb950; }
:root[data-theme="dark"] .kpi-sub.yoy.yoy-down { color: #f85149; }
:root[data-theme="dark"] .kpi-warn { background: #2a1f0c; border-color: #4a3312; }
:root[data-theme="dark"] .kpi-warn .kpi-value { color: #e3b341; }
:root[data-theme="dark"] .kpi-good { background: #12291c; border-color: #2f6b47; }
:root[data-theme="dark"] .kpi-good .kpi-value { color: #3fb950; }

/* Brand logo: the /logo asset is an opaque JPEG (white background), so it stays
   on a clean white badge in dark mode. On dark the delineating border isn't
   needed — drop it so the rounded white badge floats cleanly (no dark frame). */
:root[data-theme="dark"] .dash-stat.dash-logo { background: #fff; border-color: transparent; }
:root[data-theme="dark"] .hr-logo { border-color: transparent; }

/* Select-restaurant picker cards (EmptyLayout) — were solid white. */
:root[data-theme="dark"] .restaurant-card { background: #0d1117; border-color: #21262d; color: #c9d1d9; }
:root[data-theme="dark"] .restaurant-card:hover { border-color: #539bf5; }
:root[data-theme="dark"] .restaurant-name { color: #e6edf3; }
:root[data-theme="dark"] .restaurant-id { color: #8b949e; }

/* ----- Mobile / narrow viewport overrides ----- */
@media (max-width: 720px) {
    .content {
        padding: 1rem .75rem;
    }
    .topbar {
        flex-wrap: wrap;
        gap: .5rem;
        padding: .5rem .75rem;
    }
    .topbar .nav-links {
        flex: 1 0 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .topbar .nav-links a {
        flex-shrink: 0;
    }
    /* Reports links show inline inside the scrolling nav — an absolute menu
       would be clipped by the overflow-x container, and display:contents has
       a rendering bug on Android Chrome/WebView, so use a plain inline flex. */
    .topbar .nav-drop-btn { display: none; }
    .topbar .nav-dropdown { display: flex; align-items: center; }
    .topbar .nav-drop-menu {
        display: flex !important;   /* always visible; overrides the .open toggle */
        position: static;
        flex-direction: row;
        gap: .5rem;
        min-width: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
    }
    .topbar .nav-drop-menu a { flex-shrink: 0; }
    .topbar .nav-drop-backdrop { display: none; }
    .topbar-right {
        flex-wrap: wrap;
        font-size: .8rem;
    }

    /* Dashboard header — full-width cards stacked */
    .dash-header { flex-direction: column; gap: .5rem; }
    .dash-stat { min-width: 0; width: 100%; }
    .dash-header-spacer { display: none; }
    .dash-stat.dash-logo img { height: 48px; }
    .refresh-btn { width: 100%; }

    /* Filter bar — wrap nicely */
    .filter-bar { flex-direction: column; gap: .5rem; }
    .filter-bar label, .filter-bar input, .filter-bar select { width: 100%; min-width: 0; }
    .filter-bar.compact { padding: .5rem; }

    /* Charts — slightly shorter to fit on small screens */
    .chart-grid { grid-template-columns: 1fr; }
    .chart-wrap { height: 240px !important; }
    .chart-wide-block .chart-wrap { height: 280px !important; }
    /* Dense multi-year comparisons need HEIGHT on a narrow phone to stay
       readable — most of the viewport, portrait or landscape. */
    .chart-tall-mobile .chart-wrap { height: 70vh !important; min-height: 420px; }

    /* Items page — stack tree on top, right panel below */
    .items-layout { grid-template-columns: 1fr; }
    .items-tree-panel { position: static; max-height: 60vh; }

    /* Logo grid in Settings stacks */
    .logo-grid { grid-template-columns: 1fr; }

    /* Tabs from the old single-page Dashboard (no longer used but harmless) */
    .tabs { overflow-x: auto; white-space: nowrap; }
    /* HR tab bar stacks; keep the logo small and let the tabs scroll freely. */
    .hr-navbar { flex-wrap: wrap; }
    .hr-navbar .tabs { flex: 1 1 100%; }
    .hr-logo { height: 44px; padding: .25rem .5rem; margin: 0 0 .4rem auto; }

    /* Headings tighter */
    h1 { font-size: 1.3rem; }
    h2 { font-size: 1.05rem; }
}

/* Payslip (print-friendly, rendered under EmptyLayout) ---------- */
.payslip-actions { display: flex; gap: .5rem; margin-bottom: 1rem; }
.payslip {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem;
}
.payslip-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    border-bottom: 2px solid #1f2937; padding-bottom: 1rem; margin-bottom: 1.25rem;
}
.payslip-company { font-size: 1.25rem; font-weight: 700; color: #111827; }
.payslip-sub { font-size: .8rem; color: #6b7280; }
.payslip-period { text-align: right; }
.payslip-period-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.payslip-period-value { font-weight: 600; }
.payslip-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem 1.5rem; margin-bottom: 1.25rem; }
.payslip-meta > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #f3f4f6; padding: .3rem 0; }
.payslip-meta span { color: #6b7280; font-size: .85rem; }
.payslip-table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.payslip-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; border-bottom: 1px solid #e5e7eb; padding: .4rem .5rem; }
.payslip-table th.num, .payslip-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.payslip-table td { padding: .35rem .5rem; border-bottom: 1px solid #f3f4f6; }
.payslip-table tfoot td { font-weight: 600; border-top: 1px solid #e5e7eb; border-bottom: none; }
.payslip-net {
    display: flex; justify-content: space-between; align-items: center;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px;
    padding: .9rem 1.25rem; margin-bottom: 1rem;
}
.payslip-net span { font-weight: 600; color: #166534; }
.payslip-net strong { font-size: 1.4rem; color: #166534; font-variant-numeric: tabular-nums; }
.payslip-foot { font-size: .75rem; color: #9ca3af; text-align: center; }

@media print {
    .topbar, .no-print, .payslip-actions { display: none !important; }
    .content { max-width: none; padding: 0; }
    .payslip { border: none; border-radius: 0; max-width: none; padding: 0; }
    body { background: white; }
}

#blazor-error-ui {
    background: #fee;
    border-top: 1px solid #fcc;
    color: #900;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }