/* ════════════════════════════════════════════════════════════════════════
 * Neki Tracker — design system
 * Reuse these instead of re-inventing per component (keeps the app cohesive
 * and prevents one-off drift like the white-input bug):
 *   • Color/surface: var(--bg|panel|ink|muted|accent|border)
 *   • Form fields:  just use a normal <input>/<select>/<textarea> — the global
 *                   field baseline (below) themes it. Override only width/
 *                   padding in your component; never re-declare bg/border/color.
 *   • Buttons:      .btn (primary), .btn-secondary (outline), .btn-sm (small),
 *                   .btn-danger (destructive), button.link (text button).
 *   • Modals:       <dialog class="tc-modal"> or an overlay .modal > .modal-body.
 *   • Tokens:       --field-bg, --on-accent, --radius, --focus-ring.
 * ════════════════════════════════════════════════════════════════════════ */
:root {
    --bg: #0f172a;
    --panel: #111827;
    --ink: #e5e7eb;
    --muted: #9ca3af;
    --accent: #f59e0b;
    --border: #1f2937;
    /* Component tokens — reuse these instead of re-hardcoding the hexes. */
    --field-bg: #0b1220;        /* form-control background */
    --on-accent: #0b1220;       /* text/icon color on accent-filled buttons */
    --radius: 0.4rem;           /* default control corner radius */
    --focus-ring: 0 0 0 2px rgba(245, 158, 11, 0.18);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    min-height: 100vh;
}

.topbar {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    /* iOS standalone PWA uses black-translucent + viewport-fit=cover, so
       the status bar / Dynamic Island ("pill") overlaps page content.
       Pad the top bar by the safe-area inset so the title clears it, and
       the sides for landscape notch. env() falls back to 0 on non-iOS. */
    padding: calc(1rem + env(safe-area-inset-top)) calc(1.25rem + env(safe-area-inset-right)) 1rem calc(1.25rem + env(safe-area-inset-left));
    background: var(--panel);
    border-bottom: 1px solid var(--border);
}

main {
    max-width: 960px;
    margin: 0 auto;
    /* Honor the home-indicator inset (bottom) + landscape notch (sides). */
    padding: 1.5rem calc(1.25rem + env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) calc(1.25rem + env(safe-area-inset-left));
}

/* Schedule week/month grids breathe: let the page use the available
   width instead of the 960px reading column, but cap it so it never
   sprawls on an ultra-wide monitor. Grows/shrinks with the viewport. */
body.page-wide main {
    max-width: min(96vw, 1600px);
}

/* Belt + suspenders: the hidden attribute always wins, even against
   responsive display:block/flex rules on table rows. */
[hidden] { display: none !important; }

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
}

h1 { margin: 0 0 0.5rem; font-size: 1.5rem; }

.muted { color: var(--muted); }

code {
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    padding: 0.1rem 0.35rem;
    font-size: 0.9em;
}

a { color: var(--accent); }

ul { padding-left: 1.25rem; }

/* ─── Forms: global field baseline ───────────────────────────────────────
 * ONE dark-theme recipe for every text-like control, set at low specificity
 * via :where() (which contributes 0 specificity). Any component can override
 * just the bits it needs (width, padding, a different bg) with a plain class
 * selector and it wins automatically. This is the single source of truth —
 * a new input/select/textarea anywhere inherits it, so nothing ever falls
 * back to the browser's white default again. Reuse the tokens above. */
input:where([type="text"], [type="email"], [type="tel"], [type="url"],
            [type="search"], [type="number"], [type="password"], [type="date"],
            [type="time"], [type="datetime-local"], [type="month"], [type="week"]),
select,
textarea {
    padding: 0.5rem 0.65rem;
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--ink);
    font: inherit;
}
input:where([type="text"], [type="email"], [type="tel"], [type="url"],
            [type="search"], [type="number"], [type="password"], [type="date"],
            [type="time"], [type="datetime-local"], [type="month"], [type="week"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
/* Invert the native calendar/clock glyph so it's visible on the dark field. */
input::-webkit-calendar-picker-indicator { filter: invert(0.85); cursor: pointer; }

/* --- admin nav ---
 * Always-visible wrapping strip. No hamburger — items are never hidden
 * between page navigations. white-space:nowrap prevents text wrapping
 * inside individual pills; the row wraps as a whole when needed.
 *
 * The nav lives in .navstrip, OUTSIDE <main>, so it sits in the same
 * spot on every page (main's width varies: 960px column vs page-wide).
 * Horizontal padding mirrors .topbar so the pills align with the
 * "Neki Tracker" wordmark above. */
.navstrip {
    padding: 1rem calc(1.25rem + env(safe-area-inset-right))
             0 calc(1.25rem + env(safe-area-inset-left));
}
.navstrip:empty { display: none; }
.adminnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.navstrip .adminnav { margin-bottom: 0; }
.adminnav a, .adminnav button.link, .adminnav form.inline {
    white-space: nowrap;
}
.adminnav a, .adminnav button.link {
    padding: 0.45rem 0.85rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    text-decoration: none;
    color: var(--ink);
}
.adminnav a:hover, .adminnav button.link:hover { border-color: var(--accent); }
.nav-spacer { margin-left: 0.75rem; }
/* Red badge on nav link when there are pending approvals */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1em;
    height: 1.1em;
    padding: 0 0.22em;
    border-radius: 99px;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    margin-left: 0.2em;
}

/* Roles "More" — expands INLINE (no floating popover, no page nav). */
.role-more { display: inline-block; }
.role-more > summary {
    list-style: none;
    cursor: pointer;
    color: var(--accent);
    padding: 0.2rem 0.35rem;
    border-radius: 0.3rem;
    user-select: none;
}
.role-more > summary::-webkit-details-marker { display: none; }
.role-more[open] > summary { background: rgba(245, 158, 11, 0.12); }
.role-more-panel {
    margin-top: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: #0b1220;
    padding: 0.7rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
}
.role-more-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: flex-end;
    margin: 0;
}
/* Inline action cluster inside an expanded More panel (staff list). */
.role-more-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    align-items: center;
}
.role-more-panel .invite-box input {
    width: 100%;
    margin: 0.2rem 0;
}
.role-more-form label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.8rem;
    color: var(--muted);
}
.role-more-form input,
.role-more-form select {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--ink);
    border-radius: 0.35rem;
    padding: 0.35rem 0.45rem;
    font: inherit;
}
@media (max-width: 720px) {
    /* Open panel takes the whole role card width, dropping to its own
       line beneath the four quarters — i.e. "between the rows". */
    .roles-grid td[data-label="Actions"]:has(details[open]) {
        flex-basis: 100% !important;
    }
    .role-more, .role-more-panel, .role-more-form { width: 100%; }
}
/* Staff list: one-click full-width inline editor (no popover, no page nav). */
.btn-edit-toggle {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid var(--border);
    color: var(--accent);
    border-radius: 0.35rem;
    padding: 0.3rem 0.6rem;
    font: inherit;
    cursor: pointer;
}
.btn-edit-toggle:hover { border-color: var(--accent); }
.btn-edit-toggle[aria-expanded="true"] { background: rgba(245, 158, 11, 0.22); }
.staff-edit-row > td {
    padding: 0;
    background: rgba(245, 158, 11, 0.04);
    border-top: none;
}
.staff-edit-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.1rem 1.2rem;
}
.staff-edit-form { display: flex; flex-direction: column; gap: 0.8rem; margin: 0; }
.sef-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.6rem 1rem;
}
.staff-edit-form label,
.staff-edit-panel > .staff-edit-form > label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.82rem;
    color: var(--muted);
}
.staff-edit-form input[type="text"],
.staff-edit-form input[type="email"],
.staff-edit-form input[type="number"],
.staff-edit-form select,
.staff-edit-form textarea {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--ink);
    border-radius: 0.35rem;
    padding: 0.4rem 0.5rem;
    font: inherit;
    width: 100%;
}
.sef-roles {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.7rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}
.sef-roles legend { color: var(--muted); font-size: 0.8rem; padding: 0 0.3rem; }
.sef-role-chk {
    display: inline-flex;
    flex-direction: row !important;
    align-items: center;
    gap: 0.35rem;
    color: var(--ink) !important;
    font-size: 0.9rem !important;
}
.sef-photo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}
.sef-actions {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    border-top: 1px dashed var(--border);
    padding-top: 0.8rem;
}
@media (max-width: 720px) {
    /* Keep the full-width editor a real block on mobile, overriding the
       collapsible "hide non-primary cells" + roles-grid flex-row rules.
       :not([hidden]) — the !important must never beat the hidden
       attribute, or every row's editor renders expanded on phones. */
    table.grid.collapsible tbody tr.staff-edit-row:not([hidden]) { display: block !important; }
    table.grid.collapsible tbody tr.staff-edit-row td {
        display: block !important;
        flex: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .sef-grid { grid-template-columns: 1fr; }
}

.avatar-col { width: 2.6rem; }
.avatar-cell { width: 2.6rem; }
.staff-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: #0b1220;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
}

/* --- Mobile nav ---
 * Hamburger toggle removed. The nav is always a horizontal scroll
 * strip — same pattern as desktop, just more compact. */
.nav-burger { display: none; }  /* kept in markup for back-compat; hidden */
.nav-toggle-cb { display: none; }
@media (max-width: 720px) {
    .adminnav {
        gap: 0.45rem;
        margin-bottom: 0.75rem;
    }
    .adminnav a, .adminnav button.link, .adminnav form.inline button.link {
        padding: 0.4rem 0.65rem;
        font-size: 0.875rem;
    }
}

