/* ============================================================================
   Bulldawg web — design system
   The ONLY source of colour is the WEB_SCREENS.md §1 palette table, defined once
   here as custom properties. Do not introduce a colour outside this table, and do
   not reference a variable or class that isn't defined in this file: an undefined
   token renders as an unstyled screen, the CSS analogue of the stale
   StaticResource key that crashed the mobile app.

   Type is Open Sans throughout. No second family.
   Design width is 1280px — the reference, not a fixed frame. Build fluid.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root {
    /* §1 palette */
    --navy: #073240;          /* sidebar, primary buttons, meter fill, headings on light */
    --ink: #0B1F26;           /* primary body text */
    --muted: #5A6B72;         /* secondary text, labels */
    --page: #F4F7F8;          /* app background */
    --surface: #FFFFFF;       /* cards */
    --accent: #EA6D11;        /* the "needs attention" segment, highlights */
    --amber-text: #B45309;    /* warning copy on light surfaces */
    --red: #B91C1C;           /* destructive outline, declined states */
    --track: #E2E8EA;         /* empty meter segments, dividers */
    --hairline: rgba(7, 50, 64, .12); /* card borders */
    --green: #15803D;         /* confirmed/paid states only — a receipt. Never decorative. */

    /* Structural tokens (not colour) */
    --sidebar-width: 232px;
    --card-radius: 16px;
    --card-shadow: 0 1px 2px rgba(7, 50, 64, .05), 0 6px 16px rgba(7, 50, 64, .05);
    --reference-width: 1280px;
}

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

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.2; font-weight: 700; color: var(--navy); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; }
p { margin: 0 0 .75rem; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.muted { color: var(--muted); }
.amber { color: var(--amber-text); }
.danger { color: var(--red); }
.text-sm { font-size: .82rem; }
.text-xs { font-size: .72rem; }
.strong { font-weight: 700; }

/* ---------- Layout: authenticated (sidebar) ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    background: var(--navy);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar .brand { padding: 4px 8px 20px; font-size: 1.4rem; font-weight: 700; color: var(--surface); }
.sidebar .nav-item {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
}
.sidebar .nav-item:hover { background: rgba(255, 255, 255, .08); color: var(--surface); text-decoration: none; }
.sidebar .nav-item.active { background: rgba(255, 255, 255, .14); color: var(--surface); }
.sidebar .spacer { flex: 1; }

.content { flex: 1; min-width: 0; padding: 32px 40px; max-width: var(--reference-width); }

/* ---------- Layout: public / tokened (no app chrome) ---------- */
.public-shell { min-height: 100vh; background: var(--page); }
.public-narrow { max-width: 412px; margin: 0 auto; padding: 40px 20px; }   /* §2.11 checkout card */
.public-wide { max-width: var(--reference-width); margin: 0 auto; padding: 40px 24px; }

/* ---------- Cards ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 20px;
}
.card + .card { margin-top: 16px; }
.card-title { margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; color: var(--navy); }
.hairline { height: 1px; margin: 12px 0; border: 0; background: var(--hairline); }

/* Attention treatments */
.attention-card { border-left: 4px solid var(--accent); }
.amber-card { border-left: 4px solid var(--amber-text); background: rgba(180, 83, 9, .04); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .12s ease, background-color .12s ease;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--navy); color: var(--surface); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.12); color: var(--surface); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--hairline); }
.btn-ghost:hover:not(:disabled) { background: rgba(7, 50, 64, .04); }
/* Destructive is a red outline, never a filled red block (§2.8) */
.btn-danger-outline { background: transparent; color: var(--red); border-color: var(--red); }
.btn-danger-outline:hover:not(:disabled) { background: rgba(185, 28, 28, .06); }
.btn-block { width: 100%; }

/* ---------- Pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.pill-attention { background: rgba(234, 109, 17, .12); color: var(--accent); }
.pill-amber { background: rgba(180, 83, 9, .10); color: var(--amber-text); }
.pill-danger { background: rgba(185, 28, 28, .10); color: var(--red); }
.pill-track { background: var(--track); color: var(--muted); }

/* ---------- Forms ---------- */
label { display: block; margin: 0 0 6px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.input, select.input, textarea.input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: .95rem;
}
.input:focus { border-color: var(--navy); outline: 2px solid var(--navy); outline-offset: 0; }
.field { margin-bottom: 14px; }
.field-error { margin-top: 4px; font-size: .78rem; color: var(--red); }

