/* =====================================================================
   TheRoomz — application stylesheet
   One file. One design system. No page-level CSS drift.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    /* Neutral canvas tokens — always the same. The owner's brand colour
       only touches --c-primary / --c-accent (set inline per request in
       layouts/app.php from hotel_settings.primary_color), so swapping brand
       colour never changes the app's underlying feel. */
    --c-bg:            #ffffff;
    --c-surface:       #ffffff;
    --c-surface-2:     #f7f8fa;
    --c-border:        #e5e7eb;
    --c-border-strong: #cbd5e1;

    --c-text:          #0f172a;
    --c-text-2:        #475569;
    --c-text-3:        #94a3b8;

    /* Default primary — TheRoomz orange (the owner can change this to any
       hex from Settings → Branding → Primary colour). layouts/app.php
       overrides these four vars inline per hotel, derived from the picked
       hex. These values are the fallback used on the login + admin pages. */
    --c-primary:       #f97316;
    --c-primary-hover: #c15a0f;
    --c-primary-fg:    #ffffff;
    --c-primary-soft:  #fef1e8;
    --c-primary-ring:  rgba(249, 115, 22, .22);

    /* Accent mirrors primary — one brand colour, used for CTAs + highlights. */
    --c-accent:        #f97316;
    --c-accent-hover:  #c15a0f;
    --c-accent-fg:     #ffffff;
    --c-accent-soft:   #fef1e8;

    --c-success:       #166534;
    --c-success-soft:  #dcfce7;
    --c-success-fg:    #14532d;

    --c-warning:       #d97706;
    --c-warning-soft:  #fef3c7;
    --c-warning-fg:    #92400e;

    --c-danger:        #dc2626;
    --c-danger-hover:  #b91c1c;
    --c-danger-soft:   #fee2e2;
    --c-danger-fg:     #991b1b;

    --c-info-soft:     #dbeafe;
    --c-info-fg:       #1e3a8a;

    /* Room / booking status semantics — mapped to the universal PMS
       colour convention used across Cloudbeds, Opera, Mews, SiteMinder,
       RMS, HotelKey etc. Pick these three guiding rules and the rest
       falls out:
         1. GREEN  = available / vacant / ready
         2. BLUE   = occupied / in-house (someone is in the room now)
         3. AMBER  = reserved / arriving (coming soon, nobody there yet)
       Everything else is a shade of warning / grey. Checked-in uses the
       same blue as Occupied — they mean the same thing on a date grid,
       which is why having them in two different hues was confusing.    */
    --st-available-solid: #22c55e;  --st-available-soft: #dcfce7;  --st-available-fg: #166534;
    --st-occupied-solid:  #2563eb;  --st-occupied-soft:  #dbeafe;  --st-occupied-fg:  #1e40af;
    --st-reserved-solid:  #f59e0b;  --st-reserved-soft:  #fef3c7;  --st-reserved-fg:  #92400e;
    --st-dirty-solid:     #f97316;  --st-dirty-soft:     #ffedd5;  --st-dirty-fg:     #9a3412;
    --st-maint-solid:     #8b5cf6;  --st-maint-soft:     #ede9fe;  --st-maint-fg:     #6d28d9;
    --st-oos-solid:       #ef4444;  --st-oos-soft:       #fee2e2;  --st-oos-fg:       #991b1b;
    --st-checkedin-solid: #2563eb;  --st-checkedin-soft: #dbeafe;  --st-checkedin-fg: #1e40af;
    --st-checkedout-solid:#94a3b8;  --st-checkedout-soft:#f1f5f9;  --st-checkedout-fg:#475569;
    --st-cancelled-solid: #dc2626;  --st-cancelled-soft: #fee2e2;  --st-cancelled-fg: #991b1b;

    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-7:  28px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* Radius scale — softer, more modern */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 10px;
    --r-xl: 12px;
    --r-2xl: 16px;
    --r-full: 999px;

    /* Shadow scale — layered depth, only reveal on hover */
    --sh-1: 0 1px 2px  rgba(15, 23, 42, .04);
    --sh-2: 0 1px 3px  rgba(15, 23, 42, .06), 0 1px 2px rgba(15,23,42,.04);
    --sh-3: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15,23,42,.04);
    --sh-4: 0 10px 25px rgba(15, 23, 42, .10), 0 4px 10px rgba(15,23,42,.04);
    --sh-focus: 0 0 0 3px var(--c-primary-ring);

    /* Shell dimensions — bigger, airier — matches desktop feel */
    --sidebar-w: 264px;
    --topbar-h:  72px;
    --page-pad:  var(--sp-8);

    /* Typography */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 system-ui, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --fs-display: 28px;   /* page titles */
    --fs-h1:      22px;
    --fs-h2:      17px;
    --fs-h3:      14px;
    --fs-body:    14px;
    --fs-sm:      13px;
    --fs-xs:      12px;
    --fs-micro:   11px;

    /* Motion */
    --motion-fast: 120ms cubic-bezier(.4, 0, .2, 1);
    --motion-med:  180ms cubic-bezier(.4, 0, .2, 1);
}

/* Themes removed. The owner picks a single primary hex in Settings →
   Branding. layouts/app.php derives primary / primary-hover / primary-soft /
   primary-ring from that hex and injects them inline, overriding the :root
   defaults above. Neutral tokens (bg, surface, border, text) stay fixed —
   the app canvas is always clean white. */

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
    overflow: hidden;
}
/* App is edge-to-edge now; no outer gutter. */
body { padding: 0; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -0.02em; color: var(--c-text); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0; }

/* Global focus-visible ring for keyboard users */
:focus-visible {
    outline: none;
    box-shadow: var(--sh-focus);
    border-radius: var(--r-md);
}

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

button { font: inherit; cursor: pointer; }
code { font-family: var(--font-mono); font-size: 12px; background: var(--c-surface-2); padding: 1px 6px; border-radius: var(--r-sm); }

/* ---------- 3. Application shell ---------- */
.app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
    height: 100%;
    background: var(--c-bg);
    overflow: hidden;
}

.sidebar {
    grid-area: sidebar;
    background: transparent;
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;        /* nav scrolls itself; brand + footer stay pinned */
    height: 100%;
    min-height: 0;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-6);
    height: var(--topbar-h);
    border-bottom: 1px solid var(--c-border);
}
.sidebar__brand-mark {
    position: relative;
    width: 40px; height: 40px;
    border-radius: var(--r-xl);
    background: #fff url("/assets/img/logo-256.png") center/cover no-repeat;
    display: grid; place-items: center;
    color: transparent;             /* hide the fallback letter rendered in markup */
    font-size: 0;
    box-shadow: 0 4px 10px rgba(249, 115, 22, .22);
    flex-shrink: 0;
    overflow: hidden;
}
.sidebar__brand-name {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
    color: var(--c-text);
}

.sidebar__nav {
    padding: var(--sp-5) var(--sp-3);
    flex: 1 1 auto;
    min-height: 0;             /* lets overflow-y take effect inside the flex child */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar__section {
    padding: var(--sp-5) var(--sp-3) var(--sp-2);
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--c-text-3);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.sidebar__section:first-child { padding-top: 0; }

.nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 10px var(--sp-3);
    border-radius: var(--r-lg);
    color: var(--c-text-2);
    font-size: var(--fs-body);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--motion-fast), color var(--motion-fast);
}
.nav__item:hover {
    background: var(--c-surface-2);
    color: var(--c-text);
    text-decoration: none;
}
.nav__item.is-active {
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-weight: 600;
}
.nav__item.is-active::before {
    content: '';
    position: absolute;
    left: -12px; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--c-primary);
}
.nav__item .icon { width: 18px; height: 18px; opacity: .85; flex-shrink: 0; }
.nav__item.is-active .icon { opacity: 1; }

/* Pinned footer below the scrolling nav — just the brand meta row now.
   The user card moved to the topbar avatar dropdown. */
.sidebar__foot {
    flex-shrink: 0;
    padding: var(--sp-3) var(--sp-6);
    border-top: 1px solid var(--c-border);
}
.sidebar__foot-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-micro);
    color: var(--c-text-3);
}

.topbar {
    grid-area: topbar;
    background: transparent;
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    padding: 0 var(--sp-8);
    gap: var(--sp-4);
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar__title {
    font-weight: 700;
    font-size: 17px;
    color: var(--c-text);
    letter-spacing: -0.01em;
}
.topbar__spacer { flex: 1; }

.topbar__datechip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px 14px;
    background: var(--c-surface-2);
    color: var(--c-text-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border);
    white-space: nowrap;
}
.topbar__datechip i { color: var(--c-primary); }

