/* =========================================================================
   JOTO HARDWARE — DARK THEME
   AdminLTE/Bootstrap dark override. Loaded after vendor.css + app.css.
   Scope: html[data-theme="dark"] applied to <html> element.
   ========================================================================= */

/* ------------------------------------------------------------------ */
/* 1. CSS Custom Properties                                            */
/* ------------------------------------------------------------------ */

:root {
    --hw-app-bg: #0a0e1a;
    --hw-sidebar-bg: #0c1220;
    --hw-topnav-bg: #0e1525;
    --hw-surface-primary: rgba(16, 22, 38, 0.95);
    --hw-surface-secondary: rgba(12, 18, 32, 0.92);
    --hw-input-bg: rgba(8, 13, 24, 0.88);
    --hw-border: rgba(148, 163, 184, 0.14);
    --hw-border-strong: rgba(148, 163, 184, 0.26);
    --hw-text-primary: #f0f4fa;
    --hw-text-secondary: #b0bdd0;
    --hw-text-muted: #7b8aa0;
    --hw-hover: rgba(99, 102, 241, 0.12);
    --hw-brand: #5b8efe;
    --hw-brand-glow: rgba(99, 102, 241, 0.34);
}

/* ------------------------------------------------------------------ */
/* 2. Base / Body                                                      */
/* ------------------------------------------------------------------ */

html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--hw-app-bg) !important;
    color: var(--hw-text-primary) !important;
}

html[data-theme="dark"] .wrapper {
    background-color: transparent !important;
}

html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .right-side,
html[data-theme="dark"] .content {
    background-color: transparent !important;
    color: var(--hw-text-primary) !important;
}

/* Scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(15, 21, 35, 0.6); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.45); border-radius: 6px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.65); }

/* ------------------------------------------------------------------ */
/* 3. Header / Topbar                                                  */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .main-header {
    background-color: var(--hw-topnav-bg) !important;
    border-bottom: 1px solid var(--hw-border) !important;
}

html[data-theme="dark"] .main-header .logo {
    background-color: var(--hw-sidebar-bg) !important;
    border-right: 1px solid var(--hw-border) !important;
    color: var(--hw-text-primary) !important;
}

html[data-theme="dark"] .main-header .navbar {
    background-color: var(--hw-topnav-bg) !important;
}

html[data-theme="dark"] .main-header .sidebar-toggle {
    color: var(--hw-text-secondary) !important;
}

html[data-theme="dark"] .main-header .sidebar-toggle:hover {
    color: #ffffff !important;
    background-color: rgba(99, 102, 241, 0.15) !important;
}

html[data-theme="dark"] .main-header .nav > li > a {
    color: var(--hw-text-secondary) !important;
}

html[data-theme="dark"] .main-header .nav > li > a:hover,
html[data-theme="dark"] .main-header .nav > li > a:focus {
    color: #ffffff !important;
    background-color: rgba(99, 102, 241, 0.12) !important;
}