/* --- buttons --- */
.btn, .btn-secondary {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.btn-secondary {
    background: transparent;
    color: var(--ink);
}
button.link {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    padding: 0;
    font: inherit;
}
button.link.danger { color: #f87171; }
/* Touch devices: give the bare text-buttons that act as primary
   actions a finger-sized tap area (iOS HIG ~44px) without distorting
   the dense inline ⓘ/✕/+ controls. */
@media (hover: none) {
    .request-trade-btn,
    .request-cover-btn,
    .withdraw-btn,
    .claim-btn,
    .propose-btn,
    .adminnav .link,
    .push-nudge-dismiss {
        min-height: 40px;
        padding: 0.4rem 0.35rem;
    }
}
.inline { display: inline; }

/* --- card head --- */
.cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.cardhead h1 { margin: 0; }

/* Stackable variant for pages with a long title + a wide nav-button
 * cluster on the right. On narrow screens the row gets squeezed so the
 * h1 wraps awkwardly and the right-hand buttons get pushed off-screen.
 * .cardhead-stackable drops to a column on mobile: H1 takes its own
 * row (full width, no awkward wrap), nav buttons row beneath.
 *
 * Pair with .range-subtitle (below) for the "week of …" line — keeps
 * the date out of the H1 so it can live as a clean subtitle below
 * the buttons on mobile (and below the row on desktop too). */
@media (max-width: 720px) {
    .cardhead-stackable {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
    .cardhead-stackable .weeknav {
        flex-wrap: wrap;
        width: 100%;
    }
    .cardhead-stackable h1 {
        font-size: 1.4rem;
        line-height: 1.2;
    }
}
.range-subtitle {
    margin: -0.4rem 0 0.9rem;
}

/* --- tables --- */
table.grid {
    width: 100%;
    border-collapse: collapse;
}
table.grid th, table.grid td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
}
table.grid th {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
table.grid tr.inactive td { color: var(--muted); }
.row-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: nowrap; }
.row-actions a { color: var(--accent); text-decoration: none; }
.row-action-primary { font-weight: 600; }

/* "More ▾" popover menu on /admin/staff. The cell stays at one-link
 * width on a wide screen; clicking the summary reveals a stacked menu
 * that floats above the table so it doesn't reflow surrounding rows. */
details.row-menu {
    display: inline-block;
    position: relative;
}
details.row-menu > summary {
    list-style: none;
    cursor: pointer;
    color: var(--accent);
    padding: 0.1rem 0.3rem;
    border-radius: 0.3rem;
    user-select: none;
}
details.row-menu > summary::-webkit-details-marker { display: none; }
details.row-menu[open] > summary {
    background: rgba(245, 158, 11, 0.12);
}
.row-menu-popover {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.3rem;
    min-width: 11rem;
    z-index: 50;
    background: var(--panel, #0f172a);
    border: 1px solid var(--border, #334155);
    border-radius: 0.45rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    white-space: nowrap;
}
.row-menu-popover form.inline { margin: 0; }
.row-menu-popover details { width: 100%; }
.row-menu-popover .link {
    text-align: left;
    padding: 0.1rem 0;
}
.row-menu-popover .row-menu-link {
    display: block;
    padding: 0.1rem 0;
    color: var(--accent);
    text-decoration: none;
}
.row-menu-popover .row-menu-link:hover { text-decoration: underline; }

/* --- forms --- */
form.stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 480px;
}
form.stack label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--muted);
}
form.stack input[type=text],
form.stack input[type=email],
form.stack input[type=tel],
form.stack input[type=number],
form.stack input[type=date],
form.stack input[type=time],
form.stack input[type=datetime-local],
form.stack textarea {
    padding: 0.55rem 0.7rem;
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    color: var(--ink);
    font: inherit;
}
form.stack input[type=date]::-webkit-calendar-picker-indicator,
form.stack input[type=time]::-webkit-calendar-picker-indicator,
form.stack input[type=datetime-local]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
    cursor: pointer;
}
/* On desktop, our datepicker.js handles the click. Block the native
 * calendar indicator's internal click handler from opening the OS
 * popup — pointer-events:none lets the click fall through to the
 * input body, where our mousedown listener fires. Mobile (coarse
 * pointer) keeps the native picker, so we don't apply this there. */
@media (pointer: fine) {
    input[type=date]::-webkit-calendar-picker-indicator,
    input[type=time]::-webkit-calendar-picker-indicator,
    input[type=datetime-local]::-webkit-calendar-picker-indicator {
        pointer-events: none;
    }
}
form.stack input[type=color] {
    width: 4rem;
    height: 2.2rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
}
fieldset.rolelist {
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
fieldset.rolelist legend { padding: 0 0.4rem; color: var(--muted); }
.checkbox { flex-direction: row !important; align-items: center; gap: 0.5rem; color: var(--ink) !important; }
.formactions { display: flex; gap: 0.75rem; justify-content: flex-end; }

/* --- stats --- */
dl.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin: 0;
}
dl.stats div {
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem 0.9rem;
}
dl.stats dt { color: var(--muted); font-size: 0.85rem; }
dl.stats dd { margin: 0.2rem 0 0; font-size: 1.5rem; font-weight: 600; }

/* --- profile field list (account page) — stacked, not a grid, so a
   long email doesn't blow out a column and run off-screen --- */
dl.profile-list { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
dl.profile-list div {
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
}
dl.profile-list dt { color: var(--muted); font-size: 0.8rem; }
dl.profile-list dd {
    margin: 0.15rem 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    word-break: break-word;
}

/* --- color swatch --- */
.swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 0.2rem;
    border: 1px solid var(--border);
    vertical-align: middle;
}

/* --- schedule grid --- */
/* Compact two-row header: nav+range on the left, view+loc on the right. */
.sched-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.4rem;
}
.sched-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.sched-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.sched-range {
    font-size: 0.9rem;
    white-space: nowrap;
    font-family: inherit;
}
.sched-range::after {
    content: " ▾";
    font-size: 0.75em;
    opacity: 0.5;
}
/* The range label ("July 2026 ▾") is a visual button with a transparent
 * date/month input laid over it — clicking it opens the custom picker
 * directly (no separate "Jump to" box). */
.sched-range-wrap { position: relative; display: inline-flex; }
.sched-range-form { position: absolute; inset: 0; margin: 0; }
.sched-range-input {
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
    background: none;
}
/* Inline loc toggle — same pill style as .loc-toggle but no margin/label. */
.loc-toggle-inline {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}
.loc-toggle-inline .btn-secondary {
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem;
}
.loc-toggle-inline .btn-secondary.active {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.55);
}
/* view-toggle and loc-toggle-inline sit directly in the topbar — no extra margin. */
.sched-topbar-right .view-toggle { margin: 0; }
.weeknav { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.weeknav-jump { margin: 0; }
.weeknav-jump label {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.1;
}
.weeknav-jump input[type="date"],
.weeknav-jump input[type="month"] {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    color: var(--ink);
    padding: 0.35rem 0.5rem;
    font: inherit;
    font-size: 0.85rem;
}
.inactive-staff-section { margin-top: 1rem; }
.inactive-staff-section > summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.9rem;
    padding: 0.4rem 0;
}
.shift-time-edit { cursor: pointer; }
.shift-time-edit:hover {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.shift-time-part { cursor: pointer; }
.shift-time-part:hover {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.shift-time-dash { color: var(--muted); padding: 0 0.1rem; }
.bounce-flag {
    display: inline-block;
    margin-left: 0.4rem;
    background: #7f1d1d;
    color: #fecaca;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.08rem 0.4rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}
/* Push-notification status on the admin staff list. */
.push-flag {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.08rem 0.4rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}
.push-flag.on { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
.push-flag.off { background: rgba(148, 163, 184, 0.15); color: var(--muted); }
.overnight-badge {
    display: inline-block;
    margin-left: 0.25rem;
    background: #f59e0b;
    color: #0b1220;
    font-weight: 700;
    font-size: 0.66rem;
    line-height: 1;
    padding: 0.12rem 0.3rem;
    border-radius: 0.25rem;
    vertical-align: middle;
}
.shift-time .inline-input { width: 7.5em; }
.dt-split { display: flex; gap: 0.4rem; }
.dt-split input { min-width: 0; }
.weekgrid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.5rem;
}
.daycol {
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 0.5rem;
    min-height: 8rem;
}
.daycol h3 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
ul.shifts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.shift {
    border-left: 3px solid var(--accent);
    background: #111827;
    padding: 0.4rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.85rem;
}
.shift.open { border-left-style: dashed; }
.shift-time { font-weight: 600; }
.shift-role { color: var(--muted); }
.shift-staff em { color: #fbbf24; font-style: normal; }
.tag-chip {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    color: #0b1220;
    font-weight: 600;
}

/* --- hover-target utility ---
 * Reusable dashed-outline-on-hover effect for any cell that's clickable
 * but has no obvious affordance (empty grid squares, editable table cells,
 * etc). Use the .hover-target class anywhere you want this behavior; the
 * inline-edit selectors below compose against the same visual.
 */
.hover-target {
    /* Only fade the background. Transitioning `outline` animates its color
     * from the default currentColor (near-white) to the accent, which shows
     * as a brief heavy→light flash on hover — so leave the outline instant. */
    transition: background 120ms ease;
}
.hover-target:hover {
    background: rgba(245, 158, 11, 0.08);
    outline: 1px dashed var(--accent);
    outline-offset: -3px;
    cursor: pointer;
}

/* --- inline editing --- */
td.editable {
    cursor: text;
    transition: background 120ms ease, outline 120ms ease;
}
td.editable:hover {
    background: rgba(245, 158, 11, 0.08);
    outline: 1px dashed var(--accent);
    outline-offset: -3px;
}
td.editable input.inline-input {
    width: 100%;
    padding: 0.35rem 0.45rem;
    background: #0b1220;
    color: var(--ink);
    border: 1px solid var(--accent);
    border-radius: 0.3rem;
    font: inherit;
    box-sizing: border-box;
}
td.editable input.inline-input[type=color] {
    width: 3rem;
    height: 1.8rem;
    padding: 0;
    cursor: pointer;
}
td.flash-ok {
    background: rgba(34, 197, 94, 0.18) !important;
}
td.flash-err {
    background: rgba(239, 68, 68, 0.18) !important;
}

.editable-field {
    cursor: pointer;
    border-radius: 0.2rem;
    padding: 0 0.2rem;
    transition: background 120ms ease, outline 120ms ease;
}
.editable-field:hover {
    background: rgba(245, 158, 11, 0.12);
    outline: 1px dashed rgba(245,158,11,0.6);
    outline-offset: 1px;
}
.editable-field input.inline-input,
.editable-field select.inline-input {
    padding: 0.2rem 0.3rem;
    background: #0b1220;
    color: var(--ink);
    border: 1px solid var(--accent);
    border-radius: 0.25rem;
    font: inherit;
    width: auto;
    max-width: 100%;
}
.editable-field.flash-ok { background: rgba(34, 197, 94, 0.25); }
.editable-field.flash-err { background: rgba(239, 68, 68, 0.25); }
.tag-add, .notes-add { color: var(--muted); font-style: italic; opacity: 0.7; }
.tag-add:hover, .notes-add:hover { opacity: 1; }
/* The head's left column: the time, with the empty-state +tag / +note
 * affordances stacked beneath it in the spare space next to the avatar rail.
 * They're always shown (no hover gating), so revealing them never changes the
 * card height. When filled, the real tag-chip / note render in their normal
 * spots below — the page reloads on save (see data-reload-on-save). */
.shift-head-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.shift-add-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.72rem;
    line-height: 1.2;
    /* Hidden until the card is hovered, but with visibility (not display) so
     * the box still reserves its space — revealing it never reflows the card.
     * On touch devices (no hover) keep it shown so it stays tappable. */
    visibility: hidden;
}
.shift:hover .shift-add-inline { visibility: visible; }
@media (hover: none) {
    .shift-add-inline { visibility: visible; }
}
.shift-add-inline .tag-add,
.shift-add-inline .notes-add {
    padding: 0;
    white-space: nowrap;
}

/* --- click-to-create popover --- */
.cell {
    cursor: copy; /* hint: click empty area to add a shift */
}
.cell .shift {
    cursor: grab;
}

.popover {
    position: absolute;
    z-index: 50;
    background: #0b1220;
    border: 1px solid var(--accent);
    border-radius: 0.5rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    padding: 0.85rem 1rem;
    width: min(360px, calc(100vw - 24px));
}
.popover.hidden { display: none; }

.popover-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.popover-head strong { font-size: 0.95rem; }
.popover-head .cancel-btn { margin-left: auto; }

.popover-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 0.7rem;
    margin-bottom: 0.75rem;
}
.popover-fields label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--muted);
}
.popover-fields label.span2 { grid-column: span 2; }
.popover-fields input[type=time],
.popover-fields input[type=text],
.popover-fields select {
    padding: 0.4rem 0.5rem;
    background: #111827;
    border: 1px solid var(--border);
    border-radius: 0.3rem;
    color: var(--ink);
    font: inherit;
}
.popover-fields input:focus,
.popover-fields select:focus {
    outline: none;
    border-color: var(--accent);
}

.popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* --- staff list auth bits --- */
.badge-admin {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Location chip — only rendered for non-default locations (i.e. LA today).
 * Same shape as .badge-admin but tinted violet so it visually differs at
 * a glance. */
.badge-loc {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(167, 139, 250, 0.18);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Inline amber caution line — for a row that still renders but needs the
 * reader to stop and look (e.g. a request whose underlying shift moved).
 * Utility class rather than a per-page inline style so every warning in
 * the app reads the same. */
.warn-text {
    color: #fbbf24;
}

.login-cell .status-set { color: #4ade80; font-size: 0.85rem; }
.login-cell .status-locked { color: #f87171; font-size: 0.85rem; }
details.pin-form { display: inline; }
details.pin-form summary {
    cursor: pointer;
    color: var(--accent);
    list-style: none;
    display: inline;
}
details.pin-form summary::-webkit-details-marker { display: none; }
.pin-inline {
    display: inline-flex;
    gap: 0.4rem;
    margin-left: 0.4rem;
    align-items: center;
}
.pin-inline input[type=password] {
    padding: 0.25rem 0.4rem;
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    color: var(--ink);
    font: inherit;
    width: 7rem;
}

.login-card {
    max-width: 28rem;
    margin: 4rem auto;
}
.login-card h1 { margin-bottom: 0.5rem; }
.login-card .stack input[type=password],
.login-card .stack select {
    padding: 0.55rem 0.7rem;
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    color: var(--ink);
    font: inherit;
}
.login-card .formactions { justify-content: stretch; }
.login-card .btn { width: 100%; padding: 0.7rem; }
.alert {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #fca5a5;
    padding: 0.6rem 0.8rem;
    border-radius: 0.4rem;
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
}

.login-cell .status-pending { color: #fcd34d; font-size: 0.85rem; }

details.invite-link { display: inline; }
details.invite-link summary {
    cursor: pointer;
    color: var(--accent);
    list-style: none;
    display: inline;
}
details.invite-link summary::-webkit-details-marker { display: none; }
.invite-box {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.4rem;
    padding: 0.5rem;
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    width: 100%;
    max-width: 36rem;
}
.invite-box input[type=text] {
    flex: 1 1 22rem;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    background: #111827;
    border: 1px solid var(--border);
    border-radius: 0.3rem;
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.8rem;
}

.consent-card { max-width: 36rem; margin: 2rem auto; }
.consent-text {
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 1rem 1.1rem;
    margin: 1rem 0;
    font-family: -apple-system, system-ui, sans-serif;
    font-size: 0.92rem;
    line-height: 1.45;
    white-space: pre-wrap;
    color: var(--ink);
}
.alert.success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.45);
    color: #86efac;
}

/* --- staff week grid (horizontal, mirrors /admin/schedule) --- */
.staff-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.staff-week .day-col {
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 0.45rem 0.5rem;
    min-height: 7rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.staff-week .day-col h3 {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}
.staff-week .day-col h3 .date {
    display: block;
    color: var(--ink);
    font-weight: 600;
    margin-top: 0.1rem;
    text-transform: none;
    letter-spacing: 0;
}
.staff-week .day-col.empty { opacity: 0.55; }
/* Per-day "+ propose a shift" button sits inside the <h3> header
 * of each day column. Tiny, inline, only visible on hover/focus so
 * it doesn't compete with the date label. */
.staff-week .day-col h3 .propose-btn {
    font-size: 1rem;
    line-height: 1;
    padding: 0.1rem 0.4rem;
    margin-left: 0.3rem;
    color: var(--accent);
    opacity: 0.65;
    border-radius: 0.3rem;
}
.staff-week .day-col:hover h3 .propose-btn,
.staff-week .day-col h3 .propose-btn:focus {
    opacity: 1;
    background: rgba(245, 158, 11, 0.12);
}
/* On mobile the day stack puts the header full-width — keep button always visible */
@media (max-width: 720px) {
    .staff-week .day-col h3 .propose-btn { opacity: 1; }
}
.staff-week .day-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.staff-week .day-col .shift,
.staff-week .day-col .open-shift-card {
    cursor: default;
    background: #111827;
    font-size: 0.82rem;
    padding: 0.4rem 0.5rem;
}
/* On narrow screens (phones), drop to a single-column stack so cards stay
   readable. The admin grid does its own thing via horizontal scroll. */
@media (max-width: 720px) {
    .staff-week {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }
    .staff-week .day-col { min-height: 0; }
    .staff-week .day-col h3 { text-align: left; }
}
.adminnav .link {
    margin-left: auto;
    color: var(--accent);
}

/* --- /clock page --- */
.clock-card {
    max-width: 28rem;
    margin: 2rem auto;
    text-align: center;
}
.clock-card h1 { margin-bottom: 0.4rem; }
.clock-card .btn-big {
    display: block;
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
    margin: 1.25rem 0 0.5rem;
}
.todays-shifts {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    text-align: left;
}
.todays-shifts li {
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    padding: 0.5rem 0.7rem;
    margin: 0.4rem 0;
    font-size: 0.9rem;
}
.clock-greeting {
    margin: 0 0 0.75rem;
    font-size: 1.5rem;
}
.clock-timer {
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #34d399;
    margin: 0.25rem 0 0.75rem;
}
/* Upcoming-shifts preview card — matches the centered clock column width */
.upcoming-shifts {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0.75rem;
}
.upcoming-shifts li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.6rem;
    align-items: baseline;
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    padding: 0.55rem 0.7rem;
    margin: 0.4rem 0;
    font-size: 0.9rem;
}
.upcoming-shifts .up-day { font-weight: 600; min-width: 6.5rem; }
.upcoming-shifts .up-time { color: var(--muted); }
.upcoming-shifts .up-role { margin-left: auto; color: #93c5fd; }
.upcoming-shifts .up-actions {
    flex-basis: 100%;
    display: flex;
    gap: 1rem;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--border);
}
.upcoming-shifts .up-actions .link { font-size: 0.85rem; }
#clock-status.warn { color: #fcd34d; }
#clock-status.err { color: #f87171; }
#clock-status.ok { color: #4ade80; }
.push-status { font-size: 0.9rem; margin: 0.25rem 0 0.75rem; }
.push-status.ok { color: #4ade80; }
.push-status.err { color: #f87171; }
.push-status.muted { color: var(--muted); }

/* --- Modal (in-app confirm; replaces native confirm for iOS PWA) --- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}
.modal.hidden { display: none; }
.modal-body {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 1.25rem 1.4rem;
    width: min(28rem, 100%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.modal-body p { margin: 0 0 1rem; line-height: 1.45; }
.modal-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}

/* --- who's on now --- */
.role-pill {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    font-size: 0.85rem;
}
.distance-ok { color: #4ade80; }
.distance-warn { color: #fcd34d; }
.distance-alert { color: #f87171; font-weight: 600; }

/* --- /open-shifts (and pending claims block on /my-schedule) --- */
.open-shift-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.open-shift-card {
    border-left: 3px solid var(--accent);
    background: #0b1220;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 0.4rem;
    padding: 0.7rem 0.9rem;
}
.open-shift-meta {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    margin-bottom: 0.2rem;
}
.open-shift-role {
    color: var(--ink);
    margin-bottom: 0.4rem;
}
.open-shift-claims {
    margin-bottom: 0.5rem;
}
.open-shift-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}
.open-shift-actions .status-pending {
    color: #fcd34d;
    font-size: 0.9rem;
}
.open-shift-actions .status-mine {
    color: #4ade80;
    font-size: 0.9rem;
    font-weight: 600;
}
.open-shift-actions .status-taken {
    color: var(--muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.open-shift-card.state-taken {
    opacity: 0.55;
    border-left-style: dashed;
}
.open-shift-card.state-mine {
    background: rgba(34, 197, 94, 0.08);
}

/* --- view toggle (Week / Month) --- */
.view-toggle {
    display: inline-flex;
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 0.15rem;
    margin: 0.5rem 0 0.75rem;
}
.view-toggle a {
    padding: 0.35rem 0.85rem;
    border-radius: 0.3rem;
    text-decoration: none;
    color: var(--muted);
    font-size: 0.85rem;
}
.view-toggle a.on {
    background: var(--accent);
    color: #0b1220;
    font-weight: 600;
}
.view-toggle a:hover:not(.on) { color: var(--ink); }

/* --- month grid (admin schedule, my-schedule, open-shifts month view) --- */
.month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-top: 0.5rem;
}
.month-head {
    background: #111827;
    text-align: center;
    padding: 0.5rem 0.4rem;
    font-size: 0.78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.month-cell {
    background: #0b1220;
    min-height: 7.5rem;
    padding: 0.4rem 0.45rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-decoration: none;
    color: var(--ink);
    transition: background 100ms ease;
}
.month-cell:hover { background: #111827; }
.month-cell.out-of-month { background: #070d18; opacity: 0.45; }
.month-cell.today .cell-date {
    background: var(--accent);
    color: #0b1220;
    border-radius: 999px;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.cell-date {
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 0.2rem;
    align-self: flex-end;
}
.month-cell.today .cell-date { align-self: flex-end; }

.cell-chip {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    background: #111827;
    border-left: 3px solid var(--chip-color, var(--accent));
    padding: 0.2rem 0.35rem;
    border-radius: 0.2rem;
    font-size: 0.72rem;
    line-height: 1.2;
    overflow: hidden;
    min-width: 0;
    position: relative;
    isolation: isolate;
}
/* Same role-color fill as the week cards: slight at rest, deeper on hover. */
.cell-chip::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--chip-color, #f59e0b);
    opacity: 0.1;
    transition: opacity 0.12s ease;
    pointer-events: none;
    z-index: -1;
}
.cell-chip:hover::after { opacity: 0.24; }
.chip-line-1, .chip-line-2, .chip-line-3 {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
/* Status pill on its own full-width line above the time so it can't
   get clipped by the time/hours row. */
.chip-line-0 {
    display: flex;
    margin-bottom: 0.1rem;
}
.chip-line-0 .chip-draft-pill { overflow: visible; }
.chip-time { color: var(--muted); flex-shrink: 0; }
.chip-hours {
    color: var(--muted);
    font-size: 0.62rem;
    flex-shrink: 0;
}
.chip-role {
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.chip-who {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}
.chip-who.open { color: #fbbf24; }
.chip-who.mine { color: #4ade80; }
.chip-who.taken { color: #94a3b8; font-style: italic; }

/* Avatar circle for month-view chips — initials or open-door SVG.
   Replaces the old plain chip-who text as the primary visual anchor. */
.chip-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.18);
    color: var(--accent);
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.chip-avatar.chip-avatar-open {
    background: rgba(251, 191, 36, 0.18);
    color: #fbbf24;
}
.chip-door-glyph {
    width: 0.78rem;
    height: 0.78rem;
    display: block;
}

/* Avatar circle for the desktop week-grid shift cards — same open-door
   SVG for unassigned, initials for assigned. Lives in .shift-head. */
.shift-card-avatar {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.18);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.shift-card-avatar.shift-avatar-open {
    background: rgba(251, 191, 36, 0.18);
    color: #fbbf24;
}
.shift-avatar-door {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
}

/* Legacy initials badge (kept for the staff PWA's compact chip use) */
.chip-init {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border-radius: 0.2rem;
    padding: 0 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}
.chip-init.open { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
.chip-init.mine { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
.chip-init.taken { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

.cell-chip.state-taken { opacity: 0.55; border-left-style: dashed; }
.cell-chip.state-mine { background: rgba(34, 197, 94, 0.08); }

/* Draft chips in the admin month view — dashed surround + DRAFT pill */
.cell-chip.status-draft {
    opacity: 0.75;
    border-top: 1px dashed rgba(252, 211, 77, 0.45);
    border-right: 1px dashed rgba(252, 211, 77, 0.45);
    border-bottom: 1px dashed rgba(252, 211, 77, 0.45);
    border-left-style: dashed;
}
.chip-draft-pill {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0 0.3rem;
    border-radius: 3px;
    text-transform: uppercase;
    background: rgba(252, 211, 77, 0.2);
    color: #fcd34d;
    border: 1px solid rgba(252, 211, 77, 0.4);
    flex-shrink: 0;
}
/* Punch + Pending chip pills reuse the draft-pill shape, recoloured. */
.chip-punch-pill {
    background: rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.45);
}
.chip-pending-pill {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.45);
}
.cell-chip.kind-punch { border-left-style: dashed; background: rgba(148,163,184,0.06); }
.cell-chip.kind-pending { border-left-style: dotted; background: rgba(245,158,11,0.06); }

/* Month-view filter toolbar (kind multi-select + staffer single-select). */
.month-filters {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.6rem 0 0.9rem;
}
.month-filters .filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.filter-pill {
    font-size: 0.78rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.filter-pill.active {
    background: rgba(245, 158, 11, 0.16);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.5);
}

.staff-week .day-col .shift .shift-actions {
    margin-top: 0.25rem;
}
.staff-week .day-col .shift .request-trade-btn {
    font-size: 0.78rem;
}

/* --- email preview --- */
.email-preview-html {
    background: #f8fafc;
    color: #0f172a;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 1.25rem 1.5rem;
    margin-top: 0.75rem;
    max-width: 42rem;
}
.email-preview-html a { color: #0369a1; }
.email-preview-text {
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 1rem 1.1rem;
    margin-top: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.85rem;
    line-height: 1.55;
    white-space: pre-wrap;
    color: var(--ink);
    max-width: 60rem;
    overflow-x: auto;
}

@media (max-width: 720px) {
    .month-cell { min-height: 5rem; padding: 0.3rem; }
    .cell-chip { font-size: 0.62rem; padding: 0.15rem 0.2rem; }
    .chip-init { display: none; }
    .chip-hours { display: none; }
}

/* --- gameplan --- */
.progress-bar {
    height: 0.5rem;
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    margin: 0.75rem 0 0.5rem;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #f59e0b 100%);
    transition: width 400ms ease;
}

.card + .card { margin-top: 1rem; }

.phase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.25rem;
}
.phase-header h2 {
    margin: 0;
    font-size: 1.05rem;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}
.phase-week {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-width: 5.5rem;
}
.phase-title { font-weight: 600; }
.phase-summary { margin: 0.25rem 0 0.75rem; }

.badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
}
.badge-done        { background: rgba(34, 197, 94, 0.18); color: #4ade80; border: 1px solid rgba(34,197,94,0.4); }
.badge-in_progress { background: rgba(251, 191, 36, 0.18); color: #fcd34d; border: 1px solid rgba(251,191,36,0.4); }
.badge-todo        { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.3); }
.badge-deferred    { background: rgba(148, 163, 184, 0.08); color: #94a3b8; border: 1px solid rgba(148,163,184,0.25); }

.phase-done    { border-left: 3px solid #22c55e; }
.phase-in_progress { border-left: 3px solid #fbbf24; }
.phase-todo    { border-left: 3px solid #475569; }
.phase-deferred { border-left: 3px solid #334155; opacity: 0.85; }

.checklist {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.checklist .item {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    font-size: 0.92rem;
}
.checklist .item-icon {
    display: inline-block;
    min-width: 1.1rem;
    text-align: center;
    font-weight: 700;
}
.item-done    .item-icon { color: #4ade80; }
.item-in_progress .item-icon { color: #fcd34d; }
.item-todo    .item-icon { color: #64748b; }
.item-deferred .item-icon { color: #475569; }

.item-done .item-text    { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(148,163,184,0.3); }
.item-deferred .item-text { color: var(--muted); }

.item-note { display: block; font-size: 0.82rem; margin-top: 0.1rem; }

/* --- schedule grid v2 (Open + per-staff rows × 7 days) --- */
.schedule-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0;
    flex-wrap: wrap;
}
.newshift-form {
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}
.newshift-form.hidden { display: none; }
.grid-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.grid-fields label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--muted);
}
.grid-fields label.span2 { grid-column: span 2; }
.grid-fields select,
.grid-fields input[type=time],
.grid-fields input[type=text] {
    padding: 0.5rem 0.6rem;
    background: #111827;
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    color: var(--ink);
    font: inherit;
}

.schedgrid {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #0b1220;
}
.schedrow {
    display: grid;
    grid-template-columns: 9rem repeat(7, minmax(0, 1fr));
}
.schedrow > * {
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 0.4rem 0.45rem;
    min-height: 4.5rem;
    box-sizing: border-box;
}
.schedrow > *:last-child { border-right: none; }
.schedrow:first-child > * { border-top: none; }
.schedrow.head > * {
    background: #111827;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 0.5rem 0.4rem;
    min-height: 0;
}
.schedrow.head .rowlabel { text-transform: none; }

.daycol-head { line-height: 1.2; }
.rowlabel {
    background: #111827;
    color: var(--ink);
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 0.4rem 0.7rem;
}
.open-row .rowlabel { color: #fbbf24; }
.cell {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--bg);
    /* Reserve clickable empty space at the bottom of every cell so admin
     * can add another shift in a cell that already has cards. Without
     * this, the cell auto-shrinks to its content and there's nowhere
     * to click. */
    min-height: 4.5rem;
    padding-bottom: 1.25rem;
}
.cell.drop-active {
    background: rgba(245, 158, 11, 0.10);
    outline: 2px dashed var(--accent);
    outline-offset: -3px;
}

/* --- Copy / paste shifts --------------------------------------------- */
/* Copy button on each card — muted ⧉ that brightens on hover. Lives in the
 * right rail under the avatar (and still on orphan-punch status rows). */
.shift-card-actions .shift-copy-btn,
.shift-status-row .shift-copy-btn {
    color: var(--muted);
    /* Big enough to actually tap — Kyle found the 0.9rem glyph fiddly. */
    font-size: 1.35rem;
    line-height: 1;
    padding: 0.15rem 0.3rem;
    margin: 0;
}
.shift-card-actions .shift-copy-btn:hover,
.shift-status-row .shift-copy-btn:hover { color: var(--accent); }
/* While a shift is copied, every cell is a paste target. */
.schedgrid.paste-mode .cell { cursor: copy; }
.schedgrid.paste-mode .cell:hover {
    background: rgba(245, 158, 11, 0.10);
    outline: 2px dashed var(--accent);
    outline-offset: -3px;
}
.schedgrid.paste-mode .shift { cursor: copy; }
.schedgrid.paste-mode .shift-copy-btn { cursor: pointer; }
/* Floating banner pinned to the bottom while in paste mode. */
.paste-banner {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%) translateY(150%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--accent);
    color: #0b1220;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 1000;
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
    max-width: calc(100vw - 2rem);
}
.paste-banner.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.paste-banner-txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.paste-banner-x {
    background: rgba(11, 18, 32, 0.15);
    border: none;
    color: #0b1220;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.2rem 0.45rem;
    border-radius: 0.35rem;
    cursor: pointer;
    flex: none;
}
.paste-banner-x:hover { background: rgba(11, 18, 32, 0.3); }

.shift {
    border-left: 3px solid var(--accent);
    background: #111827;
    padding: 0.35rem 0.45rem;
    border-radius: 0.3rem;
    font-size: 0.82rem;
    cursor: grab;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.shift:active { cursor: grabbing; }
.shift.unassigned { border-left-style: dashed; }
/* Draft shifts: visually downplayed (lower opacity, dashed top + bottom
 * edges) and labeled with a DRAFT pill in .shift-head. Published shifts
 * are the default look — no extra adornment, since most cards are live. */
.shift.status-draft {
    opacity: 0.7;
    background: #0f172a;
    border-top: 1px dashed rgba(252, 211, 77, 0.5);
    border-bottom: 1px dashed rgba(252, 211, 77, 0.5);
    border-right: 1px dashed rgba(252, 211, 77, 0.5);
}
.shift-status-pill {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    text-transform: uppercase;
}
.shift-status-pill.draft {
    background: rgba(252, 211, 77, 0.2);
    color: #fcd34d;
    border: 1px solid rgba(252, 211, 77, 0.45);
}
/* PUNCH pill for orphan time_clock cards on the admin grid — same
 * shape as DRAFT but slate-tinted so it reads as "this isn't a
 * scheduled shift, it's an actual punch". */
.shift-status-pill.orphan {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.45);
}
/* NEEDS APPROVAL pill — amber-on-dark to read "review me before lock".
 * Disappears once admin_reviewed_at is stamped, leaving just PUNCH. */
.shift-status-pill.needs-approval {
    background: rgba(251, 191, 36, 0.22);
    color: #fcd34d;
    border: 1px solid rgba(251, 191, 36, 0.55);
}
/* Orphan-punch card on /admin/schedule. Dashed left edge + slate
 * tint, distinct from regular shifts but living in the same cell. */
.shift.orphan-punch {
    background: rgba(148, 163, 184, 0.06);
    border-left-style: dashed;
}
.shift.orphan-punch:hover {
    background: rgba(245, 158, 11, 0.10);
}
/* Cards that still need review get an amber halo so admin can scan a
 * busy week and spot what to act on. The Approve button gets its own
 * row at the bottom of the card. */
.shift.orphan-punch.needs-approval {
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.45);
}
.shift.orphan-punch .orphan-approve-form {
    margin-top: 0.25rem;
    display: block;
}
.shift.dragging { opacity: 0.4; }
.shift.flash-ok { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.55); }
.shift.flash-err { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.55); }

/* Status row pinned to the top of each shift / punch card: status
 * pill(s) on the left, the ⓘ history (+ ✕ cancel / ✓ approve)
 * controls on the right. Keeps pills from getting clipped next to
 * the time on a narrow grid column. */
.shift-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
    min-height: 1.4rem;
    cursor: pointer;            /* whole top bar opens shift history */
}
.shift-status-row .shift-status-spacer { flex: 1; }
.shift-status-row .shift-status-pills { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.shift-status-row .shift-status-controls {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-left: auto;
}
.shift-status-row .shift-history-btn,
.shift-status-row .punch-history-btn {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1;
    padding: 0;
    margin: 0;
}
.shift-status-row .shift-history-btn:hover,
.shift-status-row .punch-history-btn:hover { color: var(--accent); }
.shift-status-row .shift-cancel { margin: 0; }

.shift-head {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.shift-time {
    font-weight: 600;
    min-width: 0;
}
/* DRAFT pill sits inline before the time now (the top status row is gone).
 * Nudge it down a hair so it baselines with the time text. */
.shift-head > .shift-status-pill { margin-top: 0.1rem; flex-shrink: 0; }
/* Right rail under the time: avatar on top, copy + cancel controls beneath
 * it. Stacking the controls below the avatar reclaims the whole top row. */
.shift-card-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}
.shift-card-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.shift-card-actions .shift-cancel { margin: 0; }
/* Each card carries a slight tint of its role color at rest, deepening on
 * hover so it reads as clickable. Done with a pseudo-element overlay
 * (z-index:-1 keeps it under the card text) rather than color-mix, so it
 * tints in every browser. Same recipe is reused for the month chips below. */
.schedgrid .shift[data-shift-id] { position: relative; isolation: isolate; }
.schedgrid .shift[data-shift-id]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--shift-color, #f59e0b);
    opacity: 0.1;                 /* slight always-on fill */
    transition: opacity 0.12s ease;
    pointer-events: none;
    z-index: -1;
}
.schedgrid .shift[data-shift-id]:hover::after { opacity: 0.24; }  /* darken on hover */
/* "start –" stays together as one unit and "end +1" as another, with a
   wrap point only BETWEEN them: wide column = one line, narrow column =
   two clean lines ("3:00pm –" / "8:30pm"). */
.shift-seg { display: inline-block; white-space: nowrap; }
.shift-role { color: var(--muted); }
.shift-notes { font-style: italic; }
.shift-actions { display: flex; gap: 0.6rem; font-size: 0.78rem; }
.shift-cancel { margin-left: auto; }
.cancel-btn { color: #f87171; font-size: 0.9rem; line-height: 1; padding: 0; }
/* History affordance — small ⓘ button on each shift card. Sits to the
 * left of the cancel ✕. Muted by default; brightens on hover so it
 * doesn't compete with the time + role text. */
.shift-history-btn {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1;
    padding: 0;
    margin-left: auto;
}
.shift-history-btn:hover { color: var(--accent); }
/* When both the history button + cancel form are present, the cancel
 * form already has margin-left:auto; reset the history button to a
 * normal spacing so they sit adjacent rather than spread apart. */
.shift-head .shift-history-btn + .shift-cancel { margin-left: 0; }

/* Shift-history modal body (fetched fragment).
 * Summary header sits above a vertical timeline of audit events. */
.shift-history-summary {
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 0.6rem 0.8rem;
    margin: 0.5rem 0 0.75rem;
    background: rgba(245, 158, 11, 0.04);
}
.shift-history-summary .role-pill {
    display: inline-block;
    border: 1px solid;
    border-radius: 0.4rem;
    padding: 0.05rem 0.45rem;
    font-size: 0.78rem;
    margin-right: 0.3rem;
}
.shift-history-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--border);
    padding-left: 0.8rem;
}
.shift-history-timeline .history-event {
    position: relative;
    padding: 0.45rem 0;
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}
.history-event + .history-event {
    border-top: 1px dashed rgba(148, 163, 184, 0.18);
}
.history-icon {
    font-size: 1.05rem;
    line-height: 1.3;
    min-width: 1.4rem;
    text-align: center;
}
.history-body { flex: 1; }
.history-headline { line-height: 1.3; }

.dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #475569;
    vertical-align: middle;
}
.dot-draft { background: #94a3b8; }
.dot-published { background: #22c55e; }

.muted-link { color: var(--muted) !important; }

.small { font-size: 0.85rem; }

/* Admin per-shift punch buttons on the schedule grid. The .shift-punch
 * row sits at the bottom of the card; the actual button text is small
 * and color-coded by action. Hidden until the card is hovered so the
 * grid stays tight when not actively punching. */
.shift-punch {
    display: none;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.18);
    font-size: 0.72rem;
}
.shift:hover .shift-punch { display: flex; }
.punch-in-btn { color: #4ade80; font-weight: 600; }
.punch-out-btn { color: #fbbf24; font-weight: 600; }
.punch-done { color: #94a3b8; font-style: italic; }
@media (hover: none) {
    .shift-punch { display: flex; }
}

/* Inline request pills — claim/trade names shown directly on shift cards + month chips */
.shift-request-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.22rem;
    margin-top: 0.35rem;
    padding-top: 0.3rem;
    border-top: 1px dashed rgba(249, 115, 22, 0.35);
}
.req-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.13rem 0.42rem;
    border-radius: 0.3rem;
    font-size: 0.67rem;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.45);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s;
    line-height: 1.3;
}
.req-pill:hover { background: rgba(245, 158, 11, 0.38); }
.req-pill-trade {
    background: rgba(167, 139, 250, 0.18);
    border-color: rgba(167, 139, 250, 0.45);
}
.req-pill-trade:hover { background: rgba(167, 139, 250, 0.38); }
.req-pill-warn {
    color: #fb923c;
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.5);
}
.req-pill-warn:hover { background: rgba(249, 115, 22, 0.32); }

/* Month chip pills (more compact) */
.chip-request-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin-top: 0.18rem;
}
.chip-request-pills .req-pill {
    font-size: 0.58rem;
    padding: 0.07rem 0.25rem;
}

/* Manual-punch form (free-form admin-created time_clock entries) */
.manual-punch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Payroll pending card — accumulated since last lock + future estimate.
 * Amber border + tinted bg to telegraph "PENDING" at a glance. */
.pending-card {
    border-left: 3px solid #fbbf24;
    background: rgba(251, 191, 36, 0.04);
}
/* Rows in the pending card's tables are click-to-correct on /my-paystubs.
 * The .tc-row class already exists for payroll-period editing; reusing it
 * here gives staff the same hover affordance. */
/* Day notes — admin-set per-date messages staff see on their schedule. */
.day-note-banner {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #7dd3fc;
    border-radius: 0.35rem;
    padding: 0.25rem 0.45rem;
    font-size: 0.78rem;
    margin: 0.25rem 0;
}
/* Admin week-grid day-note row — sits above Open/Unassigned. Each cell
 * is a borderless inline text box that only shows its frame on focus,
 * so it reads as editable text in the grid. */
.schedrow.day-note-row .cell.day-note-cell {
    padding: 0.15rem 0.2rem;
}
.day-note-inline { margin: 0; }
.day-note-input {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    color: #7dd3fc;
    font-size: 0.75rem;
    padding: 0.15rem 0.3rem;
    border-radius: 0.25rem;
}
.day-note-input::placeholder { color: var(--muted); opacity: 0.6; }
.day-note-input:hover { border-color: rgba(148,163,184,0.3); }
.day-note-input:focus {
    outline: none;
    background: #0b1220;
    border-color: rgba(245,158,11,0.5);
    color: var(--ink);
}

/* Month-view cell top row: 📝 note on the left, day number on the
 * right. Note ellipsizes; hover (title) shows the full text. */
.cell-toprow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem;
}
.cell-toprow .cell-date { flex: none; }
.cell-day-note {
    flex: 1;
    min-width: 0;
    color: #7dd3fc;
    font-size: 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Clickable note slot on the admin month grid. Empty = a faint dashed
 * "＋" square inviting a click; filled = the note text. Either way a
 * click opens the editor popup (and stops the cell anchor navigating). */
.month-note-slot {
    flex: 1;
    min-width: 0;
    font-size: 0.6rem;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 0.2rem;
}
.month-note-slot.filled { color: #7dd3fc; }
.month-note-slot.filled:hover { background: rgba(245,158,11,0.18); }
.month-note-slot.empty {
    color: var(--muted);
    opacity: 0;
    text-align: center;
    border: 1px dashed rgba(148,163,184,0.4);
    max-width: 1.4rem;
}
/* Reveal the empty "+" slot on cell hover so the grid stays clean but
 * the affordance is discoverable. */
.month-cell:hover .month-note-slot.empty { opacity: 0.7; }
.month-note-slot.empty:hover { opacity: 1; background: rgba(245,158,11,0.15); }

/* ＋ shift icon in the month cell top row — quiet until the cell is hovered. */
.month-add-shift {
    flex: none;
    background: none;
    border: 1px dashed var(--border);
    border-radius: 0.25rem;
    color: var(--muted);
    font-size: 0.58rem;
    line-height: 1;
    padding: 0.12rem 0.3rem;
    cursor: pointer;
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.month-cell:hover .month-add-shift { opacity: 0.85; }
.month-add-shift:hover { opacity: 1; color: var(--accent); border-color: var(--accent); }
@media (hover: none) { .month-add-shift { opacity: 0.85; } }

/* Month paste mode — every day is a paste target. */
.month-grid.paste-mode .month-cell { cursor: copy; }
.month-grid.paste-mode .month-cell:hover {
    outline: 2px dashed var(--accent);
    outline-offset: -3px;
}

/* Payroll anomaly flag — amber ⚠ on flagged timeline rows + the
 * per-staff "N flagged" count. Hover the row's ⚠ for the reasons. */
.payroll-flag {
    color: #fbbf24;
    cursor: help;
    font-weight: 700;
    margin-left: 0.3rem;
}

.pending-card table tr.tc-row { cursor: pointer; }
.pending-card table tr.tc-row:hover {
    background: rgba(245, 158, 11, 0.10);
}
.pending-card table tr.tc-row:focus {
    outline: 2px solid #f59e0b;
    outline-offset: -2px;
}

/* Location toggle on /admin/schedule — All · NY · LA. Sits below the
 * week-nav. Active option gets a brighter background to read as
 * selected, others stay muted. */
.loc-toggle {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    margin: 0.4rem 0 0.75rem;
    flex-wrap: wrap;
}
.loc-toggle .btn-secondary {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
}
.loc-toggle .btn-secondary.active {
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.55);
}

/* Collapsible pending tables on /admin/payroll. The <summary> renders
 * inline (title on the left, totals pushed to the right) so the
 * collapsed state still shows the headline number. Hides default
 * disclosure triangle in favor of a custom flex layout. */
.pending-card details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.2rem 0;
}
.pending-card details > summary::-webkit-details-marker { display: none; }
.pending-card details > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 0.4rem;
    color: var(--muted);
    transition: transform 0.15s;
}
.pending-card details[open] > summary::before { transform: rotate(90deg); }
.pending-summary-totals {
    font-size: 0.95rem;
    color: var(--ink);
}

/* Close-by callout — sits above the pending cards, tells admin the
 * deadline to lock the books so Paychex has 3 biz days to process.
 * Amber by default; flips red when today is on or past the close-by
 * date (.overdue) so the user can't miss it. */
.close-by-callout {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    padding: 0.65rem 0.9rem;
    margin: 0 0 1rem;
    border: 1px solid rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.08);
    border-radius: 0.4rem;
    font-size: 0.95rem;
}
.close-by-callout.overdue {
    border-color: rgba(248, 113, 113, 0.55);
    background: rgba(248, 113, 113, 0.10);
}
.close-by-callout strong { color: var(--ink); }

/* Flash banner — one-shot success/info message shown above a page after
 * a redirect-with-message (e.g. 'Published 8 drafts' after Publish quietly).
 * Reload of the page kills it since the ?flash= query is gone. */
.flash-banner {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 0.4rem;
    padding: 0.65rem 0.9rem;
    margin: 0 0 1rem;
    font-size: 0.95rem;
}
/* Locked-period warning — shown when an admin action was blocked because
   the target punch falls inside a locked (exported) pay period. */
.flash-locked {
    background: rgba(239, 68, 68, 0.13);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.45);
    font-weight: 600;
}

/* ----------------------------------------------------------------------
 * Mobile responsive helpers (breakpoint: 720px)
 *
 * .desktop-only — visible only on desktop (hidden below 720px)
 * .mobile-only  — visible only on mobile (hidden at 721px+)
 *
 * Use these to swap content depending on screen size. The admin UI uses
 * them for: hiding Payroll on mobile (data-heavy; meant for sit-down
 * sessions), compacting Claims & Trades tables, and showing collapse
 * affordances on Staff / Roles rows.
 * -------------------------------------------------------------------- */
.mobile-only { display: none; }
@media (max-width: 720px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block; }
}

/* "Open on desktop" notice card shown on mobile in place of pages
 * that aren't worth designing for phones (Payroll). */
.mobile-redirect-notice {
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: 0.5rem;
    color: var(--muted);
    text-align: center;
    margin: 1rem 0;
}
.mobile-redirect-notice strong { color: var(--ink); display: block; margin-bottom: 0.25rem; }

/* Collapsed admin table rows on mobile (Staff, Roles).
 * Each row gets a tap target — admin.js toggles .expanded on the row.
 * In collapsed state, only the cells with .row-primary are visible.
 * Expanded: all cells visible + the toggle indicator flips. */
@media (max-width: 720px) {
    table.grid.collapsible tbody tr td:not(.row-primary):not(.row-expand) {
        display: none;
    }
    /* When the row is expanded, hidden cells switch BACK to display:block
     * (not table-cell — that'd put them on a horizontal table-row track
     * pushing content off-screen on narrow widths). */
    table.grid.collapsible tbody tr.expanded td:not(.row-expand) {
        display: block;
    }
    table.grid.collapsible tbody tr.expanded {
        background: rgba(245, 158, 11, 0.04);
    }
    .row-expand {
        text-align: center;
        color: var(--muted);
        cursor: pointer;
        user-select: none;
        padding: 0.45rem 0.5rem !important;
        border-top: 1px dashed rgba(148, 163, 184, 0.25);
        margin-top: 0.25rem;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
    }
    .row-expand::before {
        content: "▾ more";
        display: inline-block;
        transition: transform 120ms ease;
    }
    tr.expanded .row-expand::before {
        content: "▴ less";
    }
    /* Hide table header on mobile when in collapsed mode — labels live
     * inside each cell via data-label instead. */
    table.grid.collapsible thead { display: none; }
    table.grid.collapsible tbody tr {
        display: block;
        border-bottom: 1px solid var(--border);
        padding: 0.4rem 0;
    }
    table.grid.collapsible tbody tr td {
        display: block;
        padding: 0.25rem 0.5rem;
        border: none;
    }
    table.grid.collapsible tbody tr td[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--muted);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-right: 0.3rem;
    }
    table.grid.collapsible tbody tr td.row-primary {
        font-size: 1rem;
        padding: 0.5rem;
    }

    /* Roles: one compact row of four equal quarters —
       Name · Pay rate · Color · More. */
    .roles-grid tbody tr {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.55rem 0.6rem;
    }
    .roles-grid tbody tr td {
        display: block !important;
        padding: 0.1rem 0 !important;
        border: none;
        font-size: 0.8rem;
        flex: 1 1 0 !important;
        min-width: 0;
        text-align: left;
    }
    .roles-grid tbody tr td::before { display: none !important; }
    /* Truncate only the text cells; the Actions cell must NOT clip or
       the More ▾ popover gets cut off and looks dead. */
    .roles-grid tbody tr td:first-child,
    .roles-grid td[data-label="Pay rate"],
    .roles-grid td[data-label="Color"] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .roles-grid tbody tr td:first-child { font-weight: 600; }
    .roles-grid td[data-label="Actions"] { overflow: visible !important; }
    .roles-grid td[data-label="Actions"] .row-menu > summary {
        padding: 0.2rem 0;
        font-size: 0.8rem;
    }
    /* The popover would otherwise be clipped by the table/card edge —
       fix it to the viewport-right instead of the tiny quarter cell. */
    .roles-grid td[data-label="Actions"] .row-menu-popover {
        right: 0.6rem;
    }
    .roles-grid td[data-label="Location"],
    .roles-grid td[data-label="Status"],
    .roles-grid td.row-expand {
        display: none !important;
    }
}

/* Approvals tables: drop secondary columns on mobile, leaving just the
 * essential signal (staff + shift + action buttons). */
@media (max-width: 720px) {
    .approvals-table th.col-secondary,
    .approvals-table td.col-secondary { display: none; }
    .approvals-table thead th { font-size: 0.7rem; padding: 0.3rem 0.4rem; }
    .approvals-table td { padding: 0.4rem; vertical-align: top; }
    .approvals-table .role-pill,
    .approvals-table .tag-chip { font-size: 0.7rem; padding: 0.05rem 0.4rem; }
}

/* --- Mobile schedule (admin_schedule.html .mobile-only block) ---
 * Vertical day stack matching the Homebase mobile pattern. Each day
 * is a section with a + button to add a shift, and shifts inside are
 * card rows with time | initials avatar | name + role + hours + status.
 * Only renders below the 720px breakpoint. */
/* Day-jump bar — sticky row of 7 buttons above the mobile week list */
.mobile-day-jump {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--panel);
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--border);
    border-radius: 0.5rem 0.5rem 0 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.mobile-day-jump::-webkit-scrollbar { display: none; }
.mdj-btn {
    flex: 1 1 0;
    min-width: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 0.3rem 0.2rem;
    cursor: pointer;
    color: var(--muted);
    transition: background 80ms, border-color 80ms;
}
.mdj-btn:active { background: rgba(245,158,11,0.15); }
.mdj-btn.today {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(245,158,11,0.1);
}
.mdj-wd {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.mdj-dt {
    font-size: 0.65rem;
}

.mobile-day-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0.75rem;
}
.mobile-day {
    background: rgba(245, 158, 11, 0.02);
    border-radius: 0.5rem;
    padding: 0.75rem;
}
.mobile-day.today {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.mobile-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 0.75rem;
}
.mobile-day-head h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink);
    font-weight: 600;
}
.mobile-day-head .badge {
    margin-left: 0.4rem;
    font-size: 0.6rem;
}
.mobile-day-add {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent);
    border: 1px solid rgba(245, 158, 11, 0.4);
    width: 2rem;
    height: 2rem;
    border-radius: 0.4rem;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}
.mobile-day-add:hover { background: rgba(245, 158, 11, 0.25); }
.mobile-day-empty {
    padding: 0.6rem 0.4rem;
    font-style: italic;
    margin: 0;
}
.mobile-shift-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mobile-shift {
    display: grid;
    grid-template-columns: 3.5rem 2.5rem 1fr auto;
    gap: 0.6rem;
    align-items: center;
    background: var(--panel);
    border-left: 3px solid var(--accent);
    border-radius: 0.4rem;
    padding: 0.6rem 0.7rem;
}
.mobile-shift.unassigned {
    border-left-style: dashed;
}
/* Orphan punch in the mobile day-stack — dashed edge + slate tint so
 * it's visually clearly "an actual punch, not a planned shift". The
 * PUNCH pill in the card body is the explicit label; this is the
 * at-a-glance cue. Tappable (shared click-to-edit adapter). */
.mobile-shift.orphan-punch {
    border-left-style: dashed;
    background: rgba(148, 163, 184, 0.06);
    cursor: pointer;
}
.mobile-shift.orphan-punch.needs-approval {
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.45);
}
.mobile-shift.status-draft {
    opacity: 0.85;
    background: rgba(0, 0, 0, 0.18);
}
.mobile-shift-time {
    font-size: 0.85rem;
    line-height: 1.2;
    color: var(--ink);
    text-align: right;
}
.mobile-shift-time .muted { font-size: 0.75rem; }
.mobile-shift-avatar {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.2);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}
.mobile-shift-avatar.avatar-open {
    background: rgba(251, 191, 36, 0.18);
    color: #fbbf24;
}
.open-door-glyph {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}
.mobile-shift-body {
    min-width: 0;
    overflow: hidden;
}
.mobile-shift-name {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.mobile-shift-role {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 0.15rem;
}
.mobile-shift-role .dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.mobile-shift-role .tag-chip {
    font-size: 0.65rem;
    padding: 0 0.35rem;
    border-radius: 3px;
    color: #0b1220;
}
.mobile-shift-hours {
    margin-top: 0.15rem;
}
.mobile-shift-cancel { align-self: flex-start; }
.mobile-shift-cancel .cancel-btn {
    color: #f87171;
    font-size: 1rem;
    padding: 0.2rem 0.4rem;
}

/* --- notifications page: per-kind expand/collapse rows --- */
.email-kind-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* One layout, every width:
   line 1 = [✓] name …………… [Email][Push]
   line 2 = ▸ description (white) — expands to the sample draft
   line 3 = audience pill (who it goes to).
   Each row is a distinct card with a faint alternating tint so the
   three lines clearly belong together. */
.email-kind-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    padding: 0.6rem 0.75rem;
}
.email-kind-row:nth-child(odd) { background: rgba(245, 158, 11, 0.045); }
.email-kind-row:nth-child(even) { background: rgba(148, 163, 184, 0.06); }
.email-kind-onoff { order: 1; }
.email-kind-name  { order: 2; }
.email-kind-test {
    order: 3;
    margin: 0 0 0 auto;   /* push the buttons to the right of line 1 */
    flex-shrink: 0;
    display: flex;
    gap: 0.35rem;
}
.email-kind-row .email-kind { order: 4; flex-basis: 100%; min-width: 0; }
.email-kind-audience { order: 5; flex-basis: 100%; }
.email-kind-test button {
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    white-space: nowrap;
}
.email-kind-subject { color: var(--ink); }
.email-kind {
    /* Sits inside the row card now — no own border/fill, just a top
       divider so the description reads as line 2. */
    border: none;
    border-top: 1px dashed var(--border);
    border-radius: 0;
    background: transparent;
    overflow: hidden;
    margin-top: 0.15rem;
}
.email-kind > summary {
    cursor: pointer;
    padding: 0.7rem 0.9rem;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    user-select: none;
}
.email-kind > summary::-webkit-details-marker { display: none; }
.email-kind > summary::before {
    content: "›";
    color: var(--muted);
    font-size: 1.1rem;
    transition: transform 150ms ease;
    display: inline-block;
    width: 0.9rem;
    text-align: center;
    flex-shrink: 0;
}
.email-kind[open] > summary::before { transform: rotate(90deg); }
.email-kind > summary:hover { background: rgba(245, 158, 11, 0.09); }
.email-kind-name {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.email-kind-subject { color: var(--ink); }
.shift-coworkers {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}
.shift-coworkers .cw-label {
    font-size: 0.72rem;
    color: var(--muted);
    width: 100%;
    margin-bottom: 0.1rem;
}
.coworker-chip {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    border-radius: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink);
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.coworker-chip .cw-role,
.chip-coworkers .cw-role {
    font-weight: 400;
    opacity: 0.72;
    font-size: 0.68rem;
}
.chip-onnow, .chip-worked {
    font-size: 0.7rem;
    margin-left: 0.25rem;
    vertical-align: middle;
}
.chip-worked { color: #4ade80; font-weight: 700; }
.chip-actual {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.68rem;
    white-space: nowrap;
}
.chip-onnow .chip-actual { color: #4ade80; }
.chip-coworkers {
    margin-top: 0.15rem;
    font-size: 0.62rem;
    line-height: 1.25;
    color: var(--ink);
    background: rgba(245, 158, 11, 0.14);
    border-radius: 0.2rem;
    padding: 0.1rem 0.3rem;
    /* Wrap (don't truncate) so every name shows; the cell grows. */
    white-space: normal;
    overflow-wrap: anywhere;
}
.push-nudge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: #0b1220;
    border: 1px solid var(--accent);
    border-radius: 0.6rem;
    padding: 0.7rem 1rem;
    margin: 0 0 1rem;
}
.push-nudge-msg { flex: 1 1 16rem; font-size: 0.9rem; }
.push-nudge-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.push-nudge-actions .btn { padding: 0.4rem 0.9rem; font-size: 0.9rem; }
.notif-toast {
    position: fixed;
    left: 50%;
    bottom: calc(1.25rem + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(1rem);
    background: #0b1220;
    color: var(--ink);
    border: 1px solid var(--accent);
    border-radius: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    max-width: 90vw;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease;
    z-index: 200;
}
.notif-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.email-kind-onoff {
    flex-shrink: 0;
    margin: 0;
    display: flex;
    align-items: center;
    padding-top: 0.7rem;
}
.email-kind-onoff input { width: 1.15rem; height: 1.15rem; cursor: pointer; }
.email-kind-row.kind-off .email-kind { opacity: 0.5; }
.email-kind-audience {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #0b1220;
    color: var(--muted);
    font-size: 0.72rem;
    white-space: nowrap;
}
.email-kind[open] > summary { border-bottom: 1px solid var(--border); }
.email-kind .email-preview-html,
.email-kind .email-preview-text {
    margin: 0;
    border-radius: 0;
}
.email-kind > details, .email-kind > p { margin: 0; padding: 0.6rem 0.9rem; }
.email-kind > p { background: rgba(0, 0, 0, 0.15); }

/* --- custom date picker (datepicker.js) ---
 * Replaces the tiny native macOS calendar popup with a big themed
 * month grid. Mobile keeps the native picker — that's the better UX
 * with a coarse pointer. */
.tas-datepicker {
    position: absolute;
    z-index: 200;
    width: 320px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    padding: 0.75rem;
    color: var(--ink);
    user-select: none;
}
.tas-dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.tas-dp-title {
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    flex: 1;
}
.tas-dp-nav {
    background: rgba(245, 158, 11, 0.1);
    color: var(--accent);
    border: 1px solid rgba(245, 158, 11, 0.35);
    width: 2rem;
    height: 2rem;
    border-radius: 0.4rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 100ms ease;
}
.tas-dp-nav:hover { background: rgba(245, 158, 11, 0.22); }
.tas-dp-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}
.tas-dp-dow {
    text-align: center;
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    padding: 0.25rem 0;
}
.tas-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.tas-datepicker-month { width: 260px; }
.tas-dp-monthgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 0.5rem;
}
.tas-dp-month {
    padding: 0.7rem 0;
    background: rgba(245, 158, 11, 0.04);
    color: var(--ink);
    border: 1px solid transparent;
    border-radius: 0.4rem;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 100ms ease, border-color 100ms ease;
}
.tas-dp-month:hover {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.5);
}
.tas-dp-month.today { border-color: rgba(245, 158, 11, 0.6); }
.tas-dp-month.selected {
    background: var(--accent);
    color: #0b1220;
    font-weight: 700;
}
.tas-dp-day {
    aspect-ratio: 1 / 1;
    background: rgba(245, 158, 11, 0.04);
    color: var(--ink);
    border: 1px solid transparent;
    border-radius: 0.4rem;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 100ms ease, border-color 100ms ease;
    padding: 0;
}
.tas-dp-day:hover:not(.disabled) {
    background: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.5);
}
.tas-dp-day.out { color: var(--muted); opacity: 0.45; }
.tas-dp-day.today {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}
.tas-dp-day.selected {
    background: var(--accent);
    color: #0b1220;
    border-color: var(--accent);
    font-weight: 600;
}
.tas-dp-day.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.tas-dp-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
}
.tas-dp-foot-btn {
    background: transparent;
    color: var(--muted);
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.3rem;
}
.tas-dp-foot-btn:hover { color: var(--ink); background: rgba(148,163,184,0.1); }

/* --- custom time picker (timepicker.js) — snap-scroll wheel ---
 * Hour / Minute columns are scroll-snap wheels: whatever sits in the
 * center band is selected (no click needed). AM/PM are two buttons.
 * Item/viewport heights here MUST match ITEM/LIST_H in timepicker.js. */
.tas-timepicker {
    position: absolute;
    z-index: 200;
    width: 236px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    padding: 0.6rem;
    color: var(--ink);
    user-select: none;
}
.tas-tp-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; }
.tas-tp-col { display: flex; flex-direction: column; min-width: 0; }
.tas-tp-lab {
    text-align: center;
    font-size: 0.65rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    height: 0.9rem;
    margin-bottom: 0.3rem;
}
.tas-tp-wheel { position: relative; height: 170px; }
.tas-tp-list {
    height: 170px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;          /* hide for the clean wheel look */
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.tas-tp-list::-webkit-scrollbar { display: none; }
.tas-tp-spacer { height: 68px; flex: none; }   /* (170 - 34) / 2 */
.tas-tp-opt {
    height: 34px;
    width: 100%;
    flex: none;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--muted);
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    transition: color 100ms ease, font-weight 100ms ease;
}
.tas-tp-opt.selected { color: var(--ink); font-weight: 700; }
/* The center selection band, drawn over the list center row. */
.tas-tp-band {
    position: absolute;
    left: 0; right: 0;
    top: 68px;            /* = top spacer, so it frames the centered row */
    height: 34px;
    border-top: 1px solid rgba(245, 158, 11, 0.45);
    border-bottom: 1px solid rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.06);
    pointer-events: none;
}
/* AM/PM column: two buttons, vertically centered to line up with the band. */
.tas-tp-ampm { justify-content: center; gap: 0.4rem; }
.tas-tp-ampm-btn {
    height: auto;
    padding: 0.5rem 0;
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    background: rgba(245, 158, 11, 0.04);
    color: var(--ink);
}
.tas-tp-ampm-btn.selected {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
    font-weight: 700;
}
.tas-tp-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.tas-tp-done {
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.9rem;
    border-radius: 0.35rem;
}