/* Topbar search — narrow card-depth control. ⌘K also opens the palette. */
.topbar__search {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px 12px;
    width: 200px;
    background: var(--c-surface-2);
    color: var(--c-text-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color var(--motion-fast), background var(--motion-fast);
}
.topbar__search:hover {
    border-color: var(--c-border-strong);
    background: var(--c-surface);
}
.topbar__search i { color: var(--c-text-3); flex-shrink: 0; }
.topbar__search-text {
    flex: 1;
    font-size: 13px;
    color: var(--c-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar__search-kbd {
    font-size: 10px;
    padding: 1px 6px;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    color: var(--c-text-3);
    background: var(--c-surface);
    font-family: var(--font-mono);
}
@media (max-width: 900px) {
    .topbar__search-text, .topbar__search-kbd { display: none; }
    .topbar__search { width: auto; padding: 7px 10px; }
}

/* Avatar button in the topbar — gradient circle (or user photo if uploaded),
   dropdown anchors right. */
.topbar__avatar {
    width: 36px; height: 36px;
    border-radius: var(--r-full);
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-hover));
    color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: 13px;
    border: 0;
    cursor: pointer;
    letter-spacing: -0.02em;
    box-shadow: 0 2px 6px var(--c-primary-ring);
    transition: transform var(--motion-fast), box-shadow var(--motion-fast);
    overflow: hidden;
    padding: 0;
}
.topbar__avatar:hover { transform: translateY(-1px); box-shadow: 0 4px 10px var(--c-primary-ring); }
.topbar__avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Notification badge — sits outside the bell corner, small and tight */
.topbar__badge {
    display: none;
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: var(--c-danger);
    color: #fff;
    border: 1.5px solid var(--c-surface-2);
    border-radius: 99px;
    font-size: 9px;
    font-weight: 700;
    line-height: 11px;
    text-align: center;
    box-sizing: content-box;
    pointer-events: none;
}
.notif-dd .dd__panel { z-index: 60; }

.topbar__user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 6px 10px 6px 6px;
    border-radius: var(--r-full);
    background: transparent;
    border: 1px solid transparent;
    color: var(--c-text-2);
    transition: background var(--motion-fast), border-color var(--motion-fast);
}
.topbar__user:hover {
    background: var(--c-surface-2);
    border-color: var(--c-border);
}
.topbar__user-avatar {
    width: 34px; height: 34px;
    border-radius: var(--r-full);
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 600; font-size: 13px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .25);
}

.main {
    grid-area: main;
    padding: var(--page-pad);
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent;
    height: 100%;
}
/* Full-bleed — content uses whatever the viewport gives us. The 1400px
   cap used to protect against overly-wide tables on 4K monitors, but
   staff mostly use laptops where it just leaves empty gutters. */
.page {
    width: 100%;
}
.page__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
    flex-wrap: wrap;
}
.page__title h1 {
    font-size: var(--fs-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.page__title p {
    color: var(--c-text-2);
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.4;
}
.page__actions { display: flex; gap: var(--sp-3); align-items: center; }

/* ---------- 4. Cards & panels ---------- */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-2);
    transition: box-shadow var(--motion-med), border-color var(--motion-med);
}
.card:hover {
    box-shadow: var(--sh-3);
    border-color: var(--c-border-strong);
}
.card--flat { box-shadow: none; }
.card--flat:hover { box-shadow: none; border-color: var(--c-border); }

/* Housekeeping room tile grid — every tile stretches to the tallest
   sibling in its row so a card with a short guest line is the same
   height as its neighbour with wrapped content. grid-auto-rows: 1fr
   also keeps vertical alignment across rows. */
.hk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-3);
    align-items: stretch;
    grid-auto-rows: 1fr;
}
.hk-grid > .card { height: 100%; }
.card--pad     { padding: var(--sp-6); }
.card + .card  { margin-top: var(--sp-5); }
.card__head    { padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--c-border-strong); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.card__title   { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.card__body    { padding: var(--sp-6); }
.card__foot    { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--c-border); background: var(--c-surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); }

/* ---------- 5. Grid & stats ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-5);
    margin-bottom: var(--sp-8);
}
/* Six-up variant: dashboard fits its full stat row on one line at
   desktop, then folds neatly at narrower widths without stranding a
   single card on its own row. */
.stat-grid--six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--sp-3);
}
.stat-grid--six .stat { padding: var(--sp-4); }
.stat-grid--six .stat__value { font-size: 26px; }
.stat-grid--six .stat__icon { width: 38px; height: 38px; }
.stat-grid--six .stat__icon i, .stat-grid--six .stat__icon [data-lucide] { width: 18px; height: 18px; }
@media (max-width: 1300px) { .stat-grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .stat-grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: var(--sp-6);
    box-shadow: var(--sh-1);
    transition: box-shadow var(--motion-med), border-color var(--motion-med), transform var(--motion-med);
}
.stat:hover {
    box-shadow: var(--sh-3);
    border-color: var(--c-border-strong);
}
a.stat, a.stat--link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
a.stat:hover, a.stat--link:hover {
    text-decoration: none;
    color: inherit;
    border-color: var(--c-primary);
    box-shadow: 0 4px 12px var(--c-primary-ring);
    transform: translateY(-1px);
}
a.stat:hover .stat__label, a.stat--link:hover .stat__label { color: var(--c-primary); }
.stat__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--sp-4);
    gap: var(--sp-3);
}
.stat__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-lg);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.stat__icon i, .stat__icon [data-lucide] { width: 22px; height: 22px; stroke-width: 2; }
.stat__icon--primary { background: #dbeafe; color: #2563eb; }
.stat__icon--success { background: #d1fae5; color: #059669; }
.stat__icon--warning { background: #fef3c7; color: #d97706; }
.stat__icon--info    { background: #e0f2fe; color: #0891b2; }
.stat__icon--purple  { background: #ede9fe; color: #7c3aed; }
.stat__icon--rose    { background: #ffe4e6; color: #e11d48; }
.stat__icon--slate   { background: #f1f5f9; color: #475569; }

.stat__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--c-text-3);
    font-weight: 600;
}
.stat__value {
    font-size: 30px;
    font-weight: 700;
    margin-top: var(--sp-1);
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--c-text);
}
.stat__hint  {
    font-size: var(--fs-xs);
    color: var(--c-text-2);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.stat__trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--r-md);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}
.stat__trend--up   { background: #d1fae5; color: #047857; }
.stat__trend--down { background: #fee2e2; color: #b91c1c; }
.stat__trend--flat { background: var(--c-surface-2); color: var(--c-text-2); }
.stat__trend i, .stat__trend [data-lucide] { width: 12px; height: 12px; }

.stat--warn .stat__value  { color: var(--c-warning); }
.stat--danger .stat__value{ color: var(--c-danger); }

.two-col, .three-col {
    display: grid;
    gap: var(--sp-5);
}
.two-col   { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.three-col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---------- 6. Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--r-lg);
    background: var(--c-primary);
    color: var(--c-primary-fg);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    letter-spacing: -0.005em;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255,255,255,.08);
    transition: background var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), transform 50ms ease;
}
.btn:hover  { background: var(--c-primary-hover); color: var(--c-primary-fg); text-decoration: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled, .btn.is-disabled { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { box-shadow: var(--sh-focus); }

.btn--secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); box-shadow: var(--sh-1); }
.btn--secondary:hover { background: var(--c-surface-2); color: var(--c-text); border-color: var(--c-text-3); }
.btn--accent { background: var(--c-accent); color: var(--c-accent-fg); }
.btn--accent:hover { background: var(--c-accent-hover); color: var(--c-accent-fg); }

/* Save bar on hotel settings — sits in flow at the end of all cards.
   Was previously sticky (floating over the last card as you scrolled);
   users reported that felt like it was blocking content. Now it's a
   plain footer bar that only appears when you've reached the end. */
.settings-sticky-save {
    margin: var(--sp-6) 0 0;
    padding: 12px 20px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-2);
}
.settings-sticky-save__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}
.settings-sticky-save__inner .u-text-3 { color: var(--c-text-2); font-weight: 500; font-size: 12px; }

/* Primary-colour picker (settings → branding) */
.color-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-6);
}
.color-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.color-swatch {
    width: 40px; height: 40px;
    border-radius: 999px;
    border: 2px solid var(--c-surface);
    outline: 1px solid var(--c-border);
    cursor: pointer;
    padding: 0;
    transition: transform var(--motion-fast), outline-color var(--motion-fast);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.color-swatch:hover { transform: scale(1.08); outline-color: var(--c-border-strong); }
.color-swatch.is-active {
    outline: 2px solid var(--c-text);
    outline-offset: 2px;
}
.color-picker__custom {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.color-picker__custom input[type="color"] {
    width: 48px; height: 34px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 2px;
    background: var(--c-surface);
    cursor: pointer;
}
.btn--ghost { background: transparent; color: var(--c-text-2); box-shadow: none; }
.btn--ghost:hover { background: var(--c-surface-2); color: var(--c-text); }
.btn--danger { background: var(--c-danger); color: #fff; }
.btn--danger:hover { background: var(--c-danger-hover); color: #fff; }
.btn--success { background: var(--c-success); color: #fff; }
.btn--success:hover { background: var(--c-success-fg); color: #fff; }
.btn--sm { padding: 6px 11px; font-size: var(--fs-xs); border-radius: var(--r-md); }
.btn--lg { padding: 12px 22px; font-size: var(--fs-body); }
.btn--icon { padding: 8px; }
.btn--icon.btn--sm { padding: 6px; }

.btn-group { display: inline-flex; gap: var(--sp-2); }

/* ---------- 7. Forms ---------- */
.field { margin-bottom: var(--sp-4); }
.field__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-2);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.field__label .req { color: var(--c-danger); }
.field__hint { font-size: 12px; color: var(--c-text-3); margin-top: 4px; }
.field__err  { font-size: 12px; color: var(--c-danger); margin-top: 4px; }

.input, .select, .textarea {
    width: 100%;
    padding: 10px 13px;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-lg);
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--c-text);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
    box-shadow: var(--sh-1);
}
.input:hover:not(:focus), .select:hover:not(:focus), .textarea:hover:not(:focus) { border-color: var(--c-text-3); }
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: var(--sh-focus);
}
.input[readonly], .input:disabled { background: var(--c-surface-2); color: var(--c-text-2); box-shadow: none; }
.textarea { min-height: 92px; resize: vertical; }
.select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L2 4h8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }

.checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-2); }
.checkbox input { width: 16px; height: 16px; }

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-3) var(--sp-4);
}
.form-row .field.col-2 { grid-column: span 2; }

/* ---------- 8. Tables ---------- */
/* overflow:hidden here GUARANTEES the table's square corners are clipped
   to the card's rounded shape. Row-level ⋯ dropdowns escape via a JS
   portal to document.body (see app.js), so this doesn't break menus. */