/* ---------- Layout helpers ---------- */
.row { display: flex; gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.between { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ---------- Empty states (§1: every list screen states one) ---------- */
.empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.empty .empty-title { margin-bottom: 6px; font-weight: 600; color: var(--ink); }

/* ---------- Responsive: 1280 is the reference, not a frame ---------- */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
    .app-shell { flex-direction: column; }
    .sidebar {
        width: 100%;
        flex: 0 0 auto;
        height: auto;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
    }
    .sidebar .brand { padding: 0 12px 0 0; }
    .sidebar .spacer { display: none; }
    .content { padding: 24px 20px; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Blazor's own error UI, restyled into the palette ---------- */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: var(--surface);
    border-top: 1px solid var(--hairline);
    box-shadow: var(--card-shadow);
    color: var(--ink);
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }
#blazor-error-ui .reload { font-weight: 600; text-decoration: underline; }

/* ---------- SpotMeter (shared) ---------- */
.spotmeter-wrap { display: flex; flex-direction: column; gap: 6px; }
.spotmeter { display: flex; gap: 4px; }
.spotmeter-seg { flex: 1; height: 10px; border-radius: 3px; background: var(--track); }
.spotmeter-seg.seg-navy { background: var(--navy); }
.spotmeter-seg.seg-red { background: var(--red); }
.spotmeter-seg.seg-accent { background: var(--accent); }
.spotmeter-seg.seg-track { background: var(--track); }
.spotmeter-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: .78rem; }
.spotmeter-count { font-weight: 700; color: var(--navy); }
.spotmeter-failed { font-weight: 600; color: var(--red); }
.spotmeter-need { font-weight: 600; color: var(--accent); }

/* ---------- Payment-model sentence (shared) ---------- */
.payment-model {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(7, 50, 64, .04);
    font-size: .84rem;
    color: var(--muted);
}

/* ---------- Reserve panel (shared) ---------- */
.reserve-panel { max-width: 460px; }
.reserve-title { margin-bottom: 2px; }
.reserve-when { margin-bottom: 14px; }
.reserve-meter { display: flex; flex-direction: column; gap: 8px; }
.reserve-deadline { margin: 0; color: var(--ink); }
.reserve-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.reserve-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; }
.reserve-steps .step-n {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: var(--navy);
    color: var(--surface);
    font-size: .74rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.reserve-release { margin: 12px 0 0; color: var(--muted); font-style: italic; }
.reserve-arrival { margin: 12px 0; }
.reserve-price { margin: 14px 0 4px; }
.reserve-price-value { font-size: 1.35rem; font-weight: 700; color: var(--navy); }
.reserve-btn { margin-top: 8px; }
.reserve-blocked { margin: 8px 0 0; text-align: center; }

/* Ineligible Dawg is SHOWN, not hidden (2.7) */
.dawg-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); }
.dawg-option + .dawg-option { margin-top: 8px; }
.dawg-option.ineligible { border-color: var(--amber-text); background: rgba(180, 83, 9, .04); }
.dawg-option .dawg-name { font-weight: 600; }
.dawg-option .dawg-reason { font-size: .76rem; color: var(--amber-text); }

/* ---------- Dashboard stat tiles ---------- */
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--navy); line-height: 1.1; }

/* ---------- Booking flow (2.5) ---------- */
.booking-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.booking-steps { min-width: 0; }
.booking-receipt { position: sticky; top: 32px; }
.step-muted { opacity: .6; }
.choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 10px; cursor: pointer; background: var(--surface); }
.choice:hover { border-color: var(--navy); }
.choice.chosen { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.choice-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.day-group { padding: 12px 0 0; }
.day-group + .day-group { border-top: 1px solid var(--hairline); }
.day-label { font-weight: 700; color: var(--navy); font-size: .9rem; margin-bottom: 8px; }
.day-group .choice + .choice { margin-top: 8px; }
.receipt-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .9rem; }
.receipt-row.total { font-size: 1.05rem; }
.receipt-footnote { margin: 8px 0 0; text-align: center; }
@media (max-width: 1024px) { .booking-grid { grid-template-columns: 1fr; } .booking-receipt { position: static; } }

