/* CADDIE BOOK THEME
   ════════════════════════════════════════════════ */

/* Color tokens */
:root {
    --cb-cream:        #F4EFE4;
    --cb-paper:        #FDFAF5;
    --cb-forest:       #1E3D2F;
    --cb-forest-mid:   #2D5A40;
    --cb-forest-light: #3D7A55;
    --cb-charcoal:     #1C1C1A;
    --cb-ink:          #3A3A36;
    --cb-muted:        #6B6860;
    --cb-rule:         #D6CFBF;
    --cb-success:      #2D5A40;
    --cb-danger:       #8B2B20;

    /* Remap all legacy blue variables to forest green */
    --color-primary:       #3D7A55;
    --color-primary-dark:  #1E3D2F;
    --color-primary-light: #2D5A40;

    /* Unify all fonts to DM Sans */
    --font-display: 'DM Sans', sans-serif;
    --font-body:    'DM Sans', sans-serif;
    --font-accent:  'DM Sans', sans-serif;
}

/* Page background */
body { background: var(--cb-cream) !important; color: var(--cb-ink) !important; }

/* Sidebar — forest green */
.sidebar { background: var(--cb-forest) !important; }
.sidebar-header { border-bottom-color: rgba(255,255,255,0.08) !important; }
.app-title { color: var(--cb-cream) !important; font-family: 'DM Serif Display', Georgia, serif !important; letter-spacing: 0.06em !important; }

/* Inactive tabs at 0.88 opacity — legible but distinct from active */
.tab-button { color: rgba(244,239,228,0.88) !important; font-weight: 400 !important; }
.tab-button:hover { background: rgba(255,255,255,0.07) !important; color: var(--cb-cream) !important; }
.tab-button.active {
    background: var(--cb-forest-mid) !important;
    color: var(--cb-cream) !important;
    font-weight: 600 !important;
    border-left: 3px solid var(--cb-cream);
    padding-left: 13px !important;
}

/* Top header */
.top-header { background: var(--cb-paper) !important; border-bottom: 1px solid var(--cb-rule) !important; box-shadow: none !important; }
.page-title { color: var(--cb-charcoal) !important; font-family: 'DM Serif Display', Georgia, serif !important; letter-spacing: 0.04em !important; font-size: 1.2rem !important; font-weight: 400 !important; text-transform: none !important; }
#auth-status-pill { color: var(--cb-forest) !important; border-color: var(--cb-forest) !important; background: transparent !important; }
#auth-status-pill:hover { background: var(--cb-forest) !important; color: var(--cb-cream) !important; }

/* Cards */
.card { background: var(--cb-paper) !important; border-color: var(--cb-rule) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; color: var(--cb-ink) !important; }
.card-header { color: var(--cb-charcoal) !important; border-bottom-color: var(--cb-rule) !important; font-family: 'DM Serif Display', Georgia, serif !important; font-size: 1.05rem !important; font-weight: 400 !important; letter-spacing: 0.02em !important; text-transform: none !important; }

/* Dashboard stat cards */
.dash-stat-card { background: var(--cb-paper) !important; border: 1px solid var(--cb-rule) !important; box-shadow: none !important; }
.dash-stat-value { color: var(--cb-charcoal) !important; font-family: 'DM Serif Display', Georgia, serif !important; }
.dash-stat-label { color: var(--cb-muted) !important; }

/* Stat cards in Statistics tab */
.stat-card { background: var(--cb-forest) !important; border: none !important; box-shadow: none !important; }
.stat-value { color: var(--cb-cream) !important; }
.stat-label { color: rgba(244,239,228,0.7) !important; }

/* Buttons */
.btn { border-radius: 6px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; }
.btn::before { display: none !important; }

.btn-primary,
.card .btn-primary {
    background: var(--cb-forest) !important;
    border-color: var(--cb-forest) !important;
    color: var(--cb-cream) !important;
    box-shadow: none !important;
}
.btn-primary:hover, .card .btn-primary:hover { background: var(--cb-forest-mid) !important; }

.btn-secondary,
.card .btn-secondary {
    background: transparent !important;
    border: 1.5px solid var(--cb-rule) !important;
    color: var(--cb-ink) !important;
    box-shadow: none !important;
}
.btn-secondary:hover { background: var(--cb-rule) !important; }

