/* Next House Play Desk — design tokens + base layout.
   Brand: Next House Copenhagen (see nexthouse/NEXT_HOUSE_BRAND_STYLE.md).
   Sage header, Saira Stencil One lowercase headings (sparingly), Inter body
   at -0.03em, pill buttons with a sharp bottom-right corner, mint spot color
   for primary CTAs/active states, warm alternating section bands. */

:root {
    /* Brand palette (NEXT_HOUSE_BRAND_STYLE.md). NH-named tokens are the source
     of truth; the legacy --color-* names are mapped onto them so the rest of
     the stylesheet keeps working. */
    --nh-sage: #d2ddbb; /* lightGreen.100 — signature header/section bg */
    --nh-canvas: #fffff6; /* canvas.500 — warm cream body bg */
    --nh-charcoal: #4e5356; /* darkGrey.700 — primary text/borders */
    --nh-ink: #101518; /* darkGrey.900 — deepest dark */
    --nh-blush: #f7e4df; /* lightRosa.50 — warm section band */
    --nh-sand: #f3e1ad; /* brokenYellow.100 — warm section band */
    --nh-lightgrey: #e9e9e4; /* lightGrey.200 — neutral band */
    --nh-rose: #eecfcf; /* rosa.100 */
    --nh-lavender: #8885ff; /* purple.300 — links/info */
    --nh-mint: #00ec89; /* green.500 — primary CTA / active */
    --nh-mint-hover: #00da7c; /* green.600 */
    --nh-yellow: #d69e2e; /* yellow.500 — secondary CTA / overridden */
    --nh-black: #212121; /* footer */

    /* Legacy aliases (used throughout this file). */
    --color-bg: var(--nh-canvas);
    --color-card: #ffffff;
    --color-text: var(--nh-charcoal);
    --color-text-muted: #797d7f;
    --color-border: rgba(78, 83, 86, 0.22);
    --color-accent: var(--nh-mint); /* primary CTAs / active states */
    --color-accent-hover: var(--nh-mint-hover);
    --color-accent-soft: #d6fbed; /* light mint focus ring */
    --color-link: #6f6cff; /* readable lavender for links */
    --color-success: #009e6b; /* confirmed — deeper mint for text */
    --color-success-soft: #d6fbed;
    --color-warning: var(--nh-yellow); /* overridden */
    --color-warning-soft: var(--nh-sand);
    --color-danger: #dc2626;
    --color-danger-soft: #fee2e2;
    --color-muted: #9ca3af; /* cancelled */
    --color-muted-soft: var(--nh-lightgrey);
    --color-info: var(--nh-lavender);

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 2px rgba(78, 83, 86, 0.08);
    --shadow-md: 0 4px 12px rgba(78, 83, 86, 0.12);
    --shadow-lg: 0 16px 40px rgba(78, 83, 86, 0.2);

    --font-sans:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        sans-serif;
    --font-heading: "Saira Stencil One", "Inter", system-ui, sans-serif;
    --font-mono:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 0.875rem; /* 14px at the 16px root; scales with the root in the widescreen blocks below */
    line-height: 1.5;
    letter-spacing: -0.01em;
    min-height: 100vh;
}

a {
    color: var(--color-link);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* ---------- Auth screen ---------- */
.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: var(--nh-sage);
}
.auth-card {
    background: var(--nh-canvas);
    border: 1px solid rgba(78, 83, 86, 0.35);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 2.5rem 2rem 2rem;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.auth-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.75rem;
    margin: 0;
    color: var(--nh-charcoal);
    letter-spacing: 0;
}
.auth-mark {
    width: clamp(3.5rem, 9vw, 6rem);
    aspect-ratio: 719 / 212;
    height: auto;
    object-fit: contain;
    align-self: flex-start;
}
.auth-tagline {
    margin: -0.5rem 0 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}
