/**
 * Theme.css - Dark Mode Support for Hermes Monitoring
 * Feature F009 - CSS Custom Properties for Light/Dark themes
 * Compatible with AdminLTE 2.x
 */

/* ============================================================
   CSS VARIABLES - Light Theme (Default)
   ============================================================ */
:root {
    /* Background Colors */
    --bg-primary: #ecf0f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f4f4f4;

    /* Text Colors */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;

    /* Border & Shadow */
    --border-color: #d2d6de;
    --shadow-color: rgba(0, 0, 0, 0.1);

    /* Component Colors */
    --card-bg: #ffffff;
    --modal-bg: #ffffff;
    --input-bg: #ffffff;
    --table-bg: #ffffff;
    --table-stripe: #f9f9f9;
    --table-hover: #f5f5f5;

    /* Sidebar - Keep consistent with AdminLTE skin */
    --sidebar-bg: #222d32;
    --sidebar-text: #b8c7ce;
    --sidebar-active-bg: #1e282c;
    --sidebar-active-text: #ffffff;
    --sidebar-hover-bg: #1e282c;

    /* Header */
    --header-bg: #3c8dbc;
    --header-text: #ffffff;

    /* Status Colors */
    --success: #00a65a;
    --warning: #f39c12;
    --danger: #dd4b39;
    --info: #00c0ef;
    --primary: #3c8dbc;

    /* Charts */
    --chart-grid: rgba(0, 0, 0, 0.1);
    --chart-text: #666666;

    /* Box & Content */
    --box-border: #d2d6de;
    --box-header-bg: #f4f4f4;

    /* Dropdown */
    --dropdown-bg: #ffffff;
    --dropdown-hover: #f4f4f4;
    --dropdown-divider: #e5e5e5;

    /* Form */
    --input-border: #d2d6de;
    --input-focus-border: #3c8dbc;
    --placeholder-color: #999999;
}

/* ============================================================
   CSS VARIABLES - Dark Theme
   ============================================================ */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;

    /* Text Colors */
    --text-primary: #e4e4e4;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;

    /* Border & Shadow */
    --border-color: #2d3a4f;
    --shadow-color: rgba(0, 0, 0, 0.4);

    /* Component Colors */
    --card-bg: #16213e;
    --modal-bg: #1a1a2e;
    --input-bg: #0f3460;
    --table-bg: #16213e;
    --table-stripe: #1a1a2e;
    --table-hover: #0f3460;

    /* Sidebar */
    --sidebar-bg: #0f0f1a;
    --sidebar-text: #b8c7ce;
    --sidebar-active-bg: #16213e;
    --sidebar-active-text: #ffffff;
    --sidebar-hover-bg: #16213e;

    /* Header */
    --header-bg: #0f3460;
    --header-text: #ffffff;

    /* Status Colors - Slightly brighter for dark mode */
    --success: #2ecc71;
    --warning: #f1c40f;
    --danger: #e74c3c;
    --info: #3498db;
    --primary: #4e9fff;

    /* Charts */
    --chart-grid: rgba(255, 255, 255, 0.1);
    --chart-text: #b0b0b0;

    /* Box & Content */
    --box-border: #2d3a4f;
    --box-header-bg: #1a1a2e;

    /* Dropdown */
    --dropdown-bg: #16213e;
    --dropdown-hover: #0f3460;
    --dropdown-divider: #2d3a4f;

    /* Form */
    --input-border: #2d3a4f;
    --input-focus-border: #4e9fff;
    --placeholder-color: #808080;
}

/* ============================================================
   BASE ELEMENTS
   ============================================================ */

