/*
 * Staff and admin portal theme, in the Jummie's Bukka brand: the logo's brown, jollof red and orange on warm white,
 * the same colours and Figtree font as the customer site. The shell and components come from the Kloktoba design
 * system (klocktoba-design.css, auth.css): loaded AFTER site.css, it defines the --kl-* tokens and re-skins the
 * existing class names, so staff pages need no markup of their own. The customer site never loads it.
 * Themes: [data-theme="light|dark|contrast"]. Text size: [data-fontsize="sm|md|lg|xl"]. Set by js/staff-shell.js.
 */

@font-face { font-family: Figtree; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

/* ============ 1. Design tokens ============ */
:root {
    --kl-primary: #932426;          /* brand brown: 8.9:1 with white text */
    --kl-primary-hover: #741a1d;
    --kl-primary-press: #5e1517;
    --kl-on-primary: #ffffff;
    --kl-navy: #3b0d0f;
    --kl-navy-2: #4e1214;
    --kl-accent: #fb9230;
    --kl-gold: #ffc107;
    --kl-gradient: linear-gradient(135deg, #4e1214 0%, #932426 58%, #d2352a 100%);
    --kl-success: #16a34a;
    --kl-warning: #b45309;
    --kl-danger: #dc2626;
    --kl-success-bg: #e8f8ee;
    --kl-warning-bg: #fef3c7;
    --kl-danger-bg: #fee2e2;
    --kl-info-bg: #f6e4d4;
    --kl-bg: #fbf5ec;
    --kl-surface: #ffffff;
    --kl-surface-2: #fdf8f2;
    --kl-surface-glass: rgba(255, 255, 255, .78);
    --kl-border: #ecdccd;
    --kl-border-strong: #d9c6b6;
    --kl-text: #2a1614;
    --kl-text-2: #5a4640;
    --kl-text-muted: #6e5a54;
    --kl-link: #932426;
    --kl-focus: #932426;
    --kl-radius-sm: 6px;
    --kl-radius: 10px;
    --kl-radius-lg: 14px;
    --kl-shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --kl-shadow-2: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .05);
    --kl-shadow-3: 0 16px 40px rgba(16, 24, 40, .18);
    --kl-ease: cubic-bezier(.2, .8, .2, 1);
    --kl-dur: .16s;
    --kl-font: Figtree, 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --kl-topbar-h: 60px;
    color-scheme: light;
}
:root[data-theme="dark"] {
    --kl-primary: #ff9b6a;
    --kl-primary-hover: #ffb08a;
    --kl-primary-press: #ffc6a8;
    --kl-on-primary: #2a0d05;
    --kl-navy-2: #3b0d0f;
    --kl-success: #4ade80;
    --kl-warning: #fbbf24;
    --kl-danger: #f87171;
    --kl-success-bg: rgba(74, 222, 128, .14);
    --kl-warning-bg: rgba(251, 191, 36, .14);
    --kl-danger-bg: rgba(248, 113, 113, .14);
    --kl-info-bg: rgba(251, 146, 48, .14);
    --kl-bg: #1a0e0c;
    --kl-surface: #241512;
    --kl-surface-2: #2d1c18;
    --kl-surface-glass: rgba(36, 21, 18, .78);
    --kl-border: #3d2a25;
    --kl-border-strong: #543a33;
    --kl-text: #f3e8e3;
    --kl-text-2: #d6c3bb;
    --kl-text-muted: #b29c94;
    --kl-link: #ffad85;
    --kl-focus: #ffad85;
    --kl-shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --kl-shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
    --kl-shadow-3: 0 16px 40px rgba(0, 0, 0, .6);
    color-scheme: dark;
}
:root[data-theme="contrast"] {
    --kl-primary: #ffff00;
    --kl-primary-hover: #ffffff;
    --kl-primary-press: #ffffff;
    --kl-on-primary: #000000;
    --kl-navy: #000000;
    --kl-navy-2: #000000;
    --kl-success: #00ff7f;
    --kl-warning: #ffd700;
    --kl-danger: #ff6b6b;
    --kl-success-bg: #000000;
    --kl-warning-bg: #000000;
    --kl-danger-bg: #000000;
    --kl-info-bg: #000000;
    --kl-bg: #000000;
    --kl-surface: #000000;
    --kl-surface-2: #000000;
    --kl-surface-glass: #000000;
    --kl-border: #ffffff;
    --kl-border-strong: #ffffff;
    --kl-text: #ffffff;
    --kl-text-2: #ffffff;
    --kl-text-muted: #e6e6e6;
    --kl-link: #8ab4ff;
    --kl-focus: #ffff00;
    --kl-gradient: none;
    --kl-shadow-1: none;
    --kl-shadow-2: none;
    --kl-shadow-3: 0 0 0 2px #fff;
    color-scheme: dark;
}
:root[data-fontsize="sm"] { font-size: 14px; }
:root[data-fontsize="md"] { font-size: 16px; }
:root[data-fontsize="lg"] { font-size: 18px; }
:root[data-fontsize="xl"] { font-size: 20px; }

/* Point site.css's own variables at the tokens, so everything built on them follows the theme. */
body.staff {
    --green: var(--kl-primary); --green-d: var(--kl-primary-hover); --gold: var(--kl-gold); --ink: var(--kl-text); --muted: var(--kl-text-muted);
    --bg: var(--kl-bg); --card: var(--kl-surface); --line: var(--kl-border); --bad: var(--kl-danger); --ok: var(--kl-success); --r: var(--kl-radius); --tap: 44px;
    font: 1rem/1.5 var(--kl-font); background: var(--kl-bg); color: var(--kl-text); padding: 0; -webkit-font-smoothing: antialiased;
}

/* ============ 2. Base ============ */
body.staff h1, body.staff h2, body.staff h3 { color: var(--kl-text); letter-spacing: -.01em; }
body.staff h1 { font-size: 1.6rem; font-weight: 650; margin: 0 0 1rem; }
body.staff h2 { font-size: 1.15rem; font-weight: 650; }
body.staff a { color: var(--kl-link); }
body.staff :focus-visible { outline: 3px solid var(--kl-focus); outline-offset: 2px; border-radius: 4px; }
body.staff .skip:focus { background: var(--kl-primary); color: var(--kl-on-primary); border-radius: var(--kl-radius-sm); }
@media (prefers-reduced-motion: reduce) { body.staff *, body.staff *::before, body.staff *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ============ 3. Navigation shell ============ */
.kl-app { display: flex; min-height: 100vh; }
.kl-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
body.staff main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 1.5rem; }

.sidebar {
    position: sticky; top: 0; flex: 0 0 264px; width: 264px; height: 100vh; overflow-y: auto; z-index: 100;
    display: flex; flex-direction: column; color: #c9d3e3;
    background: linear-gradient(180deg, var(--kl-navy) 0%, var(--kl-navy-2) 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
}
:root[data-theme="contrast"] .sidebar { border-right: 2px solid #fff; background: #000; }
body.staff .sidebar-brand { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; min-height: var(--kl-topbar-h); color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.sidebar-brand strong { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.2; }
.sidebar-brand small { display: block; font-size: .74rem; color: #e3c3b3; }
.kl-mark { display: grid; place-items: center; flex: 0 0 2.6rem; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: #fffdf9; box-shadow: 0 0 0 2px rgba(255, 255, 255, .18); }
.kl-mark img { display: block; width: 2.05rem; height: auto; }
:root[data-theme="contrast"] .kl-mark { background: #fff; box-shadow: 0 0 0 2px #ffff00; }
.sidebar-nav { display: flex; flex-direction: column; padding: .5rem .5rem 1rem; }
.sidebar-label { padding: 1rem .8rem .3rem; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #e3c3b3; }
body.staff .sidebar-nav a {
    display: flex; align-items: center; gap: .65rem; position: relative; min-height: 2.5rem; padding: .5rem .8rem; margin: 1px 0;
    color: #c9d3e3; text-decoration: none; border-radius: var(--kl-radius-sm);
    transition: background var(--kl-dur) var(--kl-ease), color var(--kl-dur) var(--kl-ease);
}
.sidebar-nav svg { flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; }
body.staff .sidebar-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
body.staff .sidebar-nav a[aria-current="page"] { background: rgba(251, 146, 48, .2); color: #fff; font-weight: 600; }
.sidebar-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -.5rem; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--kl-accent); }
:root[data-theme="contrast"] body.staff .sidebar-nav a[aria-current="page"] { background: #ffff00; color: #000; }
:root[data-theme="contrast"] .sidebar-nav a[aria-current="page"]::before { background: #000; }
.kl-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .5); }

.topbar {
    position: sticky; top: 0; z-index: 80; display: flex; align-items: center; gap: .75rem;
    min-height: var(--kl-topbar-h); padding: .5rem 1.25rem;
    background: var(--kl-surface-glass); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--kl-border); box-shadow: var(--kl-shadow-1);
}
.topbar-title { flex: 1 1 auto; min-width: 0; color: var(--kl-text); font-weight: 650; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.staff .kl-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2.4rem; width: 2.4rem; height: 2.4rem; min-height: 0; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--kl-text-2); box-shadow: none;
    transition: background var(--kl-dur), color var(--kl-dur);
}
body.staff .kl-icon-btn:hover { background: var(--kl-surface-2); color: var(--kl-primary); transform: none; }
.kl-icon-btn svg { width: 1.25rem; height: 1.25rem; }
.kl-menu-btn { display: none !important; }

.kl-profile { position: relative; }
body.staff .kl-profile-btn {
    display: flex; align-items: center; gap: .55rem; min-height: 2.6rem; padding: .2rem .55rem .2rem .25rem;
    border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--kl-text); font-weight: 400; box-shadow: none;
}
body.staff .kl-profile-btn:hover, body.staff .kl-profile-btn[aria-expanded="true"] { background: var(--kl-surface-2); border-color: var(--kl-border); transform: none; }
.kl-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2.1rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--kl-gradient); background-color: var(--kl-primary); color: #fff; font-weight: 700; font-size: .8rem; }
:root[data-theme="contrast"] .kl-avatar { background: #ffff00; color: #000; }
.kl-profile-meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.kl-profile-name { font-weight: 600; font-size: .88rem; }
.kl-profile-role { font-size: .74rem; color: var(--kl-text-muted); }
.kl-menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 120; width: 18rem; max-width: calc(100vw - 2rem); padding: .6rem; background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: var(--kl-radius-lg); box-shadow: var(--kl-shadow-3); }
.kl-menu-label { padding: .5rem .4rem .3rem; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kl-text-muted); }
.kl-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; border-radius: var(--kl-radius-sm); background: var(--kl-surface-2); border: 1px solid var(--kl-border); }
body.staff .kl-seg button { min-height: 2.1rem; padding: 0 .3rem; border: 0; border-radius: 4px; background: transparent; color: var(--kl-text-2); font-size: .82rem; font-weight: 600; box-shadow: none; }
body.staff .kl-seg button:hover { transform: none; color: var(--kl-text); }
body.staff .kl-seg button[aria-pressed="true"] { background: var(--kl-primary); color: var(--kl-on-primary); }
.kl-menu-sep { height: 1px; margin: .6rem 0; background: var(--kl-border); }
.kl-menu form { margin: 0; }
body.staff .kl-menu-item { display: flex; align-items: center; width: 100%; min-height: 2.5rem; padding: 0 .6rem; border: 0; border-radius: var(--kl-radius-sm); background: transparent; color: var(--kl-text); font-weight: 500; text-decoration: none; box-shadow: none; }
body.staff .kl-menu-item:hover { background: var(--kl-surface-2); transform: none; }

/* ============ 4. Components (re-skin of the shared class names) ============ */
body.staff .btn, body.staff button {
    min-height: var(--tap); padding: 0 1rem; border: 1px solid transparent; border-radius: var(--kl-radius-sm); font-weight: 600;
    background: var(--kl-primary); color: var(--kl-on-primary); box-shadow: var(--kl-shadow-1); filter: none;
    transition: background var(--kl-dur) var(--kl-ease), box-shadow var(--kl-dur) var(--kl-ease), transform var(--kl-dur) var(--kl-ease);
}
body.staff .btn:hover:not(:disabled), body.staff button:hover:not(:disabled) { background: var(--kl-primary-hover); box-shadow: var(--kl-shadow-2); transform: translateY(-1px); filter: none; }
body.staff .btn:active:not(:disabled), body.staff button:active:not(:disabled) { background: var(--kl-primary-press); transform: none; }
body.staff .btn.alt, body.staff button.alt { background: var(--kl-surface-2); color: var(--kl-text); border-color: var(--kl-border-strong); box-shadow: none; }
body.staff .btn.alt:hover:not(:disabled), body.staff button.alt:hover:not(:disabled) { background: var(--kl-border); }
body.staff .btn.bad, body.staff button.bad { background: var(--kl-danger); color: #fff; }
body.staff .btn.bad:hover:not(:disabled), body.staff button.bad:hover:not(:disabled) { background: var(--kl-danger); filter: brightness(.92); }
:root[data-theme="dark"] body.staff button.bad, :root[data-theme="contrast"] body.staff button.bad { color: #000; }

body.staff .card { background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: var(--kl-radius); box-shadow: var(--kl-shadow-1); padding: 1rem 1.15rem; }
body.staff .card + .card, body.staff form.card, body.staff section.card, body.staff details.card { margin-bottom: 1rem; }
body.staff .card h2 { margin-top: 0; }
body.staff details.card summary { cursor: pointer; }
body.staff .grid { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
body.staff .grid .card { margin: 0; }

.kl-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); margin: 0 0 1.25rem; }
body.staff .stat-card { display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.25rem; color: var(--kl-text); text-decoration: none; background: var(--kl-surface); border: 1px solid var(--kl-border); border-top: 3px solid var(--kl-primary); border-radius: var(--kl-radius); box-shadow: var(--kl-shadow-1); transition: box-shadow var(--kl-dur), transform var(--kl-dur); }
body.staff .stat-card:hover { box-shadow: var(--kl-shadow-2); transform: translateY(-1px); }
body.staff .stat-card.warn { border-top-color: var(--kl-warning); }
.stat-value { order: -1; font-size: 1.85rem; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .85rem; color: var(--kl-text-muted); }

body.staff .scroll { background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: var(--kl-radius); box-shadow: var(--kl-shadow-1); margin-bottom: 1.25rem; }
body.staff table { background: var(--kl-surface); color: var(--kl-text); }
body.staff th, body.staff td { padding: .7rem .9rem; border-bottom: 1px solid var(--kl-border); }
body.staff th { background: var(--kl-surface-2); color: var(--kl-text-2); font-size: .76rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
body.staff td .inline { flex-wrap: nowrap; }
body.staff td .inline input { width: 6rem; min-width: 5rem; }
body.staff td button, body.staff td .btn { white-space: nowrap; }
.kl-actions { display: flex; gap: .5rem; }
body.staff button.danger { background: transparent; color: var(--kl-danger); border-color: var(--kl-danger); box-shadow: none; }
body.staff button.danger:hover:not(:disabled) { background: var(--kl-danger-bg); }
body.staff tr { transition: background var(--kl-dur); }
body.staff tbody tr:hover, body.staff table > tr:hover { background: var(--kl-surface-2); }
body.staff tbody tr:last-child td, body.staff table > tr:last-child td { border-bottom: 0; }

body.staff input, body.staff select, body.staff textarea {
    background: var(--kl-surface); color: var(--kl-text); border: 1px solid var(--kl-border-strong); border-radius: var(--kl-radius-sm); min-height: var(--tap);
    transition: border-color var(--kl-dur), box-shadow var(--kl-dur);
}
body.staff input:focus, body.staff select:focus, body.staff textarea:focus { border-color: var(--kl-primary); box-shadow: 0 0 0 3px rgba(251, 146, 48, .25); outline: 0; }
body.staff .check input { min-height: 24px; accent-color: var(--kl-primary); }
body.staff label { font-size: .9rem; font-weight: 650; color: var(--kl-text-2); }
body.staff .check { font-weight: 400; color: var(--kl-text); }
body.staff fieldset { border-color: var(--kl-border); border-radius: var(--kl-radius); }

/* status + feedback: soft fills with a text label, never colour alone */
body.staff .msg { background: var(--kl-info-bg); border: 1px solid var(--kl-border); border-left: 4px solid var(--kl-primary); border-radius: var(--kl-radius-sm); color: var(--kl-text); }
body.staff .msg.ok { background: var(--kl-success-bg); border-left-color: var(--kl-success); }
body.staff .msg.err { background: var(--kl-danger-bg); border-left-color: var(--kl-danger); }
body.staff .alert { background: var(--kl-warning-bg); border-left: 4px solid var(--kl-warning); border-radius: var(--kl-radius-sm); color: var(--kl-text); margin: 0 0 1rem; }
body.staff .err { color: var(--kl-danger); }
body.staff .ok { color: var(--kl-success); }
body.staff .msg.ok, body.staff .msg.err { color: var(--kl-text); font-weight: 500; }
body.staff .sample { color: var(--kl-warning); font-size: .8rem; font-weight: 600; }
body.staff .allergen { color: var(--kl-text-muted); }
body.staff .tag, .badge { display: inline-block; padding: .15rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 600; background: var(--kl-info-bg); color: var(--kl-link); }
.badge-ok { background: var(--kl-success-bg); color: var(--kl-success); }
.badge-bad { background: var(--kl-danger-bg); color: var(--kl-danger); }
:root[data-theme="contrast"] .badge, :root[data-theme="contrast"] body.staff .tag { border: 1px solid currentColor; }

body.staff .tabs a { background: var(--kl-surface); color: var(--kl-text-2); border: 1px solid var(--kl-border-strong); border-radius: var(--kl-radius-sm); line-height: calc(var(--tap) - 2px); }
body.staff .tabs a[aria-current="page"] { background: var(--kl-primary); color: var(--kl-on-primary); border-color: var(--kl-primary); }
body.staff .photo { background: var(--kl-surface-2); border-radius: var(--kl-radius-sm); }

/* ============ 5. Sign-in (Views/Shared/_StaffAuthLayout.cshtml) ============ */
.kl-auth { display: grid; grid-template-columns: minmax(20rem, 5fr) 6fr; min-height: 100vh; }
.kl-auth-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2.5rem 3rem; color: #fff; background: linear-gradient(150deg, #3b0d0f 0%, #4e1214 45%, #932426 100%); }
.kl-auth-brand::after { content: ""; position: absolute; right: -8rem; bottom: -8rem; width: 26rem; height: 26rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 70%); pointer-events: none; }
:root[data-theme="contrast"] .kl-auth-brand { background: #000; border-right: 2px solid #ffff00; }
.kl-auth-logo { align-self: flex-start; padding: 1rem 1.4rem; border-radius: 20px; background: #fffdf9; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.kl-auth-logo img { display: block; width: 9.5rem; height: auto; }
.kl-auth-pitch h2, body.staff .kl-auth-pitch h2 { margin: 0 0 1.5rem; max-width: 24rem; font-size: 2rem; line-height: 1.2; font-weight: 750; color: #fff; }
.kl-auth-pitch ul { display: grid; gap: 1rem; max-width: 26rem; margin: 0; padding: 0; list-style: none; }
.kl-auth-pitch li { position: relative; padding-left: 1.4rem; }
.kl-auth-pitch li::before { content: ""; position: absolute; left: 0; top: .45rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--kl-accent); }
.kl-auth-side { display: flex; flex-direction: column; min-width: 0; }
.kl-auth-top { display: flex; justify-content: flex-end; padding: 1.1rem 2rem; }
.kl-auth-top a { font-weight: 600; font-size: .92rem; text-decoration: none; }
.kl-auth-top a:hover { text-decoration: underline; }
body.staff .kl-auth-main { flex: 1; display: grid; place-items: center; max-width: none; padding: 1rem 2rem 2rem; }
.kl-auth-card { width: 100%; max-width: 30rem; padding: 2rem 2.1rem 1.75rem; background: var(--kl-surface); border: 1px solid var(--kl-border); border-radius: var(--kl-radius-lg); box-shadow: var(--kl-shadow-2); }
.kl-auth-card button[type=submit] { width: 100%; }

/* ============ 6. Small screens ============ */
@media (max-width: 899px) {
    .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform var(--kl-dur) var(--kl-ease); visibility: hidden; }
    .kl-nav-open .sidebar { transform: none; visibility: visible; box-shadow: var(--kl-shadow-3); }
    .kl-menu-btn { display: inline-flex !important; }
    .kl-profile-meta { display: none; }
    body.staff .kl-profile-btn { padding: .2rem; }
    .topbar { padding: .5rem .75rem; gap: .35rem; }
    body.staff main { padding: 1rem; }
    .kl-auth { grid-template-columns: minmax(0, 1fr); }
    .kl-auth-brand { display: none; }
    .kl-auth-card { padding: 1.5rem 1.25rem; }
    body.staff .kl-auth-main { padding: .5rem 1rem 1.5rem; }
}
@media print { .sidebar, .topbar { display: none; } }

/* new order alerts: stays in view while the page scrolls */
body.staff .order-alerts { position: sticky; top: 8px; z-index: 40; background: var(--kl-warning-bg); border: 1px solid var(--kl-warning); border-left-width: 4px; border-radius: var(--kl-radius-sm); box-shadow: var(--kl-shadow-2); color: var(--kl-text); margin: 0 0 16px; padding: 12px 16px; }
body.staff .order-alerts[hidden] { display: none; }
body.staff .order-alerts ul { list-style: none; margin: 0 0 8px; max-height: 40vh; overflow-y: auto; padding: 0; }
body.staff .order-alerts li { padding: 2px 0; }

body.staff .staff-list th, body.staff .staff-list td { white-space: nowrap; word-break: normal; overflow-wrap: normal; }

body.staff .order-alerts li { border-bottom: 1px solid var(--kl-warning); padding: 8px 0; }
body.staff .order-alerts li:last-child { border-bottom: 0; }
body.staff .order-alert-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
body.staff .order-alert-actions input { flex: 1 1 200px; max-width: 320px; }
body.staff .order-alerts .row button[hidden] { display: none; }

body.staff .category-list input[name=position] { width: 76px; }
body.staff .category-list input[name=name] { min-width: 200px; }
body.staff .category-list td { vertical-align: middle; }

body.staff .order-alert-actions select { flex: 0 1 220px; max-width: 220px; }

/* user manuals (/staff/help/...) */
body.staff .manual { max-width: 860px; }
body.staff .manual > .card { margin-bottom: 1rem; }
body.staff .manual .lead { font-size: 1.05rem; margin-bottom: 1rem; }
body.staff .manual section { scroll-margin-top: 72px; }
body.staff .manual li + li { margin-top: .35rem; }
body.staff .manual-toc ol { columns: 2 220px; margin: 0; }
body.staff .manual-toc li { break-inside: avoid; }

/* Drivers: expiring documents, missing bank details, and simple lists of times and files */
.badge-warn { background: var(--kl-warning-bg); color: var(--kl-warning); }
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
ul.plain li { padding: .55rem .7rem; border: 1px solid var(--kl-border); border-radius: var(--kl-radius-sm); background: var(--kl-surface-2); }
.stat-card .stat-sub { display: block; font-size: .8rem; color: var(--kl-text-muted); }

/* Driver availability: tap-to-select time slots and zones */
.slot-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.slot-chip { position: relative; display: inline-flex; cursor: pointer; }
.slot-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slot-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1.5px solid var(--kl-border-strong); border-radius: 999px; background: var(--kl-surface); color: var(--kl-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.slot-chip.small span { min-height: 38px; padding: 0 .8rem; font-weight: 500; }
.slot-chip input:checked + span { background: var(--kl-primary); border-color: var(--kl-primary); color: var(--kl-on-primary); }
.slot-chip input:checked + span::before { content: "✓"; margin-right: .4rem; }
.slot-chip input:focus-visible + span { outline: 3px solid var(--kl-focus); outline-offset: 2px; }
.avail-day h3 { margin: 0; }
.avail-day details summary { cursor: pointer; font-weight: 600; color: var(--kl-link); }
.avail-day .copy-to { margin-top: .6rem; }