.auth-card.shake {
    animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes shake {
    10%,
    90% {
        transform: translateX(-1px);
    }
    20%,
    80% {
        transform: translateX(2px);
    }
    30%,
    50%,
    70% {
        transform: translateX(-4px);
    }
    40%,
    60% {
        transform: translateX(4px);
    }
}
.auth-error {
    margin: 0;
    background: #fef2f2;
    color: var(--color-danger);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

/* ---------- Form fields ---------- */
.field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.field-label {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    font-weight: 500;
}
.field-input,
.field-select,
.field-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: white;
    font: inherit;
    color: inherit;
    transition:
        border-color 0.12s,
        box-shadow 0.12s;
}
.field-input:hover,
.field-select:hover,
.field-textarea:hover {
    border-color: var(--color-text-muted);
}
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.field-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ---------- Buttons ----------
   Signature shape: a pill with the bottom-right corner cut sharp. */
.btn {
    appearance: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    border-bottom-right-radius: 0;
    padding: 0.5rem 1.125rem;
    font: inherit;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    background: var(--color-card);
    color: var(--color-text);
    transition:
        background 0.15s ease-out,
        border-color 0.15s ease-out,
        color 0.15s ease-out,
        filter 0.15s ease-out;
}
.btn:hover {
    background: var(--color-muted-soft);
    border-color: var(--color-text-muted);
}
.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.btn-primary {
    background: var(--color-accent);
    color: #101518;
    border-color: var(--color-accent);
}
.btn-primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    filter: brightness(0.97);
}
.btn-ghost {
    background: transparent;
}
.btn-danger {
    background: var(--color-danger);
    color: white;
    border-color: var(--color-danger);
}
.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* ---------- Status pills (used later in schedule/bookings) ---------- */
.pill {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid transparent;
}
.pill-confirmed {
    background: var(--color-success-soft);
    color: var(--color-success);
}
.pill-pending {
    background: #fef3c7;
    color: #b45309;
    border-style: dashed;
}
.pill-pre_reserved {
    background: var(--color-success-soft);
    color: var(--color-success);
    border-style: dashed;
}
.pill-overridden {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}
.pill-cancelled {
    background: var(--color-muted-soft);
    color: var(--color-muted);
    text-decoration: line-through;
}

/* ---------- App shell (used by /games, /schedule, /bookings, /settings) ----------
   Signature: sage header, full-width 1440px canvas, warm section bands. */
.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.app-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 2rem;
    background: var(--nh-sage);
    border-bottom: 1px solid rgba(78, 83, 86, 0.35);
    position: sticky;
    top: 0;
    z-index: 1100;
}

@media (max-width: 1200px) {
  .app-topbar { gap: 0.5rem; padding: 0.5rem; }
  .app-title { display: none; }
}
.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--nh-charcoal);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.app-brand:hover {
    text-decoration: none;
}
.app-brand-mark {
    width: auto;
    height: 2rem;
    aspect-ratio: 719 / 212;
    object-fit: contain;
    display: inline-block;
    flex-shrink: 0;
}
.app-brand-name {
    font-size: 0.9375rem;
}
.app-title {
    margin: 0 0 0 0.5rem;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: -0.01em;
    color: var(--nh-charcoal);
    opacity: 0.6;
}
.app-topbar-spacer {
    flex: 1;
}
.app-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.app-nav-link {
    padding: 0.3125rem 0.75rem;
    border-radius: var(--radius-full);
    border-bottom-right-radius: 0;
    color: var(--nh-charcoal);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    opacity: 0.7;
    transition:
        background 0.15s ease-out,
        opacity 0.15s ease-out;
}
.app-nav-link:hover {
    background: rgba(78, 83, 86, 0.12);
    opacity: 1;
    text-decoration: none;
}
.app-nav-link.is-active {
    background: var(--nh-canvas);
    color: var(--nh-charcoal);
    opacity: 1;
    box-shadow: var(--shadow-sm);
}
.app-nav-signout {
    margin-left: 0.25rem;
}

/* Full-width desktop canvas (the receptionist's computer is the primary
   device — use the space). Caps at 1440px per the brand container spec. */
.page-body {
    padding: 1.75rem 2.5rem;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}
