/**
 * Dark Theme — Overrides via [data-theme="dark"] + .dark-theme
 * HubSoftware Fluent Design System
 * 
 * Most dark-mode styles are handled by CSS variables in themes.css.
 * This file covers legacy .dark-theme class overrides for connect.min.css compatibility.
 */

/* ─── Body ─── */
body.dark-theme,
[data-theme="dark"] body {
    background: var(--color-bg);
    color: var(--color-text);
}

/* ─── Sidebar ─── */
.dark-theme .page-sidebar,
[data-theme="dark"] .page-sidebar {
    background: var(--color-sidebar-bg);
    border-right-color: var(--color-sidebar-border);
}

.dark-theme .accordion-menu > li > a,
[data-theme="dark"] .accordion-menu > li > a {
    color: var(--color-sidebar-text);
}

.dark-theme .accordion-menu > li > a:hover,
[data-theme="dark"] .accordion-menu > li > a:hover {
    background: var(--color-sidebar-hover);
    color: var(--color-sidebar-text-active);
}

.dark-theme .accordion-menu > li.active-page > a,
[data-theme="dark"] .accordion-menu > li.active-page > a {
    background: var(--color-sidebar-active);
    color: var(--color-primary);
}

.dark-theme .accordion-menu > li.active-page > a:only-child,
[data-theme="dark"] .accordion-menu > li.active-page > a:only-child {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.dark-theme .accordion-menu > li.open > a,
[data-theme="dark"] .accordion-menu > li.open > a {
    color: var(--color-sidebar-text-active);
}

.dark-theme .accordion-menu li.sidebar-title,
[data-theme="dark"] .accordion-menu li.sidebar-title {
    color: var(--color-sidebar-section);
}

.dark-theme .accordion-menu li.open,
[data-theme="dark"] .accordion-menu li.open {
    background: transparent;
}

.dark-theme .accordion-menu li ul li a:hover,
.dark-theme .accordion-menu li ul li a.active,
[data-theme="dark"] .accordion-menu li ul li a:hover,
[data-theme="dark"] .accordion-menu li ul li a.active {
    color: var(--color-primary);
    background: var(--color-sidebar-hover);
}

/* ─── Page Header / Topbar ─── */
.dark-theme .page-header,
[data-theme="dark"] .page-header {
    background: var(--color-topbar-bg);
    border-bottom-color: var(--color-topbar-border);
}

.dark-theme .page-header .navbar ul.navbar-nav > li > a,
[data-theme="dark"] .page-header .navbar ul.navbar-nav > li > a {
    color: var(--color-text-muted);
}

.dark-theme .page-header .navbar ul.navbar-nav > li > a:hover,
[data-theme="dark"] .page-header .navbar ul.navbar-nav > li > a:hover {
    color: var(--color-text);
    background: var(--color-bg-hover);
}

/* Theme toggle */
.dark-theme .page-header .navbar ul li a#dark-theme-toggle i.material-icons,
[data-theme="dark"] #dark-theme-toggle .material-icons {
    visibility: visible;
    opacity: 1;
    width: auto;
    display: inline;
}

.dark-theme .page-header .navbar ul li a#dark-theme-toggle i.material-icons-outlined,
[data-theme="dark"] #dark-theme-toggle .material-icons-outlined {
    visibility: hidden;
    opacity: 0;
    width: 0;
    display: none;
}

/* ─── Cards ─── */
.dark-theme .card,
[data-theme="dark"] .card {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

.dark-theme .card.card-transparent,
[data-theme="dark"] .card.card-transparent {
    background: transparent;
    border: none;
    box-shadow: none;
}

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

.dark-theme .card .card-header,
.dark-theme .card .card-footer,
[data-theme="dark"] .card .card-header,
[data-theme="dark"] .card .card-footer {
    border-color: var(--color-border);
}

/* ─── Dropdowns ─── */
.dark-theme .dropdown-menu,
[data-theme="dark"] .dropdown-menu {
    background: var(--color-bg-card);
    border-color: var(--color-border);
    box-shadow: var(--gf-shadow-xl);
}

.dark-theme .dropdown-menu a.dropdown-item,
[data-theme="dark"] .dropdown-menu .dropdown-item {
    color: var(--color-text-muted);
}

.dark-theme .dropdown-menu a.dropdown-item:hover,
[data-theme="dark"] .dropdown-menu .dropdown-item:hover {
    color: var(--color-text);
    background: var(--color-bg-hover);
}

.dark-theme .dropdown-menu .dropdown-divider,
[data-theme="dark"] .dropdown-menu .dropdown-divider {
    border-top-color: var(--color-border);
}

/* ─── Tables ─── */
.dark-theme .table,
.dark-theme .table thead th,
[data-theme="dark"] .table,
[data-theme="dark"] .table thead th {
    color: var(--color-text);
}

.dark-theme .table *,
[data-theme="dark"] .table * {
    border-color: var(--color-border) !important;
}

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

.dark-theme .table.table-hover tbody tr:hover,
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background: rgba(255, 255, 255, 0.04) !important;
}

.dark-theme .table .thead-dark th,
[data-theme="dark"] .table .thead-dark th {
    background: var(--color-bg);
}

