/* SBMCover — modern light/dark storefront + admin accents */
:root {
    --primary: 56 189 248;
    --primary-light: 125 211 252;
    --primary-slate: 15 23 42;
    --sbm-surface: #f8fafc;
    --sbm-surface-elevated: #ffffff;
    --sbm-text: #0f172a;
    --sbm-muted: #64748b;
    --sbm-border: #e2e8f0;
}

html[data-theme="dark"] {
    --primary: 99 102 241;
    --primary-light: 129 140 248;
    --primary-slate: 30 41 59;
    --sbm-surface: #0b0f14;
    --sbm-surface-elevated: #141a22;
    --sbm-text: #f1f5f9;
    --sbm-muted: #94a3b8;
    --sbm-border: #1e293b;
}

html[data-theme="dark"] body {
    background-color: var(--sbm-surface) !important;
    color: var(--sbm-text);
}

html[data-theme="dark"] header.bg-white,
html[data-theme="dark"] .shadow-xs.bg-white,
html[data-theme="dark"] .bg-white.rounded-b-2xl,
html[data-theme="dark"] .dropdown-list.bg-white,
html[data-theme="dark"] .modal-dialog,
html[data-theme="dark"] .canvas-content.bg-white {
    background-color: var(--sbm-surface-elevated) !important;
    border-color: var(--sbm-border);
}

html[data-theme="dark"] .text-heading,
html[data-theme="dark"] .header-nav-menu,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 {
    color: var(--sbm-text) !important;
}

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

html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-slate-200 {
    border-color: var(--sbm-border) !important;
}

html[data-theme="dark"] .bg-gray-100 {
    background-color: #1e293b !important;
}

html[data-theme="dark"] .db-header,
html[data-theme="dark"] .db-sidebar,
html[data-theme="dark"] .db-main {
    background-color: var(--sbm-surface-elevated) !important;
}

html[data-theme="dark"] .db-card,
html[data-theme="dark"] .db-table,
html[data-theme="dark"] .db-field-control {
    background-color: #1a2230 !important;
    border-color: var(--sbm-border) !important;
    color: var(--sbm-text);
}

/* Hero / home polish */
.sbm-trust-bar {
    background: linear-gradient(90deg, rgb(var(--primary) / 0.12), rgb(var(--primary-light) / 0.08));
    border-bottom: 1px solid rgb(var(--primary) / 0.15);
}

html[data-theme="dark"] .sbm-trust-bar {
    background: linear-gradient(90deg, rgb(99 102 241 / 0.2), rgb(56 189 248 / 0.08));
}

.sbm-theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid rgb(var(--primary) / 0.35);
    background: rgb(var(--primary) / 0.12);
    color: rgb(var(--primary));
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.sbm-theme-toggle-btn:hover {
    transform: scale(1.05);
    background: rgb(var(--primary) / 0.22);
}

.sbm-theme-toggle-btn--nav {
    order: 10;
}

html[data-theme="dark"] .sbm-theme-toggle-btn {
    background: rgb(var(--primary) / 0.25);
    color: #f8fafc;
    border-color: rgb(var(--primary) / 0.5);
}

/* Tighter header spacing (search + theme on mobile) */
header .container > .flex.items-center.justify-between {
    gap: 0.5rem !important;
}

@media (max-width: 1023px) {
    header .container > .flex.items-center.justify-between {
        justify-content: flex-start !important;
    }

    /* Keep mobile search + theme grouped on the right (do not move DOM — Vue owns the header) */
    header .container > .flex.items-center.justify-between > button.block.lg\:hidden {
        margin-left: auto;
    }

    header .container > .flex.items-center.justify-between > .sbm-theme-toggle-btn {
        margin-left: 0.35rem;
    }
}

@media (min-width: 1024px) {
    header .container > .flex.items-center.justify-between {
        gap: 1rem !important;
    }
}

/* Product grid — equal image height */
.miron > .relative.overflow-hidden.rounded-xl {
    aspect-ratio: 1 / 1;
    background-color: #f1f5f9;
}

.miron > .relative.overflow-hidden.rounded-xl > a {
    display: block;
    width: 100%;
    height: 100%;
}

.miron > .relative.overflow-hidden.rounded-xl img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html[data-theme="dark"] .miron > .relative.overflow-hidden.rounded-xl {
    background-color: #1e293b;
}

html[data-theme="dark"] .miron.sm\:shadow-card,
html[data-theme="dark"] .miron {
    background-color: var(--sbm-surface-elevated) !important;
}

/* Dark theme — forms, quantity, inputs (product detail, auth, checkout) */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    color: var(--sbm-text) !important;
    background-color: #1a2230 !important;
    border-color: var(--sbm-border) !important;
}

html[data-theme="dark"] input[type="number"] {
    -moz-appearance: textfield;
}

