/* ==========================================================================
   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: #94a3b8;
  --bk-input-bg: #1e2435;
  --bk-input-border: rgba(255, 255, 255, 0.12);

  --app-color-canvas: var(--bk-bg);
  --app-color-surface: var(--bk-surface);
  --app-color-surface-elevated: var(--bk-surface-elevated);
  --app-color-border: var(--bk-border);
  --app-color-text-primary: var(--bk-text);
  --app-color-text-secondary: var(--bk-text-secondary);
  --app-color-text-tertiary: var(--bk-text-muted);

  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);
}

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

/* The active item's own full-block treatment (ui-unified.css:982,
   `.side-bar .sidebar-menu > li.active > a { background: var(--ui-brand-800)
   !important; ... }`) already carries the row on every theme. A
   border-left-color accent used to sit on top of that solid fill here —
   removed under DESIGN_SYSTEM §6 rule 10 (no coloured accent stripe; the
   full-block colour it duplicated is the cue, not a second one riding on
   the first). */
html[data-ui-theme="dark"] .sidebar-menu > li.active > a {
  background: var(--bk-surface-elevated);
  color: #fff;
}

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);
}

/* Unread cue: the background tint below, plus the bold label and the
   `.notification-unread-dot` marker the row already carries (see
   resources/views/layouts/partials/header-notifications.blade.php), are
   the non-colour channels (DESIGN_SYSTEM §6 rule 5). A border-left-color
   accent used to ride on top of them — removed under §6 rule 10 (no
   coloured stripe on a row that already has a full-block cue). The
   light-mode counterpart of this same rule lives in that blade's own
   inline <style> block, outside this stylesheet, and still carries the
   stripe — tracked in docs/handoff/ui-refresh/no-side-stripe.md as a
   follow-up for whoever next owns that file. */
html[data-ui-theme="dark"] .notifications-menu .notification-li.unread {
  background: rgba(37, 99, 235, 0.12) !important;
}

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);
}

/* Legacy inline-style compatibility guard.
   A number of older Blade screens still carry structural light colors inline.
   Keep semantic badges/buttons/icons intact while normalizing large content
   surfaces and text to the active dark tokens. */
html[data-ui-theme="dark"] .content [style*="background:#fff" i]:not(.btn):not(.label):not(.badge):not(.progress-bar):not([style*="border-radius:50%" i]),
html[data-ui-theme="dark"] .content [style*="background: #fff" i]:not(.btn):not(.label):not(.badge):not(.progress-bar):not([style*="border-radius: 50%" i]),
html[data-ui-theme="dark"] .content [style*="background:white" i]:not(.btn):not(.label):not(.badge):not(.progress-bar),
html[data-ui-theme="dark"] .content [style*="background: white" i]:not(.btn):not(.label):not(.badge):not(.progress-bar),
html[data-ui-theme="dark"] .content [style*="background-color:#fff" i]:not(.btn):not(.label):not(.badge),
html[data-ui-theme="dark"] .content [style*="background-color: #fff" i]:not(.btn):not(.label):not(.badge) {
  background: var(--bk-surface-elevated) !important;
}

html[data-ui-theme="dark"] .content [style*="color:#111827" i],
html[data-ui-theme="dark"] .content [style*="color: #111827" i],
html[data-ui-theme="dark"] .content [style*="color:#1f2937" i],
html[data-ui-theme="dark"] .content [style*="color: #1f2937" i] {
  color: var(--bk-text) !important;
}

html[data-ui-theme="dark"] .content [style*="color:#374151" i],
html[data-ui-theme="dark"] .content [style*="color: #374151" i],
html[data-ui-theme="dark"] .content [style*="color:#4b5563" i],
html[data-ui-theme="dark"] .content [style*="color: #4b5563" i],
html[data-ui-theme="dark"] .content [style*="color:#6b7280" i],
html[data-ui-theme="dark"] .content [style*="color: #6b7280" i] {
  color: var(--bk-text-secondary) !important;
}

