/* ============================================================
   Sonia SaaS — Customer Stylesheet
   ------------------------------------------------------------
   Mobile-first. White-label via CSS variables (injected per
   branch in the customer layout). RTL-safe: every directional
   property uses logical equivalents (inline-start/end,
   margin-inline, padding-inline, inset-inline-*). No mirror
   stylesheet needed.
   ============================================================ */

/* ----- CSS reset (minimal, opinionated) ----- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }

p { margin: 0 0 .75rem; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-inline-size: 100%; block-size: auto; vertical-align: middle; }

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

input, textarea, select { font: inherit; color: inherit; }

[hidden] { display: none !important; }

/* ----- Design tokens (defaults; overridden inline per-branch) ----- */
:root {
    --color-primary:   #E91E63;
    --color-primary-contrast: #FFFFFF;
    --color-accent:    #FF9800;
    --color-bg:        #FFFFFF;
    --color-surface:   #FAFAFA;
    --color-surface-2: #F1F3F5;
    --color-text:      #111418;
    --color-text-muted:#5F6772;
    --color-border:    #E2E5EA;
    --color-success:   #2E7D32;
    --color-warning:   #ED6C02;
    --color-danger:    #D32F2F;
    --color-info:      #0288D1;

    --radius-sm: .25rem;
    --radius:    .5rem;
    --radius-lg: .75rem;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow:    0 4px 12px rgba(0,0,0,.08);
    --shadow-lg: 0 12px 28px rgba(0,0,0,.12);

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    --header-h: 56px;
    --bottom-nav-h: 60px;

    --container: 480px;

    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: var(--font-body);

    --transition: 180ms ease-out;
}

[data-theme="dark"] {
    --color-bg:        #101216;
    --color-surface:   #181B21;
    --color-surface-2: #21252D;
    --color-text:      #ECEEF2;
    --color-text-muted:#9CA3AF;
    --color-border:    #2A2F37;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 4px 12px rgba(0,0,0,.5);
    --shadow-lg: 0 12px 28px rgba(0,0,0,.6);
}

/* ----- Layout primitives ----- */
.container {
    inline-size: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.page {
    min-block-size: 100vh;
    padding-block-start: var(--header-h);
    padding-block-end: calc(var(--bottom-nav-h) + var(--space-4));
}

.page--no-nav { padding-block-end: var(--space-4); }
.page--no-header { padding-block-start: 0; }

.stack > * + * { margin-block-start: var(--space-3); }
.stack-sm > * + * { margin-block-start: var(--space-2); }
.stack-lg > * + * { margin-block-start: var(--space-5); }

.row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.grow { flex: 1 1 auto; min-inline-size: 0; }
.text-muted { color: var(--color-text-muted); }
.text-sm { font-size: .875rem; }
.text-xs { font-size: .75rem; }
.text-lg { font-size: 1.125rem; }
.text-center { text-align: center; }
.text-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; letter-spacing: .04em; }

.divider {
    block-size: 1px;
    background: var(--color-border);
    margin-block: var(--space-4);
    border: 0;
}

/* ----- Header ----- */
.app-header {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: var(--header-h);
    background: var(--color-bg);
    border-block-end: 1px solid var(--color-border);
    z-index: 50;
    display: flex;
    align-items: center;
}
.app-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    inline-size: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-3);
}
.app-header__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-header__brand-logo { block-size: 32px; inline-size: auto; }
.app-header__brand-text {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text);
    text-decoration: none;
    padding-inline: var(--space-2);
    flex: 0 0 auto;
}
.app-header__brand-text:hover { color: var(--color-primary); }
.app-header__btn {
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    flex: 0 0 auto;
    position: relative;
}
.app-header__btn:hover { background: var(--color-surface-2); }
.app-header__badge {
    position: absolute;
    inset-block-start: 4px;
    inset-inline-end: 4px;
    min-inline-size: 18px;
    block-size: 18px;
    padding-inline: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* ----- Bottom navigation ----- */
.bottom-nav {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-block-end: env(safe-area-inset-bottom, 0px);
    background: var(--color-bg);
    border-block-start: 1px solid var(--color-border);
    z-index: 49;
    display: flex;
}
.bottom-nav__inner {
    inline-size: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 500;
    padding: var(--space-2);
    transition: color var(--transition);
}
.bottom-nav__item:hover { text-decoration: none; }
.bottom-nav__item[aria-current="page"] { color: var(--color-primary); }

/* ----- Footer (used inside scrollable pages, not fixed) ----- */
.app-footer {
    text-align: center;
    color: var(--color-text-muted);
    font-size: .75rem;
    padding-block: var(--space-5);
    border-block-start: 1px solid var(--color-border);
    margin-block-start: var(--space-6);
}

/* ----- Buttons ----- */
.btn {
    --btn-bg: var(--color-primary);
    --btn-fg: var(--color-primary-contrast);
    --btn-border: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding-block: .75rem;
    padding-inline: 1.25rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius);
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
    cursor: pointer;
    transition: filter var(--transition), background var(--transition);
    min-block-size: 44px;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; }
