/* Frazil brand palette — sampled from the actual logo */
:root {
    /* Brand (from logo) */
    --brand-blue:        #0050a0;   /* primary royal blue — the wordmark */
    --brand-blue-dark:   #003d7a;
    --brand-blue-deep:   #002752;
    --brand-sky:         #60b0e0;   /* sky blue — the swoosh */
    --brand-sky-light:   #c8e4f4;
    --brand-navy:        #002752;

    /* UI */
    --bg: #f5f9fd;                  /* slight cool tint */
    --panel: #ffffff;
    --border: #d6e3ef;
    --text: var(--brand-navy);
    --muted: #657b91;

    --primary: var(--brand-blue);
    --primary-hover: var(--brand-blue-dark);
    --ok: #16a34a;
    --warn: #f59e0b;
    --danger: #dc2626;

    --room-full: #f3f4f6;           /* neutral light gray — "at goal", not "in trouble" */
    --drop-ok: #dbebf7;
    --drop-bad: #fde2e4;

    --shadow: 0 1px 3px rgba(0, 39, 82, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* --- Header + branding --- */
.app-header {
    background: var(--panel);
    padding: 0.625rem 2rem;
    border-bottom: 3px solid var(--brand-blue);
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow);
    /* Sticky: header stays visible when scrolling long Floor/Reports pages.
       z-index sits above the Floor board (pills z:1, ellipsis dropdown z:60)
       to avoid content showing through during scroll. */
    position: sticky;
    top: 0;
    z-index: 100;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-decoration: none;
    color: inherit;
}
.brand-logo {
    height: 42px;
    width: auto;
    display: block;
}
.brand-sub {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brand-blue);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-left: 0.875rem;
    border-left: 2px solid var(--border);
}

main { padding: 1.5rem 2rem; max-width: 1400px; margin: 0 auto; }

/* --- Toolbar --- */
.toolbar {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.inline-form { display: flex; gap: 0.5rem; }
.inline-form input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--brand-navy);
}
.inline-form input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 80, 160, 0.15);
}

/* --- Buttons --- */
button {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
    color: var(--text);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.15s;
}
button:hover {
    background: var(--bg);
    border-color: var(--brand-blue);
}

.btn-sm { padding: 0.25rem 0.625rem; font-size: 0.75rem; }
.btn-primary {
    background: var(--brand-blue);
    color: white;
    border-color: var(--brand-blue);
    font-weight: 600;
}
.btn-primary:hover {
    background: var(--brand-blue-dark);
    border-color: var(--brand-blue-dark);
    color: white;
}
.btn-unassign {
    background: #fff4d6;
    border-color: #ffc42c;
    color: #8a5a00;
}

/* --- Board layout --- */
.board {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 1.5rem;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: var(--shadow);
}

.panel h2 {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--brand-blue);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.empty { color: var(--muted); font-size: 0.875rem; }

/* --- Workers list --- */
.worker-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.worker {
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fafcff;
    transition: all 0.15s;
}
.worker.in {
    background: white;
    border-left: 3px solid var(--brand-blue);
    cursor: grab;
}
.worker.in:active { cursor: grabbing; }
.worker.out { opacity: 0.55; }
.worker.dragging { opacity: 0.4; }

.worker-main { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
.worker-name { font-weight: 600; color: var(--brand-navy); }

.status {
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.status-in { background: var(--brand-sky-light); color: var(--brand-blue-deep); }
.status-out { background: #f1f5f9; color: var(--muted); }

.worker-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 0.5rem;
}
.assigned-to { color: var(--brand-blue); font-weight: 600; }
.unassigned { font-style: italic; }

.worker-actions { display: flex; gap: 0.5rem; }

/* --- Rooms grid --- */
.rooms-grid {
    display: grid;
    /* Width bumped 220 → 240 → 300 per product tuning. Cards remain
       responsive; auto-fill picks column count based on available width. */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.room {
    position: relative;
    border: 2px solid var(--border);
    border-radius: 8px;
    /* Tightened padding — the header is pulled to the corners via flex so
       it sits nice and tight without fighting the old 1rem. */
    padding: 0.625rem 0.75rem 0.75rem;
    background: white;
    /* Height bumped from 140px → 150px per product request. Also makes room
       for the pill grid. */
    min-height: 150px;
    display: flex;             /* NEW: stacks header → pills → footer */
    flex-direction: column;
    transition: all 0.15s;
}
.room-full {
    background: var(--room-full);
    border-color: var(--ok);    /* green border — full = "at goal", not "bad" */
}
.room.drop-target-ok {
    border-color: var(--brand-blue);
    background: var(--drop-ok);
    box-shadow: 0 0 0 3px rgba(0, 80, 160, 0.2);
}
.room.drop-target-bad {
    border-color: var(--danger);
    background: var(--drop-bad);
}

.room-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;   /* pull name up to top, menu to top-right */
    margin-bottom: 0.375rem;
    min-height: 1.5rem;        /* reserve room for the ellipsis */
}
.room-header h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--brand-navy);
    line-height: 1.2;
    /* Truncate long room names so they don't push the ellipsis off-card */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 2rem);
}

.capacity {
    font-family: ui-monospace, monospace;
    font-size: 0.875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    background: var(--bg);
    font-weight: 600;
}
.cap-full { background: var(--ok); color: white; }

.room-workers { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; }
.room-workers li {
    padding: 0.25rem 0;
    border-bottom: 1px dashed var(--border);
}
.room-workers li:last-child { border-bottom: none; }

.room-full-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.625rem;
    font-weight: 800;
    color: var(--ok);
    letter-spacing: 0.1em;
}

/* --- Flash messages --- */
.flash {
    grid-column: 1 / -1;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}
.flash-ok {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.flash-error {
    background: var(--drop-bad);
    color: #9b1723;
    border: 1px solid #f8b4b8;
}

/* --- User bar --- */
.user-bar {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}
.user-email { color: var(--muted); }
.user-role {
    text-transform: uppercase;
    font-size: 0.625rem;
    font-weight: 800;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0.08em;
}
.role-admin  { background: #ffc42c; color: #6a4400; }
.role-editor { background: var(--brand-blue); color: white; }
.role-viewer { background: #e2ecf0; color: var(--muted); }
.logout-form { margin: 0; }

.read-only-banner {
    padding: 0.625rem 1rem;
    background: var(--brand-sky-light);
    border: 1px solid var(--brand-sky);
    border-radius: 6px;
    margin-bottom: 1.5rem;
    color: var(--brand-blue-deep);
    font-size: 0.875rem;
    text-align: center;
    font-weight: 500;
}

/* --- Login page --- */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--brand-sky) 0%, var(--brand-blue) 50%, var(--brand-blue-deep) 100%);
    padding: 1rem;
}
.login-card {
    background: white;
    padding: 2.5rem 2.5rem 2rem 2.5rem;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 39, 82, 0.35);
    width: 400px;
    text-align: center;
}
.login-logo {
    height: 72px;
    width: auto;
    margin: 0 auto 0.5rem auto;
    display: block;
}
.login-subtitle {
    color: var(--muted);
    margin: 0 0 1.75rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}
.login-form { display: flex; flex-direction: column; gap: 0.875rem; text-align: left; }
.login-form label {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.7rem;
    color: var(--brand-blue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.login-form input {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--brand-navy);
}
.login-form input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 80, 160, 0.2);
}
.login-form button {
    padding: 0.75rem;
    font-size: 0.95rem;
    margin-top: 0.75rem;
    border-radius: 8px;
}

/* ============================================================
   Stage F3 additions: nav, floor view, worker table, setup page
   ============================================================ */

/* --- Top nav --- */
.main-nav {
    display: flex;
    gap: 1.25rem;
    margin-left: 1.5rem;
    align-self: stretch;
    align-items: stretch;
}
.nav-link {
    display: flex;
    align-items: center;
    padding: 0 0.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -3px; /* overlap header's 3px bottom border */
    transition: color 0.15s, border-color 0.15s;
}
.nav-link:hover { color: var(--brand-blue); }
.nav-link.active {
    color: var(--brand-blue);
    border-bottom-color: var(--brand-blue);
}

/* --- Empty state --- */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.empty-state h2 {
    margin: 0 0 0.5rem 0;
    color: var(--brand-navy);
}
.empty-state p {
    color: var(--muted);
    margin: 0;
}
.empty-state a {
    color: var(--brand-blue);
    font-weight: 600;
}

/* --- Floor toolbar (warehouse picker) --- */
.floor-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.floor-toolbar label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.field-label {
    font-size: 0.7rem;
    color: var(--brand-blue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.floor-toolbar select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--brand-navy);
    background: white;
    cursor: pointer;
    min-width: 200px;
}
.floor-toolbar select:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 80, 160, 0.15);
}

/* --- Floor board (rooms on top, workers below) --- */
.floor-board {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section-heading {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    color: var(--brand-blue);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.floor-section, .workers-section {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: var(--shadow);
}

/* --- Worker table --- */
.worker-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.worker-table thead th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 700;
    border-bottom: 1px solid var(--border);
}
.worker-table tbody td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.worker-table tbody tr:last-child td {
    border-bottom: none;
}
.worker-table tbody tr.out {
    opacity: 0.6;
}
.worker-table .col-name {
    font-weight: 600;
    color: var(--brand-navy);
}
.worker-table .col-actions {
    text-align: right;
    white-space: nowrap;
}
.worker-table .col-actions button {
    margin-left: 0.375rem;
}

.inline-assign { margin: 0; }
.inline-assign select {
    padding: 0.3125rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--brand-navy);
    background: white;
    cursor: pointer;
    min-width: 180px;
}
.inline-assign select:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 2px rgba(0, 80, 160, 0.12);
}

