/* ═══════════════════════════════════════════════════════════════
   Tripperist Design Tokens — Cloud Nine palette
   Light mode (default) → Dark/Neon mode (.dark on body)
   See docs/design-system.md for full token reference.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Page background ── */
    --page-bg:        #F5F4FC;  /* Pale lavender */
    --page-bg-deep:   #ECEAFE;
    --page-bg-soft:   #EDEAF8;  /* Warm lavender alt sections — matches mockup */
    --page-bg-pale:   #F8F7FE;

    /* ── Nav ── */
    --nav-bg:             rgba(255,255,255,.94);  /* Light glass */
    --nav-bg-dark:        #ECEAFE;
    --nav-border-color:   rgba(160,148,210,.22);
    --nav-text:           rgba(80,70,128,.62);
    --nav-text-hover-c:   #16122E;
    --user-chip-bd:       rgba(160,148,210,.28);
    --user-chip-hover-bg: rgba(123,92,240,.05);
    --user-chip-open-bg:  rgba(123,92,240,.08);
    --user-chip-open-bd:  rgba(123,92,240,.28);
    --user-avatar-bd:     rgba(160,148,210,.4);
    --user-name-c:        #5A5280;
    --user-caret-c:       #A098C0;
    --dropdown-bg:        #FFFFFF;
    --dropdown-bd:        rgba(160,148,210,.22);
    --dropdown-item-c:    #5A5280;
    --dropdown-item-hover-bg: rgba(123,92,240,.06);
    --dropdown-item-hover-c:  #16122E;
    --hamburger-c:        rgba(90,80,140,.65);
    --mobile-menu-bg:     rgba(255,255,255,.98);
    --mobile-menu-bd:     rgba(160,148,210,.2);
    --mobile-link-c:      #5A5280;
    --mobile-link-hover-bg: rgba(123,92,240,.05);
    --hero-bg:            linear-gradient(150deg, #ECEAFE 0%, #F5F4FC 55%, #EBF0FF 100%);

    /* ── Accent colors ── */
    --accent:         #335AFF;  /* Electric blue — CTAs, pins */
    --accent-dim:     rgba(51,90,255,.08);
    --tertiary:       #7B5CF0;  /* Violet — chips, labels */
    --tertiary-dim:   rgba(123,92,240,.10);
    --tertiary-dark:  #6640E0;

    /* ── Surfaces ── */
    --card-bg:        #FFFFFF;
    --card-border:    rgba(160,148,210,.22);
    --card-shadow:    0 1px 4px rgba(80,60,160,.06), 0 6px 24px rgba(60,40,120,.06);
    --card-hover-shadow: 0 2px 8px rgba(60,40,120,.09), 0 16px 40px rgba(60,40,120,.12);

    /* ── Text ── */
    --text:           #16122E;
    --text-2:         #5A5280;
    --text-3:         #A098C0;
    --on-nav:         #16122E;

    /* ── Component tokens ── */
    --eyebrow-color:  #7B5CF0;
    --eyebrow-shadow: none;
    --chip-bg:        rgba(123,92,240,.10);
    --chip-color:     #6640E0;
    --chip-border:    transparent;
    --chip-shadow:    none;

    --nav-link-hover:        rgba(255,255,255,.9);
    --nav-link-hover-shadow: none;

    --toggle-color:        rgba(80,70,128,.6);
    --toggle-border:       rgba(160,148,210,.35);
    --toggle-shadow:       none;
    --toggle-hover-color:  #16122E;

    --dark-section-bg: #16122E;
    --footer-bg:       #0D0A1E;

    --logo-mark-bg:     #335AFF;
    --logo-mark-color:  #FFFFFF;
    --logo-mark-border: transparent;
    --logo-mark-shadow: 0 2px 12px rgba(51,90,255,.4);
    --logo-pulse:       none;

    /* ── Buttons ── */
    --btn-primary-bg:     #335AFF;
    --btn-primary-color:  #FFFFFF;
    --btn-primary-border: transparent;
    --btn-primary-shadow: 0 4px 16px rgba(51,90,255,.28);

    /* ── Semantic status (locked across themes) ── */
    --status-approved: #43A047;
    --status-pending:  #FF9800;
    --status-rejected: #E53935;
    --status-draft:    #9E9E9E;

    --scanlines: none;
}