html[data-theme="dark"] .main-header .dropdown-menu {
    background-color: rgba(16, 22, 38, 0.96) !important;
    border: 1px solid var(--hw-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .main-header .dropdown-menu > li > a {
    color: var(--hw-text-secondary) !important;
}

html[data-theme="dark"] .main-header .dropdown-menu > li > a:hover {
    background-color: rgba(99, 102, 241, 0.14) !important;
    color: #ffffff !important;
}

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

html[data-theme="dark"] .main-header .user-header {
    background-color: rgba(99, 102, 241, 0.12) !important;
}

html[data-theme="dark"] .main-header .user-image {
    border: 2px solid rgba(99, 102, 241, 0.3) !important;
}

/* Navbar custom menu buttons */
html[data-theme="dark"] .main-header .btn-success {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------------------------------ */
/* 4. Sidebar                                                          */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .main-sidebar,
html[data-theme="dark"] .main-sidebar .sidebar {
    background-color: var(--hw-sidebar-bg) !important;
}

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

html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li > a:hover {
    background-color: var(--hw-hover) !important;
    color: #ffffff !important;
    border-left-color: rgba(99, 102, 241, 0.4) !important;
}

html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li.active > a,
html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li.treeview.active > a {
    background-color: rgba(99, 102, 241, 0.16) !important;
    color: #ffffff !important;
    border-left-color: var(--hw-brand) !important;
    font-weight: 600;
}

/* Sidebar icons */
html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li > a > .fa,
html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li > a > .fas,
html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li > a > .far {
    color: var(--hw-text-muted) !important;
}

html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li.active > a > .fa,
html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li.active > a > .fas,
html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li.active > a > .far,
html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li > a:hover > .fa,
html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li > a:hover > .fas,
html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li > a:hover > .far {
    color: var(--hw-brand) !important;
}

/* Sidebar treeview submenu */
html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li.treeview > .submenu {
    background-color: rgba(8, 13, 24, 0.5) !important;
}

html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li.treeview > .submenu > li > a {
    color: var(--hw-text-muted) !important;
}

html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li.treeview > .submenu > li > a:hover {
    color: #ffffff !important;
    background-color: rgba(99, 102, 241, 0.12) !important;
}

html[data-theme="dark"] .main-sidebar .sidebar > .sidebar-menu > li.treeview > .submenu > li.active > a {
    color: #ffffff !important;
    background-color: rgba(99, 102, 241, 0.16) !important;
}

/* Sidebar logo area */
html[data-theme="dark"] .main-sidebar .sidebar .logo {
    background-color: var(--hw-sidebar-bg) !important;
    border-bottom: 1px solid var(--hw-border) !important;
}

html[data-theme="dark"] .main-sidebar .sidebar .logo .logo-lg {
    color: var(--hw-text-primary) !important;
}

/* Sidebar search input */
html[data-theme="dark"] .sidebar-search input {
    background-color: var(--hw-input-bg) !important;
    color: var(--hw-text-primary) !important;
    border-color: var(--hw-border) !important;
}

/* ------------------------------------------------------------------ */
/* 5. Cards / Boxes / Panels                                           */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .box,
html[data-theme="dark"] .card {
    background-color: var(--hw-surface-primary) !important;
    border: 1px solid var(--hw-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .box-header,
html[data-theme="dark"] .card-header {
    background-color: rgba(99, 102, 241, 0.06) !important;
    border-bottom: 1px solid var(--hw-border) !important;
    color: var(--hw-text-primary) !important;
}

html[data-theme="dark"] .box-title,
html[data-theme="dark"] .card-title {
    color: var(--hw-text-primary) !important;
}

html[data-theme="dark"] .box-body,
html[data-theme="dark"] .card-body {
    background-color: transparent !important;
    color: var(--hw-text-primary) !important;
}

html[data-theme="dark"] .box-footer,
html[data-theme="dark"] .card-footer {
    background-color: rgba(99, 102, 241, 0.04) !important;
    border-top: 1px solid var(--hw-border) !important;
}

/* Small boxes / info boxes */
html[data-theme="dark"] .small-box {
    background-color: var(--hw-surface-secondary) !important;
    border-radius: 10px !important;
}

html[data-theme="dark"] .small-box .inner h3,
html[data-theme="dark"] .small-box .inner p {
    color: var(--hw-text-primary) !important;
}

html[data-theme="dark"] .small-box .icon > i {
    color: rgba(255, 255, 255, 0.25) !important;
}

html[data-theme="dark"] .small-box .small-box-footer {
    background-color: rgba(15, 22, 40, 0.8) !important;
    color: var(--hw-text-secondary) !important;
    border-top: 1px solid var(--hw-border) !important;
}

html[data-theme="dark"] .info-box {
    background-color: var(--hw-surface-primary) !important;
    border: 1px solid var(--hw-border) !important;
    border-radius: 10px !important;
}

html[data-theme="dark"] .info-box-content {
    color: var(--hw-text-secondary) !important;
}

html[data-theme="dark"] .info-box-icon {
    background-color: rgba(99, 102, 241, 0.12) !important;
    border-radius: 10px 0 0 10px !important;
}

html[data-theme="dark"] .info-box-number {
    color: var(--hw-text-primary) !important;
}

/* ------------------------------------------------------------------ */
/* 6. Tables                                                           */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .table {
    color: var(--hw-text-secondary) !important;
}

html[data-theme="dark"] .table > thead > tr > th {
    background-color: rgba(99, 102, 241, 0.10) !important;
    color: var(--hw-text-primary) !important;
    border-bottom: 2px solid var(--hw-border-strong) !important;
    font-weight: 600;
}

html[data-theme="dark"] .table > tbody > tr > td {
    border-color: var(--hw-border) !important;
    color: var(--hw-text-secondary) !important;
}

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

html[data-theme="dark"] .table-hover > tbody > tr:hover {
    background-color: rgba(99, 102, 241, 0.08) !important;
}

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

html[data-theme="dark"] .table-responsive {
    background-color: transparent !important;
}

/* DataTables */
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
    background-color: var(--hw-input-bg) !important;
    color: var(--hw-text-primary) !important;
    border: 1px solid var(--hw-border) !important;
    border-radius: 6px !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input:focus,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--hw-brand) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16) !important;
}

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

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: rgba(20, 28, 46, 0.9) !important;
    border: 1px solid var(--hw-border) !important;
    color: var(--hw-text-secondary) !important;
    border-radius: 6px !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: rgba(99, 102, 241, 0.14) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: var(--hw-brand) !important;
    border-color: var(--hw-brand) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3) !important;
}

