/*
 * Dark mode overrides.
 * Inert by default — only takes effect when <html data-theme="dark">.
 * Loaded last (after tailwind/vendor/app.css) so it wins the cascade
 * without needing !important everywhere.
 */

html[data-theme="dark"] {
    --dm-bg: #0f172a;
    --dm-panel: #1a2436;
    --dm-panel-alt: #242f42;
    --dm-border: #33415580;
    --dm-text: #e2e8f0;
    --dm-text-muted: #94a3b8;
    --dm-input-bg: #1e293b;

    color-scheme: dark;
}

/* ---------- Page / layout base ---------- */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .content {
    background-color: var(--dm-bg) !important;
    color: var(--dm-text);
}

html[data-theme="dark"] .tw-bg-white,
html[data-theme="dark"] .tw-bg-gray-50,
html[data-theme="dark"] .tw-bg-gray-100,
html[data-theme="dark"] .box,
html[data-theme="dark"] .box.box-solid,
html[data-theme="dark"] .box-header,
html[data-theme="dark"] .box-footer,
html[data-theme="dark"] .side-bar,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .nav-tabs-custom,
html[data-theme="dark"] .login-box-body,
html[data-theme="dark"] .register-box-body {
    background-color: var(--dm-panel) !important;
    color: var(--dm-text);
}

html[data-theme="dark"] .tw-bg-gray-100.tw-rounded-lg,
html[data-theme="dark"] tr:hover,
html[data-theme="dark"] .table-hover > tbody > tr:hover > td,
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--dm-panel-alt) !important;
}

html[data-theme="dark"] .tw-ring-gray-200,
html[data-theme="dark"] .tw-ring-1,
html[data-theme="dark"] .tw-border,
html[data-theme="dark"] .box,
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered > thead > tr > th,
html[data-theme="dark"] .table-bordered > tbody > tr > td,
html[data-theme="dark"] .table-bordered > tbody > tr > th,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] hr {
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .tw-shadow-sm,
html[data-theme="dark"] .tw-shadow-lg,
html[data-theme="dark"] .box {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

/* ---------- Text colors ---------- */
html[data-theme="dark"] .tw-text-black,
html[data-theme="dark"] .tw-text-gray-900,
html[data-theme="dark"] .tw-text-gray-800,
html[data-theme="dark"] .box-title,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] label,
html[data-theme="dark"] .control-label {
    color: var(--dm-text) !important;
}

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

html[data-theme="dark"] a {
    color: #7aa8ff;
}

/* ---------- Sidebar (AdminLTE skin-*-light already keeps it near-white) ---------- */
html[data-theme="dark"] #side-bar a,
html[data-theme="dark"] .side-bar a {
    color: var(--dm-text-muted);
}

html[data-theme="dark"] #side-bar a:hover,
html[data-theme="dark"] .side-bar a:hover {
    background-color: var(--dm-panel-alt);
}

/* ---------- Forms / inputs ---------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] textarea.form-control,
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-search__field,
html[data-theme="dark"] .input-group-addon {
    background-color: var(--dm-input-bg) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

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

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: var(--dm-panel) !important;
    opacity: 0.7;
}

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

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

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

/* ---------- Legacy Bootstrap buttons (DaisyUI tw-dw-btn already themed via [data-theme]) ---------- */
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-flat.btn-default {
    background-color: var(--dm-panel-alt);
    border-color: var(--dm-border);
    color: var(--dm-text);
}

/* ---------- Tables / DataTables ---------- */
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > th {
    border-color: var(--dm-border);
    color: var(--dm-text);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--dm-text) !important;
}

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

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

/* ---------- Modals / overlays ---------- */
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--dm-border);
}

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

html[data-theme="dark"] .swal-modal {
    background: var(--dm-panel);
    color: var(--dm-text);
}

html[data-theme="dark"] .swal-title,
html[data-theme="dark"] .swal-text {
    color: var(--dm-text);
}

/* ---------- Alerts ---------- */
html[data-theme="dark"] .alert-info {
    background-color: #0c3a5c;
    border-color: #0e4b76;
    color: #cfe8ff;
}

html[data-theme="dark"] .alert-warning {
    background-color: #4d3b0b;
    border-color: #664e10;
    color: #ffe9b3;
}

html[data-theme="dark"] .alert-danger {
    background-color: #4c1414;
    border-color: #661a1a;
    color: #ffc9c9;
}

html[data-theme="dark"] .alert-success {
    background-color: #103a22;
    border-color: #164d2d;
    color: #b9f3cd;
}

/* ---------- Scrollbars (WebKit) ---------- */
html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--dm-bg);
}

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

/* ---------- Misc widgets ---------- */
html[data-theme="dark"] .small-box,
html[data-theme="dark"] .info-box {
    background-color: var(--dm-panel);
    color: var(--dm-text);
}

html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a {
    background-color: var(--dm-panel);
    color: var(--dm-text);
}

html[data-theme="dark"] code {
    background-color: var(--dm-panel-alt);
    color: #f472b6;
}

/* ---------- Catch-all for Tailwind utilities with a prefix (hover:, !important, md:, etc.) ---------- */
/* [class*="..."] matches the class *string*, so it also catches compiled
   variants like "hover:tw-bg-gray-50" or the escaped "!tw-bg-white" that a
   plain ".tw-bg-white" selector can't reach. */
html[data-theme="dark"] [class*="tw-bg-white"],
html[data-theme="dark"] [class*="tw-bg-gray-50"],
html[data-theme="dark"] [class*="tw-bg-gray-100"] {
    background-color: var(--dm-panel) !important;
}