/* ═══════════════════════════════════════════════════════════════
   Dark / Neon overrides (Route 66 mode)
   ═══════════════════════════════════════════════════════════════ */

body.dark {
    --page-bg:        #080C18;
    --page-bg-deep:   #060810;
    --page-bg-soft:   #0F1525;
    --page-bg-pale:   #162038;

    --nav-bg:             rgba(8,12,24,.96);
    --nav-bg-dark:        #030508;
    --nav-border-color:   rgba(192,192,236,.07);
    --nav-text:           rgba(255,255,255,.62);
    --nav-text-hover-c:   rgba(255,255,255,.9);
    --user-chip-bd:       rgba(255,255,255,.12);
    --user-chip-hover-bg: rgba(255,255,255,.07);
    --user-chip-open-bg:  rgba(255,255,255,.1);
    --user-chip-open-bd:  rgba(255,255,255,.25);
    --user-avatar-bd:     rgba(255,255,255,.2);
    --user-name-c:        rgba(255,255,255,.8);
    --user-caret-c:       rgba(255,255,255,.45);
    --dropdown-bg:        rgba(8,12,24,.98);
    --dropdown-bd:        rgba(192,192,236,.15);
    --dropdown-item-c:    rgba(255,255,255,.75);
    --dropdown-item-hover-bg: rgba(255,255,255,.08);
    --dropdown-item-hover-c:  #FFFFFF;
    --hamburger-c:        rgba(255,255,255,.7);
    --mobile-menu-bg:     rgba(8,12,24,.98);
    --mobile-menu-bd:     rgba(192,192,236,.12);
    --mobile-link-c:      rgba(255,255,255,.75);
    --mobile-link-hover-bg: rgba(255,255,255,.06);
    --hero-bg:            linear-gradient(150deg, var(--nav-bg-dark) 0%, var(--nav-bg) 100%);

    --accent:         #FF9A50;
    --accent-dim:     rgba(255,154,80,.12);
    --tertiary:       #E8C040;
    --tertiary-dim:   rgba(232,192,64,.12);
    --tertiary-dark:  #E8C040;

    --card-bg:        #0F1525;
    --card-border:    rgba(192,192,236,.16);
    --card-shadow:    0 0 16px rgba(192,192,236,.05);
    --card-hover-shadow: 0 0 24px rgba(192,192,236,.14), 0 0 60px rgba(192,192,236,.04);

    --text:    #D8D8F0;
    --text-2:  #8A8AAC;
    --text-3:  #454568;
    --on-nav:  #D8D8F0;

    --eyebrow-color:  #E8C040;
    --eyebrow-shadow: 0 0 10px rgba(232,192,64,.6), 0 0 24px rgba(232,192,64,.25);
    --chip-bg:        transparent;
    --chip-color:     #E8C040;
    --chip-border:    rgba(232,192,64,.32);
    --chip-shadow:    0 0 8px rgba(232,192,64,.15);

    --nav-link-hover:        #C0C0EC;
    --nav-link-hover-shadow: 0 0 12px rgba(192,192,236,.5);

    --toggle-color:       #FF9A50;
    --toggle-border:      #FF9A50;
    --toggle-shadow:      0 0 10px rgba(255,154,80,.35), inset 0 0 6px rgba(255,154,80,.07);
    --toggle-hover-color: #FFBB78;

    --dark-section-bg: #080C18;
    --footer-bg:       #030508;

    --logo-mark-bg:     transparent;
    --logo-mark-color:  #FF9A50;
    --logo-mark-border: #FF9A50;
    --logo-mark-shadow: 0 0 8px rgba(255,154,80,.65), 0 0 20px rgba(255,130,56,.3), inset 0 0 8px rgba(255,154,80,.12);
    --logo-pulse:       pulse-logo 4s ease-in-out infinite;

    --btn-primary-bg:     transparent;
    --btn-primary-color:  #FF9A50;
    --btn-primary-border: #FF9A50;
    --btn-primary-shadow: 0 0 12px rgba(255,154,80,.4), 0 0 30px rgba(255,130,56,.18),
                          inset 0 0 10px rgba(255,154,80,.08);

    --scanlines: repeating-linear-gradient(
        0deg, transparent, transparent 3px,
        rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 4px
    );
}

