@import url("./custom/00-tokens.css?v=20260705-dark-warm-shell");
@import url("./custom/10-base.css");
@import url("./custom/20-layout.css?v=20260604-admin-shell-fix");
@import url("./custom/30-components.css?v=20260607-country-code-select");
@import url("./custom/40-dashboard.css?v=20260604-admin-shell-fix");
@import url("./custom/50-pos.css?v=20260605-pos-shell-offset");
@import url("./custom/55-orders.css");
@import url("./custom/60-inventory.css");
@import url("./custom/65-accounting.css");
@import url("./custom/66-cash-register.css");
@import url("./custom/68-kitchen-delivery.css");
@import url("./custom/70-landing.css");
@import url("./custom/75-public-shop.css?v=20260605-shop-order-permissions-variation-ui");
@import url("./custom/80-auth.css");
@import url("./custom/85-whatsapp-ovolachat.css?v=20260606-ovolachat-audiences");
@import url("./custom/90-rtl.css");
@import url("./custom/99-overrides.css?v=20260604-sidebar-collapse-gutter");

/*
 * Custom design-system entry point.
 *
 * Keep @import rules at the top of this file. Add new CSS inside
 * public/css/custom/*.css so upgrades to the vendor application remain easier
 * to merge.
 */

/*
 * Critical shell cache guards. Landing refresh: 20260603-v2.
 * These duplicate the key shell overrides so a versioned app-custom.css refresh
 * still fixes stale imported CSS in browsers that cache @import children hard.
 */
