:root {
    --charcoal-950: #0b0b0c;
    --charcoal-900: #141416;
    --charcoal-800: #1c1c1f;
    --charcoal-700: #29292d;
    --gold-600: #e07a1f;
    --gold-500: #f2a93b;
    --gold-400: #f2c572;
    --amber-500: #c9660f;
    --amber-400: #f2934c;
    --surface: #141416;
    --surface-muted: #0b0b0c;
    --border: #2a2a2e;
    --text: #f5f3ef;
    --text-muted: #b7b5b0;
    --green-600: #2fae60;
    --green-50: rgba(47, 174, 96, 0.14);
    --red-600: #e5484d;
    --red-50: rgba(229, 72, 77, 0.14);
    --amber-text: #e3a22b;
    --amber-50: rgba(227, 162, 43, 0.14);
    --blue-600: #4a8fe0;
    --blue-50: rgba(74, 143, 224, 0.14);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    background: var(--surface-muted);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

p {
    margin: 0;
}

button {
    font-family: inherit;
}

summary {
    cursor: pointer;
    color: var(--gold-600);
    font-weight: 600;
}

/* ---------- Layout ---------- */

.app-shell {
    min-height: 100vh;
    display: flex;
}

.sidebar {
    display: none;
}

.main {
    flex: 1;
    min-width: 0;
    padding-bottom: 76px; /* space for mobile bottom nav */
}

.topbar {
    background: var(--charcoal-900);
    color: var(--text);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--border);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.topbar-brand .mark {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--gold-500), var(--amber-500));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--charcoal-950);
    flex-shrink: 0;
}

