/* 1. GLOBAL LAYOUT */
html, body {
    height: 100vh; /* Strictly 100vh instead of 100% */
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevents the entire browser window from scrolling */
}

/* The main flex wrapper to put Sidebar & Content side-by-side */
.wrapper {
    display: flex;
    width: 100%;
    height: 100vh; /* Lock wrapper to the viewport */
    align-items: stretch;
    min-height: 100vh;
}

/* 2. SIDEBAR STYLING */
#sidebar {
    min-width: 250px;
    max-width: 250px;
    height: 100vh; /* Lock sidebar height */
    overflow-y: auto; /* Allow sidebar to scroll independently if menu gets too long */
    background: #ffffff; /* White background */
    color: #212529; /* Dark text */
    border-right: 1px solid #dee2e6; /* faint border to separate from content */
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
}

    /* Light Mode Links */
    #sidebar .nav-link {
        padding: 15px 10px;
        font-size: 1.1em;
        display: block;
        color: #495057; /* Dark gray text */
        border-radius: 0;
    }

        #sidebar .nav-link:hover {
            color: #0d6efd; /* Blue text on hover */
            background: #f8f9fa; /* Very light gray background */
        }

        #sidebar .nav-link.active {
            color: #fff;
            background: #0d6efd; /* Blue Active state */
        }

/*------------------------------------*/

body.dark-mode .navbar {
    background-color: #212529 !important; /* Bootstrap bg-dark */
    border-bottom: 1px solid #444;
}

    /* Fix navbar text/icons in dark mode */
    body.dark-mode .navbar .nav-link,
    body.dark-mode .navbar .navbar-brand,
    body.dark-mode .navbar .btn-outline-secondary,
    body.dark-mode .navbar i {
        color: #f8f9fa !important; /* Bootstrap text-light */
        border-color: #6c757d;
    }

/* Optional: Fix dropdown menus in dark mode */
body.dark-mode .dropdown-menu {
    background-color: #343a40;
    border-color: #454d55;
}

body.dark-mode .dropdown-item {
    color: #fff;
}

    body.dark-mode .dropdown-item:hover {
        background-color: #495057;
    }

/*------------------------------------*/

/* --- Dark Mode Overrides (When body has .dark-mode) --- */
body.dark-mode #sidebar {
    background: #212529; /* Dark background */
    color: #fff;
    border-right: 1px solid #454d55;
}

    body.dark-mode #sidebar .nav-link {
        color: #c2c7d0; /* Light gray text */
    }

        body.dark-mode #sidebar .nav-link:hover {
            color: #fff;
            background: #343a40; /* Dark gray hover */
        }

/* Sidebar Header Borders */
#sidebar .sidebar-header {
    border-bottom: 1px solid #dee2e6; /* Light mode border */
}

body.dark-mode #sidebar .sidebar-header {
    border-bottom: 1px solid #4b545c; /* Dark mode border */
}

/* --- Collapsed State Logic (Shared) --- */
#sidebar.active {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}

    #sidebar.active .sidebar-text,
    #sidebar.active .sidebar-header h3 span {
        display: none;
    }

#sidebar i {
    font-size: 1.4rem;
    margin-right: 10px;
    vertical-align: middle;
}

#sidebar.active i {
    margin-right: 0;
    display: block;
    margin-bottom: 5px;
}

/* 3. MAIN CONTENT AREA */
#content {
    width: 100%;
    height: 100vh; /* Lock content height */
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
    overflow-y: auto; /* THIS is what allows the page content to scroll! */
    overflow-x: hidden;
}

/* Top Navbar (inside content) */
.top-navbar {
    padding: 10px 20px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16);
    flex-shrink: 0; /* Prevent navbar from shrinking */

    /* Make the navbar sticky so it doesn't scroll away */
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: #ffffff; /* Must have a background to hide scrolling text underneath */
}