/* --- Setup page --- */
.page-title {
    margin: 0 0 0.25rem 0;
    color: var(--brand-navy);
    font-size: 1.5rem;
    font-weight: 700;
}
.page-lede {
    margin: 0 0 1.5rem 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.setup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.setup-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.setup-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    box-shadow: var(--shadow);
}
.setup-card h3 {
    margin: 0 0 1rem 0;
    font-size: 0.95rem;
    color: var(--brand-navy);
    font-weight: 700;
}

.stacked-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.stacked-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--brand-blue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.stacked-form input,
.stacked-form select {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--brand-navy);
    background: white;
}
.stacked-form input:focus,
.stacked-form select:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 80, 160, 0.15);
}
.stacked-form button {
    margin-top: 0.5rem;
    padding: 0.625rem;
    font-size: 0.875rem;
}
.stacked-form .optional {
    font-weight: 400;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
}

/* --- Simple summary lists/tables in setup --- */
.simple-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
}
.simple-list li {
    padding: 0.375rem 0;
    border-bottom: 1px dashed var(--border);
    color: var(--brand-navy);
}
.simple-list li:last-child {
    border-bottom: none;
}
.muted { color: var(--muted); font-size: 0.8rem; }

.simple-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.simple-table th {
    text-align: left;
    padding: 0.375rem 0.5rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 700;
    border-bottom: 1px solid var(--border);
}
.simple-table td {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--brand-navy);
}
.simple-table tr:last-child td {
    border-bottom: none;
}

/* --- Editable list rows on Setup page --- */
.editable-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.editable-row {
    padding: 0.625rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fafdff;
}
.editable-row .row-header {
    margin-bottom: 0.375rem;
}
.row-subtag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--brand-blue);
    background: var(--brand-sky-light);
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.row-meta {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--muted);
    font-style: italic;
}

.inline-edit-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
}
.inline-edit-form input[type="text"],
.inline-edit-form input[type="number"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--brand-navy);
    background: white;
}
.inline-edit-form input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 2px rgba(0, 80, 160, 0.12);
}
.inline-edit-form input[type="number"] {
    flex: 0 0 80px;
}
.inline-edit-form-two-col input[type="text"] {
    flex: 1 1 120px;
}

.row-actions {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.btn-danger {
    background: #fde2e4;
    color: #9b1723;
    border-color: #f8b4b8;
}
.btn-danger:hover {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

/* ============================================================
   F5c/d: Admin users page + Account page
   ============================================================ */

/* --- Temp password callout --- */
.temp-password-callout {
    background: #fff4d6;
    border: 2px solid var(--brand-yellow, #ffc42c);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.temp-password-header {
    font-weight: 700;
    color: #6a4400;
    font-size: 0.9rem;
    margin-bottom: 0.625rem;
}
.temp-password-body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.9rem;
}
.temp-password-value {
    background: white;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-family: ui-monospace, monospace;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid #e5c373;
    color: var(--brand-navy);
    user-select: all;
}
.temp-password-footer {
    margin-top: 0.625rem;
    color: #6a4400;
    font-size: 0.75rem;
    font-style: italic;
}

/* --- Users table --- */
.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.users-table thead th {
    text-align: left;
    padding: 0.5rem 0.625rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 700;
    border-bottom: 1px solid var(--border);
}
.users-table tbody td {
    padding: 0.625rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.users-table tbody tr:last-child td { border-bottom: none; }
.users-table tr.user-inactive { opacity: 0.55; }

.user-email-cell { font-weight: 600; color: var(--brand-navy); }

.badge-pill {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}
.badge-warn { background: #fff4d6; color: #8a5a00; }

.role-readonly {
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.625rem;
    font-weight: 800;
    padding: 0.1875rem 0.625rem;
    border-radius: 999px;
    letter-spacing: 0.08em;
}

.inline-form-tight { margin: 0; display: inline-block; }
.inline-form-tight select {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: inherit;
    background: white;
    cursor: pointer;
}

/* --- Access multiselect --- */
.access-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
    margin: 0;
}
.checkbox-label,
.checkbox-label-tight {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--brand-navy);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.checkbox-label-tight {
    padding: 0.125rem 0.5rem;
    background: var(--bg);
    border-radius: 4px;
    border: 1px solid var(--border);
}
.checkbox-label input,
.checkbox-label-tight input { margin: 0; }

fieldset.warehouse-access {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
}
fieldset.warehouse-access legend {
    font-size: 0.7rem;
    color: var(--brand-blue);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 0.375rem;
}

/* --- Reset password details/menu --- */
.user-actions-cell {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: stretch;
    min-width: 180px;
}
.reset-details summary {
    list-style: none;
    cursor: pointer;
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
}
.reset-details summary::-webkit-details-marker { display: none; }
.reset-details[open] summary { background: var(--bg); border-color: var(--brand-blue); }
.reset-menu {
    margin-top: 0.375rem;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.reset-direct-form {
    display: flex;
    gap: 0.25rem;
    margin: 0;
}
.reset-direct-form input {
    flex: 1;
    min-width: 0;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8rem;
}

/* --- Force-change banner --- */
.force-change-banner {
    padding: 1rem 1.25rem;
    background: var(--brand-red, #dc2626);
    color: white;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* ============================================================
   F6: Reports page + heat map
   ============================================================ */

.reports-filters {
    margin-bottom: 1rem;
}
.reports-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}
.reports-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.reports-form input[type="datetime-local"],
.reports-form select {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--brand-navy);
    background: white;
}
.reports-form button {
    padding: 0.5rem 1rem;
}

.quick-ranges {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
    flex-wrap: wrap;
}
.quick-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.quick-range {
    text-decoration: none;
    color: var(--brand-navy);
}

.report-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.report-section-header h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--brand-navy);
    font-weight: 700;
}
.report-section-header .row-actions {
    margin-left: 0;
}

.heat-legend {
    margin: 0 0 0.75rem 0;
    font-size: 0.8rem;
}

.heat-map-scroll {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
}
.heat-map {
    border-collapse: collapse;
    font-size: 0.75rem;
}
.heat-map th,
.heat-map td {
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.heat-map th.heat-room-label,
.heat-map td.heat-room-label {
    position: sticky;
    left: 0;
    background: white;
    padding: 0.375rem 0.5rem;
    font-weight: 600;
    color: var(--brand-navy);
    text-align: left;
    z-index: 1;
    border-right: 2px solid var(--brand-blue);
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
.heat-map th.heat-cap-col,
.heat-map td.heat-cap-col {
    position: sticky;
    left: 140px;
    background: white;
    padding: 0.25rem 0.375rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.7rem;
    z-index: 1;
    border-right: 2px solid var(--brand-blue);
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    box-sizing: border-box;
}
/* The <th> in the header row needs a background that matches the header row
   color when sticky — otherwise time columns scroll under it visibly. */
.heat-map thead th.heat-room-label,
.heat-map thead th.heat-cap-col {
    background: var(--bg);
    z-index: 2;
}
.heat-map th.heat-time-col {
    padding: 0.375rem 0.25rem;
    font-size: 0.65rem;
    color: var(--muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    background: var(--bg);
    min-width: 36px;
}
.heat-cell {
    width: 32px;
    min-width: 32px;
    height: 28px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    cursor: default;
}
.heat-val {
    font-size: 0.7rem;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 600;
}

.heat-legend-bar {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--muted);
}
.gradient-bar {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        hsl(210, 20%, 97%),
        hsl(0, 72%, 50%)
    );
    max-width: 240px;
}

/* ============================================================
   F4: Drag-to-arrange floor layout
   ============================================================ */

.floor-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}
.floor-section-header .section-heading {
    margin-bottom: 0;
}

/* Floor header title + warehouse picker group — keeps the "Floor" label and
   the warehouse dropdown together, right side of the row still reserved for
   edit-layout / reset-layout buttons. */
.floor-section-title-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.floor-warehouse-select {
    font-size: 1rem;
    font-weight: 500;
    padding: 0.5rem 2rem 0.5rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: white;
    color: var(--brand-navy);
    min-width: 200px;
    cursor: pointer;
    /* Custom chevron instead of native arrow */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23335577' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.floor-warehouse-select:hover {
    border-color: var(--brand-blue);
}
.floor-warehouse-select:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 110, 214, 0.15);
}

/* Single-warehouse case: display the name as a label instead of a picker. */
.floor-warehouse-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-navy);
    padding: 0.5rem 0.875rem;
    background: var(--brand-sky-light);
    border-radius: 8px;
}

.edit-layout-toggle {
    font-size: 0.8rem;
}
.edit-layout-toggle[data-edit-mode="true"] {
    background: var(--brand-blue);
    color: white;
    border-color: var(--brand-navy);
}

/* Absolute layout: used in edit mode (with grid background), and also in
   static mode when rooms have saved positions (so the arranged layout
   persists across reloads). */
.rooms-grid[data-edit-mode="true"],
.rooms-grid[data-positioned="true"] {
    display: block;
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0;
    min-height: 320px;
    overflow: auto;
}

