/* shared/ui.css
   Base + component styles shared by every page (desktop now, mobile in T7).
   Self-contained (no utility-CSS framework is loaded by any page). Tokens come from shared/tokens.css.
   Components: app-shell, page-head, btn, card, field, chip, notice, empty, skeleton, stat-table, back button. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ui {
    margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: 1.5; color: var(--ink);
    background: var(--paper); -webkit-font-smoothing: antialiased; min-height: 100vh;
}
.ui h1, .ui h2, .ui h3, .ui p { margin: 0; }
.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.ui button, .ui select, .ui input, .ui textarea { font-family: inherit; }
.ui [onclick]:not(button):not(a) { cursor: pointer; }

/* layout */
.app-shell { max-width: 1200px; margin: 0 auto; padding: var(--sp-6) var(--sp-6) 80px; }
.app-shell.wide { max-width: 1800px; }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

/* entrance: content rises once, short stagger */
@keyframes ui-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { animation: ui-rise var(--dur-slow) var(--ease-out) both; }
.rise:nth-child(2) { animation-delay: 60ms; } .rise:nth-child(3) { animation-delay: 120ms; } .rise:nth-child(4) { animation-delay: 180ms; }

/* page header: back | icon tile + eyebrow + title | actions */
.page-head {
    display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
    padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5);
    background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--shadow-1);
}
.page-head .titles { flex: 1 1 260px; min-width: 0; }
.eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0; color: var(--ink-faint); }
.page-title { font-size: var(--fs-title); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.display { font-size: var(--fs-display); font-weight: 900; letter-spacing: -.025em; line-height: 1.12; }
.meta { font-size: var(--fs-meta); font-weight: 500; color: var(--ink-soft); }
.page-head .actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tile {
    width: 44px; height: 44px; flex: none; display: grid; place-items: center;
    border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line);
}
.tile.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.tile.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.tile.dark { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.16); }

/* buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 var(--sp-4);
    border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
    font-size: var(--fs-body); font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease;
}
.btn:hover { background: var(--surface-sunken); border-color: var(--ink-faint); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-brand); }
.btn.primary:hover { background: #0d1838; }
.btn.accent { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.accent:hover { background: #2238a6; }
.btn.danger { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }
.btn.danger:hover { background: #fbdbe2; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn.ghost:hover { background: rgba(16,24,40,.05); color: var(--ink); }
.btn.sm { min-height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-meta); border-radius: var(--r-sm); }
.btn.block { width: 100%; }
.btn svg, .back-btn svg { flex: none; }
.back-btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--sp-4) 0 var(--sp-3);
    border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
    font-size: var(--fs-body); font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring);
}
.back-btn:hover { background: var(--surface-sunken); }
.back-btn:hover svg { transform: translateX(3px); }
.back-btn svg { transition: transform var(--dur) var(--ease-spring); }
.back-btn:active { transform: scale(.98); }

/* cards */
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--shadow-1); padding: var(--sp-5); }
.card.flush { padding: 0; overflow: hidden; }
.card.dark { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.card-title { font-size: var(--fs-lead); font-weight: 800; letter-spacing: -.01em; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.link-card { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-5); text-align: right; cursor: pointer; transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) ease, border-color var(--dur) ease; }
.link-card .go { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: var(--fs-meta); color: var(--brand); }
.link-card .go svg { transition: transform var(--dur) var(--ease-spring); }
.link-card.dark .go { color: #c3cdf7; }
@media (hover: hover) {
    .link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--brand-line); }
    .link-card:hover .go svg { transform: translateX(-4px); }
}
.link-card:active { transform: scale(.995); }

/* fields */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-size: var(--fs-meta); font-weight: 700; color: var(--ink-soft); }
.input, .select {
    width: 100%; min-height: 40px; padding: 0 var(--sp-3); border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
    background: var(--surface); color: var(--ink); font-size: var(--fs-body); font-weight: 500;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.select { width: auto; font-weight: 700; cursor: pointer; }
.input:hover, .select:hover { border-color: var(--ink-faint); }
.input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
textarea.input { padding: var(--sp-3); min-height: 84px; resize: vertical; line-height: 1.5; }
.input.reason-invalid, .input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); }
.input::placeholder { color: var(--ink-faint); }

/* chips and badges */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 var(--sp-2); border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--surface-sunken); color: var(--ink-soft); font-size: var(--fs-meta); font-weight: 700; }
.chip.ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.chip.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.chip.danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.chip.brand { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; }