/* Body & Wrapper */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] body,
[data-theme="dark"] .wrapper {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Content Wrapper */
[data-theme="dark"] .content-wrapper {
    background-color: var(--bg-primary);
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */

[data-theme="dark"] .main-header .navbar {
    background-color: var(--header-bg);
}

[data-theme="dark"] .main-header .logo {
    background-color: var(--header-bg);
    color: var(--header-text);
}

[data-theme="dark"] .main-header .logo:hover {
    background-color: var(--header-bg);
}

[data-theme="dark"] .main-header .navbar .nav>li>a {
    color: var(--header-text);
}

[data-theme="dark"] .main-header .navbar .nav>li>a:hover,
[data-theme="dark"] .main-header .navbar .nav>li>a:active,
[data-theme="dark"] .main-header .navbar .nav>li>a:focus {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--header-text);
}

[data-theme="dark"] .navbar-custom-menu>.nav>li>a,
[data-theme="dark"] .main-header .navbar .nav>li>a {
    color: var(--header-text);
}

/* ============================================================
   SIDEBAR
   ============================================================ */

[data-theme="dark"] .main-sidebar,
[data-theme="dark"] .left-side {
    background-color: var(--sidebar-bg);
}

[data-theme="dark"] .sidebar-menu>li>a {
    color: var(--sidebar-text);
}

[data-theme="dark"] .sidebar-menu>li:hover>a,
[data-theme="dark"] .sidebar-menu>li.active>a {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-active-text);
}

[data-theme="dark"] .sidebar-menu>li.active>a {
    border-left-color: var(--primary);
}

[data-theme="dark"] .sidebar-menu .treeview-menu>li>a {
    color: var(--sidebar-text);
}

[data-theme="dark"] .sidebar-menu .treeview-menu>li>a:hover,
[data-theme="dark"] .sidebar-menu .treeview-menu>li.active>a {
    color: var(--sidebar-active-text);
}