/* ═══════════════════════════════════════════════════════════════
   Keyframes
   ═══════════════════════════════════════════════════════════════ */

@keyframes neon-flicker {
    0%   { opacity:0; }
    14%  { opacity:1; }
    17%  { opacity:.55; }
    19%  { opacity:1; }
    21%  { opacity:.7; }
    24%  { opacity:1; }
    100% { opacity:1; }
}

@keyframes pulse-logo {
    0%,100% { opacity:1; }
    50%      { opacity:.82; }
}

/* ═══════════════════════════════════════════════════════════════
   Reset + Base
   ═══════════════════════════════════════════════════════════════ */

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

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--page-bg);
    background-image: var(--scanlines);
    color: var(--text);
    font-size: 15px;
    line-height: 1.55;
    min-height: 100vh;
    transition: background .35s ease, color .3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   Layout helpers
   ═══════════════════════════════════════════════════════════════ */

.content {
    padding: 38px 28px 56px;
    max-width: 1080px;
    margin: 0 auto;
}

.section-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 28px;
}

/* ═══════════════════════════════════════════════════════════════
   Typography
   ═══════════════════════════════════════════════════════════════ */

.eyebrow {
    font-family: 'SF Mono','Courier New',monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--eyebrow-color);
    text-shadow: var(--eyebrow-shadow);
    margin-bottom: 10px;
    transition: color .3s, text-shadow .3s;
}

.page-title {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
    margin-bottom: 16px;
    outline: none;
    transition: color .3s;
}

body.dark .page-title {
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* ═══════════════════════════════════════════════════════════════
   Hero
   ═══════════════════════════════════════════════════════════════ */

.hero {
    background: var(--hero-bg);
    padding: 52px 0 64px;
    position: relative;
    overflow: hidden;
    transition: background .35s;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 48px;
    background: linear-gradient(to bottom, transparent, var(--page-bg));
    pointer-events: none;
    transition: background .35s;
}

.hero-eyebrow {
    font-family: 'SF Mono','Courier New',monospace;
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--eyebrow-color);
    margin-bottom: 10px;
    transition: color .3s, text-shadow .3s;
}

body.dark .hero-eyebrow {
    color: var(--tertiary);
    text-shadow: var(--eyebrow-shadow);
}

.hero-hed {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.08;
    color: var(--text);
    text-wrap: balance;
    margin-bottom: 18px;
    letter-spacing: -.025em;
    transition: color .3s, text-shadow .3s;
    outline: none;
}

body.dark .hero-hed {
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #C0C0EC;
    text-shadow: 0 0 4px rgba(192,192,236,.98), 0 0 12px rgba(168,168,214,.85),
                 0 0 30px rgba(140,140,200,.55), 0 0 70px rgba(110,110,185,.22);
    animation: neon-flicker 1.6s ease-out both;
}

.hero-sub {
    font-size: 15px;
    color: var(--text-2);
    max-width: 52ch;
    line-height: 1.7;
    margin-bottom: 30px;
}

.hero-content {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 28px;
}

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════════ */