/* --- date-range row (payroll preview, etc.) ---
 * Two date inputs side-by-side, scaled up so the native picker trigger
 * is comfortable to tap. Stacks back to two rows under 540px. */
.date-range-row {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.date-range-row .date-field {
    flex: 1 1 13rem;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
}
.date-range-row .date-arrow {
    font-size: 1.3rem;
    padding: 0 0.2rem 0.6rem;
    user-select: none;
}
.date-range-row input[type=date] {
    font-size: 1.05rem;
    padding: 0.7rem 0.85rem;
    line-height: 1.2;
    background: #0b1220;
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.date-range-row input[type=date]:hover {
    border-color: var(--accent);
}
.date-range-row input[type=date]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
/* Make the native calendar icon visible on dark themes (defaults to black
 * SVG which is invisible against our dark input bg). */
.date-range-row input[type=date]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
    cursor: pointer;
    padding: 0.15rem;
}

/* --- payroll tables --- */
table.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}
table.data-table th, table.data-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #1e293b;
    vertical-align: middle;
}
table.data-table th {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
table.data-table td.r, table.data-table th.r { text-align: right; }
.badge.ok    { background: rgba(34, 197, 94, 0.18); color: #4ade80; border: 1px solid rgba(34,197,94,0.4); }
.badge.warn  { background: rgba(251, 191, 36, 0.18); color: #fcd34d; border: 1px solid rgba(251,191,36,0.4); }

.weekhrs {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--muted);
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.12);
}
.weekhrs.over40 {
    color: #fcd34d;
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.4);
    font-weight: 600;
}