.page-actions {
    margin-bottom: 1rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* ---------- Next House signature utilities ---------- */
/* L-shaped corner divider that opens a text section. */
.l-divider {
    display: block;
    width: 1rem;
    height: 1rem;
    border-top: 1px solid var(--nh-charcoal);
    border-left: 1px solid var(--nh-charcoal);
    border-top-left-radius: 1rem;
    margin: 0 0 0.5rem;
}
/* Warm alternating section bands. */
.section-band {
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-lg);
}
.section-band-sage {
    background: var(--nh-sage);
}
.section-band-canvas {
    background: var(--nh-canvas);
}
.section-band-blush {
    background: var(--nh-blush);
}
.section-band-sand {
    background: var(--nh-sand);
}
.section-band-lavender {
    background: var(--nh-lavender);
    color: var(--nh-ink);
}
/* Asymmetric rounded image: sharp top-left, large radius elsewhere. */
.nh-image {
    border-top-left-radius: 0;
    border-top-right-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
    border-bottom-left-radius: 1.25rem;
    object-fit: cover;
}

/* ---------- Empty state ---------- */
.empty-state {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--color-border);
    padding: 3rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
/* ---------- Brand headings ----------
   Saira Stencil One lowercase is the typographic identity, used sparingly
   (one or two per page). */
.empty-state h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0;
    font-size: 1.5rem;
    color: var(--nh-charcoal);
}
.empty-state p {
    color: var(--color-text-muted);
    margin: 0;
}

/* ---------- Games grid ---------- */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.game-card {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.game-card-head {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.game-card-image {
    width: 48px;
    height: 48px;
    border-top-left-radius: 0;
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
    object-fit: cover;
    background: var(--nh-sand);
    display: grid;
    place-items: center;
    color: var(--nh-charcoal);
    font-weight: 700;
}
.game-card-image.placeholder {
    font-size: 1.25rem;
}
.game-card-title {
    margin: 0;
    font-size: 1rem;
}
.game-card-meta {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}
.game-card-desc {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}
.game-card-instances summary {
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-link);
}
.instance-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.instance-list li {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0;
}
.instance-label {
    flex: 1;
}
.instance-pill {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    border-radius: 999px;
}
.instance-pill.on {
    background: var(--color-success-soft);
    color: var(--color-success);
}
.instance-pill.off {
    background: var(--color-muted-soft);
    color: var(--color-muted);
}
.game-card-foot {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    border-top: 1px solid var(--color-border);
    padding-top: 0.5rem;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
.game-exception-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #991b1b;
    background: #fee2e2;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* ---------- Modals (native <dialog>) ---------- */
.modal {
    border: 1px solid var(--color-border);
    padding: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 480px;
    width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--color-card);
    color: var(--color-text);
}
.modal::backdrop {
    background: rgba(33, 33, 33, 0.7);
}
.modal-card {
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--color-card);
    border-radius: var(--radius-lg);
}
.modal-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.modal-head h2 {
    margin: 0;
    font-size: 1.125rem;
    flex: 1;
}
.modal-x {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    line-height: 1;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
}
.modal-x:hover {
    background: var(--color-muted-soft);
    color: var(--color-text);
}
.modal-esc-hint {
    font-size: 0.75rem;
}
.modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}
.field-inline {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

/* ---------- Toasts ---------- */
.toast-region {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 10;
    pointer-events: none;
}
.toast {
    background: var(--nh-charcoal);
    color: var(--nh-canvas);
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 0.875rem;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 0.2s,
        transform 0.2s;
    max-width: 320px;
}
.toast.show {
    opacity: 1;
    transform: translateY(0);
}
.toast-ok {
    background: var(--color-success);
    color: #fff;
}
.toast-err {
    background: var(--color-danger);
    color: #fff;
}
.toast-info {
    background: #6f6cff;
    color: #fff;
}

/* ---------- Bookings list ---------- */
.bookings-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
    background: var(--color-card);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.bookings-filters .btn[type="submit"] {
    flex-shrink: 0;
}
.bookings-filters .field-inline {
    gap: 0.4rem;
}
.bookings-filters .field-inline .field-input,
.bookings-filters .field-inline .field-select {
    width: auto;
    min-width: 130px;
}
.bookings-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    font-size: 0.875rem;
}
.bookings-table th,
.bookings-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.bookings-table th {
    background: var(--nh-lightgrey);
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: -0.01em;
}
.bookings-table tbody tr:hover {
    background: rgba(210, 221, 187, 0.25);
}