/* 4. THEME MODES */
/* Light Mode (Default) */
body {
    background-color: #f4f6f9;
    color: #212529;
}

    /* Dark Mode Overrides */
    body.dark-mode {
        background-color: #343a40;
        color: #e1e1e1;
    }

        body.dark-mode .top-navbar {
            background-color: #454d55 !important;
            border-bottom: 1px solid #5d666e;
        }

        body.dark-mode .card {
            background-color: #454d55;
            border-color: #5d666e;
            color: white;
        }

        body.dark-mode .table {
            color: #e1e1e1;
        }

/* 5. FULL SCREEN MAP HELPER */
/* Use this class on the page that contains the map */
.map-page-container {
    flex-grow: 1; /* Fills all remaining vertical space */
    position: relative;
    padding: 0; /* No padding for full edge-to-edge map */
}

#map {
    height: 100%;
    width: 100%;
}


/* 6. CUSTOM COMPONENTS (USERS & TRAINING PANELS) */

.panel-header {
    background-color: #0f4c75;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 1.2rem;
    border-radius: 4px 4px 0 0;
}

.panel-border {
    border: 2px solid #0f4c75;
    border-top: none;
    padding: 15px;
    background-color: white;
    min-height: 600px;
}

.user-list-item {
    cursor: pointer;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    color: inherit;
}

    .user-list-item:hover {
        background-color: #f8f9fa;
    }

.active-user {
    background-color: #00ff00 !important;
    font-weight: bold;
    color: #000 !important; /* Ensure text is visible against bright green */
}

