/* Olive 24 staff app
   Brand colors taken from olivetwentyfour.com and the Olive 24 logo. */

:root {
    --olive-950: #1f200a;
    --olive-900: #2e3010;
    --olive-800: #46481a;
    --olive-700: #595c1d; /* brand primary */
    --olive-600: #6e7224;
    --olive-500: #8b902f;
    --olive-400: #9da436;
    --olive-200: #dfe4b8;
    --olive-100: #eef0d8;

    --cream-50: #fdfbf6;
    --cream-100: #f5efe3; /* logo background */
    --cream-200: #ece3d0;

    --gold-500: #c69d3b;
    --gold-100: #f7eed6;

    --terra-600: #af4b18;
    --terra-500: #d16832;
    --terra-100: #f9e4d8;

    --ink: #23240f;
    --ink-soft: #5f5e4c;
    --line: #e4dccb;
    --field-line: #cfc6b0;
    --surface: #ffffff;
    --bg: var(--cream-100);

    --radius: 14px;
    --shadow: 0 1px 2px rgba(35, 36, 15, .05), 0 6px 20px rgba(35, 36, 15, .06);

    --font-display: "EB Garamond", Garamond, "Times New Roman", serif;
    --font-ui: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
}

[hidden] { display: none !important; }

img, svg { max-width: 100%; }

a { color: var(--olive-700); text-underline-offset: 2px; }
a:hover { color: var(--olive-900); }
a[href^="tel:"] { white-space: nowrap; }

