/* =============================================
   DARK MODE — drop this after main.css
   ============================================= */

/* ---------- CSS variables (light defaults) ---------- */
:root {
    --bg-body:        #ffffff;
    --bg-card:        #ffffff;
    --bg-navbar:      #343a40;   /* Bootstrap dark default */
    --bg-table-hover: rgba(0,0,0,.075);
    --bg-modal:       #ffffff;
    --bg-accordion:   #ffffff;
    --bg-input:       #ffffff;
    --bg-dropdown:    #ffffff;

    --text-primary:   #212529;
    --text-muted:     #6c757d;
    --text-th:        #212529;

    --border-color:   lightgrey;
    --border-table:   #dee2e6;

    /* status colours — keep accessible in both modes */
    --color-no-good:  #d7191c;
    --color-full-time:#2c7bb6;
    --color-part-time:#4dac26;
    --color-today:    lightblue;
    --color-left:     lightblue;
}

body {
    background-color: var(--bg-body);
    color:            var(--text-primary);
}

/* ---------- Dark theme overrides ---------- */
body.dark-mode {
    --bg-body:        #121212;
    --bg-card:        #1e1e1e;
    --bg-navbar:      #1a1a2e;
    --bg-table-hover: rgba(255,255,255,.07);
    --bg-modal:       #1e1e1e;
    --bg-accordion:   #1e1e1e;
    --bg-input:       #2a2a2a;
    --bg-dropdown:    #2a2a2a;

    --text-primary:   #e0e0e0;
    --text-muted:     #9e9e9e;
    --text-th:        #e0e0e0;

    --border-color:   #3a3a3a;
    --border-table:   #3a3a3a;

    /* slightly muted status colours for dark backgrounds */
    --color-no-good:  #c0392b;
    --color-full-time:#1a6fa8;
    --color-part-time:#3a8c1d;
    --color-today:    #1a3a5c;
    --color-left:     #1a3a5c;
}

/* ---------- Apply variables to elements ---------- */

/* Body & base */
body.dark-mode {
    background-color: var(--bg-body);
    color:            var(--text-primary);
}

/* Bootstrap cards / panels */
body.dark-mode .card,
body.dark-mode .card-body {
    background-color: var(--bg-card);
    color:            var(--text-primary);
    border-color:     var(--border-color);
}

/* Navbar */
body.dark-mode .navbar {
    background-color: var(--bg-navbar) !important;
}
body.dark-mode .navbar-brand,
body.dark-mode .nav-link,
body.dark-mode .navbar-text {
    color: #d0d0d0 !important;
}
body.dark-mode .nav-link:hover {
    color: #ffffff !important;
}

/* Tables */
body.dark-mode .table {
    color:        var(--text-primary);
    border-color: var(--border-table);
}
body.dark-mode .table thead th,
body.dark-mode .table th {
    color:            var(--text-th);
    border-color:     var(--border-table);
    background-color: #252525;
}
body.dark-mode .table td {
    border-color: var(--border-table);
}
body.dark-mode .table-hover tbody tr:hover {
    background-color: var(--bg-table-hover);
    color:            var(--text-primary);
}
body.dark-mode .table-striped tbody tr:nth-of-type(odd),
body.dark-mode .table-zebra tbody tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,.04);
}

/* Status colour cells — re-map to variables */
body.dark-mode td.no-good,
body.dark-mode td.red  { background-color: var(--color-no-good); }
body.dark-mode td.full-time,
body.dark-mode td.green { background-color: var(--color-full-time); }
body.dark-mode td.part-time,
body.dark-mode td.yellow { background-color: var(--color-part-time); }
body.dark-mode td.calendar-today { background-color: var(--color-today); color: var(--text-primary); }
body.dark-mode tr.player-left td  { background-color: var(--color-left); }

/* Calendar cells */
body.dark-mode td.day {
    border-left-color:   var(--border-color);
    border-right-color:  var(--border-color);
    border-bottom-color: var(--border-color);
}
body.dark-mode td.callbl {
    border-color: var(--border-color);
}

/* Modals */
body.dark-mode .modal-content {
    background-color: var(--bg-modal);
    color:            var(--text-primary);
    border-color:     var(--border-color);
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: var(--border-color);
}
body.dark-mode .close {
    color: var(--text-primary);
}