.table-wrap { overflow: hidden; border-radius: var(--r-xl); }
.table-wrap--scroll { overflow-x: auto; overflow-y: hidden; }
.table--relaxed th, .table--relaxed td { padding: 16px 20px; }

.table {
    width: 100%;
    /* separate + spacing 0 is REQUIRED so per-cell border-radius works
       (border-collapse:collapse makes radius illegal). Cell borders are
       drawn per-cell below to keep the visual identical. */
    border-collapse: separate;
    border-spacing: 0;
    background: var(--c-surface);
    font-size: var(--fs-sm);
}
.table th, .table td {
    text-align: left;
    padding: 14px var(--sp-5);
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
}

/* Round the table's four outer corners so it reads as a proper card
   without needing overflow:hidden (which would clip row ⋯ dropdowns). */
.table thead tr:first-child th:first-child { border-top-left-radius:  calc(var(--r-xl) - 1px); }
.table thead tr:first-child th:last-child  { border-top-right-radius: calc(var(--r-xl) - 1px); }
.table tbody tr:last-child  td:first-child { border-bottom-left-radius:  calc(var(--r-xl) - 1px); }
.table tbody tr:last-child  td:last-child  { border-bottom-right-radius: calc(var(--r-xl) - 1px); }
.table tbody tr:last-child  td { border-bottom: none; }
.table th {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--c-text-3);
    font-weight: 600;
    background: var(--c-surface-2);
    position: sticky; top: 0;
    border-bottom: 1px solid var(--c-border);
}
.table tbody tr { transition: background var(--motion-fast); }
.table tbody tr:hover { background: var(--c-primary-soft); }
.table tbody tr:hover td { color: var(--c-text); }
.table tbody tr:last-child td { border-bottom: none; }
.table .col-right   { text-align: right; }
.table .col-center  { text-align: center; }
.table .col-actions { width: 1%; white-space: nowrap; }
.table .col-actions .btn { margin-left: 2px; }
/* Money columns: fixed width so Total/Paid columns line up visually
   across rows and so numbers stay anchored to the right edge consistently. */
.table .col-money   { width: 140px; text-align: right; font-variant-numeric: tabular-nums; }
/* Status columns: shrink to badge width so the chip sits next to the money
   column instead of floating in the middle of an over-wide column. */
.table .col-status  { width: 1%; white-space: nowrap; }
.table .num, .table .u-num { font-variant-numeric: tabular-nums; }
/* Multi-line cells (price + sub-badge, name + ref) still center vertically
   as a block so adjacent single-line cells visually line up with the middle
   of the stack. */
.table td > div + div { line-height: 1.35; }

.empty {
    padding: var(--sp-12) var(--sp-6);
    text-align: center;
    color: var(--c-text-3);
    font-size: var(--fs-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
}
.empty__title { color: var(--c-text-2); font-size: 15px; font-weight: 600; margin-bottom: 2px; }
/* When .empty lives inside a <td>, flex on the cell doesn't center reliably.
   Give the cell itself a centered text style. */
.table td.empty, .table td .empty { text-align: center; }
.table td.empty {
    padding: 42px 20px;
    color: var(--c-text-3);
    font-size: var(--fs-sm);
}

/* ---------- 9. Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    line-height: 1.6;
    white-space: nowrap;
}
.badge { padding: 3px 10px; font-size: 11px; line-height: 1.5; }
.badge--success { background: var(--c-success-soft); color: var(--c-success-fg); }
.badge--warning { background: var(--c-warning-soft); color: var(--c-warning-fg); }
.badge--danger  { background: var(--c-danger-soft);  color: var(--c-danger-fg); }
.badge--info    { background: var(--c-info-soft);    color: var(--c-info-fg); }
.badge--neutral { background: var(--c-surface-2);    color: var(--c-text-2); border: 1px solid var(--c-border); }
.badge--dot::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 999px;
    background: currentColor;
    margin-right: 5px;
    vertical-align: 1px;
}

/* ---------- 10. Alerts ---------- */
.alert {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    font-size: 13px;
    margin-bottom: var(--sp-4);
    border: 1px solid transparent;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
}
.alert--success { background: var(--c-success-soft); color: var(--c-success-fg); border-color: #86efac; }
.alert--warning { background: var(--c-warning-soft); color: var(--c-warning-fg); border-color: #fde68a; }
.alert--danger  { background: var(--c-danger-soft);  color: var(--c-danger-fg);  border-color: #fca5a5; }
.alert--info    { background: var(--c-info-soft);    color: var(--c-info-fg);    border-color: #bfdbfe; }

.banner {
    padding: var(--sp-3) var(--sp-4);
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}
.banner--warning { background: var(--c-warning); }
.banner--danger  { background: var(--c-danger); }

/* ---------- 11. Modal ---------- */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: var(--sp-6);
    animation: fadeIn .14s ease;
}
.modal-backdrop.is-open { display: flex; }
.modal {
    background: var(--c-surface);
    border-radius: var(--r-2xl);
    box-shadow: var(--sh-4);
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp .18s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
}
.modal--wide { max-width: 880px; }
.modal--narrow { max-width: 440px; }
.modal__head {
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}
.modal__title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.modal__close {
    background: none;
    border: none;
    padding: 6px;
    color: var(--c-text-3);
    border-radius: var(--r-md);
    display: grid; place-items: center;
    transition: background var(--motion-fast), color var(--motion-fast);
}
.modal__close:hover { background: var(--c-surface-2); color: var(--c-text); }
.modal__body { padding: var(--sp-6); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
/* When a form wraps the body + foot, let it grow so the sticky footer stays on screen. */
.modal > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.modal__foot {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--c-border);
    background: var(--c-surface-2);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
    border-radius: 0 0 var(--r-2xl) var(--r-2xl);
}

@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* ---------- 11b. Drawer (right-side pane) ----------
   Used instead of a modal for read-mostly contexts where the clerk
   benefits from seeing the list underneath — e.g. booking details.
   Sits over the page without a full backdrop blur; the dim panel on
   the left lets the clerk tap-outside to close.
   Opened via `.is-open`; app.js' global Esc handler also closes it. */
.drawer {
    position: fixed; inset: 0;
    display: none;
    z-index: 100;
}
.drawer.is-open { display: block; }
.drawer__scrim {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, .32);
    animation: fadeIn .14s ease;
}
.drawer__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(560px, 100vw);
    background: var(--c-surface);
    box-shadow: -16px 0 40px rgba(15, 23, 42, .18);
    display: flex;
    flex-direction: column;
    animation: slideInRight .18s cubic-bezier(.4, 0, .2, 1);
}
.drawer__head {
    padding: var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-shrink: 0;
}
.drawer__title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.drawer__close {
    background: none; border: none; padding: 6px;
    color: var(--c-text-3); border-radius: var(--r-md);
    display: grid; place-items: center;
    transition: background var(--motion-fast), color var(--motion-fast);
}
.drawer__close:hover { background: var(--c-surface-2); color: var(--c-text); }
.drawer__body { padding: var(--sp-6); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.drawer__foot {
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--c-border);
    background: var(--c-surface-2);
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
    flex-shrink: 0;
}
body.drawer-open { overflow: hidden; }
/* Booking table rows feel clickable (hover tint + pointer) because
   they open the detail drawer; the ⋯ menu stays as the fine-grained
   action path. */
tr.res-row { cursor: pointer; }
tr.res-row:hover > td { background: var(--c-surface-2); }
tr.res-row:hover [data-lucide="chevron-right"] { color: var(--c-text) !important; }

/* ---------- Booking drawer (Mews-inspired redesign) ----------
   Vertical rhythm with generous breathing room. Hero at the top is
   calm, next the money story in its own card, then one big primary
   action bar, then rooms, then collapsible activity + occupants. */

/* Guest hero — initial on the left, name + status, calm metadata. */
.drawer-hero {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 20px;
}
.drawer-hero__avatar {
    width: 48px; height: 48px; font-size: 16px;
    flex-shrink: 0;
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-weight: 700;
    display: grid; place-items: center;
    border-radius: 50%;
}
.drawer-hero__who { min-width: 0; }
.drawer-hero__name {
    font-size: 20px; font-weight: 700; letter-spacing: -0.015em;
    color: var(--c-text);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    line-height: 1.2;
}
.drawer-hero__meta {
    font-size: 12.5px; color: var(--c-text-2);
    margin-top: 6px;
    line-height: 1.4;
}
.drawer-hero__meta .u-mono { color: var(--c-text-3); margin-right: 6px; }

/* Payment summary — the single most important block below the hero.
   Shows total · received · balance with a progress rail. Mimics how
   Mews / Cloudbeds visualise the money story. */
.drawer-money {
    background: var(--c-surface-2);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.drawer-money__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.drawer-money__label { font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--c-text-3); font-weight: 600; }
.drawer-money__total { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--c-text); }
.drawer-money__bar {
    position: relative;
    height: 6px;
    background: var(--c-border);
    border-radius: 999px;
    overflow: hidden;
    margin: 10px 0 8px;
}
.drawer-money__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--c-success);
    border-radius: inherit;
    transition: width var(--motion-medium);
}
.drawer-money__fill.is-partial { background: var(--c-primary); }
.drawer-money__foot {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--c-text-2);
}
.drawer-money__foot .is-paid { color: var(--c-success); font-weight: 600; }
.drawer-money__foot .is-due  { color: var(--c-danger);  font-weight: 600; }

/* Primary CTA bar — full width, no "wrap wall of pills" feel. */
.drawer-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}
.drawer-cta i[data-lucide] { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }

/* Secondary toolbar — subtle pills + overflow. Ghost style so the CTA
   above stays the only orange thing on the screen. */
