html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* overflow-y: hidden; */ /* Prevent scrollbars if content fits perfectly - REMOVED */
    background-color: #1E1E1E; /* Added dark background */
}

/* This is the root element where Dash mounts the app */
#_dash-app-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* This is often the direct child of _dash-app-content, our main dbc.Container in app.py */
#_dash-app-content > .container-fluid.h-100-flex-column {
    min-height: 100%; /* Use min-height to ensure it tries to fill */
    display: flex;
    flex-direction: column;
    padding: 0; /* Remove container padding if it's adding space */
    margin: 0;
}

/* This is the html.Div(id='page-content') in app.py */
#page-content.flex-grow-1 {
    flex-grow: 0; /* Make page-content not grow */
    display: flex; /* Make page-content a flex container too */
    flex-direction: column;
}

/* This is the dbc.Container inside overview_page.py */
#page-content > .container-fluid.d-flex.flex-column {
    flex-grow: 1; /* Allow overview_page's container to grow within page-content */
    min-height: 0; /* Important for nested flex children */
    padding: 2px !important; /* Reduced padding for more space */
}

/* The container for the graph in overview_page.py */
#temperature-graph-container.flex-grow-1 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Important for nested flex children */
}

#temperature-graph-container .dash-graph { /* Target the graph component itself */
    height: 100%;
    width: 100%;
}

/* Specific styling for the main app layout container if needed */
/* Ensure the container holding page-content can also flex its children */
.h-100-flex-column {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.flex-grow-1 {
    flex-grow: 1;
}

/* Footer Styling */
footer, #footer, .footer { /* Common footer selectors */
    background-color: #1E1E1E !important; /* Match main page dark background */
    color: #CCCCCC !important; /* Light grey text for footer */
    padding: 5px 0 !important; /* Reduced padding for more space */
    text-align: center;
    width: 100%;
    /* If footer should not take space from flex-grow items: */
    /* flex-shrink: 0; */ 
    flex-grow: 1; /* Make the footer expand to fill remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
}

/* Additional spacing optimizations for overview page */
.text-muted {
    font-size: 0.9em !important; /* Slightly smaller timestamp text */
    color: #6c757d !important; /* Ensure visibility on dark background */
    opacity: 1 !important; /* Ensure it's not transparent */
}

/* Reduce margins on card rows */
.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
} 

/* Dash DevTools collapsed bar */
.__dash-devtools__,
.__dash-devtools__ > * {
    background-color: #1E1E1E !important;
    color: #CCCCCC !important;
}

/* ============================================
   NAVBAR STYLES - Ensure visibility and dark theme
   ============================================ */

/* Navbar Container */
#navbar-container {
    position: relative;
    z-index: 1000 !important;
    width: 100%;
    flex-shrink: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Navbar Styling */
.navbar {
    background-color: #2c3e50 !important;
    border-bottom: 2px solid #2ecc71 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.navbar-brand {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.navbar-brand:hover {
    color: #2ecc71 !important;
}

/* Navbar Links */
.navbar-nav .nav-link {
    color: #CCCCCC !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
    transition: color 0.3s ease !important;
}

.navbar-nav .nav-link:hover {
    color: #2ecc71 !important;
    background-color: rgba(46, 204, 113, 0.1) !important;
}

.navbar-nav .nav-link.active {
    color: #2ecc71 !important;
    background-color: rgba(46, 204, 113, 0.15) !important;
}

/* Ensure navbar items are visible */
.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
}

.navbar-nav .nav-item {
    display: list-item !important;
    visibility: visible !important;
}

/* Dropdown Menu */
.dropdown-menu {
    background-color: #34495e !important;
    border: 1px solid #2ecc71 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    min-width: 220px !important;
}

.dropdown-item {
    color: #CCCCCC !important;
    padding: 0.5rem 1rem !important;
    display: flex !important;
    align-items: center !important;
}

.dropdown-item:hover {
    background-color: rgba(46, 204, 113, 0.2) !important;
    color: #2ecc71 !important;
}

.dropdown-item-header {
    color: #ffffff !important;
    font-weight: 600 !important;
    background-color: rgba(46, 204, 113, 0.1) !important;
}

.dropdown-item-header:hover {
    background-color: rgba(46, 204, 113, 0.15) !important;
    color: #ffffff !important;
}

.dropdown-divider {
    border-top-color: #2ecc71 !important;
    opacity: 0.3 !important;
    margin: 0.5rem 0 !important;
}