.btn:active { filter: brightness(0.95); }
.btn[disabled],
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btn--block { inline-size: 100%; }
.btn--sm { padding-block: .5rem; padding-inline: .875rem; font-size: .8125rem; min-block-size: 36px; }
.btn--lg { padding-block: 1rem; padding-inline: 1.5rem; font-size: 1rem; min-block-size: 52px; }

.btn--secondary {
    --btn-bg: var(--color-surface-2);
    --btn-fg: var(--color-text);
}
.btn--outline {
    --btn-bg: transparent;
    --btn-fg: var(--color-primary);
    --btn-border: var(--color-primary);
}
.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--color-text);
}
.btn--danger {
    --btn-bg: var(--color-danger);
    --btn-fg: #FFFFFF;
}
.btn--icon {
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    min-block-size: 40px;
}

/* ----- Form fields ----- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-text);
}
.field__hint { font-size: .75rem; color: var(--color-text-muted); }
.field__error { font-size: .75rem; color: var(--color-danger); }
.field--invalid .input,
.field--invalid .select,
.field--invalid .textarea { border-color: var(--color-danger); }

.input,
.select,
.textarea {
    inline-size: 100%;
    padding-block: .75rem;
    padding-inline: .875rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: .9375rem;
    color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
    min-block-size: 44px;
}
.input:focus,
.select:focus,
.textarea:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 25%, transparent);
}
.textarea { min-block-size: 96px; resize: vertical; }
.select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
                      linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 1rem) 50%, calc(100% - .55rem) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-inline-end: 2.25rem;
}
html[dir="rtl"] .select {
    background-position: 1rem 50%, .55rem 50%;
    padding-inline-end: .875rem;
    padding-inline-start: 2.25rem;
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: .9375rem;
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
    inline-size: 18px;
    block-size: 18px;
    accent-color: var(--color-primary);
    flex: 0 0 auto;
}

/* ----- Cards ----- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.card--flat { border-color: transparent; background: var(--color-surface); }
.card--elevated { border-color: transparent; box-shadow: var(--shadow); background: var(--color-bg); }
.card--clickable { cursor: pointer; transition: transform var(--transition), box-shadow var(--transition); }
.card--clickable:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

/* ----- Status pill ----- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-block: 2px;
    padding-inline: .625rem;
    border-radius: var(--radius-pill);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--color-surface-2);
    color: var(--color-text);
    line-height: 18px;
}
.pill--success { background: color-mix(in oklab, var(--color-success) 18%, transparent); color: var(--color-success); }
.pill--warning { background: color-mix(in oklab, var(--color-warning) 18%, transparent); color: var(--color-warning); }
.pill--danger  { background: color-mix(in oklab, var(--color-danger) 18%, transparent);  color: var(--color-danger); }
.pill--info    { background: color-mix(in oklab, var(--color-info) 18%, transparent);    color: var(--color-info); }
.pill--primary { background: color-mix(in oklab, var(--color-primary) 18%, transparent); color: var(--color-primary); }

/* ----- Price ----- */
.price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.price--strike {
    color: var(--color-text-muted);
    text-decoration: line-through;
    font-weight: 500;
    margin-inline-end: var(--space-2);
}

/* ----- Qty stepper ----- */
.qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    overflow: hidden;
}
.qty__btn {
    inline-size: 36px;
    block-size: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    transition: background var(--transition);
}
.qty__btn:hover { background: var(--color-surface-2); }
.qty__btn[disabled] { opacity: .35; cursor: not-allowed; }
.qty__value {
    min-inline-size: 32px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* ----- Empty state ----- */
.empty {
    text-align: center;
    padding-block: var(--space-8) var(--space-6);
    padding-inline: var(--space-4);
    color: var(--color-text-muted);
}
.empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 64px;
    block-size: 64px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    margin-block-end: var(--space-3);
}
.empty__title { font-size: 1rem; font-weight: 700; color: var(--color-text); margin-block-end: var(--space-1); }
.empty__body  { font-size: .875rem; margin-block-end: var(--space-3); }

