/* 1. GLOBAL LAYOUT */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

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

/* 2. SIDEBAR STYLING */
#sidebar {
    min-width: 250px;
    max-width: 250px;
    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%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: all 0.3s;
}

/* 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 */
}

/* 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%;
}