/* Dropdown Toggle Button */
.navbar .dropdown-toggle,
.navbar .nav-link.dropdown-toggle {
    color: #CCCCCC !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.navbar .dropdown-toggle:hover,
.navbar .nav-link.dropdown-toggle:hover {
    color: #2ecc71 !important;
    background-color: rgba(46, 204, 113, 0.1) !important;
}

.navbar .dropdown-toggle::after {
    margin-left: 0.5rem !important;
    border-top-color: #CCCCCC !important;
}

.navbar .dropdown-toggle:hover::after {
    border-top-color: #2ecc71 !important;
}

/* Ensure dropdown is visible */
.navbar .dropdown,
.navbar-nav .dropdown {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
}

.navbar-nav .dropdown {
    display: list-item !important;
    position: relative !important;
}

/* User dropdown menu specific */
#user-dropdown-menu {
    display: block !important;
    visibility: visible !important;
}

#user-dropdown-menu .dropdown-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #CCCCCC !important;
    cursor: pointer !important;
}

/* Dropdown menu positioning */
.navbar-nav .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    z-index: 1050 !important;
    display: none !important;
}

.navbar-nav .dropdown.show .dropdown-menu {
    display: block !important;
}

/* User info headers in dropdown */
#user-info-header,
#user-role-header {
    color: #ffffff !important;
    font-weight: 600 !important;
    background-color: rgba(46, 204, 113, 0.1) !important;
    cursor: default !important;
}

#user-info-header:hover,
#user-role-header:hover {
    background-color: rgba(46, 204, 113, 0.15) !important;
    color: #ffffff !important;
}

/* Logout Button in Dropdown */
#logout-menu-item {
    color: #ff6b6b !important;
    font-weight: 500 !important;
}

#logout-menu-item:hover {
    background-color: rgba(255, 107, 107, 0.2) !important;
    color: #ff5252 !important;
}

#logout-menu-item i {
    margin-right: 0.5rem !important;
}

/* ============================================
   LOGIN PAGE STYLES - Professional Corporate Design
   ============================================ */

/* Login Container Background */
.login-container {
    position: relative;
    overflow: hidden;
    background-color: #1E1E1E !important;
}

/* Ensure all text displays horizontally */
.login-container * {
    white-space: normal !important;
}

.login-card h3,
.login-card p,
.login-card label,
.login-card input,
.login-card button,
.login-card span {
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.login-card h3 {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Login Card Styling */
.login-card {
    background-color: #2c3e50 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
    position: relative;
    min-width: 400px !important;
    width: 100% !important;
    max-width: 500px !important;
    border: 1px solid #34495e !important;
}

.login-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(46, 204, 113, 0.3) !important;
    border-color: #2ecc71 !important;
}

/* Login Input Fields */
.login-input {
    transition: all 0.3s ease !important;
    background-color: #1E1E1E !important;
    color: #ffffff !important;
}

.login-input:focus {
    border-color: #2ecc71 !important;
    box-shadow: 0 0 0 0.2rem rgba(46, 204, 113, 0.25) !important;
    outline: none !important;
    background-color: #1E1E1E !important;
    color: #ffffff !important;
}

.login-input:hover {
    border-color: #555555 !important;
}

.login-input::placeholder {
    color: #888888 !important;
}

/* Login Button Styling */
.login-button {
    background-color: #2ecc71 !important;
    border-color: #2ecc71 !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

.login-button span,
.login-button i {
    white-space: nowrap !important;
    display: inline-block !important;
    color: #ffffff !important;
}

.login-button:hover {
    background-color: #27ae60 !important;
    border-color: #27ae60 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(46, 204, 113, 0.4) !important;
}

.login-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3) !important;
    background-color: #229954 !important;
    border-color: #229954 !important;
}

.login-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(46, 204, 113, 0.5) !important;
}

/* Icon Animation */
.login-card .fa-broadcast-tower {
    transition: transform 0.3s ease, color 0.3s ease;
}

.login-card:hover .fa-broadcast-tower {
    transform: scale(1.1) rotate(5deg);
    color: #27ae60 !important;
}

/* Error Message Styling */
#login-error .alert {
    border-radius: 6px;
    border: none;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

/* Checkbox Styling */
.login-card .form-check-input:checked {
    background-color: #2ecc71;
    border-color: #2ecc71;
}

.login-card .form-check-input:focus {
    border-color: #2ecc71;
    box-shadow: 0 0 0 0.2rem rgba(46, 204, 113, 0.25);
}

.login-card .form-check-label {
    color: #CCCCCC !important;
}

/* Responsive Design for Login Page */
@media (max-width: 768px) {
    .login-card {
        min-width: 90% !important;
        max-width: 95% !important;
        margin: 1rem !important;
    }
    
    .login-card .fa-broadcast-tower {
        font-size: 2.5rem !important;
    }
    
    .login-container {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .login-card {
        min-width: 95% !important;
        max-width: 100% !important;
    }
    
    .login-card h3 {
        font-size: 1.5rem !important;
    }
}