/* ----- Skeleton loader ----- */
.skeleton {
    display: block;
    background: linear-gradient(
        90deg,
        var(--color-surface-2) 0%,
        color-mix(in oklab, var(--color-surface-2) 60%, var(--color-bg)) 50%,
        var(--color-surface-2) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius);
}
@keyframes skeleton-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ----- Toast / flash ----- */
.toasts {
    position: fixed;
    inset-block-start: calc(var(--header-h) + var(--space-2));
    inset-inline: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-inline: var(--space-3);
    pointer-events: none;
}
.toast {
    margin-inline: auto;
    inline-size: 100%;
    max-inline-size: var(--container);
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    border-radius: var(--radius);
    background: var(--color-text);
    color: var(--color-bg);
    box-shadow: var(--shadow);
    font-size: .875rem;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    animation: toast-in 200ms ease-out;
}
.toast--success { background: var(--color-success); color: #fff; }
.toast--error   { background: var(--color-danger);  color: #fff; }
.toast--warning { background: var(--color-warning); color: #fff; }
.toast--info    { background: var(--color-info);    color: #fff; }
@keyframes toast-in {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ----- Cart drawer ----- */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 100%;
    max-inline-size: 420px;
    background: var(--color-bg);
    z-index: 71;
    transform: translateX(100%);
    transition: transform var(--transition);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}
html[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.is-open { transform: translateX(0); }
.drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-3);
    padding-inline: var(--space-4);
    border-block-end: 1px solid var(--color-border);
}
.drawer__title { font-size: 1rem; font-weight: 700; margin: 0; }
.drawer__body  { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4); }
.drawer__footer {
    padding: var(--space-3) var(--space-4);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface);
}

/* ----- Utility helpers (kept minimal) ----- */
.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.mb-0 { margin-block-end: 0 !important; }
.mt-0 { margin-block-start: 0 !important; }
.mt-2 { margin-block-start: var(--space-2); }
.mt-3 { margin-block-start: var(--space-3); }
.mt-4 { margin-block-start: var(--space-4); }
.mt-6 { margin-block-start: var(--space-6); }
.mb-2 { margin-block-end: var(--space-2); }
.mb-3 { margin-block-end: var(--space-3); }
.mb-4 { margin-block-end: var(--space-4); }
.mb-6 { margin-block-end: var(--space-6); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.w-full { inline-size: 100%; }
.flex-col { display: flex; flex-direction: column; }

/* ============================================================
   Admin panel — Phase 8
   ============================================================
   Desktop-first sidebar layout. Collapses to a slide-out drawer
   below 900px. Reuses every customer design token (--color-*,
   --radius-*, --space-*) so the branch's white-label palette
   applies automatically to admin chrome too.
*/

:root {
    --admin-sidebar-w: 240px;
    --admin-topbar-h: 60px;
    --admin-content-max: 1280px;
}

.admin-shell {
    min-block-size: 100vh;
    display: grid;
    grid-template-columns: var(--admin-sidebar-w) 1fr;
    grid-template-rows: var(--admin-topbar-h) 1fr;
    background: var(--color-surface);
}

.admin-sidebar {
    grid-row: 1 / span 2;
    grid-column: 1;
    background: var(--color-bg);
    border-inline-end: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    inset-block-start: 0;
    block-size: 100vh;
    overflow-y: auto;
}

.admin-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    min-block-size: var(--admin-topbar-h);
    color: var(--color-text);
}
.admin-sidebar__brand:hover { text-decoration: none; }
.admin-sidebar__brand-img { inline-size: 28px; block-size: 28px; object-fit: contain; flex: 0 0 auto; }
.admin-sidebar__brand-mark {
    inline-size: 28px;
    block-size: 28px;
    border-radius: var(--radius);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .8125rem;
    flex: 0 0 auto;
}
.admin-sidebar__brand-name {
    font-weight: 700;
    font-size: .9375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-inline-size: 0;
}
.admin-sidebar__brand-role {
    font-size: .6875rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    margin-inline-start: auto;
}

.admin-sidebar__nav {
    flex: 1 1 auto;
    padding-block: var(--space-3);
    padding-inline: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.admin-sidebar__group { display: flex; flex-direction: column; gap: 2px; }
.admin-sidebar__group-label {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    padding-inline: var(--space-2);
    padding-block: var(--space-2);
}
.admin-sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: .55rem;
    padding-inline: .75rem;
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: .9rem;
    font-weight: 500;
    transition: background var(--transition), color var(--transition);
}
.admin-sidebar__link:hover { background: var(--color-surface-2); text-decoration: none; }
.admin-sidebar__link[aria-current="page"] {
    background: color-mix(in oklab, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    font-weight: 600;
}
.admin-sidebar__link svg { inline-size: 18px; block-size: 18px; flex: 0 0 auto; color: currentColor; }
.admin-sidebar__footer {
    padding: var(--space-3) var(--space-4);
    border-block-start: 1px solid var(--color-border);
    font-size: .75rem;
    color: var(--color-text-muted);
}

/* ----- Topbar ----- */
.admin-topbar {
    grid-row: 1;
    grid-column: 2;
    position: sticky;
    inset-block-start: 0;
    z-index: 30;
    block-size: var(--admin-topbar-h);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-inline: var(--space-5);
    background: var(--color-bg);
    border-block-end: 1px solid var(--color-border);
}
.admin-topbar__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-topbar__actions { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.admin-topbar__sidebar-toggle {
    display: none;
    inline-size: 40px;
    block-size: 40px;
    border-radius: var(--radius);
    align-items: center;
    justify-content: center;
    color: var(--color-text);
}
.admin-topbar__sidebar-toggle:hover { background: var(--color-surface-2); }

/* ----- Main content area ----- */
.admin-main {
    grid-row: 2;
    grid-column: 2;
    padding: var(--space-5);
    max-inline-size: var(--admin-content-max);
    inline-size: 100%;
    margin-inline: auto;
}

.admin-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 79;
    background: rgba(0, 0, 0, .4);
}

@media (max-width: 900px) {
    .admin-shell { grid-template-columns: 1fr; grid-template-rows: var(--admin-topbar-h) 1fr; }
    .admin-sidebar {
        grid-row: auto;
        grid-column: 1;
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 80;
        inline-size: 280px;
        transform: translateX(-100%);
        transition: transform var(--transition);
        box-shadow: var(--shadow-lg);
        block-size: 100vh;
    }
    html[dir="rtl"] .admin-sidebar { transform: translateX(100%); }
    .admin-shell[data-sidebar-open="true"] .admin-sidebar { transform: translateX(0); }
    .admin-shell[data-sidebar-open="true"] .admin-sidebar-backdrop { display: block; }
    .admin-topbar, .admin-main { grid-column: 1; }
    .admin-topbar { padding-inline: var(--space-4); }
    .admin-topbar__sidebar-toggle { display: inline-flex; }
    .admin-main { padding: var(--space-4); }
}

/* ----- Dropdown menus (branch switcher, user menu) ----- */
.admin-menu { position: relative; }
.admin-menu__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: .4rem;
    padding-inline: .75rem;
    border-radius: var(--radius);
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: .875rem;
    font-weight: 600;
    min-block-size: 36px;
    border: 1px solid transparent;
}
.admin-menu__btn:hover { background: var(--color-border); }
.admin-menu__btn[aria-expanded="true"] { background: var(--color-border); }
.admin-menu__btn-caret {
    inline-size: 14px;
    block-size: 14px;
    color: var(--color-text-muted);
}
.admin-menu__popover {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    min-inline-size: 220px;
    max-inline-size: 320px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-2);
    z-index: 60;
    display: none;
}
.admin-menu[data-open="true"] .admin-menu__popover { display: block; }
.admin-menu__item {
    display: block;
    padding-block: .55rem;
    padding-inline: .75rem;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    color: var(--color-text);
    background: transparent;
    inline-size: 100%;
    text-align: start;
    border: 0;
    cursor: pointer;
}
.admin-menu__item:hover { background: var(--color-surface-2); text-decoration: none; }
.admin-menu__item[aria-current="true"] {
    color: var(--color-primary);
    font-weight: 700;
}
.admin-menu__item-meta {
    display: block;
    font-size: .6875rem;
    color: var(--color-text-muted);
    margin-block-start: 2px;
}
.admin-menu__sep { block-size: 1px; background: var(--color-border); margin-block: var(--space-1); }