/* claims modal — opened by clicking an open published shift on the schedule grid */
.claims-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.btn-secondary.small, .link.small { padding: 0.2rem 0.55rem; font-size: 0.78rem; }

/* Orphan time_clock punches surfaced on /my-schedule + the month grid
 * — clocked in without (or outside) a scheduled shift. Slate-tinted to
 * stand apart from real shifts, but kept inline with them so the
 * staffer doesn't lose track of when they worked. */
.staff-week .day-col .shift.orphan-punch {
    background: rgba(148, 163, 184, 0.08);
    border-left-style: dashed;
}

/* Actual in/out shown below scheduled times once a punch lands on a
 * shift. Smaller + muted so the scheduled times remain the headline,
 * with the actual numbers as confirmation. */
.shift-actual {
    margin-top: 0.15rem;
    font-size: 0.78rem;
}

/* Click-to-edit on the payroll preview + period detail pages. Rows in
 * .tc-editable tables get a hover state + pointer to signal they're
 * clickable. Inspired by Homebase's Pay period review screen. */
table.tc-editable tr.tc-row { cursor: pointer; }
table.tc-editable tr.tc-row:hover {
    background: rgba(245, 158, 11, 0.08);
}
table.tc-editable tr.tc-row:focus {
    outline: 2px solid #f59e0b;
    outline-offset: -2px;
}

