/* ============================================
   DARK MODERN THEME — TRIPOS PREMIUM
   Scoped under html.dark-mode for toggle support
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
    --dm-bg-deep: #0B1120;
    --dm-bg-surface: #131B2E;
    --dm-bg-elevated: #1A2332;
    --dm-bg-input: #131B2E;
    --dm-border: rgba(255, 255, 255, 0.06);
    --dm-border-focus: rgba(139, 92, 246, 0.5);
    --dm-text-primary: #F1F5F9;
    --dm-text-secondary: #94A3B8;
    --dm-text-muted: #64748B;
    --dm-accent: #8B5CF6;
    --dm-accent-hover: #7C3AED;
    --dm-accent-glow: rgba(139, 92, 246, 0.15);
    --dm-success: #10B981;
    --dm-danger: #EF4444;
    --dm-amber: #F59E0B;
    --dm-info: #3B82F6;
    --dm-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5), 0 4px 10px -2px rgba(0, 0, 0, 0.4);
    --dm-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   GLASS CARD COMPONENT
   ============================================ */
html.dark-mode .dm-glass-card {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(19, 27, 46, 0.8);
    border: 1px solid rgba(139, 92, 246, 0.1);
    border-radius: 16px;
    box-shadow: var(--dm-shadow);
}

/* ============================================
   GLOBAL BODY & LAYOUT
   ============================================ */
html.dark-mode,
html.dark-mode body {
    background: var(--dm-bg-deep) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .content-wrapper,
html.dark-mode .content,
html.dark-mode main,
html.dark-mode #scrollable-container,
html.dark-mode .wrapper,
html.dark-mode .thetop {
    background: var(--dm-bg-deep) !important;
    color: var(--dm-text-primary) !important;
}

/* Scrollbar */
html.dark-mode ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

html.dark-mode ::-webkit-scrollbar-track {
    background: var(--dm-bg-deep);
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--dm-accent);
}

/* ============================================
   HEADER / NAVBAR — OVERRIDE ALL SKINS
   ============================================ */
html.dark-mode .main-header,
html.dark-mode .main-header .navbar,
html.dark-mode .main-header .logo,
html.dark-mode .skin-blue .main-header .navbar,
html.dark-mode .skin-blue .main-header .logo,
html.dark-mode .skin-blue-light .main-header .navbar,
html.dark-mode .skin-blue-light .main-header .logo,
html.dark-mode .skin-black .main-header .navbar,
html.dark-mode .skin-black .main-header .logo,
html.dark-mode .skin-green .main-header .navbar,
html.dark-mode .skin-red .main-header .navbar,
html.dark-mode .skin-yellow .main-header .navbar,
html.dark-mode .skin-purple .main-header .navbar,
html.dark-mode [class*="skin-"] .main-header .navbar,
html.dark-mode [class*="skin-"] .main-header .logo {
    background: #080D1A !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.12) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Header links & icons */
html.dark-mode .main-header .navbar .nav>li>a,
html.dark-mode .main-header .navbar a,
html.dark-mode [class*="skin-"] .main-header .navbar .nav>li>a {
    color: #94A3B8 !important;
}

html.dark-mode .main-header .navbar .nav>li>a:hover,
html.dark-mode .main-header .navbar a:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #F1F5F9 !important;
}

/* Header sidebar toggle */
html.dark-mode .main-header .sidebar-toggle,
html.dark-mode [class*="skin-"] .main-header .sidebar-toggle {
    color: #94A3B8 !important;
}

html.dark-mode .main-header .sidebar-toggle:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    color: var(--dm-accent) !important;
}

/* Header buttons */
html.dark-mode .main-header .navbar button,
html.dark-mode .main-header .navbar .btn {
    border-color: rgba(139, 92, 246, 0.15) !important;
    color: #94A3B8 !important;
}

html.dark-mode .main-header .navbar button:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #F1F5F9 !important;
}

/* Logo area */
html.dark-mode [class*="skin-"] .main-header .logo .side-bar-heading,
html.dark-mode .side-bar>a[class*="tw-bg-"] {
    background: #080D1A !important;
}

/* ============================================
   SIDEBAR — NUCLEAR DARK OVERRIDE
   ============================================ */
html.dark-mode .side-bar,
html.dark-mode aside.side-bar {
    background: #080D1A !important;
    border-right: 1px solid rgba(139, 92, 246, 0.08) !important;
}

/* Kill ALL white/light backgrounds inside sidebar */
html.dark-mode .side-bar *[class*="tw-bg-white"],
html.dark-mode .side-bar *[class*="tw-bg-gray"],
html.dark-mode .side-bar *[class*="tw-bg-primary-50"],
html.dark-mode .side-bar *[class*="tw-bg-blue"],
html.dark-mode .side-bar ul,
html.dark-mode .side-bar li,
html.dark-mode .side-bar div {
    background: transparent !important;
    background-color: transparent !important;
}

/* Sidebar links — default */
html.dark-mode .side-bar a,
html.dark-mode .side-bar ul li a,
html.dark-mode .side-bar a[class*="tw-text-gray"],
html.dark-mode .side-bar a[class*="tw-text-black"] {
    color: #7C8DB5 !important;
    border-left: 3px solid transparent !important;
    transition: all 0.2s ease;
    background: transparent !important;
}