/* feedback */
.notice { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--surface-sunken); font-weight: 600; font-size: var(--fs-body); }
.notice.ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.notice.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.notice.danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-10) var(--sp-4); border: 1px dashed var(--hairline-strong); border-radius: var(--r-lg); background: var(--surface-sunken); }
.empty .tile { background: var(--surface); color: var(--ink-faint); border-color: var(--hairline); border-radius: 50%; }
.empty h3 { font-size: var(--fs-lead); font-weight: 800; }
.skel { background: linear-gradient(90deg, #efece4 25%, #e4e0d5 37%, #efece4 63%); background-size: 400% 100%; animation: ui-skel 1.4s ease infinite; border-radius: var(--r-md); }
@keyframes ui-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* data table (stats) */
.stat-table { width: 100%; border-collapse: collapse; text-align: right; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.stat-table th { padding: 0 var(--sp-1) var(--sp-2); font-weight: 700; color: var(--ink-faint); border-bottom: 1px solid var(--hairline); }
.stat-table td { padding: 6px var(--sp-1); border-bottom: 1px solid #f1eee6; font-weight: 600; }
.stat-table .c { text-align: center; }
.stat-table .total { font-weight: 900; color: var(--ink); background: var(--surface-sunken); }
.stat-table th.oncall { color: var(--oncall); }
.stat-table tbody tr:hover td { background: var(--surface-sunken); }

.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: 6px; }

/* Reduced motion: one universal rule (covers every component, including hover lifts and drawers). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .rise, .skel { animation: none; }
}
@media (max-width: 720px) { .app-shell { padding: var(--sp-3) var(--sp-3) 72px; } .page-head { padding: var(--sp-3); } }

/* shift card (employee's own shifts, home pages) */
.shift-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.shift-card {
    --tone: var(--ink-soft); --tone-soft: var(--surface-sunken); --tone-line: var(--hairline);
    display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4);
    background: var(--surface); border: 1px solid var(--hairline); border-right: 4px solid var(--tone); border-radius: var(--r-lg);
    transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) ease;
}
.shift-card[data-shift="morning"] { --tone: var(--warn); --tone-soft: var(--warn-soft); --tone-line: var(--warn-line); }
.shift-card[data-shift="evening"] { --tone: var(--brand); --tone-soft: var(--brand-soft); --tone-line: var(--brand-line); }
.shift-card[data-shift="night"] { --tone: var(--brand-deep); --tone-soft: #e6e9f3; --tone-line: #c4cadf; }
.shift-card[data-shift="weekend_oncall"] { --tone: var(--oncall); --tone-soft: var(--oncall-soft); --tone-line: var(--oncall-line); }
.shift-card .ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--tone-soft); color: var(--tone); border: 1px solid var(--tone-line); }
.shift-card .when { font-size: var(--fs-body); font-weight: 800; letter-spacing: -.01em; }
.shift-card .kind { font-size: var(--fs-meta); font-weight: 700; color: var(--tone); }
.shift-card .mates { display: flex; flex-wrap: wrap; gap: 6px; }
@media (hover: hover) { .shift-card:hover { transform: translateX(-2px); box-shadow: var(--shadow-2); } }
.avatar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); font-weight: 900; font-size: var(--fs-lead); border: 1px solid transparent; background: var(--brand-soft); color: var(--brand); }
.two-col { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.rail { display: flex; flex-direction: column; gap: var(--sp-4); }

/* auth screen (login) */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth-brand {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
    padding: var(--sp-10); background: var(--brand-deep); color: #fff;
}
.auth-brand::before, .auth-brand::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.auth-brand::before { width: 520px; height: 520px; left: -160px; top: -140px; background: radial-gradient(circle at 40% 40%, rgba(87,120,230,.55), transparent 65%); }
.auth-brand::after { width: 420px; height: 420px; right: -120px; bottom: -160px; background: radial-gradient(circle at 60% 60%, rgba(109,40,217,.35), transparent 65%); }
.auth-brand > * { position: relative; z-index: 1; }
.auth-brand .wordmark { display: flex; align-items: center; gap: var(--sp-3); font-weight: 900; font-size: var(--fs-lead); letter-spacing: -.01em; }
.auth-brand .headline { font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.08; max-width: 14ch; }
.auth-brand .sub { margin-top: var(--sp-4); color: #aab4d6; font-size: var(--fs-lead); font-weight: 500; max-width: 34ch; }
.auth-points { display: flex; gap: var(--sp-6); color: #c9d1ee; font-size: var(--fs-meta); font-weight: 700; flex-wrap: wrap; }
.auth-points span { display: inline-flex; align-items: center; gap: 6px; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-6); }
.auth-card { width: 100%; max-width: 400px; }
.auth-card form { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-6); }
.auth-switch { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); text-align: center; color: var(--ink-soft); font-weight: 500; }
.link-btn { background: none; border: 0; padding: 0; color: var(--brand); font-weight: 800; cursor: pointer; font-size: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth-brand { padding: var(--sp-6); gap: var(--sp-6); }
    .auth-brand .headline { font-size: 1.75rem; }
    .auth-points { display: none; }
}

