/* ============================================================
   JahinMart — Theme Variables
   Color variables are centralized here for easy theming
   ============================================================ */

:root {
    /* Brand Colors - Vibrant Orange Theme */
    --primary: #e65100;
    /* Deep Orange */
    --primary-light: #ff6d00;
    /* Vivid Orange */
    --primary-dark: #bf360c;
    /* Burnt Orange Dark */
    --secondary: #ffd600;
    /* Golden Yellow Accent */
    --secondary-light: #ffea00;
    --accent: #fff3e0;
    /* Soft Orange Tint */

    /* Semantic Colors */
    --success: #388e3c;
    --danger: #d32f2f;
    --danger-dark: #c62828;
    --warning: #fbc02d;
    --info: #1976d2;
    --star: #ffb300;
    --discount: #e53935;
    --out-of-stock: #9e9e9e;

    /* Neutral Colors - Warm Palette */
    --text-dark: #1a1200;
    /* Very Dark Warm */
    --text-main: #333333;
    --text-gray: #776655;
    /* Muted Warm Gray */
    --text-muted: #555555;
    --text-light: #aaa099;
    --text-silver: #998877;
    --bg-light: #fffaf5;
    /* Soft Warm White */
    --bg-faint: #fff3e0;
    /* Faint Warm Tint */
    --bg-white: #ffffff;
    --border: #fde0c0;
    --border-light: #fff0d8;

    /* Admin Panel Colors */
    --admin-sidebar-bg: #1a0a00;
    /* Very Dark Orange-Black */
    --admin-blue: #1565c0;
    --admin-purple: #7b1fa2;
    --admin-orange: #e65100;

    /* Admin Sidebar specific */
    --sidebar-bg: #1a0a00;
    --sidebar-hover: rgba(230, 100, 0, 0.18);
    --sidebar-active: rgba(230, 100, 0, 0.28);
    --sidebar-text: rgba(255, 255, 255, .75);
    --sidebar-icon: rgba(255, 255, 255, .45);
    --topbar-h: 60px;
    --sidebar-w: 255px;

    /* Soft Status & Admin Colors */
    --admin-green-soft: #e8f5e9;
    --admin-blue-soft: #e3f2fd;
    --admin-orange-soft: #fff3e0;
    --admin-purple-soft: #f3e5f5;
    --admin-red-soft: #ffebee;

    /* Design Tokens - Orange Shadow */
    --shadow-sm: 0 2px 12px rgba(230, 81, 0, .08);
    --shadow-md: 0 8px 24px rgba(230, 81, 0, .12);
    --shadow-lg: 0 12px 48px rgba(230, 81, 0, .15);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography */
    --font-bn: 'Hind Siliguri', sans-serif;
    --font-en: 'Inter', sans-serif;

    /* Dynamic Colors (Light Mode Default) */
    --body-bg: #f0f3f0;
    --body-text: #1a1a2e;
    --card-bg: #ffffff;
    --card-border: #edf2f7;
    --topbar-bg: #ffffff;
    --topbar-border: #e8ede8;
    --input-bg: #ffffff;
    --input-border: #e0e7e0;
    --table-header-bg: #f8faf8;
    --table-border: #eef2ee;
    --stat-card-icon-bg: #e3f2fd;
    --nav-item-color: #475569;
}

/* ============================================================
   MODERATE DARK MODE PALETTE (Slate Blue Theme)
   ============================================================ */
[data-theme="dark"] {
    --body-bg: #0f172a;
    /* Slate Blue (Not too dark) */
    --body-text: #f8fafc;
    --card-bg: #1e293b;
    /* Slightly lighter card */
    --card-border: #334155;
    --topbar-bg: #1e293b;
    --topbar-border: #334155;
    --bg-white: #1e293b;
    --bg-light: #0f172a;
    --bg-faint: #1e293b;
    --border: #334155;
    --border-light: #334155;
    --input-bg: #0f172a;
    --input-border: #334155;
    --text-dark: #f8fafc;
    --text-main: #e2e8f0;
    --text-gray: #94a3b8;
    --text-muted: #94a3b8;
    --table-header-bg: #334155;
    --table-border: #334155;
    --stat-card-icon-bg: rgba(255, 255, 255, 0.05);
    --nav-item-color: #cbd5e1;

    /* Sidebar Dark Mode Adjustments */
    --sidebar-bg: #1e293b;
    --sidebar-hover: rgba(255, 255, 255, 0.05);
    --sidebar-active: rgba(255, 255, 255, 0.08);

    /* Semantic Adjustments for Dark Mode */
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, .3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .4);
    --shadow-lg: 0 12px 48px rgba(0, 0, 0, .5);
}