body:has(#sidebar),
body:has(#sidebar) > div.flex,
body:has(#sidebar) #main-content:not(:has(#pos-container)),
body:has(#sidebar) #main-content:not(:has(#pos-container)) main {
    background: var(--custom-page-bg) !important;
}

body:has(#sidebar) nav.fixed.z-30 {
    min-height: var(--custom-header-height) !important;
    background: var(--custom-surface) !important;
    border-bottom: 1px solid var(--custom-border) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 12px 28px rgba(15, 23, 42, 0.035) !important;
}

body:has(#pos-container) nav.fixed.z-50 {
    min-height: 64px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #edf0f4 !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.025) !important;
}

body:has(#sidebar) nav.fixed.z-30 a[class~="bg-skin-base"],
body:has(#sidebar) nav.fixed.z-30 button[class~="bg-skin-base"],
body:has(#pos-container) nav.fixed.z-50 a[class~="bg-skin-base"],
body:has(#pos-container) nav.fixed.z-50 button[class~="bg-skin-base"] {
    background-color: color-mix(in srgb, var(--custom-primary) 8%, #ffffff) !important;
    border-color: color-mix(in srgb, var(--custom-primary) 22%, #ffffff) !important;
    color: var(--custom-primary) !important;
    box-shadow: none !important;
}

body:has(#sidebar) nav.fixed.z-30 a[class*="border-skin-base"]:not([class~="bg-skin-base"]),
body:has(#sidebar) nav.fixed.z-30 button[class*="border-skin-base"]:not([class~="bg-skin-base"]),
body:has(#pos-container) nav.fixed.z-50 a[class*="border-skin-base"]:not([class~="bg-skin-base"]),
body:has(#pos-container) nav.fixed.z-50 button[class*="border-skin-base"]:not([class~="bg-skin-base"]) {
    background: var(--custom-surface) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text-muted) !important;
    box-shadow: none !important;
}

body:has(#sidebar) #sidebar,
body:has(#sidebar) #sidebar > div,
body:has(#sidebar) #sidebar .bg-white,
body:has(#sidebar) #sidebar .dark\:bg-gray-800 {
    background-color: var(--custom-surface) !important;
    box-shadow: none !important;
}

body:has(#sidebar) #sidebar a[class*="bg-skin-base/[.20]"],
body:has(#sidebar) #sidebar button[class*="bg-skin-base/[.20]"] {
    background-color: color-mix(in srgb, var(--custom-primary) 9%, var(--custom-surface)) !important;
    border-color: color-mix(in srgb, var(--custom-primary) 22%, var(--custom-surface)) !important;
    color: var(--custom-primary) !important;
    box-shadow: none !important;
}

/*
 * Landing header guard.
 * The public landing header stays pinned while the page scrolls.
 */
body.landing-page .landing-desktop-header,
body.landing-page .landing-mobile-header {
    position: sticky !important;
    top: 0 !important;
    inset-block-start: 0 !important;
    z-index: 80 !important;
}

body.landing-page .landing-topbar-desktop,
body.landing-page .landing-topbar-mobile {
    position: static !important;
    top: auto !important;
    inset: auto !important;
}

@media (min-width: 1024px) {
    body:has(#pos-container) #main-content #order-items-container {
        top: 64px !important;
        height: calc(100dvh - 64px) !important;
    }
}

/* Landing cache guards: keep public pages correct even if imported CSS is cached. */
body.landing-page {
    overflow-x: hidden !important;
    background: #ffffff !important;
}

body.landing-page header.lg\:block #mobile-menu-2 {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.landing-page header.lg\:block #mobile-menu-2 a {
    border: 0 !important;
    background: transparent !important;
    color: var(--custom-text-muted) !important;
    box-shadow: none !important;
}

body.landing-page header.lg\:block #mobile-menu-2 a:hover,
body.landing-page header.lg\:block #mobile-menu-2 a[aria-current="page"] {
    color: var(--custom-primary) !important;
}

body.landing-page .landing-language-switcher button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #647084 !important;
    box-shadow: none !important;
}

body.landing-page .landing-language-switcher button svg {
    width: 20px !important;
    height: 20px !important;
}

body.landing-page .landing-hero h1,
body.landing-page .landing-lead,
body.landing-page .landing-hero-copy > p {
    width: 100% !important;
}

@media (max-width: 720px) {
    body.landing-page .landing-container {
        width: min(calc(100% - 28px), var(--landing-max)) !important;
    }

    body.landing-page .landing-hero-copy {
        align-items: stretch !important;
    }

    body.landing-page .landing-hero h1,
    body.landing-page .landing-lead,
    body.landing-page .landing-hero-copy > p {
        max-width: 100% !important;
    }
}

/* Dark shell cache guards: keep app/admin/POS chrome from being forced white. */
.dark body:has(#sidebar),
.dark body:has(#sidebar) > div.flex,
.dark body:has(#sidebar) #main-content:not(:has(#pos-container)),
.dark body:has(#sidebar) #main-content:not(:has(#pos-container)) main,
.dark #main-content:has(#pos-container),
.dark #pos-container > .relative.flex > .w-full.lg\:w-8\/12,
.dark #pos-container .md\:flex.flex-col.bg-gray-50 {
    background: var(--custom-page-bg) !important;
    color: var(--custom-text) !important;
}

.dark body:has(#sidebar) nav.fixed.z-30,
.dark body:has(#pos-container) nav.fixed.z-50 {
    background: color-mix(in srgb, var(--custom-surface) 92%, transparent) !important;
    border-bottom: 1px solid var(--custom-border) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px rgba(0, 0, 0, 0.24) !important;
}

.dark body:has(#sidebar) nav.fixed.z-30 a[class~="bg-skin-base"],
.dark body:has(#sidebar) nav.fixed.z-30 button[class~="bg-skin-base"],
.dark body:has(#pos-container) nav.fixed.z-50 a[class~="bg-skin-base"],
.dark body:has(#pos-container) nav.fixed.z-50 button[class~="bg-skin-base"] {
    background-color: color-mix(in srgb, var(--custom-primary) 18%, var(--custom-surface)) !important;
    border-color: color-mix(in srgb, var(--custom-primary) 36%, var(--custom-surface)) !important;
    color: var(--custom-primary) !important;
    box-shadow: none !important;
}

.dark body:has(#sidebar) nav.fixed.z-30 a[class*="border-skin-base"]:not([class~="bg-skin-base"]),
.dark body:has(#sidebar) nav.fixed.z-30 button[class*="border-skin-base"]:not([class~="bg-skin-base"]),
.dark body:has(#pos-container) nav.fixed.z-50 a[class*="border-skin-base"]:not([class~="bg-skin-base"]),
.dark body:has(#pos-container) nav.fixed.z-50 button[class*="border-skin-base"]:not([class~="bg-skin-base"]),
.dark body:has(#sidebar) nav.fixed.z-30 button[id^="theme-toggle"],
.dark body:has(#sidebar) nav.fixed.z-30 button[id*="fullscreen"],
.dark body:has(#sidebar) nav.fixed.z-30 #toggle-sidebar,
.dark body:has(#sidebar) nav.fixed.z-30 #toggleSidebarMobile {
    background: var(--custom-surface) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text-muted) !important;
    box-shadow: none !important;
}

.dark body:has(#sidebar) nav.fixed.z-30 a[class*="border-skin-base"]:not([class~="bg-skin-base"]):hover,
.dark body:has(#sidebar) nav.fixed.z-30 button[class*="border-skin-base"]:not([class~="bg-skin-base"]):hover,
.dark body:has(#pos-container) nav.fixed.z-50 a[class*="border-skin-base"]:not([class~="bg-skin-base"]):hover,
.dark body:has(#pos-container) nav.fixed.z-50 button[class*="border-skin-base"]:not([class~="bg-skin-base"]):hover,
.dark body:has(#sidebar) nav.fixed.z-30 button[id^="theme-toggle"]:hover,
.dark body:has(#sidebar) nav.fixed.z-30 button[id*="fullscreen"]:hover,
.dark body:has(#sidebar) nav.fixed.z-30 #toggle-sidebar:hover,
.dark body:has(#sidebar) nav.fixed.z-30 #toggleSidebarMobile:hover {
    background: var(--custom-surface-muted) !important;
    color: var(--custom-text) !important;
}

.dark body:has(#sidebar) #sidebar,
.dark body:has(#sidebar) #sidebar > div,
.dark body:has(#sidebar) #sidebar .bg-white,
.dark body:has(#sidebar) #sidebar .dark\:bg-gray-800,
.dark body:has(#sidebar) #sidebar [sidebar-bottom-menu] {
    background-color: var(--custom-surface) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text-muted) !important;
}

.dark body:has(#sidebar) #sidebar a,
.dark body:has(#sidebar) #sidebar button {
    color: var(--custom-text-muted) !important;
}

.dark body:has(#sidebar) #sidebar a:hover,
.dark body:has(#sidebar) #sidebar button:hover {
    background-color: var(--custom-surface-muted) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text) !important;
}

.dark body:has(#sidebar) #sidebar a[class*="bg-skin-base/[.20]"],
.dark body:has(#sidebar) #sidebar button[class*="bg-skin-base/[.20]"] {
    background-color: color-mix(in srgb, var(--custom-primary) 18%, var(--custom-surface)) !important;
    border-color: color-mix(in srgb, var(--custom-primary) 34%, var(--custom-surface)) !important;
    color: var(--custom-primary) !important;
}

.dark #order-items-container,
.dark[dir="rtl"] #order-items-container,
.dark #pos-container .bg-white\/70,
.dark #pos-container .dark\:bg-gray-800\/70 {
    background: var(--custom-surface) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text) !important;
}

/*
 * Choice-control cache guard. This block intentionally duplicates the critical
 * checkbox/radio rules because imported CSS files can remain cached separately.
 */
input[type="checkbox"]:not(.sr-only):not(.hidden):not([class*="opacity-0"]),
input[type="radio"]:not(.sr-only):not(.hidden):not([class*="opacity-0"]) {
    --custom-choice-color: rgb(var(--color-base, 245, 158, 11));
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box;
    display: inline-block;
    width: 1.15rem !important;
    height: 1.15rem !important;
    min-width: 1.15rem !important;
    min-height: 1.15rem !important;
    flex: 0 0 auto;
    border: 2px solid rgba(var(--color-base, 245, 158, 11), 0.58) !important;
    background: #ffffff !important;
    background-clip: border-box !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    vertical-align: middle;
    color: var(--custom-choice-color) !important;
    transition:
        background var(--custom-transition-fast),
        border-color var(--custom-transition-fast),
        box-shadow var(--custom-transition-fast),
        transform var(--custom-transition-fast);
    accent-color: var(--custom-choice-color);
}

input[type="checkbox"]:not(.sr-only):not(.hidden):not([class*="opacity-0"]) {
    border-radius: var(--custom-radius-xs);
}

input[type="radio"]:not(.sr-only):not(.hidden):not([class*="opacity-0"]) {
    border-radius: var(--custom-radius-pill) !important;
}

input[type="checkbox"]:not(.sr-only):not(.hidden):not([class*="opacity-0"]):hover,
input[type="radio"]:not(.sr-only):not(.hidden):not([class*="opacity-0"]):hover {
    border-color: var(--custom-choice-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-base, 245, 158, 11), 0.10);
}

input[type="checkbox"]:not(.sr-only):not(.hidden):not([class*="opacity-0"]):focus,
input[type="checkbox"]:not(.sr-only):not(.hidden):not([class*="opacity-0"]):focus-visible,
input[type="radio"]:not(.sr-only):not(.hidden):not([class*="opacity-0"]):focus,
input[type="radio"]:not(.sr-only):not(.hidden):not([class*="opacity-0"]):focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(var(--color-base, 245, 158, 11), 0.18),
        0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

input[type="checkbox"]:not(.sr-only):not(.hidden):not([class*="opacity-0"]):checked {
    border-color: var(--custom-choice-color) !important;
    background:
        var(--custom-choice-color)
        url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.25 8.25 6.45 11.25 12.85 4.8' stroke='white' stroke-width='2.55' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        center / 0.9rem 0.9rem no-repeat !important;
    box-shadow:
        inset 0 0 0 999px var(--custom-choice-color),
        0 0 0 3px rgba(var(--color-base, 245, 158, 11), 0.18) !important;
}

input[type="checkbox"]:not(.sr-only):not(.hidden):not([class*="opacity-0"]):indeterminate {
    border-color: var(--custom-choice-color) !important;
    background:
        var(--custom-choice-color)
        url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8H12' stroke='white' stroke-width='2.55' stroke-linecap='round'/%3E%3C/svg%3E")
        center / 0.9rem 0.9rem no-repeat !important;
    box-shadow:
        inset 0 0 0 999px var(--custom-choice-color),
        0 0 0 3px rgba(var(--color-base, 245, 158, 11), 0.18) !important;
}

input[type="radio"]:not(.sr-only):not(.hidden):not([class*="opacity-0"]):checked {
    border-color: var(--custom-choice-color) !important;
    background:
        radial-gradient(circle, #ffffff 0 34%, transparent 38%),
        var(--custom-choice-color) !important;
    box-shadow:
        inset 0 0 0 999px var(--custom-choice-color),
        0 0 0 3px rgba(var(--color-base, 245, 158, 11), 0.18) !important;
}