/* ===========================================================================
   JRN EXPRESS — "HIGHWAY" THEME
   ---------------------------------------------------------------------------
   Direction: Indian road-freight signage. The vocabulary of the trunk routes
   this business actually runs on — asphalt-dark chrome, saturated signage
   blue, chrome-yellow lane markings, and tabular data set like a weighbridge
   printout.

   Signature element: THE LANE STRIPE. A chrome-yellow dashed lane marking
   that appears in exactly three places — the active sidebar item, under every
   section title, and as the page-load bar across the top. Everything else
   stays quiet so the stripe is the thing you remember.

   HOW THIS FILE WORKS
   This is an override layer loaded AFTER css/style.css. All layout plumbing
   (grids, breakpoints, widths) still lives in style.css and is untouched, so
   nothing can break structurally. To roll the whole look back, remove the one
   theme.css <link> line from includes/header.php.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Public+Sans:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;600&display=swap');

:root {
    /* --- Re-point the existing tokens. This single block restyles almost
           every page at once, because style.css already reads from them. --- */
    --ink-navy:     #111823;   /* asphalt — body text and dark chrome        */
    --route-blue:   #0B57D0;   /* signage blue — primary action             */
    --paper:        #EEF2F7;   /* kerb grey — page background               */
    --grey:         #5A6774;
    --line:         #D9E1EA;
    --stamp-amber:  #FFB703;   /* chrome yellow — the lane stripe            */
    --signal-green: #0E8A5F;
    --alert-red:    #D7263D;

    --font-display: 'Archivo', sans-serif;
    --font-body:    'Public Sans', sans-serif;
    --font-mono:    'Roboto Mono', monospace;

    /* --- New tokens this theme adds --- */
    --asphalt-1:  #111823;
    --asphalt-2:  #1A2331;
    --asphalt-3:  #26334A;
    --signal-lit: #3D82F5;
    --surface:    #FFFFFF;
    --radius:     14px;
    --radius-sm:  10px;

    --shadow-1: 0 1px 2px rgba(17,24,35,.06), 0 2px 8px rgba(17,24,35,.05);
    --shadow-2: 0 2px 4px rgba(17,24,35,.06), 0 12px 28px rgba(17,24,35,.10);
    --shadow-3: 0 4px 8px rgba(17,24,35,.08), 0 24px 48px rgba(17,24,35,.16);

    --ease: cubic-bezier(.22,.61,.36,1);
    --ease-out-back: cubic-bezier(.34,1.4,.64,1);
}

body {
    background:
        radial-gradient(1200px 500px at 80% -10%, rgba(11,87,208,.07), transparent 60%),
        var(--paper);
    letter-spacing: -0.006em;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, .section-title, .logo, .stat-number {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
}
.mono, td.mono, .tid, .num { font-variant-numeric: tabular-nums; }
table.admin-table td { font-variant-numeric: tabular-nums; }

/* THE LANE STRIPE — under every section title */
.section-title {
    position: relative;
    padding-bottom: 12px;
}
.section-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 64px; height: 3px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg,
        var(--stamp-amber) 0 12px, transparent 12px 20px);
    background-size: 20px 3px;
    animation: laneRun 1.1s linear infinite;
}
@keyframes laneRun { to { background-position: -20px 0; } }

/* ── Top-of-page lane bar ───────────────────────────────────────────────── */
body::before {
    content: "";
    position: fixed; inset: 0 0 auto 0;
    height: 3px; z-index: 999;
    background: linear-gradient(90deg, var(--route-blue) 0%, var(--stamp-amber) 50%, var(--signal-lit) 100%);
    transform-origin: left center;
    animation: laneLoad .9s var(--ease) both;
}
@keyframes laneLoad {
    from { transform: scaleX(0); opacity: 1; }
    to   { transform: scaleX(1); opacity: 0; }
}