/* Bootstrap & Utility Overrides for Dark Mode */
[data-theme="dark"] .table {
    color: var(--body-text) !important;
    border-color: var(--card-border) !important;
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    border-color: var(--card-border) !important;
    background-color: transparent !important;
    color: var(--body-text) !important;
}

[data-theme="dark"] .thead-light th,
[data-theme="dark"] .bg-light,
[data-theme="dark"] thead.bg-light th {
    background-color: var(--table-header-bg) !important;
    color: var(--body-text) !important;
}

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

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

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

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(230, 81, 0, 0.25) !important;
}

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

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

[data-theme="dark"] .card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: var(--shadow-sm) !important;
}

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

[data-theme="dark"] .statement-canvas {
    background-color: var(--card-bg) !important;
    color: var(--body-text) !important;
    border-color: var(--card-border) !important;
}

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

[data-theme="dark"] .modal-content {
    background-color: var(--card-bg) !important;
    color: var(--body-text) !important;
    border: 1px solid var(--card-border) !important;
}

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

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

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

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--sidebar-hover) !important;
}

/* Topbar Glassmorphism in Dark Mode */
html[data-theme="dark"] .adm-topbar {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(30, 41, 59, 0.9) !important;
}

/* Select2 Dark Mode Fix (High specificity to win over local styles) */
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--body-text) !important;
}

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

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

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

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

/* Scrollbar for Dark Mode */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0f172a !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #1e293b !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #334155 !important;
}

/* ============================================================
   Overrides for Global Theme Mapping
   Making sure all primary buttons across the site look alike
   ============================================================ */

.btn-primary,
.bg-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.btn-primary:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.border-primary {
    border-color: var(--primary) !important;
}

/* Legacy 'success' used as brand color mapping */
.btn-success,
.bg-success {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}

.btn-success:hover {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
}

.text-success {
    color: var(--primary) !important;
}

.border-success {
    border-color: var(--primary) !important;
}

.btn-outline-success {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-outline-success:hover {
    background-color: var(--primary) !important;
    color: #fff !important;
}

/* Placeholder color for dark mode */
[data-theme="dark"] ::placeholder {
    color: #64748b !important;
    opacity: 0.8 !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #64748b !important;
    opacity: 0.8 !important;
}

/* jQuery UI Autocomplete styling (Universal Premium Look) */
.ui-autocomplete {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    padding: 8px 4px !important;
    z-index: 2000 !important;
    font-family: var(--font-bn), var(--font-en), sans-serif !important;
    max-height: 300px;
    overflow-y: auto;
}

.ui-menu-item {
    padding: 2px 4px !important;
    background: transparent !important;
}

.ui-menu-item-wrapper {
    color: #334155 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    transition: all 0.15s ease-in-out !important;
}

.ui-menu-item-wrapper:hover,
.ui-menu-item-wrapper.ui-state-active {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

/* jQuery UI Autocomplete Dark Mode Support */
[data-theme="dark"] .ui-autocomplete {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .ui-menu-item-wrapper {
    color: #cbd5e1 !important;
}

/* .adm-page-title .text-muted.small.mb-0,
.small, small {
    font-size: .6em;
} */

/* Flatpickr Dark Mode Support */
[data-theme="dark"] .flatpickr-calendar {
    background: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--body-text) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-day {
    color: var(--body-text) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-day.today {
    border-color: var(--primary) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-calendar .flatpickr-day.selected {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-months .flatpickr-month,
[data-theme="dark"] .flatpickr-calendar .flatpickr-weekdays .flatpickr-weekday {
    color: var(--body-text) !important;
    fill: var(--body-text) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-current-month .numInputWrapper span.arrowUp:after,
[data-theme="dark"] .flatpickr-calendar .flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color: var(--body-text) !important;
}

[data-theme="dark"] .flatpickr-calendar .flatpickr-innerContainer {
    background: transparent !important;
}