.btn-primary {
    display: inline-flex;
    align-items: center;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    border: 1.5px solid var(--btn-primary-border);
    box-shadow: var(--btn-primary-shadow);
    padding: 11px 26px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow .2s, background .35s, color .3s, border-color .35s, opacity .15s;
}

.btn-primary:hover { opacity: .88; }

body.dark .btn-primary {
    text-transform: uppercase;
    letter-spacing: .05em;
}

body.dark .btn-primary:hover {
    opacity: 1;
    box-shadow: 0 0 22px rgba(255,154,80,.6), 0 0 50px rgba(255,130,56,.28),
                inset 0 0 14px rgba(255,154,80,.12);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--text-2);
    border: 1px solid rgba(90,82,128,.28);
    padding: 11px 26px;
    border-radius: 5px;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, border-color .3s, color .3s;
}

.btn-outline:hover {
    background: var(--accent-dim);
    border-color: rgba(51,90,255,.3);
    color: var(--text);
}

body.dark .btn-outline {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.85);
    border-color: rgba(255,255,255,.22);
}

body.dark .btn-outline:hover { background: rgba(255,255,255,.14); }

/* ═══════════════════════════════════════════════════════════════
   Cards
   ═══════════════════════════════════════════════════════════════ */

.card {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s, background .35s, border-color .35s;
}

.card:hover {
    box-shadow: var(--card-hover-shadow);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   Chips
   ═══════════════════════════════════════════════════════════════ */

.chip {
    display: inline-flex;
    align-items: center;
    background: var(--chip-bg);
    color: var(--chip-color);
    border: 1px solid var(--chip-border);
    box-shadow: var(--chip-shadow);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 3px;
    font-family: 'SF Mono','Courier New',monospace;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background .35s, color .3s, border-color .35s, box-shadow .35s;
}

/* ═══════════════════════════════════════════════════════════════
   Status badges (semantic — theme-independent)
   ═══════════════════════════════════════════════════════════════ */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 20px;
}