/* ---------- Schedule grid ---------- */
.schedule-page .schedule-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.date-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.date-picker {
    margin: 0 0.25rem;
}
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
/* Day-pill filters (brand §5.6): full pill, charcoal border, opacity for
   inactive, mint active state. */
.chip {
    padding: 0.3125rem 0.875rem;
    border-radius: 100px;
    background: transparent;
    border: 1px solid var(--nh-charcoal);
    color: var(--nh-charcoal);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    text-transform: capitalize;
    opacity: 0.65;
    transition:
        opacity 0.15s ease-out,
        background 0.15s ease-out,
        color 0.15s ease-out;
}
.chip:hover {
    background: rgba(78, 83, 86, 0.1);
    opacity: 1;
    text-decoration: none;
}
.chip-active {
    background: var(--nh-charcoal);
    color: var(--nh-canvas);
    opacity: 1;
    border-color: var(--nh-charcoal);
}
.chip-active:hover {
    background: var(--nh-ink);
    opacity: 1;
}

.schedule-grid-wrap {
    overflow-x: auto;
    position: relative;
    max-width: 100%;
}
.schedule-grid {
    display: grid;
    grid-template-columns: 140px repeat(var(--cols, 36), minmax(28px, 1fr));
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: 0.75rem;
    position: relative;
}
.sg-corner {
    grid-column: 1;
    grid-row: 1;
    background: rgba(210, 221, 187, 0.4);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    left: 0;
    top: 0;
    z-index: 10;
}
.sg-hour {
    grid-row: 1;
    background: rgba(210, 221, 187, 0.4);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 0.25rem 0.5rem;
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 5;
}
.sg-row-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--color-card);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    left: 0;
    z-index: 5;
}
.sg-row-icon {
    width: 32px;
    height: 32px;
    border-top-left-radius: 0;
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--nh-sand);
    display: grid;
    place-items: center;
    color: var(--nh-charcoal);
    font-weight: 700;
    flex-shrink: 0;
}
.sg-row-label-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sg-row-game {
    font-weight: 600;
    font-size: 0.8125rem;
}
.sg-row-instance {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    white-space: normal;
}

.sg-cell {
    appearance: none;
    border: none;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-card);
    cursor: pointer;
    min-height: 32px;
    padding: 0;
}
.sg-cell:nth-child(2n) {
    border-right-style: dashed;
}
.sg-cell:hover {
    background: var(--color-accent-soft);
}
.sg-cell-prereserved {
    background: var(--color-success-soft) !important;
    outline: 2px dashed var(--color-success);
    outline-offset: -2px;
}

.sg-block {
    margin: 2px;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    border: 1px solid transparent;
    color: white;
}
.sg-block strong {
    font-weight: 600;
    line-height: 1.1;
}
.sg-block-meta {
    font-size: 0.6875rem;
    opacity: 0.9;
}
.sg-block-meta-hostel {
    font-size: 0.6875rem;
    font-weight: bold;
    opacity: 0.9;
}
.sg-block-confirmed {
    background: var(--color-success);
}
.sg-block-pending {
    background: #dc2626;
    border: 2px dashed #fff;
}
.sg-block-pre_reserved {
    background: var(--color-success);
    opacity: 0.7;
    border-style: dashed;
}
.sg-block-overridden {
    background: var(--color-warning);
    color: var(--nh-ink);
}
.sg-block-cancelled {
    background: var(--color-muted);
    text-decoration: line-through;
    opacity: 0.7;
}
.sg-block-exception {
    background: repeating-linear-gradient(
        45deg,
        #6b7280,
        #6b7280 8px,
        #9ca3af 8px,
        #9ca3af 16px
    );
    cursor: default;
}

