/* ==========================================================================
   Backend Dark Mode — Serveotik ERP
   ==========================================================================
   Dark mode overrides for all AdminLTE backend pages.
   Targets html[data-ui-theme="dark"] (set by the JS theme switcher).
   Works by overriding ui-unified.css variables + specific component rules.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKEN OVERRIDES
   ========================================================================== */

html[data-ui-theme="dark"] {
  --ui-surface-0: #1a1f2e;
  --ui-surface-1: #151a27;
  --ui-surface-2: #232839;
  --ui-text-1: #e5e7eb;
  --ui-text-2: #9ca3af;
  --ui-border: rgba(255, 255, 255, 0.10);
  --ui-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.25);
  --ui-shadow-md: 0 14px 34px rgba(0, 0, 0, 0.35);

  /* Additional backend-specific dark tokens */
  --bk-bg: #111827;
  --bk-surface: #1a1f2e;
  --bk-surface-elevated: #232839;
  --bk-surface-hover: #2a3042;
  --bk-border: rgba(255, 255, 255, 0.10);
  --bk-border-strong: rgba(255, 255, 255, 0.16);
  --bk-text: #e5e7eb;
  --bk-text-secondary: #9ca3af;
  --bk-text-muted: #6b7280;
  --bk-input-bg: #1e2435;
  --bk-input-border: rgba(255, 255, 255, 0.12);

  color-scheme: dark;
}


/* ==========================================================================
   2. BODY & LAYOUT
   ========================================================================== */

