/* ============================================================================
   ম্যাটেরিয়ালাইজড থিম (Material Design 3) — অ্যাকাউন্ট + অ্যাডমিন এরিয়া
   ----------------------------------------------------------------------------
   · How it ships: plain file in public/css (like forms-theme.css) — linked
     AFTER the built CSS by each layout with a filemtime cache-buster.
     No npm, no build step → shared hosting can deploy it by overwriting.
   · How it wins: Tailwind v4 puts utilities/components in CSS @layers;
     rules OUTSIDE any layer beat layered rules at equal or lower specificity,
     so the scoped selectors below (body.md-theme …) retoken the whole UI.
   · How it stays safe: every selector is scoped under `.md-theme` — only the
     account/admin/auth/error <body> get that class; the storefront keeps its
     own identity.
   ==========================================================================*/

body.md-theme {
    /* ── M3 colour tokens (light) ─────────────────────────────────────── */
    --md-primary: #059669;
    --md-on-primary: #ffffff;
    --md-primary-container: #d1fae5;
    --md-on-primary-container: #022c22;
    --md-secondary-container: #e7f6ef;
    --md-on-secondary-container: #053024;
    --md-error: #e11d48;
    --md-on-error: #ffffff;
    --md-error-container: #ffe4e6;
    --md-on-error-container: #4c0d12;
    --md-background: #f4f7f6;
    --md-surface: #ffffff;
    --md-surf-c1: #ffffff;
    --md-surf-c2: #eef3f0;
    --md-surf-c3: #e4eae7;
    --md-on-surface: #101514;
    --md-on-surface-variant: #3d4b46;
    --md-outline: #b8c2bd;
    --md-outline-variant: #dde4e0;
    --md-field: #ffffff;
    --md-shadow: 13 32 26;
    --md-e0: none;
    --md-e1: 0 1px 2px rgb(var(--md-shadow) / 0.07), 0 3px 10px rgb(var(--md-shadow) / 0.08);
    --md-e2: 0 2px 4px rgb(var(--md-shadow) / 0.07), 0 8px 22px rgb(var(--md-shadow) / 0.11);
    --md-e3: 0 4px 8px rgb(var(--md-shadow) / 0.09), 0 16px 36px rgb(var(--md-shadow) / 0.14);

    background: var(--md-background);
    /* লাইট মোডে brand-wash — থিম স্পষ্টভাবে "বসেছে" দেখাতে */
    background-image:
        radial-gradient(52rem 52rem at 108% -12%, rgba(16, 185, 129, 0.10), transparent 62%),
        radial-gradient(44rem 44rem at -8% 112%, rgba(5, 150, 105, 0.07), transparent 58%);
    background-attachment: fixed;
    color: var(--md-on-surface);
    letter-spacing: 0.00625em;
}

:where(html.dark) body.md-theme {
    /* ── M3 colour tokens (dark) ─────────────────────────────────────── */
    --md-primary: #34d399;
    --md-on-primary: #022c22;
    --md-primary-container: #065f46;
    --md-on-primary-container: #a7f3d0;
    --md-secondary-container: #104134;
    --md-on-secondary-container: #a7f3d0;
    --md-error: #fda4af;
    --md-on-error: #4c0d12;
    --md-error-container: #4c050f;
    --md-on-error-container: #ffd9de;
    --md-background: #101413;
    --md-surface: #1a1f1e;
    --md-surf-c1: #1e2322;
    --md-surf-c2: #252b29;
    --md-surf-c3: #2f3533;
    --md-on-surface: #e2e4e3;
    --md-on-surface-variant: #b9bfbd;
    --md-outline: #444a48;
    --md-outline-variant: #2f3533;
    --md-field: #252b29;
    --md-shadow: 0 0 0;
    background-image: none;
    --md-e1: 0 1px 2px rgb(var(--md-shadow) / 0.30), 0 2px 8px rgb(var(--md-shadow) / 0.22);
    --md-e2: 0 2px 4px rgb(var(--md-shadow) / 0.30), 0 8px 22px rgb(var(--md-shadow) / 0.30);
    --md-e3: 0 4px 8px rgb(var(--md-shadow) / 0.32), 0 16px 36px rgb(var(--md-shadow) / 0.40);
}

/* ── Typography scale (M3) ─────────────────────────────────────────────── */
.md-theme h1 { font-weight: 700; letter-spacing: -0.011em; }
.md-theme h2, .md-theme h3 { font-weight: 600; letter-spacing: -0.008em; }
.md-theme .text-xs, .md-theme .text-sm { letter-spacing: 0.014em; }

/* ── Surfaces: cards become elevated M3 containers ────────────────────── */
.md-theme .card {
    border: 0;
    border-radius: 20px;
    background: var(--md-surface);
    box-shadow: var(--md-e1), inset 0 0 0 1px var(--md-outline-variant);
    transition: box-shadow 0.18s cubic-bezier(0.2, 0, 0, 1);
}
.md-theme .card:hover { box-shadow: var(--md-e2), inset 0 0 0 1px var(--md-outline); }
:where(html.dark) .md-theme .card:hover { box-shadow: var(--md-e2); }