/* ─── Forms ─── */
.dark-theme .form-control,
[data-theme="dark"] .form-control {
    background: var(--color-input-bg);
    border-color: var(--color-input-border);
    color: var(--color-text);
}

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

.dark-theme .form-control:focus,
[data-theme="dark"] .form-control:focus {
    background: var(--color-bg-elevated);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-input-focus-ring);
}

.dark-theme .form-control.bg-white.border-danger,
.dark-theme .form-control.bg-primary.border-danger,
[data-theme="dark"] .form-control.bg-white.border-danger,
[data-theme="dark"] .form-control.bg-primary.border-danger {
    color: var(--color-text) !important;
}

.dark-theme .input-group-text,
[data-theme="dark"] .input-group-text {
    background: var(--color-bg-active);
    border-color: var(--color-input-border);
    color: var(--color-text-muted);
}

.dark-theme .custom-control-label::before,
[data-theme="dark"] .custom-control-label::before {
    background: var(--color-input-bg);
    border-color: var(--color-input-border);
}

/* ─── Nav Tabs ─── */
.dark-theme .nav-tabs .nav-item .nav-link,
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--color-text-muted);
}

.dark-theme .nav-tabs .nav-item .nav-link:hover,
[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--color-text);
}

.dark-theme .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: transparent;
}

/* ─── Pagination ─── */
.dark-theme .pagination li a,
.dark-theme .pagination .page-link,
[data-theme="dark"] .pagination .page-link {
    border-color: var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text-muted);
}

.dark-theme .pagination li a:hover,
[data-theme="dark"] .pagination .page-link:hover {
    color: var(--color-primary);
    background: var(--color-bg-hover);
}

.dark-theme .pagination li.active a,
.dark-theme .page-item.active .page-link,
[data-theme="dark"] .page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff !important;
}

.dark-theme .page-item.disabled .page-link,
[data-theme="dark"] .page-item.disabled .page-link {
    background: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text-placeholder);
}

/* ─── Modals ─── */
.dark-theme .modal-content,
[data-theme="dark"] .modal-content {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

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

.dark-theme .modal-header,
.dark-theme .modal-footer,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--color-border);
}