.btn-danger, .card .btn-danger { background: var(--cb-danger) !important; border-color: var(--cb-danger) !important; color: #fff !important; box-shadow: none !important; }

/* Forms */
.form-input, .form-select, .search-input {
    background: var(--cb-paper) !important;
    border-color: var(--cb-rule) !important;
    color: var(--cb-ink) !important;
}
.form-input:focus, .form-select:focus, .search-input:focus {
    border-color: var(--cb-forest) !important;
    box-shadow: 0 0 0 3px rgba(30,61,47,0.12) !important;
}
.form-label { color: var(--cb-muted) !important; }

/* Search results */
.search-results { background: var(--cb-paper) !important; border-color: var(--cb-rule) !important; }
.search-result-item { background: var(--cb-paper) !important; border-bottom-color: var(--cb-rule) !important; }
.search-result-item:hover { background: var(--cb-cream) !important; }
.course-name { color: var(--cb-charcoal) !important; }
.course-location { color: var(--cb-muted) !important; }
.course-details { color: var(--cb-forest) !important; }

/* Scorecard / hole cards */
.hole-card { background: var(--cb-paper) !important; border-color: var(--cb-rule) !important; }
.hole-card.active { background: var(--cb-forest) !important; border-color: var(--cb-forest) !important; }
.hole-card.active .hole-number, .hole-card.active .hole-info { color: var(--cb-cream) !important; }
.hole-number { color: var(--cb-charcoal) !important; }
.hole-info { color: var(--cb-muted) !important; }
.scorecard-container, .scorecard-image { background: var(--cb-paper) !important; }

/* Score / tracking buttons inside cards */
.card .score-btn, .card .putt-btn, .card .fwy-btn, .card .gir-btn {
    background: var(--cb-cream) !important;
    border-color: var(--cb-rule) !important;
    color: var(--cb-ink) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
.card .score-btn:hover, .card .putt-btn:hover,
.card .fwy-btn:hover, .card .gir-btn:hover {
    border-color: var(--cb-forest) !important;
    color: var(--cb-forest) !important;
}
.card .score-btn.active, .card .putt-btn.active {
    background: var(--cb-forest) !important;
    border-color: var(--cb-forest) !important;
    color: var(--cb-cream) !important;
}
.card .fwy-btn.active, .card .gir-btn.active {
    background: var(--cb-forest) !important;
    border-color: var(--cb-forest) !important;
    color: var(--cb-cream) !important;
}

/* Mode toggle buttons */
.mode-toggle-btn, .card .mode-toggle-btn { background: var(--cb-cream) !important; border-color: var(--cb-rule) !important; color: var(--cb-ink) !important; box-shadow: none !important; }
.mode-toggle-btn.active, .card .mode-toggle-btn.active { background: var(--cb-forest) !important; border-color: var(--cb-forest) !important; color: var(--cb-cream) !important; box-shadow: none !important; }

/* Chart bars */
.chart-container { background: var(--cb-paper) !important; box-shadow: none !important; border: 1px solid var(--cb-rule) !important; }
.chart-title { color: var(--cb-charcoal) !important; font-family: 'DM Serif Display', Georgia, serif !important; font-weight: 400 !important; }
.chart-bar-track { background: var(--cb-cream) !important; }
.chart-bar-fill { background: var(--cb-forest) !important; }
.chart-bar-label { color: var(--cb-ink) !important; }

/* Profile / auth card */
.card-body input, .card-body select { background: var(--cb-cream) !important; border-color: var(--cb-rule) !important; color: var(--cb-ink) !important; }

/* End round danger zone */
#end-round-btn-bottom { background: var(--cb-danger) !important; }

/* ════════════════════════════════════════════════
   MOBILE BOTTOM NAV  (≤768px only)
   Sidebar hides on mobile; bottom nav appears.
   .tab-button elements stay in the DOM so all JS
   listeners keep working — bottom nav just mirrors.
   ════════════════════════════════════════════════ */

/* Hidden on desktop — only shown inside the @media block below */
.bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    /* Hide sidebar on mobile */
    .sidebar { display: none !important; }

    /* Main content fills full width */
    .main-content { margin-left: 0 !important; padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }

    /* Top header adapts */
    .top-header { padding: 12px 16px !important; }

    /* Container padding tighter */
    .container { padding: 12px 14px !important; }

    /* Cards */
    .card { padding: 16px !important; }

    /* Dashboard stat row: 2×2 on mobile */
    .dashboard-stats { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

    /* Bottom nav visible on mobile */
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 60px;
        background: var(--cb-forest);
        border-top: 1px solid rgba(255,255,255,0.1);
        z-index: 200;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .bottom-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: transparent;
        border: none;
        color: rgba(244,239,228,0.55);
        font-family: var(--font-body);
        font-size: 0.62rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        cursor: pointer;
        transition: color 0.15s;
        padding: 6px 0;
    }
    .bottom-nav-btn svg {
        width: 20px; height: 20px;
        stroke: currentColor;
        stroke-width: 1.6;
        fill: none;
    }
    .bottom-nav-btn.active { color: var(--cb-cream); }
    /* Hide hamburger on mobile — bottom nav handles navigation */
    #hamburger-btn, .sidebar-overlay { display: none !important; }
}

/* ════════════════════════════════════════════════
   STATS LAYOUT
   ════════════════════════════════════════════════ */
.stats-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}
.stats-main { display: flex; flex-direction: column; gap: 0; }
.stats-sidebar { position: sticky; top: 80px; }
@media (max-width: 1024px) {
    .stats-layout { grid-template-columns: 1fr; }
    .stats-sidebar { position: static; }
}

/* ════════════════════════════════════════════════
   STAT FILTER PILLS
   ════════════════════════════════════════════════ */
.stat-filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 0 4px;
}
.stat-filter-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--cb-rule);
    background: transparent;
    color: var(--cb-ink);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.stat-filter-btn.active {
    background: var(--cb-forest);
    color: var(--cb-cream);
    border-color: var(--cb-forest);
}
.stat-section { display: none; }
.stat-section.visible { display: block; }