/* ---------- Booking form layout ---------- */
.bf-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
#bf-game-row[hidden],
#bf-game-select-row[hidden] {
    display: none;
}
.bf-extras {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.muted {
    color: var(--color-text-muted);
    margin: 0;
}

/* ---------- Slide-over ---------- */
.slideover {
    position: fixed;
    inset: 0;
    background: rgba(33, 33, 33, 0.7);
    z-index: 1400;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.2s;
}
.slideover.show {
    opacity: 1;
}
.slideover[hidden] {
    display: none;
}
.slideover-card {
    background: var(--color-card);
    width: min(480px, 95vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    transform: translateX(8px);
    transition: transform 0.2s;
}
.slideover.show .slideover-card {
    transform: translateX(0);
}
.slideover-head {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.slideover-head h2 {
    margin: 0;
    font-size: 1.125rem;
    flex: 1;
}
.slideover-body {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
}
.slideover-foot {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.detail-list {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0;
}
.detail-list dt {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}
.detail-list dd {
    margin: 0;
    font-size: 0.875rem;
}
.detail-list dt.detail-section {
    grid-column: 1 / -1;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.detail-list dt.detail-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.detail-extras {
    margin-top: 0.75rem;
}
.detail-extras pre {
    background: var(--color-muted-soft);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}
.banner {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    margin: 0.5rem 0;
}
.banner-warning {
    background: var(--color-warning-soft);
    color: #7a5a16;
}
.banner-danger {
    background: var(--color-danger-soft);
    color: #991b1b;
}

.pagination {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* ---------- Settings page ---------- */
.settings-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 760px;
}
.settings-card {
    background: var(--color-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.settings-card h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0;
    font-size: 1.125rem;
    color: var(--nh-charcoal);
}
.settings-card.settings-danger h2 {
    color: var(--color-danger);
}
.settings-row {
    display: flex;
    gap: 0.5rem;
    align-items: end;
    flex-wrap: wrap;
}
.field-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.field-list li {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--color-muted-soft);
}
.field-row-label {
    font-weight: 500;
}
.field-row-key {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}
.field-row-order {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* ---------- Connection banner ---------- */
.connection-banner {
    background: var(--color-danger);
    color: white;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.4375rem 1rem;
    position: relative;
    z-index: 6;
}
.connection-banner[hidden] {
    display: none;
}

/* ---------- Schedule "no bookings today" hint ---------- */
.schedule-no-bookings {
    background: var(--color-muted-soft);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin: 0.5rem 0;
}

/* ---------- Hour-format toggle ---------- */
.hour-toggle {
    appearance: none;
    border: 1px solid var(--nh-charcoal);
    border-radius: var(--radius-full);
    border-bottom-right-radius: 0;
    background: transparent;
    padding: 0.1875rem 0.625rem;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    color: var(--nh-charcoal);
    opacity: 0.7;
    transition:
        opacity 0.15s ease-out,
        background 0.15s ease-out;
}
.hour-toggle:hover {
    background: rgba(78, 83, 86, 0.12);
    opacity: 1;
}

/* ---------- Dark theme ----------
   Activated by [data-theme="dark"] on <html> (set by the no-flash
   bootstrap in base.html). Brand dark surfaces: ink/charcoal-based, mint
   stays bright for CTAs, lavender link brightened for contrast. The sage
   topbar becomes a dark ink header with light text. */
[data-theme="dark"] {
    --color-bg: #14181b;
    --color-card: #1f2426;
    --color-text: #e6e8e6;
    --color-text-muted: #c0c4c0;
    --color-border: rgba(255, 255, 255, 0.12);
    --color-accent: #00ec89;
    --color-accent-hover: #00da7c;
    --color-accent-soft: rgba(0, 236, 137, 0.18);
    --color-link: #9d9aff;
    --color-success: #00ec89;
    --color-success-soft: rgba(0, 236, 137, 0.15);
    --color-warning: #f3c969;
    --color-warning-soft: rgba(214, 158, 46, 0.18);
    --color-danger: #f87171;
    --color-danger-soft: rgba(248, 113, 113, 0.15);
    --color-muted: #6b7270;
    --color-muted-soft: #1f2426;
    --color-info: #9d9aff;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* Topbar → dark ink header with light text. */
[data-theme="dark"] .app-topbar {
    background: var(--nh-ink);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .app-brand,
[data-theme="dark"] .app-brand-name,
[data-theme="dark"] .app-title {
    color: var(--color-text);
}
[data-theme="dark"] .app-nav-link {
    color: var(--color-text);
}
[data-theme="dark"] .app-nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
}
[data-theme="dark"] .app-nav-link.is-active {
    background: var(--color-card);
    color: var(--color-text);
}
[data-theme="dark"] .app-brand-mark {
    filter: invert(1) brightness(1.5);
}
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .hour-toggle {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-text);
}
[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .hour-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Signature utilities flip to light strokes/fills. */
[data-theme="dark"] .l-divider {
    border-color: rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] .chip {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-text);
}
[data-theme="dark"] .chip:hover {
    background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .chip-active {
    background: var(--color-text);
    color: var(--nh-ink);
    border-color: var(--color-text);
}
[data-theme="dark"] .chip-active:hover {
    background: #fff;
}
[data-theme="dark"] .section-band-sage {
    background: #2d3526;
}
[data-theme="dark"] .section-band-canvas {
    background: var(--color-card);
}
[data-theme="dark"] .section-band-blush {
    background: #3a2a2a;
}
[data-theme="dark"] .section-band-sand {
    background: #3a3320;
}
[data-theme="dark"] .section-band-lavender {
    background: #2a2a4a;
    color: var(--color-text);
}

/* Form fields. */
[data-theme="dark"] .field-input,
[data-theme="dark"] .field-select,
[data-theme="dark"] .field-textarea {
    background: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
    color-scheme: dark;
}
[data-theme="dark"] .field-input:focus,
[data-theme="dark"] .field-select:focus,
[data-theme="dark"] .field-textarea:focus {
    box-shadow: 0 0 0 3px rgba(0, 236, 137, 0.25);
}
/* Tables / grid. */
[data-theme="dark"] .bookings-table th {
    background: #22272a;
}
[data-theme="dark"] .bookings-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .sg-corner,
[data-theme="dark"] .sg-hour {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-muted);
}
[data-theme="dark"] .sg-row-label {
    background: var(--color-card);
}
[data-theme="dark"] .sg-cell {
    background: var(--color-card);
}
[data-theme="dark"] .sg-cell:hover {
    background: var(--color-accent-soft);
}
[data-theme="dark"] .sg-block-overridden {
    color: var(--nh-ink);
}
/* Misc surfaces. */
[data-theme="dark"] .auth-shell {
    background: var(--nh-ink);
}
[data-theme="dark"] .auth-error {
    background: var(--color-danger-soft);
    color: #fecaca;
}
[data-theme="dark"] .modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .detail-extras pre {
    background: var(--color-bg);
}
[data-theme="dark"] .field-list li {
    background: var(--color-muted-soft);
}
[data-theme="dark"] .dtp-date:focus,
[data-theme="dark"] .dtp-hour:focus,
[data-theme="dark"] .dtp-minute:focus,
[data-theme="dark"] .dtp-period:focus {
    background: var(--color-bg);
}
[data-theme="dark"] .dtp-date,
[data-theme="dark"] .dtp-hour,
[data-theme="dark"] .dtp-minute,
[data-theme="dark"] .dtp-period {
    color: var(--color-text);
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
    appearance: none;
    border: 1px solid var(--nh-charcoal);
    border-radius: var(--radius-full);
    border-bottom-right-radius: 0;
    background: transparent;
    padding: 0.25rem 0.625rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    color: var(--nh-charcoal);
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 2.25rem;
    justify-content: center;
    transition:
        opacity 0.15s ease-out,
        background 0.15s ease-out;
}
.theme-toggle:hover {
    background: rgba(78, 83, 86, 0.12);
    opacity: 1;
}
.theme-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ---------- DateTime picker (custom) ---------- */
.dtp {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card);
    width: 100%;
    transition:
        border-color 0.12s,
        box-shadow 0.12s;
}
.dtp:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.dtp-date,
.dtp-hour,
.dtp-minute,
.dtp-period {
    appearance: none;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: 0.25rem 0.25rem;
    border-radius: var(--radius-sm);
    min-width: 0;
}
.dtp-date {
    flex: 1 1 auto;
}
.dtp-hour {
    width: 3.25rem;
}
.dtp-minute {
    width: 3.25rem;
}
.dtp-period {
    width: 3.25rem;
}
.dtp-date:focus,
.dtp-hour:focus,
.dtp-minute:focus,
.dtp-period:focus {
    outline: none;
    background: var(--color-muted-soft);
}
.dtp-sep {
    color: var(--color-text-muted);
    font-weight: 600;
}

/* ---------- Today sidebar ----------
   A toggleable right-hand drawer on every authenticated page showing
   today's bookings + a "next up" reminder. When open it pushes the page
   content left (body.has-today) so the full-width canvas is preserved. */
.today-toggle {
    appearance: none;
    border: 1px solid var(--nh-charcoal);
    border-radius: var(--radius-full);
    border-bottom-right-radius: 0;
    background: transparent;
    padding: 0.25rem 0.6875rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    color: var(--nh-charcoal);
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition:
        opacity 0.15s ease-out,
        background 0.15s ease-out;
}
.today-toggle:hover {
    background: rgba(78, 83, 86, 0.12);
    opacity: 1;
}
.today-toggle[aria-pressed="true"] {
    background: var(--nh-charcoal);
    color: var(--nh-canvas);
    opacity: 1;
}
.today-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: var(--radius-full);
    background: var(--nh-mint);
    color: var(--nh-ink);
    font-size: 0.6875rem;
    font-weight: 700;
}
.today-toggle[aria-pressed="true"] .today-count {
    background: var(--nh-mint);
    color: var(--nh-ink);
}

.today-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    max-width: 90vw;
    background: var(--nh-canvas);
    border-left: 1px solid rgba(78, 83, 86, 0.3);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform 0.25s ease-out;
    z-index: 1110;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.today-sidebar.is-open {
    transform: translateX(0);
}
.today-sidebar[hidden] {
    display: none;
}
body.has-today {
    margin-right: 340px;
}
@media (max-width: 1200px) {
    body.has-today { margin-right: 0; }
    .today-sidebar { box-shadow: var(--shadow-lg); }
    .page-body { padding: 1rem; }
}

.today-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--nh-sage);
}
.today-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--nh-charcoal);
    letter-spacing: 0;
}
.today-date {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--nh-charcoal);
    opacity: 0.7;
}
.today-close {
    appearance: none;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--nh-charcoal);
    cursor: pointer;
    padding: 0 0.25rem;
    border-radius: var(--radius-sm);
    opacity: 0.7;
}
.today-close:hover {
    opacity: 1;
    background: rgba(78, 83, 86, 0.12);
}