/* month stepper: [prev] [month] [year] [next] */
.stepper { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px; background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: var(--r-md); }
.stepper .select { border-color: transparent; background: transparent; min-height: 34px; padding: 0 var(--sp-2); }
.stepper .select:hover { background: var(--surface); }
.icon-btn { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-soft); cursor: pointer; transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring); }
.icon-btn:hover { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.icon-btn:active { transform: scale(.92); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.card.roster-panel { padding: var(--sp-3); }
.side-panel { position: sticky; top: var(--sp-5); padding: var(--sp-4); }
.side-panel .stat-table th, .side-panel .stat-table td { padding-inline: 2px; }
@media (max-width: 1099px) { .side-panel { position: static; } }
.layout-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-5); align-items: start; }
@media (max-width: 1099px) { .layout-side { grid-template-columns: minmax(0, 1fr); } }
.dot-sw { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }

/* constraints calendar (employee side) */
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); text-align: center; font-size: var(--fs-meta); font-weight: 800; color: var(--ink-faint); padding: 0 0 var(--sp-2); }
.cal-head .we { color: var(--brand); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); }
.cday {
    display: flex; flex-direction: column; gap: 6px; min-height: 132px; padding: 6px; background: var(--surface);
    border: 1px solid var(--hairline); border-radius: var(--r-md); transition: border-color var(--dur-fast) ease, box-shadow var(--dur) ease, background-color var(--dur-fast) ease;
}
.cday.is-weekend { background: var(--surface-weekend); }
.cday.is-blank { background: transparent; border-style: dashed; border-color: #ece8de; min-height: 0; }
.cday.is-out { background: var(--danger-soft); border-color: var(--danger-line); }
.cday:hover:not(.is-blank) { border-color: var(--hairline-strong); box-shadow: var(--shadow-1); }
.cday-head {
    display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; border-radius: var(--r-sm);
    background: #f1eee6; color: var(--ink-soft); font-weight: 800; user-select: none; border: 0; width: 100%; font-family: inherit; font-size: var(--fs-meta);
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring);
}
.cday-head .dn { font-size: var(--fs-lead); font-weight: 900; line-height: 1; }
.cday-head .dw { font-size: 10px; font-weight: 700; opacity: .7; }
.cday-head.is-interactive { cursor: pointer; }
.cday-head.is-interactive:hover { background: var(--danger-soft); color: var(--danger); }
.cday-head:active { transform: scale(.97); }
.cday-head.is-out { background: var(--danger); color: #fff; }
.cday-head.is-out:hover { background: #9f0f33; color: #fff; }
.cday-list { display: flex; flex-direction: column; gap: 4px; }
.cshift {
    --tone: var(--ink-soft); --tone-soft: var(--surface-sunken); --tone-line: var(--hairline);
    width: 100%; min-height: 26px; padding: 0 6px; border: 1px solid var(--tone-line); border-radius: var(--r-sm);
    background: var(--tone-soft); color: var(--ink); font: inherit; font-size: var(--fs-meta); font-weight: 700; text-align: center; user-select: none;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring);
}
.cshift[data-shift="morning"] { --tone: var(--warn); } .cshift[data-shift="evening"] { --tone: var(--brand); } .cshift[data-shift="night"] { --tone: var(--brand-deep); }
.cshift.is-interactive { cursor: pointer; }
.cshift.is-interactive:hover { border-color: var(--tone); background: var(--surface); }
.cshift:active { transform: scale(.97); }
.cshift.is-blocked { background: var(--tone); border-color: var(--tone); color: #fff; }
.cshift.is-blocked.is-interactive:hover { background: var(--tone); filter: brightness(1.1); }
.cday-out-note { padding: 8px 4px; text-align: center; font-size: var(--fs-meta); font-weight: 800; color: var(--danger); border: 1px dashed var(--danger-line); border-radius: var(--r-sm); background: rgba(255,255,255,.6); }
.cday-free { text-align: center; font-size: var(--fs-meta); font-weight: 700; color: #c7c1b3; padding: 2px 0; user-select: none; }
.input.sm { min-height: 28px; font-size: var(--fs-meta); padding: 0 6px; text-align: center; font-weight: 600; border-radius: var(--r-sm); }
.day-tag-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid; line-height: 1.5; margin: 0 auto; }
.save-bar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--hairline); background: var(--surface); }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--hairline); background: var(--surface-sunken); color: var(--ink-soft); font-size: var(--fs-meta); font-weight: 700; }
.status.success { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.status.warning { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.status.error { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.layout-rail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-5); align-items: start; }
.layout-rail > .rail-col { position: sticky; top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 1099px) { .layout-rail { grid-template-columns: minmax(0, 1fr); } .layout-rail > .rail-col { position: static; } }
.card.is-dimmed { opacity: .5; pointer-events: none; }
.textarea-note { min-height: 110px; }
.flatpickr-calendar { direction: rtl !important; font-family: var(--font) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-pop) !important; border: 1px solid var(--hairline) !important; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover { background: var(--brand) !important; border-color: var(--brand) !important; }
.flatpickr-day.inRange { background: var(--brand-soft) !important; box-shadow: -5px 0 0 var(--brand-soft), 5px 0 0 var(--brand-soft) !important; }

/* state-coloured buttons */
.btn.ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.btn.ok:hover { background: #d3ede9; }
.btn.warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.btn.warn:hover { background: #fae5c0; }
.btn.is-on { box-shadow: inset 0 0 0 1px currentColor; }

/* admin toolbar */
.toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.toolbar .sep { width: 1px; align-self: stretch; background: var(--hairline); margin: 4px var(--sp-1); }
.inline-add { display: inline-flex; align-items: center; gap: 4px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: var(--r-md); }
.inline-add .input { min-height: 30px; width: 130px; border-color: transparent; background: var(--surface); font-size: var(--fs-meta); }
.notes-strip { margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); }
.note-card { max-width: 420px; padding: 6px var(--sp-3); border: 1px solid var(--brand-line); background: var(--brand-soft); border-radius: var(--r-md); font-size: var(--fs-meta); color: var(--ink); }
.note-card b { color: var(--brand); font-weight: 800; }

/* floating action dock (admin save) */
.dock { position: fixed; bottom: var(--sp-4); left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); }

/* drawers, scrim, modals */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(16, 24, 40, .28); }
.drawer { position: fixed; top: 0; left: 100%; height: 100%; width: min(94vw, 440px); z-index: 50; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--hairline); box-shadow: var(--shadow-pop); transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); visibility: hidden; }
/* open state is set by the page scripts via inline transform; closed drawers are hidden from focus and screen readers */
.drawer[style*="-100%"] { visibility: visible; transition-delay: 0s; }
.drawer.wide { width: min(94vw, 720px); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--hairline); flex: none; }
.drawer-note { padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--hairline); background: var(--surface-sunken); color: var(--ink-soft); font-size: var(--fs-meta); font-weight: 500; line-height: 1.6; flex: none; }
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--hairline); flex: none; }
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); background: rgba(16, 24, 40, .45); }
.modal { width: 100%; max-width: 380px; padding: var(--sp-5); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); animation: ui-rise var(--dur) var(--ease-out) both; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); justify-items: center; margin: var(--sp-3) 0 var(--sp-4); }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--hairline-strong); cursor: pointer; display: grid; place-items: center; color: #fff; transition: transform var(--dur) var(--ease-spring); }
.swatch:hover { transform: scale(1.12); }
.swatch.is-taken { opacity: .4; }
.mini-card { padding: var(--sp-3); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); }
.mini-card.danger { border-color: var(--danger-line); background: var(--danger-soft); }
.mini-card h4 { margin: 0 0 6px; font-size: var(--fs-body); font-weight: 800; }
.mini-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--surface-sunken); font-size: var(--fs-meta); }
.import-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-meta); }
.import-row.is-invalid { border-color: var(--danger-line); background: var(--danger-soft); }
.import-row .select { min-height: 28px; font-size: var(--fs-meta); }
code.code { padding: 0 4px; border: 1px solid var(--hairline); border-radius: 4px; background: var(--surface); font-size: 11px; direction: ltr; unicode-bidi: embed; }
.is-active-ring { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px currentColor; }
.sidebar-trigger { display: flex; align-items: center; justify-content: center; width: 40px; align-self: stretch; border: 1px solid var(--hairline); border-radius: var(--r-xl); background: var(--surface); color: var(--ink-faint); cursor: pointer; }
.sidebar-trigger:hover { color: var(--brand); border-color: var(--brand-line); }
.admin-main { display: flex; gap: var(--sp-4); align-items: flex-start; }
.admin-main > .grow { min-width: 0; }
.admin-main .side-panel { width: 288px; flex: none; }
@media (max-width: 1099px) { .admin-main { flex-direction: column; } .admin-main .side-panel { width: 100%; } }
.swatch-x { display: grid; place-items: center; pointer-events: none; }
.swatch.sm { width: 14px; height: 14px; border-width: 1px; flex: none; padding: 0; }
.truncate-name { display: inline-block; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ===== mobile components (prefix m-); used by the mobile pages, touch targets >= 44px ===== */
body.m { padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom, 0px)); }
.m-shell { max-width: 520px; margin: 0 auto; padding: 0 var(--sp-3) var(--sp-8); }
.m-top {
    display: flex; align-items: center; gap: var(--sp-3); margin: 0 calc(var(--sp-3) * -1) var(--sp-4);
    padding: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--sp-4) var(--sp-5);
    background: var(--brand-deep); color: #fff; border-radius: 0 0 var(--r-xl) var(--r-xl); box-shadow: var(--shadow-2);
}
.m-top .eyebrow { color: #9aa7d4; }
.m-top .m-title { font-size: var(--fs-title); font-weight: 900; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.m-top .avatar { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.18); }
.m-icon-btn {
    width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--r-md);
    border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
    transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring);
}
.m-icon-btn:active { transform: scale(.94); background: rgba(255,255,255,.18); }
.m-nav { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.m-row {
    display: flex; align-items: center; gap: var(--sp-3); min-height: 64px; padding: var(--sp-3) var(--sp-4);
    background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
    text-align: right; cursor: pointer; transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring);
}
.m-row:active { transform: scale(.985); background: var(--surface-sunken); }
.m-row .body { flex: 1 1 auto; min-width: 0; }
.m-row .title { font-size: var(--fs-lead); font-weight: 800; letter-spacing: -.01em; }
.m-row .sub { font-size: var(--fs-meta); font-weight: 500; color: var(--ink-soft); margin-top: 1px; }
.m-row .chev { color: var(--ink-faint); flex: none; }
.m-row.dark { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.m-row.dark .sub { color: #aab4d6; }
.m-row.dark .chev { color: #aab4d6; }
.m-row.dark:active { background: #0d1838; }
.m-section { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: 0 var(--sp-1) var(--sp-3); }
body.m .btn { min-height: 44px; }
body.m .btn.sm { min-height: 44px; padding: 0 var(--sp-4); }
body.m .input, body.m .select { min-height: 44px; }
.shift-card.is-next { border-color: var(--tone); box-shadow: var(--shadow-2); background: linear-gradient(0deg, var(--surface), var(--surface)), var(--tone-soft); }
.shift-card.is-past { opacity: .6; }
.shift-card .head { display: flex; align-items: center; gap: var(--sp-3); width: 100%; }
.shift-card .head .grow { min-width: 0; }

/* ===== mobile schedule components (T7.2): control bar, day strip, day card, week rows, month grid ===== */
.m-top .grow { min-width: 0; }
.m-bar { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.m-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--hairline); border-radius: var(--r-md); }
.m-seg button { min-height: 44px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-soft); font: inherit; font-size: var(--fs-body); font-weight: 800; cursor: pointer; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring); }
.m-seg button:active { transform: scale(.97); }
.m-seg button[aria-pressed="true"] { background: var(--brand-deep); color: #fff; box-shadow: var(--shadow-1); }
.m-stepper { display: flex; align-items: center; gap: var(--sp-2); }
.m-step-btn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-spring); }
.m-step-btn:active { transform: scale(.94); background: var(--surface-sunken); }
.m-step-btn:disabled { opacity: .4; }
.m-step-label { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 var(--sp-3); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-lead); font-weight: 800; letter-spacing: -.01em; cursor: pointer; }
.m-step-label svg { color: var(--ink-faint); flex: none; }
.m-step-label:active { background: var(--surface-sunken); }
.m-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.m-weekbar { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.m-weekbar .range { flex: 1 1 auto; text-align: center; font-size: var(--fs-body); font-weight: 700; color: var(--ink-soft); }
.m-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: var(--sp-3); }
.m-strip button { min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring), background-color var(--dur-fast) ease; }
.m-strip button:active { transform: scale(.95); }
.m-strip .dow { font-size: var(--fs-eyebrow); font-weight: 700; color: var(--ink-faint); }
.m-strip .num { font-size: var(--fs-lead); font-weight: 900; font-variant-numeric: tabular-nums; }
.m-strip .pip { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.m-strip .pip.on { background: var(--hairline-strong); }
.m-strip button.is-weekend { background: var(--surface-weekend); }
.m-strip button.is-today { border-color: var(--brand-line); }
.m-strip button.is-today .num { color: var(--brand); }
.m-strip button.is-other { opacity: .55; }
.m-strip button[aria-current="date"] { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; opacity: 1; }
.m-strip button[aria-current="date"] .dow { color: #aab4d6; }
.m-strip button[aria-current="date"] .num { color: #fff; }
.m-strip button[aria-current="date"] .pip.on { background: #aab4d6; }

.m-day-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-xl); box-shadow: var(--shadow-1); animation: ui-rise var(--dur) var(--ease-out) both; }
.m-day-card.is-today { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow-1); }
.m-day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.m-day-head .m-date { font-size: var(--fs-display); font-weight: 900; letter-spacing: -.025em; line-height: 1.1; }
.m-day-head .m-dow { font-size: var(--fs-lead); font-weight: 700; color: var(--ink-soft); }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-shift { border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.m-shift-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 6px var(--sp-3); background: var(--surface-sunken); border-bottom: 1px solid var(--hairline); font-size: var(--fs-meta); font-weight: 800; color: var(--ink-soft); }
.m-shift.is-oncall { border-color: var(--oncall-line); }
.m-shift.is-oncall .m-shift-title { background: var(--oncall-soft); border-bottom-color: var(--oncall-line); color: var(--oncall); }
.m-shift-body { display: flex; flex-direction: column; padding: 2px var(--sp-3); }
.m-worker { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; font-size: var(--fs-lead); font-weight: 600; overflow-wrap: anywhere; }
.m-worker + .m-worker { border-top: 1px solid #f1eee6; }
.m-worker .dot-sw { width: 10px; height: 10px; }
.m-empty { padding: var(--sp-3) 0; font-size: var(--fs-body); color: var(--ink-faint); }
.m-hint { text-align: center; color: var(--ink-faint); font-size: var(--fs-meta); font-weight: 500; padding: var(--sp-3) 0 0; }

.m-wk { display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%; min-height: 56px; padding: var(--sp-3); margin-bottom: var(--sp-2); text-align: right; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); color: inherit; font: inherit; cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring), background-color var(--dur-fast) ease; }
.m-wk:active { transform: scale(.985); background: var(--surface-sunken); }
.m-wk.is-weekend { background: var(--surface-weekend); }
.m-wk.is-today { border-color: var(--brand-line); box-shadow: 0 0 0 2px var(--brand-soft); }
.m-wk.is-other { opacity: .6; }
.m-wk .datebox { width: 44px; flex: none; text-align: center; }
.m-wk .datebox .dow { display: block; font-size: var(--fs-eyebrow); font-weight: 700; color: var(--ink-faint); }
.m-wk .datebox .num { display: block; font-size: var(--fs-title); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.2; }
.m-wk .lines { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.m-wk .line { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-body); }
.m-wk .line .k { flex: none; width: 34px; font-size: var(--fs-eyebrow); font-weight: 800; color: var(--ink-faint); }
.m-wk .line.oncall .k { color: var(--oncall); }
.m-wk .names { min-width: 0; display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); }
.m-wk .names span { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; overflow-wrap: anywhere; }
.m-wk .note { font-size: var(--fs-body); color: var(--ink-faint); }