/* Edit-mode only: dotted grid background signals "you can drag" */
.rooms-grid[data-edit-mode="true"] {
    background-color: #fafdff;
    background-image:
        radial-gradient(circle at 10px 10px, #d4e1ee 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0;
    min-height: 420px;
}

.rooms-grid[data-edit-mode="true"] .room,
.rooms-grid[data-positioned="true"] .room {
    position: absolute;
    /* Matches the min-width of the responsive grid so positioned and
       unpositioned layouts feel the same size. Bumped 220 → 300. */
    width: 300px;
    margin: 0;
}
.rooms-grid[data-edit-mode="true"] .room {
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: box-shadow 0.15s, transform 0.05s;
}
.rooms-grid[data-edit-mode="true"] .room:hover {
    box-shadow: 0 4px 12px rgba(0, 80, 160, 0.15);
}
.rooms-grid[data-edit-mode="true"] .room.dragging {
    cursor: grabbing;
    z-index: 10;
    box-shadow: 0 12px 24px rgba(0, 80, 160, 0.3);
    opacity: 0.92;
}
.rooms-grid[data-edit-mode="true"] .room::after {
    content: "⠿";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--muted);
    font-size: 1rem;
    opacity: 0.5;
    letter-spacing: -2px;
}

/* In edit mode, disable HTMX interactions on workers table to prevent accidental clicks
   while the user is reorganizing. Workers table stays visible but frozen. */
.floor-board[data-edit-mode-active="true"] .worker-table button,
.floor-board[data-edit-mode-active="true"] .worker-table select {
    pointer-events: none;
    opacity: 0.5;
}

/* Save-indicator — small pill that flashes when a position is saved */
.save-indicator {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--brand-blue);
    color: white;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.save-indicator.visible { opacity: 1; }
.save-indicator.error   { background: var(--danger, #c4403c); }

/* Workers / Setup page: card title row with toggle button */
.card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.card-title-row h3 {
    margin: 0;
}

.subsection-heading {
    margin: 1.25rem 0 0.75rem 0;
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
}

.inactive-list {
    margin-top: 0.5rem;
}
.editable-row.inactive {
    background: #f5f5f5;
    opacity: 0.75;
}
.inactive-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.inactive-name {
    font-weight: 500;
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.25);
}

/* ============================================================
   Hamburger menu (top-right dropdown)
   ============================================================ */

.hamburger-menu {
    position: relative;
    margin-left: 0.375rem;
}
.hamburger-menu > summary {
    list-style: none;          /* Remove the default disclosure triangle */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: white;
    color: var(--brand-navy);
    transition: background 0.15s, border-color 0.15s;
}
.hamburger-menu > summary::-webkit-details-marker { display: none; }
.hamburger-menu > summary::marker { content: ''; }  /* Firefox */
.hamburger-menu > summary:hover {
    background: var(--bg);
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}
.hamburger-menu[open] > summary {
    background: var(--brand-blue);
    border-color: var(--brand-navy);
    color: white;
}

.hamburger-dropdown {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    min-width: 200px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 39, 82, 0.12);
    padding: 0.375rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.menu-item {
    display: block;
    padding: 0.625rem 0.875rem;
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--brand-navy);
    text-decoration: none;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}
.menu-item:hover {
    background: var(--bg);
    color: var(--brand-blue);
}
.menu-item.active {
    background: var(--brand-sky-light, #eaf4fc);
    color: var(--brand-blue);
    font-weight: 600;
}

.menu-item-button {
    background: none;
    border: none;
    width: 100%;
    font-family: inherit;
    cursor: pointer;
}
.menu-item-button:hover {
    background: #fde2e4;
    color: #9b1723;
}

.menu-divider {
    height: 1px;
    background: var(--border);
    margin: 0.375rem 0;
}

.menu-logout-form {
    margin: 0;
    padding: 0;
    display: block;
}

/* ============================================================
   Priority 1 Stage C: Room state indicators + modals
   ============================================================ */

/* --- Room card states --- */

.room {
    position: relative;   /* so overlays + menu can be absolutely positioned */
}

/* DOWN state — dimmed card + red tint, click-through disabled except on menu */
.room.room-down {
    background: #fbefef;
    border-color: #e5a8a5;
    pointer-events: none;  /* disable drag/click on the card content */
}
.room.room-down .room-menu,
.room.room-down .room-workers,
.room.room-down .room-header h3 {
    pointer-events: auto;  /* but the menu/workers/title stay interactive/readable */
}
.room.room-down .room-workers {
    opacity: 0.4;
}
.room.room-down .capacity {
    background: #c4403c;
    color: white;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.room-down-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;   /* don't intercept clicks on menu */
    z-index: 2;
}

/* Override indicator (non-DOWN only) */
.room-override-note {
    position: absolute;
    bottom: 0.375rem;
    right: 0.375rem;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--brand-sky-light, #eaf4fc);
    color: var(--brand-navy);
    font-weight: 700;
    border: 1px solid var(--brand-blue);
}

/* --- Room ellipsis menu (uses <details>) --- */

.room-menu {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    z-index: 3;
}
.room-menu > summary {
    list-style: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--muted, #678);
}
.room-menu > summary::-webkit-details-marker { display: none; }
.room-menu > summary::marker { content: ''; }
.room-menu > summary:hover {
    background: rgba(0, 80, 160, 0.08);
    color: var(--brand-blue);
}
.room-menu[open] > summary {
    background: var(--brand-blue);
    color: white;
}
.room-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    min-width: 200px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 39, 82, 0.12);
    padding: 0.375rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
}
.menu-item-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.menu-item-button:disabled:hover {
    background: none;
}
.room-action-down {
    color: #9b1723;
}
.room-action-down:hover:not(:disabled) {
    background: #fde2e4;
}

/* --- Modal shell --- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 39, 82, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.modal-backdrop[hidden] { display: none; }

.modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 39, 82, 0.25);
    padding: 1.5rem;
    max-width: 420px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
.modal h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--brand-navy);
}
.modal-form[hidden] { display: none; }
.modal-form label {
    display: block;
    margin-bottom: 0.75rem;
}
.modal-form input[type="number"] {
    width: 100%;
    margin-top: 0.25rem;
}
.modal-hint {
    color: var(--muted);
    font-size: 0.8rem;
    margin: 0.5rem 0;
}
.modal-warning {
    background: #fde2e4;
    border-left: 3px solid #c4403c;
    padding: 0.625rem 0.875rem;
    margin: 0.75rem 0;
    font-size: 0.875rem;
    border-radius: 4px;
}
.modal-error {
    background: #fde2e4;
    color: #9b1723;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
.modal-error[hidden] { display: none; }
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Heat map: DOWN cells (Priority 1 Stage C) */
.heat-cell-down {
    background: #1a1a1a !important;
    color: #c4403c;
}
.heat-val-down {
    color: #e55a55;
    font-weight: 700;
    font-size: 1.1em;
}

/* ============================================================
   Room card footer (bottom-center status pill)
   Replaces the top-right capacity badge and scattered FULL/override
   notes to prevent collision with the ellipsis menu.
   ============================================================ */

.room {
    display: flex;
    flex-direction: column;
}

.room-footer {
    margin-top: auto;        /* push to bottom even with few workers */
    padding-top: 0.5rem;
    padding-bottom: 0;
    margin-bottom: -10px;    /* pull into the card's bottom padding so the pill sits near the edge */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;              /* below the dropdown (z-index: 60), above the DOWN X overlay */
}