.today-next {
    margin: 1rem 1.25rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-lg);
    border-top-left-radius: 0;
    background: var(--color-success-soft);
    border: 1px solid rgba(0, 158, 107, 0.25);
}
.today-next-label {
    margin: 0 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-success);
}
.today-next-time {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--nh-charcoal);
    letter-spacing: -0.01em;
}
.today-next-who {
    margin: 0.125rem 0 0;
    font-weight: 600;
    color: var(--nh-charcoal);
}
.today-next-what {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.today-list-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 1.25rem 1.25rem;
}
.today-list-title {
    margin: 0.5rem 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}
.today-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.today-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background 0.12s ease-out,
        border-color 0.12s ease-out;
}
.today-item:hover {
    background: rgba(210, 221, 187, 0.3);
    border-color: var(--color-border);
}
.today-item-time {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--nh-charcoal);
    min-width: 3.5rem;
}
.today-item-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.today-item-who {
    font-weight: 600;
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.today-item-what {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.today-item-cancelled {
    opacity: 0.55;
}
.today-item-cancelled .today-item-who {
    text-decoration: line-through;
}
.today-empty {
    text-align: center;
    padding: 1.5rem 0;
}

/* Dark mode. */
[data-theme="dark"] .today-toggle {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-text);
}
[data-theme="dark"] .today-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .today-toggle[aria-pressed="true"] {
    background: var(--color-text);
    color: var(--nh-ink);
}
[data-theme="dark"] .today-sidebar {
    background: var(--color-card);
    border-left-color: var(--color-border);
}
[data-theme="dark"] .today-head {
    background: #2d3526;
}
[data-theme="dark"] .today-title,
[data-theme="dark"] .today-date,
[data-theme="dark"] .today-close {
    color: var(--color-text);
}
[data-theme="dark"] .today-next {
    background: var(--color-success-soft);
    border-color: rgba(0, 236, 137, 0.3);
}
[data-theme="dark"] .today-next-label {
    color: var(--color-success);
}
[data-theme="dark"] .today-next-time,
[data-theme="dark"] .today-next-who {
    color: var(--color-text);
}
[data-theme="dark"] .today-next-what {
    color: var(--color-text-muted);
}
[data-theme="dark"] .today-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ---------- Widescreen / high-resolution scaling ----------
   The base UI is tuned for ~1280–1440px. On larger monitors everything
   reads as small, so we bump the root font-size in steps (every rem-based
   size — text, buttons, padding, radii — scales with it) and widen the
   page canvas so the extra space is actually used. */
@media (min-width: 1500px) {
    html {
        font-size: 106.25%;
    } /* 17px root → ~15px body */
}
@media (min-width: 1700px) {
    html {
        font-size: 112.5%;
    } /* 18px root → ~15.75px body */
}
@media (min-width: 1920px) {
    html {
        font-size: 125%;
    } /* 20px root → ~17.5px body */
    .page-body {
        max-width: 1600px;
    }
}
@media (min-width: 2400px) {
    html {
        font-size: 143.75%;
    } /* 23px root → ~20px body */
    .page-body {
        max-width: 1760px;
    }
}
@media (min-width: 2880px) {
    html {
        font-size: 162.5%;
    } /* 26px root → ~22.75px body */
    .page-body {
        max-width: 2000px;
    }
}

/* ---------- Guest booking-page QR (Settings) ---------- */
.booking-page-qr .qr-global-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 12px 0;
}
.qr-target { width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; }
.qr-target img, .qr-target canvas { display: block; }
.qr-label { margin: 0; font-weight: 600; }
.qr-url { display: block; font-size: 0.7rem; word-break: break-all; opacity: 0.7; }

/* Hidden by default; the @media print block shows it on the printed
   page above the big QR. */
.qr-print-heading { display: none; }

@media print {
  body * { visibility: hidden; }
  .booking-page-qr, .booking-page-qr * { visibility: visible; }
  .booking-page-qr { position: absolute; left: 0; top: 0; width: 100%; }
  /* Hide the on-screen text and the print button so the printed page
     is just the big scannable QR. */
  .booking-page-qr > h2,
  .booking-page-qr > .muted,
  .booking-page-qr .qr-label { display: none; }
  .booking-page-qr #qr-print { display: none; }
  .qr-print-heading { display: block; text-align: center; font-size: 24pt; font-weight: 600; margin: 0 0 12mm; }
  .booking-page-qr .qr-global-wrap {
    align-items: center;
    margin: 0 auto;
  }
  .qr-target { width: 400px; height: 400px; }
  .qr-target img, .qr-target canvas { width: 400px !important; height: 400px !important; }
}