/* ============================================
   DARK MODE THEME - VS Code Dark Modern
   ============================================ */

html.dark-mode, 
body.dark-mode {
    background-color: #1e1e1e !important;
    color: #cccccc !important;
}

body.dark-mode .navbar-toggler {
    background-color: #007acc;
    border-color: #1e90ff;
}

body.dark-mode .navbar-toggler:hover {
    background-color: #005a9e;
}

body.dark-mode .navbar_heading a {
    color: #569cd6;
}

body.dark-mode .navbar_heading a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Mobile navbar and toggler */
@media (max-width: 768px) {
    body.dark-mode nav.navbar.navbar-expand-lg.border-bottom {
        background: transparent;
    }
    
    body.dark-mode #navbar_nav {
        background: #1e1e1e;
        border-color: #60a5fa;
    }
    
    body.dark-mode .btn-group .dropdown-toggle {
        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
        border-color: #60a5fa;
        color: #000000;
    }
    
    body.dark-mode .btn-group .dropdown-toggle:hover {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }
    
    body.dark-mode .btn-group .dropdown-menu .dropdown-item {
        background: #2d2d2d;
        color: #e0e0e0;
        border-color: #454545;
    }
    
    body.dark-mode .btn-group .dropdown-menu .dropdown-item:hover {
        background: linear-gradient(135deg, #2F93E0 0%, #1f6bb8 100%);
        color: #ffffff;
        border-color: #2F93E0;
    }
}

body.dark-mode .navbar-toggler {
    border-color: #60a5fa;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.08) 0%, rgba(96, 165, 250, 0.04) 100%);
}

body.dark-mode .navbar-toggler:hover {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(96, 165, 250, 0.08) 100%);
}

body.dark-mode .navbar-toggler i {
    color: #60a5fa;
}

body.dark-mode .navbar-toggler:hover i {
    color: #3b82f6;
}

/* Navbar toggler for dark mode */
body.dark-mode .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.4);
}

body.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

body.dark-mode nav.navbar.navbar-expand-lg.border-bottom {
    background: #1e1e1e;
    border-top-color: #454545 !important;
}

body.dark-mode .dropdown-menu {
    background-color: #252526;
    color: #cccccc;
    border: 1px solid #454545;
}

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

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: #2a2d2e;
    color: #ffffff;
}

body.dark-mode .hover-hint {
    color: #cccccc;
}

body.dark-mode .daterangepicker,
body.dark-mode .daterangepicker th,
body.dark-mode .daterangepicker tr,
body.dark-mode .daterangepicker td,
body.dark-mode .daterangepicker .off,
body.dark-mode .daterangepicker .available,
body.dark-mode .show-ranges {
    background-color: #252526;
    color: #cccccc;
    border-color: #454545;
}

body.dark-mode .daterangepicker .active,
body.dark-mode .daterangepicker .start-date,
body.dark-mode .daterangepicker .end-date,
body.dark-mode .daterangepicker .in-range {
    background-color: #007acc;
    color: #ffffff;
}

body.dark-mode .daterangepicker .cancelBtn {
    background-color: #3e3e3e;
    color: #cccccc;
    border-color: #565656;
}

body.dark-mode .daterangepicker .cancelBtn:hover,
body.dark-mode .daterangepicker .cancelBtn:focus {
    background-color: #505050;
}

body.dark-mode .daterangepicker li:hover,
body.dark-mode .daterangepicker li:focus {
    background-color: #2a2d2e;
    color: #ffffff;
}

body.dark-mode .show-ranges li:hover,
body.dark-mode .show-ranges li:focus {
    background-color: #2a2d2e;
    color: #ffffff;
}

body.dark-mode .show-ranges td:hover,
body.dark-mode .show-ranges td:focus {
    background-color: #2a2d2e;
    color: #ffffff;
}

/* Date Range Picker Dark Mode */
body.dark-mode #date_range_picker {
    background-color: #2d2d2d;
    border-color: #17a2b8;
    color: #cccccc;
}

body.dark-mode #date_range_picker:hover,
body.dark-mode #date_range_picker:focus {
    background-color: #3e3e3e;
    border-color: #1fb5cc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode #date_range_picker .fa-calendar {
    color: #17a2b8;
}

body.dark-mode #date_range_picker span {
    color: #cccccc;
    font-size: 0.72rem;
}

/* Flatpickr calendar dark mode */
body.dark-mode .flatpickr-calendar {
    background-color: #2d2d30 !important;
    border-color: #555555 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7) !important;
}