.drawer-toolbar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 22px;
}
.drawer-toolbar .btn {
    font-size: 12.5px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    color: var(--c-text-2);
}
.drawer-toolbar .btn:hover { background: var(--c-surface-2); color: var(--c-text); border-color: var(--c-border); }
.drawer-toolbar .btn i[data-lucide] { width: 14px; height: 14px; }

/* Notes callout group (special request + internal note). Compact, two
   icons, no section headers — these pin to the top of the body so the
   clerk notices them before scrolling into the Rooms list. */
.drawer-notes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.drawer-note {
    display: flex; gap: 10px;
    padding: 10px 12px;
    background: var(--c-surface-2);
    border-radius: 8px;
    font-size: 12px; line-height: 1.5;
    border-left: 3px solid var(--c-border);
}
.drawer-note strong { display: block; font-size: 11px; letter-spacing: 0.3px; text-transform: uppercase; color: var(--c-text-2); margin-bottom: 2px; }
.drawer-note i[data-lucide] { width: 14px; height: 14px; margin-top: 2px; color: var(--c-text-3); flex-shrink: 0; }
.drawer-note--warn { background: var(--c-warning-soft); border-left-color: var(--c-warning); }
.drawer-note--warn i[data-lucide] { color: var(--c-warning); }

/* Sections ("Rooms", "Activity", "Occupants"). Activity + Occupants
   use <details> so they're collapsible — keeps the surface quiet
   until the clerk explicitly asks. */
.drawer-section { margin-top: 20px; }
.drawer-section > .drawer-section__h,
.drawer-section > summary.drawer-section__h {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--c-text-3); font-weight: 600;
    cursor: default; list-style: none;
    margin: 0 0 10px;
}
.drawer-section > summary.drawer-section__h { cursor: pointer; user-select: none; }
.drawer-section > summary::-webkit-details-marker { display: none; }
.drawer-section__count { color: var(--c-text-3); font-weight: 500; letter-spacing: 0; }
.drawer-section__chev { width: 14px; height: 14px; transition: transform var(--motion-fast); }
.drawer-section[open] > summary .drawer-section__chev { transform: rotate(90deg); }

/* Rooms list — compact row, no bulky card wrapper. Icon-only tools on
   the trailing edge keep each room on one visual line even in a 400px
   panel; the per-room ⋯ holds Change / Cancel. */
.booking-rooms { display: flex; flex-direction: column; gap: 6px; }
.booking-room {
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-surface);
    transition: background var(--motion-fast), border-color var(--motion-fast);
}
.booking-room:hover { background: var(--c-surface-2); }
.booking-room.is-final { opacity: 0.6; }
.booking-room__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
}
.booking-room__main { min-width: 0; }
.booking-room__title {
    font-weight: 600; font-size: 13px;
    display: flex; align-items: center; gap: 6px;
}
.booking-room__meta { font-size: 11px; color: var(--c-text-3); margin-top: 2px; }
.booking-room__price { font-weight: 600; font-size: 13px; }
.booking-room__tools { display: flex; align-items: center; gap: 2px; }
.badge--xs { font-size: 9.5px; padding: 2px 6px; }

/* Inline Collect panel. Sits between the toolbar and the Rooms list
   so the clerk keeps the reservation summary in view while entering an
   amount. Soft tint so it reads as "actionable surface" not "data". */
.drawer-collect {
    background: var(--c-primary-soft, #fff7ed);
    border: 1px solid var(--c-primary);
    border-radius: 12px;
    padding: 14px 14px 12px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: slideUp .14s ease;
}
.drawer-collect[hidden] { display: none; }
.drawer-collect__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.drawer-collect__head strong { font-size: 13px; color: var(--c-text); }
.drawer-collect__hint { font-size: 11px; color: var(--c-text-2); }
.drawer-collect__chips { display: flex; gap: 6px; margin-top: 4px; }
.drawer-collect__chips .chip {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-2);
    cursor: pointer;
    transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.drawer-collect__chips .chip:hover {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}
.drawer-collect__actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

/* Icon-only button for the room-card tools. 28×28 hit target, ghost
   style, color-coded hover. Keeps every row to a single line. */
.icon-btn {
    display: inline-grid; place-items: center;
    width: 28px; height: 28px;
    border: 0; background: transparent;
    color: var(--c-text-3);
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--motion-fast), color var(--motion-fast);
}
.icon-btn i[data-lucide] { width: 14px; height: 14px; }
.icon-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.btn--icon { padding: 8px; width: 36px; height: 36px; }
.btn--icon i[data-lucide] { width: 16px; height: 16px; }
@keyframes slideInRight { from { transform: translateX(16px); opacity: 0 } to { transform: none; opacity: 1 } }
@media (max-width: 640px) {
    .drawer__panel { width: 100vw; }
}

/* ============================================================
   DRAWER v5 — reservation panel
   ------------------------------------------------------------
   Follows the app's existing design tokens (--sp-*, --r-*, badge
   styles, card radii). Smaller icons, tighter rhythm, correct
   token usage. Takes direct cues from the reference mockup.
   ============================================================ */

.drv { font-variant-numeric: tabular-nums; color: var(--c-text); display: flex; flex-direction: column; gap: var(--sp-3); }

/* Header. Modifies .drawer__head: swap "title + close" for
   "icon tile · eyebrow+ref · status · close". Compact — the icon
   tile is 32px (not 40), icon inside is 14px (not 20). */
.drawer__head.drv__head { gap: var(--sp-3); align-items: center; }
.drv__head-icon {
    width: 32px; height: 32px;
    border-radius: var(--r-md);
    display: grid; place-items: center;
    background: var(--c-primary);
    color: #fff;
    flex-shrink: 0;
}
.drv__head-icon svg { width: 16px; height: 16px; }
.drv__head-title { flex: 1 1 auto; min-width: 0; }
.drv__head-eyebrow { font-size: 11px; color: var(--c-text-3); font-weight: 500; line-height: 1.1; }
.drv__head-ref     { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--c-text); line-height: 1.2; margin-top: 1px; }

/* Guest row card. Same chrome as the other cards. */
.drv__guest {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    padding: var(--sp-3) var(--sp-4);
    display: flex; align-items: center; gap: var(--sp-3);
}
.drv__guest-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--c-primary-soft);
    color: var(--c-primary);
    display: grid; place-items: center;
    font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.drv__guest-body { flex: 1 1 auto; min-width: 0; }
.drv__guest-name { font-size: 14px; font-weight: 600; color: var(--c-text); letter-spacing: -0.005em; }
.drv__guest-contact {
    margin-top: 3px;
    display: flex; gap: var(--sp-3); flex-wrap: wrap;
    font-size: 11.5px; color: var(--c-text-3);
}
.drv__guest-contact span { display: inline-flex; align-items: center; gap: 4px; }
.drv__guest-contact svg { width: 12px; height: 12px; }

/* Standard card wrapper. Reuses the app's card radius + border. */
.drv__card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    overflow: hidden;
}
.drv__card-head {
    padding: var(--sp-3) var(--sp-4);
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: 12.5px; font-weight: 600; color: var(--c-text);
    border-bottom: 1px solid var(--c-border);
}
.drv__card-head svg { width: 13px; height: 13px; color: var(--c-text-3); flex-shrink: 0; }
.drv__card-head-count { color: var(--c-text-3); font-weight: 500; font-size: 11.5px; margin-left: 2px; }

/* Metadata rows. 14px icon · label · right-aligned value. Tight
   vertical rhythm so 6 rows fit without feeling spacious. */
.drv__meta { list-style: none; margin: 0; padding: var(--sp-1) 0; }
.drv__meta li {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    gap: var(--sp-3); align-items: center;
    padding: 7px var(--sp-4);
    font-size: 12.5px;
}
.drv__meta li svg { width: 14px; height: 14px; color: var(--c-text-3); flex-shrink: 0; }
.drv__meta-label { color: var(--c-text-3); }
.drv__meta-value { color: var(--c-text); font-weight: 500; text-align: right; }

/* Payment card: facts left, actions right. */
.drv__pay {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-4);
    padding: var(--sp-4);
    align-items: flex-start;
}
.drv__pay-rows { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.drv__pay-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
    font-size: 12.5px;
}
.drv__pay-row > span:first-child { color: var(--c-text-3); }
.drv__pay-row > span:last-child  { color: var(--c-text); font-weight: 500; }
.drv__pay-balance {
    margin-top: var(--sp-1);
    padding: 8px var(--sp-3);
    background: var(--c-danger-soft);
    border-radius: var(--r-md);
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
    font-size: 13px; font-weight: 600;
    color: var(--c-danger);
}
.drv__pay-balance.is-paid { background: var(--c-success-soft); color: var(--c-success); }
.drv__pay-actions { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 170px; }
.drv__pay-actions .btn { width: 100%; justify-content: center; font-size: 12.5px; }
.drv__pay-actions .btn svg { width: 13px; height: 13px; }
@media (max-width: 640px) {
    .drv__pay { grid-template-columns: 1fr; }
    .drv__pay-actions { min-width: 0; }
}

/* Rooms rows — clickable with chevron. */
.drv__room-row {
    display: grid;
    grid-template-columns: 1fr auto 14px;
    gap: var(--sp-3); align-items: center;
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--c-border);
    cursor: pointer;
    transition: background var(--motion-fast);
    color: inherit;
}
.drv__room-row:first-child { border-top: 0; }
.drv__room-row:hover { background: var(--c-surface-2); }
.drv__room-row.is-final { opacity: 0.55; }
.drv__room-row.is-open .drv__room-chevron { transform: rotate(90deg); }
.drv__room-main > div:first-child  { font-size: 13px; font-weight: 600; color: var(--c-text); }
.drv__room-main > div:last-child   { font-size: 11.5px; color: var(--c-text-3); margin-top: 2px; }
.drv__room-price { font-weight: 600; font-size: 13px; color: var(--c-text); }
.drv__room-row .drv__room-chevron { color: var(--c-text-3); width: 14px; height: 14px; transition: transform var(--motion-fast); }
.drv__room-acts {
    display: none;
    gap: 0; flex-wrap: wrap;
    padding: 0 var(--sp-4) var(--sp-3);
    font-size: 12px;
}
.drv__room-row.is-open + .drv__room-acts { display: flex; }
.drv__room-acts > * { color: var(--c-primary); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: none; }
.drv__room-acts > *:hover { text-decoration: underline; }
.drv__room-acts > * + *::before { content: ' · '; color: var(--c-text-3); margin: 0 6px; display: inline; }
.drv__room-acts .is-danger { color: var(--c-danger); }