/* ----- Page header (component) ----- */
.admin-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-5);
    flex-wrap: wrap;
}
.admin-page-header__main { min-inline-size: 0; flex: 1 1 auto; }
.admin-page-header__crumbs {
    font-size: .75rem;
    color: var(--color-text-muted);
    margin-block-end: var(--space-1);
}
.admin-page-header__crumbs a { color: inherit; }
.admin-page-header__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
}
.admin-page-header__subtitle {
    font-size: .9rem;
    color: var(--color-text-muted);
    margin-block-start: var(--space-1);
    margin-block-end: 0;
}
.admin-page-header__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; flex: 0 0 auto; }

/* ----- Stat card ----- */
.admin-stat {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.admin-stat__label {
    font-size: .75rem;
    color: var(--color-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.admin-stat__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.admin-stat__hint { font-size: .75rem; color: var(--color-text-muted); }
.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}

/* ----- Data table ----- */
.admin-table-wrap {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}
.admin-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.admin-table thead th {
    text-align: start;
    padding: .75rem 1rem;
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-border);
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: .6875rem;
    letter-spacing: .04em;
    white-space: nowrap;
}
.admin-table tbody td {
    padding: .85rem 1rem;
    border-block-end: 1px solid var(--color-border);
    vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-block-end: 0; }
.admin-table tbody tr:hover { background: var(--color-surface); }
.admin-table__num { font-variant-numeric: tabular-nums; text-align: end; }
.admin-table__actions { display: flex; gap: var(--space-1); justify-content: flex-end; }
.admin-table__empty { padding: var(--space-6); text-align: center; color: var(--color-text-muted); }
.admin-table__head--sort { cursor: pointer; user-select: none; }
.admin-table__sort-indicator { color: var(--color-text); margin-inline-start: 4px; }

/* ----- Filter bar (component) ----- */
.admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin-block-end: var(--space-4);
}
.admin-filter-bar__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-inline-size: 140px;
    flex: 0 1 auto;
}
.admin-filter-bar__field--grow { flex: 1 1 200px; }
.admin-filter-bar__label {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-muted);
}
.admin-filter-bar__actions {
    margin-inline-start: auto;
    display: flex;
    gap: var(--space-2);
}