/* Read-only timeline rows — shift-only no-shows + locked-period rows.
 * No pointer, no hover highlight. Shift-only rows are tinted slate so
 * admin can spot "person was scheduled but never clocked in" at a glance. */
table.data-table tr.tc-row-readonly { cursor: default; }
table.data-table tr.tc-row-noshow {
    background: rgba(148, 163, 184, 0.08);
}
table.data-table tr.tc-row-noshow td:first-child::before {
    content: "·";
    color: #94a3b8;
    margin-right: 0.4rem;
    font-weight: bold;
}
/* A no-show that's still in an open period is clickable to backfill a
 * punch (it carries .tc-row too). Swap the inert dot for a sky "+" so the
 * affordance is obvious. */
table.data-table tr.tc-row.tc-row-noshow td:first-child::before {
    content: "+";
    color: #f59e0b;
}
/* Unscheduled punches (clocked in but no matching shift) get an amber
 * left edge to flag them — these are the rows admin most often wants
 * to inspect (wrong shift assignment? legit overtime? new role?). */
table.data-table tr.tc-row-unscheduled {
    box-shadow: inset 3px 0 0 #fbbf24;
}

/* <dialog> modal used for the click-to-edit form. Inherits the app's
 * dark palette; backdrop dimmed via ::backdrop. */