/* Occupants card — grouped by room, one line per occupant. */
.drv__occ-group { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-border); }
.drv__occ-group:first-child { border-top: 0; }
.drv__occ-group-head { font-size: 11px; color: var(--c-text-3); font-weight: 600; margin-bottom: var(--sp-2); letter-spacing: 0.3px; text-transform: uppercase; }
.drv__occ-row {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 6px 0;
}
.drv__occ-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--c-surface-2);
    color: var(--c-text-2);
    display: grid; place-items: center;
    font-weight: 600; font-size: 11px; flex-shrink: 0;
}
.drv__occ-body { flex: 1 1 auto; min-width: 0; }
.drv__occ-name { font-size: 12.5px; font-weight: 500; color: var(--c-text); display: flex; align-items: center; gap: 6px; }
.drv__occ-meta { font-size: 11px; color: var(--c-text-3); margin-top: 1px; }
.drv__occ-row .btn { padding: 4px 8px; font-size: 11.5px; }

/* Activity timeline — compact, with coloured dots on a rail. */
.drv__log { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-4); position: relative; }
.drv__log::before {
    content: ''; position: absolute;
    left: calc(var(--sp-4) + 11px); top: 20px; bottom: 20px;
    width: 2px; background: var(--c-border); z-index: 0;
}
.drv__log li {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: var(--sp-3); align-items: flex-start;
    padding: 6px 0;
    position: relative;
}
.drv__log-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-success);
    margin-top: 6px; margin-left: 8px;
    box-shadow: 0 0 0 3px var(--c-surface);
    z-index: 1;
}
.drv__log-dot.is-created { background: var(--c-primary); }
.drv__log-dot.is-neutral { background: var(--c-text-3); }
.drv__log-dot.is-danger  { background: var(--c-danger); }
.drv__log li > div:nth-child(2) { font-size: 12.5px; color: var(--c-text); min-width: 0; }
.drv__log li > div:nth-child(2) > div:first-child { font-weight: 500; }
.drv__log li > div:nth-child(2) > div:last-child  { color: var(--c-text-3); font-size: 11px; margin-top: 1px; }
.drv__log time { white-space: nowrap; font-size: 11px; color: var(--c-text-3); }
.drv__log .is-faded { opacity: 0.55; }

/* Inline Collect panel — same chrome as the surrounding card. */
.drv__collect {
    margin: 0 var(--sp-4) var(--sp-4);
    padding: var(--sp-3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface-2);
}
.drv__collect[hidden] { display: none; }
.drv__collect__hint { font-size: 11.5px; color: var(--c-text-3); margin-bottom: var(--sp-2); }
.drv__collect__chips { display: flex; gap: 6px; margin: 6px 0 var(--sp-2); }
.drv__collect__chips .chip {
    font-size: 11px; padding: 3px 10px; border-radius: 999px;
    border: 1px solid var(--c-border); background: var(--c-surface);
    color: var(--c-text-2); cursor: pointer;
}
.drv__collect__chips .chip:hover { background: var(--c-surface-2); color: var(--c-text); }
.drv__collect__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }

/* Footer action bar. */
.drawer__foot.drv__foot { padding: var(--sp-2) var(--sp-4); gap: var(--sp-2); flex-wrap: wrap; }
.drawer__foot.drv__foot .btn { font-size: 12px; }
.drawer__foot.drv__foot .btn svg { width: 13px; height: 13px; }

/* Soft tokens for the balance pills — tinted red/green at low opacity. */
:root {
    --c-danger-soft:  color-mix(in oklab, var(--c-danger) 10%, white);
    --c-success-soft: color-mix(in oklab, var(--c-success) 12%, white);
}

/* Hero: name as the only large text. Reservation reference quietly
   below it. Status chip sits inline but with less visual weight than
   the name. No avatar — a reservation isn't a person. */
.drv__hero { margin-bottom: 20px; }
.drv__name {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--c-text);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.drv__ref {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--c-text-3);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Metadata grid: label | value rows. Two columns on wide panels so
   the clerk takes it in with one glance; one column on phones. */
.drv__kv {
    margin: 0;
    padding: 16px 0;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
}
.drv__kv > div { display: contents; }
.drv__kv dt {
    font-size: 12px;
    color: var(--c-text-3);
    font-weight: 500;
}
.drv__kv dd {
    margin: 0;
    font-size: 13px;
    color: var(--c-text);
    text-align: right;
}
@media (max-width: 520px) {
    .drv__kv { grid-template-columns: auto 1fr; }
    .drv__kv dd { text-align: right; }
}

/* Sections: section head is a single small label, no caps-styling
   dance. One divider between sections. */
.drv__section { padding: 18px 0; border-bottom: 1px solid var(--c-border); }
.drv__section:last-child { border-bottom: 0; }
.drv__h {
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--c-text-3);
    font-weight: 600;
    display: flex; align-items: center; gap: 6px;
}
.drv__h .drv__h-count { color: var(--c-text-3); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11px; }

/* Billing table — Total · Received · Balance. Numbers right. Only
   the Balance row gets a hairline on top so the eye finds it. */
.drv__bill { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.drv__bill td { padding: 6px 0; color: var(--c-text-2); }
.drv__bill td:last-child { text-align: right; color: var(--c-text); }
.drv__bill tr.drv__bill-sum td { border-top: 1px solid var(--c-border); padding-top: 10px; margin-top: 4px; font-weight: 600; color: var(--c-text); }
.drv__bill tr.drv__bill-sum td.is-due  { color: var(--c-danger); }
.drv__bill tr.drv__bill-sum td.is-paid { color: var(--c-success); }

/* Action row: one normal-size button + overflow. No full-width,
   no shouting orange. Primary action uses the app's default primary
   button at normal size. */
.drv__actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.drv__actions .btn { font-size: 13px; }

/* Rooms list: compact rows. Each room is a group {heading, meta,
   actions as inline text links separated by dots}. No cards, no
   backgrounds — just hairlines. */
.drv__rooms { display: flex; flex-direction: column; }
.drv__room { padding: 12px 0; border-top: 1px solid var(--c-border); }
.drv__room:first-child { border-top: 0; padding-top: 2px; }
.drv__room.is-final { opacity: 0.55; }
.drv__room-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    font-size: 14px; font-weight: 500;
}
.drv__room-price { color: var(--c-text); font-weight: 600; }
.drv__room-meta { font-size: 12px; color: var(--c-text-3); margin-top: 2px; }
.drv__room-acts {
    font-size: 12px; color: var(--c-text-3);
    margin-top: 8px;
    display: flex; flex-wrap: wrap; gap: 0;
}
.drv__room-acts > * { color: var(--c-primary); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: none; }
.drv__room-acts > *:hover { text-decoration: underline; }
.drv__room-acts > * + *::before { content: ' · '; color: var(--c-text-3); margin: 0 6px; text-decoration: none !important; display: inline; }
.drv__room-acts .is-danger { color: var(--c-danger); }

/* Activity log: no icons, no colored dots, no vertical rail. Just a
   fixed-width timestamp column + the event. Operations clerks read
   this like a shell log — the structure IS the content. */
.drv__log { list-style: none; margin: 0; padding: 0; }
.drv__log li {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 12px;
    padding: 6px 0;
    font-size: 12.5px;
    color: var(--c-text);
    align-items: baseline;
}
.drv__log time { color: var(--c-text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.drv__log .is-faded { opacity: 0.55; }

/* Occupants: single-line rows, no cards. */
.drv__occ { list-style: none; margin: 0; padding: 0; }
.drv__occ li {
    padding: 8px 0;
    border-top: 1px solid var(--c-border);
    display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
    font-size: 13px;
}
.drv__occ li:first-child { border-top: 0; }
.drv__occ .drv__occ-name { font-weight: 500; color: var(--c-text); }
.drv__occ .drv__occ-meta { font-size: 12px; color: var(--c-text-3); margin-top: 2px; }

/* Collect panel — same discipline as the rest of the drawer. White
   surface, hairline border, no primary tint, right-aligned numbers.
   Appears below the Billing action row when the clerk clicks Collect. */
.drv__collect {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-surface);
}
.drv__collect[hidden] { display: none; }
.drv__collect__hint { font-size: 12px; color: var(--c-text-3); margin-bottom: 10px; }
.drv__collect__chips { display: flex; gap: 6px; margin: 8px 0 10px; }
.drv__collect__chips .chip {
    font-size: 11.5px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-2);
    cursor: pointer;
}
.drv__collect__chips .chip:hover { background: var(--c-surface-2); color: var(--c-text); }
.drv__collect__actions { display: flex; gap: 8px; margin-top: 10px; }

/* Notes callout (special request / internal note). One line each,
   hairline left-rule for the warning tone. */
.drv__notes { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; }
.drv__note {
    font-size: 12.5px; color: var(--c-text);
    padding: 10px 12px;
    background: var(--c-surface-2); border-radius: 8px;
    border-left: 2px solid var(--c-border);
}
.drv__note strong {
    display: block;
    font-size: 11px; font-weight: 600;
    color: var(--c-text-3);
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-bottom: 2px;
}
.drv__note--warn { border-left-color: var(--c-warning); background: var(--c-warning-soft); }

