/**
 * ERP Dark Theme — color-only layer.
 * Light theme tokens in style.css remain the source of truth and are never edited.
 * Zero layout shift: only color, background, border-color, box-shadow, fill, stroke.
 */

/* --------------------------------------------------------------------------
   Token rebinding (dark)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
    color-scheme: dark;

    --primary-color: #3d3992;
    --primary-dark: #2a2769;
    --primary-light: #5a55c2;
    --secondary-color: #3d3992;
    --primary-rgb: 61, 57, 146;

    --body-bg: #12141c;
    --card-bg: #1a1d27;
    --sidebar-bg: #161922;
    --header-bg: #161922;

    --text-primary: #f3f4f6;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;

    --border-color: rgba(148, 163, 184, 0.18);

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.48);

    --btn-action-bg: #5a55c2;
    --btn-action-color: #ffffff;
    --btn-action-border: #5a55c2;

    --input-bg: #222633;
    --hover-surface: rgba(90, 85, 194, 0.14);
    --table-stripe: rgba(255, 255, 255, 0.03);
    --chart-grid: rgba(148, 163, 184, 0.18);
    --chart-text: #d1d5db;
}

/* --------------------------------------------------------------------------
   Shell surfaces (token consumers — explicit for Bootstrap bleed)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body {
    background-color: var(--body-bg);
    color: var(--text-primary);
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .sidebar-footer,
html[data-theme="dark"] .top-header,
html[data-theme="dark"] .card,
html[data-theme="dark"] .notifications-menu,
html[data-theme="dark"] .notifications-body,
html[data-theme="dark"] .notifications-header,
html[data-theme="dark"] .notifications-footer {
    background: var(--card-bg);
    background-color: var(--card-bg);
}

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

html[data-theme="dark"] .top-header,
html[data-theme="dark"] .notifications-header,
html[data-theme="dark"] .notifications-footer {
    background: var(--header-bg);
    background-color: var(--header-bg);
}

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

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

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

/* --------------------------------------------------------------------------
   Bootstrap utility remaps (pages stay unaware of theme)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .card-header.bg-white,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .popover,
html[data-theme="dark"] .toast {
    background-color: var(--card-bg) !important;
    color: var(--text-primary);
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--hover-surface) !important;
    color: var(--text-primary);
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table > :not(caption) > * > * {
    color: var(--text-primary);
    border-color: var(--border-color);
    background-color: transparent;
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-stripe);
    color: var(--text-primary);
    box-shadow: none;
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--hover-surface);
    color: var(--text-primary);
    box-shadow: none;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .form-control-lg.bg-light,
html[data-theme="dark"] .form-control-lg.bg-white,
html[data-theme="dark"] input.form-control,
html[data-theme="dark"] select.form-select,
html[data-theme="dark"] textarea.form-control {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

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

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] .disabled {
    opacity: 0.55;
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .form-control:focus-visible,
html[data-theme="dark"] .form-select:focus-visible,
html[data-theme="dark"] .btn:focus-visible,
html[data-theme="dark"] .theme-toggle-btn:focus-visible,
html[data-theme="dark"] .nav-link:focus-visible,
html[data-theme="dark"] .notifications-btn:focus-visible,
html[data-theme="dark"] .branch-btn:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

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

html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-pills .nav-link.active {
    color: var(--text-primary);
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

html[data-theme="dark"] .page-link {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

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

html[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

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

html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .alert-secondary {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

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

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: 0.75;
}

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

html[data-theme="dark"] hr {
    border-color: var(--border-color);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Hardcoded light rules from style.css (color overrides only)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] #searchResults .dropdown-item:hover {
    background-color: var(--hover-surface);
}

html[data-theme="dark"] .nav-link:hover {
    background: linear-gradient(90deg, transparent, var(--hover-surface));
    color: var(--primary-light);
}

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

html[data-theme="dark"] .notification-item.unread {
    background: rgba(var(--primary-rgb), 0.12);
}

html[data-theme="dark"] .barcode-info-alert {
    color: #e0f2fe !important;
    background-color: #0c2744;
    border-color: #1e4a73;
}

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

html[data-theme="dark"] #sizeDropdownBtn span,
html[data-theme="dark"] #sizeDropdownBtn::after {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .custom-modern-dropdown .select-trigger:hover {
    background-color: var(--card-bg) !important;
}

html[data-theme="dark"] .card.bg-primary,
html[data-theme="dark"] .card.bg-success,
html[data-theme="dark"] .card.bg-danger,
html[data-theme="dark"] .card.bg-warning,
html[data-theme="dark"] .card.bg-info,
html[data-theme="dark"] .card.bg-dark {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .card.bg-primary .card-title,
html[data-theme="dark"] .card.bg-success .card-title,
html[data-theme="dark"] .card.bg-danger .card-title,
html[data-theme="dark"] .card.bg-warning .card-title,
html[data-theme="dark"] .card.bg-info .card-title,
html[data-theme="dark"] .card.bg-dark .card-title,
html[data-theme="dark"] .card.bg-primary small,
html[data-theme="dark"] .card.bg-success small,
html[data-theme="dark"] .card.bg-danger small,
html[data-theme="dark"] .card.bg-warning small,
html[data-theme="dark"] .card.bg-info small,
html[data-theme="dark"] .card.bg-dark small {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .stat-card-body {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   Select2 (override light !important without editing select2-custom.css)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    color: var(--text-primary) !important;
}

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

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

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

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-results__option {
    color: var(--text-primary);
}

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

/* --------------------------------------------------------------------------
   SweetAlert2
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .swal2-popup {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

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

html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* --------------------------------------------------------------------------
   Theme toggle button (shell + login)
   -------------------------------------------------------------------------- */