/* Dark mode overlay - darker background */
body.dark-mode .flatpickr-calendar.open::before {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .flatpickr-months {
    background-color: #3e3e42 !important;
}

body.dark-mode .flatpickr-month {
    color: #ffffff !important;
}

body.dark-mode .flatpickr-current-month .flatpickr-monthDropdown-months {
    background-color: #3e3e42 !important;
    color: #ffffff !important;
}

body.dark-mode .flatpickr-current-month input.cur-year {
    color: #ffffff !important;
}

body.dark-mode .flatpickr-weekdays {
    background-color: #3e3e42 !important;
}

body.dark-mode .flatpickr-weekday {
    color: #e0e0e0 !important;
}

body.dark-mode .flatpickr-day {
    color: #d4d4d4 !important;
}

body.dark-mode .flatpickr-day:hover {
    background-color: #505050 !important;
    color: #ffffff !important;
}

body.dark-mode .flatpickr-day.selected,
body.dark-mode .flatpickr-day.startRange,
body.dark-mode .flatpickr-day.endRange {
    background-color: #0078d4 !important;
    color: #ffffff !important;
    border-color: #0078d4 !important;
}

body.dark-mode .flatpickr-day.inRange {
    background-color: #094771 !important;
    color: #d4d4d4 !important;
    box-shadow: none !important;
}

body.dark-mode .flatpickr-day.today {
    border-color: #0078d4 !important;
}

body.dark-mode .flatpickr-day.today:hover {
    background-color: #505050 !important;
    color: #ffffff !important;
}

body.dark-mode .flatpickr-presets {
    background-color: #252526 !important;
    border-top: 1px solid #3e3e42 !important;
}

body.dark-mode .flatpickr-months .flatpickr-prev-month,
body.dark-mode .flatpickr-months .flatpickr-next-month {
    color: #ffffff !important;
    fill: #ffffff !important;
}

body.dark-mode .flatpickr-months .flatpickr-prev-month:hover,
body.dark-mode .flatpickr-months .flatpickr-next-month:hover {
    color: #0078d4 !important;
    fill: #0078d4 !important;
}

body.dark-mode .dt-buttons {
    background-color: #2d2d2d;
    border: 1px solid #454545;
}

body.dark-mode .dt-button-collection {
    background-color: #252526;
    color: #cccccc;
}

body.dark-mode .dtsp-titleRow button {
    color: #cccccc;
    background-color: #2d2d2d;
}

body.dark-mode .modal-content {
    background-color: #252526 !important;
    color: #cccccc !important;
    border: 1px solid #454545 !important;
}

body.dark-mode .modal-header {
    background-color: #252526 !important;
    color: #cccccc !important;
    border-bottom: 1px solid #454545 !important;
}

body.dark-mode .modal-body {
    background-color: #252526 !important;
    color: #cccccc !important;
}

body.dark-mode .modal-body p {
    color: #cccccc !important;
}

body.dark-mode .modal-footer {
    background-color: #252526 !important;
    border-top: 1px solid #454545 !important;
}

body.dark-mode .modal-title {
    color: #569cd6 !important;
}

body.dark-mode .btn-close {
    filter: invert(1);
    opacity: 0.8;
}

body.dark-mode .btn-close:hover {
    opacity: 1;
}

body.dark-mode .modal-backdrop {
    background-color: rgba(30, 30, 30, 0.8);
}

body.dark-mode .btn-info {
    background-color: #007acc;
    border-color: #007acc;
    color: #ffffff;
}

body.dark-mode .btn-info:hover {
    background-color: #005a9e;
    border-color: #005a9e;
}

/* Fix comparison modal table colors in dark mode */
body.dark-mode .modal-body table.table-striped thead {
    background-color: #2d2d2d !important;
}

body.dark-mode .modal-body table.table-striped thead th {
    color: #cccccc !important;
    background-color: #2d2d2d !important;
}

body.dark-mode .modal-body table.table-striped tbody tr:nth-child(odd) td {
    color: #cccccc !important;
}

body.dark-mode .modal-body table.table-striped tbody tr:nth-child(even) td {
    color: #cccccc !important;
}

body.dark-mode .modal-body table.table-striped tbody td {
    border-color: #3e3e3e !important;
}

body.dark-mode table thead th { 
    background-color: #2d2d2d;
    border: 1px solid #3e3e3e;  
    color: #cccccc;
}

/* Date Range Highlighting - Dark Mode */
body.dark-mode table td.highlight-date-range,
body.dark-mode .heatmap-table td.highlight-date-range {
    box-shadow: inset 0 0 0 3px #42a5f5 !important;
    background-color: #1a3a52 !important;
}

body.dark-mode table td.highlight-date-range a {
    color: #9cdcfe;
}

body.dark-mode table tbody td {
    color: #cccccc;
    border: 1px solid #3e3e3e;  
}

body.dark-mode tr:nth-child(odd) {
    background-color: #2d2d2d;
}

body.dark-mode tr:nth-child(even) {
    background-color: #252526;
}

body.dark-mode .table-hover tbody tr:hover,
body.dark-mode tr:hover,
body.dark-mode tr:focus-within {
    background-color: #3a3d41 !important;
    outline: 2px solid #007acc;
    outline-offset: -2px;
}

/* Ensure text is readable on hover in dark mode */
body.dark-mode .table-hover tbody tr:hover td,
body.dark-mode tr:hover td,
body.dark-mode tr:focus-within td {
    color: #ffffff !important;
}

body.dark-mode .table-hover tbody tr:hover .app-name-text,
body.dark-mode .table-hover tbody tr:hover .deployment-fraction,
body.dark-mode .table-hover tbody tr:hover .succeeded-count,
body.dark-mode .table-hover tbody tr:hover .total-count {
    color: #ffffff !important;
}

body.dark-mode table .highlight {
    background-color: #F57F17;
    color: #000000;
    border: 2px solid #FBC02D;
}
  
body.dark-mode table .equal {
    background-color: #2E7D32;
    color: #ffffff;
    border: 2px solid #66BB6A;
}

body.dark-mode table .equal a,
body.dark-mode table .highlight a {
    color: #ffffff;
    text-decoration: underline;
}

/* Dark mode FAQ modal */
body.dark-mode #faq-modal .modal-content {
    background-color: #252526 !important;
    border-left: 3px solid #60a5fa;
    border-radius: 6px;
}