.status-pill {
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--bg);
    color: var(--brand-navy);
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.status-pill.status-full {
    background: #ffe4b5;
    color: #7a4500;
    font-weight: 700;
}
.status-pill.status-down {
    background: #c4403c;
    color: white;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.status-pill.status-override {
    background: var(--brand-sky-light, #eaf4fc);
    color: var(--brand-navy);
    border: 1px solid var(--brand-blue);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Make the room-header cleaner now that it no longer carries the capacity pill.
   Only the h3 and the ellipsis menu live there. */
.room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.room-header h3 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;            /* so long room names truncate instead of pushing the menu */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keep the ellipsis menu in the top-right, but now as a natural flex child
   instead of absolutely positioned — avoids the overlap entirely. */
.room-menu {
    position: static;
    margin-left: auto;
}

/* The OLD `.capacity` class was used inside the room-header; we still have
   references in base CSS. Leave it declared but harmless (it now only
   appears inside status-pill in the footer). */

/* ============================================================
   Room menu dropdown stacking fix (follow-up)
   The ellipsis dropdown was opening below its card and then being
   overlapped by the NEXT row's ellipsis button. Fix:
   - make the room card the containing block (position: relative already)
     and raise its z-index when its menu is open, so the dropdown (and the
     card itself) sit above sibling cards
   - keep the dropdown anchored to the ellipsis button (top-right) but
     let it extend DOWN over the card body, so it doesn't project out
     the bottom
   ============================================================ */

/* Raise the whole card above its neighbors only while its menu is open,
   so the dropdown never hides under another card's ellipsis. */
.room:has(details.room-menu[open]) {
    z-index: 50;
}

/* The menu dropdown should overlay the card body (workers + footer)
   rather than projecting below the card. We anchor it absolutely to
   the card itself — pinned to ~40px from the top (just below the header)
   — with `right: 0` so it still aligns with the ellipsis button.

   Because the dropdown is a child of details.room-menu which is itself
   a child of .room-header inside .room (position: relative), we reach
   up two levels by positioning relative to the nearest positioned
   ancestor (the card). The card has position: relative, so that works. */
.room-menu-dropdown {
    position: absolute;
    /* Use calc from the card top: header is roughly 2.25rem tall, plus
       a small gap. This keeps the dropdown right below the ellipsis row
       across slightly varying header heights. */
    top: 2.5rem;
    right: 0.375rem;
    left: auto;
    z-index: 60;
    min-width: 180px;
    max-width: calc(100% - 0.75rem);
}

/* Make the menu container NON-positioned so its dropdown anchors to the
   card (next positioned ancestor) instead of to the summary button. */
details.room-menu {
    position: static !important;
}
/* …which means the summary button no longer controls dropdown position;
   keep it on the right edge of the header flex. */
details.room-menu > summary {
    /* summary stays as-is — it's a flex child of .room-header */
}

/* Ensure the rooms-grid doesn't trap the dropdown by clipping overflow
   in static (non-edit) mode. Edit mode is positioned/overflow:auto for
   the drag canvas, but static mode shouldn't clip at all. */
.rooms-grid:not([data-edit-mode="true"]):not([data-positioned="true"]) {
    overflow: visible;
}
/* Even in positioned/edit modes, allow the menu dropdown to escape the
   card's bounds vertically. */
.room {
    overflow: visible;
}

/* ============================================================
   Reports quick-filter toggle pills (All Hours / Include Weekends)
   ============================================================ */

.quick-filter-sep {
    color: var(--muted);
    margin: 0 0.25rem;
    font-size: 1.1em;
}

.quick-toggle {
    /* Inherits btn-sm. Extra chip-y look to distinguish from range buttons. */
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.quick-toggle-active {
    background: var(--brand-sky-light, #eaf4fc);
    border-color: var(--brand-blue);
    color: var(--brand-navy);
    font-weight: 600;
}
.quick-toggle-active:hover {
    background: var(--brand-blue);
    color: white;
}

/* ============================================================
   Setup page redesign — sidebar layout
   ============================================================ */

.setup-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2rem;
    align-items: flex-start;
    min-height: 60vh;
}

.setup-sidebar {
    position: sticky;
    top: 1rem;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 39, 82, 0.04);
}
.setup-sidebar-header {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
}
.setup-sidebar-title {
    margin: 0;
    font-size: 1.1rem;
    color: var(--brand-navy);
}

.setup-nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.setup-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    color: var(--brand-navy);
    text-decoration: none;
    font-size: 0.925rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}
.setup-nav-link:hover {
    background: var(--bg);
    color: var(--brand-blue);
}
.setup-nav-link.active {
    background: var(--brand-blue);
    color: white;
    font-weight: 600;
}
.setup-nav-link.active .setup-nav-count {
    background: rgba(255, 255, 255, 0.22);
    color: white;
}

.setup-nav-count {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    background: var(--bg);
    color: var(--muted);
    border-radius: 999px;
    min-width: 1.5rem;
    text-align: center;
}
.setup-nav-badge {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.125rem 0.375rem;
    background: #ffe4b5;
    color: #7a4500;
    border-radius: 3px;
    font-weight: 700;
}

/* Main panel */
.setup-main {
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 39, 82, 0.04);
    min-height: 400px;
}

.setup-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.setup-section-title {
    margin: 0;
    color: var(--brand-navy);
}
.setup-section-lede {
    margin: 0.25rem 0 0 0;
    color: var(--muted);
    font-size: 0.875rem;
}
.setup-section-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Add-item forms (shared by workers, rooms, warehouses) */
.inline-create-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    align-items: center;
}
.inline-create-form input[type="text"],
.inline-create-form input[type="number"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
    flex: 1 1 150px;
    min-width: 0;
}
.inline-create-form input[type="number"] {
    flex: 0 0 120px;
}

/* Search bar on Workers section */
.setup-search-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
}
.setup-search-input {
    flex: 1 1 auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
}

/* Data tables (Workers, Warehouses, Rooms-within-warehouse) */
.setup-table-wrap {
    overflow-x: auto;
    margin-bottom: 1rem;
}
.setup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.setup-table thead th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--border);
}
.setup-table tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.setup-table tbody tr:last-child td {
    border-bottom: none;
}
.setup-table input[type="text"],
.setup-table input[type="number"] {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
    width: 100%;
    max-width: 200px;
}
.setup-table .col-actions {
    white-space: nowrap;
    text-align: right;
}
.setup-table .col-actions button,
.setup-table .col-actions .btn-sm {
    margin-left: 0.25rem;
}
.inline-row-form {
    display: contents;   /* Span across the three <td>s natively */
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}
.pagination-info {
    color: var(--muted);
    font-size: 0.85rem;
}

/* Per-warehouse collapsible group */
.warehouse-group {
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.warehouse-group[open] {
    background: #fafcfe;
}
.warehouse-group-summary {
    cursor: pointer;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg);
    font-weight: 600;
    color: var(--brand-navy);
    list-style: none;
}
.warehouse-group-summary::-webkit-details-marker { display: none; }
.warehouse-group-summary::marker { content: ''; }
.warehouse-group-summary::before {
    content: "▶";
    font-size: 0.7rem;
    margin-right: 0.5rem;
    transition: transform 0.15s;
    color: var(--muted);
}
.warehouse-group[open] .warehouse-group-summary::before {
    transform: rotate(90deg);
}
.warehouse-group .warehouse-name {
    flex: 1;
}
.warehouse-group .warehouse-count {
    color: var(--muted);
    font-size: 0.825rem;
    font-weight: 500;
}
.warehouse-group > *:not(.warehouse-group-summary) {
    padding: 0 1rem 0.75rem 1rem;
}
.warehouse-group > .inline-create-form {
    padding-top: 0.75rem;
}

/* Placeholder for future sections (Calendar) */
.setup-placeholder {
    padding: 2.5rem 2rem;
    text-align: center;
    background: linear-gradient(180deg, #fafdff 0%, white 100%);
    border: 2px dashed var(--border);
    border-radius: 10px;
}
.setup-placeholder h3 {
    margin: 0 0 1rem;
    color: var(--brand-navy);
}
.setup-placeholder p {
    color: var(--muted);
    max-width: 500px;
    margin: 0.5rem auto;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Mobile: collapse the sidebar above the main panel */
@media (max-width: 720px) {
    .setup-layout {
        grid-template-columns: 1fr;
    }
    .setup-sidebar {
        position: static;
    }
    .setup-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .setup-nav-link {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ============================================================
   Mobile Floor page — tuned for warehouse leads on phones
   ============================================================ */

/* Tablet: 2-col on room grid at narrow widths */
@media (max-width: 960px) {
    .rooms-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 0.75rem;
    }
    main {
        padding: 1rem !important;
    }
}

/* Phone: single column, card-style worker rows, bigger tap targets,
   bottom-sheet modals. */
@media (max-width: 640px) {

    /* Header: tighten spacing, allow wrap; keep brand + hamburger visible */
    .app-header {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .brand-sub {
        font-size: 0.85rem;
    }
    .main-nav {
        order: 3;
        width: 100%;
        justify-content: center;
        gap: 0.25rem;
    }
    .main-nav .nav-link {
        flex: 1;
        text-align: center;
        padding: 0.625rem 0.5rem;
    }
    .user-bar {
        gap: 0.375rem;
    }
    .user-email {
        display: none;   /* email is long; keep the role chip + hamburger */
    }
    .user-role {
        font-size: 0.65rem;
        padding: 0.125rem 0.375rem;
    }

    /* Main padding */
    main {
        padding: 0.75rem !important;
    }

    /* Floor: 1-column rooms grid */
    .rooms-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .room {
        padding: 0.875rem;
        min-height: auto;
    }

    /* Edit-layout mode is a desktop-only feature — hide the button on phones */
    .edit-layout-toggle {
        display: none !important;
    }

    /* Enlarge ellipsis tap target to 44px (Apple HIG / Google A11y) */
    .room-menu > summary {
        width: 44px;
        height: 44px;
    }
    .menu-item-button {
        padding: 0.875rem 1rem;
        font-size: 0.95rem;
        min-height: 44px;
    }

    /* Room footer status pill: bigger, more readable */
    .status-pill {
        font-size: 0.8rem;
        padding: 0.3rem 0.75rem;
    }

    /* ----- Worker table → stacked cards on phone -----
       Hide the thead; each <tr> becomes a card; each <td> becomes a labeled
       row inside the card. Uses data-label attributes injected by a tiny JS
       enhancement at runtime (see app.js). Falls back to an un-styled but
       still functional table if JS is disabled. */
    .worker-table thead {
        display: none;
    }
    .worker-table, .worker-table tbody, .worker-table tr {
        display: block;
        width: 100%;
    }
    .worker-table tr {
        background: white;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 0.75rem;
        margin-bottom: 0.625rem;
        box-shadow: 0 1px 2px rgba(0, 39, 82, 0.04);
    }
    .worker-table tr.out {
        opacity: 1;
        background: #f5f5f5;
    }
    .worker-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.375rem 0;
        border-bottom: none;
        text-align: left;
    }
    .worker-table td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--muted);
        font-weight: 700;
    }
    /* Name column: label inline but takes its natural width */
    .worker-table .col-name {
        font-size: 1.05rem;
        font-weight: 700;
        flex-direction: row;
        justify-content: flex-start;
    }
    .worker-table .col-name::before {
        display: none;   /* the name alone is enough of a header */
    }
    /* Actions row: allow buttons to wrap */
    .worker-table .col-actions {
        flex-wrap: wrap;
        gap: 0.375rem;
        justify-content: flex-start;
        text-align: left;
    }
    .worker-table .col-actions::before {
        display: none;
    }
    .worker-table .col-actions button,
    .worker-table .col-actions .btn-sm {
        min-height: 40px;
        padding: 0.5rem 0.875rem;
        margin-left: 0;
    }
    .inline-assign select {
        min-height: 40px;
        font-size: 0.95rem;
    }

    /* ----- Floor toolbar (warehouse picker) ----- */
    .floor-toolbar {
        padding: 0.625rem;
    }
    .floor-toolbar select {
        width: 100%;
        padding: 0.625rem;
        font-size: 1rem;
        min-height: 44px;
    }
    .floor-section-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .floor-section-title-group {
        width: 100%;
        gap: 0.625rem;
    }
    .floor-warehouse-select {
        flex: 1;
        min-width: 0;
        font-size: 16px;    /* iOS zoom prevention */
        min-height: 44px;
        padding: 0.625rem 2rem 0.625rem 0.75rem;
    }

    /* ----- Modals → bottom sheets on phone ----- */
    .modal-backdrop {
        padding: 0;
        align-items: flex-end;   /* anchor sheet to bottom */
    }
    .modal {
        max-width: 100%;
        width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
        padding: 1.25rem;
        animation: slide-up 0.2s ease-out;
    }
    @keyframes slide-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    .modal input[type="number"],
    .modal input[type="text"] {
        font-size: 16px;      /* prevents iOS zoom on focus */
        min-height: 44px;
    }
    .modal-actions {
        gap: 0.625rem;
    }
    .modal-actions .btn-sm,
    .modal-actions .btn-primary,
    .modal-actions .btn-danger {
        flex: 1;
        min-height: 44px;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }

    /* ----- Hamburger dropdown stays usable ----- */
    .hamburger-dropdown {
        min-width: 240px;
        right: 0;
    }
    .menu-item {
        padding: 0.875rem 1rem;
        font-size: 0.95rem;
        min-height: 44px;
    }

    /* ----- Room drag mode: lock it off on phone ----- */
    .rooms-grid[data-edit-mode="true"] {
        background-image: none;   /* dotted grid is visual clutter on phones */
    }
}

/* Very narrow (< 360px) — a tiny phone in portrait */
@media (max-width: 360px) {
    .brand-sub, .main-nav .nav-link {
        font-size: 0.8rem;
    }
    .main-nav .nav-link {
        padding: 0.5rem 0.25rem;
    }
}

/* ============================================================
   Calendar section — pending/applied entry tables + create forms
   ============================================================ */

.cal-form-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
}
.cal-form-title {
    margin: 0 0 0.625rem;
    font-size: 0.9rem;
    color: var(--brand-navy);
    font-weight: 600;
}
.cal-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 140px;
}
.cal-field input[type="date"],
.cal-field input[type="number"],
.cal-field select {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
}
.cal-field .field-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 700;
}