dialog.tc-modal {
    background: var(--panel, #0f172a);
    color: var(--ink, #e2e8f0);
    border: 1px solid var(--border, #334155);
    border-radius: 0.6rem;
    padding: 1.2rem 1.4rem;
    max-width: 36rem;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
dialog.tc-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
.tc-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.tc-modal label { display: block; }
/* Theme/focus/placeholder all come from the global field baseline now —
 * the modal only needs its layout tweak: fields fill the dialog width. */
.tc-modal input:not([type="checkbox"]):not([type="radio"]),
.tc-modal select,
.tc-modal textarea {
    width: 100%;
    margin-top: 0.2rem;
}
/* …except a .dt-split (date + time pair), where they share the row. */
.tc-modal .dt-split input { width: auto; flex: 1; }

/* --- Punch controls inside the shift-history modal ------------------- */
.modal-sep {
    border: none;
    border-top: 1px solid var(--border, #334155);
    margin: 0.9rem 0;
}
.punch-modal-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.punch-modal-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted, #94a3b8);
    margin-bottom: 0.1rem;
}
.punch-status-line {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
}

/* --- Small & danger button variants ---------------------------------- */
.btn-sm {
    font-size: 0.78rem;
    padding: 0.25rem 0.7rem;
    line-height: 1.3;
}
.btn-danger {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.4);
}
.btn-danger:hover {
    background: rgba(239, 68, 68, 0.32);
    color: #fee2e2;
}

/* --- ⓘ info button overlaid on month calendar chips ----------------- */
.chip-controls {
    position: absolute;
    top: 0.1rem;
    right: 0.15rem;
    display: flex;
    gap: 0.3rem;
    z-index: 1;
}
.chip-copy-btn,
.chip-info-btn {
    background: none;
    border: none;
    padding: 0.1rem 0.25rem;
    line-height: 1;
    font-size: 1.05rem;
    color: var(--muted, #94a3b8);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s;
}
.chip-copy-btn:hover,
.chip-info-btn:hover,
.cell-chip:hover .chip-copy-btn,
.cell-chip:hover .chip-info-btn {
    opacity: 1;
    color: #f59e0b;
}

/* --- Daily digest comparison (payroll period page) --- */
details.digest-compare {
    padding: 0.75rem 1rem;
}
details.digest-compare > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.1rem 0;
}
details.digest-compare > summary::-webkit-details-marker { display: none; }
details.digest-compare > summary::before {
    content: "▶";
    font-size: 0.65rem;
    color: #94a3b8;
    transition: transform 0.15s;
    flex-shrink: 0;
}
details.digest-compare[open] > summary::before { transform: rotate(90deg); }
.digest-compare-title { font-weight: 600; }
.digest-day { margin-bottom: 0.25rem; }
.digest-day-label {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 0.1rem;
}
.digest-day-diff .digest-day-label { color: #fcd34d; }
.digest-row-diff { background: rgba(245,158,11,0.06); }

/* --- Print: staff paystub → clean black-on-white (the app is dark, so
   without this the printed PDF would be light text on white = blank) --- */
.print-only { display: none; }
@media print {
    .topbar, .navstrip, .adminnav, .nav-burger, .nav-toggle-cb, .no-print,
    #ui-toast, #ui-confirm, .push-nudge, .notif-toast { display: none !important; }
    .print-only { display: block !important; }
    html, body { background: #fff !important; color: #000 !important; }
    main { padding: 0 !important; max-width: none !important; }
    .card {
        background: #fff !important;
        border: none !important;
        color: #000 !important;
        padding: 0 0 1rem !important;
        border-radius: 0 !important;
    }
    .card h1, .card h2, .card h3, .muted,
    .data-table, .data-table td, .data-table th, strong, td, th {
        color: #000 !important;
    }
    .data-table th, .data-table td { border-bottom: 1px solid #ccc !important; }
    .paystub-print-head { margin: 0 0 1rem; font-size: 1rem; line-height: 1.5; }
    tr[style*="background"] { background: #fff !important; }
}