html[data-ui-theme="dark"] body {
  background-color: var(--bk-bg);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .content-wrapper {
  background: var(--bk-bg);
}

html[data-ui-theme="dark"] .wrapper {
  background: var(--bk-bg);
}

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

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


/* ==========================================================================
   3. SIDEBAR
   ========================================================================== */

html[data-ui-theme="dark"] .main-sidebar {
  background: #151a27;
  border-right: 1px solid var(--bk-border);
}

html[data-ui-theme="dark"] .sidebar {
  background: transparent;
}

html[data-ui-theme="dark"] .sidebar-menu > li > a {
  color: var(--bk-text-secondary);
  border-left: 3px solid transparent;
}

html[data-ui-theme="dark"] .sidebar-menu > li > a:hover {
  background: var(--bk-surface-hover);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .sidebar-menu > li.active > a {
  background: var(--bk-surface-elevated);
  color: #fff;
  border-left-color: var(--ui-brand-700, #0f4ed8);
}

html[data-ui-theme="dark"] .sidebar-menu > li.active > a > .fa,
html[data-ui-theme="dark"] .sidebar-menu > li.active > a > .glyphicon,
html[data-ui-theme="dark"] .sidebar-menu > li.active > a > .ion {
  color: #fff;
}

html[data-ui-theme="dark"] .treeview-menu {
  background: #111620;
}

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

html[data-ui-theme="dark"] .treeview-menu > li > a:hover {
  color: var(--bk-text);
  background: var(--bk-surface-hover);
}

html[data-ui-theme="dark"] .treeview-menu > li.active > a {
  color: #fff;
}

html[data-ui-theme="dark"] .sidebar-menu .treeview.active > a {
  background: var(--bk-surface-elevated);
  color: #fff;
}

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

html[data-ui-theme="dark"] .user-panel > .info > p {
  color: var(--bk-text);
}

/* Sidebar brand area */
html[data-ui-theme="dark"] .app-theme-sidebar-brand {
  border-bottom: 1px solid var(--bk-border);
}

html[data-ui-theme="dark"] .sidebar-menu > li > a > .pull-right-container > .label {
  background: var(--bk-surface-elevated);
  color: var(--bk-text-secondary);
}


/* ==========================================================================
   4. TOP NAVBAR / HEADER
   ========================================================================== */

html[data-ui-theme="dark"] .main-header .navbar {
  border-bottom: 1px solid var(--bk-border);
}

/* User dropdown */
html[data-ui-theme="dark"] .navbar-nav > .user-menu > .dropdown-menu {
  background: var(--bk-surface);
  border: 1px solid var(--bk-border-strong);
}

html[data-ui-theme="dark"] .dropdown-menu {
  background-color: var(--bk-surface) !important;
  border-color: var(--bk-border-strong);
  color: var(--bk-text);
}

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

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

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

/* Notification dropdown — override Tailwind !tw-bg-white */
html[data-ui-theme="dark"] .notifications-menu .dropdown-menu {
  background-color: var(--bk-surface) !important;
  --tw-ring-color: var(--bk-border-strong) !important;
  --tw-shadow-color: rgba(0, 0, 0, 0.4) !important;
}

/* Notification items */
html[data-ui-theme="dark"] .notifications-menu .dropdown-menu .menu li a {
  color: var(--bk-text);
  border-bottom-color: var(--bk-border);
}

html[data-ui-theme="dark"] .notifications-menu .dropdown-menu .menu li a:hover {
  background-color: var(--bk-surface-hover);
}

html[data-ui-theme="dark"] .notifications-menu .notification-li.unread {
  background: rgba(37, 99, 235, 0.12) !important;
  border-left-color: #3b82f6;
}

html[data-ui-theme="dark"] .notifications-menu .notification-li.unread .notif-info {
  color: var(--bk-text) !important;
}

/* Dropdown-menu-right & other dropdown variants */
html[data-ui-theme="dark"] .dropdown-menu-right {
  background-color: var(--bk-surface) !important;
}

html[data-ui-theme="dark"] .dropdown-menu > .dropdown-header {
  color: var(--bk-text-muted);
}

html[data-ui-theme="dark"] .dropdown-menu > .active > a,
html[data-ui-theme="dark"] .dropdown-menu > .active > a:hover,
html[data-ui-theme="dark"] .dropdown-menu > .active > a:focus {
  background-color: var(--ui-brand-700, #0f4ed8);
  color: #fff;
}


/* ==========================================================================
   5. CARDS & BOXES (Dashboard)
   ========================================================================== */

/* ui-unified.css already reads --ui-surface-0/1, --ui-border, --ui-shadow-sm
   which we overrode in section 1. Additional overrides: */

html[data-ui-theme="dark"] .box-header {
  color: var(--bk-text);
}

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

html[data-ui-theme="dark"] .box-footer {
  background: var(--bk-surface-elevated);
  border-top: 1px solid var(--bk-border);
  color: var(--bk-text-secondary);
}

html[data-ui-theme="dark"] .box-footer a {
  color: var(--bk-text-secondary);
}

html[data-ui-theme="dark"] .box-footer a:hover {
  color: var(--bk-text);
}

/* info-box content */
html[data-ui-theme="dark"] .info-box-text {
  color: var(--bk-text-secondary);
}

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

/* small-box */
html[data-ui-theme="dark"] .small-box > .small-box-footer {
  background: rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.8);
}

/* nav-tabs-custom */
html[data-ui-theme="dark"] .nav-tabs-custom {
  background: var(--bk-surface);
  border: 1px solid var(--bk-border);
  border-radius: var(--ui-radius-lg, 16px);
  box-shadow: var(--ui-shadow-sm);
}

html[data-ui-theme="dark"] .nav-tabs-custom > .nav-tabs {
  border-bottom-color: var(--bk-border);
  background: var(--bk-surface-elevated);
}

html[data-ui-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a {
  color: var(--bk-text-secondary);
}

html[data-ui-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a:hover {
  color: var(--bk-text);
  background: transparent;
}

html[data-ui-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a {
  color: var(--bk-text);
  background: var(--bk-surface);
  border-top-color: var(--ui-brand-700, #0f4ed8);
}

html[data-ui-theme="dark"] .nav-tabs-custom > .tab-content {
  background: var(--bk-surface);
  color: var(--bk-text);
}

/* Bootstrap nav-tabs (standalone) */
html[data-ui-theme="dark"] .nav-tabs {
  border-bottom-color: var(--bk-border);
}

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

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

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


/* ==========================================================================
   6. DATA TABLES
   ========================================================================== */

/* Base .table inherits from ui-unified --ui-* token overrides.
   Additional specific fixes: */

html[data-ui-theme="dark"] .table > tbody > tr > td {
  border-top-color: var(--bk-border);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .table > thead > tr > th {
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.03);
}

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

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

html[data-ui-theme="dark"] .table-hover > tbody > tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

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

/* DataTables wrapper */
html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_length label,
html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_filter label,
html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_info {
  color: var(--bk-text-secondary);
}

html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_length select,
html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_filter input {
  background: var(--bk-input-bg);
  border: 1px solid var(--bk-input-border);
  color: var(--bk-text);
  border-radius: 8px;
}

/* Pagination */
html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--bk-text-secondary) !important;
  border-color: var(--bk-border);
  background: transparent;
}

html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bk-surface-hover);
  color: var(--bk-text) !important;
  border-color: var(--bk-border-strong);
}

html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--ui-brand-700, #0f4ed8);
  border-color: transparent;
  color: #fff !important;
}

html[data-ui-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: var(--bk-text-muted) !important;
  opacity: 0.5;
}

/* Bootstrap pagination */
html[data-ui-theme="dark"] .pagination > li > a,
html[data-ui-theme="dark"] .pagination > li > span {
  background: var(--bk-surface);
  border-color: var(--bk-border);
  color: var(--bk-text-secondary);
}

html[data-ui-theme="dark"] .pagination > li > a:hover {
  background: var(--bk-surface-hover);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .pagination > .active > a,
html[data-ui-theme="dark"] .pagination > .active > span {
  background: var(--ui-brand-700, #0f4ed8);
  border-color: transparent;
  color: #fff;
}

/* DataTables export buttons */
html[data-ui-theme="dark"] .dt-buttons .btn-default,
html[data-ui-theme="dark"] .dt-buttons .dt-button {
  background: var(--bk-surface-elevated);
  border-color: var(--bk-border);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .dt-buttons .btn-default:hover,
html[data-ui-theme="dark"] .dt-buttons .dt-button:hover {
  background: var(--bk-surface-hover);
}


/* ==========================================================================
   7. FORMS & INPUTS
   ========================================================================== */

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

html[data-ui-theme="dark"] .form-control:focus {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  background: var(--bk-input-bg);
  color: var(--bk-text);
}

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

html[data-ui-theme="dark"] .form-control[disabled],
html[data-ui-theme="dark"] .form-control[readonly],
html[data-ui-theme="dark"] fieldset[disabled] .form-control {
  background: rgba(255, 255, 255, 0.04);
  color: var(--bk-text-muted);
}

html[data-ui-theme="dark"] .input-group-addon {
  background: var(--bk-surface-elevated);
  border-color: var(--bk-input-border);
  color: var(--bk-text-secondary);
}

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

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

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

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

html[data-ui-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--bk-text-muted);
}

html[data-ui-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--bk-text-muted) transparent transparent transparent;
}

html[data-ui-theme="dark"] .select2-dropdown {
  background: var(--bk-surface);
  border-color: var(--bk-border-strong);
}

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

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

html[data-ui-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--ui-brand-700, #0f4ed8);
  color: #fff;
}

html[data-ui-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--bk-surface-elevated);
}

html[data-ui-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--bk-surface-elevated);
  border-color: var(--bk-border);
  color: var(--bk-text);
}

/* Date range picker */
html[data-ui-theme="dark"] .daterangepicker {
  background: var(--bk-surface);
  border-color: var(--bk-border-strong);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .daterangepicker .calendar-table {
  background: var(--bk-surface);
  border-color: var(--bk-border);
}

html[data-ui-theme="dark"] .daterangepicker td.off,
html[data-ui-theme="dark"] .daterangepicker td.off.in-range {
  background-color: #0f172a;
  color: var(--bk-text-muted);
}

html[data-ui-theme="dark"] .daterangepicker td.active,
html[data-ui-theme="dark"] .daterangepicker td.active:hover {
  background-color: #6366f1;
  color: #fff;
}

html[data-ui-theme="dark"] .daterangepicker td.in-range {
  background: rgba(59, 130, 246, 0.15);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .daterangepicker .drp-buttons {
  border-top-color: var(--bk-border);
}

html[data-ui-theme="dark"] .daterangepicker th {
  color: var(--bk-text-secondary);
}

html[data-ui-theme="dark"] .daterangepicker td {
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .daterangepicker td.available:hover,
html[data-ui-theme="dark"] .daterangepicker th.available:hover {
  background-color: #334155;
  color: #f8fafc;
}

html[data-ui-theme="dark"] .daterangepicker td.today {
  background-color: #475569 !important;
  color: #f8fafc !important;
}

html[data-ui-theme="dark"] .daterangepicker select.monthselect,
html[data-ui-theme="dark"] .daterangepicker select.yearselect {
  background: var(--bk-input-bg);
  color: var(--bk-text);
  border-color: var(--bk-input-border);
}

/* Bootstrap datepicker */
html[data-ui-theme="dark"] .datepicker {
  background-color: #1e293b;
  color: var(--bk-text);
}

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

html[data-ui-theme="dark"] .datepicker table tr td.today {
  background-color: #475569;
  color: #f8fafc;
}

html[data-ui-theme="dark"] .datepicker table tr td.active {
  background-color: #6366f1;
  color: #fff;
}

html[data-ui-theme="dark"] .datepicker table tr td:hover {
  background-color: #334155;
}

html[data-ui-theme="dark"] .datepicker .datepicker-switch,
html[data-ui-theme="dark"] .datepicker .prev,
html[data-ui-theme="dark"] .datepicker .next {
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .datepicker .datepicker-switch:hover,
html[data-ui-theme="dark"] .datepicker .prev:hover,
html[data-ui-theme="dark"] .datepicker .next:hover {
  background-color: #334155;
}

/* Validation states */
html[data-ui-theme="dark"] .has-error .form-control {
  border-color: #ef4444;
}

html[data-ui-theme="dark"] .has-error .help-block,
html[data-ui-theme="dark"] .has-error .control-label {
  color: #f87171;
}

html[data-ui-theme="dark"] .has-success .form-control {
  border-color: #22c55e;
}

html[data-ui-theme="dark"] .has-success .help-block,
html[data-ui-theme="dark"] .has-success .control-label {
  color: #4ade80;
}

html[data-ui-theme="dark"] .has-warning .form-control {
  border-color: #f59e0b;
}

/* Native <select> elements */
html[data-ui-theme="dark"] select.form-control,
html[data-ui-theme="dark"] select {
  background-color: var(--bk-input-bg);
  color: var(--bk-text);
  border-color: var(--bk-input-border);
}

html[data-ui-theme="dark"] select.form-control:focus,
html[data-ui-theme="dark"] select:focus {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  background-color: var(--bk-input-bg);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] select option {
  background-color: var(--bk-input-bg);
  color: var(--bk-text);
}

/* iCheck custom checkboxes — remove white background artifacts */
html[data-ui-theme="dark"] .icheckbox_square-blue,
html[data-ui-theme="dark"] .iradio_square-blue,
html[data-ui-theme="dark"] .icheckbox_square-green,
html[data-ui-theme="dark"] .iradio_square-green,
html[data-ui-theme="dark"] .icheckbox_square-red,
html[data-ui-theme="dark"] .iradio_square-red,
html[data-ui-theme="dark"] .icheckbox_square-grey,
html[data-ui-theme="dark"] .iradio_square-grey,
html[data-ui-theme="dark"] .icheckbox_square-orange,
html[data-ui-theme="dark"] .iradio_square-orange,
html[data-ui-theme="dark"] .icheckbox_square-yellow,
html[data-ui-theme="dark"] .iradio_square-yellow,
html[data-ui-theme="dark"] .icheckbox_square-pink,
html[data-ui-theme="dark"] .iradio_square-pink,
html[data-ui-theme="dark"] .icheckbox_square-purple,
html[data-ui-theme="dark"] .iradio_square-purple,
html[data-ui-theme="dark"] .icheckbox_square-aero,
html[data-ui-theme="dark"] .iradio_square-aero {
  background-color: transparent;
  border-color: var(--bk-input-border);
}

/* iCheck helper/ins elements that create white bg artifacts */
html[data-ui-theme="dark"] .icheckbox_square-blue ins,
html[data-ui-theme="dark"] .iradio_square-blue ins,
html[data-ui-theme="dark"] [class*="icheckbox_square-"] ins,
html[data-ui-theme="dark"] [class*="iradio_square-"] ins {
  background-color: transparent;
}


/* ==========================================================================
   8. BUTTONS (dark mode adjustments)
   ========================================================================== */

/* Default/secondary button dark mode */
html[data-ui-theme="dark"] .btn-default {
  background: var(--bk-surface-elevated);
  border-color: var(--bk-border);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .btn-default:hover,
html[data-ui-theme="dark"] .btn-default:focus {
  background: var(--bk-surface-hover);
  color: var(--bk-text);
}

/* Keep danger/success/warning colors vibrant */
html[data-ui-theme="dark"] .btn-danger {
  background: #dc2626;
  border-color: transparent;
  color: #fff;
}

html[data-ui-theme="dark"] .btn-danger:hover {
  background: #b91c1c;
}

html[data-ui-theme="dark"] .btn-success {
  background: #16a34a;
  border-color: transparent;
  color: #fff;
}

html[data-ui-theme="dark"] .btn-success:hover {
  background: #15803d;
}


/* ==========================================================================
   9. MODALS & DIALOGS
   ========================================================================== */

html[data-ui-theme="dark"] .modal-content {
  background: var(--bk-surface);
  border: 1px solid var(--bk-border-strong);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .modal-header {
  border-bottom-color: var(--bk-border);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .modal-header .close {
  color: var(--bk-text-secondary);
  text-shadow: none;
  opacity: 0.7;
}

html[data-ui-theme="dark"] .modal-header .close:hover {
  color: var(--bk-text);
  opacity: 1;
}

html[data-ui-theme="dark"] .modal-footer {
  border-top-color: var(--bk-border);
  background: var(--bk-surface-elevated);
}

html[data-ui-theme="dark"] .modal-body {
  color: var(--bk-text);
}

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

/* SweetAlert2 */
html[data-ui-theme="dark"] .swal2-popup {
  background: var(--bk-surface);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .swal2-title {
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .swal2-content,
html[data-ui-theme="dark"] .swal2-html-container {
  color: var(--bk-text-secondary);
}

html[data-ui-theme="dark"] .swal2-input {
  background: var(--bk-input-bg);
  border-color: var(--bk-input-border);
  color: var(--bk-text);
}


/* ==========================================================================
   10. ALERTS & BADGES
   ========================================================================== */

html[data-ui-theme="dark"] .alert-info {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(37, 99, 235, 0.3);
  color: #93c5fd;
}

html[data-ui-theme="dark"] .alert-success {
  background: rgba(22, 163, 74, 0.15);
  border-color: rgba(22, 163, 74, 0.3);
  color: #86efac;
}

html[data-ui-theme="dark"] .alert-warning {
  background: rgba(217, 119, 6, 0.15);
  border-color: rgba(217, 119, 6, 0.3);
  color: #fcd34d;
}

html[data-ui-theme="dark"] .alert-danger {
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.3);
  color: #fca5a5;
}

html[data-ui-theme="dark"] .label-default {
  background: var(--bk-surface-elevated);
  color: var(--bk-text-secondary);
}

html[data-ui-theme="dark"] .badge {
  color: #fff;
}


/* ==========================================================================
   11. BREADCRUMBS & MISC NAVIGATION
   ========================================================================== */

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

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

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

html[data-ui-theme="dark"] .breadcrumb a {
  color: var(--bk-text-secondary);
}

/* List groups */
html[data-ui-theme="dark"] .list-group-item {
  background: var(--bk-surface);
  border-color: var(--bk-border);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .list-group-item:hover {
  background: var(--bk-surface-hover);
}

/* Well */
html[data-ui-theme="dark"] .well {
  background: var(--bk-surface-elevated);
  border-color: var(--bk-border);
  color: var(--bk-text);
}


/* ==========================================================================
   12. SETTINGS TABS (pos-tab pattern)
   ========================================================================== */

html[data-ui-theme="dark"] .pos-tab-menu .list-group-item {
  background: transparent;
  border-color: var(--bk-border);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .pos-tab-menu .list-group-item:hover {
  background: var(--bk-surface-hover);
}

html[data-ui-theme="dark"] section.content .pos-tab-menu {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.04));
  border-right-color: var(--bk-border);
}

html[data-ui-theme="dark"] section.content .pos-tab-menu .list-group > a {
  color: var(--bk-text-secondary);
  background: transparent;
  border-top-color: var(--bk-border);
  border-bottom-color: var(--bk-border);
}

html[data-ui-theme="dark"] section.content .pos-tab .pos-tab-content {
  background: linear-gradient(180deg, var(--bk-surface), var(--bk-surface-elevated));
  border-left-color: var(--bk-border);
}

html[data-ui-theme="dark"] .page-business-settings .pos-tab .pos-tab-content {
  border-top-color: var(--bk-border);
}

html[data-ui-theme="dark"] section.content .pos-tab .pos-tab-content .form-group {
  background: var(--bk-surface-elevated);
  border-color: var(--bk-border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

html[data-ui-theme="dark"] .page-business-settings .business-settings-submit-row .col-sm-12 {
  background: linear-gradient(180deg, rgba(26, 31, 46, 0), rgba(26, 31, 46, 0.92) 40%);
}


/* ==========================================================================
   13. PROGRESS BARS
   ========================================================================== */

html[data-ui-theme="dark"] .progress {
  background: var(--bk-surface-elevated);
}


/* ==========================================================================
   14. PANELS
   ========================================================================== */

html[data-ui-theme="dark"] .panel {
  background: var(--bk-surface);
  border-color: var(--bk-border);
}

html[data-ui-theme="dark"] .panel-heading {
  background: var(--bk-surface-elevated);
  border-color: var(--bk-border);
  color: var(--bk-text);
}

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

html[data-ui-theme="dark"] .panel-footer {
  background: var(--bk-surface-elevated);
  border-color: var(--bk-border);
}

html[data-ui-theme="dark"] .panel-default > .panel-heading {
  background: var(--bk-surface-elevated);
  color: var(--bk-text);
}


/* ==========================================================================
   15. CALLOUTS
   ========================================================================== */

html[data-ui-theme="dark"] .callout {
  background: var(--bk-surface-elevated);
  border-color: var(--bk-border);
  color: var(--bk-text);
}


/* ==========================================================================
   16. SCROLLBAR
   ========================================================================== */

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

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

html[data-ui-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

html[data-ui-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}


/* ==========================================================================
   17. TAILWIND OVERRIDES (tw-bg-white, etc.)
   ========================================================================== */

html[data-ui-theme="dark"] .tw-bg-white {
  background-color: var(--bk-surface) !important;
}

html[data-ui-theme="dark"] .tw-bg-gray-50 {
  background-color: var(--bk-surface-elevated) !important;
}

html[data-ui-theme="dark"] .tw-bg-gray-100 {
  background-color: var(--bk-surface-elevated) !important;
}

html[data-ui-theme="dark"] .tw-text-gray-700,
html[data-ui-theme="dark"] .tw-text-gray-800,
html[data-ui-theme="dark"] .tw-text-gray-900 {
  color: var(--bk-text) !important;
}

html[data-ui-theme="dark"] .tw-text-gray-500,
html[data-ui-theme="dark"] .tw-text-gray-600 {
  color: var(--bk-text-secondary) !important;
}

html[data-ui-theme="dark"] .tw-border-gray-200,
html[data-ui-theme="dark"] .tw-border-gray-300 {
  border-color: var(--bk-border) !important;
}

html[data-ui-theme="dark"] .tw-divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--bk-border) !important;
}

/* Tailwind hover overrides */
html[data-ui-theme="dark"] .hover\:tw-bg-gray-100:hover {
  background-color: var(--bk-surface-hover) !important;
}

html[data-ui-theme="dark"] .hover\:tw-text-gray-900:hover {
  color: var(--bk-text) !important;
}

html[data-ui-theme="dark"] .focus\:tw-text-gray-900:focus {
  color: var(--bk-text) !important;
}

html[data-ui-theme="dark"] .focus\:tw-bg-gray-100:focus {
  background-color: var(--bk-surface-hover) !important;
}

/* Sidebar-specific: tw-bg-white sidebar container */
html[data-ui-theme="dark"] .side-bar {
  background-color: #151a27 !important;
  border-color: var(--bk-border) !important;
}

html[data-ui-theme="dark"] .side-bar #side-bar {
  border-color: var(--bk-border) !important;
}

/* Sidebar dropdown sub-items container */
html[data-ui-theme="dark"] .side-bar .chiled {
  border-left-color: var(--bk-border) !important;
}

/* Sidebar dropdown sub-items: left border line */
html[data-ui-theme="dark"] .side-bar .chiled::before {
  background-color: var(--bk-border) !important;
}

/* Sidebar menu items: dark mode text and hover */
html[data-ui-theme="dark"] #side-bar a.tw-text-gray-600 {
  color: var(--bk-text-secondary) !important;
}
html[data-ui-theme="dark"] #side-bar a.tw-text-gray-600:hover {
  color: var(--bk-text) !important;
  background-color: var(--bk-surface-hover) !important;
}
/* Sidebar child items in dark mode */
html[data-ui-theme="dark"] .side-bar .chiled .tw-bg-gray-200 {
  background-color: var(--bk-border) !important;
}
html[data-ui-theme="dark"] .side-bar .chiled a.hover\:tw-bg-gray-100:hover {
  background-color: var(--bk-surface-hover) !important;
}

/* Sidebar text-gray-400 for icons etc */
html[data-ui-theme="dark"] .tw-text-gray-400 {
  color: var(--bk-text-muted) !important;
}

html[data-ui-theme="dark"] .tw-text-gray-300 {
  color: var(--bk-text-secondary) !important;
}


/* ==========================================================================
   18. TOOLTIPS & POPOVERS
   ========================================================================== */

html[data-ui-theme="dark"] .tooltip-inner {
  background: var(--bk-surface-elevated);
  color: var(--bk-text);
  border: 1px solid var(--bk-border);
}

html[data-ui-theme="dark"] .popover {
  background: var(--bk-surface);
  border-color: var(--bk-border-strong);
}

html[data-ui-theme="dark"] .popover-title {
  background: var(--bk-surface-elevated);
  border-bottom-color: var(--bk-border);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .popover-content {
  color: var(--bk-text);
}


/* ==========================================================================
   19. LINKS & TEXT UTILITIES
   ========================================================================== */

html[data-ui-theme="dark"] a {
  color: #60a5fa;
}

html[data-ui-theme="dark"] a:hover {
  color: #93bbfd;
}

/* Keep primary-actioned links styled by brand */
html[data-ui-theme="dark"] .btn-primary a,
html[data-ui-theme="dark"] .btn a {
  color: inherit;
}

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

html[data-ui-theme="dark"] .text-primary {
  color: #60a5fa !important;
}

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


/* ==========================================================================
   20. TINYMCE EDITOR DARK MODE
   ========================================================================== */

html[data-ui-theme="dark"] .tox.tox-tinymce {
  border-color: var(--bk-border) !important;
}

html[data-ui-theme="dark"] .tox .tox-menubar,
html[data-ui-theme="dark"] .tox .tox-toolbar,
html[data-ui-theme="dark"] .tox .tox-toolbar__overflow,
html[data-ui-theme="dark"] .tox .tox-toolbar__primary {
  background: var(--bk-surface-elevated) !important;
  border-bottom-color: var(--bk-border) !important;
}

html[data-ui-theme="dark"] .tox .tox-tbtn {
  color: var(--bk-text) !important;
}

html[data-ui-theme="dark"] .tox .tox-tbtn:hover {
  background: var(--bk-surface-hover) !important;
}

html[data-ui-theme="dark"] .tox .tox-tbtn svg {
  fill: var(--bk-text-secondary) !important;
}

html[data-ui-theme="dark"] .tox .tox-edit-area__iframe {
  background: var(--bk-input-bg) !important;
}

html[data-ui-theme="dark"] .tox .tox-statusbar {
  background: var(--bk-surface-elevated) !important;
  border-top-color: var(--bk-border) !important;
  color: var(--bk-text-muted) !important;
}

html[data-ui-theme="dark"] .tox .tox-statusbar__text-container {
  color: var(--bk-text-muted) !important;
}

html[data-ui-theme="dark"] .tox .tox-mbtn {
  color: var(--bk-text-secondary) !important;
}

html[data-ui-theme="dark"] .tox .tox-mbtn:hover {
  background: var(--bk-surface-hover) !important;
  color: var(--bk-text) !important;
}


/* ==========================================================================
   20b. THUMBNAIL / IMAGE PLACEHOLDERS
   ========================================================================== */

html[data-ui-theme="dark"] .thumbnail {
  background: var(--bk-surface-elevated) !important;
  border-color: var(--bk-border) !important;
}

html[data-ui-theme="dark"] img[src=""],
html[data-ui-theme="dark"] img:not([src]) {
  background: var(--bk-surface-elevated);
}


/* ==========================================================================
   21. TABLE FOOTER & EXTRA FIXES
   ========================================================================== */

html[data-ui-theme="dark"] .table > tfoot > tr {
  background: var(--bk-surface-elevated);
}

html[data-ui-theme="dark"] .table > tfoot > tr > td,
html[data-ui-theme="dark"] .table > tfoot > tr > th {
  background: var(--bk-surface-elevated);
  color: var(--bk-text);
  border-color: var(--bk-border);
}

/* Footer area */
html[data-ui-theme="dark"] .main-footer {
  background: var(--bk-surface);
  border-top: 1px solid var(--bk-border);
  color: var(--bk-text-secondary);
}

/* Content header subtitle */
html[data-ui-theme="dark"] .content-header > h1 > small,
html[data-ui-theme="dark"] .content-header .page-subtitle {
  color: var(--bk-text-secondary);
}

/* btn-group dropdown menus (Actions) */
html[data-ui-theme="dark"] .btn-group > .dropdown-menu {
  background: var(--bk-surface);
  border-color: var(--bk-border-strong);
}

/* Open dropdown menus — catch any remaining white-bg artifacts */
html[data-ui-theme="dark"] .open > .dropdown-menu {
  background-color: var(--bk-surface);
}

/* Bootstrap dropdown backdrop */
html[data-ui-theme="dark"] .dropdown-backdrop {
  background: transparent;
}

/* Bootstrap-select plugin dropdown */
html[data-ui-theme="dark"] .bootstrap-select .dropdown-menu {
  background-color: var(--bk-surface) !important;
  border-color: var(--bk-border-strong);
}

html[data-ui-theme="dark"] .bootstrap-select .dropdown-menu li a {
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .bootstrap-select .dropdown-menu li a:hover,
html[data-ui-theme="dark"] .bootstrap-select .dropdown-menu li.active a {
  background-color: var(--bk-surface-hover);
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .bootstrap-select .dropdown-menu .bs-searchbox input {
  background: var(--bk-input-bg);
  border-color: var(--bk-input-border);
  color: var(--bk-text);
}

/* bg-* utility classes from Bootstrap */
html[data-ui-theme="dark"] .bg-gray,
html[data-ui-theme="dark"] .bg-gray-light {
  background-color: var(--bk-surface-elevated) !important;
}

/* Direct table row backgrounds that some pages set inline */
html[data-ui-theme="dark"] .table > tbody > tr[style*="background"],
html[data-ui-theme="dark"] .table > tfoot > tr[style*="background"] {
  background: var(--bk-surface-elevated) !important;
}

/* Filter sections */
html[data-ui-theme="dark"] .box-header .box-tools .btn-default {
  background: var(--bk-surface-elevated);
  border-color: var(--bk-border);
  color: var(--bk-text);
}


/* ==========================================================================
   22. ASSETS & MANUFACTURING MODULES
   ========================================================================== */

/* Fix tw-text-black forced color on section headers in module pages */
html[data-ui-theme="dark"] .content-header h1.tw-text-black,
html[data-ui-theme="dark"] .content-header .tw-text-black {
  color: var(--bk-text) !important;
}

/* Intel Playbook panel inline backgrounds */
html[data-ui-theme="dark"] tr[style*="background:#f9f9f9"],
html[data-ui-theme="dark"] tr[style*="background: #f9f9f9"] {
  background: var(--bk-surface-elevated) !important;
}

html[data-ui-theme="dark"] div[style*="background:#fff"],
html[data-ui-theme="dark"] div[style*="background: #fff"] {
  background: var(--bk-surface) !important;
}

/* Intel Playbook panel borders */
html[data-ui-theme="dark"] div[style*="border:1px solid #eee"],
html[data-ui-theme="dark"] div[style*="border: 1px solid #eee"] {
  border-color: var(--bk-border) !important;
}

html[data-ui-theme="dark"] div[style*="border-bottom:1px solid #f0f0f0"],
html[data-ui-theme="dark"] div[style*="border-bottom: 1px solid #f0f0f0"] {
  border-bottom-color: var(--bk-border) !important;
}

/* Assets module — profile detail text */
html[data-ui-theme="dark"] .content p {
  color: var(--bk-text);
}

/* Manufacturing + Assets — DaisyUI button outlines in dark mode */
html[data-ui-theme="dark"] .tw-dw-btn-outline {
  color: var(--bk-text);
  border-color: var(--bk-border);
}

html[data-ui-theme="dark"] .tw-dw-btn-outline:hover {
  background: var(--bk-surface-hover);
  color: var(--bk-text);
}

/* Systems page — card description text */
html[data-ui-theme="dark"] .app-card-desc {
  color: var(--bk-text-secondary) !important;
}

/* Systems page — card border and shadow */
html[data-ui-theme="dark"] .app-card {
  border-color: var(--bk-border) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3) !important;
}

/* Systems modal panels */
html[data-ui-theme="dark"] .system-panel {
  background: var(--bk-surface-elevated);
  border-color: var(--bk-border);
}

html[data-ui-theme="dark"] .system-panel-title {
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .system-panel-row .text-muted {
  color: var(--bk-text-muted) !important;
}

html[data-ui-theme="dark"] .system-panel-row span:not(.text-muted) {
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .system-modal-desc {
  color: var(--bk-text-secondary) !important;
}

/* Systems metric cards */
html[data-ui-theme="dark"] .system-metric-card {
  background: var(--bk-surface-elevated) !important;
}

html[data-ui-theme="dark"] .system-metric-label {
  color: var(--bk-text-muted) !important;
}

html[data-ui-theme="dark"] .system-metric-value {
  color: var(--bk-text) !important;
}

/* Chips in system modals */
html[data-ui-theme="dark"] .sys-chip {
  background: var(--bk-surface-elevated);
  border-color: var(--bk-border);
  color: var(--bk-text);
}

/* Category pills */
html[data-ui-theme="dark"] .sys-pill {
  background: var(--bk-surface-elevated);
  border-color: var(--bk-border);
  color: var(--bk-text);
}


/* ==========================================================================
   23. PRINT STYLES — always force light mode for print
   ========================================================================== */

@media print {
  html[data-ui-theme="dark"] body,
  html[data-ui-theme="dark"] .content-wrapper,
  html[data-ui-theme="dark"] .box,
  html[data-ui-theme="dark"] .box-body,
  html[data-ui-theme="dark"] .table,
  html[data-ui-theme="dark"] .modal-content {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    border-color: #ddd !important;
  }

  html[data-ui-theme="dark"] .table > thead > tr > th {
    background: #f5f5f5 !important;
    color: #000 !important;
  }

  html[data-ui-theme="dark"] .table > tbody > tr > td {
    color: #000 !important;
    border-color: #ddd !important;
  }

  html[data-ui-theme="dark"] a {
    color: #000 !important;
  }

  html[data-ui-theme="dark"] .main-sidebar,
  html[data-ui-theme="dark"] .main-header {
    display: none !important;
  }
}

/* ====================================================================
   Loading States – Dark Mode
   ==================================================================== */

/* --- DataTable loading spinner (dark) --- */
html[data-ui-theme="dark"] .dataTables_processing {
    background: rgba(30,30,30,0.92) !important;
    color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
html[data-ui-theme="dark"] .dataTables_processing::after {
    border-color: #818cf8;
    border-right-color: transparent;
}

/* --- Skeleton loading (dark) --- */
html[data-ui-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #2a2a2e 25%, #3a3a3e 50%, #2a2a2e 75%);
    background-size: 200% 100%;
}

/* ====================================================================
   Global Search Modal – Dark Mode
   ==================================================================== */
html[data-ui-theme="dark"] #global-search-box {
    background-color: #1e293b;
    border-color: #334155;
}
html[data-ui-theme="dark"] #global-search-box .tw-border-gray-200 {
    border-color: #334155;
}
html[data-ui-theme="dark"] #global-search-input {
    color: #e2e8f0;
}
html[data-ui-theme="dark"] #global-search-input::placeholder {
    color: #64748b;
}
html[data-ui-theme="dark"] #global-search-results a {
    color: #e2e8f0;
}
html[data-ui-theme="dark"] #global-search-results a:hover,
html[data-ui-theme="dark"] #global-search-results [data-search-item].tw-bg-gray-50 a {
    background-color: #334155;
}
html[data-ui-theme="dark"] #global-search-results .tw-bg-gray-100 {
    background-color: #334155;
    color: #94a3b8;
}
html[data-ui-theme="dark"] #global-search-box kbd {
    background-color: #334155;
    color: #94a3b8;
}
html[data-ui-theme="dark"] #global-search-results .tw-text-gray-400 {
    color: #64748b;
}

/* ---- Section 24: Global Search Modal dark mode ---- */
html[data-ui-theme="dark"] #global-search-box {
    background-color: #1e293b !important;
    border-color: #334155;
}
html[data-ui-theme="dark"] #global-search-box > div:first-child {
    border-bottom-color: #334155 !important;
}
html[data-ui-theme="dark"] #global-search-input {
    color: #e2e8f0 !important;
}
html[data-ui-theme="dark"] #global-search-input::placeholder {
    color: #64748b;
}
html[data-ui-theme="dark"] #global-search-results a:hover {
    background-color: #334155 !important;
}
html[data-ui-theme="dark"] #global-search-box kbd {
    background-color: #334155 !important;
    color: #94a3b8 !important;
}