.status-approved { background: #EBF7EC; color: #2E7D32; }
.status-pending  { background: #FFF3E0; color: #E65100; }
.status-rejected { background: #FEECEC; color: #C62828; }
.status-draft    { background: #F0F0F8; color: #555555; }

body.dark .status-approved { background: rgba(82,192,90,.1);   color: #52C05A; border: 1px solid rgba(82,192,90,.28); }
body.dark .status-pending  { background: rgba(255,170,64,.1);  color: #FFAA40; border: 1px solid rgba(255,170,64,.28); }
body.dark .status-rejected { background: rgba(240,80,80,.1);   color: #F05050; border: 1px solid rgba(240,80,80,.28); }
body.dark .status-draft    { background: rgba(100,100,120,.1); color: #667788; border: 1px solid rgba(100,100,120,.28); }

/* ═══════════════════════════════════════════════════════════════
   Dev placeholder
   ═══════════════════════════════════════════════════════════════ */

.placeholder-note {
    color: var(--text-3);
    font-style: italic;
    font-size: 13.5px;
    margin-top: 8px;
}

/* ── Trip forms ─────────────────────────────────────────────────────────────
   Shared by the create form on /trips and the edit form on /trips/{id}.

   GLOBAL, not component-isolated, and that is the point. These lived in
   Trips.razor.css and the edit form reused the class names expecting to inherit
   them — but Blazor CSS isolation rewrites `.trip-field` to `.trip-field[b-xxx]`
   with a scope id per component, so the edit form rendered completely unstyled:
   no card, no labels, bare inline inputs. It looked exactly like markup that had
   forgotten its stylesheet, because effectively it had.

   Two components needing the same form is what makes these global. Anything only
   one page uses stays in that page's isolated sheet. */

.trip-new-form {
    border: 1px solid var(--card-border);
    border-radius: 13px;
    background: var(--card-bg);
    padding: 18px;
    margin-bottom: 24px;
    max-width: 520px;
}

.trip-field {
    display: block;
    margin-bottom: 13px;
}

.trip-field > span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-2);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trip-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--card-border);
    border-radius: 9px;
    background: var(--card-bg);
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
}

/* Two dates side by side on a desktop, stacked where that would crush them. */
.trip-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

@media (max-width: 460px) {
    .trip-field-row {
        grid-template-columns: 1fr;
    }
}

.trip-field-count {
    display: block;
    margin-top: 4px;
    color: var(--text-3);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* States the constraint before it is hit, rather than only as a refusal. */
.trip-field-hint {
    margin: 0 0 12px;
    color: var(--text-2);
    font-size: 0.8rem;
    line-height: 1.4;
}

.trip-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

/* One treatment everywhere. It was a dashed button on the trip page and a plain
   link on /trips — a divergence only isolation was hiding. A secondary action
   beside a primary button is the link. */
.trip-form-cancel {
    border: 0;
    background: none;
    padding: 8px 4px;
    color: var(--text-2);
    font: inherit;
    font-size: 0.87rem;
    font-weight: 600;
    cursor: pointer;
}

.trip-form-cancel:hover:not(:disabled) {
    text-decoration: underline;
}

.trip-form-error {
    margin: 0 0 12px;
    color: var(--status-rejected);
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── Trip page shell, headings and load notices ─────────────────────────────
   GLOBAL for the same reason as the trip forms above: /trips and /trips/{id} both
   use these, and Blazor CSS isolation scopes a component sheet to that component
   only. They lived in Trips.razor.css, so the trip DETAIL page rendered its four
   load notices — the whole point of that work — as unstyled text, and its buttons
   as browser defaults. Invisible in tests; obvious the moment the page was opened. */
.trips-shell {
    padding: 40px 0 64px;
}

.trips-hed {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--text);
    margin: 0 0 32px;
}

/* ── Empty states ─────────────────────────────────── */
.trips-empty {
    color: var(--text-2);
    font-size: 0.95rem;
    padding: 32px 0;
}

/* ── Load notices ─────────────────────────────────────
   Replaces .trips-empty--error, which was a single red line for every failure.
   #151: an expired session and a dead API need different actions from the reader,
   so they need different notices. Colour follows cause: amber where the reader can
   act, blue where they can only wait, red where the data itself is in question. */
.trips-notice {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    margin: 8px 0 24px;
    border: 1px solid;
    border-radius: 12px;
    background: var(--card-bg);
}

.trips-notice-body {
    flex: 1;
    min-width: 0;
}

.trips-notice-body strong {
    display: block;
    color: var(--text);
    margin-bottom: 2px;
}

.trips-notice-body p {
    margin: 0;
    color: var(--text-2);
    font-size: 0.9rem;
    /* Keeps the sentence readable rather than letting it run the width of the page. */
    max-width: 62ch;
}

.trips-notice-action {
    flex: none;
    border: 0;
    border-radius: 9px;
    padding: 8px 16px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    box-shadow: var(--btn-primary-shadow);
}

.trips-notice-action:disabled {
    opacity: 0.55;
    cursor: default;
}

/* The reader can fix this one. */
.trips-notice--auth {
    border-color: var(--status-pending);
    background: color-mix(in srgb, var(--status-pending) 7%, var(--card-bg));
}

/* They can only wait. Uses the accent rather than a warning colour: nothing is wrong
   with their trip, and red here reads as data loss. */
.trips-notice--network {
    border-color: var(--accent);
    background: var(--accent-dim);
}

/* The response itself was wrong, which is the only case where red is honest. */
.trips-notice--data {
    border-color: var(--status-rejected);
    background: color-mix(in srgb, var(--status-rejected) 6%, var(--card-bg));
}

@media (max-width: 560px) {
    /* The action stops being a trailing button and becomes the next thing you read. */
    .trips-notice {
        flex-direction: column;
        align-items: stretch;
    }
}