.md-theme .card > [class*="border-b"], .md-theme .card > header {
    border-color: var(--md-outline-variant) !important;
}

/* ── Buttons: full-shape, tonal, state layers, tactile press ──────────── */
.md-theme .btn, .md-theme [class*="btn-primary"], .md-theme [class*="btn-secondary"],
.md-theme [class*="btn-danger"], .md-theme [class*="btn-ghost"] {
    border-radius: 999px;
    min-height: 40px;
    padding: 0.4375rem 1.25rem;
    font-weight: 500;
    font-size: 0.875rem;
    letter-spacing: 0.0106em;
    box-shadow: var(--md-e0);
    transition: background-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.07s, opacity 0.18s;
}
.md-theme [class*="btn-"]:active { transform: scale(0.975); }
.md-theme [class*="btn-"]:disabled { opacity: 0.38; box-shadow: none; }
.md-theme [class*="btn-"]:focus-visible {
    outline: 2px solid var(--md-primary);
    outline-offset: 2px;
    box-shadow: none;
}
.md-theme .btn-primary, .md-theme [class*="btn-primary"] {
    background: var(--md-primary);
    color: var(--md-on-primary);
}
.md-theme .btn-primary:hover, .md-theme [class*="btn-primary"]:hover {
    box-shadow: var(--md-e1);
    background: #047857;
    background: color-mix(in srgb, var(--md-primary) 88%, #000);
}
:where(html.dark) .md-theme .btn-primary:hover,
:where(html.dark) .md-theme [class*="btn-primary"]:hover { background: #059669; }
.md-theme .btn-secondary, .md-theme [class*="btn-secondary"] {
    background: transparent;
    color: var(--md-primary);
    box-shadow: inset 0 0 0 1px var(--md-outline);
}
.md-theme .btn-secondary:hover, .md-theme [class*="btn-secondary"]:hover {
    background: rgba(5, 150, 105, 0.08);
    background: color-mix(in srgb, var(--md-primary) 8%, transparent);
    box-shadow: inset 0 0 0 1px var(--md-primary), var(--md-e0);
}
.md-theme .btn-danger, .md-theme [class*="btn-danger"] {
    background: var(--md-error);
    color: var(--md-on-error);
}
.md-theme .btn-danger:hover, .md-theme [class*="btn-danger"]:hover { box-shadow: var(--md-e1); }
.md-theme .btn-ghost, .md-theme [class*="btn-ghost"] {
    background: transparent;
    color: var(--md-on-surface-variant);
}
.md-theme .btn-ghost:hover, .md-theme [class*="btn-ghost"]:hover {
    background: rgba(25, 28, 27, 0.08);
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
    color: var(--md-on-surface);
}

/* ── Chips: M3 container chips with a hairline of their own colour ────── */
.md-theme .badge, .md-theme [class^="badge-"], .md-theme [class*=" badge-"] {
    border-radius: 8px;
    padding: 0.1875rem 0.625rem;
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 0 1px currentColor; /* tone-on-tone ring, alpha below */
}
.md-theme .badge, .md-theme [class^="badge-"], .md-theme [class*=" badge-"] {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Form fields: filled M3 text fields ───────────────────────────────── */
.md-theme .input, .md-theme textarea.input, .md-theme select.input {
    border-radius: 14px;
    border: 1px solid var(--md-outline);
    background: var(--md-field);
    color: var(--md-on-surface);
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.md-theme .input:hover { border-color: var(--md-on-surface-variant); }
.md-theme .input:focus, .md-theme .input:focus-visible {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.22);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--md-primary) 26%, transparent);
}
.md-theme .label { color: var(--md-on-surface-variant); font-weight: 500; }
.md-theme .field-error { color: var(--md-error); }

/* ── Data tables: M3 rows with state layers ───────────────────────────── */
.md-theme .table-base { color: var(--md-on-surface); }
.md-theme .table-base thead {
    background: var(--md-surf-c2);
    color: var(--md-on-surface-variant);
}
.md-theme .table-base thead th:first-child { border-start-start-radius: 0; }
.md-theme .table-base tbody tr {
    border-top: 1px solid var(--md-outline-variant);
    transition: background-color 0.12s;
}
.md-theme .table-base tbody tr:hover {
    background: rgba(5, 150, 105, 0.05);
    background: color-mix(in srgb, var(--md-primary) 5%, transparent);
}

/* ── Navigation drawer: floating rounded card + pill list items ──────── */
.md-theme .md-nav, .md-theme .admin-side {
    background: var(--md-surf-c1);
    border-right: 0;
    border-inline-end: 0;
    box-shadow: inset -1px 0 0 var(--md-outline-variant);
}
.md-theme .md-nav a, .md-theme .md-nav .nav-link {
    border-radius: 999px;
    min-height: 44px;
    padding-top: 0.4375rem;
    padding-bottom: 0.4375rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background-color 0.15s, color 0.15s;
}
.md-theme .md-nav a:not(.nav-on):hover, .md-theme .md-nav .nav-off:hover {
    background: rgba(25, 28, 27, 0.08);
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
    color: var(--md-on-surface);
}
.md-theme .md-nav .nav-on {
    background: var(--md-secondary-container) !important;
    color: var(--md-on-secondary-container) !important;
    font-weight: 600;
}
.md-theme .md-nav .nav-on svg { color: var(--md-primary); }
.md-theme .nav-label { color: var(--md-on-surface-variant) !important; letter-spacing: 0.09em; }
.md-theme .md-nav [class*="border-t"] { border-color: var(--md-outline-variant) !important; }
@media (min-width: 1024px) {
    .md-theme .md-nav, .md-theme .admin-side {
        top: 12px;
        bottom: 12px;
        left: 12px;
        /* সেট-১৮: ভিউপোর্ট-লকড উচ্চতা — nav-এর flex-1/min-h-0 শৃঙ্খল
           টিকিয়ে রাখতে height:auto বর্জিত, নইলে সাইডবারের ভেতর স্ক্রলই হয় না। */
        height: calc(100vh - 24px);
        max-height: calc(100vh - 24px);
        border-radius: 24px;
        box-shadow: var(--md-e1), inset 0 0 0 1px var(--md-outline-variant);
        background: var(--md-surf-c1);
    }
    .md-theme .md-nav [class*="h-16"] { height: 64px; }
}

/* ── Top app bar: surface with a hairline + soft lift ─────────────────── */
.md-theme .admin-top, .md-theme .md-top {
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.92);
    background: color-mix(in srgb, var(--md-surface) 92%, transparent);
    box-shadow: 0 1px 0 var(--md-outline-variant), 0 2px 10px rgb(var(--md-shadow) / 0.05);
}
:where(html.dark) .md-theme .admin-top, :where(html.dark) .md-theme .md-top { background: rgba(26, 31, 30, 0.86); }
.md-theme .admin-top h1, .md-theme .md-top h1 {
    font-size: 1.0625rem;
    line-height: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.006em;
    color: var(--md-on-surface);
}
.md-theme .admin-top [class*="h-9"][class*="w-9"], .md-theme .md-top [class*="h-9"][class*="w-9"],
.md-theme .admin-top [class*="hover:bg-slate-100"], .md-theme .md-top [class*="hover:bg-slate-100"] {
    border-radius: 999px;
}

