/*
 * Cart Sheet primitive — pure CSS, no Tailwind, no @apply. Fase 2 of
 * docs/PRD-primitive-headless-dan-migrasi-vanilla.md.
 *
 * @layer chrome is NOT optional (PRD Keputusan 2): the entire theming
 * mechanism depends on chrome CSS being layered and theme CSS staying
 * unlayered, so a theme's own <style> block always wins on the SAME
 * selector with zero specificity fight (see ThemeRenderer::chromeLinksFor()
 * doc comment). Drop the @layer wrapper here and every theme's
 * .eco-cart-sheet-* override silently stops winning — no test catches this.
 *
 * Class names below are UNCHANGED from the old Alpine-based cart-sheet
 * (resources/views/components/ecommerce/cart-sheet.blade.php, superseded by
 * this primitive) on purpose — see PRD Keputusan 1. All 9 themes already
 * restyle these exact class names (mosaic alone touches 493 distinct
 * .eco-* classes); renaming them would silently break every theme's cart
 * sheet styling while every automated gate stays green. See docs/
 * primitives/cart-sheet.md "Styling API" before touching any selector here.
 *
 * Tokens read via var(--color-*, fallback) instead of Tailwind's
 * @apply bg-background etc — every theme declares these same custom
 * property names in its own @theme block, and (being unlayered, loaded
 * after chrome) always wins. See resources/css/chrome/_tokens.css for the
 * full mechanism explanation. The fallback values below match that file's
 * placeholder values, so an unstyled theme still renders correctly.
 *
 * Lives in chrome/, not a separate resources/css/primitives/ directory —
 * scripts/build-theme-css.mjs's chromeChunkNames() only scans this exact
 * directory (readdirSync(CHROME_DIR)) to decide what gets compiled + linked;
 * a file anywhere else is silently never built. A relative @import from here
 * out to a sibling directory doesn't work either (tried it: `@tailwindcss/
 * node`'s compile() resolves @import against the script's `base: ROOT`, not
 * this file's location — "Can't resolve" at build time). So this file IS
 * the single source of truth, not a copy — content stays pure CSS as
 * described above even though the directory name says "chrome".
 */
@layer chrome {
    /* ── Visibility (replaces the old x-show/x-cloak Alpine mechanism) ──
     * Closed by default (no [data-open] attribute = hidden). The JS
     * controller (resources/js/primitives/cart-sheet.js) toggles
     * data-open="true" on open/close — this is the ONLY thing that
     * controls visibility, so it must come before every other rule below
     * that assumes the panel/backdrop are already laid out.
     */
    .eco-cart-sheet-backdrop {
        display: none;
    }
    .eco-cart-sheet-backdrop[data-open] {
        display: block;
        position: fixed;
        inset: 0;
        background: rgb(0 0 0 / 0.8);
        z-index: 50;
    }

    .eco-cart-sheet {
        display: none;
    }
    .eco-cart-sheet[data-open] {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--color-background, #fff);
        position: fixed;
        inset-block: 0;
        height: 100vh;
        inset-inline-end: 0;
        width: 50rem;
        max-width: 100vw;
        z-index: 50;
        border-inline-start: 1px solid color-mix(in srgb, var(--color-foreground, #17140f) 30%, transparent);
    }

    .eco-cart-sheet-header {
        flex: none;
        padding: 1.25rem;
        border-block-end: 1px solid color-mix(in srgb, var(--color-foreground, #17140f) 30%, transparent);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .eco-cart-sheet-body {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        padding-inline: 1.25rem;
        padding-block: 0.25rem;
    }
    .eco-cart-sheet-footer {
        flex: none;
        background: var(--color-background, #fff);
        border-block-start: 1px solid color-mix(in srgb, var(--color-foreground, #17140f) 30%, transparent);
    }
    .eco-cart-sheet-empty {
        height: 100%;
        border: 0;
    }
    .eco-cart-sheet-items {
        display: flex;
        flex-direction: column;
    }
    .eco-cart-sheet-items > * + * {
        border-block-start: 1px solid color-mix(in srgb, var(--color-foreground, #17140f) 10%, transparent);
    }

    .eco-cart-sheet-item {
        display: flex;
        gap: 0.75rem;
        padding-block: 1rem;
    }
    .eco-cart-sheet-item .eco-cart-sheet-item-img {
        width: 5rem;
        height: 5rem;
        flex: none;
    }
    .eco-cart-sheet-item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-width: 0;
    }
    .eco-cart-sheet-item-name {
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.375;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .eco-cart-sheet-item-name:hover {
        text-decoration: underline;
    }
    .eco-cart-sheet-item-variant {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        opacity: 0.6;
    }
    .eco-cart-sheet-edit-variant {
        text-decoration: underline;
        cursor: pointer;
    }
    .eco-cart-sheet-edit-variant:hover {
        opacity: 1;
    }
    .eco-cart-sheet-item-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-block-start: auto;
        padding-block-start: 0.25rem;
    }

    .eco-cart-item-qty .eco-qty-selector {
        display: flex;
        gap: 0.25rem;
    }
    .eco-cart-item-qty .eco-qty-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.75rem;
        padding-inline: 0.5rem;
        background: transparent;
        border: 1px solid color-mix(in srgb, var(--color-foreground, #17140f) 25%, transparent);
        transition: background-color 0.15s, border-color 0.15s;
    }
    .eco-cart-item-qty .eco-qty-btn:hover:not([disabled]) {
        background: color-mix(in srgb, var(--color-foreground, #17140f) 10%, transparent);
        border-color: color-mix(in srgb, var(--color-foreground, #17140f) 30%, transparent);
    }
    .eco-cart-item-qty .eco-qty-btn[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .eco-cart-item-qty .eco-qty-btn svg {
        width: 0.75rem;
        height: 0.75rem;
    }
    .eco-cart-item-qty .eco-qty-input {
        width: 2.5rem;
        height: 1.75rem;
        text-align: center;
        font-size: 0.875rem;
    }
    .eco-cart-item-qty .eco-qty-max {
        font-size: 0.75rem;
        opacity: 0.5;
    }

    .eco-cart-sheet-subtotal {
        display: flex;
        justify-content: space-between;
        padding-inline: 1.25rem;
        padding-block: 1rem 0.5rem;
        font-weight: 500;
        font-size: 0.875rem;
    }
    .eco-cart-sheet-actions {
        display: flex;
        gap: 0.5rem;
        padding: 0 1.25rem 1.25rem;
    }
    .eco-cart-sheet-actions .btn {
        flex: 1;
    }
    .eco-cart-sheet-close {
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.5;
        transition: opacity 0.15s;
    }
    .eco-cart-sheet-close:hover {
        opacity: 1;
    }
    .eco-cart-sheet-close svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}