[data-theme="dark"] .sidebar .user-panel {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .sidebar .user-panel>.info,
[data-theme="dark"] .sidebar .user-panel>.info>p {
    color: var(--text-primary);
}

[data-theme="dark"] .sidebar .user-panel>.info>a {
    color: var(--text-secondary);
}

[data-theme="dark"] .sidebar-menu .header {
    color: var(--text-muted);
    background-color: var(--sidebar-bg);
}

/* Sidebar Search */
[data-theme="dark"] .sidebar-form input[type="text"] {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

[data-theme="dark"] .sidebar-form .btn {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

/* ============================================================
   BOXES (Cards)
   ============================================================ */

[data-theme="dark"] .box {
    background-color: var(--card-bg);
    border-color: var(--box-border);
    box-shadow: 0 1px 3px var(--shadow-color);
}

[data-theme="dark"] .box-header {
    color: var(--text-primary);
    border-bottom-color: var(--box-border);
}

[data-theme="dark"] .box-header.with-border {
    border-bottom-color: var(--box-border);
}

[data-theme="dark"] .box-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .box-footer {
    background-color: var(--box-header-bg);
    border-top-color: var(--box-border);
}

[data-theme="dark"] .box-title {
    color: var(--text-primary);
}

/* Box Variants */
[data-theme="dark"] .box.box-default {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .box.box-primary {
    border-top-color: var(--primary);
}

[data-theme="dark"] .box.box-success {
    border-top-color: var(--success);
}

[data-theme="dark"] .box.box-warning {
    border-top-color: var(--warning);
}

[data-theme="dark"] .box.box-danger {
    border-top-color: var(--danger);
}

[data-theme="dark"] .box.box-info {
    border-top-color: var(--info);
}

/* ============================================================
   TABLES
   ============================================================ */

[data-theme="dark"] .table {
    background-color: var(--table-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .table>thead>tr>th,
[data-theme="dark"] .table>tbody>tr>th,
[data-theme="dark"] .table>tfoot>tr>th,
[data-theme="dark"] .table>thead>tr>td,
[data-theme="dark"] .table>tbody>tr>td,
[data-theme="dark"] .table>tfoot>tr>td {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .table>thead>tr>th {
    border-bottom-color: var(--border-color);
    background-color: var(--box-header-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--table-stripe);
}

[data-theme="dark"] .table-hover>tbody>tr:hover {
    background-color: var(--table-hover);
}

[data-theme="dark"] .table-bordered {
    border-color: var(--border-color);
}

[data-theme="dark"] .table-bordered>thead>tr>th,
[data-theme="dark"] .table-bordered>tbody>tr>th,
[data-theme="dark"] .table-bordered>tfoot>tr>th,
[data-theme="dark"] .table-bordered>thead>tr>td,
[data-theme="dark"] .table-bordered>tbody>tr>td,
[data-theme="dark"] .table-bordered>tfoot>tr>td {
    border-color: var(--border-color);
}

/* ============================================================
   FORMS
   ============================================================ */

[data-theme="dark"] .form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 0.2rem rgba(78, 159, 255, 0.25);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--placeholder-color);
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--bg-tertiary);
    color: var(--text-muted);
}

[data-theme="dark"] label,
[data-theme="dark"] .control-label {
    color: var(--text-primary);
}

[data-theme="dark"] .help-block {
    color: var(--text-muted);
}

[data-theme="dark"] .input-group-addon {
    background-color: var(--bg-tertiary);
    border-color: var(--input-border);
    color: var(--text-primary);
}

/* Checkboxes & Radios */
[data-theme="dark"] .checkbox label,
[data-theme="dark"] .radio label {
    color: var(--text-primary);
}

/* ============================================================
   BUTTONS
   ============================================================ */

[data-theme="dark"] .btn-default {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] .btn-default:focus,
[data-theme="dark"] .btn-default:active {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* ============================================================
   MODALS
   ============================================================ */

[data-theme="dark"] .modal-content {
    background-color: var(--modal-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color);
    background-color: var(--box-header-bg);
}

[data-theme="dark"] .modal-title {
    color: var(--text-primary);
}

[data-theme="dark"] .modal-body {
    background-color: var(--modal-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
    background-color: var(--box-header-bg);
}

[data-theme="dark"] .close {
    color: var(--text-primary);
    text-shadow: none;
    opacity: 0.7;
}

[data-theme="dark"] .close:hover,
[data-theme="dark"] .close:focus {
    color: var(--text-primary);
    opacity: 1;
}

/* ============================================================
   DROPDOWNS
   ============================================================ */

[data-theme="dark"] .dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
    box-shadow: 0 6px 12px var(--shadow-color);
}

[data-theme="dark"] .dropdown-menu>li>a {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu>li>a:hover,
[data-theme="dark"] .dropdown-menu>li>a:focus {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu .divider {
    background-color: var(--dropdown-divider);
}

[data-theme="dark"] .dropdown-menu>.active>a,
[data-theme="dark"] .dropdown-menu>.active>a:hover,
[data-theme="dark"] .dropdown-menu>.active>a:focus {
    background-color: var(--primary);
    color: #ffffff;
}

/* Notification Dropdown */
[data-theme="dark"] .dropdown-menu>li.header {
    background-color: var(--box-header-bg);
    border-bottom-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .dropdown-menu>li.footer>a {
    background-color: var(--box-header-bg);
    color: var(--text-secondary);
}

[data-theme="dark"] .notifications-menu .menu>li>a,
[data-theme="dark"] .messages-menu .menu>li>a,
[data-theme="dark"] .tasks-menu .menu>li>a {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .notifications-menu .menu>li>a:hover,
[data-theme="dark"] .messages-menu .menu>li>a:hover,
[data-theme="dark"] .tasks-menu .menu>li>a:hover {
    background-color: var(--dropdown-hover);
}

/* User Menu */
[data-theme="dark"] .user-menu>.dropdown-menu {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .user-menu>.dropdown-menu>.user-header {
    background-color: var(--header-bg);
}

[data-theme="dark"] .user-menu>.dropdown-menu>.user-footer {
    background-color: var(--box-header-bg);
    border-top-color: var(--border-color);
}

/* ============================================================
   DATATABLES
   ============================================================ */

[data-theme="dark"] .dataTables_wrapper {
    color: var(--text-primary);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_info {
    color: var(--text-secondary);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_length select,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-primary) !important;
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--text-primary) !important;
    background-color: var(--dropdown-hover) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #ffffff !important;
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--text-muted) !important;
    background-color: var(--bg-secondary) !important;
}

/* ============================================================
   SELECT2
   ============================================================ */

[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--input-bg);
    border-color: var(--input-border);
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-color: var(--input-bg);
}

[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .select2-dropdown {
    background-color: var(--dropdown-bg);
    border-color: var(--input-border);
}

[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--default .select2-results__option {
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary);
    color: #ffffff;
}

[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--dropdown-hover);
}

/* ============================================================
   ALERTS & CALLOUTS
   ============================================================ */

[data-theme="dark"] .alert {
    border-color: var(--border-color);
}

[data-theme="dark"] .callout {
    border-color: var(--border-color);
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .callout h4 {
    color: var(--text-primary);
}

/* ============================================================
   PANELS
   ============================================================ */

[data-theme="dark"] .panel {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .panel-heading {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .panel-default>.panel-heading {
    background-color: var(--box-header-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .panel-body {
    color: var(--text-primary);
}

[data-theme="dark"] .panel-footer {
    background-color: var(--box-header-bg);
    border-top-color: var(--border-color);
}

/* ============================================================
   LIST GROUPS
   ============================================================ */

[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .list-group-item:hover,
[data-theme="dark"] .list-group-item:focus {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
}

[data-theme="dark"] a.list-group-item:hover,
[data-theme="dark"] a.list-group-item:focus {
    background-color: var(--dropdown-hover);
}

/* ============================================================
   TABS & NAV
   ============================================================ */

[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs>li>a {
    color: var(--text-primary);
}

[data-theme="dark"] .nav-tabs>li>a:hover {
    background-color: var(--dropdown-hover);
    border-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs>li.active>a,
[data-theme="dark"] .nav-tabs>li.active>a:hover,
[data-theme="dark"] .nav-tabs>li.active>a:focus {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    border-bottom-color: var(--card-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .tab-content {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* ============================================================
   PAGINATION
   ============================================================ */

[data-theme="dark"] .pagination>li>a,
[data-theme="dark"] .pagination>li>span {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .pagination>li>a:hover,
[data-theme="dark"] .pagination>li>span:hover {
    background-color: var(--dropdown-hover);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .pagination>.active>a,
[data-theme="dark"] .pagination>.active>span,
[data-theme="dark"] .pagination>.active>a:hover,
[data-theme="dark"] .pagination>.active>span:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

[data-theme="dark"] .pagination>.disabled>a,
[data-theme="dark"] .pagination>.disabled>span {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */

[data-theme="dark"] .breadcrumb {
    background-color: transparent;
}

[data-theme="dark"] .breadcrumb>li+li:before {
    color: var(--text-muted);
}

[data-theme="dark"] .breadcrumb>li>a {
    color: var(--primary);
}

[data-theme="dark"] .breadcrumb>.active {
    color: var(--text-muted);
}

/* ============================================================
   PROGRESS BARS
   ============================================================ */

[data-theme="dark"] .progress {
    background-color: var(--bg-tertiary);
}

/* ============================================================
   WELLS
   ============================================================ */

[data-theme="dark"] .well {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

/* ============================================================
   INFO BOXES
   ============================================================ */

[data-theme="dark"] .info-box {
    background-color: var(--card-bg);
    box-shadow: 0 1px 3px var(--shadow-color);
}

[data-theme="dark"] .info-box-content {
    color: var(--text-primary);
}

[data-theme="dark"] .info-box-text {
    color: var(--text-secondary);
}

[data-theme="dark"] .info-box-number {
    color: var(--text-primary);
}

/* ============================================================
   SMALL BOXES (Stats)
   ============================================================ */

[data-theme="dark"] .small-box>.small-box-footer {
    background-color: rgba(0, 0, 0, 0.2);
}

/* ============================================================
   KNOB (Gauges)
   ============================================================ */

[data-theme="dark"] .knob {
    color: var(--text-primary) !important;
}

/* ============================================================
   DATE PICKER
   ============================================================ */

[data-theme="dark"] .datepicker {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .datepicker table tr td,
[data-theme="dark"] .datepicker table tr th {
    color: var(--text-primary);
}

[data-theme="dark"] .datepicker table tr td:hover,
[data-theme="dark"] .datepicker table tr th:hover {
    background-color: var(--dropdown-hover);
}

[data-theme="dark"] .datepicker table tr td.active,
[data-theme="dark"] .datepicker table tr td.active:hover {
    background-color: var(--primary);
    color: #ffffff;
}

[data-theme="dark"] .datepicker table tr td.today {
    background-color: var(--warning);
    color: #ffffff;
}

/* ============================================================
   SUMMERNOTE (WYSIWYG)
   ============================================================ */

[data-theme="dark"] .note-editor.note-frame {
    border-color: var(--border-color);
}

[data-theme="dark"] .note-editor .note-toolbar {
    background-color: var(--box-header-bg);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .note-editor .note-editing-area .note-editable {
    background-color: var(--input-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .note-editor .note-statusbar {
    background-color: var(--box-header-bg);
    border-top-color: var(--border-color);
}

/* ============================================================
   CONTENT HEADER
   ============================================================ */

[data-theme="dark"] .content-header {
    background-color: transparent;
}

[data-theme="dark"] .content-header>h1 {
    color: var(--text-primary);
}

[data-theme="dark"] .content-header>h1>small {
    color: var(--text-secondary);
}

/* ============================================================
   TEXT UTILITIES
   ============================================================ */

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-primary);
}

[data-theme="dark"] p {
    color: var(--text-primary);
}

[data-theme="dark"] a {
    color: var(--primary);
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus {
    color: #6db3f2;
}

/* ============================================================
   HR & BORDERS
   ============================================================ */

[data-theme="dark"] hr {
    border-top-color: var(--border-color);
}

/* ============================================================
   SCROLLBAR (Webkit)
   ============================================================ */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--border-color);
}

/* ============================================================
   THEME TOGGLE ICONS
   ============================================================ */

#theme-icon-light {
    display: none;
}

[data-theme="dark"] #theme-icon-dark {
    display: none;
}

[data-theme="dark"] #theme-icon-light {
    display: inline;
}

/* ============================================================
   FOOTER
   ============================================================ */

[data-theme="dark"] .main-footer {
    background-color: var(--card-bg);
    border-top-color: var(--border-color);
    color: var(--text-secondary);
}

/* ============================================================
   LOADING OVERLAYS
   ============================================================ */

[data-theme="dark"] .overlay {
    background: rgba(26, 26, 46, 0.7);
}

/* ============================================================
   DASHBOARD WIDGETS (F007 Integration)
   ============================================================ */

[data-theme="dark"] .dashboard-grid .widget {
    background-color: var(--card-bg);
    border-color: var(--box-border);
}

[data-theme="dark"] .dashboard-grid .widget-header {
    background-color: var(--box-header-bg);
    border-bottom-color: var(--box-border);
    color: var(--text-primary);
}

[data-theme="dark"] .dashboard-grid .widget-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .dashboard-grid .widget-empty-state {
    background-color: var(--card-bg);
    border-color: var(--box-border);
    color: var(--text-secondary);
}

[data-theme="dark"] .dashboard-grid .widget-empty-state h4 {
    color: var(--text-primary);
}

/* ============================================================
   ESCALATION (F008 Integration)
   ============================================================ */

[data-theme="dark"] .escalation-timeline {
    border-left-color: var(--border-color);
}

[data-theme="dark"] .escalation-timeline .timeline-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* ============================================================
   TRANSITIONS
   ============================================================ */

.main-header,
.main-header .navbar,
.main-header .logo,
.main-sidebar,
.sidebar,
.content-wrapper,
.box,
.box-header,
.box-body,
.box-footer,
.table,
.form-control,
.btn,
.modal-content,
.dropdown-menu,
.nav-tabs,
.pagination,
.info-box {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}