/* 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;
}

/* Phase 1 / S2 — inside `.ds-internal`, danger/success use the same
   design-system status tokens as light mode, not this file's literals.

   `html[data-ui-theme="dark"] .btn-danger` above is specificity (0,2,1).
   `.ds-internal .btn-danger` in ui-unified.css is only (0,2,0) and cannot
   win here even though ui-unified.css loads first (partials/css.blade.php
   lines 19 and 21) — b is tied at 2, and the plain rule's extra `html`
   type selector gives it c:1 against this selector's c:0. Adding the
   `html[data-ui-theme="dark"]` prefix here gives (0,3,1), which does win,
   with no `!important`. Only reachable on pages carrying the `ds-internal`
   body class (layouts/app.blade.php); POS-chrome and marketing never set
   that class, so the plain rules above keep governing them exactly as
   before.

   This also fixes a real pre-existing defect: `#16a34a` white text is
   3.30:1, below the 4.5:1 floor this slice enforces everywhere else;
   `--ds-color-success-700` white text is 5.69:1. `.tw-dw-btn-error` /
   `.tw-dw-btn-success` and all of warning/info are never touched by the
   plain rules above, so ui-unified.css's `.ds-internal` rules for them
   already win in dark mode unopposed and need no mirror here. */
html[data-ui-theme="dark"] .ds-internal .btn-danger {
  background: var(--ds-color-danger-700, #b42318);
  border-color: transparent;
  color: var(--ds-color-danger-contrast, #ffffff);
}

html[data-ui-theme="dark"] .ds-internal .btn-danger:hover {
  background: var(--ds-color-danger-800, #912018);
}

html[data-ui-theme="dark"] .ds-internal .btn-success {
  background: var(--ds-color-success-700, #067647);
  border-color: transparent;
  color: var(--ds-color-success-contrast, #ffffff);
}

html[data-ui-theme="dark"] .ds-internal .btn-success:hover {
  background: var(--ds-color-success-800, #085d3a);
}


/* ==========================================================================
   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;
}

/* Cutover: the .chiled (accordion sub-item wrapper) and #side-bar
   a.tw-text-gray-600 rules that used to sit here targeted classes the old
   AdminlteCustomPresenter emitted. Phase 2 / S1's shell-nav rebuild renders
   links as .shell-panel__link inside #side-bar instead, styled directly in
   app-shell.css (light + dark) — none of those classes are emitted any more,
   so the overrides were dead weight once S1 shipped. Removed. */

/* 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;
}

/* open-work-polish: the generic `a { color: #60a5fa }` two rules above only
   ever covered an <a> NESTED inside a .btn-primary/.btn (the `.btn-primary a`
   / `.btn a` pair right above) -- it never covered the far more common shape
   where the anchor itself IS the button, e.g. `<a class="btn btn-primary">Fix</a>`
   (`resources/views/report/product_stock_details.blade.php`'s per-row "Fix"
   action, and every other `route(...)`-driven action link across the report
   screens). For that shape the generic rule's own selector -- two type
   selectors (html, a) plus the theme attribute -- out-specifies the light-mode
   `.btn-primary { color: var(--app-brand-contrast, ...) }` (ui-unified.css,
   one class, no dark twin needed there since it is already token-driven), so
   in dark mode a "Fix" link rendered light-blue text (#60a5fa) on the primary
   fill (var(--ui-brand-800), itself a blue) -- measured ~3.3:1, below the
   4.5:1 text floor. `.tw-dw-btn-primary`/`.tw-dw-btn-info` share the exact
   same light-mode block (ui-unified.css ~L189) and the exact same gap when
   rendered as an anchor.
   Fixed at the selector (two classes beats the generic rule's two types
   regardless of source order, so this cannot silently lose the fight again if
   the generic rule is edited later), reusing the SAME --app-brand-contrast
   token the light-mode rule already derives per tenant -- not a new literal. */
html[data-ui-theme="dark"] a.btn-primary,
html[data-ui-theme="dark"] a.btn-primary:hover,
html[data-ui-theme="dark"] a.btn-primary:focus,
html[data-ui-theme="dark"] a.tw-dw-btn-primary,
html[data-ui-theme="dark"] a.tw-dw-btn-primary:hover,
html[data-ui-theme="dark"] a.tw-dw-btn-primary:focus,
html[data-ui-theme="dark"] a.tw-dw-btn-info,
html[data-ui-theme="dark"] a.tw-dw-btn-info:hover,
html[data-ui-theme="dark"] a.tw-dw-btn-info:focus {
  color: var(--app-brand-contrast, #fff) !important;
}

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;
}

/* ============================================================
   === contact-show-fix ===
   ============================================================
   Contact KPI cards (`contact/contact_payment_info.blade.php`) used
   pure inline `style="background:#f9fafb;...color:#111827"` -- no dark
   variant existed at all, so in dark theme the card stayed a near-white
   surface with dark-grey value text on top of it (e.g. "LE 40,500.25"
   measured live at a failing contrast ratio -- see the handoff doc for
   exact numbers). Reuses this file's OWN `--bk-surface-elevated`/
   `--bk-border`/`--bk-text`/`--bk-text-secondary` tokens (already
   established above for `.nav-tabs-custom` et al.) -- no new colour
   literal. The "due" red keeps its own literal (`#f87171`, a standard
   lighter red for dark surfaces, distinct from the light-mode `#ef4444`
   the same way this file already lightens other semantic colours for
   dark backgrounds elsewhere) and the warning icon is untouched
   (inline, not part of this rule). */
html[data-ui-theme="dark"] .ds-contact-kpi-card {
  background: var(--bk-surface-elevated);
  border-color: var(--bk-border);
}

html[data-ui-theme="dark"] .ds-contact-kpi-card__label {
  color: var(--bk-text-secondary);
}

html[data-ui-theme="dark"] .ds-contact-kpi-card__value {
  color: var(--bk-text);
}

html[data-ui-theme="dark"] .ds-contact-kpi-card__value--danger {
  color: var(--ds-contact-kpi-danger-dark, #f87171);
}

html[data-ui-theme="dark"] .ds-contact-kpi-card__value--warning {
  color: var(--ds-contact-kpi-warning-dark, #fbbf24);
}


/* === qa-round2 === */
/* QA round-2 F2: reusable tint panels for danger/warning/info/success
   status cards that live outside `.ds-doc` (documents.css) and outside
   the perfumery-only theme file (perfumery-theme.css, which only loads
   for perfumery tenants -- see layouts/partials/css.blade.php's `@if`).
   Real Estate service-charge aging cards and the SuperAdmin permission
   debug "Phantom grants" panel both need this on tenants/pages that
   never load perfumery-theme.css. Text ink lives on `.ds-tint__ink` so
   a panel's label/value themes together with its background instead of
   being a second inline-colour literal that can drift out of sync.
   Every colour is a `var(--ds-tint-*, <literal>)` reference (never a
   bare literal) so this file's own StylesheetLiteralFreezeContractTest
   ceiling is untouched -- the custom properties are not defined
   anywhere else on purpose, so the fallback IS what renders, exactly
   like every other `var(--ds-color-*, #hex)` reference already in this
   codebase. */
.ds-tint:not(.badge) {
  border-radius: var(--ds-radius-lg, 0.75rem);
}
.ds-tint__ink {
  font-weight: 600;
}
/* A `.badge` never carried a border or this card-radius before this fix;
   keep its own pill shape (`.badge`'s own border-radius, set elsewhere,
   stays undisturbed) and flat look for pill contexts using `.ds-tint`
   (e.g. the permission-debug role/superadmin badges and phantom-
   permission tags) while the card contexts above/below keep their own
   2px outline. */
.badge.ds-tint {
  border: 0;
}

/* Follow-up to the F2 fix: the RE service-charge aging row needs FOUR
   escalating severity steps (1-30 < 31-60 < 61-90 < 90+ days overdue),
   not two. `.ds-tint--caution` is the mildest step -- paler/lighter than
   `.ds-tint--warning` in both border and ink saturation (amber-400/700
   vs warning's amber-500/800) -- used for 1-30 days; 31-60 uses the
   existing `.ds-tint--warning` unchanged (also used by the permission-
   debug Admin badge, so its colours are not touched here); 61-90 and
   90+ both already use `.ds-tint--danger` (accepted in the prior round)
   -- the escalation between THOSE two reads from the bucket label text
   itself ("61-90 days" vs "90+ days"), the non-colour channel. */
.ds-tint--caution {
  background: var(--ds-tint-caution-bg, #fefce8);
  border: 2px solid var(--ds-tint-caution-border, #fbbf24);
}
.ds-tint--caution.ds-tint__ink,
.ds-tint--caution .ds-tint__ink { color: var(--ds-tint-caution-ink, #a16207); }

.ds-tint--danger {
  background: var(--ds-tint-danger-bg, #fef2f2);
  border: 2px solid var(--ds-tint-danger-border, #ef4444);
}
/* Both usage shapes are supported: `.ds-tint__ink` as a DESCENDANT of the
   panel (the RE aging cards -- ink lives on a separate value `<div>`)
   and `.ds-tint__ink` combined on the SAME element as the modifier (the
   permission-debug role badges -- one `<span>` carries every class).
   A single descendant-combinator selector only matches the first shape;
   the compound (no-space) selector is required for the second, or the
   badge's own `color:#fff` wins and the ink is unreadable. */
.ds-tint--danger.ds-tint__ink,
.ds-tint--danger .ds-tint__ink { color: var(--ds-tint-danger-ink, #b91c1c); }

.ds-tint--warning {
  background: var(--ds-tint-warning-bg, #fffbeb);
  border: 2px solid var(--ds-tint-warning-border, #f59e0b);
}
.ds-tint--warning.ds-tint__ink,
.ds-tint--warning .ds-tint__ink { color: var(--ds-tint-warning-ink, #92400e); }

.ds-tint--info {
  background: var(--ds-tint-info-bg, #eff6ff);
  border: 2px solid var(--ds-tint-info-border, #3b82f6);
}
.ds-tint--info.ds-tint__ink,
.ds-tint--info .ds-tint__ink { color: var(--ds-tint-info-ink, #1e3a8a); }

.ds-tint--success {
  background: var(--ds-tint-success-bg, #ecfdf5);
  border: 2px solid var(--ds-tint-success-border, #10b981);
}
.ds-tint--success.ds-tint__ink,
.ds-tint--success .ds-tint__ink { color: var(--ds-tint-success-ink, #065f46); }

html[data-ui-theme="dark"] .ds-tint--caution {
  background: var(--ds-tint-caution-dark-bg, #332a1c);
  border-color: var(--ds-tint-caution-dark-border, rgba(202, 138, 4, .4));
}
html[data-ui-theme="dark"] .ds-tint--caution.ds-tint__ink,
html[data-ui-theme="dark"] .ds-tint--caution .ds-tint__ink { color: var(--ds-tint-caution-dark-ink, #fde68a); }

html[data-ui-theme="dark"] .ds-tint--danger {
  background: var(--ds-tint-danger-dark-bg, #3d252c);
  border-color: var(--ds-tint-danger-dark-border, rgba(220, 38, 38, .44));
}
html[data-ui-theme="dark"] .ds-tint--danger.ds-tint__ink,
html[data-ui-theme="dark"] .ds-tint--danger .ds-tint__ink { color: var(--ds-tint-danger-dark-ink, #fca5a5); }

html[data-ui-theme="dark"] .ds-tint--warning {
  background: var(--ds-tint-warning-dark-bg, #403024);
  border-color: var(--ds-tint-warning-dark-border, rgba(217, 119, 6, .44));
}
html[data-ui-theme="dark"] .ds-tint--warning.ds-tint__ink,
html[data-ui-theme="dark"] .ds-tint--warning .ds-tint__ink { color: var(--ds-tint-warning-dark-ink, #fcd34d); }

html[data-ui-theme="dark"] .ds-tint--info {
  background: var(--ds-tint-info-dark-bg, #22354d);
  border-color: var(--ds-tint-info-dark-border, rgba(37, 99, 235, .44));
}
html[data-ui-theme="dark"] .ds-tint--info.ds-tint__ink,
html[data-ui-theme="dark"] .ds-tint--info .ds-tint__ink { color: var(--ds-tint-info-dark-ink, #7dd3fc); }

html[data-ui-theme="dark"] .ds-tint--success {
  background: var(--ds-tint-success-dark-bg, #203a32);
  border-color: var(--ds-tint-success-dark-border, rgba(22, 163, 74, .44));
}
html[data-ui-theme="dark"] .ds-tint--success.ds-tint__ink,
html[data-ui-theme="dark"] .ds-tint--success .ds-tint__ink { color: var(--ds-tint-success-dark-ink, #86efac); }