.theme-toggle-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    background: var(--primary-color);
    color: #ffffff;
}

.theme-toggle-btn .theme-icon-sun,
.theme-toggle-btn .theme-icon-moon {
    display: none;
}

html[data-theme="light"] .theme-toggle-btn .theme-icon-moon,
html:not([data-theme]) .theme-toggle-btn .theme-icon-moon {
    display: inline-block;
}

html[data-theme="dark"] .theme-toggle-btn .theme-icon-sun {
    display: inline-block;
}

/* Floating toggle on auth pages (login) */
.theme-toggle-btn.theme-toggle-floating {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 2000;
}

html[dir="rtl"] .theme-toggle-btn.theme-toggle-floating {
    left: auto;
    right: 20px;
}

/* --------------------------------------------------------------------------
   Shop admin shell (color overrides — no markup changes)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .shop-admin-wrapper .custom-dropdown-trigger {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--primary-light);
}

html[data-theme="dark"] .shop-admin-wrapper .custom-dropdown-menu {
    background: var(--card-bg);
    border-color: var(--border-color);
}

html[data-theme="dark"] .shop-admin-wrapper .status-filter-bar,
html[data-theme="dark"] .shop-admin-wrapper .p-3.bg-light,
html[data-theme="dark"] .shop-admin-wrapper .card-header.bg-white {
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
}

html[data-theme="dark"] .nav-link.bg-light.text-dark {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
}

/* --------------------------------------------------------------------------
   SI admin intelligence (injected light CSS — override by class)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .si-admin .si-surface {
    background: var(--card-bg);
    border-color: var(--border-color);
}

html[data-theme="dark"] .si-admin .si-kpi-box {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .si-admin .si-info-banner {
    background: linear-gradient(135deg, #1a2a2e, var(--input-bg));
}

html[data-theme="dark"] .si-admin .si-tip-box {
    background: #3b2410;
    border-color: #7c4a1e;
    color: #fdba74;
}

html[data-theme="dark"] .si-admin .si-funnel-track {
    background: var(--input-bg);
}

html[data-theme="dark"] .si-admin .si-flag-card {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html[data-theme="dark"] .si-admin .si-toggle .si-slider {
    background: #475569;
}

/* --------------------------------------------------------------------------
   Ramadan decorations on dark (color/opacity only)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body.ramadan-mode .light-string {
    opacity: 0.45;
}

/* --------------------------------------------------------------------------
   Login page (standalone inline styles — color overrides only)
   -------------------------------------------------------------------------- */
html[data-theme="dark"] body:has(.login-split-container) {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cpath fill='rgba(255,255,255,0.04)' d='M0,900 C300,750 400,550 0,400 Z'/%3E%3Cpath fill='rgba(255,255,255,0.06)' d='M0,900 C200,800 300,650 0,550 Z'/%3E%3Cpath fill='rgba(255,255,255,0.04)' d='M1440,0 C1100,150 1000,350 1440,500 Z'/%3E%3Cpath fill='rgba(255,255,255,0.06)' d='M1440,0 C1200,100 1100,250 1440,350 Z'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e293b 0%, #312e81 50%, #1e1b4b 100%);
}

html[data-theme="dark"] {
    --text-dark: #f3f4f6;
    --text-light: #9ca3af;
    --left-bg: linear-gradient(180deg, #1a2332 0%, #161922 100%);
}

html[data-theme="dark"] .login-split-container {
    background: var(--card-bg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .login-left {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none'%3E%3Cpath fill='rgba(90,85,194,0.12)' d='M0,300 C300,450 600,150 1440,350 L1440,600 L0,600 Z'/%3E%3Cpath fill='rgba(90,85,194,0.18)' d='M0,450 C400,250 800,550 1440,450 L1440,600 L0,600 Z'/%3E%3Cpath fill='rgba(90,85,194,0.22)' d='M0,550 C500,450 900,650 1440,550 L1440,600 L0,600 Z'/%3E%3C/svg%3E") no-repeat bottom center,
        linear-gradient(180deg, #1a2332 0%, #161922 100%);
    background-size: 100% 65%, cover;
}

html[data-theme="dark"] .login-right {
    background: var(--card-bg);
}

html[data-theme="dark"] .feature-item i {
    background: var(--input-bg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .login-right .form-control,
html[data-theme="dark"] .login-split-container .form-control {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .illustration-wrapper img {
    mix-blend-mode: normal;
    filter: brightness(0.92) contrast(1.05);
}

html[data-theme="dark"] .card-face {
    background: var(--card-bg);
}

html[data-theme="dark"] .logo-icon {
    background: var(--input-bg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
}

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

html[data-theme="dark"] .input-container .form-control:focus {
    background: var(--input-bg) !important;
    border-color: var(--primary-light) !important;
}

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

html[data-theme="dark"] .btn-outline-custom,
html[data-theme="dark"] .back-btn {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--primary-light);
}

/* --------------------------------------------------------------------------
   Print — always light (no dark ink waste / thermal)
   -------------------------------------------------------------------------- */
@media print {
    html[data-theme="dark"] {
        color-scheme: light;

        --body-bg: #ffffff;
        --card-bg: #ffffff;
        --sidebar-bg: #ffffff;
        --header-bg: #ffffff;
        --text-primary: #1f2937;
        --text-secondary: #374151;
        --text-muted: #6b7280;
        --border-color: rgba(61, 57, 146, 0.15);
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
        --input-bg: #ffffff;
    }
}