/* Mountain Lion customer portal — design tokens.
 *
 * The palette is split into two sets: a warm cream light theme and
 * a neutral dark theme. Both are selected automatically based on the
 * user's OS color scheme (prefers-color-scheme media query below).
 * An inline script on each page also mirrors the match onto
 * data-bs-theme so Bootstrap's own components flip in step.
 */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --radius-md: 0;
    --radius-lg: 0;
    --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.16);

    /* Light palette (default) — crisp gray body with white card
       surfaces; the navbar + sidebar borrow the "chrome" tokens below
       so they stay dark on light mode for brand contrast. */
    --bg: #f3f4f6;
    --surface: #ffffff;
    --surface-2: #e9ebef;
    --fg: #2f2e2e;
    --subtle-fg: #6c757d;
    --border: #d9dce1;
    --accent: #c29955;
    --accent-fg: #ffffff;
    --accent-dark: #9a7a43;
    --danger: #dc3545;

    /* Top navbar + left sidebar chrome. Dark in light mode for
       contrast against the pale body; nearly-black in dark mode so
       it reads as "one notch darker than the surface". */
    --chrome-bg: #2a2926;
    --chrome-fg: #ece8de;
    --chrome-subtle-fg: #a8a49b;
    --chrome-border: #3a362f;

    --ml-gold: var(--accent);
    --ml-gold-dark: var(--accent-dark);
    --ml-dark: #2f2e2e;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1917;
        --surface: #26241f;
        --surface-2: #333029;
        --fg: #ece8de;
        --subtle-fg: #a8a49b;
        --border: #3a362f;
        --accent: #d4a966;
        --accent-fg: #1a1917;
        --accent-dark: #b38a4a;
        --danger: #e85060;
        --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.55);

        --chrome-bg: #121110;
        --chrome-fg: #ece8de;
        --chrome-subtle-fg: #a8a49b;
        --chrome-border: #3a362f;
    }
}

body {
    background: var(--bg);
    color: var(--fg);
}

/* Sharp corners on containers; buttons keep their rounded shape. */
.card,
.modal-content,
.list-group,
.list-group-item,
.table,
.table thead,
.table tbody,
.table th,
.table td,
.alert,
.form-control,
.form-select,
.input-group,
.input-group-text,
.trip-card {
    border-radius: 0 !important;
}

.ml-topbar {
    background: var(--chrome-bg);
    border-bottom: 1px solid var(--chrome-border);
}
.ml-topbar .navbar-brand,
.ml-topbar .nav-link {
    color: var(--chrome-fg);
}
.ml-topbar .nav-link.active,
.ml-topbar .nav-link:hover {
    color: var(--ml-gold);
}
.ml-topbar .navbar-toggler {
    color: var(--chrome-fg);
    border-color: var(--chrome-border);
}
/* `navbar-dark` on the nav element already swaps Bootstrap's
   toggler icon to the white SVG variant, but the line color can
   be hard to read on the chrome background — tint it gold. */
.ml-topbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23c29955' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.ml-topbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(194, 153, 85, 0.35);
}
.ml-nav-logo {
    height: 36px;
    width: auto;
    display: block;
}

.btn-gold {
    background: var(--ml-gold);
    border-color: var(--ml-gold);
    color: var(--accent-fg);
}
.btn-gold:hover {
    background: var(--ml-gold-dark);
    border-color: var(--ml-gold-dark);
    color: var(--accent-fg);
}
.btn-outline-gold {
    background: transparent;
    border-color: var(--ml-gold);
    color: var(--ml-gold);
}
.btn-outline-gold:hover {
    background: var(--ml-gold);
    color: var(--accent-fg);
}
.btn-check:checked + .btn-outline-dark {
    background: var(--ml-gold);
    border-color: var(--ml-gold);
    color: var(--accent-fg);
}
.text-gold { color: var(--ml-gold); }

.card, .modal-content, .list-group-item {
    background: var(--surface);
    color: var(--fg);
    border-color: var(--border);
}
.table {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--fg);
    --bs-table-border-color: var(--border);
}

.trip-card {
    border-left: 4px solid var(--ml-gold);
    background: var(--surface);
    color: var(--fg);
}
.trip-card.past { border-left-color: var(--subtle-fg); }
.trip-card.cancelled { border-left-color: var(--danger); }

.route-arrow {
    font-weight: 600;
    color: var(--ml-gold);
    margin: 0 0.35rem;
}

.airport-chip {
    font-family: "SF Mono", Menlo, monospace;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.stat-card { border-top: 3px solid var(--ml-gold); }

/* Round chrome for the Flight Details aircraft + crew avatars,
   matching the iOS Flight Details sheet. */
.ml-aircraft-avatar,
.ml-crew-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--ml-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.autocomplete-wrap { position: relative; }
.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0;
    z-index: 1000;
    max-height: 220px;
    overflow-y: auto;
    display: none;
}
.autocomplete-results .ar-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    color: var(--fg);
}
.autocomplete-results .ar-item:hover,
.autocomplete-results .ar-item.active {
    background: var(--surface-2);
}
.autocomplete-results .ar-code {
    font-family: "SF Mono", Menlo, monospace;
    font-weight: 600;
    color: var(--ml-gold-dark);
}