/* ---------- 12. Tabs ---------- */
.tabs {
    display: flex;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-5);
}
.tab {
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--c-text-2);
    font-size: var(--fs-body);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    transition: color var(--motion-fast), border-color var(--motion-fast);
    margin-bottom: -1px;
}
.tab:hover { color: var(--c-text); }
.tab.is-active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ---------- 13. Toolbar / filters ---------- */
.toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-1);
}
.toolbar .input, .toolbar .select { max-width: 300px; }
.toolbar__spacer { flex: 1; }

/* ---------- 14. Toasts (JS-controlled) ---------- */
#toast-host {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: 380px;
    pointer-events: none;
}
.toast {
    background: #0f172a;
    color: #fff;
    padding: 10px 14px;
    border-radius: var(--r-md);
    box-shadow: var(--sh-3);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    gap: var(--sp-2);
    align-items: flex-start;
    pointer-events: auto;
    animation: toastIn .16s ease;
}
.toast--success { background: var(--c-success); }
.toast--warning { background: var(--c-warning); }
.toast--error   { background: var(--c-danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }

/* ---------- 15. Auth screens ----------
   Background pulls the TheRoomz orange into two very soft radials — one
   warm glow top-left, one cooler accent bottom-right — over the paper
   base. Reads as hospitality, not SaaS, at normal viewing distance.    */
.auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--sp-6);
    /* Clean warm background — a single very soft wash of primary from the
       top-left, nothing else. The old double-radial read as a "glow" and
       looked unprofessional. */
    background:
        linear-gradient(180deg, color-mix(in oklab, var(--c-primary) 6%, var(--c-bg)) 0%, var(--c-bg) 40%),
        var(--c-bg);
    position: relative;
    overflow: hidden;
}

.auth__card {
    background: var(--c-surface);
    border-radius: 16px;
    /* Neutral shadow, no primary tint. Reads as "card" not "glow". */
    box-shadow:
        0 1px 2px rgba(15, 15, 30, .04),
        0 4px 14px -4px rgba(15, 15, 30, .08),
        0 20px 40px -20px rgba(15, 15, 30, .10);
    padding: 44px 40px 36px;
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--c-border);
}
@media (max-width: 480px) { .auth__card { padding: 36px 26px 30px; } }

.auth__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}
.auth__brand-mark {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: #fff url("/assets/img/logo-256.png") center/cover no-repeat;
    display: grid; place-items: center;
    color: transparent;             /* hide the fallback letter rendered in markup */
    font-size: 0;
    box-shadow: 0 6px 18px rgba(249, 115, 22, .22);
    overflow: hidden;
}

.auth__title {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 6px;
    color: var(--c-text);
}
.auth__sub   {
    text-align: center;
    color: var(--c-text-2);
    font-size: 14px;
    margin: 0 0 28px;
}
.auth__foot  {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: var(--c-text-3);
}
.auth__foot a { color: var(--c-primary); text-decoration: none; font-weight: 500; }
.auth__foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Fields on the auth card get a touch more height + a softer border so
   they feel part of the same object as the card itself. */
.auth__card .field { margin-bottom: 16px; }
.auth__card .field__label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-text-2);
    margin-bottom: 6px;
}
.auth__card .input {
    height: 44px;
    border-radius: 10px;
    border-color: var(--c-border);
    background: var(--c-bg);
    transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.auth__card .input:hover { border-color: var(--c-border-strong); }
.auth__card .input:focus {
    background: var(--c-surface);
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-ring);
    outline: none;
}
/* Chrome autofill paints inputs with a bright yellow background on first
   paint. Mask it by faking an inset box-shadow the same colour as the
   field. 100px inset covers the whole input at any size. */
.auth__card .input:-webkit-autofill,
.auth__card .input:-webkit-autofill:hover,
.auth__card .input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px var(--c-bg) inset;
    -webkit-text-fill-color: var(--c-text);
    transition: background-color 9999s ease-in-out 0s;
}
.auth__card .input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 100px var(--c-surface) inset, 0 0 0 3px var(--c-primary-ring);
}

/* Show-password toggle button inserted by the auth script. Sits inside
   the field container (which the script sets to position:relative) and
   never catches the input's focus ring. */
.auth__pw-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--c-text-3);
    cursor: pointer;
    border-radius: 6px;
    transition: color var(--motion-fast), background var(--motion-fast);
}
.auth__pw-toggle:hover { color: var(--c-text-2); background: var(--c-surface-2); }
.auth__pw-toggle.is-on { color: var(--c-primary); }
/* Nudge the toggle vertically so it visually centers against the label +
   field stack, not just the field box. Labels sit above the field. */
.auth__card .field { position: relative; }
.auth__card .field .auth__pw-toggle {
    top: auto;
    bottom: 6px;
    transform: none;
}
/* Disabled submit button during in-flight POST. */
.auth__card .btn[aria-busy="true"] {
    opacity: 0.85;
    cursor: progress;
}

/* Sign-in button — flat and crisp, no glowing shadow. */
.auth__card .btn--lg {
    height: 46px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-top: 6px;
    transition: background var(--motion-fast);
}

/* Stack = card + product line as one unit. The outer .auth grid centers
   this whole stack, which keeps the product signature right under the
   card instead of floating at the bottom of the viewport. */
.auth__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
}
.auth__stack .auth__card { max-width: none; width: 100%; }
.auth__product {
    text-align: center;
    font-size: 11.5px;
    color: var(--c-text-3);
    letter-spacing: 0.4px;
    text-transform: none;
}

/* ---------- 16. Dropdown (for user menu) ---------- */
.dd { position: relative; }
.dd__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-4);
    min-width: 220px;
    padding: 6px;
    display: none;
    z-index: 30;
    animation: fadeIn .12s ease;
}
.dd.is-open .dd__panel { display: block; }
.dd__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 9px 12px;
    font-size: var(--fs-sm);
    color: var(--c-text);
    border-radius: var(--r-md);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    transition: background var(--motion-fast);
    cursor: pointer;
}
.dd__item:hover { background: var(--c-surface-2); color: var(--c-text); text-decoration: none; }
.dd__sep { height: 1px; background: var(--c-border); margin: 6px 0; }

/* ---------- 17. Utilities ---------- */
.u-hidden { display: none !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-4 { margin-bottom: var(--sp-4); }
.u-flex { display: flex; }
.u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); }
.u-items-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-flex-1 { flex: 1; }
.u-text-2 { color: var(--c-text-2); }
.u-text-3 { color: var(--c-text-3); }
.u-num    { font-variant-numeric: tabular-nums; }
.u-mono   { font-family: var(--font-mono); font-size: 12px; }
.u-nowrap { white-space: nowrap; }
.u-right  { text-align: right; }

/* ---------- 18. Responsive ---------- */
@media (max-width: 900px) {
    :root { --sidebar-w: 0px; --page-pad: 20px; }
    body { padding: 0; }
    .app { border-radius: 0; border: none; height: 100vh; }
    .sidebar { position: fixed; left: 0; top: 0; width: 264px; z-index: 40; transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--sh-4); height: 100vh; background: var(--c-surface-2); }
    .sidebar.is-open { transform: none; }
    .app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
    .topbar__menu-btn { display: inline-flex; }
    .topbar { padding: 0 var(--sp-5); gap: var(--sp-3); }
    .topbar__title { display: none; }
    .topbar__datechip { display: none; }
    .page__title h1 { font-size: 22px; }
    .stat-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
    .stat { padding: var(--sp-4); }
    .stat__value { font-size: 24px; }
}
.topbar__menu-btn { display: none; }

/* Mobile: modals go full-screen so keyboards don't clip forms */
@media (max-width: 640px) {
    .modal-backdrop { padding: 0; }
    .modal, .modal--wide, .modal--narrow {
        max-width: 100vw;
        max-height: 100vh;
        min-height: 100vh;
        border-radius: 0;
    }
    .modal__foot { position: sticky; bottom: 0; }
    .form-row { grid-template-columns: 1fr; }
    .two-col, .three-col { grid-template-columns: 1fr; }
}

/* Mobile: booking table becomes cards. Hide the header, stack cells */
@media (max-width: 768px) {
    .table--relaxed { display: block; }
    .table--relaxed thead { display: none; }
    .table--relaxed tbody, .table--relaxed tr, .table--relaxed td { display: block; }
    .table--relaxed tr {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--r-xl);
        padding: 12px 14px;
        margin-bottom: 10px;
        box-shadow: var(--sh-1);
    }
    .table--relaxed td { border: none; padding: 4px 0; }
    .table--relaxed td.col-right { text-align: left; }
    .table--relaxed td.col-actions { text-align: right; margin-top: 6px; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar .input, .toolbar .select { max-width: 100%; }
}