.cal-reason {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--brand-navy);
}

/* Scope badge for "All rooms" holiday entries */
.status-pill.status-holiday {
    background: #e8dff6;
    color: #4b2b8a;
    border: 1px solid #b39cd9;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}

/* Applied row: subdued */
.cal-applied-row {
    opacity: 0.75;
    background: #fafafa;
}

/* ============================================================
   Calendar section on Setup page
   ============================================================ */

.calendar-add-forms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 720px) {
    .calendar-add-forms {
        grid-template-columns: 1fr;
    }
}

.calendar-add-card {
    background: #fafcfe;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
}
.calendar-add-card h4 {
    margin: 0 0 0.25rem;
    color: var(--brand-navy);
}
.calendar-add-card .small {
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.calendar-form {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.calendar-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.calendar-form input[type="date"],
.calendar-form input[type="number"],
.calendar-form input[type="text"],
.calendar-form select {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.9rem;
}
.calendar-form .btn-primary {
    align-self: flex-start;
    margin-top: 0.25rem;
}

/* Scope pill on calendar rows */
.scope-pill {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--bg);
    color: var(--brand-navy);
    font-size: 0.75rem;
    font-weight: 600;
}
.scope-pill.scope-holiday {
    background: #ffe4b5;
    color: #7a4500;
}

/* History accordion */
.calendar-history {
    margin-top: 1rem;
}
.calendar-history > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.5rem 0;
}
.calendar-history > summary::-webkit-details-marker { display: none; }
.calendar-history > summary::marker { content: ''; }
.calendar-history > summary::before {
    content: "▶ ";
    font-size: 0.7rem;
    color: var(--muted);
}
.calendar-history[open] > summary::before { content: "▼ "; }

/* ============================================================
   Pay rate input — admin-only dollar amount field
   Layout: [$][input][/hr] — all inline, no wrapping
   ============================================================ */

.pay-rate-input {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: white;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 0.5rem;
    transition: border-color 0.15s;
}
.pay-rate-input:focus-within {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 2px rgba(0, 80, 160, 0.15);
}
.pay-rate-input .pay-rate-prefix,
.pay-rate-input .pay-rate-suffix {
    color: var(--muted);
    font-size: 0.875rem;
    white-space: nowrap;
    user-select: none;
}
.pay-rate-field {
    border: none !important;
    background: transparent;
    outline: none;
    padding: 0.375rem 0.125rem !important;
    width: 4.5rem;
    max-width: 4.5rem !important;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    -moz-appearance: textfield;   /* hide Firefox spinner */
}
.pay-rate-field::-webkit-outer-spin-button,
.pay-rate-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pay-rate-field:focus {
    box-shadow: none !important;   /* focus styles live on the wrapper */
}

/* Inline-create-form uses flex, so the pay-rate widget sits next to the text inputs nicely */
.inline-create-form .pay-rate-input {
    flex: 0 0 auto;
}

/* ============================================================
   Room capacity pills (Stage 3)

   Flex-wrap grid that expands to fill the room card. Each pill is a
   click target that (in Stage 4) will open the assignment modal.
   Pills sit on the same layer as the footer — the ellipsis dropdown
   (z-index: 60) stacks above both.
   ============================================================ */

.room-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 0.25rem;
    padding: 0;
    /* Fill available vertical space but left-align pills within each row —
       last row of an odd-count room is flush-left, lone pill doesn't stretch. */
    flex: 1 1 auto;
    justify-content: flex-start;
    align-content: flex-start;
    /* Same layer as footer — ellipsis menu has its own higher z-index. */
    position: relative;
    z-index: 1;
}

.pill {
    /* FIXED pill size — never stretches. Matched to the IN/OUT status pills
       in the worker table for visual consistency (font 0.7rem, padding
       0.125rem 0.5rem). Width is narrower so two pills always fit across
       a 300px room card even with padding accounted for. */
    flex: 0 0 auto;
    width: 90px;
    padding: 0.125rem 0.5rem;
    border: 1px solid transparent;
    /* Fully-rounded end caps (pill shape) */
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-align: center;
    line-height: 1.4;
    /* Truncate long first names with ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: transform 0.08s ease-out, box-shadow 0.15s, filter 0.15s;
    user-select: none;
}
.pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 39, 82, 0.15);
}
.pill:active {
    transform: translateY(0);
}
.pill:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}

/* State 1: Assigned employee — solid green fill, white text */
.pill.pill-employee {
    background: #4a9d3f;              /* brand green (same as temp border) */
    border-color: #4a9d3f;
    color: white;
}
.pill.pill-employee:hover { filter: brightness(1.08); }

/* State 2: Assigned temp/contractor — light sage fill, green border, black text */
.pill.pill-temp {
    background: #d4eec5;
    border-color: #4a9d3f;
    color: #1a1a1a;
}
.pill.pill-temp:hover { filter: brightness(1.03); }

/* State 3: Open slot, empty room — white fill, neutral border */
.pill.pill-open {
    background: white;
    border-color: var(--border);
    color: var(--muted);
    font-weight: 500;
    font-style: italic;
}
.pill.pill-open:hover {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

/* State 4: Open slot in a PARTIALLY filled room — red fill, white "Open" */
.pill.pill-open.pill-open-partial {
    background: #e04a45;              /* danger red */
    border-color: #c4403c;
    color: white;
    font-style: normal;
    font-weight: 600;
}
.pill.pill-open.pill-open-partial:hover {
    filter: brightness(1.08);
    color: white;
}

/* ----- Mobile adjustments ----- */
@media (max-width: 640px) {
    .pill {
        /* Slightly larger for thumb-tap on phones; still fixed width */
        width: 88px;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ============================================================
   Assignment modal (Stage 4)
   ============================================================ */

.modal-assignment {
    /* Wider than the default modal to show the full worker list comfortably. */
    max-width: 480px;
    width: 100%;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.modal-title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--brand-navy);
}
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 0 0.25rem;
}
.modal-close:hover { color: var(--brand-navy); }

.modal-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.assignment-counter {
    background: var(--brand-sky-light);
    color: var(--brand-blue-deep);
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
}
.assignment-counter.counter-over-capacity {
    background: #ffe4e1;
    color: #b22222;
}
.counter-n {
    font-variant-numeric: tabular-nums;
}
.move-warning {
    color: #a56420;
    font-size: 0.8rem;
    font-weight: 500;
}

.assignment-list {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.assignment-row {
    border-bottom: 1px solid var(--border);
}
.assignment-row:last-child { border-bottom: none; }
.assignment-row-here {
    background: #f0f9f0;       /* subtle green tint — already in THIS room */
}
.assignment-row-other {
    background: #fffbe6;       /* subtle yellow tint — in another room */
}

.assignment-label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    user-select: none;
}
.assignment-label:hover {
    background: rgba(0, 80, 160, 0.04);
}
.assignment-label input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}
.assignment-label input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}
.assignment-label input[type="checkbox"]:disabled + .assignment-swatch,
.assignment-label input[type="checkbox"]:disabled ~ * {
    opacity: 0.5;
}