/* ----- Pagination (component) ----- */
.admin-pager {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-3);
    justify-content: flex-end;
    font-size: .875rem;
}
.admin-pager__info { color: var(--color-text-muted); }
.admin-pager__btn {
    inline-size: 36px;
    block-size: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    background: var(--color-bg);
}
.admin-pager__btn:hover { background: var(--color-surface-2); text-decoration: none; }
.admin-pager__btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* ----- Channel + payment pill modifiers ----- */
.pill--channel-delivery { background: color-mix(in oklab, var(--color-info) 14%, transparent); color: var(--color-info); }
.pill--channel-pickup   { background: color-mix(in oklab, var(--color-accent) 14%, transparent); color: var(--color-accent); }
.pill--payment-paid     { background: color-mix(in oklab, var(--color-success) 18%, transparent); color: var(--color-success); }
.pill--payment-pending,
.pill--payment-authorized { background: color-mix(in oklab, var(--color-warning) 18%, transparent); color: var(--color-warning); }
.pill--payment-failed,
.pill--payment-refunded { background: color-mix(in oklab, var(--color-danger) 18%, transparent); color: var(--color-danger); }

/* ----- Order card (queue + KDS) ----- */
.admin-order-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.admin-order-card--urgent { border-color: var(--color-warning); }
.admin-order-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.admin-order-card__id {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}
.admin-order-card__meta {
    font-size: .75rem;
    color: var(--color-text-muted);
    margin-block-start: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.admin-order-card__customer { font-size: .875rem; color: var(--color-text); font-weight: 600; }
.admin-order-card__pills { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.admin-order-card__lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.admin-order-card__line { display: flex; gap: var(--space-3); font-size: .875rem; align-items: flex-start; }
.admin-order-card__qty { flex: 0 0 auto; font-weight: 700; color: var(--color-primary); min-inline-size: 28px; }
.admin-order-card__line-name { flex: 1 1 auto; min-inline-size: 0; }
.admin-order-card__line-mods { font-size: .75rem; color: var(--color-text-muted); margin-block-start: 2px; }
.admin-order-card__line-note { font-size: .75rem; color: var(--color-warning); margin-block-start: 2px; font-style: italic; }
.admin-order-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block-start: var(--space-2);
    border-block-start: 1px dashed var(--color-border);
    flex-wrap: wrap;
}
.admin-order-card__total { font-weight: 700; font-size: 1rem; }
.admin-order-card__actions { display: flex; gap: var(--space-1); flex-wrap: wrap; }

.admin-queue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-4);
}

