/* ==========================================================================
   PS Scheduler — Industrial/Utilitarian Clinical UI
   Dense, high-contrast, information-first.
   ========================================================================== */

:root {
    /* Surfaces, dark to light: page < secondary (sticky labels) <
       card < tertiary (hover/header). Values are deliberately close;
       don't add new grays — pick the nearest existing step. */
    --bg-primary: #0f1114;
    --bg-secondary: #1a1d23;
    --bg-tertiary: #22262e;
    --bg-card: #1e2128;

    --text-primary: #e8eaed;
    --text-secondary: #9aa0a9;
    --text-muted: #8a92a0;   /* ≥4.5:1 (WCAG AA) on every surface bg */

    --accent: #e8a838;
    --accent-dim: #b8842a;
    --accent-glow: rgba(232, 168, 56, 0.15);

    --danger: #f07a7a;       /* ≥4.5:1 (WCAG AA) as text on tinted bgs */
    --danger-bg: rgba(240, 122, 122, 0.12);
    --success: #3dbd6f;
    --success-bg: rgba(61, 189, 111, 0.12);
    --warning: var(--accent);   /* same hue by design: amber = attention */
    --warning-bg: rgba(232, 168, 56, 0.12);
    --info: #5b9fe8;

    --shift-morning: #3d7a5f;
    --shift-afternoon: #5b6fa8;
    --shift-day12: #8b6e3d;
    --shift-night: #7a3d5f;
    --shift-suem: #3d6e8b;
    --shift-oncall: #7d5fa8;
    --shift-duty: #5f5f5f;
    --shift-manual: rgba(232, 168, 56, 0.08);

    --border: #2a2e36;
    --border-light: #333842;

    --radius: 4px;
    --radius-lg: 6px;

    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}
/* Spacing: stick to 4/8/12/16/24px steps when adding new rules
   (legacy 6/10/14/20px values remain; converge as rules get touched). */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Keyboard focus: visible ring on every interactive element */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dim); }

/* Topbar */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 48px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    background: var(--accent);
    color: var(--bg-primary);
    font-weight: 700;
    font-size: 16px;
    border-radius: var(--radius);
}
.topbar-title { font-weight: 700; font-size: 18px; }
.topbar-subtitle { font-size: 14px; color: var(--text-muted); margin-left: 8px; }
.topbar-nav { display: flex; gap: 4px; }
.nav-link {
    padding: 6px 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius);
    transition: all 0.15s;
}
.nav-link:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.nav-link.active { color: var(--accent); background: var(--accent-glow); }
.nav-logout { color: var(--text-muted); }
/* logout is a POST form; render its button exactly like a nav link */
.nav-logout-form { display: inline; margin: 0; }
button.nav-logout { background: none; border: none; font: inherit; cursor: pointer; }
.nav-user {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 6px 10px;
    border-left: 1px solid var(--border);
    margin-left: 6px;
    white-space: nowrap;
}

/* Container */
.container { max-width: 100%; padding: 20px 24px; }