.assignment-swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.swatch-employee { background: #4a9d3f; }
.swatch-temp     { background: #d4eec5; border: 1.5px solid #4a9d3f; }

.assignment-name {
    flex: 1 1 auto;
    font-weight: 500;
    color: var(--brand-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.assignment-meta {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--muted);
}
.assignment-current-room {
    background: #fff3cd;
    color: #856404;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
}
.assignment-here-tag {
    background: #d4eec5;
    color: #1a5e1a;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
}
.assignment-employer {
    font-style: italic;
}

/* Mobile: modal becomes a bottom sheet (already defined for .modal but
   we want the assignment modal to respect max-height so long lists scroll). */
@media (max-width: 640px) {
    .modal-assignment {
        max-width: 100%;
    }
    .assignment-list {
        max-height: 55vh;
    }
}

/* ============================================================
   Capacity history modal (admin-only)

   Reuses the .modal and .modal-backdrop base styles. Adds wider sizing,
   tab styling, and a scrollable events list with inline edit controls.
   ============================================================ */

.modal-capacity-history {
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.history-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.75rem;
}
.history-tab-btn {
    background: transparent;
    border: none;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;   /* overlap the border-bottom */
}
.history-tab-btn:hover {
    color: var(--brand-navy);
}
.history-tab-btn.active {
    color: var(--brand-blue);
    border-bottom-color: var(--brand-blue);
}

.history-form {
    background: #fafdff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.history-form[hidden] {
    display: none;
}
.history-form .modal-hint {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0 0 0.75rem;
    line-height: 1.4;
}
.history-form-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.history-field {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
}
.history-field .field-label {
    font-weight: 600;
    color: var(--brand-navy);
    font-size: 0.75rem;
}
.history-field input,
.history-field select {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
}
.history-field-capacity[hidden] {
    display: none;
}

.history-events-header {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}
.history-events-header h4 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--brand-navy);
}

.history-events-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
}
.history-event-row {
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
}
.history-event-row:last-child {
    border-bottom: none;
}
.history-event-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.history-event-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}
.history-event-type {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    flex: 0 0 auto;
    letter-spacing: 0.02em;
}
.history-event-type-override_set {
    background: #dbeafe;
    color: #1e40af;
}
.history-event-type-room_down {
    background: #fee2e2;
    color: #b91c1c;
}
.history-event-type-reset_to_default {
    background: #f1f5f9;
    color: var(--muted);
}
.history-event-timestamp {
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: ui-monospace, monospace;
    min-width: 170px;
}
.history-event-cap-label {
    font-size: 0.75rem;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.history-event-capacity {
    width: 60px;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: ui-monospace, monospace;
}
.history-event-cap-display {
    font-size: 0.75rem;
    color: var(--muted);
    font-family: ui-monospace, monospace;
}
.history-event-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.25rem;
}

.modal-actions-close {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .modal-capacity-history {
        max-width: 100%;
        max-height: 92vh;
    }
    .history-event-timestamp {
        min-width: 140px;
    }
}

/* ============================================================
   DOWN-room placeholder pills

   When a room is DOWN, we render invisible placeholder pills so the
   card stays the same height as an active version of the same room.
   The pills use visibility:hidden (not display:none) so they consume
   layout space; pointer-events are disabled so they're not click targets.
   The red-X overlay sits on top visually via absolute positioning.
   ============================================================ */
.room-pills-placeholder {
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}
.room-pills-placeholder .pill {
    /* Match active-room pill dimensions exactly so the card is the same
       height whether DOWN or active. */
    cursor: default;
}

/* Ensure the X overlay floats above the (invisible) placeholder pills */
.room-down-overlay {
    z-index: 2;
}

/* Shift duration within the IN status pill —
   inherits the pill background/color, just a subtle separator */