.m-month-dow, .m-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.m-month-dow { margin-bottom: 4px; text-align: center; font-size: var(--fs-meta); font-weight: 800; color: var(--ink-faint); }
.m-mcell { min-height: 48px; aspect-ratio: 1 / 1.05; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring); }
.m-mcell:active { transform: scale(.94); }
.m-mcell .num { font-size: var(--fs-body); font-weight: 800; font-variant-numeric: tabular-nums; }
.m-mcell .dots { display: flex; gap: 2px; min-height: 6px; }
.m-mcell .dots span { width: 6px; height: 6px; border-radius: 50%; }
.m-mcell.is-weekend { background: var(--surface-weekend); }
.m-mcell.is-tagged { background: var(--warn-soft); border-color: var(--warn-line); }
.m-mcell.is-today { border-color: var(--brand); border-width: 2px; }
.m-mcell.is-today .num { color: var(--brand); }
.m-mcell.is-void { visibility: hidden; }
.m-stat-name { display: inline-block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (max-width: 359px) { .m-strip, .m-month, .m-month-dow { gap: 2px; } }
@media (prefers-reduced-motion: reduce) { .m-day-card { animation: none; } .m-seg button, .m-step-btn, .m-strip button, .m-wk, .m-mcell { transition: none; } }

/* ===== mobile constraints (T7.3): month agenda, one row per day ===== */
.m-fold { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); margin-bottom: var(--sp-3); }
.m-fold > summary { list-style: none; display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: 0 var(--sp-4); font-size: var(--fs-lead); font-weight: 800; cursor: pointer; }
.m-fold > summary::-webkit-details-marker { display: none; }
.m-fold > summary .sub { margin-inline-start: auto; font-size: var(--fs-meta); font-weight: 500; color: var(--ink-faint); }
.m-fold > summary svg.chev { color: var(--ink-faint); transition: transform var(--dur) var(--ease-out); }
.m-fold[open] > summary svg.chev { transform: rotate(90deg); }
.m-fold .m-fold-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 var(--sp-4) var(--sp-4); }
.m-fold .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.m-fold .pair .field { min-width: 0; }
.m-fold input[type="date"].input { min-width: 0; }
.m-req { color: var(--danger); font-weight: 900; margin-inline-start: 2px; }