/* ----- KDS column board ----- */
.admin-kds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
.admin-kds__column {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    min-block-size: 60vh;
}
.admin-kds__column-header {
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.admin-kds__column-title {
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text);
}
.admin-kds__column-count {
    background: var(--color-surface-2);
    color: var(--color-text);
    border-radius: var(--radius-pill);
    padding-block: 2px;
    padding-inline: .55rem;
    font-size: .75rem;
    font-weight: 700;
    line-height: 16px;
}
.admin-kds__column-body {
    flex: 1 1 auto;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    overflow-y: auto;
}
@media (max-width: 1180px) and (min-width: 901px) { .admin-kds { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .admin-kds { grid-template-columns: 1fr; } }

/* ----- Inline transition forms ----- */
.admin-inline-form { display: inline-flex; margin: 0; }
.admin-inline-form .btn { white-space: nowrap; }

/* ----- Activity feed ----- */
.admin-activity {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.admin-activity__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    font-size: .875rem;
}
.admin-activity__item:last-child { border-block-end: 0; }
.admin-activity__time {
    display: flex;
    flex-direction: column;
    color: var(--color-text-muted);
    font-size: .75rem;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    min-inline-size: 84px;
    line-height: 1.35;
}
.admin-activity__date { color: var(--color-text); font-weight: 600; }
.admin-activity__body { flex: 1 1 auto; min-inline-size: 0; }
.admin-activity__meta { color: var(--color-text-muted); font-size: .75rem; margin-block-start: 2px; }

/* ----- Auto-refresh indicator ----- */
.admin-refresh-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: .75rem;
}
.admin-refresh-indicator::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--color-success);
    animation: admin-pulse 1.6s ease-in-out infinite;
}
@keyframes admin-pulse {
    0%, 100% { opacity: .3; }
    50%      { opacity: 1; }
}

/* ----- Section helpers ----- */
.admin-section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-block-end: var(--space-3);
}
.admin-section-title h2 { margin: 0; font-size: 1.125rem; font-weight: 700; }
.admin-section-title a { font-size: .8125rem; color: var(--color-primary); font-weight: 600; }

.admin-grid { display: grid; gap: var(--space-4); }
.admin-grid--2 { grid-template-columns: repeat(2, 1fr); }
.admin-grid--3 { grid-template-columns: repeat(3, 1fr); }
.admin-grid--main-aside { grid-template-columns: 2fr 1fr; }
@media (max-width: 1100px) {
    .admin-grid--2, .admin-grid--3, .admin-grid--main-aside { grid-template-columns: 1fr; }
}

/* ----- Admin flash banner ----- */
.admin-flash {
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin-block-end: var(--space-4);
    font-size: .875rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.admin-flash--success { background: color-mix(in oklab, var(--color-success) 14%, transparent); color: var(--color-success); }
.admin-flash--error   { background: color-mix(in oklab, var(--color-danger)  14%, transparent); color: var(--color-danger);  }
.admin-flash--info    { background: color-mix(in oklab, var(--color-info)    14%, transparent); color: var(--color-info);    }
.admin-flash--warning { background: color-mix(in oklab, var(--color-warning) 14%, transparent); color: var(--color-warning); }

/* ============================================================
   Admin — Menu management (Phase 8 Part 2)
   ============================================================ */

.admin-menu-nav {
    display: flex;
    gap: var(--space-1);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--space-4);
    overflow-x: auto;
}
.admin-menu-nav__link {
    padding: .6rem 1rem;
    color: var(--color-text-muted);
    font-size: .875rem;
    font-weight: 600;
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
    white-space: nowrap;
}
.admin-menu-nav__link:hover { color: var(--color-text); text-decoration: none; }
.admin-menu-nav__link[aria-current="page"] {
    color: var(--color-primary);
    border-block-end-color: var(--color-primary);
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.admin-form__section {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
}
.admin-form__section + .admin-form__section { margin-block-start: 0; }
.admin-form__section-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--space-3);
    color: var(--color-text);
}
.admin-form__section-hint {
    color: var(--color-text-muted);
    font-size: .8125rem;
    margin: 0 0 var(--space-3);
}
.admin-form__row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-3);
}
.admin-form__col { grid-column: span 12; }
.admin-form__col--6 { grid-column: span 12; }
.admin-form__col--4 { grid-column: span 12; }
.admin-form__col--3 { grid-column: span 12; }
@media (min-width: 720px) {
    .admin-form__col--6 { grid-column: span 6; }
    .admin-form__col--4 { grid-column: span 4; }
    .admin-form__col--3 { grid-column: span 3; }
}
.admin-form__actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    padding-block: var(--space-3);
}
.admin-form__actions--end { justify-content: flex-end; margin-inline-start: auto; }

.admin-img-preview {
    inline-size: 180px;
    block-size: 180px;
    border-radius: var(--radius);
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--color-text-muted);
}
.admin-img-preview img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.admin-thumb {
    inline-size: 48px;
    block-size: 48px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}