/* Accordion */
body.dark-mode .accordion .card,
body.dark-mode .accordion .card-header {
    background-color: var(--bg-accordion);
    border-color:     var(--border-color);
}
body.dark-mode .accordion .card-header button {
    color: var(--text-primary);
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
    background-color: var(--bg-dropdown);
    border-color:     var(--border-color);
}
body.dark-mode .dropdown-item {
    color: var(--text-primary);
}
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #3a3a3a;
    color:            #ffffff;
}
body.dark-mode .dropdown-divider {
    border-color: var(--border-color);
}

/* Forms / inputs */
body.dark-mode .form-control {
    background-color: var(--bg-input);
    color:            var(--text-primary);
    border-color:     var(--border-color);
}
body.dark-mode .form-control:focus {
    background-color: var(--bg-input);
    color:            var(--text-primary);
    border-color:     #5a9fd4;
    box-shadow:       0 0 0 .2rem rgba(90,159,212,.25);
}
body.dark-mode .form-text {
    color: var(--text-muted);
}

/* Buttons — keep Bootstrap's own colours, just tweak secondary */
body.dark-mode .btn-secondary {
    background-color: #3a3a3a;
    border-color:     #555;
    color:            #e0e0e0;
}
body.dark-mode .btn-secondary:hover {
    background-color: #4a4a4a;
}

/* Alerts */
body.dark-mode .alert-info {
    background-color: #1a3a5c;
    border-color:     #1a4a7c;
    color:            #90caf9;
}

/* Nav pills */
body.dark-mode .nav-pills .nav-link {
    color: var(--text-primary);
}
body.dark-mode .nav-pills .nav-link.active {
    background-color: #1a6fa8;
}

/* List group */
body.dark-mode .list-group-item {
    background-color: var(--bg-card);
    color:            var(--text-primary);
    border-color:     var(--border-color);
}

/* Collapse / card body inside accordion */
body.dark-mode .collapse .card-body,
body.dark-mode .collapsing .card-body {
    background-color: #181818;
}

/* Text helpers */
body.dark-mode .text-muted { color: var(--text-muted) !important; }

/* Spinner overlay — keep transparent but darken slightly */
body.dark-mode .spinner {
    background: rgba(0,0,0,.55);
}

/* Search highlight — swap yellow for a visible dark-mode colour */
body.dark-mode span.highlight {
    background-color: #b5860d;
    color: #fff;
}

/* Rolling month links — already white on coloured cell, fine */

/* =============================================
   Toggle button — floats in the navbar
   ============================================= */
#dark-mode-toggle {
    cursor:        pointer;
    font-size:     1.1rem;
    background:    none;
    border:        none;
    padding:       0 .5rem;
    line-height:   1;
    color:         #adb5bd;
    transition:    color .2s;
}
#dark-mode-toggle:hover { color: #ffffff; }

/* =============================================
   DARK MODE — RESPONSIVE OVERRIDES
   ============================================= */

/* Tablet */
@media (max-width: 768px) {
    body.dark-mode .navbar {
        padding: .5rem;
    }

    body.dark-mode .modal-content {
        margin: .5rem;
    }

    body.dark-mode .modal-dialog {
        margin: .5rem auto;
        max-width: calc(100% - 1rem);
    }

    body.dark-mode .dropdown-menu {
        width: 100%;
    }

    body.dark-mode .accordion .card-header button {
        font-size: .9em;
        white-space: normal;
        text-align: left;
    }
}

/* Mobile */
@media (max-width: 576px) {
    body.dark-mode .card,
    body.dark-mode .card-body {
        padding: .75rem;
    }

    body.dark-mode .form-control {
        font-size: 16px; /* prevents iOS auto-zoom on input focus */
    }

    body.dark-mode .btn {
        font-size: .85em;
    }

    body.dark-mode .table thead th,
    body.dark-mode .table th,
    body.dark-mode .table td {
        padding: .3rem .4rem;
        font-size: .8em;
    }

    #dark-mode-toggle {
        font-size: .95rem;
        padding: 0 .3rem;
    }
}