/* ─── Alerts ─── */
.dark-theme .alert.alert-success,
[data-theme="dark"] .alert-success { background: var(--color-success-light); color: #A7F3D0; }
.dark-theme .alert.alert-danger,
[data-theme="dark"] .alert-danger { background: var(--color-danger-light); color: #FECACA; }
.dark-theme .alert.alert-warning,
[data-theme="dark"] .alert-warning { background: var(--color-warning-light); color: #FDE68A; }
.dark-theme .alert.alert-info,
[data-theme="dark"] .alert-info { background: var(--color-info-light); color: #BFDBFE; }
.dark-theme .alert.alert-secondary,
[data-theme="dark"] .alert-secondary { background: var(--color-bg-active); color: var(--color-text-muted); }
.dark-theme .alert.alert-light,
[data-theme="dark"] .alert-light { background: var(--color-bg-active); color: var(--color-text); }
.dark-theme .alert.alert-dark,
[data-theme="dark"] .alert-dark { background: var(--color-bg); color: var(--color-text); }

/* ─── Badges ─── */
.dark-theme .badge,
[data-theme="dark"] .badge {
    background: var(--color-bg-active);
    color: var(--color-text-muted);
}

.dark-theme .badge.badge-primary, [data-theme="dark"] .badge.badge-primary { color: #fff; background: var(--color-primary) !important; }
.dark-theme .badge.badge-success, [data-theme="dark"] .badge.badge-success { color: #fff; background: var(--color-success) !important; }
.dark-theme .badge.badge-danger, [data-theme="dark"] .badge.badge-danger { color: #fff; background: var(--color-danger) !important; }
.dark-theme .badge.badge-warning, [data-theme="dark"] .badge.badge-warning { color: #fff; background: var(--color-warning) !important; }
.dark-theme .badge.badge-info, [data-theme="dark"] .badge.badge-info { color: #fff; background: var(--color-info) !important; }
.dark-theme .badge.badge-secondary, [data-theme="dark"] .badge.badge-secondary { background: var(--color-bg-active) !important; color: var(--color-text-muted) !important; }

/* ─── Buttons ─── */
.dark-theme .btn.btn-secondary,
[data-theme="dark"] .btn-secondary {
    color: var(--color-text-muted);
    background: var(--color-bg-active);
    border-color: var(--color-border);
}

.dark-theme .btn.btn-secondary:hover,
[data-theme="dark"] .btn-secondary:hover {
    background: var(--color-bg-hover) !important;
    color: var(--color-text) !important;
}

.dark-theme .btn.btn-light,
[data-theme="dark"] .btn-light {
    background: var(--color-bg-active);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.dark-theme .btn.btn-light:hover,
[data-theme="dark"] .btn-light:hover {
    background: var(--color-bg-hover) !important;
    color: var(--color-text) !important;
}

/* ─── Breadcrumbs ─── */
.dark-theme .breadcrumb,
[data-theme="dark"] .breadcrumb {
    background: transparent;
}

.dark-theme .breadcrumb-item.active,
[data-theme="dark"] .breadcrumb-item.active {
    color: var(--color-text);
}

.dark-theme .breadcrumb-item + .breadcrumb-item::before,
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-text-muted);
}

/* ─── Progress ─── */
.dark-theme .progress,
[data-theme="dark"] .progress {
    background: var(--color-bg-active);
}

/* ─── Accordion ─── */
.dark-theme .accordion > .card,
[data-theme="dark"] .accordion > .card {
    border: 1px solid var(--color-border) !important;
}

.dark-theme .accordion > .card .card-header,
[data-theme="dark"] .accordion > .card .card-header {
    background: var(--color-bg-hover);
}

/* ─── Compact sidebar ─── */
.dark-theme.compact-sidebar .page-sidebar,
[data-theme="dark"].compact-sidebar .page-sidebar {
    box-shadow: none;
}

.dark-theme.compact-sidebar .page-sidebar:before,
[data-theme="dark"].compact-sidebar .page-sidebar:before {
    background: var(--color-sidebar-bg);
}

.dark-theme.compact-sidebar .accordion-menu ul,
[data-theme="dark"].compact-sidebar .accordion-menu ul {
    background: var(--color-bg-elevated) !important;
    border-color: var(--color-border) !important;
}

.dark-theme.compact-sidebar .accordion-menu > li > ul::before,
[data-theme="dark"].compact-sidebar .accordion-menu > li > ul::before {
    border-right-color: var(--color-border);
}

/* ─── Select2 ─── */
.dark-theme .select2-container--default .select2-selection,
[data-theme="dark"] .select2-container--default .select2-selection {
    background: var(--color-input-bg) !important;
    border-color: var(--color-input-border) !important;
}

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

.dark-theme .select2-dropdown,
[data-theme="dark"] .select2-dropdown {
    background: var(--color-bg-card) !important;
    border-color: var(--color-border) !important;
}

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

.dark-theme .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--color-primary-light) !important;
    color: var(--color-primary) !important;
}

.dark-theme .select2-container--default .select2-results__option[aria-selected=true],
[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--color-bg-active) !important;
}

.dark-theme .select2-selection__choice,
[data-theme="dark"] .select2-selection__choice {
    background: var(--color-primary) !important;
    color: #fff !important;
}

.dark-theme .select2-search__field,
[data-theme="dark"] .select2-search__field {
    color: var(--color-text) !important;
}

/* ─── Dashboard ─── */
.dark-theme .stats-card,
[data-theme="dark"] .stats-card {
    border-color: var(--color-border) !important;
}

.dark-theme .stats-card .card-title,
.dark-theme .savings-stats h5,
.dark-theme .visitors-stats .visitors-stats-info h5,
.dark-theme .top-products .product-item h5,
[data-theme="dark"] .stats-card .card-title,
[data-theme="dark"] .savings-stats h5,
[data-theme="dark"] .visitors-stats-info h5,
[data-theme="dark"] .top-products .product-item h5 {
    color: var(--color-text);
}

.dark-theme .stats-card .stats-icon.change-success,
[data-theme="dark"] .stats-card .stats-icon.change-success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.dark-theme .stats-card .stats-icon.change-danger,
[data-theme="dark"] .stats-card .stats-icon.change-danger {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.dark-theme .top-products .top-products-list .product-item,
[data-theme="dark"] .top-products .product-item {
    border-color: var(--color-border);
}

.dark-theme .product-item:nth-child(even),
[data-theme="dark"] .product-item:nth-child(even) {
    background-color: transparent;
}

/* ─── Footer ─── */
.dark-theme .page-footer,
[data-theme="dark"] .page-footer {
    border-top-color: var(--color-border);
}

/* ─── Misc ─── */
.dark-theme .close,
.dark-theme .btn-close,
[data-theme="dark"] .close,
[data-theme="dark"] .btn-close {
    color: var(--color-text-muted);
    text-shadow: none !important;
    filter: invert(1) grayscale(100%) brightness(200%);
}

.dark-theme .divider,
[data-theme="dark"] .divider {
    background: var(--color-border);
}

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

.dark-theme .list-group-item,
[data-theme="dark"] .list-group-item {
    border-color: var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-text);
}

.dark-theme .toast,
[data-theme="dark"] .toast {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

.dark-theme .toast-header,
[data-theme="dark"] .toast-header {
    background: var(--color-bg-elevated);
    border-bottom-color: var(--color-border);
}

.dark-theme pre code,
[data-theme="dark"] pre code {
    color: var(--color-text-muted);
}

.dark-theme .blockUI.blockOverlay,
[data-theme="dark"] .blockUI.blockOverlay {
    background: var(--color-bg-overlay) !important;
}

/* ─── Loader ─── */
.dark-theme .loader,
[data-theme="dark"] .loader {
    background: var(--color-bg) !important;
}

/* ─── Mobile header ─── */
@media (max-width: 1199px) {
    .dark-theme .page-header,
    [data-theme="dark"] .page-header {
        background: var(--color-topbar-bg);
        border-bottom-color: var(--color-topbar-border);
    }
}