/* DataTables scroll containers */
html[data-theme="dark"] div.dataTables_scrollBody {
    background-color: var(--hw-surface-primary) !important;
}
html[data-theme="dark"] div.dataTables_scrollHeadInner,
html[data-theme="dark"] div.dataTables_scrollHead {
    background-color: var(--hw-surface-secondary) !important;
}
html[data-theme="dark"] table.dataTable thead th {
    background-color: rgba(99, 102, 241, 0.10) !important;
    color: var(--hw-text-primary) !important;
}

/* ------------------------------------------------------------------ */
/* 7. Forms                                                            */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .form-control {
    background-color: var(--hw-input-bg) !important;
    color: var(--hw-text-primary) !important;
    border: 1px solid var(--hw-border) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html[data-theme="dark"] .form-control:focus {
    border-color: var(--hw-brand) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important;
    background-color: var(--hw-input-bg) !important;
    color: var(--hw-text-primary) !important;
}

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

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: rgba(10, 16, 28, 0.7) !important;
    color: var(--hw-text-muted) !important;
}

html[data-theme="dark"] .form-group label,
html[data-theme="dark"] label,
html[data-theme="dark"] .control-label {
    color: var(--hw-text-secondary) !important;
}

html[data-theme="dark"] .input-group-addon {
    background-color: rgba(20, 28, 46, 0.9) !important;
    border-color: var(--hw-border) !important;
    color: var(--hw-text-secondary) !important;
}

html[data-theme="dark"] .has-error .form-control {
    border-color: #f45a5a !important;
}

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

html[data-theme="dark"] .help-block,
html[data-theme="dark"] .text-muted {
    color: var(--hw-text-muted) !important;
}

/* Select2 */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--hw-input-bg) !important;
    border-color: var(--hw-border) !important;
    border-radius: 8px !important;
}

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

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

html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--hw-text-secondary) !important;
}

html[data-theme="dark"] .select2-dropdown {
    background: rgba(16, 22, 38, 0.96) !important;
    border-color: var(--hw-border) !important;
    border-radius: 8px !important;
}

html[data-theme="dark"] .select2-results__option {
    color: var(--hw-text-secondary) !important;
}

html[data-theme="dark"] .select2-results__option[aria-selected="true"] {
    background-color: rgba(99, 102, 241, 0.16) !important;
    color: var(--hw-text-primary) !important;
}

html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--hw-brand) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .select2-search__field {
    background-color: var(--hw-input-bg) !important;
    color: var(--hw-text-primary) !important;
    border-color: var(--hw-border) !important;
}

/* ------------------------------------------------------------------ */
/* 8. Buttons                                                          */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-flat.btn-default {
    background: linear-gradient(180deg, rgba(28, 36, 56, 0.95), rgba(18, 24, 42, 0.95)) !important;
    border: 1px solid var(--hw-border) !important;
    color: var(--hw-text-primary) !important;
    border-radius: 8px !important;
}