.admin-thumb--placeholder {
    inline-size: 48px;
    block-size: 48px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.admin-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-2);
}

.admin-repeater {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.admin-repeater__row {
    display: grid;
    grid-template-columns: 1fr 110px 90px 90px 60px 36px;
    gap: var(--space-2);
    align-items: center;
    padding: .5rem .75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
@media (max-width: 760px) {
    .admin-repeater__row {
        grid-template-columns: 1fr 1fr;
    }
}
.admin-repeater__row .input,
.admin-repeater__row .select {
    min-block-size: 36px;
    padding-block: .4rem;
    font-size: .875rem;
}
.admin-repeater__row--modifier {
    grid-template-columns: 1fr 110px 80px 80px 36px;
}
@media (max-width: 760px) {
    .admin-repeater__row--modifier { grid-template-columns: 1fr 1fr; }
}
.admin-repeater__remove {
    inline-size: 36px;
    block-size: 36px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    color: var(--color-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
}
.admin-repeater__remove:hover { background: color-mix(in oklab, var(--color-danger) 12%, transparent); }
.admin-repeater__check { display: inline-flex; align-items: center; justify-content: center; }

.admin-modgroup-row {
    display: grid;
    grid-template-columns: 1fr 80px 130px 36px;
    gap: var(--space-2);
    align-items: center;
    padding: .5rem .75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
@media (max-width: 760px) {
    .admin-modgroup-row { grid-template-columns: 1fr 1fr; }
}

.admin-help {
    font-size: .75rem;
    color: var(--color-text-muted);
    margin-block-start: 4px;
}

.admin-list-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.admin-list-row__main { flex: 1 1 auto; min-inline-size: 0; }
.admin-list-row__title { font-weight: 700; color: var(--color-text); }
.admin-list-row__sub { font-size: .75rem; color: var(--color-text-muted); }

/* ============================================================
   Admin → Reports → Sales breakdown (`.sb-*`)
   ============================================================ */

/* Filter toolbar */
.sb-toolbar {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-block: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.sb-toolbar__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.sb-toolbar__label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    min-inline-size: 88px;
}
.sb-toolbar__dates {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.sb-toolbar__dates .input {
    inline-size: auto;
    min-inline-size: 160px;
}
.sb-toolbar__sep {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
}
.sb-toolbar__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
    flex-wrap: wrap;
}

/* Chip group (Channel / Payment / Date presets) */
.sb-chips {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Chips: filter checkboxes rendered as pill toggles */
.sb-chip__input { position: absolute; opacity: 0; pointer-events: none; }
.sb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    user-select: none;
}
.sb-chip:hover { background: var(--color-surface-2); }
.sb-chip__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 16px;
    block-size: 16px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--transition), transform var(--transition);
}
.sb-chip__input:checked + .sb-chip {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.sb-chip__input:checked + .sb-chip .sb-chip__check {
    opacity: 1;
    transform: scale(1);
}
.sb-chip__input:focus-visible + .sb-chip {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Date presets — small link-style chips */
.sb-preset {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-muted);
    font-size: .8125rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.sb-preset:hover {
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
}
.sb-preset.is-active {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* ──────────────────────────────────────────────────────────────
   Hero — total sale + channel mix bar
   ────────────────────────────────────────────────────────────── */
.sb-hero {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
    gap: var(--space-6);
    padding: var(--space-5);
    margin-block: var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
@media (max-width: 760px) {
    .sb-hero { grid-template-columns: 1fr; gap: var(--space-4); }
}
.sb-hero__total-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
}
.sb-hero__total {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--color-text);
    margin-block: 6px;
}
.sb-hero__orders { font-size: .875rem; color: var(--color-text-muted); }
.sb-hero__orders strong { color: var(--color-text); font-weight: 700; }

/* Channel mix bar — label | progress track | amount + pct */
.sb-mix__title {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-muted);
    margin-block-end: 10px;
}
.sb-mix__rows { display: flex; flex-direction: column; gap: 10px; }
.sb-mix__row {
    display: grid;
    grid-template-columns: minmax(120px, 160px) 1fr minmax(110px, auto);
    align-items: center;
    gap: var(--space-3);
}
@media (max-width: 540px) {
    .sb-mix__row { grid-template-columns: 1fr 90px; }
    .sb-mix__track { grid-column: 1 / -1; order: 3; }
}
.sb-mix__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--color-text);
    font-size: .875rem;
}
.sb-mix__track {
    position: relative;
    block-size: 8px;
    border-radius: 999px;
    background: var(--color-surface-2);
    overflow: hidden;
}
.sb-mix__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: calc(var(--pct, 0) * 1%);
    background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #000));
    border-radius: inherit;
    transition: inline-size var(--transition);
}
.sb-mix__value {
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}
.sb-mix__pct {
    font-size: .75rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

/* ──────────────────────────────────────────────────────────────
   Section heading + payment-method tiles + matrix
   ────────────────────────────────────────────────────────────── */
.sb-section { margin-block: var(--space-6); }
.sb-section__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 1.0625rem;
    font-weight: 700;
    margin-block-end: var(--space-3);
    color: var(--color-text);
}
.sb-section__title small {
    font-weight: 500;
    font-size: .8125rem;
    color: var(--color-text-muted);
}