/* ---------- 19. Print ---------- */
@media print {
    .sidebar, .topbar, #toast-host, .modal-backdrop, .page__actions, .btn, .no-print { display: none !important; }
    .app { display: block; }
    .main { padding: 0; }
    body { background: #fff; }
}

/* =====================================================================
   20. Polish additions — room cards, floor sections, calendar,
   dashboard widgets, KPI variants, status pills, transitions.
   ===================================================================== */

/* ---------- Segmented control (view toggles) ---------- */
.segmented {
    display: inline-flex;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 4px;
    gap: 2px;
}
.segmented__btn {
    padding: 7px 14px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-2);
    background: transparent;
    border: none;
    border-radius: calc(var(--r-lg) - 4px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}
.segmented__btn:hover { color: var(--c-text); }
.segmented__btn.is-active {
    background: var(--c-surface);
    color: var(--c-primary);
    font-weight: 600;
    box-shadow: var(--sh-2);
}

/* ---------- Status pill (universal across pages) ---------- */
.st-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}
.st-pill::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
.st-pill.--available   { background: var(--st-available-soft);   color: var(--st-available-fg); }
.st-pill.--occupied    { background: var(--st-occupied-soft);    color: var(--st-occupied-fg); }
.st-pill.--reserved    { background: var(--st-reserved-soft);    color: var(--st-reserved-fg); }
.st-pill.--maintenance { background: var(--st-maint-soft);       color: var(--st-maint-fg); }
.st-pill.--out-of-order{ background: var(--st-oos-soft);         color: var(--st-oos-fg); }
.st-pill.--checked-in  { background: var(--st-checkedin-soft);   color: var(--st-checkedin-fg); }
.st-pill.--checked-out { background: var(--st-checkedout-soft);  color: var(--st-checkedout-fg); }
.st-pill.--cancelled   { background: var(--st-cancelled-soft);   color: var(--st-cancelled-fg); }
.st-pill.--confirmed   { background: var(--c-primary-soft);      color: var(--c-primary); }
.st-pill.--pending     { background: var(--c-warning-soft);      color: var(--c-warning-fg); }

/* ---------- Floor sections (rooms page) ---------- */
.floor {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
    margin-bottom: var(--sp-4);
}
.floor__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--sp-4);
}
.floor__title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: 15px;
    font-weight: 600;
}
.floor__badge {
    background: var(--c-primary-soft);
    color: var(--c-primary);
    padding: 2px 10px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 600;
}
.floor__stats {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    font-size: 12px;
}
.floor__stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-full);
    font-weight: 600;
    background: var(--c-surface-2);
    color: var(--c-text-2);
}
.floor__stat::before {
    content: '';
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
.floor__stat.--available   { color: var(--st-available-fg);  background: var(--st-available-soft); }
.floor__stat.--occupied    { color: var(--st-occupied-fg);   background: var(--st-occupied-soft); }
.floor__stat.--reserved    { color: var(--st-reserved-fg);   background: var(--st-reserved-soft); }
.floor__stat.--maintenance { color: var(--st-maint-fg);      background: var(--st-maint-soft); }
.floor__stat.--out-of-order{ color: var(--st-oos-fg);        background: var(--st-oos-soft); }
.floor__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: var(--sp-3);
}

/* ---------- Room card (grid item) ---------- */
.room-card {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-border-strong);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
    min-height: 108px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.room-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-2);
}
.room-card__num {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--c-text);
}
.room-card__type {
    font-size: 11px;
    color: var(--c-text-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.room-card__meta {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    border-top: 1px dashed var(--c-border);
}
.room-card__rate {
    font-weight: 700;
    font-size: 13px;
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
}
.room-card__cap {
    color: var(--c-text-3);
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px;
    font-weight: 500;
}
/* Status tints — left border + subtle background wash */
.room-card.--available   { border-left-color: var(--st-available-solid);   background: linear-gradient(180deg, var(--st-available-soft) 0%, #fff 60%); }
.room-card.--occupied    { border-left-color: var(--st-occupied-solid);    background: linear-gradient(180deg, var(--st-occupied-soft)  0%, #fff 60%); }
.room-card.--reserved    { border-left-color: var(--st-reserved-solid);    background: linear-gradient(180deg, var(--st-reserved-soft)  0%, #fff 60%); }
.room-card.--maintenance { border-left-color: var(--st-maint-solid);       background: linear-gradient(180deg, var(--st-maint-soft)     0%, #fff 60%); }
.room-card.--out-of-order{ border-left-color: var(--st-oos-solid);         background: linear-gradient(180deg, var(--st-oos-soft)       0%, #fff 60%); }

/* ---------- Room details popup (over the rooms grid) ---------- */
.room-popup__hero {
    padding: var(--sp-5);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-4);
}
.room-popup__hero.--available   { background: var(--st-available-soft); }
.room-popup__hero.--occupied    { background: var(--st-occupied-soft); }
.room-popup__hero.--reserved    { background: var(--st-reserved-soft); }
.room-popup__hero.--maintenance { background: var(--st-maint-soft); }
.room-popup__hero.--out-of-order{ background: var(--st-oos-soft); }
.room-popup__hero-num { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.room-popup__hero-type { color: var(--c-text-2); margin-top: 6px; font-size: 13px; }

/* ---------- Status change modal (big colored buttons) ---------- */
.status-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}
.status-picker__btn {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 2px solid transparent;
    border-radius: var(--r-md);
    background: var(--c-surface-2);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: transform .1s, border-color .12s, background .12s;
}
.status-picker__btn:hover { transform: translateY(-1px); }
.status-picker__btn.--available   { background: var(--st-available-soft);   color: var(--st-available-fg); }
.status-picker__btn.--occupied    { background: var(--st-occupied-soft);    color: var(--st-occupied-fg); }
.status-picker__btn.--reserved    { background: var(--st-reserved-soft);    color: var(--st-reserved-fg); }
.status-picker__btn.--maintenance { background: var(--st-maint-soft);       color: var(--st-maint-fg); }
.status-picker__btn.--out-of-order{ background: var(--st-oos-soft);         color: var(--st-oos-fg); }
.status-picker__btn:hover.--available   { border-color: var(--st-available-solid); }
.status-picker__btn:hover.--occupied    { border-color: var(--st-occupied-solid); }
.status-picker__btn:hover.--reserved    { border-color: var(--st-reserved-solid); }
.status-picker__btn:hover.--maintenance { border-color: var(--st-maint-solid); }
.status-picker__btn:hover.--out-of-order{ border-color: var(--st-oos-solid); }
.status-picker__dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.status-picker__body { flex: 1; }
.status-picker__label { font-size: 14px; font-weight: 600; }
.status-picker__hint { font-size: 12px; opacity: .85; margin-top: 2px; }

/* ---------- Calendar (bookings + others) ---------- */
.cal {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    padding: var(--sp-4);
}
.cal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-4);
}
.cal__nav { display: flex; align-items: center; gap: var(--sp-2); }
.cal__navbtn {
    width: 34px; height: 34px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    cursor: pointer;
    display: grid; place-items: center;
    color: var(--c-text-2);
    transition: background .12s, color .12s;
}
.cal__navbtn:hover { background: var(--c-primary-soft); color: var(--c-primary); }
.cal__title { font-size: 16px; font-weight: 600; min-width: 180px; text-align: center; }
.cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cal__dayhdr {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--c-text-3);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 0;
}
.cal__day {
    position: relative;
    aspect-ratio: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    padding: 6px 8px;
    cursor: pointer;
    transition: transform .1s, border-color .12s, box-shadow .12s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 68px;
    max-height: 90px;
}
.cal__day:hover {
    border-color: var(--c-primary);
    transform: translateY(-1px);
    box-shadow: var(--sh-2);
}
.cal__day.--other { opacity: 0.35; pointer-events: none; }
.cal__day.--today { border-color: var(--c-primary); background: var(--c-primary-soft); }
.cal__day.--selected { border-width: 2px; border-color: var(--c-primary); background: var(--c-primary-soft); }
.cal__daynum {
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text);
    line-height: 1;
}
.cal__daybadges {
    margin-top: auto;
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}
.cal__dot {
    width: 6px; height: 6px; border-radius: 50%;
}
.cal__dot.--arr { background: var(--st-available-solid); }
.cal__dot.--dep { background: var(--st-occupied-solid); }
.cal__dot.--in  { background: var(--c-primary); }

.cal__legend {
    display: flex; gap: var(--sp-4); font-size: 12px; color: var(--c-text-3);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
}
.cal__legend-item { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Modal step wizard (walk-in, etc.) ----------
   Named .wmz-* (walk-in modal wizard) to avoid collision with the
   bookings page's .wiz-step panes which are used differently. */
.wmz-steps {
    display: flex;
    gap: var(--sp-2);
    padding: 0 var(--sp-6) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface-2);
}
.wmz-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--c-text-3);
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.wmz-step__num {
    width: 22px; height: 22px;
    border-radius: 999px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
}
.wmz-step.is-active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.wmz-step.is-active .wmz-step__num { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.wmz-step.is-done   { color: var(--c-text-2); }
.wmz-step.is-done   .wmz-step__num { background: var(--c-success); color: #fff; border-color: var(--c-success); }
.wmz-pane { display: none; }
.wmz-pane.is-active { display: block; }

/* ---------- Walk-in multi-room cart ----------
   Appears under the room-tile grid in the walk-in modal once the clerk
   selects a room. Shows a running list and total; a × button on each
   row removes that room. */
.walkin-cart {
    margin-top: var(--sp-4);
    padding: 12px 14px;
    border: 1px solid var(--c-primary-ring);
    border-radius: var(--r-md);
    background: var(--c-primary-soft);
}
.walkin-cart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 13px;
}
.walkin-cart__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    border-top: 1px solid color-mix(in srgb, var(--c-primary) 15%, transparent);
}
.walkin-cart__row:first-child { border-top: none; }
.walkin-cart__row > span:first-child { flex: 1; min-width: 0; }
.walkin-cart__row > span:nth-child(2) { color: var(--c-text-2); font-size: 12px; white-space: nowrap; }

/* ---------- Dashboard quick-action row ----------
   The canonical place to start every daily workflow. Sits directly under
   the stat cards; primary orange on New booking, the rest secondary so
   the eye picks the starting action first. Wraps to two rows on phones. */
.dash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.dash-actions .btn { gap: 6px; }
@media (max-width: 600px) {
    .dash-actions { gap: 8px; }
    .dash-actions .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
}

/* ---------- Dashboard housekeeping strip ----------
   Appears under the stat grid only when there are rooms waiting to be
   cleaned (auto-flagged on checkout). One-click into the Housekeeping
   view of Rooms. */
.hk-strip {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 12px 16px;
    margin: var(--sp-4) 0 var(--sp-6);
    background: var(--c-primary-soft);
    border: 1px solid color-mix(in srgb, var(--c-primary) 20%, transparent);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: var(--c-text);
    transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}
.hk-strip:hover { transform: translateY(-1px); box-shadow: var(--sh-2); text-decoration: none; color: var(--c-text); }
.hk-strip__icon {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: var(--c-primary);
    color: var(--c-primary-fg);
    flex-shrink: 0;
}
.hk-strip__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hk-strip__text strong { font-size: 14px; font-weight: 600; }
.hk-strip__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-primary);
    white-space: nowrap;
}

/* ---------- Occupants list (booking view modal) ---------- */
.occupants { display: flex; flex-direction: column; gap: 8px; }
.occupant {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
}
.occupant__avatar {
    width: 34px; height: 34px;
    border-radius: 999px;
    background: var(--c-primary-soft);
    color: var(--c-primary);
    display: grid; place-items: center;
    font-size: 13px; font-weight: 700;
    flex-shrink: 0;
}
.occupant__body { flex: 1; min-width: 0; }
.occupant__name { font-size: 13px; font-weight: 600; }

/* ---------- Booking companions (Form C / register-of-guests) ---------- */
.companion {
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 12px 14px;
    background: var(--c-surface-2);
    margin-bottom: 10px;
}
.companion:last-child { margin-bottom: 0; }
.companion__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--c-text);
}

/* ---------- Guest ID documents grid ---------- */
.id-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.id-doc {
    position: relative;
    padding: 8px; border: 1px solid var(--c-border); border-radius: var(--r-md);
    background: var(--c-surface); color: var(--c-text);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.id-doc:hover { border-color: var(--c-primary); box-shadow: var(--sh-2); }
.id-doc__link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.id-doc__thumb {
    height: 90px; display: grid; place-items: center;
    background: var(--c-surface-2); border-radius: var(--r-sm); overflow: hidden;
}
.id-doc__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.id-doc__name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.id-doc__del {
    position: absolute; top: 4px; right: 4px;
    width: 24px; height: 24px; display: grid; place-items: center;
    background: rgba(255,255,255,0.92); border: 1px solid var(--c-border);
    border-radius: 999px; color: var(--c-danger); cursor: pointer;
    opacity: 0; transition: opacity var(--motion-fast);
}
.id-doc:hover .id-doc__del { opacity: 1; }
.id-doc__del:hover { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }

/* ---------- Checkout modal bill ---------- */
.section-head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--c-text-3);
    margin: 0 0 8px;
    font-weight: 700;
}
.bill {
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
    overflow: hidden;
}
.bill__row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-border);
    font-size: 13px;
}
.bill__row:last-child { border-bottom: none; }
.bill__label { flex: 1; }
.bill__amt   { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.bill__row--sum { background: var(--c-surface-2); font-size: 14px; }
.bill__row--sum .bill__amt { font-size: 15px; }
.bill__row--due { color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 8%, transparent); }
.bill__row--due .bill__amt { font-size: 16px; }