.status-in {
    /* Slightly wider to fit "IN · 4h 23m" comfortably */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ============================================================
   Floor section actions: Edit layout + Reset layout

   The Reset-layout button is hidden by default and revealed only
   when the Floor is in edit mode. This keeps the normal header
   uncluttered — resetting is an edit-time action.
   ============================================================ */
.floor-section-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Reset layout button — muted danger styling. Only visible in edit mode. */
.btn-reset-layout {
    display: none;
    border-color: #c4403c;
    color: #c4403c;
    background: white;
}
.btn-reset-layout:hover {
    background: #fee2e2;
}

/* When the Floor section is in edit mode (driven by JS toggling .editing
   on .floor-section), reveal the Reset button. */
.floor-section.editing .btn-reset-layout {
    display: inline-block;
}

/* ============================================================
   Audit log page
   ============================================================ */
.audit-log-table .audit-col-when {
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
    white-space: nowrap;
    color: var(--muted);
}
.audit-log-table .audit-col-old,
.audit-log-table .audit-col-new {
    font-family: ui-monospace, monospace;
    font-size: 0.9rem;
}
.audit-log-table .audit-col-new-strong {
    font-weight: 600;
    color: var(--brand-navy);
}
.audit-log-table .audit-col-changed-by {
    font-size: 0.85rem;
    color: var(--muted);
}
.audit-field-badge {
    background: var(--brand-sky-light);
    color: var(--brand-blue-deep);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.nav-link-small {
    font-size: 0.85rem;
    margin-left: 0.5rem;
    color: var(--brand-blue);
}

/* ============================================================
   Room resize handle (edit-mode only)
   ============================================================ */

/* The handle sits in the SE corner, invisible until edit mode.
   Visible as a small ⌐ diagonal hatch when edit mode is active.
   Cursor changes to nwse-resize on hover. */
.room-resize-handle {
    display: none;
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    z-index: 3;
    /* Diagonal-lines indicator drawn via CSS gradients.
       Subtle enough to not distract in edit mode but clearly a grabber. */
    background-image: linear-gradient(
        135deg,
        transparent 0%, transparent 30%,
        var(--brand-blue) 30%, var(--brand-blue) 40%,
        transparent 40%, transparent 60%,
        var(--brand-blue) 60%, var(--brand-blue) 70%,
        transparent 70%, transparent 100%
    );
    opacity: 0.55;
    transition: opacity 0.15s;
    touch-action: none;
    user-select: none;
}
.room-resize-handle:hover {
    opacity: 1;
}

/* Only show the handle in edit mode. */
.rooms-grid[data-edit-mode="true"] .room-resize-handle {
    display: block;
}

/* While actively resizing, disable drag-to-reposition on the same room
   (we add .resizing in JS to avoid handler conflicts). */
.room.resizing {
    cursor: nwse-resize !important;
    box-shadow: 0 0 0 2px var(--brand-blue), 0 8px 16px rgba(0, 80, 160, 0.2);
    transition: none;
    z-index: 11;    /* above the dragging z-index:10 just for clarity */
}
.room.resizing .room-resize-handle {
    opacity: 1;
}

/* Sized rooms in the absolute layout need the width/height from data-*
   inline style to actually take effect. The inline style is set by
   template AND re-applied by layoutAbsolute() on mode switch. */
.rooms-grid[data-edit-mode="true"] .room-sized,
.rooms-grid[data-positioned="true"] .room-sized {
    /* No-op rule — the style attribute on the element carries width/height.
       This selector exists so future tweaks can target .room-sized quickly. */
}

/* ============================================================
   Mobile pass (Feb 2026): polish for features added since the
   original mobile baseline — pills, assignment modal, capacity
   history, audit log, shift-duration, pay-rate column, reset UI.

   All rules below land under the phone (<= 640px) breakpoint.
   ============================================================ */

@media (max-width: 640px) {

    /* ----- Audit log table: allow horizontal scroll rather than
       stacking. A 6-column table doesn't stack well, and "scroll
       sideways" is a learnable pattern for power-user surfaces. ----- */
    .setup-table-wrap:has(.audit-log-table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .audit-log-table {
        min-width: 640px;  /* force horizontal scroll rather than squish */
        font-size: 0.85rem;
    }
    .audit-log-table th,
    .audit-log-table td {
        padding: 0.5rem 0.375rem;
        white-space: nowrap;
    }
    .audit-log-table .audit-col-old,
    .audit-log-table .audit-col-new {
        white-space: normal;  /* values can wrap */
        word-break: break-word;
    }

    /* ----- Capacity history modal: tab buttons need taller touch
       targets; datetime inputs can't be too narrow, the scroll list
       needs a max-height fit for a phone screen. ----- */
    .modal-capacity-history {
        max-height: 92vh;
    }
    .history-tab-btn {
        flex: 1;
        padding: 0.75rem 0.5rem;
        min-height: 44px;
        font-size: 0.9rem;
    }
    .history-form-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    .history-field {
        flex: 1 1 auto;
    }
    .history-field input,
    .history-field select {
        min-height: 44px;
        font-size: 16px;  /* prevent iOS zoom */
        padding: 0.625rem 0.625rem;
    }
    .history-events-list {
        max-height: 40vh;
    }
    .history-event-form {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .history-event-meta {
        flex-wrap: wrap;
    }
    .history-event-timestamp {
        min-width: 160px;
        flex: 1 1 auto;
        min-height: 36px;
    }
    .history-event-actions {
        justify-content: flex-end;
        padding-top: 0.25rem;
        border-top: 1px solid var(--border);
    }
    .history-event-actions .btn-sm {
        min-height: 40px;
        padding: 0.5rem 1rem;
    }

    /* ----- Assignment modal: checkboxes + row padding bumped for thumbs ----- */
    .assignment-label {
        padding: 0.75rem 0.875rem;
        gap: 0.75rem;
    }
    .assignment-label input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }
    .assignment-list {
        max-height: 55vh;
    }
    .assignment-name {
        font-size: 1rem;
    }
    .assignment-meta {
        font-size: 0.75rem;
    }

    /* ----- Workers-table stacked row: shift-duration on IN chip ----- */
    /* The .status-in pill holds "IN · 4h 23m" — make sure it doesn't wrap */
    .worker-table .status {
        font-size: 0.75rem;
        padding: 0.25rem 0.625rem;
    }

    /* ----- Setup > Workers pay rate column: inline input on a cramped
       row. Allow the row form to wrap cleanly on phones rather than
       trying to cram 5+ controls in a line. ----- */
    .inline-create-form {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .inline-create-form input,
    .inline-create-form select {
        flex: 1 1 auto;
        min-width: 140px;
        min-height: 44px;
        font-size: 16px;
    }
    .inline-create-form .pay-rate-input {
        flex: 1 1 120px;
    }
    .pay-rate-field {
        min-height: 40px;
        font-size: 16px !important;
    }

    /* ----- Setup > Workers table: the row form inputs are tied via
       form="wk-form-N" attr. On phones each <td> becomes a stacked block
       (existing rule); make sure our pay-rate-input widget looks sane. ----- */
    .setup-table .pay-rate-input {
        width: auto;
        max-width: 180px;
    }

    /* ----- Floor page: "Floor" section heading + toolbar should not
       leave awkward whitespace. Already tightened, just checking. ----- */
    .floor-section-header {
        padding: 0;
    }

    /* ----- Room card on phone: already collapses to 1 col. The pills
       inside should center for better visual balance since the card
       is full-width and left-aligning pills looks sparse. ----- */
    .room-pills {
        justify-content: center;
    }

    /* ----- Hide the room resize handle entirely on mobile (defense-in-
       depth; edit mode can't turn on here but in case of view-port
       breakpoint switching mid-session). ----- */
    .room-resize-handle {
        display: none !important;
    }

    /* ----- Flash banners: full-width with a bit more vertical weight ----- */
    .flash {
        margin: 0.5rem 0;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }

    /* ----- Admin users page: table can scroll horizontally (same pattern
       as audit log) rather than try to stack. ----- */
    .setup-table-wrap:has(.admin-users-table) {
        overflow-x: auto;
    }
}

/* ============================================================
   Tablet (641px–960px): edit mode should WORK here since iPads
   are the primary operator device. No special treatment needed;
   just verify the existing rules don't mistakenly disable it.
   ============================================================ */

/* ============================================================
   Calendar grid view
   ============================================================ */

.calendar-view-toggle {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: white;
}
.calendar-view-btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    border-right: 1px solid var(--border);
    transition: background 0.1s, color 0.1s;
}
.calendar-view-btn:last-child {
    border-right: none;
}
.calendar-view-btn:hover {
    background: var(--brand-sky-light);
    color: var(--brand-blue-deep);
}
.calendar-view-btn.active {
    background: var(--brand-blue);
    color: white;
}

.calendar-grid-wrap {
    margin: 1rem 0 1.5rem;
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.cal-nav-btn {
    text-decoration: none;
    white-space: nowrap;
}
.cal-nav-today {
    background: var(--brand-sky-light);
    border-color: var(--brand-blue);
    color: var(--brand-blue-deep);
}
.cal-month-label {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 1.15rem;
    color: var(--brand-navy);
    font-weight: 700;
}

.calendar-grid {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: white;
}
.calendar-grid-head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.calendar-grid-head > div {
    padding: 0.5rem 0.25rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.calendar-grid-head .cal-col-weekend {
    background: #f7f9fc;
}

.calendar-grid-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border);
}
.calendar-grid-row:last-child {
    border-bottom: none;
}

.calendar-day {
    /* Each day is a <button> — reset the native styles */
    background: white;
    border: none;
    border-right: 1px solid var(--border);
    padding: 0.5rem;
    text-align: left;
    cursor: pointer;
    min-height: 90px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: background 0.1s;
    font-family: inherit;
    overflow: hidden;
}
.calendar-day:last-child {
    border-right: none;
}
.calendar-day:hover {
    background: var(--brand-sky-light);
}
.calendar-day:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: -2px;
}

.calendar-day-number {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-navy);
    line-height: 1;
}

.cal-other-month {
    background: #fafbfc;
}
.cal-other-month .calendar-day-number {
    color: #c0c8d1;
}

.cal-weekend {
    background: #f7f9fc;
}

.cal-today {
    box-shadow: inset 0 0 0 2px var(--brand-blue);
}
.cal-today .calendar-day-number {
    color: var(--brand-blue);
    font-weight: 800;
}

/* Holidays: solid red fill. Uses a gentler red than the critical danger color
   so a full week of holidays doesn't look alarming. */
.cal-has-holiday {
    background: #fde8e7;
}
.cal-has-holiday:hover {
    background: #fbd5d3;
}
.cal-has-holiday .calendar-day-number {
    color: #9f2a26;
}
.calendar-day-holiday-label {
    font-size: 0.7rem;
    color: #9f2a26;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Override dots */
.calendar-day-dots {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}
.calendar-day-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e87b3a;
    flex: 0 0 auto;
}
.calendar-day-more {
    font-size: 0.65rem;
    color: var(--muted);
    margin-left: 2px;
}

/* Legend */
.calendar-legend {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--muted);
    flex-wrap: wrap;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
}
.legend-swatch-holiday { background: #fde8e7; }
.legend-swatch-override {
    background: #e87b3a;
    border-radius: 50%;
    width: 8px;
    height: 8px;
}
.legend-swatch-today {
    background: white;
    border: 2px solid var(--brand-blue);
}

/* ----- Mobile grid ----- */
@media (max-width: 640px) {
    .calendar-day {
        min-height: 60px;
        padding: 0.25rem;
        font-size: 0.8rem;
    }
    .calendar-day-number {
        font-size: 0.8rem;
    }
    .calendar-day-holiday-label {
        display: none;   /* too cramped; dot indicators carry the signal */
    }
    .cal-has-holiday .calendar-day-number {
        /* No label — indicate with an extra dot */
        background: #fbd5d3;
        padding: 0.125rem 0.25rem;
        border-radius: 4px;
        display: inline-block;
        width: fit-content;
    }
    .calendar-nav {
        flex-wrap: wrap;
    }
    .cal-month-label {
        order: -1;
        flex-basis: 100%;
    }
    .calendar-view-toggle {
        width: 100%;
    }
    .calendar-view-btn {
        flex: 1;
        text-align: center;
    }
}

/* ============================================================
   Day-detail modal
   ============================================================ */

.modal-calendar-day {
    max-width: 480px;
    width: 100%;
}
.cal-day-title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--brand-navy);
}
.cal-day-existing {
    margin: 0.5rem 0 1rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.cal-day-event-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    gap: 0.75rem;
}
.cal-day-event-row + .cal-day-event-row {
    border-top: 1px dashed var(--border);
}
.cal-day-event-info {
    flex: 1 1 auto;
}
.cal-day-event-kind {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--brand-navy);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cal-day-event-reason {
    font-size: 0.9rem;
    color: var(--muted);
    margin-top: 0.125rem;
}
.cal-day-event-actions {
    display: flex;
    gap: 0.375rem;
    flex: 0 0 auto;
}
.cal-day-quick-add {
    margin-top: 0.75rem;
}
.cal-day-quick-add .btn-sm {
    width: 100%;
    margin-top: 0.25rem;
}

/* ============================================================
   Admin Users page — compact redesign matching Setup > Workers
   ============================================================ */

.admin-users-page {
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ----- Inline add-user form ----- */
.admin-add-user-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    background: white;
    padding: 0.875rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 1rem;
}
.admin-add-email {
    flex: 1 1 220px;
    min-width: 180px;
}
.admin-add-password {
    flex: 1 1 160px;
    min-width: 140px;
}
.admin-add-role {
    flex: 0 0 100px;
}
.admin-add-must-change {
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: var(--muted);
}
.admin-add-must-change input[type="checkbox"] {
    margin-right: 0.375rem;
}
.admin-add-user-form input[type="text"],
.admin-add-user-form input[type="password"],
.admin-add-user-form select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
}

/* ----- Users table ----- */
.admin-users-table {
    width: 100%;
    font-size: 0.9rem;
}
.admin-users-table .col-user {
    min-width: 180px;
}
.admin-users-table .col-role {
    width: 110px;
}
.admin-users-table .col-warehouses {
    width: 100px;
}
.admin-users-table .col-status {
    width: 70px;
}
.admin-users-table .col-actions {
    width: 110px;
    text-align: right;
}
.admin-users-table td {
    vertical-align: middle;
    padding: 0.625rem 0.5rem;
}
.admin-users-table tr.user-inactive {
    opacity: 0.6;
}