/* Page header */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.page-title { font-size: 24px; font-weight: 700; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
}
.card-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* Grid layouts */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* Quick entry (inserimento rapido): per-doctor paintable calendar */
.qe-doctor-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qe-palette { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qe-grid { width: 100%; table-layout: fixed; }
.qe-grid th { text-align: center; }
.qe-cell {
    height: 92px;
    vertical-align: top;
    padding: 4px;
    border: 1px solid var(--border);
    cursor: pointer;
    position: relative;
}
.qe-cell:hover { background: var(--bg-tertiary); }
.qe-cell.qe-festivo { background: rgba(240, 122, 122, 0.06); }
.qe-cell.qe-fuori { background: var(--bg-primary); cursor: default; opacity: 0.45; }
.qe-cell.qe-fuori:hover { background: var(--bg-primary); }
.qe-cell.qe-selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.qe-daynum { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.qe-existing {
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qe-existing-turno { color: var(--info); }
.qe-existing-duty { color: var(--success); }
.qe-existing-altri { opacity: 0.55; font-style: italic; }
.qe-pending {
    margin-top: 2px;
    padding: 2px 4px;
    font-size: 13px;
    font-weight: 700;
    background: var(--accent-glow);
    color: var(--accent);
    border-radius: var(--radius);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qe-pending.qe-pending-delete { background: var(--danger-bg); color: var(--danger); }
.qe-arrows {
    position: absolute;
    bottom: 2px;
    right: 2px;
    display: flex;
    gap: 2px;
}
.qe-arrow {
    width: 20px;
    height: 20px;
    font-size: 14px;
    line-height: 1;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    cursor: pointer;
}
.qe-arrow:hover { background: var(--accent-dim); }
.qe-footer { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

/* Calendario continuo: giorni non ancora pubblicati */
th.cal-non-pub > div { opacity: 0.4; }
th.cal-non-pub { background-image: repeating-linear-gradient(
    -45deg, transparent, transparent 6px,
    rgba(232, 168, 56, 0.05) 6px, rgba(232, 168, 56, 0.05) 12px); }

/* Empty-state message for lists/tables with no rows */
.empty-state { padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: 16px; }

/* Mobile-only affordance for horizontally scrolling tables (wide grid) */
.scroll-hint { display: none; font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }

@media (max-width: 768px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .scroll-hint { display: block; }

    /* Topbar: two rows on phones — brand on top, nav wraps below */
    .topbar {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 12px;
        row-gap: 4px;
    }
    .topbar-subtitle { display: none; }
    .topbar-nav { flex-wrap: wrap; gap: 2px; width: 100%; }
    .nav-link { padding: 8px 10px; }     /* comfortable tap targets */
    .nav-user { border-left: none; margin-left: 0; padding-left: 0; }

    .container { padding: 12px; }
    .page-header { flex-direction: column; align-items: flex-start; }
    .page-actions { display: flex; flex-wrap: wrap; gap: 6px; }
    .btn { padding: 9px 14px; }          /* easier to tap */

    /* Dropdown menu flows inline on phones so a wrapped toolbar button can't
       push the absolute menu off-screen. */
    .dropdown { width: 100%; }
    .dropdown-menu {
        position: static;
        min-width: 0;
        box-shadow: none;
        margin-top: 4px;
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { background: var(--border-light); color: var(--text-primary); }
.btn-primary {
    background: var(--accent);
    color: var(--bg-primary);
    border-color: var(--accent);
    font-weight: 600;
}
.btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--bg-primary); }
.btn-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(240, 122, 122, 0.3); }
.btn-danger:hover { background: rgba(232, 84, 84, 0.2); }
.btn-success { background: rgba(94, 200, 130, 0.12); color: var(--success); border-color: rgba(94, 200, 130, 0.35); }
.btn-success:hover { background: rgba(94, 200, 130, 0.22); }
.btn-sm { padding: 4px 10px; font-size: 14px; }

/* Forms */
.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 14px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.form-input, .form-select {
    width: 100%;
    padding: 8px 10px;
    font-size: 16px;
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    outline: none;
    transition: border-color 0.15s;
}
.form-input:focus, .form-select:focus { border-color: var(--accent); }
.form-select { cursor: pointer; }
.form-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 16px; }
.form-check input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.form-actions { display: flex; gap: 8px; margin-top: 16px; }

/* Password field with show/hide toggle */
.password-field { position: relative; }
.password-field .form-input { padding-right: 84px; }
.password-toggle {
    position: absolute;
    top: 0; right: 0;
    height: 100%;
    padding: 0 12px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-body);
}
.password-toggle:hover { color: var(--text-primary); }

/* Password strength meter (advisory only) */
.pw-strength { margin-top: 6px; }
.pw-strength-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--border-light);
    overflow: hidden;
}
.pw-strength-bar > span {
    display: block;
    height: 100%;
    width: 0;
    transition: width 0.2s, background 0.2s;
}
.pw-strength-bar.pw-weak   > span { width: 33%;  background: var(--danger); }
.pw-strength-bar.pw-medium > span { width: 66%;  background: var(--warning); }
.pw-strength-bar.pw-strong > span { width: 100%; background: var(--success); }
.pw-strength-label { font-size: 13px; margin-top: 4px; color: var(--text-secondary); }