html[data-theme="dark"] .btn-default:hover,
html[data-theme="dark"] .btn-flat.btn-default:hover {
    background-color: rgba(38, 48, 72, 0.95) !important;
    border-color: var(--hw-border-strong) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-warning,
html[data-theme="dark"] .btn-danger {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-success:hover,
html[data-theme="dark"] .btn-info:hover,
html[data-theme="dark"] .btn-warning:hover,
html[data-theme="dark"] .btn-danger:hover {
    box-shadow: 0 5px 18px rgba(99, 102, 241, 0.28) !important;
    transform: translateY(-1px);
}

html[data-theme="dark"] .btn-link {
    color: var(--hw-brand) !important;
}

/* ------------------------------------------------------------------ */
/* 9. Modals                                                           */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .modal-content {
    background: linear-gradient(180deg, rgba(18, 26, 44, 0.99), rgba(12, 18, 32, 0.99)) !important;
    color: var(--hw-text-primary) !important;
    border: 1px solid var(--hw-border-strong) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .modal-header {
    border-bottom: 1px solid var(--hw-border) !important;
    color: var(--hw-text-primary) !important;
}

html[data-theme="dark"] .modal-footer {
    border-top: 1px solid var(--hw-border) !important;
}

html[data-theme="dark"] .modal-title {
    color: var(--hw-text-primary) !important;
}

html[data-theme="dark"] .modal-header .close,
html[data-theme="dark"] .close {
    color: var(--hw-text-secondary) !important;
}

html[data-theme="dark"] .modal-header .close:hover,
html[data-theme="dark"] .close:hover {
    color: #ffffff !important;
}

html[data-theme="dark"] .modal-body {
    color: var(--hw-text-secondary) !important;
}

/* ------------------------------------------------------------------ */
/* 10. Dropdowns                                                       */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .dropdown-menu {
    background: rgba(16, 22, 38, 0.96) !important;
    border: 1px solid var(--hw-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5) !important;
}

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

html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus {
    background-color: rgba(99, 102, 241, 0.14) !important;
    color: #ffffff !important;
}

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

/* ------------------------------------------------------------------ */
/* 11. Tabs                                                            */
/* ------------------------------------------------------------------ */

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

html[data-theme="dark"] .nav-tabs > li > a:hover {
    background-color: rgba(99, 102, 241, 0.12) !important;
    border-color: var(--hw-border) !important;
    color: #ffffff !important;
}

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

html[data-theme="dark"] .nav-tabs-custom {
    background-color: var(--hw-surface-primary) !important;
    border: 1px solid var(--hw-border) !important;
    border-radius: 10px !important;
}

html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .tab-pane {
    color: var(--hw-text-primary) !important;
}

/* ------------------------------------------------------------------ */
/* 12. Pagination                                                      */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span {
    background-color: rgba(20, 28, 46, 0.9) !important;
    border-color: var(--hw-border) !important;
    color: var(--hw-text-secondary) !important;
}

html[data-theme="dark"] .pagination > li > a:hover,
html[data-theme="dark"] .pagination > li > span:hover {
    background-color: rgba(99, 102, 241, 0.14) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .pagination > .active > a,
html[data-theme="dark"] .pagination > .active > span {
    background-color: var(--hw-brand) !important;
    border-color: var(--hw-brand) !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------------ */
/* 13. Alerts                                                          */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .alert-success {
    background-color: rgba(46, 204, 113, 0.14) !important;
    border-color: rgba(46, 204, 113, 0.35) !important;
    color: #b2f2cc !important;
}

html[data-theme="dark"] .alert-info {
    background-color: rgba(56, 189, 248, 0.14) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    color: #aae4ff !important;
}

html[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.14) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #ffe3a3 !important;
}

html[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #ffbfbf !important;
}

/* ------------------------------------------------------------------ */
/* 14. Labels / Badges                                                 */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .label-default,
html[data-theme="dark"] .badge {
    background-color: rgba(30, 40, 62, 0.9) !important;
    color: var(--hw-text-secondary) !important;
}

/* ------------------------------------------------------------------ */
/* 15. Wells / Panels                                                  */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .well,
html[data-theme="dark"] .panel {
    background-color: var(--hw-surface-secondary) !important;
    border-color: var(--hw-border) !important;
    color: var(--hw-text-primary) !important;
}

html[data-theme="dark"] .panel-heading {
    background-color: rgba(99, 102, 241, 0.06) !important;
    border-color: var(--hw-border) !important;
}

html[data-theme="dark"] .panel-footer {
    background-color: rgba(99, 102, 241, 0.04) !important;
    border-color: var(--hw-border) !important;
}

/* ------------------------------------------------------------------ */
/* 16. Lists                                                           */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .list-group-item {
    background-color: var(--hw-surface-secondary) !important;
    color: var(--hw-text-primary) !important;
    border-color: var(--hw-border) !important;
}

html[data-theme="dark"] .list-group-item:hover,
html[data-theme="dark"] .list-group-item:focus {
    background-color: rgba(99, 102, 241, 0.12) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .list-group-item.active,
html[data-theme="dark"] .list-group-item.active:hover {
    background-color: var(--hw-brand) !important;
    border-color: var(--hw-brand) !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------------ */
/* 17. SweetAlert                                                      */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .swal-modal {
    background: linear-gradient(180deg, rgba(18, 26, 44, 0.99), rgba(12, 18, 32, 0.99)) !important;
    border: 1px solid var(--hw-border-strong) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.5) !important;
}

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

html[data-theme="dark"] .swal-footer {
    border-top-color: var(--hw-border) !important;
    background-color: rgba(12, 18, 32, 0.5) !important;
}

html[data-theme="dark"] .swal-button {
    background-color: rgba(30, 40, 62, 0.9) !important;
    color: var(--hw-text-primary) !important;
}

html[data-theme="dark"] .swal2-popup {
    background: linear-gradient(180deg, rgba(18, 26, 44, 0.99), rgba(12, 18, 32, 0.99)) !important;
}

html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container {
    color: var(--hw-text-primary) !important;
}

/* ------------------------------------------------------------------ */
/* 18. Date pickers                                                    */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .datepicker,
html[data-theme="dark"] .datepicker.dropdown-menu {
    background: rgba(16, 22, 38, 0.96) !important;
    border-color: var(--hw-border) !important;
    color: var(--hw-text-primary) !important;
}

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

html[data-theme="dark"] .datepicker table tr td.active.active {
    background-color: var(--hw-brand) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .daterangepicker {
    background: rgba(16, 22, 38, 0.96) !important;
    border-color: var(--hw-border) !important;
    color: var(--hw-text-primary) !important;
}

html[data-theme="dark"] .daterangepicker td.active,
html[data-theme="dark"] .daterangepicker td.active:hover {
    background-color: var(--hw-brand) !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------------ */
/* 19. Highcharts                                                      */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .highcharts-background,
html[data-theme="dark"] .highcharts-plot-background,
html[data-theme="dark"] .highcharts-plot-border {
    fill: transparent !important;
}

html[data-theme="dark"] .highcharts-axis-labels text,
html[data-theme="dark"] .highcharts-xaxis-labels text,
html[data-theme="dark"] .highcharts-yaxis-labels text,
html[data-theme="dark"] .highcharts-legend-item text,
html[data-theme="dark"] .highcharts-data-label text {
    fill: var(--hw-text-secondary) !important;
}

html[data-theme="dark"] .highcharts-title text,
html[data-theme="dark"] .highcharts-subtitle text {
    fill: var(--hw-text-primary) !important;
}

html[data-theme="dark"] .highcharts-grid-line {
    stroke: rgba(148, 163, 184, 0.14) !important;
}

html[data-theme="dark"] .highcharts-tooltip {
    background-color: rgba(16, 22, 38, 0.98) !important;
    border-color: var(--hw-border-strong) !important;
    color: var(--hw-text-primary) !important;
}

html[data-theme="dark"] .highcharts-tooltip text {
    fill: var(--hw-text-primary) !important;
}

html[data-theme="dark"] .highcharts-credits text {
    fill: var(--hw-text-muted) !important;
}

html[data-theme="dark"] .highcharts-container,
html[data-theme="dark"] .highcharts-container svg {
    background: transparent !important;
}

/* ------------------------------------------------------------------ */
/* 20. Utility overrides                                               */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-gray,
html[data-theme="dark"] .bg-gray-light {
    background-color: var(--hw-surface-secondary) !important;
    color: var(--hw-text-primary) !important;
}

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

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

html[data-theme="dark"] .text-danger,
html[data-theme="dark"] .text-red {
    color: #f87171 !important;
}

html[data-theme="dark"] .text-success,
html[data-theme="dark"] .text-green {
    color: #34d399 !important;
}

html[data-theme="dark"] .text-warning,
html[data-theme="dark"] .text-orange {
    color: #fbbf24 !important;
}

html[data-theme="dark"] .text-info,
html[data-theme="dark"] .text-cyan {
    color: #38bdf8 !important;
}

html[data-theme="dark"] .border-bottom {
    border-bottom-color: var(--hw-border) !important;
}

html[data-theme="dark"] .border-top {
    border-top-color: var(--hw-border) !important;
}

/* ------------------------------------------------------------------ */
/* 21. Toasts / Notifications                                          */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .toast-message {
    color: #ffffff !important;
}

/* ------------------------------------------------------------------ */
/* 22. Loading overlays                                                */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .overlay > .loading,
html[data-theme="dark"] .loading {
    color: var(--hw-text-secondary) !important;
}

/* ------------------------------------------------------------------ */
/* 23. Footer                                                          */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .main-footer {
    background-color: var(--hw-surface-primary) !important;
    border-top: 1px solid var(--hw-border) !important;
    color: var(--hw-text-muted) !important;
}

/* ------------------------------------------------------------------ */
/* 24. Print — force light mode                                        */
/* ------------------------------------------------------------------ */

@media print {
    html[data-theme="dark"] body,
    html[data-theme="dark"] .main-sidebar,
    html[data-theme="dark"] .main-header,
    html[data-theme="dark"] .content-wrapper,
    html[data-theme="dark"] .main-footer {
        background-color: #ffffff !important;
        color: #333333 !important;
    }
}

/* =========================================================================
   JOTO HARDWARE — DARK THEME ADDITIONS (2026-09-14)
   jQuery UI Autocomplete, Product Boxes, Daterangepicker complete,
   and additional overlay fixes.
   ========================================================================= */

/* ------------------------------------------------------------------ */
/* 25. jQuery UI Autocomplete                                         */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .ui-autocomplete {
    background: rgba(16, 22, 38, 0.97) !important;
    border: 1px solid var(--hw-border-strong) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
    max-height: 320px;
    overflow-y: auto;
    z-index: 99999 !important;
    padding: 4px 0 !important;
    width: auto !important;
    min-width: 280px !important;
}

html[data-theme="dark"] .ui-menu-item {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    list-style: none !important;
}

html[data-theme="dark"] .ui-menu-item-wrapper {
    background: transparent !important;
    color: var(--hw-text-secondary) !important;
    padding: 8px 14px !important;
    border-radius: 0 !important;
    border: none !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    transition: background-color 0.12s ease, color 0.12s ease;
}

html[data-theme="dark"] .ui-menu-item-wrapper:hover,
html[data-theme="dark"] .ui-state-active,
html[data-theme="dark"] .ui-state-active .ui-menu-item-wrapper {
    background-color: rgba(99, 102, 241, 0.18) !important;
    color: #ffffff !important;
    border: none !important;
}

html[data-theme="dark"] .ui-state-active {
    border: none !important;
    background: rgba(99, 102, 241, 0.18) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .ui-menu-item .ui-menu-item-wrapper.ui-state-focus {
    background-color: rgba(99, 102, 241, 0.18) !important;
    color: #ffffff !important;
    border: none !important;
    margin: 0 !important;
}

html[data-theme="dark"] .ui-corner-all {
    border-radius: 8px !important;
}

/* Autocomplete scrollbar */
html[data-theme="dark"] .ui-autocomplete::-webkit-scrollbar { width: 6px; }
html[data-theme="dark"] .ui-autocomplete::-webkit-scrollbar-track { background: rgba(15, 21, 35, 0.6); }
html[data-theme="dark"] .ui-autocomplete::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.4); border-radius: 4px; }

/* ------------------------------------------------------------------ */
/* 26. POS Product Cards / Boxes                                      */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .product_box {
    background-color: var(--hw-surface-primary) !important;
    border: 1px solid var(--hw-border) !important;
    border-radius: 6px !important;
    color: var(--hw-text-primary) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html[data-theme="dark"] .product_box:hover {
    border-color: rgba(99, 102, 241, 0.35) !important;
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.15) !important;
}

html[data-theme="dark"] .product_box .text_div small {
    color: var(--hw-text-secondary) !important;
}

html[data-theme="dark"] .product_box .image-container {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-radius: 4px !important;
}

/* POS product list no-results */
html[data-theme="dark"] .product_list h4 {
    color: var(--hw-text-muted) !important;
}

/* ------------------------------------------------------------------ */
/* 27. Daterangepicker — Complete Dark                                */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .daterangepicker {
    background: rgba(16, 22, 38, 0.98) !important;
    border: 1px solid var(--hw-border-strong) !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55) !important;
    color: var(--hw-text-primary) !important;
    overflow: hidden;
}

/* Ranges sidebar (left shortcut list) */
html[data-theme="dark"] .daterangepicker .ranges {
    background: rgba(12, 18, 32, 0.6) !important;
    border-right: 1px solid var(--hw-border) !important;
}

html[data-theme="dark"] .daterangepicker .ranges ul {
    list-style: none;
    padding: 6px 0;
    margin: 0;
}

html[data-theme="dark"] .daterangepicker .ranges li {
    background: transparent !important;
    color: var(--hw-text-secondary) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 7px 16px !important;
    margin: 0 !important;
    font-size: 13px !important;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

html[data-theme="dark"] .daterangepicker .ranges li:hover {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .daterangepicker .ranges li.active,
html[data-theme="dark"] .daterangepicker .ranges li.active:hover {
    background: var(--hw-brand) !important;
    color: #ffffff !important;
}

/* Calendar containers */
html[data-theme="dark"] .daterangepicker .drp-calendar {
    background: transparent !important;
}

html[data-theme="dark"] .daterangepicker .calendar-table {
    background: transparent !important;
    border: none !important;
}

html[data-theme="dark"] .daterangepicker .calendar-table table {
    border-collapse: collapse;
}

/* Month/Year headers */
html[data-theme="dark"] .daterangepicker th {
    color: var(--hw-text-primary) !important;
    font-weight: 600;
    border-bottom: 1px solid var(--hw-border) !important;
}

/* Day cells */
html[data-theme="dark"] .daterangepicker td {
    color: var(--hw-text-secondary) !important;
    background: transparent !important;
    border-radius: 4px;
}

html[data-theme="dark"] .daterangepicker td.available:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #ffffff !important;
}

/* Off-month dates */
html[data-theme="dark"] .daterangepicker td.off {
    color: rgba(122, 140, 170, 0.35) !important;
    background: transparent !important;
}

html[data-theme="dark"] .daterangepicker td.off:hover {
    background: transparent !important;
    color: rgba(122, 140, 170, 0.35) !important;
}

/* Today */
html[data-theme="dark"] .daterangepicker td.today {
    background: rgba(99, 102, 241, 0.1) !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
}

/* Selected/active date */
html[data-theme="dark"] .daterangepicker td.active,
html[data-theme="dark"] .daterangepicker td.active:hover,
html[data-theme="dark"] .daterangepicker td.active.start-date,
html[data-theme="dark"] .daterangepicker td.active.end-date {
    background-color: var(--hw-brand) !important;
    color: #ffffff !important;
    border-radius: 4px;
}

/* In-range highlight */
html[data-theme="dark"] .daterangepicker td.in-range {
    background-color: rgba(99, 102, 241, 0.18) !important;
    color: #ffffff !important;
    border-radius: 0;
}

html[data-theme="dark"] .daterangepicker td.in-range:hover {
    background-color: rgba(99, 102, 241, 0.28) !important;
}

/* Start/end date edge cells */
html[data-theme="dark"] .daterangepicker td.start-date {
    border-radius: 4px 0 0 4px !important;
}

html[data-theme="dark"] .daterangepicker td.end-date {
    border-radius: 0 4px 4px 0 !important;
}

/* Calendar navigation arrows */
html[data-theme="dark"] .daterangepicker .prev,
html[data-theme="dark"] .daterangepicker .next {
    color: var(--hw-text-secondary) !important;
    border: none !important;
    border-radius: 4px;
}

html[data-theme="dark"] .daterangepicker .prev:hover,
html[data-theme="dark"] .daterangepicker .next:hover {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #ffffff !important;
}

/* Calendar table cells border */
html[data-theme="dark"] .daterangepicker table td,
html[data-theme="dark"] .daterangepicker table th {
    border-color: rgba(148, 163, 184, 0.08) !important;
}

/* Footer / apply / cancel */
html[data-theme="dark"] .daterangepicker .drp-buttons {
    border-top: 1px solid var(--hw-border) !important;
    background: rgba(12, 18, 32, 0.5) !important;
    padding: 10px 14px !important;
}

html[data-theme="dark"] .daterangepicker .applyBtn {
    background: var(--hw-brand) !important;
    border-color: var(--hw-brand) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    font-weight: 500;
}

html[data-theme="dark"] .daterangepicker .applyBtn:hover {
    background: #4a7de8 !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3) !important;
}

html[data-theme="dark"] .daterangepicker .cancelBtn {
    background: rgba(30, 40, 62, 0.9) !important;
    border-color: var(--hw-border) !important;
    color: var(--hw-text-secondary) !important;
    border-radius: 6px !important;
}

html[data-theme="dark"] .daterangepicker .cancelBtn:hover {
    background: rgba(50, 60, 82, 0.9) !important;
    color: #ffffff !important;
}

/* Predefined ranges label */
html[data-theme="dark"] .daterangepicker .ranges h4 {
    color: var(--hw-text-primary) !important;
    border-bottom: 1px solid var(--hw-border) !important;
    padding-bottom: 6px;
    margin-bottom: 4px;
}

/* ------------------------------------------------------------------ */
/* 28. Bootstrap Datepicker (inline/popup)                            */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .datepicker-dropdown {
    background: rgba(16, 22, 38, 0.97) !important;
    border: 1px solid var(--hw-border-strong) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
    padding: 6px !important;
}

html[data-theme="dark"] .datepicker table tr td,
html[data-theme="dark"] .datepicker table tr th {
    color: var(--hw-text-secondary) !important;
    border-radius: 4px;
}

html[data-theme="dark"] .datepicker table tr td:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .datepicker table tr td.active,
html[data-theme="dark"] .datepicker table tr td.active:hover,
html[data-theme="dark"] .datepicker table tr td.active.active {
    background: var(--hw-brand) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .datepicker table tr td.old,
html[data-theme="dark"] .datepicker table tr td.new {
    color: rgba(122, 140, 170, 0.35) !important;
}

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

html[data-theme="dark"] .datepicker .datepicker-switch:hover,
html[data-theme="dark"] .datepicker .prev:hover,
html[data-theme="dark"] .datepicker .next:hover {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .datepicker .day,
html[data-theme="dark"] .datepicker .month,
html[data-theme="dark"] .datepicker .year {
    color: var(--hw-text-secondary) !important;
    border-radius: 4px;
}

html[data-theme="dark"] .datepicker .day:hover,
html[data-theme="dark"] .datepicker .month:hover,
html[data-theme="dark"] .datepicker .year:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------------ */
/* 29. Tooltip / Popover                                              */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .tooltip-inner {
    background: rgba(16, 22, 38, 0.96) !important;
    color: var(--hw-text-primary) !important;
    border: 1px solid var(--hw-border-strong) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .tooltip-arrow::after {
    border-top-color: rgba(16, 22, 38, 0.96) !important;
}

html[data-theme="dark"] .popover {
    background: rgba(16, 22, 38, 0.98) !important;
    border-color: var(--hw-border-strong) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .popover-title,
html[data-theme="dark"] .popover-header {
    background: rgba(12, 18, 32, 0.6) !important;
    color: var(--hw-text-primary) !important;
    border-bottom-color: var(--hw-border) !important;
}

html[data-theme="dark"] .popover-content,
html[data-theme="dark"] .popover-body {
    color: var(--hw-text-secondary) !important;
}

/* ------------------------------------------------------------------ */
/* 30. Toast / Toastr                                                  */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .toast {
    background: rgba(16, 22, 38, 0.98) !important;
    border-color: var(--hw-border-strong) !important;
    color: var(--hw-text-primary) !important;
}

/* ------------------------------------------------------------------ */
/* 31. Additional form elements                                       */
/* ------------------------------------------------------------------ */

/* Checkbox / Radio custom */
html[data-theme="dark"] .icheck-blue,
html[data-theme="dark"] .icheck-green,
html[data-theme="dark"] [class*="icheck-"] > label {
    color: var(--hw-text-secondary) !important;
}

/* Native color scheme for inputs */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    color-scheme: dark;
}

/* ------------------------------------------------------------------ */
/* 32. POS-specific: Right panel cart, totals, action buttons         */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] #product_list_body {
    background-color: transparent !important;
}

/* POS action bar / bottom bar */
html[data-theme="dark"] .pos-action-bar {
    background: var(--hw-surface-primary) !important;
    border-top: 1px solid var(--hw-border) !important;
}

/* POS sidebar (right side totals panel) */
html[data-theme="dark"] .pos-right-sidebar {
    background: var(--hw-surface-primary) !important;
}

/* ------------------------------------------------------------------ */
/* 33. Select2 dropdown fix for dynamic results                       */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--hw-brand) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .select2-results__option[aria-selected="true"] {
    background-color: rgba(99, 102, 241, 0.16) !important;
    color: var(--hw-text-primary) !important;
}

/* ------------------------------------------------------------------ */
/* 34. Quick-add product modal (Joto Hardware specific)               */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] .modal .form-control {
    background-color: var(--hw-input-bg) !important;
    color: var(--hw-text-primary) !important;
}

/* ------------------------------------------------------------------ */
/* 35. Print overrides — force light for print                        */
/* ------------------------------------------------------------------ */

@media print {
    html[data-theme="dark"] .ui-autocomplete,
    html[data-theme="dark"] .daterangepicker,
    html[data-theme="dark"] .datepicker-dropdown {
        display: none !important;
    }
}