:root {
    --navy: #1e3a5f;
    --navy-dark: #14283f;
    --blue: #2563eb;
    --green: #16a34a;
    --red: #dc2626;
    --gray: #6b7280;
    --purple: #7c3aed;
    --bg: #f4f6f9;
    --border: #e2e8f0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: #1f2937;
}

.topbar {
    background: linear-gradient(90deg, var(--navy-dark), var(--navy));
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Stays visible on scroll — every page includes this same header.php,
       but without this it scrolls away with page content. On a page with
       more content than fits one screen (which is most of them once real
       data builds up), that reads as "this page doesn't have the nav bar"
       even though the markup is identical everywhere. */
    position: sticky;
    top: 0;
    z-index: 100;
}

.topbar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: inherit;
    text-decoration: none;
}

.topbar .brand:hover { opacity: 0.85; }

.topbar .brand-logo {
    height: 34px;
    width: 34px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    padding: 3px;
}

.topbar .brand small {
    display: block;
    font-weight: 400;
    font-size: 0.72rem;
    opacity: 0.75;
}

.topbar nav a {
    color: #dce6f5;
    text-decoration: none;
    margin-left: 20px;
    font-size: 0.92rem;
}

.topbar nav a:hover { color: #fff; text-decoration: underline; }

.nav-hamburger {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

/* Hamburger drawer below 900px — same pattern as awacp_website's _nav.php
   (hide the link row, reveal a toggle button) rather than letting 7 admin
   nav items wrap and get cramped on a narrow screen. */
@media (max-width: 900px) {
    .nav-hamburger { display: block; }
    .topbar nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--navy-dark);
        flex-direction: column;
        padding: 8px 24px 16px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.25);
    }
    .topbar nav.nav-open { display: flex; }
    .topbar nav a {
        margin-left: 0;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    /* .topbar already establishes the positioning context the dropdown's
       top:100% needs — it's position:sticky (set unconditionally above),
       and sticky elements anchor absolutely-positioned descendants exactly
       like relative does. Overriding it to relative here would have
       silently broken the sticky-on-scroll fix specifically on mobile —
       the one place it matters most. */
}

.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px;
}

h1.page-title {
    font-size: 1.4rem;
    color: var(--navy);
    margin: 0 0 4px;
}

.subtitle {
    color: var(--gray);
    margin: 0 0 20px;
    font-size: 0.9rem;
}

.kpi-row {
    display: grid;
    /* Fixed at 6 — there are always exactly 6 KPI tiles (hardcoded in
       dashboard.php, not a loop), so this isn't a magic number. Was
       auto-fit with a 150-200px floor/ceiling, which wrapped to a second
       line the moment 6 tiles couldn't each get their 150px minimum
       (reported 2026-08-05: "can we fit all these cards in one line").
       Fixed columns shrink together instead of wrapping — same one-row
       layout from wide desktop down to the 640px breakpoint below, which
       still switches to a wrapping/stacking layout for real mobile widths. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.kpi {
    border-radius: 8px;
    padding: 12px 14px;
    color: #fff;
}

.kpi .label {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

.kpi .value {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 3px 0;
}

.kpi .sub {
    font-size: 0.72rem;
    opacity: 0.8;
}

.kpi.navy { background: var(--navy); }
.kpi.blue { background: var(--blue); }
.kpi.green { background: var(--green); }
.kpi.red { background: var(--red); }
.kpi.gray { background: var(--gray); }
.kpi.purple { background: var(--purple); }

.panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.panel h3 {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: var(--navy);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Chart.js needs a container with a REAL, fixed CSS height to size itself
   against. Without this, a `responsive:true` chart with no maintainAspectRatio
   override has nothing stable to measure — canvas height ends up driven by
   content (bar count/thickness) instead of the panel, and with few data
   points (e.g. only 2 reps) bars balloon to fill whatever height that
   produces. Paired with `maintainAspectRatio: false` in dashboard.php's
   mkChart(), the canvas now always fills exactly this box. (Bug reported
   2026-08-05: Dashboard/Monthly Trends/By Rep charts rendering oversized;
   By Category happened to look fine only because its 2-column grid width
   coincidentally produced a sane height under the old aspect-ratio-based
   sizing — not because it was actually constrained.) */
.chart-wrap {
    position: relative;
    height: 260px;
}
.chart-wrap.tall {
    height: 340px;
}

@media (max-width: 900px) {
    .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    form.entry-form { grid-template-columns: 1fr; }
    .container { padding: 16px; }
    .kpi-row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

.filters {
    background: var(--navy);
    color: #fff;
    padding: 14px 16px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 20px;
}

.filters label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    opacity: 0.8;
}

.filters select, .filters input {
    padding: 6px 8px;
    border-radius: 4px;
    border: none;
    font-size: 0.85rem;
}

.btn {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 4px;
    border: none;
    background: var(--blue);
    color: #fff;
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: none;
}

.btn:hover { opacity: 0.9; }
.btn.secondary { background: var(--gray); }
.btn.small { padding: 4px 10px; font-size: 0.78rem; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

th, td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

th { color: var(--gray); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
}

.badge.expected { background: #dbeafe; color: #1d4ed8; }
.badge.released { background: #dcfce7; color: #15803d; }
.badge.cancelled { background: #fee2e2; color: #b91c1c; }

form.entry-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

form.entry-form .full { grid-column: 1 / -1; }

form.entry-form label {
    display: block;
    font-size: 0.78rem;
    color: var(--gray);
    margin-bottom: 4px;
}

form.entry-form input, form.entry-form select, form.entry-form textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.9rem;
}

.alert {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.88rem;
}

.alert.error { background: #fee2e2; color: #b91c1c; }
.alert.success { background: #dcfce7; color: #15803d; }

.login-wrap {
    max-width: 380px;
    margin: 80px auto;
    background: #fff;
    padding: 32px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
}

.tabs a {
    padding: 8px 14px;
    color: var(--gray);
    text-decoration: none;
    font-size: 0.88rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.tabs a.active {
    color: var(--navy);
    font-weight: 600;
    border-bottom-color: var(--blue);
}