/* ============================================================
   SportStats — "Midnight" dark theme
   ------------------------------------------------------------
   Loaded AFTER style.css so these component refinements win.
   The :root tokens are already merged into style.css; this file
   layers on the prototype-exact component treatments (coral
   gradient hero, filled buttons, ring/zone bars, modals, etc.).
   ============================================================ */

:root {
    /* Surfaces */
    --bg:            #0B0C0E;   /* app background           */
    --bg-card:       #141619;   /* cards, stat cards, charts */
    --bg-hover:      #1A1D21;
    --border:        #1F2227;
    --border-light:  #17191D;

    /* Accent — coral */
    --accent:        #FF5C38;
    --accent-light:  #FF8A3D;
    --accent-bg:     rgba(255, 92, 56, 0.12);

    /* Text */
    --text:          #F4F5F7;
    --text-secondary:#8B8F98;
    --text-dim:      #6A6E78;

    /* Status colors (tuned for dark bg) */
    --green:    #3DD68C;  --green-bg:  rgba(61, 214, 140, 0.12);
    --yellow:   #FFB020;  --yellow-bg: rgba(255, 176, 32, 0.12);
    --red:      #FF5C5C;  --red-bg:    rgba(255, 92, 92, 0.12);
    --blue:     #3B5BDB;  --blue-bg:   rgba(59, 91, 219, 0.12);

    /* Radii — slightly rounder than the original */
    --radius:    14px;
    --radius-lg: 22px;

    /* Shadows — soft, dark */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow:    0 4px 16px rgba(0,0,0,0.45);
    --shadow-lg: 0 24px 60px rgba(0,0,0,0.6);
}

/* ---- Typography -------------------------------------------- */
/* Space Grotesk gives the athletic, technical numerals.
   Keep tabular numerals for all stats/timers. */
body {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.stat-value,
.stat-card .stat-value,
#workout-duration,
.tnum,
.countdown,
.activity-item .stat {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ---- Header & nav ----------------------------------------- */
header {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}
h1 span { color: var(--accent); }

/* Compact icon links in the header (Inzichten, Upload/sync) —
   replaces the old top tab row now that the bottom bar is primary. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    color: var(--text-dim);
    border: none;
}
.header-icon svg { width: 21px; height: 21px; }
.header-icon:hover { color: var(--text); background: var(--bg-hover); }
.header-icon.active { color: var(--accent); background: var(--accent-bg); }
.nav-link.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.countdown {
    background: var(--accent-bg);
    color: var(--text-secondary);
}
.countdown strong { color: var(--accent); }

/* ---- Cards ------------------------------------------------- */
.card,
.stat-card,
.chart-container,
.exercise-card,
.upload-card,
.coaching-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: none;
}
.card:hover,
.exercise-card:hover {
    border-color: #2A2D33;
    box-shadow: var(--shadow);
}
.stat-card .stat-label,
.stat-card .stat-sub { color: var(--text-dim); }
.stat-card .stat-value { letter-spacing: -0.02em; }

/* ---- Buttons ---------------------------------------------- */
.btn {
    background: var(--accent);
    color: #0B0C0E;            /* dark text on coral reads best */
    font-weight: 700;
}
.btn:hover { background: var(--accent-light); }
.btn-ghost {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--accent-bg); border-color: var(--accent); }

/* ---- "Today" card ----------------------------------------- */
/* Toned down from the full coral gradient to a calm dark card with
   a coral accent edge — consistent with the insight cards. */
.today-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    color: var(--text);
}
.today-card.rest { border-left-color: var(--blue); }
.today-card .today-label { color: var(--accent); }

/* ---- Week / day cards ------------------------------------- */
.day-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.day-card.completed { border-left: 3px solid var(--accent); }
.day-card.rest      { border-left: 3px solid var(--blue); }
.day-card.missed    { border-left: 3px solid var(--red); }

/* ---- Activity / runs list --------------------------------- */
.activity-item { border-bottom: 1px solid var(--border); }
.activity-item:hover { background: var(--bg-hover); }
.activity-item .stat span { color: var(--text); }

/* ---- HR zone bars (dark track) ---------------------------- */
.hr-zone-bar .zone-bar { background: #22262C; }
.zone-fill.z1 { background: #3B5BDB; }
.zone-fill.z2 { background: var(--green); }
.zone-fill.z3 { background: var(--yellow); }
.zone-fill.z4 { background: var(--accent); }
.zone-fill.z5 { background: var(--red); }

/* ---- Insight / coaching cards ----------------------------- */
.insight-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left-width: 3px;
}
.insight-card.success { border-left-color: var(--green);  background: var(--bg-card); }
.insight-card.warning { border-left-color: var(--yellow); background: var(--bg-card); }
.insight-card.info    { border-left-color: var(--accent); background: var(--bg-card); }

/* ---- Workout logger --------------------------------------- */
.exercise-block { background: var(--bg-card); border: 1px solid var(--border); }
.exercise-block h3 { color: var(--accent); }
.set-table input { background: var(--bg); border: 1px solid var(--border); color: var(--text); }
.set-table input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(255,92,56,0.30);
    background: var(--bg-card);
}
.set-table .done-btn.checked { background: var(--green); border-color: var(--green); color: #0B0C0E; }
.set-row.set-done { background: rgba(61,214,140,0.12); }
.set-row.set-done td:first-child::before { background: var(--green); }
.set-table .pr-badge { background: var(--yellow); color: #0B0C0E; }
.workout-mini-fab { background: var(--accent); color: #0B0C0E; box-shadow: 0 4px 16px rgba(255,92,56,0.4); }
.mini-fab-pulse { background: var(--green); }

/* ---- Modals ----------------------------------------------- */
.modal { background: var(--bg-card); box-shadow: var(--shadow-lg); }
.modal-overlay { background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ---- Upload / drop zones ---------------------------------- */
.drop-zone { border: 2px dashed var(--border); color: var(--text-dim); }
.drop-zone:hover, .drop-zone.dragover { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }

/* ---- Skeleton loading ------------------------------------- */
.skeleton {
    background: linear-gradient(90deg, #141619 25%, #1C1F24 50%, #141619 75%);
    background-size: 200% 100%;
}

/* ---- Badges ----------------------------------------------- */
.badge.warning  { background: var(--yellow-bg); color: var(--yellow); }
.badge.critical { background: var(--red-bg);    color: var(--red); }
.badge.info     { background: var(--blue-bg);   color: var(--blue); }

/* ---- Mobile bottom tab bar -------------------------------- */
/* Fixed footer nav. Its <a> items reuse .nav-link + data-page,
   so the existing router (app.js navigate()) toggles .active for
   free. Scoped under .bottom-nav so the header nav's underline
   styling never leaks in. */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 12px 8px calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    border-top: 1px solid var(--border);
}
.bottom-nav .nav-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    border: none;          /* kill header nav's border-bottom */
    text-decoration: none;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.15s ease;
}
.bottom-nav .nav-link svg {
    width: 22px;
    height: 22px;
    display: block;
}
.bottom-nav .nav-link.active {
    color: var(--accent);
    border: none;
}
.bottom-nav .nav-link:hover { color: var(--text-secondary); }
.bottom-nav .nav-link.active:hover { color: var(--accent); }

/* Keep page content clear of the fixed bar */
main {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}