h1, h2, h3 {
    margin: 0 0 .5rem;
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.15;
    color: var(--olive-900);
}
h1 { font-size: 2.3rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }
code { font-family: Consolas, "Cascadia Mono", monospace; font-size: .9em; background: var(--cream-100); padding: .1em .35em; border-radius: 4px; word-break: break-all; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.eyebrow { margin: 0 0 .25rem; font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.eyebrow a { color: inherit; }
.muted { color: var(--ink-soft); }
.hint { display: block; color: var(--ink-soft); font-size: .88rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.top-gap { margin-top: 1rem; }
.h1-sub { display: block; margin-top: .25rem; font-family: var(--font-ui); font-size: 1rem; color: var(--ink-soft); }
.divider { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }

/* ---------- Top bar ---------- */
.topbar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.75rem;
    padding: .7rem 1.5rem;
    background: rgba(253, 251, 246, .96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: .6rem; color: var(--olive-700); text-decoration: none; }
.brand .mark { width: 44px; height: auto; color: var(--olive-700); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-family: var(--font-display); font-size: 1.45rem; letter-spacing: .08em; text-transform: uppercase; color: var(--olive-700); }
.brand-sub { margin-top: .2rem; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.mainnav { display: flex; flex: 1; gap: .25rem; flex-wrap: wrap; }
.mainnav a { padding: .5rem .95rem; border-radius: 999px; color: var(--ink); font-weight: 500; text-decoration: none; }
.mainnav a:hover { background: var(--olive-100); }
.mainnav a.active { background: var(--olive-700); color: #fff; }
.userbox { display: flex; align-items: center; gap: .75rem; }
.user-name { font-weight: 500; }
.userbox form { margin: 0; }

.page { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.75rem 1.5rem 2.5rem; }
.sitefooter { padding: 1.25rem 1rem 1.5rem; text-align: center; font-size: .8rem; letter-spacing: .04em; color: var(--ink-soft); }

/* ---------- Layout ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.card.narrow { max-width: 560px; margin: 3rem auto; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .75rem 1.5rem; margin-bottom: .75rem; }
.card-head h2, .card-head p { margin-bottom: 0; }
.grid { display: grid; gap: 1.25rem; }
.grid > .card { margin-bottom: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-clock { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.span-2 { grid-column: 1 / -1; }
.grid + .card, .grid + .hint { margin-top: 1.25rem; }
@media (max-width: 820px) {
    .grid-2, .grid-clock { grid-template-columns: 1fr; }
}

.page-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.page-head h1 { margin: 0; }
.page-head p.muted { margin: 0; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .62rem 1.15rem;
    border: 1px solid transparent; border-radius: 10px;
    font: inherit; font-weight: 500; line-height: 1.2;
    text-decoration: none; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--olive-700); color: #fff; }
.btn-primary:hover { background: var(--olive-800); color: #fff; }
.btn-secondary { background: #fff; border-color: var(--olive-700); color: var(--olive-700); }
.btn-secondary:hover { background: var(--olive-100); color: var(--olive-800); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--cream-200); color: var(--ink); }
.btn-danger { background: var(--terra-500); color: #fff; }
.btn-danger:hover { background: var(--terra-600); color: #fff; }
.btn-sm { padding: .36rem .72rem; border-radius: 8px; font-size: .86rem; }
.btn-lg { padding: .82rem 1.45rem; font-size: 1.05rem; }
.btn-xl { padding: 1.15rem 1.6rem; border-radius: 14px; font-size: 1.4rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ---------- Forms ---------- */
form { margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.form-grid .field { margin-bottom: 0; }
.field > label, .label { font-size: .9rem; font-weight: 500; }
.field.grow { flex: 1; }

input[type=text], input[type=password], input[type=email], input[type=tel], input[type=url],
input[type=date], input[type=time], input[type=number], input[type=search], select, textarea {
    width: 100%;
    padding: .62rem .75rem;
    border: 1px solid var(--field-line); border-radius: 10px;
    background: #fff; color: var(--ink);
    font: inherit;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--olive-500); box-shadow: 0 0 0 3px rgba(157, 164, 54, .28); }
input[disabled], select[disabled] { background: var(--cream-50); color: var(--ink-soft); }
.check { display: inline-flex; align-items: center; gap: .55rem; font-weight: 400; cursor: pointer; margin-right: 1.25rem; }
.check input { width: 1.2rem; height: 1.2rem; accent-color: var(--olive-700); }
.field .check + .check { margin-top: .4rem; }
.input-row { display: flex; gap: .5rem; }
.input-row input { flex: 1; }
.field-validation-error, .text-danger { color: var(--terra-600); font-size: .86rem; }
.field-validation-valid, .validation-summary-valid { display: none; }
.input-validation-error { border-color: var(--terra-500) !important; }
.validation-summary-errors ul { margin: 0; padding-left: 1.2rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.form-actions .push-right { margin-left: auto; }
.center-actions { justify-content: center; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.section-title { margin: 1.75rem 0 1rem; padding-bottom: .45rem; border-bottom: 1px solid var(--line); font-size: 1.3rem; color: var(--olive-800); }
.section-title.first { margin-top: 0; }
.filters { padding: 1.1rem 1.25rem; }
.filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.filter-row .field { margin-bottom: 0; min-width: 160px; }
.quick-links { margin: .75rem 0 0; font-size: .9rem; color: var(--ink-soft); }

/* ---------- Alerts ---------- */
.alert { margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid; border-radius: 10px; }
.alert-success { background: #eff3dd; border-color: #cdd69f; color: #3b3e12; }
.alert-info { background: var(--gold-100); border-color: #e9d59f; color: #5b4411; }
.alert-error { background: var(--terra-100); border-color: #efc2a8; color: #7a3010; }
.alert-error:empty { display: none; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th {
    padding: .6rem .75rem;
    border-bottom: 2px solid var(--line);
    font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    text-align: left; white-space: nowrap; color: var(--ink-soft);
}
.table td { padding: .72rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot td { border-top: 2px solid var(--line); font-weight: 600; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.is-dim td { opacity: .5; }
.cell-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.cell-actions form { display: contents; }
.cell-sub { display: block; font-size: .85rem; color: var(--ink-soft); }
.audit-table td { font-size: .88rem; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block; padding: .14rem .6rem;
    border: 1px solid transparent; border-radius: 999px;
    background: var(--cream-200); color: var(--ink);
    font-size: .76rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; vertical-align: middle;
}
.badge-requested { background: var(--gold-100); border-color: #e6cf8f; color: #7a5a12; }
.badge-confirmed { background: var(--olive-100); border-color: var(--olive-200); color: var(--olive-800); }
.badge-seated { background: var(--olive-700); color: #fff; }
.badge-completed { background: #ebe8df; color: #55534a; }
.badge-cancelled, .badge-declined { background: #f1ece5; color: #887d70; }
.badge-noshow { background: var(--terra-100); color: var(--terra-600); }
.badge-source { background: transparent; border-color: var(--line); color: var(--ink-soft); font-weight: 500; }
.badge-role-systemadmin { background: var(--olive-900); color: var(--cream-100); }
.badge-role-administrator { background: var(--olive-700); color: #fff; }
.badge-role-manager { background: var(--olive-100); border-color: var(--olive-200); color: var(--olive-800); }
.badge-role-staffl1 { background: var(--gold-100); border-color: #e6cf8f; color: #6e5212; }
.badge-role-staffl2 { background: var(--terra-100); border-color: #efc7b1; color: #8a3a12; }

.badge-vip { background: var(--gold-500); border-color: var(--gold-500); color: var(--olive-950); }
.badge-allergy { background: #fde8e1; border-color: #f2b9a3; color: #9a3412; white-space: normal; }
.badge-occasion { background: #f3ecdf; border-color: #e3d5b5; color: #6b5a2e; }
.alert-allergy { background: #fde8e1; border-color: #f2b9a3; color: #8a2e0c; }

/* ---------- Address book ---------- */
.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
a.chip { color: var(--ink); text-decoration: none; }
a.chip:hover { border-color: var(--olive-400); }
.chip-on, a.chip-on { background: var(--olive-700); border-color: var(--olive-700); color: #fff; }
.pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; }
.tile-value-sm { font-size: 1.6rem; }
.pre-line { white-space: pre-line; }
.kv-tight { gap: .25rem .9rem; font-size: .92rem; margin-bottom: .6rem; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-pair > div { display: flex; flex-direction: column; gap: .35rem; }
.form-pair label { font-size: .9rem; font-weight: 500; }
tr.is-upcoming td { background: var(--cream-50); }
a.resv-name { color: var(--olive-800); }

/* Reservation form + guest panel */
.resv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 1.25rem; }
.resv-layout > .card { margin-bottom: 0; }
.guest-panel { position: sticky; top: 5.5rem; }
.guest-panel h2 { font-size: 1.4rem; }
.guest-panel .alert { margin: .5rem 0; padding: .6rem .75rem; font-size: .92rem; }
@media (max-width: 980px) {
    .resv-layout { grid-template-columns: minmax(0, 1fr); }
    .guest-panel { position: static; }
}

/* ---------- Import ---------- */
.steps { margin: 0 0 1rem; padding-left: 1.2rem; }
.steps li + li { margin-top: .5rem; }
.segmented { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.map-table select { min-width: 260px; }
.map-table tr.is-mapped td:first-child { box-shadow: inset 3px 0 0 var(--olive-400); }
tr.is-problem td { background: #fff6f2; }
tr.is-highlight td { background: var(--gold-100); }
.import-log summary { cursor: pointer; font-size: .85rem; color: var(--olive-700); }
.import-log pre {
    max-height: 240px; overflow: auto; margin: .4rem 0 0; padding: .5rem .6rem;
    border-radius: 8px; background: var(--cream-50); font-size: .8rem; white-space: pre-wrap;
}

/* ---------- Roles & permissions ---------- */
.note-list { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); }
.note-list li + li { margin-top: .35rem; }
.perm-table th.role-col { text-align: center; white-space: normal; min-width: 108px; letter-spacing: 0; text-transform: none; }
.perm-table th.role-col .badge { margin-bottom: .2rem; }
.perm-table .perm-check { text-align: center; vertical-align: middle; }
.perm-table .perm-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--olive-700); cursor: pointer; }
.perm-table .perm-check input:disabled { cursor: not-allowed; opacity: .55; }
.perm-table .perm-label { min-width: 240px; }
.perm-table tr.perm-group td {
    padding-top: 1.1rem;
    background: var(--cream-50);
    font-family: var(--font-display); font-size: 1.15rem; color: var(--olive-800);
}
.perm-group-note { margin-left: .5rem; font-family: var(--font-ui); font-size: .8rem; color: var(--ink-soft); }
.perm-always { font-size: 1.1rem; font-weight: 600; color: var(--olive-700); }

/* ---------- Stats & tiles ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .9rem; margin: 1.1rem 0 0; }
.stat { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--cream-50); }
.stat dt { font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.stat dd { margin: 0; font-family: var(--font-display); font-size: 2rem; line-height: 1.1; color: var(--olive-800); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.tile {
    display: flex; flex-direction: column; gap: .2rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow);
    color: var(--ink); text-decoration: none;
    transition: border-color .15s, transform .1s;
}
.tile:hover { border-color: var(--olive-400); color: var(--ink); }
.tile-label { font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.tile-value { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--olive-800); }
.tile-sub { font-size: .9rem; color: var(--ink-soft); }
.tile-attention { border-color: var(--gold-500); background: linear-gradient(0deg, var(--gold-100), #fff 70%); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; margin: 0; }
.kv dt { font-weight: 500; color: var(--ink-soft); }
.kv dd { margin: 0; }

.list-plain { list-style: none; margin: 0; padding: 0; }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.empty { margin: 0; padding: 1.75rem 1rem; text-align: center; color: var(--ink-soft); }
.attention-card { border-left: 5px solid var(--terra-500); }
.copy-line { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0; }

/* ---------- Time clock ---------- */
.live-clock { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--olive-700); font-variant-numeric: tabular-nums; }
.clock-card { display: flex; flex-direction: column; gap: .85rem; border-top-width: 6px; }
.clock-card.is-in { border-top-color: var(--olive-400); }
.clock-card.is-out { border-top-color: var(--gold-500); }
.clock-status { display: flex; align-items: center; gap: .65rem; margin: 0; font-family: var(--font-display); font-size: 1.75rem; color: var(--olive-900); }
.clock-detail { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #c8c2b0; }
.dot-on { background: var(--olive-400); box-shadow: 0 0 0 5px rgba(157, 164, 54, .25); }

/* ---------- Kiosk / PIN pad ---------- */
body.kiosk .page { max-width: 1100px; display: flex; align-items: center; padding-top: 1.5rem; padding-bottom: 1.5rem; }
body.kiosk .page > .alert { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 20; width: min(640px, calc(100% - 2rem)); box-shadow: var(--shadow); font-size: 1.05rem; }
.kiosk-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); align-items: center; gap: 3rem; width: 100%; min-height: calc(100vh - 3rem); }
.kiosk-brand { text-align: center; }
.kiosk-brand .logo { max-width: 440px; margin: 0 auto; }
.kiosk-time { margin-top: 2rem; font-family: var(--font-display); font-size: 4.75rem; line-height: 1; color: var(--olive-800); font-variant-numeric: tabular-nums; }
.kiosk-date { font-size: 1.15rem; letter-spacing: .04em; color: var(--ink-soft); }
.kiosk-panel { margin: 0; padding: 2rem; }
.kiosk-title { text-align: center; font-size: 2rem; }
.pin-input {
    display: block; width: 100%; height: 4.25rem; padding: .5rem;
    border: 2px solid var(--line) !important; border-radius: 12px;
    background: var(--cream-50) !important;
    font-size: 2.4rem !important; letter-spacing: .55em; text-align: center;
}
.pin-error { margin: .75rem 0; text-align: center; font-weight: 500; color: var(--terra-600); }
.pin-help { margin: .75rem 0; text-align: center; color: var(--ink-soft); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1rem 0 1.25rem; }
.key {
    height: 4.4rem;
    border: 1px solid var(--line); border-radius: 14px;
    background: #fff; color: var(--olive-900);
    box-shadow: 0 2px 0 var(--line);
    font: inherit; font-size: 1.8rem; font-weight: 500;
    cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.key:hover { background: var(--cream-50); }
.key:active { transform: translateY(2px); box-shadow: none; background: var(--olive-100); }
.key-fn { background: var(--cream-50); color: var(--ink-soft); font-size: 1.05rem; }
.kiosk-links { margin: 1.25rem 0 0; text-align: center; font-size: .92rem; }
@media (max-width: 860px) {
    .kiosk-wrap { grid-template-columns: 1fr; gap: 1.5rem; min-height: 0; }
    .kiosk-brand .logo { max-width: 260px; }
    .kiosk-time { margin-top: 1rem; font-size: 3rem; }
}

/* ---------- Logo (drawn fallback until the logo files are added) ---------- */
.logo { display: block; width: 100%; height: auto; }
.logo-fallback { display: flex; flex-direction: column; align-items: center; color: var(--olive-700); }
.logo-fallback .mark { width: 34%; max-width: 150px; color: var(--olive-700); }
.logo-word { margin-top: .2rem; font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 3.8rem); letter-spacing: .07em; line-height: 1; }
.logo-tag { display: flex; align-items: center; gap: .75rem; margin-top: .45rem; font-size: clamp(.85rem, 2vw, 1.05rem); letter-spacing: .14em; white-space: nowrap; }
.logo-tag::before, .logo-tag::after { content: ""; width: 2.5rem; height: 1px; background: currentColor; }

/* ---------- Sign-in pages ---------- */
.auth-wrap { width: 100%; max-width: 480px; margin: 1rem auto; }
.auth-logo { max-width: 300px; margin: 0 auto 1.5rem; }
.auth-card { padding: 2rem; }

/* ---------- Admin ---------- */
.admin { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start; gap: 1.75rem; }
.subnav { position: sticky; top: 5.5rem; display: flex; flex-direction: column; gap: .2rem; }
.subnav a { padding: .58rem .9rem; border: 1px solid transparent; border-radius: 10px; color: var(--ink); font-weight: 500; text-decoration: none; }
.subnav a:hover { background: var(--cream-200); }
.subnav a.active { background: #fff; border-color: var(--line); box-shadow: var(--shadow); color: var(--olive-700); }
@media (max-width: 900px) {
    .admin { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .subnav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: .25rem; }
    .subnav a { white-space: nowrap; }
}
.hours-table td { vertical-align: middle; }
.hours-table input[type=time] { max-width: 170px; }
.hours-table input[type=checkbox] { width: 1.2rem; height: 1.2rem; accent-color: var(--olive-700); }
.hours-table tr.is-closed input[type=time] { opacity: .35; }

/* ---------- Reservations ---------- */
.date-nav, .search { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.date-nav input[type=date] { width: auto; }
.search input[type=search] { width: 240px; }
.summary-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { padding: .3rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--cream-50); font-size: .9rem; }
.resv-time { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.resv-name { font-weight: 600; white-space: nowrap; }
.resv-party { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.1; }
.notes { display: block; font-size: .87rem; font-style: italic; color: var(--ink-soft); }
.pending-card { border-left: 5px solid var(--gold-500); }
.pending-card h2 .badge { font-family: var(--font-ui); font-size: .85rem; }

/* ---------- Public booking ---------- */
body.public .page { padding-top: 1.25rem; }
.book { max-width: 1060px; margin: 0 auto; }
.book-hero { padding: .5rem 0 1.75rem; text-align: center; }
.book-hero .logo { max-width: 330px; margin: 0 auto; }
.book-hero p { margin: .75rem 0 0; letter-spacing: .04em; color: var(--ink-soft); }
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 1.5rem; }
.book-grid > .card { margin-bottom: 0; }
@media (max-width: 860px) { .book-grid { grid-template-columns: 1fr; } }
.book-search { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; align-items: end; gap: 1rem; margin-bottom: .75rem; }
.book-search .field { margin-bottom: 0; }
@media (max-width: 560px) {
    .book-search { grid-template-columns: 1fr 1fr; }
    .book-search .btn { grid-column: 1 / -1; }
}
.slots-legend { margin-bottom: .75rem; font-family: var(--font-display); font-size: 1.3rem; color: var(--olive-900); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .6rem; margin-bottom: .5rem; }
.slot { position: relative; }
.slot input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.slot span {
    display: block; padding: .68rem .5rem;
    border: 1px solid var(--olive-400); border-radius: 10px;
    background: #fff; color: var(--olive-800);
    font-weight: 500; text-align: center;
}
.slot input:hover + span { background: var(--olive-100); }
.slot input:checked + span { background: var(--olive-700); border-color: var(--olive-700); color: #fff; }
.slot input:focus-visible + span { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.book-info dl { margin: 0; }
.book-info dt { margin-top: 1rem; font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.book-info dd { margin: .2rem 0 0; }
.hours-list { margin: .25rem 0 0; padding: 0; list-style: none; font-size: .94rem; }
.hours-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; border-bottom: 1px dashed var(--line); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.confirm-card { max-width: 640px; margin: 0 auto; padding: 2.25rem; text-align: center; }
.confirm-summary { font-size: 1.15rem; }
.confirm-code { margin: .25rem 0 1.25rem; font-family: var(--font-display); font-size: 2.3rem; letter-spacing: .22em; color: var(--olive-700); }

@media (max-width: 640px) {
    .page { padding: 1.25rem 1rem 2rem; }
    .topbar { padding: .6rem 1rem; gap: .6rem 1rem; }
    .mainnav { order: 3; width: 100%; }
    .userbox { margin-left: auto; }
    h1 { font-size: 1.9rem; }
    .card { padding: 1.15rem; }
    .search input[type=search] { width: 100%; }
}

@media print {
    .topbar, .subnav, .sitefooter, .page-actions, .cell-actions, .filters, .toolbar { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; border: 0; padding: 0; }
    .admin { display: block; }
}