body.dark-mode #faq-modal .modal-header {
    background: rgba(96, 165, 250, 0.08) !important;
    border-bottom: none !important;
    border-left: 3px solid #60a5fa;
    border-radius: 6px 0 0 0;
    padding: 16px 20px;
}

body.dark-mode #faq-modal .modal-body {
    border-left: 3px solid #60a5fa;
}

body.dark-mode #faq-modal .modal-footer {
    background: rgba(96, 165, 250, 0.05) !important;
    border-top: 1px solid rgba(96, 165, 250, 0.15) !important;
    border-left: 3px solid #60a5fa;
    border-radius: 0 0 0 6px;
    padding: 12px 20px;
}

body.dark-mode #faq-modal .modal-title {
    color: #60a5fa;
}

/* Dark mode alert modal - additional overrides */
body.dark-mode #warning-modal .modal-body {
    color: #cccccc;
}

/* Dark mode navigation */
body.dark-mode .nav-link {
    background-color: #007acc;
    color: #ffffff;
    border-color: transparent;
}

body.dark-mode .nav-link:hover,
body.dark-mode .nav-link:focus {
    background-color: #005a9e;
    color: #ffffff;
    border-color: #1e90ff;
}

body.dark-mode .btn-group .dropdown-toggle {
    background-color: #007acc;
    color: #ffffff;
    border-color: #005a9e;
}

body.dark-mode .btn-group .dropdown-toggle:hover,
body.dark-mode .btn-group .dropdown-toggle:focus {
    background-color: #005a9e;
    border-color: #1e90ff;
}

body.dark-mode .btn-group .dropdown-menu {
    border-color: #454545;
}

/* Dark mode FAQ button */
body.dark-mode #faq-modal-button {
    background-color: #007acc;
    color: #ffffff;
    border-color: transparent;
}

body.dark-mode #faq-modal-button:hover,
body.dark-mode #faq-modal-button:focus {
    background-color: #005a9e;
    border-color: #1e90ff;
}

/* Dark mode current date */
body.dark-mode #current-date {
    color: #cccccc;
}

/* Dark mode footer */
body.dark-mode .copywrite_date {
    color: #858585;
}

/* Dark mode focus indicators */
body.dark-mode *:focus {
    outline-color: #007acc;
}

body.dark-mode button:focus,
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    outline-color: #007acc;
}

/* Dark mode skip link */
body.dark-mode .skip-link {
    background: #007acc;
}

/* Dark mode links */
body.dark-mode a {
    color: #9cd2ff;
}