/* ---------- Group discovery (2.6) ---------- */
.filter-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.filter-field { display: flex; flex-direction: column; min-width: 180px; }
.filter-toggle { flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.filter-toggle label { margin: 0; }
.filter-note { margin: 8px 0 16px; }
.occurrence-meter { margin: 14px 0 8px; }
.occurrence-deadline { margin: 0 0 12px; color: var(--ink); }

/* ---------- Reserve: chosen Dawg option (2.7) ---------- */
.dawg-option.chosen { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }

/* ---------- Reservation timeline (2.8) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.timeline-step { display: flex; gap: 12px; padding: 0 0 18px; position: relative; }
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: var(--track);
}
.timeline-step:last-child::before { display: none; }
.timeline-dot {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border-radius: 999px;
    background: var(--track);
    z-index: 1;
}
.timeline-step.done .timeline-dot { background: var(--navy); }
.timeline-step.current .timeline-dot { background: var(--accent); }
.timeline-step.pending .timeline-dot { background: var(--track); }
.timeline-step.pending { opacity: .65; }
.timeline-cutoff { margin: 10px 0 6px; color: var(--ink); }

/* ---------- Centred confirmation dialog (2.8) ---------- */
.dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 50, 64, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
}
.dialog {
    background: var(--surface);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 24px;
    max-width: 420px;
    width: 100%;
}
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }

/* ---------- Tokened public pages (2.9-2.11) ---------- */
.tokened-grid { display: grid; grid-template-columns: 1fr 460px; gap: 32px; align-items: start; }
.public-narrow-wide { max-width: 720px; margin: 0 auto; padding: 40px 24px; }
.shared-by { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(234, 109, 17, .12); color: var(--accent); font-size: .8rem; font-weight: 600; margin-bottom: 12px; }
.token-warning { margin-top: 20px; text-align: center; }
.checkout-exit { margin: 10px 0 0; text-align: center; }
@media (max-width: 1024px) { .tokened-grid { grid-template-columns: 1fr; } }

/* ---------- Paid receipt state (2.11) ---------- */
.receipt-card { border-left: 4px solid var(--green); }
.receipt-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(21, 128, 61, .10); color: var(--green); font-size: .74rem; font-weight: 700; margin-bottom: 10px; }

/* ---------- Public booking page (2.1) ---------- */
.booking-sticky { position: sticky; top: 32px; }
.offering { padding: 14px 0; }
.offering + .offering { border-top: 1px solid var(--hairline); }
.window-list { margin: 0; padding: 0 0 0 18px; }
.window-list li { margin-bottom: 4px; }
@media (max-width: 1024px) { .booking-sticky { position: static; } }

.booking-form-section { max-width: 720px; margin: 32px auto 0; }

/* ---------- Signed-out auth shell (2.3) ---------- */
.auth-shell { display: flex; min-height: 100vh; }
.auth-panel {
    width: 520px;
    flex: 0 0 520px;
    background: var(--navy);
    color: var(--surface);
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-brand { font-size: 2.2rem; font-weight: 700; color: var(--surface); margin-bottom: 12px; }
.auth-value { font-size: 1.05rem; color: rgba(255, 255, 255, .82); margin: 0; }
.auth-content { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.auth-form { width: 100%; max-width: 380px; }
.auth-links { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; font-size: .85rem; }
.nav-signout {
    background: none;
    border: 0;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
}
@media (max-width: 900px) {
    .auth-shell { flex-direction: column; }
    .auth-panel { width: 100%; flex: 0 0 auto; padding: 32px 24px; }
}

/* Neutral holding state while auth settles, and while the sign-in redirect runs.
   Deliberately not the app shell: no sidebar may flash for a signed-out visitor. */
.auth-settling {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--page);
    color: var(--muted);
    font-size: .9rem;
}