.map-placeholder {
    background-color: #1b4f72;
    color: white;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.station-box {
    background-color: #d6e4ea;
    padding: 15px;
    margin-top: 20px;
    border: 2px solid #0f4c75;
}

.station-label {
    font-weight: bold;
    width: 60px;
    display: inline-block;
}

/* --- Custom Components Dark Mode Overrides --- */

body.dark-mode .panel-header {
    background-color: #2b3035;
    border: 1px solid #5d666e;
    border-bottom: none;
}

body.dark-mode .panel-border {
    background-color: #454d55;
    border-color: #5d666e;
    color: #e1e1e1;
}

body.dark-mode .user-list-item {
    border-bottom: 1px solid #5d666e;
}

    body.dark-mode .user-list-item:hover {
        background-color: #535c64;
    }

body.dark-mode .active-user {
    background-color: #198754 !important;
    color: #ffffff !important;
}

body.dark-mode .map-placeholder {
    background-color: #2c3136;
    border: 1px dashed #5d666e;
    color: #adb5bd;
}

body.dark-mode .station-box {
    background-color: #343a40;
    border-color: #5d666e;
    color: #e1e1e1;
}


/* ========================================================
   7. BOOTSTRAP DARK MODE OVERRIDES
   Forces Bootstrap utility classes and components to obey dark mode
   ======================================================== */

/* Override hardcoded background & text utilities */
body.dark-mode .bg-white,
body.dark-mode .bg-light {
    background-color: #343a40 !important;
    color: #e1e1e1 !important;
}

body.dark-mode .text-dark {
    color: #e1e1e1 !important;
}

body.dark-mode .border-bottom {
    border-bottom-color: #5d666e !important;
}

/* --- Modals --- */
body.dark-mode .modal-content {
    background-color: #343a40;
    color: #e1e1e1;
    border-color: #5d666e;
}

body.dark-mode .modal-header {
    border-bottom-color: #5d666e;
}

body.dark-mode .modal-footer {
    border-top-color: #5d666e;
}

/* --- List Groups --- */
body.dark-mode .list-group-item {
    background-color: #343a40;
    color: #e1e1e1;
    border-color: #5d666e;
}

    body.dark-mode .list-group-item:hover {
        background-color: #454d55;
    }

    /* Adjust the opacity backgrounds used for Mutual/Heard statuses */
    body.dark-mode .list-group-item.bg-info.bg-opacity-10 {
        background-color: rgba(13, 202, 240, 0.15) !important;
        color: #e1e1e1;
    }

    body.dark-mode .list-group-item.bg-success.bg-opacity-10 {
        background-color: rgba(25, 135, 84, 0.15) !important;
        color: #e1e1e1;
    }

/* --- Forms & Inputs --- */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text {
    background-color: #454d55;
    color: #fff;
    border-color: #5d666e;
}

    body.dark-mode .form-control:focus,
    body.dark-mode .form-select:focus {
        background-color: #454d55;
        color: #fff;
        border-color: #0d6efd; /* Keep the blue focus ring */
    }

/* --- Nav Tabs --- */
body.dark-mode .nav-tabs {
    border-bottom-color: #5d666e;
}

    body.dark-mode .nav-tabs .nav-link {
        background-color: #343a40;
        color: #adb5bd;
        border-color: transparent;
    }

        body.dark-mode .nav-tabs .nav-link:hover {
            border-color: #454d55 #454d55 #5d666e;
        }

        body.dark-mode .nav-tabs .nav-link.active {
            background-color: #454d55;
            color: #fff;
            border-color: #5d666e #5d666e #454d55;
        }

/* --- Nav Pills (Used in your Sub-Tabs) --- */
body.dark-mode .nav-pills .nav-link:not(.active) {
    background-color: #454d55 !important;
    color: #adb5bd !important;
    border-color: #5d666e !important;
}

/* Card Footers */
body.dark-mode .card-footer {
    background-color: #2b3035;
    border-top-color: #5d666e;
}

/* ========================================================
   8. DARK MODE CONTRAST FIXES (Buttons & Text)
   ======================================================== */

/* Fix the stark white Action buttons (.btn-light) */
body.dark-mode .btn-light {
    background-color: #454d55 !important;
    border-color: #5d666e !important;
    color: #e1e1e1 !important;
}

    body.dark-mode .btn-light:hover {
        background-color: #535c64 !important;
    }

    /* Make the icons inside those buttons pop better in dark mode */
    body.dark-mode .btn-light.text-primary {
        color: #6ea8fe !important; /* Bootstrap's dark-mode friendly blue */
    }

    body.dark-mode .btn-light.text-danger {
        color: #ea868f !important; /* Bootstrap's dark-mode friendly red */
    }

/* Fix unreadable dark text (.text-muted) used for emails and labels */
body.dark-mode .text-muted {
    color: #adb5bd !important; /* Lighter gray for readability */
}

/* Adjust the opacity-50 utility so "No stations linked" isn't completely washed out */
body.dark-mode .opacity-50 {
    opacity: 0.75 !important;
}

/* ========================================================
   9. DARK MODE CONTRAST FIXES (Training Cards & Buttons)
   ======================================================== */

/* Soften the bright blue primary text to a dark-mode friendly pastel blue */
body.dark-mode .text-primary {
    color: #6ea8fe !important;
}

/* Fix the dark green outline button so it is bright and readable */
body.dark-mode .btn-outline-success {
    color: #75b798 !important; /* Lighter, pastel green */
    border-color: #75b798 !important;
}

    body.dark-mode .btn-outline-success:hover {
        color: #ffffff !important;
        background-color: #198754 !important; /* Standard success green on hover */
        border-color: #198754 !important;
    }

/* Optional: Soften the 'text-info' blue under the main Lobby header */
body.dark-mode .text-info {
    color: #6edff6 !important;
}

/* ========================================================
   10. DARK MODE CONTRAST FIXES (Tables)
   ======================================================== */

/* Force table cells to match the dark card background */
body.dark-mode .table th,
body.dark-mode .table td,
body.dark-mode .table thead th {
    background-color: #454d55 !important; /* Matches your dark card background */
    border-color: #5d666e !important;
    color: #e1e1e1 !important;
}

/* If you use table-striped, add a subtle dark stripe */
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td,
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* If you use table-hover, add a dark hover state */
body.dark-mode .table-hover > tbody > tr:hover > td,
body.dark-mode .table-hover > tbody > tr:hover > th {
    background-color: #535c64 !important;
}

/* ========================================================
   11. DARK MODE CONTRAST FIXES (Outline Buttons, Badges & Switches)
   ======================================================== */

/* Brighten up the action buttons (Edit / Delete) */
body.dark-mode .btn-outline-primary {
    color: #6ea8fe !important; /* Brighter, dark-mode friendly blue */
    border-color: #6ea8fe !important;
}

    body.dark-mode .btn-outline-primary:hover {
        color: #fff !important;
        background-color: #0d6efd !important;
        border-color: #0d6efd !important;
    }

body.dark-mode .btn-outline-danger {
    color: #ea868f !important; /* Brighter, dark-mode friendly red */
    border-color: #ea868f !important;
}

    body.dark-mode .btn-outline-danger:hover {
        color: #fff !important;
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
    }

/* Fix the "+ Create Session" button */
body.dark-mode .btn-outline-secondary {
    color: #adb5bd !important;
    border-color: #6c757d !important;
}

    body.dark-mode .btn-outline-secondary:hover {
        color: #fff !important;
        background-color: #5c636a !important;
        border-color: #5c636a !important;
    }

/* Ensure secondary Configuration badges pop slightly more */
body.dark-mode .badge.bg-secondary {
    background-color: #5c636a !important;
    color: #f8f9fa !important;
    border: 1px solid #6c757d; /* Adds crispness */
}

/* Polish the toggle switches */
body.dark-mode .form-switch .form-check-input {
    background-color: #454d55;
    border-color: #6c757d;
}

    body.dark-mode .form-switch .form-check-input:focus {
        border-color: #6ea8fe;
        box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25);
    }

    body.dark-mode .form-switch .form-check-input:checked {
        background-color: #198754; /* Green for 'OPEN' */
        border-color: #198754;
    }