.user-email-cell {
    font-weight: 600;
    color: var(--brand-navy);
}
.user-email-meta {
    margin-top: 0.25rem;
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.badge-pill {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.badge-self {
    background: var(--brand-sky-light);
    color: var(--brand-blue-deep);
}
.badge-warn {
    background: #fef3c7;
    color: #92400e;
}

/* Role select: color-coded background by current value */
.role-select {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    background: white;
    color: var(--brand-navy);
    cursor: pointer;
}
.role-select-admin {
    background: #fdeede;
    border-color: #e87b3a;
    color: #8b4513;
}
.role-select-editor {
    background: #e0f2fe;
    border-color: #0ea5e9;
    color: #075985;
}
.role-select-viewer {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}
.role-readonly {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}
.role-admin    { background: #fdeede; color: #8b4513; }
.role-editor   { background: #e0f2fe; color: #075985; }
.role-viewer   { background: #f3f4f6; color: #374151; }

/* ----- Warehouse access popover ----- */
.access-popover {
    position: relative;
    display: inline-block;
}
.access-summary {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border: 1px dashed var(--border);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--brand-navy);
    list-style: none;
    user-select: none;
    transition: border-color 0.15s, background 0.15s;
}
.access-summary::-webkit-details-marker { display: none; }
.access-summary::after {
    content: " ▾";
    color: var(--muted);
    font-size: 0.75rem;
}
.access-summary:hover {
    border-color: var(--brand-blue);
    background: var(--brand-sky-light);
}
.access-popover[open] .access-summary {
    border-color: var(--brand-blue);
    background: var(--brand-sky-light);
}
.access-none { color: #dc2626; font-weight: 600; }
.access-all  { color: #059669; font-weight: 600; }

.access-popover-content {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 30, 60, 0.1);
    padding: 0.625rem;
    z-index: 20;
}
.access-form-compact {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.access-form-compact .checkbox-label-tight {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    padding: 0.25rem 0;
    cursor: pointer;
}
.access-form-compact .btn-sm {
    margin-top: 0.375rem;
    align-self: flex-end;
}

/* ----- Status compact ----- */
.status-active-compact {
    background: #d1fae5;
    color: #065f46;
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.status-inactive-compact {
    background: #e5e7eb;
    color: #6b7280;
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ----- Actions dropdown ----- */
.admin-user-actions {
    position: relative;
    display: inline-block;
}
.admin-actions-toggle {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.admin-actions-toggle::-webkit-details-marker { display: none; }
.admin-actions-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 30, 60, 0.1);
    padding: 0.25rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
}
.admin-actions-menu .menu-item-button {
    text-align: left;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--brand-navy);
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 4px;
}
.admin-actions-menu .menu-item-button:hover {
    background: var(--brand-sky-light);
}
.admin-actions-menu .menu-item-danger {
    color: #b91c1c;
}
.admin-actions-menu .menu-item-danger:hover {
    background: #fee2e2;
}
.admin-actions-menu .menu-divider {
    height: 1px;
    background: var(--border);
    margin: 0.25rem 0;
}

/* Inline "Set new password" form inside the actions menu */
.reset-direct-inline {
    margin: 0;
}
.reset-direct-inline > summary {
    text-align: left;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--brand-navy);
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 4px;
    list-style: none;
    user-select: none;
}
.reset-direct-inline > summary::-webkit-details-marker { display: none; }
.reset-direct-inline > summary::after {
    content: " ▸";
    color: var(--muted);
    float: right;
}
.reset-direct-inline[open] > summary::after { content: " ▾"; }
.reset-direct-inline > summary:hover {
    background: var(--brand-sky-light);
}
.reset-direct-form {
    padding: 0.5rem 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
}
.reset-direct-form input[type="password"] {
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.875rem;
}

/* ----- Mobile tweaks for admin users ----- */
@media (max-width: 640px) {
    .admin-add-user-form {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-add-user-form input,
    .admin-add-user-form select {
        width: 100%;
        min-height: 44px;
        font-size: 16px;    /* iOS zoom prevention */
    }
    .admin-add-user-form .btn-primary {
        width: 100%;
        min-height: 44px;
    }
    .admin-users-table {
        font-size: 0.85rem;
    }
    .access-popover-content,
    .admin-actions-menu {
        min-width: 240px;
        right: auto;
        left: 0;
    }
}

/* ============================================================
   Dropdown flip-up: when JS detects insufficient space below, the
   details element gets .dropdown-flip-up and the menu opens upward.
   ============================================================ */
.admin-user-actions.dropdown-flip-up .admin-actions-menu,
.access-popover.dropdown-flip-up .access-popover-content {
    top: auto;
    bottom: calc(100% + 4px);
}

/* ============================================================
   Heat-map cells: clickable
   ============================================================ */
.heat-cell[data-cell-action="open-detail"] {
    cursor: pointer;
    transition: outline 0.1s;
}
.heat-cell[data-cell-action="open-detail"]:hover {
    outline: 2px solid var(--brand-blue);
    outline-offset: -2px;
    position: relative;
    z-index: 2;
}

/* ============================================================
   Heat-map cell detail modal
   ============================================================ */
.modal-heatmap-cell {
    max-width: 560px;
    width: 100%;
}
.modal-heatmap-cell .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.modal-heatmap-cell .modal-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--brand-navy);
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.modal-heatmap-cell .modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 0 0.25rem;
}
.modal-heatmap-cell .modal-close:hover {
    color: var(--brand-navy);
}

/* Snapshot box: state/capacity/worker count */
.heatmap-cell-snapshot {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.snapshot-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.snapshot-label {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.snapshot-value {
    font-size: 0.95rem;
    color: var(--brand-navy);
}

/* Reuse existing .status-pill + add a DOWN variant if not already there */
.status-pill.status-down {
    background: #fde8e7;
    color: #9f2a26;
}
.status-pill.status-active {
    background: #d1fae5;
    color: #065f46;
}

/* Worker intervals table */
.heatmap-cell-intervals {
    margin-bottom: 1rem;
}
.subsection-heading-tight {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.intervals-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.intervals-table th,
.intervals-table td {
    padding: 0.5rem 0.625rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.intervals-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    font-weight: 700;
    background: var(--bg);
}
.intervals-table tr:last-child td {
    border-bottom: none;
}

@media (max-width: 640px) {
    .modal-heatmap-cell {
        max-height: 90vh;
        overflow-y: auto;
    }
    .intervals-table {
        font-size: 0.85rem;
    }
    .intervals-table th,
    .intervals-table td {
        padding: 0.375rem 0.5rem;
    }
}

/* ===========================================================
   Heat-map cell detail modal (Reports page)
   =========================================================== */

/* Clickable heat cells: cursor hint + subtle hover outline */
.heat-cell[data-cell-action="open-detail"] {
    cursor: pointer;
    transition: outline 0.08s ease;
}

.heat-cell[data-cell-action="open-detail"]:hover {
    outline: 2px solid var(--color-frazil-blue, #0066cc);
    outline-offset: -2px;
    position: relative;
    z-index: 1;
}

/* Modal shell (reuses .modal-backdrop + .modal; narrower max-width
   since the content is compact) */
.modal-heatmap-cell {
    max-width: 560px;
    width: 92%;
}

.modal-heatmap-cell .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.modal-heatmap-cell .modal-header h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.3;
}

.modal-heatmap-cell .modal-header h3 .small {
    display: block;
    font-size: 0.85rem;
    font-weight: normal;
    margin-top: 0.15rem;
}

.modal-heatmap-cell .modal-close {
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted, #666);
    padding: 0.1rem 0.4rem;
}

.modal-heatmap-cell .modal-close:hover {
    color: var(--color-text, #000);
}

/* Snapshot box: state/capacity/interval-count summary */
.heatmap-cell-snapshot {
    background: var(--color-bg-alt, #f7f7f9);
    border: 1px solid var(--color-border, #e0e0e4);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.snapshot-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.92rem;
}

.snapshot-label {
    color: var(--color-text-muted, #666);
    font-weight: 500;
    flex-shrink: 0;
}

.snapshot-value {
    text-align: right;
}

/* Interval table: compact listing of worker in/out times */
.heatmap-cell-intervals {
    margin-bottom: 1rem;
}

.subsection-heading-tight {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #666);
    margin: 0 0 0.4rem 0;
}

.intervals-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.intervals-table th {
    text-align: left;
    font-weight: 600;
    color: var(--color-text-muted, #666);
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--color-border, #e0e0e4);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.intervals-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--color-border, #f0f0f2);
}

.intervals-table tr:last-child td {
    border-bottom: 0;
}

/* Status pill variants for the modal */
.status-pill {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-pill.status-down {
    background: #fde8e8;
    color: #a91e1e;
}

.status-pill.status-active {
    background: #e3f4e5;
    color: #1f6b2a;
}

/* Mobile tweaks */
@media (max-width: 640px) {
    .modal-heatmap-cell {
        max-width: 100%;
        margin: 0.5rem;
    }
    .snapshot-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
    }
    .snapshot-value {
        text-align: left;
    }
    .intervals-table {
        font-size: 0.88rem;
    }
}

/* ===========================================================
   Heat map "no buckets match filter" recovery block.
   Shown when rooms exist but all buckets got filtered out.
   =========================================================== */
.filter-empty-state {
    padding: 1rem 0;
}
.filter-empty-state .empty {
    margin-bottom: 0.75rem;
}
.filter-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}