/*
DC Water Service Status Dashboard Styles
Main stylesheet containing all custom styles and responsive design rules.

Structure:
1. Base styles and font declarations
2. Layout components (header, sidebar, main content)
3. Card and status indicator styles
4. Responsive breakpoints
5. Animation and transition effects
6. Accessibility enhancements
7. Print media styles

Browser Support:
- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+
- IE11 (basic support)

Note: Font loading optimized for performance with font-display: swap
*/

/* Base styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* Add Avenir font declarations */
@font-face {
    font-family: 'Avenir';
    src: local('Avenir'),
         url('../fonts/AvenirLTStd-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: local('Avenir'),
         url('../fonts/AvenirLTStd-LightOblique.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: local('Avenir'),
         url('../fonts/AvenirLTStd-Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: local('Avenir'),
         url('../fonts/AvenirLTStd-BookOblique.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: local('Avenir'),
         url('../fonts/AvenirLTStd-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: local('Avenir'),
         url('../fonts/AvenirLTStd-MediumOblique.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: local('Avenir'),
         url('../fonts/AvenirLTStd-Heavy.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: local('Avenir'),
         url('../fonts/AvenirLTStd-HeavyOblique.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: local('Avenir'),
         url('../fonts/AvenirLTStd-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: local('Avenir'),
         url('../fonts/AvenirLTStd-BlackOblique.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: local('Avenir'),
         url('../fonts/AvenirLTStd-Roman.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir';
    src: local('Avenir'),
         url('../fonts/AvenirLTStd-Oblique.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

body {
    font-family: 'Avenir', sans-serif;
    font-weight: 400;
    background-color: #f9f9f9;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header styles */
.fixed-top-section {
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 10px 20px;
    height: auto;
    transition: background-color 0.3s ease;
}

.header-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: 1800px;
    margin: 0 auto;
    gap: 15px;
}

.logo-section {
    flex-shrink: 0;
}

.logo {
    height: 40px;
    width: auto;
}

.title-section {
    text-align: center;
    flex-grow: 1;
}

.title-section h1 {
    font-family: 'Avenir', sans-serif;
    font-weight: 900;
    font-size: 1.6rem;
    margin: 0;
    color: rgb(9, 93, 108);
}

.header-search {
   flex-grow: 1;
   min-width: 250px;
}

/* Search styles */
.header-search .search-input-group {
    position: relative;
    background: #f1f1f1;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    height: 40px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.header-search .search-input-group:focus-within {
    border-color: rgb(9, 93, 108);
    box-shadow: 0 0 0 2px rgba(9, 93, 108, 0.2);
}

.header-search .search-input-group i {
    position: absolute;
    left: 15px;
    color: #888;
    font-size: 1rem;
    pointer-events: none;
    z-index: 2;
}

.header-search .search-bar {
    height: 38px;
    padding: 0 15px 0 40px;
    border: none;
    background: transparent;
    width: 100%;
    box-shadow: none;
    font-weight: 500;
}

/* Main content layout */
.main-content {
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cards-section {
    width: 100%;
    min-height: 200px;
    order: 2;
}

.right-sidebar {
    width: 100%;
    order: 1;
}

/* MODIFIED: Media queries for larger screens */
@media (min-width: 992px) {
    body {
        padding-top: 160px; /* Add padding back for fixed headers */
    }

    .fixed-top-section {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1002;
    }

    .status-summary-section {
        position: fixed;
        top: 70px; /* Adjust based on header height */
        left: 0;
        right: 0;
        z-index: 1001;
    }

    .main-content {
        flex-direction: row;
        align-items: flex-start;
    }

    .cards-section {
        flex-grow: 1;
        height: calc(100vh - 180px);
        overflow-y: auto;
        padding-right: 15px;
        order: 0;
    }

    .right-sidebar {
        width: 390px;
        flex-shrink: 0;
        height: calc(100vh - 180px);
        overflow-y: auto;
        order: 0;
    }

    /* MODIFIED: Desktop table layout fix */
    .card-body .table {
        table-layout: fixed;
        width: 100%;
    }

    .card-body .table th:nth-child(1),
    .card-body .table td:nth-child(1) {
        width: 50%;
    }

    .card-body .table th:nth-child(2),
    .card-body .table td:nth-child(2) {
        width: 20%;
    }

    .card-body .table th:nth-child(3),
    .card-body .table td:nth-child(3) {
        width: 30%;
    }
}


/* Card styles */
.card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

.card-header {
    background-color: #ffffff;
    padding: 15px 20px;
    border-radius: 12px 12px 0 0;
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
}

.card-body {
    padding: 0;
}

/* Status indicators */
.status-indicator {
    font-size: 1.5rem;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.green-drop { color: #28a745; }
.yellow-drop { color: #ffc107; }
.red-drop { color: #dc3545; }
.gray-drop { color: #6c757d; }

/* Refresh box styles */
.refresh-box {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    margin-bottom: 25px;
}

.refresh-content {
    padding: 15px;
}

.refresh-content .d-flex {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

#manualRefresh {
    width: auto;
    margin: 0;
    padding: 6px 15px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    background-color: #f1f1f1;
    color: #333;
    border: 1px solid #dee2e6;
    font-family: 'Avenir', sans-serif;
    font-weight: 600;
    transition: all 0.2s ease;
}

#manualRefresh:hover {
    background-color: rgb(9, 93, 108);
    color: white;
    border-color: rgb(9, 93, 108);
    transform: translateY(-1px);
}

#lastUpdated {
    font-size: 0.85rem;
    color: #666;
    margin-top: 10px;
    text-align: center;
    display: block;
    font-family: 'Avenir', sans-serif;
    font-weight: 400;
}

/* Legend styles */
.status-legend {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
    margin-bottom: 25px;
}

.legend-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Responsive grid */
    gap: 10px;
    padding: 15px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    font-size: 0.9rem;
    height: 40px;
    width: 100%;
    font-weight: 500;
}

/* Filter box styles */
.filter-box {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e0e0e0;
}

.filter-options {
    padding: 15px;
}

/* Common box header styles */
.status-legend h5,
.filter-box h5 {
    color: white;
    font-weight: 600;
    margin: 0;
    padding: 15px 20px;
    background-color: rgb(9, 93, 108);
    border-radius: 15px 15px 0 0;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.8px;
    font-family: 'Avenir', sans-serif;
}

/* Custom switch styles */
.custom-control.custom-switch {
    padding-left: 3.5rem;
    margin-bottom: 10px;
}

.custom-control-label {
    white-space: nowrap;
    font-size: 0.95rem;
    font-family: 'Avenir', sans-serif;
    font-weight: 500;
}

/* Update card header icon spacing */
.collapse-icon {
    margin-right: 12px;
    font-size: 1rem;
    color: rgb(9, 93, 108);
    transition: transform 0.3s ease;
}

.card-header[aria-expanded="true"] .collapse-icon {
    transform: rotate(45deg);
}

.font-weight-bold {
    margin-left: 5px;
    font-family: 'Avenir', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Update hover states for better interaction */
.custom-switch .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: rgba(9, 93, 108, 0.2);
    border-color: rgb(9, 93, 108);
}

/* Status Summary Section */
.status-summary-section {
    background-color: #f8f9fa;
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    height: auto;
}

.summary-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 20px;
}

.summary-box {
    background-color: transparent;
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 20px;
}


.summary-box h6 {
    color: rgb(9, 93, 108);
    font-weight: 600;
    margin: 0;
    font-size: 1rem;
    font-family: 'Avenir', sans-serif;
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
}

.summary-stats {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}


.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-label {
    color: #595959;
    font-size: 0.95rem;
    font-weight: 500;
}

.stat-value {
    font-weight: 700;
    font-size: 0.95rem;
}

.summary-divider {
    display: none;
}

@media (min-width: 768px) {
    .summary-box h6 {
        width: auto;
        margin-bottom: 0;
    }
    .summary-divider {
        display: block;
        width: 2px;
        height: 30px;
        background-color: #d0d0d0;
    }
}


/* Dark mode styles for status summary */
.dark-mode .status-summary-section {
    background-color: #262626;
    border-bottom-color: #404040;
}

.dark-mode .summary-box {
    background-color: transparent;
}

.dark-mode .summary-box h6 {
    color: #4db6ac;
}

.dark-mode .stat-label {
    color: #aaa;
}

.dark-mode .stat-value {
    color: #e0e0e0;
}

.dark-mode .summary-divider {
    background-color: #404040;
}

/* Add smooth scrollbar for sidebar */
.right-sidebar, .cards-section {
    scrollbar-width: thin;
    scrollbar-color: rgba(9, 93, 108, 0.5) transparent;
}

.right-sidebar::-webkit-scrollbar, .cards-section::-webkit-scrollbar {
    width: 8px;
}

.right-sidebar::-webkit-scrollbar-track, .cards-section::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.right-sidebar::-webkit-scrollbar-thumb, .cards-section::-webkit-scrollbar-thumb {
    background: rgba(9, 93, 108, 0.5);
    border-radius: 4px;
}

.right-sidebar::-webkit-scrollbar-thumb:hover, .cards-section::-webkit-scrollbar-thumb:hover {
    background: rgba(9, 93, 108, 0.7);
}


/* Update table headers */
.table th {
    font-family: 'Avenir', sans-serif;
    font-weight: 600;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    padding: 12px 20px;
}

.table td {
    padding: 12px 20px;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: #f1f1f1;
}

/* Update badges */
.badge {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 12px;
    font-weight: 600;
}

.badge-success {
    background-color: #e3f5e3;
    color: #2d662d;
}

.badge-warning {
    background-color: #fff3cd;
    color: #856404;
}

.badge-danger {
    background-color: #f8d7da;
    color: #721c24;
}

.badge-secondary {
    background-color: #e9ecef;
    color: #495057;
}


/* Update small text */
small {
    font-family: 'Avenir', sans-serif;
    font-weight: 300;
}

/* Update button text */
.btn {
    font-family: 'Avenir', sans-serif;
    font-weight: 500;
}

/* Tutorial button styles */
.tutorial-section {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tutorial-btn {
    background-color: rgb(9, 93, 108);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 15px;
    font-family: 'Avenir', sans-serif;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.tutorial-btn:hover {
    background-color: rgba(9, 93, 108, 0.9);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Dark mode tutorial button */
.dark-mode .tutorial-btn {
    background-color: #4db6ac;
    color: #1a1a1a;
}

.dark-mode .tutorial-btn:hover {
    background-color: #5dc2b8;
    color: #1a1a1a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Tutorial styles */
.tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: none;
}

.tutorial-tooltip {
    position: absolute;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 20px;
    max-width: 300px;
    z-index: 2001;
    display: none;
}

.tutorial-highlight {
    position: relative;
    z-index: 2002;
    box-shadow: 0 0 0 4px rgb(9, 93, 108);
    border-radius: 8px;
}

/* Tutorial content styles */
.tutorial-tooltip-content h6 {
    color: rgb(9, 93, 108);
    font-weight: 600;
    margin-bottom: 8px;
}

.tutorial-tooltip-content p {
    color: #333;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* Tutorial buttons */
.tutorial-tooltip-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
}

.tutorial-skip,
.tutorial-next {
    padding: 8px 16px;
    border-radius: 20px;
    border: none;
    font-family: 'Avenir', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
}

.tutorial-skip {
    background-color: transparent;
    color: rgb(9, 93, 108);
    border: 1px solid rgb(9, 93, 108);
}

.tutorial-next {
    background-color: rgb(9, 93, 108);
    color: white;
}

/* Dark mode tutorial styles */
.dark-mode .tutorial-tooltip {
    background-color: rgb(9, 93, 108);
}

.dark-mode .tutorial-tooltip-content h6,
.dark-mode .tutorial-tooltip-content p {
    color: #ffffff !important;
}

.dark-mode .tutorial-skip {
    background-color: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.dark-mode .tutorial-next {
    background-color: white;
    color: rgb(9, 93, 108);
}

.dark-mode .tutorial-highlight {
    box-shadow: 0 0 0 4px white;
}

/* Hover states */
.tutorial-skip:hover {
    background-color: rgba(9, 93, 108, 0.1);
}

.tutorial-next:hover {
    background-color: rgba(9, 93, 108, 0.9);
}

.dark-mode .tutorial-skip:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}

.dark-mode .tutorial-next:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Initial Loading Screen */
.initial-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.loader-content {
    text-align: center;
}

.loader-logo {
    width: 200px;
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

.loader-spinner {
    font-size: 2rem;
    color: rgb(9, 93, 108);
    margin: 15px 0;
}

.loader-text {
    font-family: 'Avenir', sans-serif;
    font-weight: 500;
    color: rgb(9, 93, 108);
    font-size: 1.2rem;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Improve table styles */
.table {
    border-collapse: separate;
    border-spacing: 0;
    display: block; /* Make table scrollable on mobile */
    overflow-x: auto;
    white-space: nowrap;
}


/* Add tooltip for long text */
.text-truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate:hover {
    position: relative;
}

.text-truncate:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    white-space: nowrap;
    z-index: 1000;
}

/* Add focus styles for better accessibility */
.card-header:focus {
    outline: 2px solid rgb(9, 93, 108);
    outline-offset: -2px;
}

/* Improve color contrast */
.stat-label {
    color: #595959;
}

/* Add styles for the no-results message on the left side */
#no-results-message {
    background-color: white;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
}


#no-results-message i {
    font-size: 3rem;
    color: rgb(9, 93, 108);
    margin-bottom: 20px;
    display: block;
}

#no-results-message .message-text {
    font-size: 1.3rem;
    color: #333;
    font-family: 'Avenir', sans-serif;
    font-weight: 500;
    line-height: 1.4;
}

/* Dark mode styles for no-results message */
.dark-mode #no-results-message {
    background-color: rgb(9, 93, 108);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: none;
}

.dark-mode #no-results-message i,
.dark-mode #no-results-message .message-text {
    color: #ffffff !important;
}


/* Update dark mode color scheme */
.dark-mode .collapse-icon,
.dark-mode .title-section h1,
.dark-mode .summary-box h6,
.dark-mode .tutorial-btn,
.dark-mode #no-results-message i,
.dark-mode #no-results-message .message-text {
    color: #ffffff;
}

/* Update dark mode status box headers */
.dark-mode .status-legend h5,
.dark-mode .filter-box h5 {
    background-color: rgb(9, 93, 108);
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Update dark mode switch styles for better visibility */
.dark-mode .custom-switch .custom-control-label::before {
    background-color: #404040;  /* Darker background when off */
    border-color: #666666;      /* Lighter border for visibility */
}

/* When switch is checked (on) */
.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: rgb(9, 93, 108);
    border-color: rgb(9, 93, 108);
}

/* The toggle circle */
.dark-mode .custom-switch .custom-control-label::after {
    background-color: #ffffff !important;
}

/* Hover and focus states */
.dark-mode .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(9, 93, 108, 0.25);
}

.dark-mode .custom-switch .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: rgba(9, 93, 108, 0.2);
    border-color: #666666;
}

/* Update dark mode switch circle color */
.dark-mode .custom-switch .custom-control-label::after {
    background-color: #ffffff !important;
}

.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #ffffff !important;
}

/* Update dark mode switch text color */
.dark-mode .custom-control-label {
    color: #ffffff;
}

/* Filter message styles */
.filter-messages .alert {
    display: none;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.filter-messages .alert i {
    margin-right: 8px;
}

.filter-messages .alert-success {
    background-color: rgba(65, 192, 63, 0.1);
    border-color: rgba(65, 192, 63, 0.2);
    color: #2d8a2f;
}

.filter-messages .alert-info {
    background-color: rgba(9, 93, 108, 0.1);
    border-color: rgba(9, 93, 108, 0.2);
    color: rgb(9, 93, 108);
}

/* Dark mode styles for messages */
.dark-mode .filter-messages .alert-success {
    background-color: rgba(65, 192, 63, 0.15);
    border-color: rgba(65, 192, 63, 0.25);
    color: #41c03f;
}

.dark-mode .filter-messages .alert-info {
    background-color: rgba(77, 182, 172, 0.15);
    border-color: rgba(77, 182, 172, 0.25);
    color: #4db6ac;
}


/* Dark mode styles */
body.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

.dark-mode .fixed-top-section,
.dark-mode .card,
.dark-mode .refresh-box,
.dark-mode .status-legend,
.dark-mode .filter-box {
    background-color: #2d2d2d;
    border-color: #404040;
}

.dark-mode .card-header {
    background-color: #363636;
    color: #e0e0e0;
    border-bottom-color: #404040;
}

.dark-mode .title-section h1 {
    color: #4db6ac;
}

.dark-mode .search-input-group {
    background: #363636;
    border-color: #404040;
}

.dark-mode .search-input-group i {
    color: #aaa;
}

.dark-mode .search-bar {
    color: #e0e0e0;
}

.dark-mode .search-bar::placeholder {
    color: #888;
}

.dark-mode .table {
    color: #e0e0e0;
}

.dark-mode .table th {
    background-color: #363636;
    border-bottom-color: #404040;
}

.dark-mode .table td {
    border-color: #404040;
}

.dark-mode .table-hover tbody tr:hover {
    background-color: #363636;
}

.dark-mode .legend-item {
    background-color: #363636;
}

.dark-mode #manualRefresh {
    background-color: #363636;
    color: #e0e0e0;
    border-color: #404040;
}

.dark-mode #manualRefresh:hover {
    background-color: #4db6ac;
    color: #1a1a1a;
}

/* ==============================================
   NEW Custom Day/Night Theme Toggle Styles
   ============================================== */

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes twinkle {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes sunglow {
    0%, 100% { box-shadow: 0 0 8px 2px rgba(255, 215, 0, 0.5); }
    50% { box-shadow: 0 0 18px 8px rgba(255, 215, 0, 0.2); }
}

.day-night-toggle {
  display: inline-block;
  position: relative;
  width: 70px;    /* Adjust as needed */
  height: 36px;   /* Adjust as needed */
  margin-left: 8px; /* spacing if needed next to other controls */
}

.day-night-toggle-checkbox {
  display: none; /* Hide real checkbox */
}

.day-night-toggle-label {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: #87CEEB;
  cursor: pointer;
  position: relative;
  transition: background-color 0.4s ease;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  overflow: hidden; /* Hide overflowing stars */
}

/* The moving sun/moon circle */
.day-night-toggle-inner {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #FFD700;
  transition: all 0.4s ease;
  z-index: 2;
  animation: sunglow 3s infinite ease-in-out;
}

/* Sun rays */
.day-night-toggle-inner::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M15 1v4M15 25v4M29 15h-4M5 15H1M24.04 5.96l-2.83 2.83M8.79 21.21l-2.83 2.83M24.04 24.04l-2.83-2.83M8.79 8.79L5.96 5.96" stroke="%23FFD700" stroke-width="2" stroke-linecap="round"/%3E%3C/svg%3E');
    animation: spin 10s linear infinite;
    transition: opacity 0.4s ease;
}

/* Moon and stars */
.day-night-toggle-inner::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FDF5E6"%3E%3Cpath fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd"/%3E%3C/svg%3E');
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Stars for night mode */
.day-night-toggle-label .star {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    transition: all 0.4s ease;
    opacity: 0;
    animation-play-state: paused;
}
/* User's requested star sizes */
.day-night-toggle-label .star.star-1 { top: 10px; left: 15px; width: 3px; height: 3px; animation: twinkle 2s infinite; }
.day-night-toggle-label .star.star-2 { top: 20px; left: 20px; width: 1.5px; height: 1.5px; animation: twinkle 2.5s infinite; }
.day-night-toggle-label .star.star-3 { top: 8px; left: 25px; width: 2px; height: 2px; animation: twinkle 3s infinite; }


/* Move to "night" when checked */
.day-night-toggle-checkbox:checked + .day-night-toggle-label {
  background-color: #343A40;
}

.day-night-toggle-checkbox:checked + .day-night-toggle-label .day-night-toggle-inner {
  transform: translateX(34px);
  background-color: transparent; /* Make moon background transparent */
  box-shadow: none;
  animation: none; /* Turn off sun glow */
}

.day-night-toggle-checkbox:checked + .day-night-toggle-label .day-night-toggle-inner::before {
    opacity: 0;
}

.day-night-toggle-checkbox:checked + .day-night-toggle-label .day-night-toggle-inner::after {
    opacity: 1;
}

.day-night-toggle-checkbox:checked + .day-night-toggle-label .star {
    opacity: 1;
    animation-play-state: running;
}

/* MODIFIED: Mobile-specific adjustments */
@media (max-width: 991px) {
    .tutorial-btn {
        display: none;
    }

    .header-container {
        flex-wrap: wrap; /* Reverted to wrap for better spacing */
    }
}