/* * VATCAR Dark Mode * Activated via data-theme="dark" on * Toggle in topbar, persisted in localStorage */ [data-theme="dark"] { /* Base colors */ --dark-bg: #14161b; --dark-bg-secondary: #22252b; --dark-bg-tertiary: #2a2d35; --dark-border: #363940; --dark-text: #d4d4d8; --dark-text-muted: #9ca3af; --dark-text-heading: #e5e7eb; --dark-link: #60a5fa; --dark-input-bg: #2a2d35; --dark-input-border: #404450; } /* Body and page background */ [data-theme="dark"] body { background-color: var(--dark-bg) !important; color: var(--dark-text) !important; } /* Main content wrapper */ [data-theme="dark"] .kt-wrapper { background-color: var(--dark-bg) !important; } [data-theme="dark"] .kt-content { background-color: #1a1d23 !important; } [data-theme="dark"] .kt-body { background-color: var(--dark-bg) !important; } /* Header/Topbar */ [data-theme="dark"] .kt-header { background-color: #15171c !important; border-bottom: 1px solid var(--dark-border) !important; } [data-theme="dark"] .kt-header__top { background-color: #15171c !important; } [data-theme="dark"] .kt-header__bottom { background-color: #15171c !important; } /* Mobile header */ [data-theme="dark"] .kt-header-mobile { background-color: #15171c !important; } /* Navbar */ [data-theme="dark"] .kt-header-menu-wrapper { background-color: var(--dark-bg-secondary) !important; } [data-theme="dark"] .kt-header-menu { background-color: var(--dark-bg-secondary) !important; } [data-theme="dark"] .kt-menu__link-text { color: var(--dark-text) !important; } [data-theme="dark"] .kt-menu__link:hover .kt-menu__link-text { color: #fff !important; } [data-theme="dark"] .kt-menu__submenu { background-color: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .kt-menu__subnav .kt-menu__item:hover > .kt-menu__link { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .kt-menu__hor-arrow { color: var(--dark-text-muted) !important; } /* Header minimized state override — Metronic forces background: #fff !important */ [data-theme="dark"] .kt-header--fixed.kt-header--minimize .kt-header, [data-theme="dark"].kt-header--fixed.kt-header--minimize .kt-header { background: #15171c !important; box-shadow: 0 0 40px 0 rgba(0,0,0,0.3) !important; } /* Mobile menu overlay */ [data-theme="dark"] .kt-header-menu-wrapper.kt-header-menu-wrapper--on { background-color: var(--dark-bg-secondary) !important; } [data-theme="dark"] .kt-header-menu-wrapper-close > i { color: var(--dark-text) !important; } /* Aside/Sidebar */ [data-theme="dark"] .kt-aside { background-color: var(--dark-bg-secondary) !important; border-right: 1px solid var(--dark-border) !important; } [data-theme="dark"] .kt-aside .kt-menu__link-text { color: var(--dark-text) !important; } [data-theme="dark"] .kt-aside .kt-menu__item--active > .kt-menu__link { background-color: var(--dark-bg-tertiary) !important; } /* Portlet/Card */ [data-theme="dark"] .kt-portlet { background-color: var(--dark-bg-secondary) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; } [data-theme="dark"] .kt-portlet__head { border-bottom-color: var(--dark-border) !important; } [data-theme="dark"] .kt-portlet__head-title { color: var(--dark-text-heading) !important; } [data-theme="dark"] .kt-portlet__head-title small { color: var(--dark-text-muted) !important; } [data-theme="dark"] .kt-portlet__head-icon i { color: var(--dark-text-muted) !important; } /* Bootstrap text utilities — brighter for dark backgrounds */ [data-theme="dark"] .text-success, [data-theme="dark"] td.text-success, [data-theme="dark"] .table td.text-success { color: #34d399 !important; } [data-theme="dark"] .text-danger, [data-theme="dark"] td.text-danger, [data-theme="dark"] .table td.text-danger { color: #f87171 !important; } [data-theme="dark"] .text-warning, [data-theme="dark"] td.text-warning, [data-theme="dark"] .table td.text-warning { color: #fbbf24 !important; } [data-theme="dark"] .text-info, [data-theme="dark"] td.text-info, [data-theme="dark"] .table td.text-info { color: #60a5fa !important; } /* Tables */ [data-theme="dark"] .table { color: var(--dark-text) !important; } [data-theme="dark"] .table th { color: var(--dark-text-heading) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .table td { border-color: var(--dark-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .table-bordered { border-color: var(--dark-border) !important; } [data-theme="dark"] .table-bordered th, [data-theme="dark"] .table-bordered td { border-color: var(--dark-border) !important; } [data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .table-warning, [data-theme="dark"] .table-warning td, [data-theme="dark"] .table-warning th { background-color: rgba(255, 184, 34, 0.12) !important; color: var(--dark-text) !important; } [data-theme="dark"] .table-success, [data-theme="dark"] .table-success td, [data-theme="dark"] .table-success th { background-color: rgba(29, 201, 183, 0.12) !important; color: var(--dark-text) !important; } [data-theme="dark"] .table-danger, [data-theme="dark"] .table-danger td, [data-theme="dark"] .table-danger th { background-color: rgba(253, 57, 122, 0.12) !important; color: var(--dark-text) !important; } [data-theme="dark"] .table-info, [data-theme="dark"] .table-info td, [data-theme="dark"] .table-info th { background-color: rgba(54, 163, 247, 0.12) !important; color: var(--dark-text) !important; } /* DataTables (new v2 classes) */ [data-theme="dark"] .dt-container { color: var(--dark-text) !important; } [data-theme="dark"] .dt-search input, [data-theme="dark"] .dt-length select { background-color: var(--dark-input-bg) !important; border-color: var(--dark-input-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .dt-paging .dt-paging-button { color: var(--dark-text) !important; } [data-theme="dark"] .dt-paging .dt-paging-button.current { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .dt-column-filters select { background-color: var(--dark-input-bg) !important; border-color: var(--dark-input-border) !important; color: var(--dark-text) !important; } /* DataTables (legacy v1.10 classes) */ [data-theme="dark"] .dataTables_wrapper { color: var(--dark-text) !important; } [data-theme="dark"] .dataTables_filter input { background-color: var(--dark-input-bg) !important; border-color: var(--dark-input-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .dataTables_filter label { color: var(--dark-text) !important; } [data-theme="dark"] .dataTables_length select { background-color: var(--dark-input-bg) !important; border-color: var(--dark-input-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .dataTables_length label { color: var(--dark-text) !important; } [data-theme="dark"] .dataTables_info { color: var(--dark-text-muted) !important; } [data-theme="dark"] .dataTables_paginate .paginate_button { color: var(--dark-text) !important; } [data-theme="dark"] .dataTables_paginate .paginate_button.current { background: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .dataTables_paginate .paginate_button:hover { background: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .dataTables_paginate .paginate_button.disabled { color: var(--dark-text-muted) !important; } [data-theme="dark"] table.dataTable thead th, [data-theme="dark"] table.dataTable thead td { background-color: var(--dark-bg-tertiary) !important; border-bottom-color: var(--dark-border) !important; } [data-theme="dark"] table.dataTable tbody td { color: var(--dark-text) !important; } [data-theme="dark"] table.dataTable tbody td a { color: var(--dark-link) !important; } [data-theme="dark"] table.dataTable thead .sorting:after, [data-theme="dark"] table.dataTable thead .sorting_asc:after, [data-theme="dark"] table.dataTable thead .sorting_desc:after { opacity: 0.5; } /* Forms */ [data-theme="dark"] .form-control { background-color: var(--dark-input-bg) !important; border-color: var(--dark-input-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .form-control:focus { background-color: var(--dark-bg-tertiary) !important; border-color: #5867dd !important; color: var(--dark-text) !important; } [data-theme="dark"] .form-control[readonly] { background-color: var(--dark-bg-tertiary) !important; color: var(--dark-text-muted) !important; } [data-theme="dark"] .form-control::placeholder { color: #6b7280 !important; } [data-theme="dark"] select.form-control { background-color: var(--dark-input-bg) !important; } [data-theme="dark"] .input-group-text { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-input-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .custom-select { background-color: var(--dark-input-bg) !important; border-color: var(--dark-input-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .custom-file-label { background-color: var(--dark-input-bg) !important; border-color: var(--dark-input-border) !important; color: var(--dark-text-muted) !important; } [data-theme="dark"] .custom-file-label::after { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-input-border) !important; color: var(--dark-text) !important; } /* Labels and text */ [data-theme="dark"] label { color: var(--dark-text) !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(--dark-text-heading) !important; } [data-theme="dark"] .text-muted { color: var(--dark-text-muted) !important; } [data-theme="dark"] a:not(.btn) { color: var(--dark-link) !important; } [data-theme="dark"] a:not(.btn):hover { color: #93bbfd !important; } /* Links inside badges should keep badge color */ [data-theme="dark"] .badge a { color: inherit !important; } /* Alerts */ [data-theme="dark"] .alert-warning { background-color: #422006 !important; border-color: #854d0e !important; color: #fbbf24 !important; } [data-theme="dark"] .alert-info { background-color: #0c2744 !important; border-color: #1d4ed8 !important; color: #60a5fa !important; } [data-theme="dark"] .alert-success { background-color: #052e16 !important; border-color: #166534 !important; color: #4ade80 !important; } [data-theme="dark"] .alert-danger { background-color: #3b0712 !important; border-color: #9f1239 !important; color: #fb7185 !important; } [data-theme="dark"] .alert-secondary { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; color: var(--dark-text-muted) !important; } /* Badges (scoped to content areas, not topbar) */ [data-theme="dark"] .kt-portlet .badge-info, [data-theme="dark"] .tab-content .badge-info { background-color: #1e40af !important; color: #dbeafe !important; } [data-theme="dark"] .kt-portlet .badge-warning, [data-theme="dark"] .tab-content .badge-warning { background-color: #92400e !important; color: #fef3c7 !important; } [data-theme="dark"] .badge-secondary { background-color: var(--dark-bg-tertiary) !important; color: var(--dark-text-muted) !important; } /* Dropdowns */ [data-theme="dark"] .dropdown-menu { background-color: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .dropdown-item { color: var(--dark-text) !important; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .dropdown-divider { border-color: var(--dark-border) !important; } /* Modals */ [data-theme="dark"] .modal-content { background-color: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .modal-header { border-color: var(--dark-border) !important; } [data-theme="dark"] .modal-footer { border-color: var(--dark-border) !important; } [data-theme="dark"] .modal-title { color: var(--dark-text-heading) !important; } [data-theme="dark"] .close { color: var(--dark-text) !important; opacity: 0.7 !important; } /* Profile & Manage topbar dropdown panels */ [data-theme="dark"] .kt-user-card-v4 { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .kt-user-card-v4--skin-light { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .kt-user-card-v4__name { color: var(--dark-text-heading) !important; } [data-theme="dark"] .kt-user-card-v4__name small { color: var(--dark-text-muted) !important; } [data-theme="dark"] .kt-nav__item > .kt-nav__link { color: var(--dark-text) !important; } [data-theme="dark"] .kt-nav__item > .kt-nav__link:hover { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .kt-nav__link-text { color: var(--dark-text) !important; } [data-theme="dark"] .kt-nav__link-icon i { color: var(--dark-text-muted) !important; } [data-theme="dark"] .kt-nav__separator { border-color: var(--dark-border) !important; } /* Notification panel */ [data-theme="dark"] .kt-notification__item:hover { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .kt-notification__item-title { color: var(--dark-text) !important; } [data-theme="dark"] .kt-notification__item-time { color: var(--dark-text-muted) !important; } [data-theme="dark"] .kt-head--skin-light { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .kt-head__title { color: var(--dark-text-heading) !important; } /* Topbar notification/dropdown scroll area */ [data-theme="dark"] .kt-notification { background-color: var(--dark-bg-secondary) !important; } /* Button variants inside dropdowns */ [data-theme="dark"] .btn-label-brand { background-color: rgba(88, 103, 221, 0.15) !important; color: #8895f0 !important; } [data-theme="dark"] .btn-label-brand:hover { background-color: #5867dd !important; color: #fff !important; } /* Cards and borders */ [data-theme="dark"] .card { background-color: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .card-header { background-color: var(--dark-bg-tertiary) !important; border-bottom-color: var(--dark-border) !important; color: var(--dark-text) !important; } /* Accordion outline (FAQ pages) */ [data-theme="dark"] .accordion.accordion-outline .card .card-header .card-title { border-color: var(--dark-border) !important; color: var(--dark-link) !important; background-color: var(--dark-bg-secondary) !important; } [data-theme="dark"] .accordion.accordion-outline .card .card-header .card-title.collapsed { border-color: var(--dark-border) !important; color: var(--dark-text-muted) !important; } [data-theme="dark"] .accordion.accordion-outline .card .card-header .card-title.collapsed:after { color: var(--dark-text-muted) !important; } [data-theme="dark"] .accordion.accordion-outline .card .card-body-wrapper > .card-body { border-color: var(--dark-border) !important; } [data-theme="dark"] .card-body { color: var(--dark-text) !important; } [data-theme="dark"] .card-body.bg-light { background-color: var(--dark-bg) !important; } [data-theme="dark"] .border-bottom { border-color: var(--dark-border) !important; } [data-theme="dark"] .border { border-color: var(--dark-border) !important; } /* Buttons — outline variants need dark-aware text */ [data-theme="dark"] .btn-outline-primary { color: #60a5fa !important; border-color: #60a5fa !important; } [data-theme="dark"] .btn-outline-secondary { color: var(--dark-text-muted) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .btn-outline-primary:hover { background-color: #1e40af !important; color: #fff !important; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--dark-bg-tertiary) !important; color: var(--dark-text) !important; } /* Pagination */ [data-theme="dark"] .page-link { background-color: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .page-item.active .page-link { background-color: #5867dd !important; border-color: #5867dd !important; color: #fff !important; } /* Footer */ [data-theme="dark"] .kt-footer { background-color: var(--dark-bg-secondary) !important; border-top: 1px solid var(--dark-border) !important; } [data-theme="dark"] .kt-footer .kt-footer__copyright { color: var(--dark-text-muted) !important; } /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dark-bg) !important; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4b5563 !important; border-radius: 4px; } /* Search modal dark overrides */ [data-theme="dark"] #globalSearchOverlay > div { background: var(--dark-bg-secondary) !important; } [data-theme="dark"] #globalSearchOverlay > div > div:first-child { border-bottom-color: var(--dark-border) !important; } [data-theme="dark"] #globalSearchInput { color: var(--dark-text) !important; } [data-theme="dark"] #globalSearchOverlay > div > div:last-child { background: var(--dark-bg-tertiary) !important; border-top-color: var(--dark-border) !important; } /* Subheader/breadcrumbs */ [data-theme="dark"] .kt-subheader { background-color: var(--dark-bg) !important; } [data-theme="dark"] .kt-subheader__title { color: var(--dark-text-heading) !important; } /* Container background */ [data-theme="dark"] .kt-container { color: var(--dark-text); } /* Metronic specific widget overrides */ [data-theme="dark"] .kt-widget__item { border-color: var(--dark-border) !important; } [data-theme="dark"] .kt-switch input:empty ~ span:before { background-color: #404450 !important; } [data-theme="dark"] .kt-switch input:empty ~ span:after { background-color: #9ca3af !important; } [data-theme="dark"] .kt-switch input:checked ~ span:before { background-color: #404450 !important; } [data-theme="dark"] .kt-switch input:checked ~ span:after { background-color: #5867dd !important; } /* FullCalendar dark overrides */ [data-theme="dark"] .fc { color: var(--dark-text) !important; } [data-theme="dark"] .fc td, [data-theme="dark"] .fc th { border-color: var(--dark-border) !important; } [data-theme="dark"] .fc-unthemed .fc-content, [data-theme="dark"] .fc-unthemed .fc-divider, [data-theme="dark"] .fc-unthemed .fc-list-heading td, [data-theme="dark"] .fc-unthemed .fc-popover { background-color: var(--dark-bg-secondary) !important; } /* FullCalendar v5/v6 dark overrides */ [data-theme="dark"] .fc-theme-standard td, [data-theme="dark"] .fc-theme-standard th, [data-theme="dark"] .fc-theme-standard .fc-scrollgrid { border-color: var(--dark-border) !important; } [data-theme="dark"] .fc .fc-daygrid-day-frame { background-color: var(--dark-bg-secondary); } [data-theme="dark"] .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame { background-color: rgba(88, 103, 221, 0.12) !important; } [data-theme="dark"] .fc .fc-col-header-cell { background-color: var(--dark-bg-tertiary); color: var(--dark-text-heading); } [data-theme="dark"] .fc .fc-list-empty { background-color: var(--dark-bg-secondary); color: var(--dark-text-muted); } [data-theme="dark"] .fc .fc-list-event:hover td { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .fc .fc-list-day-cushion { background-color: var(--dark-bg-tertiary) !important; color: var(--dark-text-heading); } [data-theme="dark"] .fc .fc-daygrid-day-number { color: var(--dark-text); } [data-theme="dark"] .fc .fc-daygrid-more-link { color: var(--dark-link); } /* Live ATC controller cards dark mode */ [data-theme="dark"] .col-md-6 .rounded[style*="rgba(40,167,69"] { background: rgba(40, 167, 69, 0.08) !important; border-color: rgba(40, 167, 69, 0.2) !important; } /* Event cards dark mode */ [data-theme="dark"] .event-card { background: var(--dark-bg-secondary); border-color: var(--dark-border); box-shadow: 0 0 13px 0 rgba(0,0,0,.2); } [data-theme="dark"] .event-card-link:hover .event-card { box-shadow: 0 4px 20px 0 rgba(0,0,0,.35); } [data-theme="dark"] .event-card__title { color: var(--dark-text-heading); } [data-theme="dark"] .event-card-link:hover .event-card__title { color: var(--dark-link); } [data-theme="dark"] .event-card__times { background-color: var(--dark-bg-tertiary); } [data-theme="dark"] .event-card__time-item { color: var(--dark-text); } [data-theme="dark"] .event-card__airports-label { color: var(--dark-text-muted); } [data-theme="dark"] .event-card__airports-list { color: var(--dark-text); } [data-theme="dark"] .event-card__airports-list strong { color: var(--dark-link); } /* Homepage hero sections */ [data-theme="dark"] .jumbotron, [data-theme="dark"] .hero-section { background-color: var(--dark-bg-secondary) !important; } /* Responsive table wrapper */ [data-theme="dark"] .table-responsive-auto { color: var(--dark-text); } /* ── SweetAlert2 v11 overrides (fix Metronic v7 CSS conflicts) ── */ /* Dialog modals only — exclude toasts */ .swal2-popup:not(.swal2-toast) .swal2-icon { margin: 1.5rem auto 0 auto !important; } .swal2-popup:not(.swal2-toast) .swal2-title { margin: 1rem auto 0 auto !important; text-align: center !important; } .swal2-popup:not(.swal2-toast) .swal2-html-container { text-align: center !important; } .swal2-popup:not(.swal2-toast) .swal2-actions { margin-top: 1.25rem !important; } /* Toast: reset icon to inline flow without clipping */ .swal2-popup.swal2-toast .swal2-icon { margin: 0 0.6em 0 0 !important; width: 2em !important; min-width: 2em !important; height: 2em !important; overflow: visible !important; } .swal2-popup.swal2-toast .swal2-title { margin: 0 !important; padding: 0.4em 0.6em !important; } /* SweetAlert2 toasts & modals */ [data-theme="dark"] .swal2-popup.swal2-toast { background-color: var(--dark-bg-secondary) !important; color: var(--dark-text) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .swal2-popup.swal2-toast .swal2-title { color: var(--dark-text) !important; } [data-theme="dark"] .swal2-popup.swal2-toast .swal2-timer-progress-bar { background: rgba(255, 255, 255, 0.2) !important; } [data-theme="dark"] .swal2-popup { background-color: var(--dark-bg-secondary) !important; color: var(--dark-text) !important; } [data-theme="dark"] .swal2-title { color: var(--dark-text-heading) !important; } [data-theme="dark"] .swal2-content, [data-theme="dark"] .swal2-html-container { color: var(--dark-text) !important; } [data-theme="dark"] .swal2-input, [data-theme="dark"] .swal2-textarea, [data-theme="dark"] .swal2-select, [data-theme="dark"] .swal2-popup .form-control { background-color: var(--dark-input-bg) !important; border-color: var(--dark-input-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .swal2-validation-message { background-color: var(--dark-bg-tertiary) !important; color: var(--dark-text) !important; } [data-theme="dark"] .swal2-footer { border-top-color: var(--dark-border) !important; } [data-theme="dark"] .swal2-close { color: var(--dark-text-muted) !important; } [data-theme="dark"] .swal2-close:hover { color: var(--dark-text) !important; } [data-theme="dark"] .swal2-popup .reason-box { background: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } /* ── Homepage: Online Facilities ── */ [data-theme="dark"] .facility-item:hover { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .facility-item.is-online:hover { background-color: rgba(40, 167, 69, 0.15) !important; } [data-theme="dark"] .facility-leader-line { border-bottom-color: var(--dark-border) !important; } /* ── Homepage: Live Controller Cards ── */ [data-theme="dark"] .controller-card .font-weight-bold { color: var(--dark-text-heading) !important; } /* ── Homepage: Event Cards ── */ [data-theme="dark"] .event-portlet { background: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .event-title { color: var(--dark-text-heading) !important; } [data-theme="dark"] .event-times { color: var(--dark-text-muted) !important; } /* ── Homepage: Broadcast Alerts ── */ [data-theme="dark"] .broadcast-alert { background-color: #b8860b !important; color: #fff !important; } /* ── Controller Terminal ── */ [data-theme="dark"] .badge-light { background-color: var(--dark-bg-tertiary) !important; color: var(--dark-text) !important; } [data-theme="dark"] .badge-dark { background-color: #3a3d45 !important; color: #e5e7eb !important; } /* ── Training Notes (kt-notes) ── */ [data-theme="dark"] .kt-notes__item { border-left-color: var(--dark-border) !important; } [data-theme="dark"] .kt-notes__icon { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .kt-notes__content { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .kt-notes__content:after { border-right-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .kt-notes__title { color: var(--dark-text-heading) !important; } [data-theme="dark"] .kt-notes__desc { color: var(--dark-text-muted) !important; } [data-theme="dark"] .kt-notes__body { color: var(--dark-text) !important; } [data-theme="dark"] .kt-notes__body hr { border-color: var(--dark-border) !important; } [data-theme="dark"] .img-thumbnail { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; } /* ── Event Management: Create Form & Plugins ── */ /* Dropzone */ [data-theme="dark"] .dropzone { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .dropzone .dz-message { color: var(--dark-text-muted) !important; } /* Select2 */ [data-theme="dark"] .select2-container--default .select2-selection--multiple { background-color: var(--dark-input-bg) !important; border-color: var(--dark-input-border) !important; } [data-theme="dark"] .select2-container--default .select2-selection--single { background-color: var(--dark-input-bg) !important; border-color: var(--dark-input-border) !important; } [data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dark-text) !important; } [data-theme="dark"] .select2-dropdown { background-color: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .select2-search__field { background-color: var(--dark-input-bg) !important; color: var(--dark-text) !important; border-color: var(--dark-input-border) !important; } [data-theme="dark"] .select2-results__option { color: var(--dark-text) !important; } [data-theme="dark"] .select2-results__option--highlighted { background-color: var(--dark-bg-tertiary) !important; color: var(--dark-text-heading) !important; } [data-theme="dark"] .select2-selection__choice { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .select2-selection__choice__remove { color: var(--dark-text-muted) !important; } /* Datetimepicker */ [data-theme="dark"] .datetimepicker { background-color: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .datetimepicker table tr td, [data-theme="dark"] .datetimepicker table tr th { color: var(--dark-text) !important; } [data-theme="dark"] .datetimepicker table tr td.active, [data-theme="dark"] .datetimepicker table tr td.active:hover { background-color: #5867dd !important; color: #fff !important; } [data-theme="dark"] .datetimepicker table tr td.today { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .datetimepicker table tr td.day:hover, [data-theme="dark"] .datetimepicker table tr th.switch:hover, [data-theme="dark"] .datetimepicker table tr th.prev:hover, [data-theme="dark"] .datetimepicker table tr th.next:hover { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .datetimepicker table tr td.old, [data-theme="dark"] .datetimepicker table tr td.new { color: var(--dark-text-muted) !important; } [data-theme="dark"] .datetimepicker table thead tr:first-child th { background-color: var(--dark-bg-tertiary) !important; } /* Checkbox overrides (Metronic kt-checkbox) */ [data-theme="dark"] .kt-checkbox-list small { color: var(--dark-text-muted) !important; } /* ── Change Requests: Tasks, Cards, List Groups ── */ [data-theme="dark"] .list-group-item { background-color: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .list-group-flush .list-group-item { border-bottom-color: var(--dark-border) !important; } [data-theme="dark"] .bg-light { background-color: var(--dark-bg-tertiary) !important; color: var(--dark-text) !important; } [data-theme="dark"] .bg-transparent { color: var(--dark-text) !important; } [data-theme="dark"] .card.border-primary { border-color: #5867dd !important; } [data-theme="dark"] .badge-secondary { background-color: var(--dark-bg-tertiary) !important; color: var(--dark-text-muted) !important; } [data-theme="dark"] .btn-light { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .btn-light:hover { background-color: #3a3d45 !important; } /* thead-light for tables */ [data-theme="dark"] .thead-light th { background-color: var(--dark-bg-tertiary) !important; color: var(--dark-text) !important; border-color: var(--dark-border) !important; } /* Change Request: task completion form bg-light rounded */ [data-theme="dark"] .bg-light.rounded { background-color: var(--dark-bg-tertiary) !important; } /* Change Request: tab nav lines */ [data-theme="dark"] .nav-tabs-line .nav-link { color: var(--dark-text-muted) !important; } [data-theme="dark"] .nav-tabs-line .nav-link.active { color: var(--dark-link) !important; } [data-theme="dark"] .nav-tabs-line .nav-link:hover { color: var(--dark-text) !important; } [data-theme="dark"] .nav-tabs { border-bottom-color: var(--dark-border) !important; } /* Change Request: outline button variants */ [data-theme="dark"] .btn-outline-danger { color: #f87171 !important; border-color: #f87171 !important; } [data-theme="dark"] .btn-outline-danger:hover { background-color: rgba(248, 113, 113, 0.15) !important; color: #fca5a5 !important; } /* ── Support Tickets ── */ /* Bulk action bar */ [data-theme="dark"] #bulkActionBar { background-color: rgba(88, 103, 221, 0.1) !important; border-color: rgba(88, 103, 221, 0.2) !important; } /* Metadata bar */ [data-theme="dark"] .ticket-meta-bar { border-color: var(--dark-border) !important; } [data-theme="dark"] .ticket-meta-item { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .ticket-meta-item[role="button"]:hover { background-color: #323640 !important; } [data-theme="dark"] .ticket-meta-label { color: var(--dark-text-muted) !important; } [data-theme="dark"] .ticket-meta-value { color: var(--dark-text) !important; } [data-theme="dark"] .ticket-meta-edit { color: #818cf8 !important; } /* Message thread */ [data-theme="dark"] .ticket-message { border-color: var(--dark-border) !important; } [data-theme="dark"] .ticket-message-header { background-color: var(--dark-bg-tertiary) !important; border-bottom-color: var(--dark-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .ticket-message-header strong { color: var(--dark-text-heading) !important; } [data-theme="dark"] .ticket-message-body { background-color: var(--dark-bg-secondary) !important; color: var(--dark-text) !important; } /* Staff message accent in dark mode */ [data-theme="dark"] .ticket-message-staff { border-color: rgba(88, 103, 221, 0.3) !important; } [data-theme="dark"] .ticket-message-staff .ticket-message-header { background-color: rgba(88, 103, 221, 0.1) !important; border-bottom-color: rgba(88, 103, 221, 0.2) !important; } /* System messages */ [data-theme="dark"] .ticket-system-msg { color: var(--dark-text-muted) !important; border-left-color: var(--dark-border) !important; } [data-theme="dark"] .ticket-system-msg .fa-info-circle { color: var(--dark-text-muted) !important; } /* Delete button */ [data-theme="dark"] .ticket-delete-btn { color: var(--dark-text-muted) !important; } [data-theme="dark"] .ticket-delete-btn:hover { color: #f87171 !important; } /* Table hover */ [data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .table-hover tbody tr:hover td { color: var(--dark-text) !important; } [data-theme="dark"] .table-hover tbody tr:hover td a { color: var(--dark-link) !important; } /* Ticket toggle button group */ [data-theme="dark"] .ticket-toggle .btn-outline-secondary { color: var(--dark-text-muted) !important; border-color: var(--dark-border) !important; background-color: transparent !important; } [data-theme="dark"] .ticket-toggle .btn-outline-secondary:hover, [data-theme="dark"] .ticket-toggle .btn-outline-secondary.active { background-color: #5867dd !important; border-color: #5867dd !important; color: #fff !important; } [data-theme="dark"] .ticket-toggle .btn-outline-secondary .badge-light { background-color: rgba(255, 255, 255, 0.15) !important; color: inherit !important; } [data-theme="dark"] .ticket-toggle .btn-outline-secondary.active .badge-light { background-color: rgba(255, 255, 255, 0.25) !important; color: #fff !important; } /* Ticket table */ [data-theme="dark"] .ticket-table thead th { color: var(--dark-text-muted) !important; border-bottom-color: var(--dark-border) !important; } [data-theme="dark"] .ticket-table td { border-top-color: var(--dark-border) !important; color: var(--dark-text) !important; } /* Ticket empty state */ [data-theme="dark"] .ticket-empty-state { color: var(--dark-text-muted) !important; } /* Reply form */ [data-theme="dark"] .ticket-reply-form .card { background-color: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; } /* Staff ticket: no-assign warning */ [data-theme="dark"] .ticket-no-assign { color: var(--dark-text-muted) !important; } /* Attachment link */ [data-theme="dark"] .ticket-attachment { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; color: var(--dark-link) !important; } [data-theme="dark"] .ticket-attachment:hover { background-color: #323640 !important; } /* "Original" badge in dark mode */ [data-theme="dark"] .ticket-badge-original { background-color: #404450 !important; color: #d4d4d8 !important; } /* ── Broadcasting Page (/manage/emails) ── */ [data-theme="dark"] .ql-toolbar.ql-snow { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .ql-container.ql-snow { border-color: var(--dark-border) !important; } [data-theme="dark"] .ql-editor { background-color: var(--dark-input-bg) !important; color: var(--dark-text) !important; } [data-theme="dark"] .ql-editor.ql-blank::before { color: var(--dark-text-muted) !important; } [data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--dark-text-muted) !important; } [data-theme="dark"] .ql-snow .ql-fill { fill: var(--dark-text-muted) !important; } [data-theme="dark"] .ql-snow .ql-picker-label { color: var(--dark-text-muted) !important; } [data-theme="dark"] .ql-snow .ql-picker-options { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .ql-snow .ql-picker-item { color: var(--dark-text) !important; } [data-theme="dark"] .ql-snow .ql-tooltip { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .ql-snow .ql-tooltip input[type="text"] { background-color: var(--dark-input-bg) !important; border-color: var(--dark-input-border) !important; color: var(--dark-text) !important; } /* Dual Listbox */ [data-theme="dark"] .dual-listbox { color: var(--dark-text) !important; } [data-theme="dark"] .dual-listbox .dual-listbox__search { background-color: var(--dark-input-bg) !important; border-color: var(--dark-input-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .dual-listbox .dual-listbox__available, [data-theme="dark"] .dual-listbox .dual-listbox__selected { background-color: var(--dark-input-bg) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .dual-listbox .dual-listbox__item { color: var(--dark-text) !important; } [data-theme="dark"] .dual-listbox .dual-listbox__item:hover { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .dual-listbox .dual-listbox__item.dual-listbox__item--selected { background-color: rgba(88, 103, 221, 0.2) !important; } [data-theme="dark"] .dual-listbox .dual-listbox__title { color: var(--dark-text-heading) !important; } [data-theme="dark"] .dual-listbox .dual-listbox__buttons button { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .dual-listbox .dual-listbox__buttons button:hover { background-color: #323640 !important; } /* Broadcast preview modal */ [data-theme="dark"] #preview-modal .modal-footer { border-top-color: var(--dark-border) !important; } /* Radio buttons */ [data-theme="dark"] .kt-radio-list label { color: var(--dark-text) !important; } /* ── Exam Taking Page ── */ [data-theme="dark"] .exam-timer { background: var(--dark-bg-tertiary) !important; color: var(--dark-text) !important; } [data-theme="dark"] .exam-timer.warning { background: rgba(255, 184, 34, 0.15) !important; color: #ffb822 !important; } [data-theme="dark"] .exam-timer.danger { background: rgba(253, 57, 122, 0.15) !important; color: #fd397a !important; } [data-theme="dark"] .exam-timer.stopwatch { background: rgba(10, 187, 135, 0.12) !important; color: #0abb87 !important; } [data-theme="dark"] .question-nav .nav-dot { background: var(--dark-bg-tertiary) !important; border-color: #5867dd !important; color: #8c94dd !important; } [data-theme="dark"] .question-nav .nav-dot:hover { background: #3a3f4a !important; } [data-theme="dark"] .question-nav .nav-dot.active { background: #5867dd !important; color: #fff !important; } [data-theme="dark"] .question-nav .nav-dot.answered { background: #0abb87 !important; border-color: #0abb87 !important; color: #fff !important; } [data-theme="dark"] .question-nav .nav-dot.active.answered { background: #087a59 !important; border-color: #087a59 !important; } [data-theme="dark"] .exam-option-label { border-color: var(--dark-border) !important; color: var(--dark-text) !important; background: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .exam-option-label:hover { border-color: #5867dd !important; background: #2e3240 !important; } [data-theme="dark"] .exam-option-label.selected { border-color: #5867dd !important; background: rgba(88, 103, 221, 0.15) !important; } [data-theme="dark"] .exam-option-label .kt-radio > span, [data-theme="dark"] .exam-option-label .kt-checkbox > span { border-color: var(--dark-border) !important; background: var(--dark-bg-secondary) !important; } [data-theme="dark"] .exam-freetext { background: var(--dark-input-bg) !important; border-color: var(--dark-input-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .btn-secondary { background-color: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .btn-secondary:hover { background-color: #363940 !important; border-color: #404450 !important; color: var(--dark-text-heading) !important; } [data-theme="dark"] .btn-secondary:disabled { background-color: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; color: var(--dark-text-muted) !important; opacity: 0.6; } /* ── Exam Builder Page ── */ [data-theme="dark"] .question-card { background: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .question-card-header { background: var(--dark-bg-secondary) !important; border-bottom-color: var(--dark-border) !important; } [data-theme="dark"] .question-card-body { background: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .question-number { color: #8c94dd !important; } [data-theme="dark"] .question-actions .btn-move { color: var(--dark-text-muted) !important; } [data-theme="dark"] .question-actions .btn-move:hover { color: #8c94dd !important; } [data-theme="dark"] .question-actions .btn-delete { color: var(--dark-text-muted) !important; } [data-theme="dark"] .question-actions .btn-delete:hover { color: #fd397a !important; } [data-theme="dark"] .option-row input[type="text"] { background: var(--dark-input-bg) !important; border-color: var(--dark-input-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .option-correct { color: #1dc9b7 !important; } [data-theme="dark"] .option-incorrect { color: #555 !important; } [data-theme="dark"] .saving-indicator { color: #8c94dd !important; } [data-theme="dark"] .question-type-select.type-ms { color: #e6b800 !important; border-color: #e6b800 !important; } [data-theme="dark"] .question-card-footer { background: var(--dark-bg-secondary) !important; border-top-color: var(--dark-border) !important; } [data-theme="dark"] .option-row .opt-delete { color: #555 !important; } [data-theme="dark"] .option-row .opt-delete:hover { color: #fd397a !important; } /* ── Exam Grading Page ── */ [data-theme="dark"] .grading-toggle { border-bottom-color: var(--dark-border) !important; } [data-theme="dark"] .grading-body .card { background: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .grading-body .card-body { color: var(--dark-text) !important; } [data-theme="dark"] .grading-body .card-body h6, [data-theme="dark"] .grading-body .card-body p strong { color: var(--dark-text-heading) !important; } [data-theme="dark"] .grading-body [style*="background: #f7f8fa"] { background: var(--dark-bg-secondary) !important; border-color: var(--dark-border) !important; color: var(--dark-text) !important; } [data-theme="dark"] .grading-body [style*="background: #f7f8fa"] strong { color: var(--dark-text-heading) !important; } [data-theme="dark"] .grading-body [style*="background: #f7f8fa"] p { color: var(--dark-text) !important; } [data-theme="dark"] .grading-body .row strong { color: var(--dark-text-heading) !important; } [data-theme="dark"] .grading-body hr { border-top-color: var(--dark-border) !important; } [data-theme="dark"] .grading-body .kt-radio-inline label { color: var(--dark-text) !important; } [data-theme="dark"] .grading-body .form-group label strong { color: var(--dark-text-heading) !important; } /* ── Ticket Image Upload Preview ── */ [data-theme="dark"] #ticketImagePreview, [data-theme="dark"] #replyImagePreview { background: var(--dark-bg-tertiary) !important; border-radius: 4px; padding: 8px; } /* ── HitSquad Page ── */ [data-theme="dark"] .hitsquad-landing { background-color: var(--dark-bg-secondary) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .hitsquad-landing .section-title { color: var(--dark-text-heading) !important; } [data-theme="dark"] .hitsquad-landing .description-section p { color: var(--dark-text) !important; } [data-theme="dark"] .benefit-card, [data-theme="dark"] .stat-box { background-color: var(--dark-bg-tertiary) !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; } [data-theme="dark"] .benefit-card h4 { color: #60a5fa !important; } [data-theme="dark"] .benefit-card p { color: var(--dark-text) !important; } [data-theme="dark"] .stat-box p { color: var(--dark-text-muted) !important; } [data-theme="dark"] .roster-table { color: var(--dark-text) !important; } [data-theme="dark"] .roster-table th { background-color: var(--dark-bg-tertiary) !important; color: #60a5fa !important; } [data-theme="dark"] .roster-table th, [data-theme="dark"] .roster-table td { border-bottom-color: var(--dark-border) !important; } [data-theme="dark"] .recruitment-banner { background-color: rgba(220, 53, 69, 0.08) !important; border-color: #dc3545 !important; } [data-theme="dark"] .recruitment-banner p { color: var(--dark-text) !important; } /* ── Solo Certifications Page ── */ [data-theme="dark"] .solo-cert-header { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] .solo-cert-header .kt-portlet__head-title { color: var(--dark-text-heading) !important; } [data-theme="dark"] .solo-cert-header .kt-portlet__head-icon i { color: var(--dark-text-muted) !important; } /* ── Global Search Modal ── */ [data-theme="dark"] #globalSearchOverlay > div { background: var(--dark-bg-secondary) !important; } [data-theme="dark"] #globalSearchOverlay > div > div:first-child { border-bottom-color: var(--dark-border) !important; } [data-theme="dark"] #globalSearchInput { color: var(--dark-text) !important; } [data-theme="dark"] #globalSearchOverlay .search-result-item { color: var(--dark-text) !important; } [data-theme="dark"] #globalSearchOverlay .search-result-item:hover { background-color: var(--dark-bg-tertiary) !important; } [data-theme="dark"] #globalSearchOverlay .search-result-item div[style*="color:#999"] { color: var(--dark-text-muted) !important; } [data-theme="dark"] #globalSearchOverlay .search-empty, [data-theme="dark"] #globalSearchOverlay div[style*="color:#999"] { color: var(--dark-text-muted) !important; } [data-theme="dark"] #globalSearchOverlay > div > div:last-child { background: var(--dark-bg-tertiary) !important; border-top-color: var(--dark-border) !important; } [data-theme="dark"] #globalSearchOverlay kbd { background: var(--dark-bg) !important; color: var(--dark-text-muted) !important; } [data-theme="dark"] #globalSearchOverlay mark { background: rgba(255, 184, 34, 0.3) !important; color: var(--dark-text) !important; } /* ── Topbar Buttons (dark mode) ── */ [data-theme="dark"] .kt-header__topbar .btn[style*="background-color: transparent"][style*="color: #f0b800"], [data-theme="dark"] .kt-header__topbar .badge[style*="background-color: transparent"][style*="color: #f0b800"] { color: #fbbf24 !important; } /* ── Ticket Components (dark mode) ── */ [data-theme="dark"] #bulkActionBar { background: var(--dark-bg-tertiary) !important; border-color: var(--dark-border) !important; } [data-theme="dark"] .ticket-table .ticket-no-assign { color: var(--dark-text-muted) !important; }