.topbar-brand .station-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-brand .company-name {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.logout-btn {
    background: transparent;
    border: 1px solid var(--charcoal-700);
    color: var(--text);
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
}

.logout-btn:hover {
    background: var(--charcoal-800);
}

.content {
    padding: 16px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ---------- Bottom nav (mobile) ---------- */

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    z-index: 30;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav a {
    flex: 1;
    text-align: center;
    padding: 9px 4px 8px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.bottom-nav a.active {
    color: var(--gold-600);
}

.bottom-nav .icon {
    display: block;
    font-size: 18px;
    margin-bottom: 2px;
}

@media (min-width: 900px) {
    .bottom-nav {
        display: none;
    }

    .sidebar {
        display: flex;
        flex-direction: column;
        width: 240px;
        flex-shrink: 0;
        background: var(--charcoal-950);
        color: var(--text);
        min-height: 100vh;
        position: sticky;
        top: 0;
        border-right: 1px solid var(--border);
    }

    .sidebar-brand {
        padding: 20px 18px;
        border-bottom: 1px solid var(--charcoal-800);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .sidebar-brand .mark {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        background: linear-gradient(135deg, var(--gold-500), var(--amber-500));
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        color: var(--charcoal-950);
        flex-shrink: 0;
    }

    .sidebar-brand .company-name {
        font-size: 11px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .sidebar-brand .station-name {
        font-weight: 600;
        font-size: 14px;
    }

    .sidebar nav {
        padding: 12px 10px;
        flex: 1;
    }

    .sidebar nav a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 10px;
        border-radius: var(--radius-sm);
        color: var(--text-muted);
        text-decoration: none;
        font-size: 13.5px;
        font-weight: 500;
        margin-bottom: 2px;
    }

    .sidebar nav a:hover {
        background: var(--charcoal-800);
        color: var(--text);
    }

    .sidebar nav a.active {
        background: var(--charcoal-800);
        color: var(--gold-500);
    }

    .sidebar .sidebar-footer {
        padding: 14px 18px;
        border-top: 1px solid var(--charcoal-800);
        font-size: 12px;
        color: var(--text-muted);
    }

    .topbar {
        display: none;
    }

    .main {
        padding-bottom: 0;
    }

    .content {
        padding: 28px 32px;
    }
}

/* ---------- Cards & grid ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

@media (min-width: 640px) {
    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 640px) {
    .card-grid.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px;
}

.stat-card .label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.stat-card .value {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.stat-card .sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.stat-card.positive .value { color: var(--green-600); }
.stat-card.negative .value { color: var(--red-600); }
.stat-card.warning .value { color: var(--amber-text); }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    min-height: 44px;
}

.btn-primary {
    background: linear-gradient(180deg, var(--gold-500), var(--amber-500));
    color: var(--charcoal-950);
}

.btn-primary:hover {
    filter: brightness(1.06);
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold-500), var(--amber-500));
    color: var(--charcoal-950);
}

.btn-gold:hover {
    filter: brightness(1.06);
}

.btn-outline {
    background: var(--charcoal-800);
    border-color: var(--border);
    color: var(--text);
}

.btn-outline:hover {
    background: var(--charcoal-700);
}

.btn-danger {
    background: transparent;
    border: 1.5px solid rgba(229, 72, 77, 0.4);
    color: var(--red-600);
}

.btn-danger:hover {
    background: var(--red-50);
}

.btn-block {
    width: 100%;
}

.btn-sm {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 13px;
    border-radius: var(--radius-sm);
}

.btn[disabled] {
    opacity: 0.45;
    pointer-events: none;
}

.btn.is-loading {
    opacity: 0.85;
    cursor: wait;
}

.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
    opacity: 0.85;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Forms ----------
   Base styling applies to every bare input/select/textarea, not just ones
   wrapped in .field — several views (attendant workspace, truck add form,
   settings add-forms) build compact inline rows without the .field
   wrapper, and without this they'd fall back to the browser's light-mode
   default (white box, black text) against the dark page. */

input[type="text"], input[type="number"], input[type="date"], input[type="password"],
input[type="tel"], input[type="email"], input[type="search"], input[type="time"],
input[type="datetime-local"], input:not([type]), select, textarea {
    background: var(--charcoal-800);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 10px 12px;
    font-size: 15px;
    font-family: inherit;
    color-scheme: dark;
}

input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus,
input[type="password"]:focus, input[type="tel"]:focus, input[type="email"]:focus,
input[type="search"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus,
input:not([type]):focus, select:focus, textarea:focus {
    outline: 2px solid var(--gold-500);
    outline-offset: 1px;
    border-color: var(--gold-500);
}

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
}

.field input, .field select, .field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 15px;
    background: var(--charcoal-800);
    color: var(--text);
}

.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--gold-500);
    outline-offset: 1px;
    border-color: var(--gold-500);
}

.field-error {
    display: block;
    color: var(--red-600);
    font-size: 12px;
    margin-top: 4px;
}

/* ---------- Badges ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.badge-green { background: var(--green-50); color: var(--green-600); }
.badge-red { background: var(--red-50); color: var(--red-600); }
.badge-amber { background: var(--amber-50); color: var(--amber-text); }
.badge-blue { background: var(--blue-50); color: var(--blue-600); }
.badge-neutral { background: var(--charcoal-800); color: var(--text-muted); }

/* ---------- Semantic colors ----------
   One meaning per color, used consistently everywhere: green = good/
   balanced/cleared, red = bad/short/negative, amber = needs attention/
   pending, blue = notable-but-neutral (e.g. over-remittance — not an
   error, just worth noticing). Use these utility classes instead of a
   one-off inline `style="color:var(--red-600)"` so the meaning stays
   centralized and easy to re-theme. */

.text-positive { color: var(--green-600); }
.text-negative { color: var(--red-600); }
.text-warning { color: var(--amber-text); }
.text-info { color: var(--blue-600); }
.text-muted { color: var(--text-muted); }

/* ---------- Alerts ---------- */

.alert {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 14px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.alert-error { background: var(--red-50); color: var(--red-600); border-color: rgba(229, 72, 77, 0.3); }
.alert-success { background: var(--green-50); color: var(--green-600); border-color: rgba(47, 174, 96, 0.3); }
.alert-warning { background: var(--amber-50); color: var(--amber-text); border-color: rgba(227, 162, 43, 0.3); }

/* ---------- Empty state ---------- */

.empty-state {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-muted);
}

.empty-state .icon {
    font-size: 32px;
    margin-bottom: 10px;
}

/* ---------- Page header ---------- */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.page-header h1 {
    font-size: 19px;
}

.page-header .subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ---------- Date field (page-header date pickers) ---------- */

.date-field-form {
    display: inline-flex;
}

.date-field {
    -webkit-appearance: none;
    appearance: none;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--charcoal-800);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color-scheme: dark;
}