.sb-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}
.sb-tile {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.sb-tile:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); box-shadow: var(--shadow-sm); }
.sb-tile__head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-block-end: 8px;
}
.sb-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 26px;
    block-size: 26px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
}
.sb-tile__value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.sb-tile__sub {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-block-start: 8px;
    font-size: .8125rem;
    color: var(--color-text-muted);
}
.sb-tile__pct {
    font-weight: 700;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────
   Cross-tab matrix (heat-map)
   ────────────────────────────────────────────────────────────── */
.sb-matrix-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    -webkit-overflow-scrolling: touch;
}
.sb-matrix {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.sb-matrix thead th {
    text-align: start;
    padding: 12px 14px;
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-border);
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.sb-matrix tbody td,
.sb-matrix tfoot td,
.sb-matrix tfoot th {
    padding: 14px;
    border-block-start: 1px solid var(--color-border);
    vertical-align: middle;
}
.sb-matrix tbody tr:hover td { background: var(--color-surface); }

.sb-matrix__channel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--color-text);
}
.sb-matrix__cell {
    background: color-mix(in srgb, var(--color-primary) calc(var(--intensity, 0) * 22%), transparent);
    text-align: end;
    font-variant-numeric: tabular-nums;
}
.sb-matrix__cell--zero { color: var(--color-text-muted); background: transparent; }
.sb-matrix__cell-amount {
    display: block;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.1;
}
.sb-matrix__cell--zero .sb-matrix__cell-amount { color: var(--color-text-muted); font-weight: 500; }
.sb-matrix__cell-sub {
    display: block;
    font-size: .75rem;
    color: var(--color-text-muted);
    margin-block-start: 3px;
}
.sb-matrix__total {
    background: var(--color-surface);
    text-align: end;
    font-variant-numeric: tabular-nums;
}
.sb-matrix tfoot {
    background: var(--color-surface);
}
.sb-matrix tfoot th {
    text-align: start;
    background: var(--color-surface);
    border-block-end: 0;
    color: var(--color-text);
    font-size: .8125rem;
    text-transform: none;
    letter-spacing: 0;
}
.sb-matrix__grand {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    text-align: end;
    font-variant-numeric: tabular-nums;
}
.sb-matrix__grand .sb-matrix__cell-amount { color: var(--color-primary); }

/* ----- Reduced motion preference ----- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── Printer alert banner ─────────────────────────────────────────
 * Always-on banner across every admin page. Pulses red + plays a
 * looped audible alarm (Web Audio API, no asset shipped) when the
 * kitchen printer goes offline OR a print job has failed in the last
 * 15 min. Critical signal — sits above EVERYTHING in z-order so a
 * stacked dropdown can't hide it. See printer-alert.blade.php.
 * ───────────────────────────────────────────────────────────────── */
.printer-alert {
    position: fixed;
    top: 0;
    inset-inline: 0;
    background: #d32f2f;
    color: #fff;
    padding: 0.875rem 1rem;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    animation: printer-alert-flash 1.4s ease-in-out infinite;
    font-size: 0.9375rem;
}
.printer-alert[hidden] { display: none !important; }
@keyframes printer-alert-flash {
    0%, 100% { background: #b71c1c; }
    50%      { background: #ff5252; }
}
.printer-alert__inner {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.printer-alert__icon { font-size: 1.5rem; line-height: 1; }
.printer-alert__title { font-weight: 800; letter-spacing: 0.02em; }
.printer-alert__msg { flex: 1 1 12rem; opacity: 0.95; }
.printer-alert__btn {
    background: #fff;
    color: #b71c1c;
    border: 0;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.printer-alert__btn:hover { background: #ffeaea; }
@media (prefers-reduced-motion: reduce) {
    .printer-alert { animation: none; background: #b71c1c; }
}