/* ── Dropdowns/popovers: M3 menu (rounded-2xl list, item pills) ───────── */
.md-theme [x-show="open"] { border-radius: 20px; box-shadow: var(--md-e3); border: 0; background: var(--md-surface); }
.md-theme [x-show="open"] a, .md-theme [x-show="open"] button { border-radius: 12px; }
.md-theme [x-show="open"] a:hover, .md-theme [x-show="open"] button:hover {
    background: rgba(25, 28, 27, 0.08);
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

/* ── Links ─────────────────────────────────────────────────────────────── */
.md-theme .link { color: var(--md-primary); font-weight: 500; }
.md-theme .link:hover { color: #047857; text-decoration: underline; text-underline-offset: 3px; }
:where(html.dark) .md-theme .link:hover { color: #6ee7b7; }

/* ── Misc surfaces used across account/admin pages ───────────────────── */
.md-theme [class*="bg-slate-50"], .md-theme [class*="dark:bg-slate-900"] { }
.md-theme .md-tile {
    border-radius: 16px;
    background: var(--md-surface);
    padding: 1rem 1.125rem;
    box-shadow: inset 0 0 0 1px var(--md-outline-variant);
    transition: box-shadow 0.18s, transform 0.18s;
}
.md-theme .md-tile:hover { box-shadow: inset 0 0 0 1px var(--md-outline), var(--md-e1); }
.md-theme .md-tile-key {
    background: var(--md-primary-container);
    box-shadow: inset 0 0 0 1px transparent;
}
:where(html.dark) .md-theme .md-tile-key { background: var(--md-primary-container); }
.md-theme .md-metric {
    font-size: 1.5rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.011em;
    color: var(--md-on-surface);
}
.md-theme .md-kicker {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--md-on-surface-variant);
}
.md-theme .md-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: var(--md-on-surface-variant);
    background: var(--md-surf-c2);
    transition: background-color 0.15s, color 0.15s, transform 0.07s;
}
.md-theme .md-icon-btn:hover {
    background: var(--md-surf-c3);
    color: var(--md-on-surface);
}
.md-theme .md-icon-btn:active { transform: scale(0.94); }
.md-theme .md-divider { border-color: var(--md-outline-variant); }
.md-theme .md-hero { animation: md-rise 0.35s cubic-bezier(0.2, 0, 0, 1) both; }
@keyframes md-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .md-theme *, .md-theme { animation: none !important; transition: none !important; }
}

/* ── Scrollbars & selection inside the themed areas ───────────────────── */
.md-theme ::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.md-theme .scrollbar-modern::-webkit-scrollbar-thumb, .md-theme .scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--md-outline);
    border-radius: 999px;
}
.md-theme .scrollbar-modern, .md-theme .scrollbar-thin { scrollbar-color: var(--md-outline) transparent; }