/* Tables */
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}
th {
    background: var(--bg-tertiary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}
tbody tr:hover { background: rgba(255,255,255,0.02); }

/* Schedule grid cells */
.grid-shift-label {
    font-size: 14px;
    white-space: nowrap;
    border-right: 3px solid var(--border);
    min-width: 120px;
}
.grid-shift-label.shift-morning { border-right-color: var(--shift-morning); }
.grid-shift-label.shift-afternoon { border-right-color: var(--shift-afternoon); }
.grid-shift-label.shift-day12 { border-right-color: var(--shift-day12); }
.grid-shift-label.shift-night { border-right-color: var(--shift-night); }
.grid-shift-label.shift-suem { border-right-color: var(--shift-suem); }
.grid-shift-label.shift-oncall { border-right-color: var(--shift-oncall); }
.grid-shift-label.shift-duty { border-right-color: var(--shift-duty); }
.grid-shift-label.shift-manual { border-right-color: var(--warning); }

.grid-cell {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 2px;
    min-width: 70px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.grid-cell:hover { background: var(--accent-glow); }
.grid-cell.empty { color: var(--text-muted); }
.grid-cell.source-pre_assigned { background: rgba(91, 159, 232, 0.08); }
.grid-cell.source-solver { background: transparent; }
.grid-cell.source-manual_override { background: var(--shift-manual); }
.grid-cell.source-esterno { opacity: 0.55; font-style: italic; cursor: default; }
/* il medico loggato vede il PROPRIO nome in evidenza (calendario) */
.nome-mio {
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-glow);
    border-radius: var(--radius);
    padding: 0 4px;
}
/* il medico loggato vede i PROPRI turni in evidenza */
.grid-cell.cella-mia {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    font-weight: 700;
    background: var(--accent-glow);
}
/* evidenziatore multi-medico (admin): un colore per medico scelto */
.grid-cell.hl-0 { outline: 3px solid #e8a838; outline-offset: -3px; background: rgba(232, 168, 56, 0.18); }
.grid-cell.hl-1 { outline: 3px solid #5b9fe8; outline-offset: -3px; background: rgba(91, 159, 232, 0.18); }
.grid-cell.hl-2 { outline: 3px solid #3dbd6f; outline-offset: -3px; background: rgba(61, 189, 111, 0.18); }
.grid-cell.hl-3 { outline: 3px solid #d36bc6; outline-offset: -3px; background: rgba(211, 107, 198, 0.18); }
.grid-cell.hl-4 { outline: 3px solid #f07a7a; outline-offset: -3px; background: rgba(240, 122, 122, 0.18); }
.grid-cell.hl-5 { outline: 3px solid #4ecbd4; outline-offset: -3px; background: rgba(78, 203, 212, 0.18); }
.hl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 700;
    border: 2px solid;
}
.hl-chip-0 { border-color: #e8a838; color: #e8a838; }
.hl-chip-1 { border-color: #5b9fe8; color: #5b9fe8; }
.hl-chip-2 { border-color: #3dbd6f; color: #3dbd6f; }
.hl-chip-3 { border-color: #d36bc6; color: #d36bc6; }
.hl-chip-4 { border-color: #f07a7a; color: #f07a7a; }
.hl-chip-5 { border-color: #4ecbd4; color: #4ecbd4; }
.hl-chip button { background: none; border: none; color: inherit; cursor: pointer; font-size: 13px; }
.grid-cell.has-violation { box-shadow: inset 0 0 0 2px var(--danger); }
/* S4: badge ⚠ per-assegnazione col motivo nel title (admin) */
.viol-badge { color: var(--danger); font-weight: 700; font-size: 12px; cursor: help; }

.grid-duty {
    font-size: 12px;
    padding: 1px 3px;
    background: var(--warning-bg);
    border-radius: 2px;
    margin: 1px 0;
}
.grid-duty .duty-del {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--danger);
    font-size: 11px;
    font-weight: 700;
    padding: 0 0 0 4px;
    line-height: 1;
}

.is-sunday { background: rgba(232, 84, 84, 0.06); }

/* Badges */
.badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: rgba(91, 159, 232, 0.12); color: var(--info); }
.badge-default { background: rgba(255,255,255,0.06); color: var(--text-secondary); }

/* Flash messages */
.flash-container { margin-bottom: 16px; }
.flash {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 15px;
    margin-bottom: 8px;
}
.flash-success { background: var(--success-bg); color: var(--success); border-left: 3px solid var(--success); }
.flash-error { background: var(--danger-bg); color: var(--danger); border-left: 3px solid var(--danger); }
.flash-warning { background: var(--warning-bg); color: var(--warning); border-left: 3px solid var(--warning); }
.flash-info { background: rgba(91, 159, 232, 0.12); color: var(--info); border-left: 3px solid var(--info); }

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
    align-items: center;
    justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 24px;
    /* bound both ends to the viewport so the modal never overflows
       narrow phones (≤360px) while keeping its desktop size unchanged */
    min-width: min(380px, calc(100vw - 32px));
    max-width: min(480px, calc(100vw - 32px));
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.modal-title { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Login */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 16px;
    background: var(--bg-primary);
}
.login-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    width: 100%;
    max-width: 360px;
}
.login-brand {
    text-align: center;
    margin-bottom: 24px;
}
.login-brand h2 {
    font-size: 16px;
    color: var(--text-secondary);
    margin-top: 8px;
    font-weight: 400;
}
.login-title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* Schedule-grid legend */
.grid-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: center;
}
.legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 3px;
}
.legend-mine { border: 2px solid var(--accent); }
.legend-holiday { background: rgba(232, 84, 84, 0.25); }

/* Toolbar dropdown (e.g. grouped exports) — CSS-only <details> menu */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary {
    list-style: none;
    cursor: pointer;
}
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > summary::marker { content: ""; }
.dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 50;
}
.dropdown-item {
    padding: 6px 10px;
    border-radius: var(--radius);
    color: var(--text-primary);
    white-space: nowrap;
}
.dropdown-item:hover { background: var(--bg-tertiary); }

/* Agenda / vista lista (S1): doppia resa della griglia turni.
   Default: tabella larga visibile, agenda nascosta. Sotto i 768px — o con
   il toggle «Lista» (classe view-lista sul body) — si scambiano. */
.schedule-agenda { display: none; }
.view-lista .schedule-grid-wide { display: none; }
.view-lista .schedule-agenda { display: block; }
@media (max-width: 768px) {
    .schedule-grid-wide { display: none; }   /* nasconde anche lo scroll-hint */
    .schedule-agenda { display: block; }
}
.agenda-day {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 8px 12px;
    margin-bottom: 8px;
    /* l'àncora a #agenda-oggi non deve finire sotto la topbar sticky */
    scroll-margin-top: 56px;
}
.agenda-day.agenda-festivo { border-left: 3px solid var(--danger); }
.agenda-day.agenda-non-pub { opacity: 0.55; }
.agenda-day-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.agenda-day-title { font-weight: 700; }
.agenda-day-header.agenda-festivo .agenda-day-title,
.agenda-holiday-name { color: var(--danger); }
.agenda-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    padding: 4px 0 4px 8px;
    border-left: 3px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.agenda-row:last-child { border-bottom: none; }
/* stesso colore-categoria della colonna Turno della griglia */
.agenda-row.shift-morning { border-left-color: var(--shift-morning); }
.agenda-row.shift-afternoon { border-left-color: var(--shift-afternoon); }
.agenda-row.shift-day12 { border-left-color: var(--shift-day12); }
.agenda-row.shift-night { border-left-color: var(--shift-night); }
.agenda-row.shift-suem { border-left-color: var(--shift-suem); }
.agenda-row.shift-oncall { border-left-color: var(--shift-oncall); }
.agenda-row.shift-duty { border-left-color: var(--shift-duty); }
.agenda-row.shift-manual { border-left-color: var(--warning); }
.agenda-shift-code { font-weight: 700; min-width: 88px; white-space: nowrap; }
.agenda-shift-time { white-space: nowrap; }
.agenda-occupants { margin-left: auto; font-weight: 600; text-align: right; }
/* il turno del medico loggato salta all'occhio anche in agenda */
.agenda-row.agenda-mia {
    background: var(--accent-glow);
    border-radius: var(--radius);
}
.agenda-esterna { opacity: 0.55; font-style: italic; }

/* Pannello «In servizio adesso / stanotte» (S2) */
.on-duty-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.on-duty-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}
.on-duty-row:last-child { border-bottom: none; }
.on-duty-shift { font-weight: 700; min-width: 96px; white-space: nowrap; }
.on-duty-names { margin-left: auto; font-weight: 600; text-align: right; }
.on-duty-r { color: var(--shift-oncall); font-weight: 700; font-size: 13px; }
.on-duty-at { text-transform: none; letter-spacing: 0; }
@media (max-width: 768px) {
    .on-duty-cols { grid-template-columns: 1fr; }
}

/* Stats summary tiles */
.stats-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.stat-tile {
    flex: 1 1 auto;
    min-width: 96px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.stat-tile-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.stat-tile-value {
    font-size: 22px;
    font-weight: 700;
    font-family: var(--font-mono);
    margin-top: 2px;
}

/* Utility classes */
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mt-8 { margin-top: 8px; }
.text-sm { font-size: 14px; }
.text-mono { font-family: var(--font-mono); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }

/* Pagine di errore 404/413/500 (P-09): layout autonomo, niente topbar —
   il template non estende base.html per non toccare il DB. */
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}
.error-box {
    max-width: 520px;
    text-align: center;
}
.error-brand {
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 24px;
}
.error-code {
    font-family: var(--font-mono);
    font-size: 64px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}
.error-heading { margin: 12px 0 16px; }
.error-box p { color: var(--text-muted); margin: 8px 0; }
.error-id code {
    font-family: var(--font-mono);
    font-size: 20px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 14px;
    display: inline-block;
    user-select: all;
}
.error-actions { margin-top: 24px; }