/* ---------- Walk-in wizard sections (legacy — kept for any inline usage) ---------- */
.wizsec { margin-bottom: var(--sp-6); }
.wizsec__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.wizsec__num {
    width: 32px; height: 32px;
    border-radius: 999px;
    background: var(--c-primary-soft);
    color: var(--c-primary);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.wizsec__title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.wizsec__hint  { font-size: 12px; color: var(--c-text-2); margin-top: 2px; }
.wizsec__more summary {
    cursor: pointer;
    color: var(--c-primary);
    font-size: 13px;
    font-weight: 500;
    margin-top: var(--sp-2);
    list-style: none;
}
.wizsec__more summary::before { content: '+ '; font-weight: 700; }
.wizsec__more[open] summary::before { content: '− '; }

/* Room tiles (available rooms picker) */
.room-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
}
.room-tile {
    display: block;
    padding: 12px 14px;
    background: var(--c-surface);
    border: 2px solid var(--c-border);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: border-color var(--motion-fast), transform var(--motion-fast);
    position: relative;
}
.room-tile input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.room-tile:hover { border-color: var(--c-border-strong); transform: translateY(-1px); }
.room-tile.is-active {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-ring);
    background: var(--c-primary-soft);
}
.room-tile__num  { font-size: 15px; font-weight: 700; }
.room-tile__type { font-size: 11px; color: var(--c-text-3); margin: 2px 0 8px; }
.room-tile__meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--c-text-2); }
.room-tile__rate { font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }

/* ---------- Booking timeline ----------
   Dots align exactly on the vertical rail. The rail is drawn as a line
   that runs between dots (not through the drawer body), with dots that
   sit on it via a shared x-axis. */
.timeline {
    position: relative;
    padding-left: 0;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 11px;             /* dot (24px) center = 12px, rail is 2px wide */
    top: 18px;
    bottom: 18px;
    width: 2px;
    background: var(--c-border);
    z-index: 0;
}
.timeline__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    position: relative;
}
.timeline__dot {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    z-index: 1;
    box-shadow: 0 0 0 3px var(--c-surface);
}
.timeline__content { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.timeline__when { white-space: nowrap; flex-shrink: 0; font-size: 11px; color: var(--c-text-3); padding-top: 2px; }

/* ---------- Availability grid (bookings) ---------- */
.avail-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    background: var(--c-surface);
}
.avail-grid th, .avail-grid td {
    border-right: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    padding: 0;
}
.avail-grid .avail-grid__room {
    position: sticky;
    left: 0;
    background: var(--c-surface);
    padding: 8px 12px;
    min-width: 140px;
    text-align: left;
    z-index: 2;
    border-right: 1px solid var(--c-border-strong);
}
.avail-grid thead .avail-grid__room { background: var(--c-surface-2); }
.avail-grid .avail-grid__day {
    padding: 6px 4px;
    text-align: center;
    background: var(--c-surface-2);
    min-width: 60px;
}
.avail-grid .avail-grid__day.--weekend { background: var(--c-bg); }
.avail-grid .avail-grid__day.--today {
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-weight: 700;
}
.avail-grid .avail-grid__cell {
    height: 42px;
    position: relative;
    /* Empty cell = available for that date. Subtle green wash so the chart
       at a glance tells you "this room has free nights here" rather than
       just showing blank boxes. Industry PMS convention. */
    background: var(--st-available-soft);
}
.avail-grid .avail-grid__cell.--blocked {
    background: repeating-linear-gradient(
        45deg,
        var(--st-oos-soft),
        var(--st-oos-soft) 5px,
        var(--st-oos-solid) 5px,
        var(--st-oos-solid) 10px
    );
    opacity: .55;
}
.avail-grid .avail-grid__cell.--booked { cursor: pointer; background: #fff; }
.avail-grid .avail-grid__bar {
    position: absolute;
    inset: 4px 0 4px 0;
    background: var(--bar);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 0 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.avail-grid .avail-grid__bar.--start { border-radius: 4px 0 0 4px; inset-inline-start: 4px; }
.avail-grid .avail-grid__bar.--end   { border-radius: 0 4px 4px 0; inset-inline-end: 4px; }
.avail-grid .avail-grid__bar.--start.--end { border-radius: 4px; }

/* ---------- Dashboard — arrivals list ---------- */
.arrival-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--c-border);
    transition: background .12s;
}
.arrival-row:hover { background: var(--c-surface-2); }
.arrival-row:last-child { border-bottom: none; }
.arrival-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--c-primary-soft);
    color: var(--c-primary);
    display: grid; place-items: center;
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
}
.arrival-body { flex: 1; min-width: 0; }
.arrival-name { font-weight: 600; font-size: 13px; }
.arrival-meta { font-size: 12px; color: var(--c-text-3); }
.arrival-room {
    font-weight: 600; font-size: 13px;
    padding: 4px 10px;
    background: var(--c-surface-2);
    border-radius: var(--r-sm);
    color: var(--c-text-2);
}

/* ---------- Dashboard — room status mini grid ---------- */
.mini-grid {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}
.mini-floor { }
.mini-floor__label {
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--c-text-3);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: var(--sp-2);
}
/* Only the FIRST floor needs an extra top margin — it sits right under
   the "Room status" card header with no breathing room by default.
   Subsequent floors already get their gap from .mini-grid's flex gap. */
.mini-floor:first-child .mini-floor__label { margin-top: var(--sp-3); }
.mini-floor__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 56px));
    gap: 8px;
}
.mini-room {
    width: 56px; height: 56px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: transform .1s, box-shadow .1s;
    text-decoration: none;
    box-shadow: var(--sh-1);
}
.mini-room:hover { transform: translateY(-2px); box-shadow: var(--sh-3); color: #fff; text-decoration: none; }
.mini-room.--available   { background: var(--st-available-solid); }
.mini-room.--occupied    { background: var(--st-occupied-solid); }
.mini-room.--reserved    { background: var(--st-reserved-solid); }
.mini-room.--maintenance { background: var(--st-maint-solid);    color: #fff; }
.mini-room.--out-of-order{ background: var(--st-oos-solid); }

.mini-legend {
    display: flex; gap: var(--sp-3);
    font-size: 11px; color: var(--c-text-2);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
    flex-wrap: wrap;
}
.mini-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.mini-legend-swatch { width: 10px; height: 10px; border-radius: 3px; }

/* ---------- Services row (checkin) ---------- */
.svc-row {
    display: grid;
    grid-template-columns: 1fr 80px 120px 40px;
    gap: var(--sp-2);
    align-items: center;
    padding: 6px 0;
}
.svc-row + .svc-row { border-top: 1px dashed var(--c-border); }

/* ---------- Subtle animation on toast/modal entrance already present ---------- */