html[data-theme="dark"] [class*="hover:tw-bg-gray-50"]:hover,
html[data-theme="dark"] [class*="hover:tw-bg-gray-100"]:hover {
    background-color: var(--dm-panel-alt) !important;
}

/* Light-tint badges/icon backgrounds (tw-bg-indigo-100, tw-bg-blue-100, ...):
   too washed out to read on a dark panel, so just dim them uniformly and
   let the already-vivid colored text/icon on top stay as-is. */
html[data-theme="dark"] [class*="tw-bg-indigo-100"],
html[data-theme="dark"] [class*="tw-bg-blue-100"],
html[data-theme="dark"] [class*="tw-bg-green-100"],
html[data-theme="dark"] [class*="tw-bg-red-100"],
html[data-theme="dark"] [class*="tw-bg-yellow-100"],
html[data-theme="dark"] [class*="tw-bg-purple-100"],
html[data-theme="dark"] [class*="tw-bg-pink-100"],
html[data-theme="dark"] [class*="tw-bg-orange-100"] {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---------- "pos-tab" settings-page shell (business/manufacturing/... settings) ---------- */
html[data-theme="dark"] div.pos-tab-container,
html[data-theme="dark"] div.pos-tab-content,
html[data-theme="dark"] .nav-tabs-custom {
    background-color: var(--dm-panel) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] div.pos-tab-menu div.list-group > a,
html[data-theme="dark"] .list-group-item {
    background-color: var(--dm-panel) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html[data-theme="dark"] div.pos-tab-menu div.list-group > a:hover {
    background-color: var(--dm-panel-alt) !important;
}

html[data-theme="dark"] div.pos-tab-menu div.list-group > a.active,
html[data-theme="dark"] .list-group-item.active {
    color: #ffffff !important;
}

html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a {
    background-color: var(--dm-panel) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a {
    color: var(--dm-text-muted) !important;
}

/* The actual tab panel content has its own hardcoded white background
   (separate from .nav-tabs-custom's own bg) — this is what was showing
   through behind the table header and the un-striped (even) table rows. */
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .tab-pane {
    background-color: var(--dm-panel) !important;
}

html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] table.dataTable > thead > tr > th {
    background-color: var(--dm-panel) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > th {
    background-color: var(--dm-panel);
}

/* ---------- Bootstrap "well" boxes (e.g. Superadmin business detail) ---------- */
html[data-theme="dark"] .well {
    background-color: var(--dm-panel-alt) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text);
}

/* ---------- Bootstrap default navbar (Superadmin nav, home header) ---------- */
html[data-theme="dark"] .navbar-default {
    background-color: var(--dm-panel) !important;
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] .navbar-default .navbar-brand,
html[data-theme="dark"] .navbar-default .navbar-nav > li > a {
    color: var(--dm-text) !important;
}

/* ---------- Legacy AdminLTE helper: gray table footer / stat boxes ---------- */
html[data-theme="dark"] .bg-gray {
    background-color: var(--dm-panel-alt) !important;
    color: var(--dm-text) !important;
}

/* ---------- Login / register page (layouts/auth2.blade.php) ---------- */
/* Replaces the light indigo/blue gradient (set inline via
   layouts/partials/extracss_auth.blade.php) with a deeper, richer dark one.
   Needs the full `background` shorthand (not just background-color) since
   that's what defines the gradient image. */
html[data-theme="dark"] {
    background: linear-gradient(135deg, #0f172a, #1e1b4b, #172554) !important;
}

html[data-theme="dark"] [class*="tw-border-[#D1D5DA]"] {
    border-color: var(--dm-border) !important;
}

html[data-theme="dark"] #show_hide_icon svg,
html[data-theme="dark"] #show_hide_icon svg path {
    stroke: var(--dm-text-muted) !important;
}

/* Generic placeholder-color fix (login inputs and anywhere else using the
   Tailwind `placeholder:tw-text-gray-*` variant). */
html[data-theme="dark"] [class*="placeholder:tw-text-gray"]::placeholder {
    color: var(--dm-text-muted) !important;
    opacity: 1;
}

/* ---------- Bootstrap dropdown menus (e.g. row "Actions" menus) ---------- */
/* Bootstrap's default :hover/:focus on dropdown items is a light-gray
   background with near-black text — invisible/jarring against a dark menu
   that only had its resting-state background covered so far. */
html[data-theme="dark"] .dropdown-menu > li > a,
html[data-theme="dark"] .dropdown-menu > li > a:link,
html[data-theme="dark"] .dropdown-menu > li > a:visited {
    background-color: transparent !important;
    color: var(--dm-text) !important;
}

html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus,
html[data-theme="dark"] .dropdown-menu > .active > a,
html[data-theme="dark"] .dropdown-menu > .active > a:hover,
html[data-theme="dark"] .dropdown-menu > .active > a:focus {
    background-color: var(--dm-panel-alt) !important;
    color: #ffffff !important;
}

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

/* Same light-hover-on-dark-menu issue for our custom Tailwind/DaisyUI
   dropdown menus (header user menu, filters, etc.) */
html[data-theme="dark"] [class*="tw-dw-menu"] a:hover,
html[data-theme="dark"] .tw-rounded-lg.hover\:tw-bg-gray-100:hover,
html[data-theme="dark"] a[class*="hover:tw-bg-gray-100"]:hover,
html[data-theme="dark"] a[class*="hover:tw-bg-gray-50"]:hover {
    background-color: var(--dm-panel-alt) !important;
    color: #ffffff !important;
}