/* Sidebar links — hover */
html.dark-mode .side-bar a:hover,
html.dark-mode .side-bar ul li a:hover,
html.dark-mode .side-bar a:focus {
    background: rgba(139, 92, 246, 0.08) !important;
    color: #E2E8F0 !important;
    border-left-color: #8B5CF6 !important;
}

/* Sidebar links — active/current */
html.dark-mode .side-bar li.active>a,
html.dark-mode .side-bar a[class*="tw-bg-primary"],
html.dark-mode .side-bar .active>a {
    background: rgba(139, 92, 246, 0.12) !important;
    color: #F1F5F9 !important;
    border-left: 3px solid #8B5CF6 !important;
}

/* Sidebar sub-menus */
html.dark-mode .side-bar ul li ul,
html.dark-mode .side-bar ul ul,
html.dark-mode .treeview-menu,
html.dark-mode [class*="skin-"] .sidebar-menu>li>.treeview-menu {
    background: rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .side-bar ul li ul li a {
    color: #64748B !important;
    border-left: none !important;
    padding-left: 40px !important;
}

html.dark-mode .side-bar ul li ul li a:hover,
html.dark-mode .side-bar ul li ul li.active>a {
    color: #E2E8F0 !important;
    background: rgba(139, 92, 246, 0.06) !important;
}

/* AdminLTE sidebar overrides */
html.dark-mode .sidebar-menu>li>a {
    color: #7C8DB5 !important;
    background: transparent !important;
}

html.dark-mode .sidebar-menu>li.active>a,
html.dark-mode .sidebar-menu>li>a:hover {
    background: rgba(139, 92, 246, 0.08) !important;
    color: #E2E8F0 !important;
}

html.dark-mode .treeview-menu>li>a {
    color: #64748B !important;
    background: transparent !important;
}

html.dark-mode .treeview-menu>li>a:hover,
html.dark-mode .treeview-menu>li.active>a {
    color: #E2E8F0 !important;
    background: rgba(139, 92, 246, 0.06) !important;
}

html.dark-mode .sidebar-toggle {
    color: #94A3B8 !important;
}

html.dark-mode .user-panel {
    border-bottom: 1px solid var(--dm-border) !important;
}

/* Sidebar logo area */
html.dark-mode .side-bar>a {
    background: #080D1A !important;
}

/* Sidebar scrollbar */
html.dark-mode .side-bar::-webkit-scrollbar {
    width: 3px !important;
}

html.dark-mode .side-bar::-webkit-scrollbar-thumb {
    background: #334155 !important;
    border-radius: 4px !important;
}

html.dark-mode .side-bar::-webkit-scrollbar-track {
    background: transparent !important;
}

html.dark-mode .side-bar svg {
    color: inherit !important;
}

/* ============================================
   BOX / CARD COMPONENTS
   ============================================ */
html.dark-mode .box,
html.dark-mode .box-body,
html.dark-mode .box-header,
html.dark-mode .box-footer,
html.dark-mode .info-box,
html.dark-mode .small-box {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .box {
    border-radius: 12px !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: var(--dm-shadow) !important;
}

html.dark-mode .box-header {
    border-bottom-color: rgba(139, 92, 246, 0.08) !important;
}

html.dark-mode .box-header .box-title {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .box-footer {
    border-top-color: rgba(139, 92, 246, 0.08) !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
html.dark-mode .form-control,
html.dark-mode .form-control[disabled],
html.dark-mode .form-control[readonly],
html.dark-mode .input-sm,
html.dark-mode fieldset[disabled] .form-control {
    background: #0F1629 !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 8px !important;
    transition: var(--dm-transition);
}

html.dark-mode .form-control:focus {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 3px var(--dm-accent-glow) !important;
    background: var(--dm-bg-elevated) !important;
}

html.dark-mode .form-control::placeholder {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .input-group .input-group-addon {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-secondary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode label {
    color: var(--dm-text-secondary) !important;
}

/* ============================================
   SELECT2 DARK
   ============================================ */
html.dark-mode .select2-container--default .select2-selection--single,
html.dark-mode .select2-container--default .select2-selection--multiple {
    background: #0F1629 !important;
    color: var(--dm-text-primary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
    border-radius: 8px !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark-mode .select2-selection__rendered {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .select2-container--default .select2-results>.select2-results__options {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--dm-bg-surface) !important;
}

html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--dm-accent) !important;
    color: #fff !important;
}

html.dark-mode .select2-search__field {
    background: #0F1629 !important;
    color: var(--dm-text-primary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .select2-dropdown {
    background: var(--dm-bg-elevated) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

html.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--dm-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
}

/* ============================================
   DATATABLES — PREMIUM DARK
   ============================================ */
html.dark-mode table.dataTable,
html.dark-mode .table,
html.dark-mode .table-bordered,
html.dark-mode .table-striped {
    color: var(--dm-text-primary) !important;
    border-color: rgba(139, 92, 246, 0.08) !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Fix for DataTables header alignment */
html.dark-mode .dataTables_scrollHeadInner,
html.dark-mode .dataTables_scrollHeadInner table.dataTable {
    width: 100% !important;
}

html.dark-mode .dataTables_scrollBody table.dataTable {
    width: 100% !important;
}

/* ===== TABLE HEADER — DISTINCT ACCENT ===== */
html.dark-mode table thead tr,
html.dark-mode .table>thead>tr,
html.dark-mode .table-bordered>thead>tr,
html.dark-mode .dataTable>thead>tr {
    background: #0D1526 !important;
}

html.dark-mode table thead tr th,
html.dark-mode .table>thead>tr>th,
html.dark-mode .table-bordered>thead>tr>th,
html.dark-mode .dataTable thead th,
html.dark-mode table.dataTable thead th {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
    color: #C4B5FD !important;
    border-bottom: 2px solid rgba(139, 92, 246, 0.25) !important;
    border-right: 1px solid rgba(139, 92, 246, 0.06) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 10px 12px !important;
    white-space: nowrap;
}

html.dark-mode table thead tr th:last-child {
    border-right: none !important;
}

/* ===== TABLE BODY ROWS ===== */
html.dark-mode .table>tbody>tr,
html.dark-mode table.dataTable>tbody>tr {
    background: transparent !important;
}

html.dark-mode .table>tbody>tr>td,
html.dark-mode .table-bordered>tbody>tr>td,
html.dark-mode table.dataTable tbody td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.025) !important;
    color: #CBD5E1 !important;
    padding: 9px 12px !important;
    background: transparent !important;
}

html.dark-mode table.dataTable tbody td:last-child,
html.dark-mode .table>tbody>tr>td:last-child {
    border-right: none !important;
}

/* Alternating rows — subtle */
html.dark-mode .table-striped>tbody>tr:nth-of-type(odd),
html.dark-mode table.dataTable>tbody>tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.012) !important;
}

html.dark-mode .table-striped>tbody>tr:nth-of-type(even),
html.dark-mode table.dataTable>tbody>tr:nth-child(even) {
    background: rgba(11, 17, 32, 0.4) !important;
}

/* ===== ROW HOVER — PREMIUM GLOW ===== */
html.dark-mode .table>tbody>tr:hover,
html.dark-mode .table>tbody>tr:hover>td,
html.dark-mode table.dataTable tbody tr:hover,
html.dark-mode table.dataTable tbody tr:hover td,
html.dark-mode .table-striped>tbody>tr:hover,
html.dark-mode .table-striped>tbody>tr:hover>td {
    background: rgba(139, 92, 246, 0.08) !important;
    color: #F1F5F9 !important;
}

/* ===== ROW SELECTED/ACTIVE ===== */
html.dark-mode table.dataTable tbody>tr.selected,
html.dark-mode table.dataTable tbody>tr.selected td,
html.dark-mode .table>tbody>tr.active>td,
html.dark-mode .table>tbody>tr>td.active {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #F1F5F9 !important;
}

/* ===== TABLE BORDERS — STRONGER ===== */
html.dark-mode .table-bordered {
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .table-bordered>thead>tr>th {
    border-bottom: 2px solid rgba(139, 92, 246, 0.2) !important;
}

html.dark-mode .table-bordered>tbody>tr>td {
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Footer rows */
html.dark-mode .table>tfoot>tr>td,
html.dark-mode .table>tfoot>tr>th {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.03) 100%) !important;
    color: #C4B5FD !important;
    border-top: 2px solid rgba(139, 92, 246, 0.2) !important;
    font-weight: 600 !important;
}

/* DataTable controls */
html.dark-mode div.dataTables_processing {
    background: rgba(11, 17, 32, 0.95) !important;
    color: var(--dm-accent) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    border-radius: 8px !important;
}

html.dark-mode .dataTables_wrapper .dataTables_length,
html.dark-mode .dataTables_wrapper .dataTables_filter,
html.dark-mode .dataTables_wrapper .dataTables_info {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_length select,
html.dark-mode .dataTables_wrapper .dataTables_filter input {
    background: #0F1629 !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid rgba(139, 92, 246, 0.12) !important;
    border-radius: 6px !important;
}

html.dark-mode .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15) !important;
}

html.dark-mode .dataTables_empty {
    background: transparent !important;
    color: var(--dm-text-muted) !important;
}

/* ============================================
   PAGINATION
   ============================================ */
html.dark-mode .pagination>li>a,
html.dark-mode .pagination>li>span {
    background: var(--dm-bg-surface) !important;
    color: var(--dm-text-secondary) !important;
    border-color: rgba(139, 92, 246, 0.08) !important;
    transition: var(--dm-transition);
}

html.dark-mode .pagination>li>a:hover {
    background: var(--dm-accent) !important;
    color: #fff !important;
    border-color: var(--dm-accent) !important;
}

html.dark-mode .pagination>.active>a,
html.dark-mode .pagination>.active>a:hover {
    background: var(--dm-accent) !important;
    color: #fff !important;
    border-color: var(--dm-accent) !important;
    box-shadow: 0 0 12px var(--dm-accent-glow);
}

html.dark-mode .pagination>.disabled>a {
    background: var(--dm-bg-deep) !important;
    color: var(--dm-text-muted) !important;
}

html.dark-mode .paginate_button.next,
html.dark-mode .paginate_button.previous {
    background: var(--dm-bg-surface) !important;
    color: var(--dm-text-secondary) !important;
    border-color: rgba(139, 92, 246, 0.08) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
html.dark-mode .btn-default {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .btn-default:hover {
    background: var(--dm-accent) !important;
    color: #fff !important;
}

html.dark-mode .btn-primary {
    background: var(--dm-accent) !important;
    border-color: var(--dm-accent) !important;
    color: #fff !important;
}

html.dark-mode .btn-primary:hover {
    background: var(--dm-accent-hover) !important;
}

html.dark-mode .btn-info {
    background: var(--dm-info) !important;
    border-color: var(--dm-info) !important;
    color: #fff !important;
}

html.dark-mode .btn-success {
    background: var(--dm-success) !important;
    border-color: var(--dm-success) !important;
    color: #fff !important;
}

html.dark-mode .btn-danger {
    background: var(--dm-danger) !important;
    border-color: var(--dm-danger) !important;
    color: #fff !important;
}

html.dark-mode .btn-warning {
    background: var(--dm-amber) !important;
    border-color: var(--dm-amber) !important;
    color: #fff !important;
}

/* Export buttons */
html.dark-mode .buttons-csv {
    background: var(--dm-accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
}

html.dark-mode .buttons-excel {
    background: var(--dm-success) !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
}

html.dark-mode .buttons-pdf {
    background: var(--dm-danger) !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
}

html.dark-mode .buttons-print {
    background: var(--dm-amber) !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
}

html.dark-mode .buttons-collection {
    background: var(--dm-info) !important;
    color: #fff !important;
    border-radius: 8px !important;
    border: none !important;
}

/* ============================================
   DROPDOWN MENUS
   ============================================ */
html.dark-mode .dropdown-menu {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .dropdown-menu>li>a {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .dropdown-menu>li>a:hover,
html.dark-mode .dropdown-menu>li>a:focus {
    background: rgba(139, 92, 246, 0.1) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .dropdown-menu .divider {
    background-color: var(--dm-border) !important;
}

/* Header dropdown specific */
html.dark-mode details ul[role="menu"] {
    background: var(--dm-bg-elevated) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode details ul[role="menu"] a {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode details ul[role="menu"] a:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    color: var(--dm-text-primary) !important;
}

/* ============================================
   MODALS
   ============================================ */
html.dark-mode .modal-content {
    background: var(--dm-bg-elevated) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .modal-header {
    background: #0D1526 !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 16px 16px 0 0 !important;
}

html.dark-mode .modal-header .modal-title,
html.dark-mode .modal-header .close {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .modal-body {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .modal-footer {
    background: #0D1526 !important;
    border-top: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 0 0 16px 16px !important;
}

/* ============================================
   TABS
   ============================================ */
html.dark-mode .nav-tabs-custom {
    background: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
    border-radius: 12px !important;
}

html.dark-mode .nav-tabs-custom>.nav-tabs {
    background: var(--dm-bg-surface) !important;
    border-bottom-color: rgba(139, 92, 246, 0.08) !important;
}

html.dark-mode .nav-tabs-custom>.nav-tabs>li>a {
    color: var(--dm-text-secondary) !important;
    background: transparent !important;
}

html.dark-mode .nav-tabs-custom>.nav-tabs>li.active>a,
html.dark-mode .nav-tabs-custom>.nav-tabs>li>a:hover {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-accent) !important;
    border-bottom-color: var(--dm-accent) !important;
}

html.dark-mode .tab-content {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
}

/* ============================================
   ALERTS & WELLS
   ============================================ */
html.dark-mode .alert {
    border-radius: 10px !important;
}

html.dark-mode .alert-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    color: var(--dm-amber) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

html.dark-mode .alert-info {
    background: rgba(59, 130, 246, 0.12) !important;
    color: var(--dm-info) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

html.dark-mode .alert-success {
    background: rgba(16, 185, 129, 0.12) !important;
    color: var(--dm-success) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
}

html.dark-mode .alert-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    color: var(--dm-danger) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

html.dark-mode .well {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
    border-radius: 12px !important;
}

/* ============================================
   LIST GROUP
   ============================================ */
html.dark-mode .list-group-item {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .list-group-item:hover {
    background: var(--dm-bg-surface) !important;
}

/* ============================================
   DATEPICKER & DATERANGEPICKER
   ============================================ */
html.dark-mode .datepicker {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 12px !important;
}

html.dark-mode .datepicker table tr td,
html.dark-mode .datepicker table tr th {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .datepicker table tr td.today {
    background: var(--dm-amber) !important;
    color: #fff !important;
}

html.dark-mode .datepicker table tr td.active {
    background: var(--dm-accent) !important;
    color: #fff !important;
}

html.dark-mode .datepicker table tr td.day:hover {
    background: rgba(139, 92, 246, 0.15) !important;
}

html.dark-mode .daterangepicker {
    background: var(--dm-bg-elevated) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 12px !important;
}

html.dark-mode .daterangepicker td.in-range {
    background: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .daterangepicker td.active {
    background: var(--dm-accent) !important;
    color: #fff !important;
}

html.dark-mode .daterangepicker .calendar-table {
    background: var(--dm-bg-elevated) !important;
}

html.dark-mode .daterangepicker .calendar-table th,
html.dark-mode .daterangepicker .calendar-table td {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .daterangepicker select.monthselect,
html.dark-mode .daterangepicker select.yearselect {
    background: #0F1629 !important;
    color: var(--dm-text-primary) !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .daterangepicker select.monthselect option,
html.dark-mode .daterangepicker select.yearselect option {
    background: #0F1629 !important;
    color: var(--dm-text-primary) !important;
}

/* ============================================
   NOTIFICATION DROPDOWN
   ============================================ */
html.dark-mode .navbar-nav>.notifications-menu>.dropdown-menu>li .menu {
    background: var(--dm-bg-elevated) !important;
}

html.dark-mode .navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a {
    color: var(--dm-text-secondary) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a:hover {
    background: rgba(139, 92, 246, 0.08) !important;
    color: var(--dm-text-primary) !important;
}

/* ============================================
   HEADINGS & TYPOGRAPHY
   ============================================ */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .text-muted {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode a {
    color: var(--dm-accent);
}

html.dark-mode a:hover {
    color: var(--dm-accent-hover);
}

html.dark-mode legend {
    color: var(--dm-text-primary) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode p {
    color: var(--dm-text-primary);
}

/* ============================================
   HIGHCHARTS DARK
   ============================================ */
html.dark-mode .highcharts-background {
    fill: #0D1526 !important;
}

html.dark-mode .highcharts-plot-background {
    fill: #0D1526 !important;
}

html.dark-mode .highcharts-grid-line {
    stroke: rgba(139, 92, 246, 0.06) !important;
}

html.dark-mode .highcharts-axis-line {
    stroke: rgba(139, 92, 246, 0.08) !important;
}

html.dark-mode .highcharts-tick {
    stroke: rgba(139, 92, 246, 0.08) !important;
}

html.dark-mode .highcharts-axis-labels text,
html.dark-mode .highcharts-yaxis-labels text,
html.dark-mode .highcharts-xaxis-labels text {
    fill: #94A3B8 !important;
}

html.dark-mode .highcharts-axis-title {
    fill: #94A3B8 !important;
}

html.dark-mode .highcharts-legend-item text {
    fill: #F1F5F9 !important;
}

html.dark-mode .highcharts-tooltip-box {
    fill: rgba(13, 21, 38, 0.95) !important;
    stroke: rgba(139, 92, 246, 0.2) !important;
}

html.dark-mode .highcharts-tooltip text {
    fill: #F1F5F9 !important;
}

html.dark-mode .highcharts-title {
    fill: #F1F5F9 !important;
}

html.dark-mode .highcharts-subtitle {
    fill: #94A3B8 !important;
}

html.dark-mode .highcharts-credits {
    fill: #334155 !important;
}

html.dark-mode .highcharts-data-label text {
    fill: #F1F5F9 !important;
}

html.dark-mode .highcharts-container {
    background: #0D1526 !important;
    border-radius: 8px !important;
}

/* ============================================
   WIZARD
   ============================================ */
html.dark-mode .wizard>.content {
    background: var(--dm-bg-elevated) !important;
}

html.dark-mode .wizard>.steps .current a {
    background: var(--dm-accent) !important;
}

/* ============================================
   TOASTR DARK
   ============================================ */
html.dark-mode .toast-success {
    background-color: rgba(16, 185, 129, 0.9) !important;
}

html.dark-mode .toast-error {
    background-color: rgba(239, 68, 68, 0.9) !important;
}

html.dark-mode .toast-warning {
    background-color: rgba(245, 158, 11, 0.9) !important;
}

html.dark-mode .toast-info {
    background-color: rgba(59, 130, 246, 0.9) !important;
}

/* ============================================
   SWAL (SweetAlert) DARK
   ============================================ */
html.dark-mode .swal-modal {
    background-color: var(--dm-bg-elevated) !important;
    border-radius: 16px !important;
}

html.dark-mode .swal-title {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .swal-text {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .swal-button {
    background-color: var(--dm-accent) !important;
    border-radius: 8px !important;
}

html.dark-mode .swal-button:hover {
    background-color: var(--dm-accent-hover) !important;
}

html.dark-mode .swal-button--cancel {
    background-color: var(--dm-bg-surface) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .swal-footer {
    background: var(--dm-bg-surface) !important;
}

html.dark-mode .swal-icon--success:after,
html.dark-mode .swal-icon--success:before {
    background: var(--dm-bg-elevated) !important;
}

html.dark-mode .swal-icon--success__hide-corners {
    background-color: var(--dm-bg-elevated) !important;
}

/* ============================================
   RIGHT-COL (Auth Layout) + Auth inputs
   ============================================ */
html.dark-mode .right-col {
    background: var(--dm-bg-deep) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .right-col label {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .right-col a {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .left-col {
    background: linear-gradient(135deg, var(--dm-bg-deep), var(--dm-bg-surface)) !important;
}

html.dark-mode .right-col input[type="text"],
html.dark-mode .right-col input[type="password"],
html.dark-mode .right-col input[type="search"],
html.dark-mode .right-col input[type="email"],
html.dark-mode .right-col input[type="number"],
html.dark-mode .right-col select,
html.dark-mode .right-col textarea {
    background: #0F1629 !important;
    color: #F1F5F9 !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
    border-radius: 8px !important;
}

html.dark-mode .right-col input:focus,
html.dark-mode .right-col select:focus {
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
}

html.dark-mode .right-col input::placeholder {
    color: #64748B !important;
}

html.dark-mode .right-col select option {
    background: #0F1629 !important;
    color: #F1F5F9 !important;
}

html.dark-mode .right-col button[type="submit"],
html.dark-mode .right-col .ladda-button {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3) !important;
}

/* ============================================
   POS ELEMENTS
   ============================================ */
html.dark-mode .pos-tab-container,
html.dark-mode .pos-tab-content {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .pos-form-actions {
    background-color: var(--dm-bg-surface) !important;
}

/* ============================================
   MISC / PANELS / BREADCRUMBS
   ============================================ */
html.dark-mode .bg-light-gray {
    background-color: var(--dm-bg-surface) !important;
}

html.dark-mode .bg-danger {
    background-color: var(--dm-danger) !important;
    color: #fff !important;
}

html.dark-mode .bg-gray {
    background: var(--dm-bg-surface) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode table.table-transparent,
html.dark-mode table.table-transparent th {
    background-color: transparent !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .blue-heading {
    background-color: var(--dm-bg-surface) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .img-thumbnail {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .div-overlay {
    background: rgba(11, 17, 32, 0.8) !important;
}

html.dark-mode .popover {
    background: var(--dm-bg-elevated) !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .popover-content {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .popover-title {
    background: var(--dm-bg-surface) !important;
    color: var(--dm-text-primary) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .tooltip-inner {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .panel,
html.dark-mode .panel-body,
html.dark-mode .panel-heading,
html.dark-mode .panel-footer {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .panel-default>.panel-heading {
    background: var(--dm-bg-surface) !important;
}

html.dark-mode .breadcrumb {
    background: var(--dm-bg-surface) !important;
}

html.dark-mode .breadcrumb>li>a {
    color: var(--dm-text-secondary) !important;
}

html.dark-mode .breadcrumb>.active {
    color: var(--dm-text-primary) !important;
}

html.dark-mode .progress {
    background: var(--dm-bg-deep) !important;
    border-radius: 8px !important;
}

/* FOOTER */
html.dark-mode .main-footer {
    background: #080D1A !important;
    border-top: 1px solid rgba(139, 92, 246, 0.08) !important;
    color: #64748B !important;
}

/* Scroll-to-top & user dropdown */
html.dark-mode .scroll {
    background: var(--dm-accent) !important;
    border-radius: 10px !important;
}

html.dark-mode .user-header,
html.dark-mode .user-footer {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

/* TinyMCE */
html.dark-mode .tox-menubar,
html.dark-mode .tox-sidebar-wrap,
html.dark-mode .tox-statusbar,
html.dark-mode .tox-toolbar-overlord,
html.dark-mode .tox-toolbar__primary {
    background: var(--dm-bg-elevated) !important;
    color: var(--dm-text-primary) !important;
}

html.dark-mode .tox .tox-menu {
    background: var(--dm-bg-elevated) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .tox-edit-area {
    background: var(--dm-bg-surface) !important;
}

/* ============================================
   TAILWIND CLASS OVERRIDES FOR DASHBOARD
   ============================================ */
html.dark-mode [class*="tw-bg-white"] {
    background-color: var(--dm-bg-surface) !important;
}

html.dark-mode [class*="tw-bg-gray-100"] {
    background-color: var(--dm-bg-deep) !important;
}

html.dark-mode [class*="tw-bg-gray-50"] {
    background-color: var(--dm-bg-surface) !important;
}

html.dark-mode [class*="tw-text-gray-900"] {
    color: #F1F5F9 !important;
}

html.dark-mode [class*="tw-text-gray-800"] {
    color: #E2E8F0 !important;
}

html.dark-mode [class*="tw-text-gray-700"] {
    color: #CBD5E1 !important;
}

html.dark-mode [class*="tw-text-gray-600"] {
    color: #94A3B8 !important;
}

html.dark-mode [class*="tw-text-gray-500"] {
    color: #94A3B8 !important;
}

html.dark-mode [class*="tw-border-gray-200"] {
    border-color: rgba(139, 92, 246, 0.08) !important;
}

html.dark-mode [class*="tw-border-gray-300"] {
    border-color: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode [class*="tw-ring-gray-200"] {
    --tw-ring-color: rgba(139, 92, 246, 0.08) !important;
}

html.dark-mode [class*="tw-border-dashed"] {
    border-style: solid !important;
    border-color: rgba(139, 92, 246, 0.06) !important;
}

/* Dashboard gradient override */
html.dark-mode [class*="tw-from-primary-800"],
html.dark-mode [class*="tw-bg-gradient-to-r"][class*="tw-from-"] {
    background: var(--dm-bg-deep) !important;
}

/* ============================================
   LOGIN PAGE DARK STYLES
   ============================================ */
html.dark-mode .dm-login-card {
    background: rgba(13, 21, 38, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(139, 92, 246, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

html.dark-mode .login-input {
    background: rgba(15, 22, 41, 0.8) !important;
    border-color: rgba(139, 92, 246, 0.1);
    color: #F1F5F9;
}

html.dark-mode .login-input:focus {
    border-color: #8B5CF6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
    background: rgba(26, 35, 50, 0.9) !important;
}

html.dark-mode .login-input::placeholder {
    color: #64748B;
}

html.dark-mode .login-input-icon {
    color: #64748B;
}

html.dark-mode .dm-login-btn {
    background: linear-gradient(135deg, #8B5CF6, #6D28D9);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

html.dark-mode .dm-login-btn:hover {
    background: linear-gradient(135deg, #7C3AED, #5B21B6);
    box-shadow: 0 6px 25px rgba(139, 92, 246, 0.4);
}

/* ============================================
   TOGGLE BUTTON STYLES
   ============================================ */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
    color: white;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.theme-toggle-btn svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
}

html.dark-mode .theme-icon-sun {
    display: block;
}

html.dark-mode .theme-icon-moon {
    display: none;
}

html:not(.dark-mode) .theme-icon-sun {
    display: none;
}

html:not(.dark-mode) .theme-icon-moon {
    display: block;
    color: #374151;
}

html:not(.dark-mode) .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* ============================================
   CONTENT HEADER & PAGE TITLE
   ============================================ */
html.dark-mode .content-header {
    background: transparent !important;
}

html.dark-mode .content-header h1,
html.dark-mode .content-header .breadcrumb {
    color: var(--dm-text-primary) !important;
}

/* ============================================
   MOBILE SIDEBAR
   ============================================ */
@media (max-width: 1023px) {
    html.dark-mode .side-bar {
        background: #080D1A !important;
        border-right: 1px solid rgba(139, 92, 246, 0.08) !important;
    }
}

/* ============================================
   PRINT OVERRIDE
   ============================================ */
@media print {

    body,
    .content-wrapper,
    .content,
    .box,
    .box-body,
    .box-header,
    table,
    .table>thead>tr>th,
    .table>tbody>tr>td {
        background: #fff !important;
        color: #000 !important;
        border-color: #ddd !important;
    }
}


/* ============================================
   DASHBOARD /HOME — DARK MODERN OVERRIDES V2
   ============================================ */

/* === App Layout Body & Scrollable Container === */
html.dark-mode body {
    background: #0B1120 !important;
}

html.dark-mode .tw-bg-gray-100 {
    background: #0B1120 !important;
}

html.dark-mode #scrollable-container {
    background: #0B1120 !important;
}

html.dark-mode main.tw-bg-gray-100 {
    background: #0B1120 !important;
}

/* === Header Dropdown Menus (Quick Add, User Dropdown) === */
html.dark-mode .tw-dw-dropdown ul[role="menu"],
html.dark-mode details ul[role="menu"] {
    background: rgba(19, 27, 46, 0.95) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(139, 92, 246, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .tw-dw-dropdown ul[role="menu"] a,
html.dark-mode details ul[role="menu"] a {
    color: #94A3B8 !important;
}

html.dark-mode .tw-dw-dropdown ul[role="menu"] a:hover,
html.dark-mode details ul[role="menu"] a:hover {
    color: #F1F5F9 !important;
    background: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode details ul[role="menu"] p {
    color: #94A3B8 !important;
}

html.dark-mode details ul[role="menu"] .tw-text-gray-900 {
    color: #F1F5F9 !important;
}

html.dark-mode .tw-ring-gray-200 {
    --tw-ring-color: rgba(255, 255, 255, 0.08) !important;
}

/* === Dashboard Hero Gradient Area === */
html.dark-mode .tw-bg-gradient-to-r[class*="tw-from-primary"],
html.dark-mode .tw-bg-gradient-to-r[class*="tw-from-blue"] {
    background: linear-gradient(to right, #0B1120, #131B2E) !important;
}

html.dark-mode [class*="tw-from-primary-800"][class*="tw-to-primary-900"],
html.dark-mode [class*="tw-from-blue-800"][class*="tw-to-blue-900"] {
    background: linear-gradient(to right, #0B1120, #131B2E) !important;
}

/* === Dashboard Stat Cards (Top 8) === */
html.dark-mode .tw-bg-white.tw-shadow-sm.tw-rounded-xl {
    background: rgba(30, 41, 59, 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(139, 92, 246, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

html.dark-mode .tw-bg-white.tw-shadow-sm.tw-rounded-xl:hover {
    border-color: rgba(139, 92, 246, 0.2) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(139, 92, 246, 0.06) !important;
}

html.dark-mode .tw-bg-white.tw-shadow-sm.tw-rounded-xl .tw-text-gray-500 {
    color: #94A3B8 !important;
}

html.dark-mode .tw-bg-white.tw-shadow-sm.tw-rounded-xl .tw-text-gray-900 {
    color: #F1F5F9 !important;
}

/* Stat card icon backgrounds → translucent dark variants */
html.dark-mode .tw-bg-sky-100 {
    background: rgba(14, 165, 233, 0.15) !important;
}

html.dark-mode .tw-bg-green-100 {
    background: rgba(34, 197, 94, 0.15) !important;
}

html.dark-mode .tw-bg-yellow-100 {
    background: rgba(234, 179, 8, 0.15) !important;
}

html.dark-mode .tw-bg-red-100 {
    background: rgba(239, 68, 68, 0.15) !important;
}

/* === Date Filter Button === */
html.dark-mode #dashboard_date_filter {
    background: rgba(30, 41, 59, 0.8) !important;
    color: #F1F5F9 !important;
    border: 1px solid rgba(139, 92, 246, 0.12) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

html.dark-mode #dashboard_date_filter:hover {
    background: rgba(139, 92, 246, 0.12) !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
}

/* === Dashboard Location Select === */
html.dark-mode #dashboard_location,
html.dark-mode .select2-container--default .select2-selection--single {
    background: rgba(15, 22, 41, 0.8) !important;
    color: #F1F5F9 !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #F1F5F9 !important;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #64748B !important;
}

html.dark-mode .select2-dropdown {
    background: rgba(19, 27, 46, 0.98) !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .select2-results__option {
    color: #CBD5E1 !important;
}

html.dark-mode .select2-results__option--highlighted {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #F1F5F9 !important;
}

html.dark-mode .select2-search__field {
    background: rgba(15, 22, 41, 0.8) !important;
    color: #F1F5F9 !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

/* === Chart/Graph Container (tw-bg-gray-50) === */
html.dark-mode .tw-bg-gray-50 {
    background: transparent !important;
}

html.dark-mode .tw-border-gray-200.tw-border-dashed {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* === Table Section Cards (already dark bg #1E293B) === */
html.dark-mode .tw-bg-\[\#1E293B\] h3 {
    color: #F1F5F9 !important;
}

/* === DataTables inside Dashboard === */
html.dark-mode table.table {
    color: #CBD5E1 !important;
}

html.dark-mode table.table thead tr th {
    background: rgba(139, 92, 246, 0.08) !important;
    color: #C4B5FD !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
    font-weight: 600;
}

html.dark-mode table.table tbody tr {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
}

html.dark-mode table.table tbody tr:hover {
    background: rgba(139, 92, 246, 0.05) !important;
}

html.dark-mode table.table tbody tr td {
    border-color: rgba(255, 255, 255, 0.04) !important;
    color: #CBD5E1 !important;
}

html.dark-mode table.table-striped>tbody>tr:nth-of-type(odd) {
    background: rgba(15, 23, 42, 0.4) !important;
}

html.dark-mode table.table tfoot tr {
    background: rgba(139, 92, 246, 0.06) !important;
}

html.dark-mode table.table tfoot tr td {
    color: #E2E8F0 !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

/* === DataTables Pagination & Info === */
html.dark-mode .dataTables_wrapper .dataTables_info {
    color: #64748B !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #94A3B8 !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: rgba(139, 92, 246, 0.2) !important;
    color: #C4B5FD !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #F1F5F9 !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
}

html.dark-mode .dataTables_wrapper .dataTables_length select,
html.dark-mode .dataTables_wrapper .dataTables_filter input {
    background: rgba(15, 22, 41, 0.8) !important;
    color: #F1F5F9 !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
    border-radius: 8px;
}

/* === Footer === */
html.dark-mode .tw-text-gray-500 {
    color: #4B5563 !important;
}

/* === Sidebar Header (Business Name Area) === */
html.dark-mode .side-bar a[class*="tw-bg-primary"],
html.dark-mode .side-bar a[class*="tw-bg-blue"] {
    background: linear-gradient(135deg, #131B2E, #1E293B) !important;
}

/* === Popover & Tooltip Dark === */
html.dark-mode .popover {
    background: rgba(19, 27, 46, 0.95) !important;
    border-color: rgba(139, 92, 246, 0.12) !important;
}

html.dark-mode .popover-content {
    color: #CBD5E1 !important;
}

html.dark-mode .popover .arrow::after {
    border-bottom-color: rgba(19, 27, 46, 0.95) !important;
}

html.dark-mode .tooltip-inner {
    background: rgba(19, 27, 46, 0.95) !important;
    color: #F1F5F9 !important;
}

/* === Form Controls Global === */
html.dark-mode .form-control {
    background: rgba(15, 22, 41, 0.8) !important;
    color: #F1F5F9 !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .form-control:focus {
    border-color: #8B5CF6 !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15) !important;
}

/* === Info Circle Popover on Dashboard === */
html.dark-mode .hover-q {
    color: #8B5CF6 !important;
}

/* === Dashboard transitional bg fix === */
html.dark-mode .tw-bg-\[\#0F172A\] {
    background: #0B1120 !important;
}

/* === Calendar Widget === */
html.dark-mode .fc {
    color: #CBD5E1 !important;
}

html.dark-mode .fc-toolbar h2 {
    color: #F1F5F9 !important;
}

html.dark-mode .fc .fc-button {
    background: rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
    color: #C4B5FD !important;
}

html.dark-mode .fc .fc-button:hover {
    background: rgba(139, 92, 246, 0.25) !important;
}

html.dark-mode .fc .fc-button-active {
    background: rgba(139, 92, 246, 0.3) !important;
}

html.dark-mode .fc td,
html.dark-mode .fc th {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .fc-today {
    background: rgba(139, 92, 246, 0.08) !important;
}

/* === Modal Dark Styling === */
html.dark-mode .modal-content {
    background: #131B2E !important;
    border: 1px solid rgba(139, 92, 246, 0.12) !important;
    color: #F1F5F9 !important;
}

html.dark-mode .modal-header {
    border-bottom-color: rgba(139, 92, 246, 0.1) !important;
    color: #F1F5F9 !important;
}

html.dark-mode .modal-header .close {
    color: #94A3B8 !important;
}

html.dark-mode .modal-footer {
    border-top-color: rgba(139, 92, 246, 0.1) !important;
}

html.dark-mode .modal-title {
    color: #F1F5F9 !important;
}

/* === Notification Dropdown === */
html.dark-mode .notifications-list {
    background: rgba(19, 27, 46, 0.98) !important;
    border: 1px solid rgba(139, 92, 246, 0.12) !important;
}

html.dark-mode .notifications-list .notification-item {
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
    color: #CBD5E1 !important;
}

html.dark-mode .notifications-list .notification-item:hover {
    background: rgba(139, 92, 246, 0.06) !important;
}

/* === Box widget override (legacy AdminLTE) === */
html.dark-mode .box {
    background: rgba(30, 41, 59, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .box-header {
    color: #F1F5F9 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .box-body {
    color: #CBD5E1 !important;
}