.date-field:focus {
    outline: 2px solid var(--gold-500);
    outline-offset: 1px;
    border-color: var(--gold-500);
}

.date-field::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.75;
    padding: 2px;
    margin-left: 4px;
    filter: invert(1);
}

.date-field::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ---------- Section title ---------- */

.section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin: 24px 0 10px;
}

/* ---------- Progress bar (truck consumption, stock gauges) ---------- */

.progress {
    height: 8px;
    border-radius: 999px;
    background: var(--charcoal-800);
    overflow: hidden;
}

.progress > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold-500), var(--amber-500));
}

.progress.danger > span {
    background: linear-gradient(90deg, #e5484d, #b93337);
}

/* ---------- Outstanding banner (single prominent figure) ---------- */

.banner-outstanding {
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    background: linear-gradient(135deg, var(--gold-500), var(--amber-500));
    color: var(--charcoal-950);
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}

.banner-outstanding::after {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
}

.banner-outstanding .label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(11, 11, 12, 0.7);
    position: relative;
}

.banner-outstanding .value {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-top: 4px;
    position: relative;
}

/* ---------- Tab bar (reports/settings sub-nav) ---------- */

.tabbar {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    margin-bottom: 16px;
}

.tabbar .tab {
    flex: 0 0 auto;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.tabbar .tab.active {
    background: linear-gradient(135deg, var(--gold-500), var(--amber-500));
    color: var(--charcoal-950);
    border-color: transparent;
}

/* ---------- Chip (nozzle/product pills) ---------- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--charcoal-800);
    color: var(--text);
}

/* ---------- Login ---------- */

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top, var(--charcoal-800), var(--charcoal-950));
    padding: 20px;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    box-shadow: var(--shadow-md);
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 24px;
}

.auth-brand .mark {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--gold-500), var(--amber-500));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    color: var(--charcoal-950);
    margin-bottom: 12px;
}

.auth-brand .company-name {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.auth-brand h1 {
    font-size: 17px;
    margin-top: 4px;
}

/* ---------- Page-transition skeleton ----------
   This app is server-rendered (full page reloads, no client-side data
   fetching) — there's no "content loading into an already-painted shell"
   moment to skeleton the way a SPA would. The one genuinely tangible use
   here is the navigation gap itself: the moment between clicking a link
   (or submitting a GET filter/date form) and the next full page arriving,
   during which the browser currently just sits on the frozen previous
   page. This overlay fills that gap with an immediate, generic loading
   shape instead of a dead screen. Triggered from layouts/app.php; never
   shown for POST forms, which already have their own button-spinner
   feedback (see .btn.is-loading) — showing both would be redundant. */

.skeleton-overlay {
    display: none;
    position: fixed;
    /* Covers only the content area — the persistent topbar (z-index 20)
       and bottom-nav (z-index 30) stay visible and in place during a
       transition, matching .main's own top/bottom nav-clearance padding.
       Hiding them too would make a brief transition read as the whole
       app flashing rather than just its content reloading. */
    top: 66px;
    bottom: 64px;
    left: 0;
    right: 0;
    z-index: 15;
    background: var(--surface-muted);
    padding: 16px;
    overflow: hidden;
}

.skeleton-overlay.is-active {
    display: block;
}

@media (min-width: 900px) {
    .skeleton-overlay {
        top: 0;
        bottom: 0;
        left: 240px;
        padding: 28px 32px;
    }
}

.skeleton-block {
    background: linear-gradient(100deg, var(--charcoal-800) 30%, #29292d 50%, var(--charcoal-800) 70%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.3s ease-in-out infinite;
    border-radius: var(--radius-md);
}

.skeleton-header {
    height: 22px;
    width: 45%;
    margin-bottom: 10px;
}

.skeleton-subheader {
    height: 13px;
    width: 30%;
    margin-bottom: 24px;
}

.skeleton-card {
    height: 84px;
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-block {
        animation: none;
    }
}