html[data-theme="dark"] .bg-\[\#F7F7FC\],
html[data-theme="dark"] [class*="bg-[#F7F7FC]"] {
    background-color: #1e293b !important;
}

html[data-theme="dark"] .bg-\[\#FFF4F1\],
html[data-theme="dark"] [class*="bg-[#FFF4F1]"] {
    background-color: rgb(var(--primary) / 0.15) !important;
    color: var(--sbm-text) !important;
}

html[data-theme="dark"] .bg-\[\#EFF0F6\],
html[data-theme="dark"] [class*="bg-[#EFF0F6]"] {
    background-color: #1e293b !important;
}

html[data-theme="dark"] [class*="bg-[#F7F7F7]"] {
    background-color: #1e293b !important;
    border-color: var(--sbm-border) !important;
}

html[data-theme="dark"] button[class*="bg-[#F7F7FC]"]:not(.bg-primary),
html[data-theme="dark"] .field-button[class*="F7F7FC"] {
    color: var(--sbm-text) !important;
}

html[data-theme="dark"] #search.bg-white,
html[data-theme="dark"] form#search {
    background-color: var(--sbm-surface-elevated) !important;
}

html[data-theme="dark"] .sm\:bg-white,
html[data-theme="dark"] .bg-white.rounded-2xl,
html[data-theme="dark"] .bg-white.rounded-xl,
html[data-theme="dark"] .bg-white.p-4,
html[data-theme="dark"] .bg-white.p-6 {
    background-color: var(--sbm-surface-elevated) !important;
}

html[data-theme="dark"] .shadow-card,
html[data-theme="dark"] .shadow-paper,
html[data-theme="dark"] .shadow-hover {
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.35) !important;
}

html[data-theme="dark"] .lab-fill-circle-minus,
html[data-theme="dark"] .lab-fill-circle-plus {
    color: var(--sbm-text);
}

/* Quantity pill — inner field matches outer track */
html[data-theme="dark"] .rounded-full[class*="F7F7FC"] input[type="number"],
html[data-theme="dark"] .rounded-full.bg-\[\#F7F7FC\] input[type="number"] {
    background-color: transparent !important;
    border: none !important;
    color: var(--sbm-text) !important;
}

html[data-theme="dark"] .miron button.bg-white {
    background-color: var(--sbm-surface-elevated) !important;
    color: var(--sbm-text);
}

html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-slate-50 {
    background-color: #1a2230 !important;
}

html[data-theme="dark"] .auth-body,
html[data-theme="dark"] .auth-form-card {
    background-color: var(--sbm-surface-elevated) !important;
}

html[data-theme="dark"] .db-field-control.bg-white,
html[data-theme="dark"] input.bg-white {
    background-color: #1a2230 !important;
}

/* Mobile off-canvas sidebars (menu, categories, cart, account) */
html[data-theme="dark"] aside[id$="-canvas"] > div.bg-white,
html[data-theme="dark"] aside[id$="-canvas"] > div[class*="bg-white"],
html[data-theme="dark"] [id^="mobile_category_"].bg-white {
    background-color: var(--sbm-surface-elevated) !important;
    color: var(--sbm-text);
}

html[data-theme="dark"] aside[id$="-canvas"] .border-slate-100,
html[data-theme="dark"] [id^="mobile_category_"] .border-slate-100 {
    border-color: var(--sbm-border) !important;
}

html[data-theme="dark"] aside[id$="-canvas"] .bg-slate-100,
html[data-theme="dark"] aside[id$="-canvas"] .bg-slate-200,
html[data-theme="dark"] [id^="mobile_category_"] .bg-slate-100 {
    background-color: #1e293b !important;
}

html[data-theme="dark"] aside[id$="-canvas"] a:not([class*="text-primary"]):not([class*="text-danger"]),
html[data-theme="dark"] aside[id$="-canvas"] span,
html[data-theme="dark"] aside[id$="-canvas"] h4,
html[data-theme="dark"] aside[id$="-canvas"] p,
html[data-theme="dark"] aside[id$="-canvas"] button.language-toggle,
html[data-theme="dark"] [id^="mobile_category_"] a:not([class*="text-primary"]),
html[data-theme="dark"] [id^="mobile_category_"] .lab-line-chevron-left {
    color: var(--sbm-text) !important;
}

html[data-theme="dark"] aside[id$="-canvas"] .text-heading,
html[data-theme="dark"] [id^="mobile_category_"] .font-semibold,
html[data-theme="dark"] [id^="mobile_category_"] .font-bold {
    color: var(--sbm-text) !important;
}

/* Admin dashboard sidebar */
html[data-theme="dark"] .db-sidebar-nav-menu {
    color: var(--sbm-text);
}

html[data-theme="dark"] .db-sidebar-nav-menu:hover {
    background-color: #1e293b !important;
}

html[data-theme="dark"] .db-sidebar-nav-dropdown-menu {
    color: var(--sbm-muted);
}

html[data-theme="dark"] .db-sidebar-nav-dropdown-menu:hover {
    background-color: #1e293b !important;
    color: var(--sbm-text);
}

html[data-theme="dark"] .db-sidebar-nav-dropdown-list {
    border-color: var(--sbm-border) !important;
}

html[data-theme="dark"] .db-sidebar .text-gray-600,
html[data-theme="dark"] .db-sidebar .text-gray-700,
html[data-theme="dark"] .db-sidebar-nav-title {
    color: var(--sbm-muted) !important;
}