/* ========================================================
   12. DARK MODE CONTRAST FIXES (Top Navbar & Dropdowns)
   ======================================================== */

/* Keep the navbar pinned to the top while the page scrolls */
.top-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    border-bottom: 1px solid #dee2e6;
}

/* Light mode default colors for the custom text classes */
.text-dark-toggle {
    color: #495057;
}

/* Dark mode navbar background */
body.dark-mode .top-navbar {
    background-color: #2b3035 !important;
    border-bottom: 1px solid #454d55 !important;
}

/* Fix Navbar text and icons in dark mode */
body.dark-mode .text-dark-toggle {
    color: #e1e1e1 !important;
}

/* Fix the Hamburger toggle button */
body.dark-mode .top-navbar .btn-outline-secondary {
    color: #e1e1e1 !important;
    border-color: transparent !important;
}

    body.dark-mode .top-navbar .btn-outline-secondary:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }

/* Fix the Language Selector */
body.dark-mode .top-navbar .form-select {
    background-color: #454d55 !important;
    color: #e1e1e1 !important;
    border-color: #5d666e !important;
}

    body.dark-mode .top-navbar .form-select:focus {
        border-color: #6ea8fe !important;
        box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25) !important;
    }

/* Fix User Profile Dropdown Menus */
body.dark-mode .top-navbar .dropdown-menu {
    background-color: #343a40 !important;
    border: 1px solid #5d666e !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .top-navbar .dropdown-item {
    color: #e1e1e1 !important;
}

    body.dark-mode .top-navbar .dropdown-item:hover,
    body.dark-mode .top-navbar .dropdown-item:focus {
        background-color: #454d55 !important;
        color: #ffffff !important;
    }

    /* Keep the logout button red on hover */
    body.dark-mode .top-navbar .dropdown-item.text-danger:hover {
        background-color: #dc3545 !important;
        color: #ffffff !important;
    }

body.dark-mode .top-navbar .dropdown-divider {
    border-top-color: #5d666e !important;
}

/* Base Icon Styling */
#sidebar i {
    font-size: 1.4rem;
    margin-right: 10px;
    vertical-align: middle;
    /* FIX: Force a uniform box so FA icons don't shift text */
    width: 35px !important;
    height: 35px !important;
    line-height: 30px; /* Centers the icon vertically */
    text-align: center; /* Centers the icon horizontally */
    display: inline-block;
}

/* Collapsed Sidebar Icon Styling */
#sidebar.active i {
    margin-right: 0;
    margin-bottom: 15px; /* Increase this to space them out better vertically */
    /* FIX: Use flexbox or margins to center the block securely */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*Iphone prevent 300ms zoom delay*/
button, .btn, .list-group-item, .btn-close {
    touch-action: manipulation;
}