.m-agenda { display: flex; flex-direction: column; gap: var(--sp-2); }
.m-cday { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); scroll-margin-top: var(--sp-4); }
.m-cday.is-weekend { background: var(--surface-weekend); }
.m-cday.is-today { border-color: var(--brand-line); box-shadow: 0 0 0 2px var(--brand-soft); }
.m-cday.fullday { background: var(--danger-soft); border-color: var(--danger-line); }
.m-cday.is-flash { animation: ui-flash 1.2s ease; }
@keyframes ui-flash { 0%, 60% { box-shadow: 0 0 0 3px var(--brand); } 100% { box-shadow: var(--shadow-1); } }
.m-cday-main { display: flex; align-items: stretch; gap: 6px; }
.m-cdate { width: 44px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.m-cdate .dow { font-size: var(--fs-eyebrow); font-weight: 700; color: var(--ink-faint); }
.m-cdate .num { font-size: var(--fs-title); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15; }
.m-toggles { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.shift-toggle { min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 2px; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-body); font-weight: 700; cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring), background-color var(--dur-fast) ease; }
.shift-toggle:active { transform: scale(.95); }
.shift-toggle .st { font-size: var(--fs-eyebrow); font-weight: 800; }
.shift-toggle.blocked-morning { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.shift-toggle.blocked-evening { background: #fdeee3; border-color: #f3c9a8; color: #9a3412; }
.shift-toggle.blocked-night { background: var(--oncall-soft); border-color: var(--oncall-line); color: var(--oncall); }
.shift-toggle:disabled { opacity: .55; cursor: not-allowed; }
.m-fullnote { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 48px; font-size: var(--fs-body); font-weight: 800; color: var(--danger); }
.day-badge { width: 64px; flex: none; min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 0 2px; text-align: center; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-soft); font: inherit; font-size: var(--fs-meta); font-weight: 800; line-height: 1.2; cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring), background-color var(--dur-fast) ease; }
.day-badge:active { transform: scale(.95); }
.day-badge.blocked { background: var(--danger); border-color: var(--danger); color: #fff; }
.day-badge:disabled { opacity: .55; cursor: not-allowed; }
.m-cday .reason-input { width: 100%; min-height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--surface); font: inherit; font-size: var(--fs-body); font-weight: 500; }
.m-cday .reason-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.m-cday .reason-input.reason-invalid, .m-cday .reason-input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); }
.m-cday .reason-input:disabled { background: var(--surface-sunken); color: var(--ink-faint); }
.m-cday-tag { align-self: flex-start; }
.m-savebar { position: fixed; z-index: 60; left: var(--sp-3); right: var(--sp-3); bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); max-width: 496px; margin: 0 auto; }
.m-savebar #status-text { flex: 1 1 auto; min-width: 0; font-size: var(--fs-meta); font-weight: 700; color: var(--ink-soft); line-height: 1.4; }
.m-savebar #status-text.success { color: var(--ok); }
.m-savebar #status-text.warning { color: var(--warn); }
.m-savebar #status-text.error { color: var(--danger); }
.m-savebar .btn { flex: none; }
.btn.primary:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }
body.m.has-savebar { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
.m-stepper .select { flex: 1 1 auto; min-width: 0; min-height: 44px; text-align: center; text-align-last: center; font-size: var(--fs-lead); font-weight: 800; border-radius: var(--r-md); background: var(--surface); border-color: var(--hairline); }

/* ===== mobile admin (T7.4): bottom sheets, slot buttons, absences, dock ===== */
.m-sheet-backdrop { position: fixed; inset: 0; z-index: 115; background: rgba(16, 24, 40, .42); opacity: 0; pointer-events: none; transition: opacity var(--dur) ease; }
.m-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.m-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; max-height: 84vh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--shadow-pop); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(100%); visibility: hidden; transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); max-width: 560px; margin: 0 auto; }
.m-sheet.open { transform: none; visibility: visible; transition-delay: 0s; }
.m-sheet-grip { width: 40px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: var(--hairline-strong); flex: none; }
.m-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--hairline); flex: none; }
.m-sheet-search { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--hairline); flex: none; }
.m-sheet-list { overflow-y: auto; flex: 1 1 auto; padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.m-sheet-list .m-row { min-height: 60px; }
.m-sheet-body { overflow-y: auto; padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
button.m-row { width: 100%; font: inherit; color: inherit; }
.m-picker-section-title { margin-top: var(--sp-3); font-size: var(--fs-meta); font-weight: 800; color: var(--ink-faint); }
.m-picker-list-item { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); min-height: 56px; padding: var(--sp-3); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring); }
.m-picker-list-item:active { transform: scale(.985); }
.m-picker-list-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.m-picker-list-item .left { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.m-picker-list-item .name { font-size: var(--fs-lead); font-weight: 800; overflow-wrap: anywhere; }
.m-picker-list-item .reason { font-size: var(--fs-meta); color: var(--ink-soft); font-weight: 500; line-height: 1.4; }
.m-picker-list-item.available { border-color: var(--ok-line); background: var(--ok-soft); }
.m-picker-list-item.blocked { border-color: var(--danger-line); background: var(--danger-soft); }
.m-picker-list-item.busy { border-color: var(--warn-line); background: var(--warn-soft); }
.m-picker-list-item.hardblocked { border-color: var(--danger-line); background: var(--danger-soft); opacity: .6; cursor: not-allowed; }
.m-picker-list-item.clear { justify-content: center; align-items: center; border-style: dashed; border-color: var(--hairline-strong); background: var(--surface-sunken); color: var(--ink-soft); }
.m-picker-badge { flex: none; padding: 2px var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-meta); font-weight: 800; white-space: nowrap; }
.m-picker-badge.available { background: #fff; color: var(--ok); }
.m-picker-badge.blocked { background: #fff; color: var(--danger); }
.m-picker-badge.busy { background: #fff; color: var(--warn); }

.m-day-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.m-day-stack.other-month .m-shift { opacity: .6; }
.m-assign-row { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.m-assign-btn { flex: 1 1 auto; min-width: 0; min-height: 48px; display: flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3); border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-lead); font-weight: 700; text-align: right; cursor: pointer; overflow-wrap: anywhere; transition: transform var(--dur-fast) var(--ease-spring); }
.m-assign-btn:active { transform: scale(.985); }
.m-assign-btn.empty { border-style: dashed; background: var(--surface-sunken); color: var(--ink-faint); font-weight: 600; }
.m-assign-btn:disabled { opacity: .6; cursor: not-allowed; }
.m-assign-remove { flex: none; width: 48px; display: grid; place-items: center; border: 1px solid var(--danger-line); border-radius: var(--r-md); background: var(--danger-soft); color: var(--danger); cursor: pointer; }
.m-add-slot { width: 100%; min-height: 44px; border: 1px dashed var(--brand-line); border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand); font: inherit; font-size: var(--fs-body); font-weight: 800; cursor: pointer; }
.m-abs { border: 1px dashed var(--hairline-strong); border-radius: var(--r-md); background: var(--surface-sunken); }
.m-abs.has { border-style: solid; border-color: var(--danger-line); background: var(--danger-soft); }
.m-abs > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 var(--sp-3); font-size: var(--fs-body); font-weight: 800; color: var(--ink-soft); cursor: pointer; }
.m-abs.has > summary { color: var(--danger); }
.m-abs > summary::-webkit-details-marker { display: none; }
.m-abs .m-abs-list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; padding: 0 var(--sp-3) var(--sp-2); }
.m-abs label { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; font-size: var(--fs-body); font-weight: 600; cursor: pointer; }
.m-abs input[type="checkbox"] { width: 22px; height: 22px; flex: none; accent-color: var(--brand); }
.m-cta-note { padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-sunken); border: 1px solid var(--hairline); font-size: var(--fs-body); font-weight: 600; color: var(--ink-soft); display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.m-savebar .btn { min-width: 84px; }
.m-add-row { display: flex; gap: var(--sp-2); }
.m-add-row .input { flex: 1 1 auto; min-width: 0; }
.m-savebar #save-status { flex: 1 1 auto; min-width: 0; font-size: var(--fs-meta); font-weight: 700; color: var(--ink-soft); line-height: 1.4; }
.m-savebar #save-status.success { color: var(--ok); }
.m-savebar #save-status.warning { color: var(--warn); }
.m-savebar #save-status.error { color: var(--danger); }

/* Colour swatch that opens the picker: stays clickable even inside disabled/pointer-none rows. */
.color-dot-btn { pointer-events: auto !important; cursor: pointer !important; }