body.dark-mode a:hover,
body.dark-mode a:focus {
    color: #9cdcfe;
}

/* Dark mode header buttons */
body.dark-mode .header-btn {
    color: #569cd6;
}

body.dark-mode .header-btn:hover,
body.dark-mode .header-btn:focus-visible {
    color: #9cdcfe;
}

/* Dark mode feedback modal */
body.dark-mode #feedback-modal .modal-content {
    background-color: #252526;
    color: #cccccc;
    border: 1px solid #454545;
}

body.dark-mode #feedback-modal .modal-header {
    border-bottom-color: #454545;
}

body.dark-mode #feedback-modal .modal-footer {
    border-top-color: #454545;
}

body.dark-mode #feedback-modal .form-control,
body.dark-mode #feedback-modal .form-select {
    background-color: #1e1e1e;
    color: #cccccc;
    border-color: #454545;
}

body.dark-mode #feedback-modal .form-control:focus,
body.dark-mode #feedback-modal .form-select:focus {
    background-color: #2d2d2d;
    border-color: #007acc;
    color: #cccccc;
}

body.dark-mode #feedback-modal .form-text {
    color: #999999;
}

/* ============================================
   CONTROL PANELS - Dashboard Refresh Dark Mode
   ============================================ */

/* Control panel title and icon visibility */
body.dark-mode .control-panel-title {
    color: #cccccc;
}

body.dark-mode .control-panel-icon {
    color: #569cd6;
}

/* Refresh button - better visibility */
body.dark-mode .btn-icon-action {
    background-color: #2d2d2d;
    border-color: #454545;
    color: #cccccc;
}

body.dark-mode .btn-icon-action:hover {
    background-color: #007acc;
    border-color: #007acc;
    color: #ffffff;
}

/* Dropdown select - visible when not open, black text when open */
body.dark-mode .form-select-inline {
    background-color: #2d2d2d;
    border-color: #454545;
    color: #cccccc;
}

body.dark-mode .form-select-inline:hover {
    border-color: #569cd6;
}

body.dark-mode .form-select-inline:focus {
    border-color: #007acc;
    background-color: #ffffff;
    color: #000000;
}

/* Dropdown options - black text on white background when expanded */
body.dark-mode .form-select-inline option {
    background-color: #ffffff;
    color: #000000;
}

/* Status text (e.g., "2m ado") - better readability */
body.dark-mode .control-status {
    background-color: rgba(34, 197, 94, 0.15);
}

body.dark-mode .status-text {
    color: #ffffff;
    font-weight: 600;
}

/* ============================================
   TOOLBAR ELEMENT VISIBILITY IMPROVEMENTS
   ============================================ */

/* Dashboard Overview button - brighter blue icon and text */
body.dark-mode .stats-overview-btn {
    background: rgba(96, 165, 250, 0.12);
    border-left-color: #60a5fa;
}

body.dark-mode .stats-overview-btn > i {
    color: #60a5fa;
}

body.dark-mode .stats-overview-btn:hover {
    background: rgba(96, 165, 250, 0.18);
    border-left-color: #3b82f6;
}

body.dark-mode .stats-overview-btn:hover > i {
    color: #3b82f6;
}

/* Mini badges - brighter blue */
body.dark-mode .stats-mini-badge {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}

/* Mini warning badges - brighter red */
body.dark-mode .stats-mini-badge-warning {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.4);
}

body.dark-mode .stats-overview-btn:hover .stats-mini-badge {
    background: rgba(96, 165, 250, 0.22);
    color: #3b82f6;
}

body.dark-mode .stats-overview-btn:hover .stats-mini-badge-warning {
    background: rgba(248, 113, 113, 0.28);
    color: #ff6b6b;
    border-color: rgba(248, 113, 113, 0.5);
}

/* Last Updated label - brighter grey text */
body.dark-mode .filter-last-updated .last-updated-label {
    color: #d4d4d4;
}

body.dark-mode .filter-last-updated .last-updated-time {
    color: #e0e0e0;
    font-weight: 600;
}

/* Compare Environments button text */
body.dark-mode #compare-columns-btn .btn-text {
    color: #e0e0e0;
}

/* Date range display - brighter colors */
body.dark-mode .date-range-display {
    color: #e0e0e0;
}

body.dark-mode .date-range-display:hover {
    color: #60a5fa;
}

/* Filter group date background */
body.dark-mode .filter-group-date {
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-left-color: #60a5fa;
}