/* ── Site header ────────────────────────────────────────────────────────── */
.site-header {
    background: linear-gradient(180deg, var(--asphalt-2), var(--asphalt-1));
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 16px 0;
}
.site-header nav a {
    border-radius: 999px;
    padding: 7px 13px;
    transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.site-header nav a:hover {
    background: rgba(255,255,255,.10);
    transform: translateY(-1px);
}
.logo { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; }

/* ── Admin / staff sidebar — asphalt with a lane-marked active item ─────── */
.admin-sidebar {
    background: linear-gradient(180deg, var(--asphalt-2) 0%, var(--asphalt-1) 100%);
    border-right: 1px solid rgba(255,255,255,.06);
    padding: 20px 12px;
}
.admin-nav-link,
.admin-nav-group summary {
    color: #C6D2E2;
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
    transition: background .22s var(--ease), color .22s var(--ease), padding-left .22s var(--ease);
}
/* Cascade the sidebar items in on load. The delay sits on the direct child of
   .admin-nav so it works for both plain links and collapsible groups. */
.admin-nav > * { animation: navIn .45s var(--ease) both; }
.admin-nav > *:nth-child(1) { animation-delay: .02s; }
.admin-nav > *:nth-child(2) { animation-delay: .06s; }
.admin-nav > *:nth-child(3) { animation-delay: .10s; }
.admin-nav > *:nth-child(4) { animation-delay: .14s; }
.admin-nav > *:nth-child(5) { animation-delay: .18s; }
.admin-nav > *:nth-child(6) { animation-delay: .22s; }
.admin-nav > *:nth-child(7) { animation-delay: .26s; }
.admin-nav > *:nth-child(8) { animation-delay: .30s; }
@keyframes navIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

.admin-nav-link:hover,
.admin-nav-group summary:hover {
    background: rgba(255,255,255,.07);
    color: #fff;
    padding-left: 15px;
}
.admin-nav-link .admin-nav-icon,
.admin-nav-group summary .admin-nav-icon { transition: transform .28s var(--ease-out-back); }
.admin-nav-link:hover .admin-nav-icon,
.admin-nav-group summary:hover .admin-nav-icon { transform: translateX(2px) scale(1.08); }

/* THE LANE STRIPE — active nav item */
.admin-nav-link.active {
    background: rgba(61,130,245,.16);
    color: #fff;
    font-weight: 600;
}
.admin-nav-link.active::before {
    content: "";
    position: absolute; left: 0; top: 6px; bottom: 6px;
    width: 3px; border-radius: 0 3px 3px 0;
    background: repeating-linear-gradient(180deg,
        var(--stamp-amber) 0 7px, transparent 7px 12px);
    background-size: 3px 12px;
    animation: laneRunV 1s linear infinite;
}
@keyframes laneRunV { to { background-position: 0 12px; } }

.admin-nav-sub {
    border-left: 1px dashed rgba(255,255,255,.16);
    animation: subOpen .28s var(--ease) both;
}
@keyframes subOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.admin-nav-sub a { color: #A9B8CC; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.admin-nav-sub a:hover { background: rgba(255,255,255,.06); color: #fff; transform: translateX(3px); }
.admin-nav-sub a.active { background: rgba(255,183,3,.14); color: var(--stamp-amber); font-weight: 600; }
.admin-nav-group .chevron { color: #7D8FA6; transition: transform .3s var(--ease-out-back); }
.admin-nav-logout { color: #FF8A93; border-top: 1px solid rgba(255,255,255,.10); }
.admin-nav-logout:hover { background: rgba(215,38,61,.18); color: #fff; }

/* ── Panels ─────────────────────────────────────────────────────────────── */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    position: relative;
    transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.panel:hover {
    box-shadow: var(--shadow-2);
    border-color: #C4D2E3;
    transform: translateY(-2px);
}

/* ── Buttons — signage blue with a lane sweep on hover ──────────────────── */
.btn {
    background: var(--route-blue);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 1px 2px rgba(11,87,208,.28), 0 6px 16px rgba(11,87,208,.20);
    transition: transform .18s var(--ease), box-shadow .24s var(--ease), background .24s var(--ease);
}
.btn::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.30) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .55s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(11,87,208,.28), 0 12px 26px rgba(11,87,208,.30); filter: none; }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:focus-visible { outline: 3px solid var(--stamp-amber); outline-offset: 2px; }
.btn.amber { background: var(--stamp-amber); color: var(--asphalt-1); box-shadow: 0 1px 2px rgba(255,183,3,.35), 0 6px 16px rgba(255,183,3,.28); }

/* ── Forms, dropdowns and click targets ─────────────────────────────────── */
.form-grid label { letter-spacing: .01em; color: var(--asphalt-3); }
.form-grid input,
.form-grid select,
.form-grid textarea,
.login-wrap input {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: #FBFCFE;
    font-family: var(--font-body);
    transition: border-color .2s var(--ease), box-shadow .24s var(--ease), background .2s var(--ease);
}
.form-grid input:hover,
.form-grid select:hover,
.form-grid textarea:hover { border-color: #B9C8DA; }
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.login-wrap input:focus {
    outline: none;
    background: #fff;
    border-color: var(--route-blue);
    box-shadow: 0 0 0 4px rgba(11,87,208,.14);
}

/* Custom dropdown chevron so selects match the rest of the UI */
.form-grid select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A6774' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}
.form-grid select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230B57D0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Checkboxes and radios pick up the theme colour */
input[type="checkbox"], input[type="radio"] { accent-color: var(--route-blue); cursor: pointer; }
label { cursor: pointer; }

/* Expand/collapse blocks open smoothly instead of snapping */
details > summary { cursor: pointer; transition: color .2s var(--ease); }
details[open] > summary ~ * { animation: subOpen .3s var(--ease) both; }

/* ── Tables — weighbridge printout ──────────────────────────────────────── */
table.admin-table { border-collapse: separate; border-spacing: 0; }
table.admin-table th {
    position: sticky; top: 0; z-index: 2;
    background: linear-gradient(180deg, #F7F9FC, #EEF2F7);
    color: var(--asphalt-3);
    border-bottom: 2px solid var(--line);
    font-family: var(--font-body);
    font-size: .72rem;
    letter-spacing: .08em;
    white-space: nowrap;
}
table.admin-table td { border-bottom: 1px solid #EDF1F6; }
table.admin-table tbody tr {
    transition: background .18s var(--ease), box-shadow .22s var(--ease);
    position: relative;
}
table.admin-table tbody tr:hover { background: rgba(11,87,208,.045); }
table.admin-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--stamp-amber); }
table.admin-table tbody tr { animation: rowIn .4s var(--ease) both; }
table.admin-table tbody tr:nth-child(1) { animation-delay: .02s; }
table.admin-table tbody tr:nth-child(2) { animation-delay: .04s; }
table.admin-table tbody tr:nth-child(3) { animation-delay: .06s; }
table.admin-table tbody tr:nth-child(4) { animation-delay: .08s; }
table.admin-table tbody tr:nth-child(5) { animation-delay: .10s; }
table.admin-table tbody tr:nth-child(6) { animation-delay: .12s; }
table.admin-table tbody tr:nth-child(n+7) { animation-delay: .14s; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert {
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-weight: 500;
    display: flex; align-items: flex-start; gap: 10px;
    animation: alertIn .4s var(--ease-out-back) both;
}
.alert::before { content: ""; width: 4px; align-self: stretch; border-radius: 3px; flex-shrink: 0; }
.alert.ok  { background: rgba(14,138,95,.08);  border-color: rgba(14,138,95,.22); }
.alert.ok::before  { background: var(--signal-green); }
.alert.err { background: rgba(215,38,61,.07); border-color: rgba(215,38,61,.22); }
.alert.err::before { background: var(--alert-red); }
@keyframes alertIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ── Dashboard cards ────────────────────────────────────────────────────── */
.profile-card {
    background: linear-gradient(135deg, var(--asphalt-2) 0%, var(--asphalt-1) 60%, #0C1220 100%);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}
.stat-card {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-1);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.stat-number { font-weight: 800; letter-spacing: -.03em; }

.service-card {
    border-radius: var(--radius);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); }

/* ── Login pages ────────────────────────────────────────────────────────── */
.login-page { background:
    radial-gradient(900px 480px at 15% 0%, rgba(11,87,208,.16), transparent 62%),
    radial-gradient(700px 420px at 100% 100%, rgba(255,183,3,.13), transparent 60%),
    var(--paper); }
.login-wrap { border-radius: 18px; box-shadow: var(--shadow-3); overflow: hidden; }
.login-wrap .btn { border-radius: var(--radius-sm); }

/* ── Scroll-reveal hooks used by assets/theme.js ────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: var(--asphalt-1); border-top: 3px solid var(--stamp-amber); }

/* ── Keyboard focus everywhere ──────────────────────────────────────────── */
a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
    outline: 3px solid var(--stamp-amber);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ── Print: strip the theme back to plain ink ───────────────────────────── */
@media print {
    body::before, .section-title::after { display: none !important; }
    .panel, .stat-card { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ── Respect reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ===========================================================================
   HEADER FIT — fix for the top bar wrapping onto two lines.
   The pill hover state added horizontal padding to every nav link, which
   pushed the row past the container width. Padding is trimmed and the old
   24px left margin is swapped for a flex gap, so the row takes roughly the
   same width it did before while keeping the pill.
   =========================================================================== */
.site-header .wrap {
    gap: 20px;
    flex-wrap: nowrap;
}
.logo {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 1.3rem;
    display: inline-flex;
    align-items: center;
}
.site-header nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 6px;
    min-width: 0;
}
.site-header nav a {
    margin-left: 0;
    padding: 7px 10px;
    font-size: 0.88rem;
    white-space: nowrap;
}
@media (max-width: 1120px) {
    .site-header nav a { padding: 6px 8px; font-size: 0.83rem; }
    .logo { font-size: 1.18rem; }
}