/* ==========================================================================
   Cafe OS — Design System
   --------------------------------------------------------------------------
   Single source of truth for the admin shell and shared components. Loaded
   last (after Bootstrap and the legacy app.css) so these rules win.

   Discipline rules — do not break these when extending:
   1. Radius: only --radius (default) and --radius-pill (true pills/circles
      only). Never introduce a third value.
   2. Shadow: only --shadow-1 (resting) and --shadow-2 (popover/modal).
      Never a hand-rolled box-shadow on a one-off element.
   3. Type: pull sizes from the --fs-* scale below. Never a bare rem value
      in a blade file.
   4. No backdrop-filter / glassmorphism. No hover translate/lift on cards
      or nav items — motion is reserved for state changes with real meaning
      (the new-order pulse), not decoration.
   5. Stat tiles share one neutral surface; colour lives in the icon chip,
      not the card background. Do not give each metric its own pastel tint.
   ========================================================================== */

:root {
    /* ── Admin operator theme (fixed — deliberately independent of the
       customer-facing brand_primary_color, which styles the storefront and
       receipts only. An internal ops tool keeping its own identity is
       intentional, not an inconsistency.) ────────────────────────────── */
    --op-ink:        #0E1B14;   /* sidebar / deep forest */
    --op-ink-raised: #16261C;   /* sidebar hover row */
    --op-gold:       #C89A3C;   /* accent — used sparingly: active state, primary action, key numbers */
    --op-gold-rgb:   200, 154, 60;

    /* ── Neutral ramp (the workhorse — most of the UI lives here) ──────── */
    --n-0:   #ffffff;
    --n-25:  #fbfbfa;
    --n-50:  #f6f6f4;
    --n-100: #eeeeeb;
    --n-150: #e4e4e0;
    --n-200: #d8d8d3;
    --n-300: #b9b9b2;
    --n-400: #8f8f86;
    --n-500: #6b6b62;
    --n-600: #4e4e47;
    --n-700: #363631;
    --n-800: #232320;
    --n-900: #16160f;

    /* ── Semantic (soft, one tint each — no saturated fills) ───────────── */
    --ok:     #1a7a52;
    --ok-bg:  #e8f5ee;
    --warn:   #a06a12;
    --warn-bg:#fbf1de;
    --err:    #b7302f;
    --err-bg: #fbeceb;
    --info:   #2f6fa0;
    --info-bg:#eaf3f9;

    /* ── Surfaces ───────────────────────────────────────────────────────── */
    --admin-bg: var(--n-50);
    --surface: var(--n-0);
    --border: var(--n-150);
    --border-strong: var(--n-200);
    --muted: var(--n-500);
    --ink: var(--n-800);

    /* Legacy aliases kept so existing blade files that reference these
       still resolve — new markup should use the tokens above. */
    --admin-surface: var(--surface);
    --admin-border: var(--border);
    --admin-text-dark: var(--ink);
    --admin-text-muted: var(--muted);
    --admin-accent: var(--op-gold);
    --admin-sidebar: var(--op-ink);
    --admin-sidebar-hover: var(--op-ink-raised);
    --admin-sidebar-text: rgba(255, 255, 255, .68);
    --admin-sidebar-width: 248px;
    --bwc-light: var(--n-50);

    /* ── One radius scale ───────────────────────────────────────────────── */
    --radius: 8px;
    --radius-pill: 999px;
    --bwc-radius: var(--radius);

    /* ── Two shadows, both quiet ────────────────────────────────────────── */
    --shadow-1: 0 1px 2px rgba(20, 20, 15, .04), 0 1px 1px rgba(20, 20, 15, .035);
    --shadow-2: 0 10px 24px -6px rgba(20, 20, 15, .14);
    --bwc-shadow: var(--shadow-1);

    /* ── Type scale — pull from here, never a bare rem ─────────────────── */
    --fs-xs:   .75rem;    /* 12px — meta labels, table header caps, timestamps */
    --fs-sm:   .8125rem;  /* 13px — table body, secondary text, form hints */
    --fs-base: .9375rem;  /* 15px — default body, buttons, inputs */
    --fs-md:   1.0625rem; /* 17px — card headers, section titles */
    --fs-lg:   1.375rem;  /* 22px — page titles */
    --fs-xl:   1.875rem;  /* 30px — stat numbers */

    --transition: 120ms ease;
    --ring: 0 0 0 3px rgba(var(--op-gold-rgb), .25);

    /* Frontend/storefront brand — settings-driven, unrelated to admin theme. */
    --bwc-primary: #6F4E37;
    --bwc-primary-rgb: 111, 78, 55;
    --bwc-secondary: #C9A227;
    --bwc-accent: #2E7D5B;
    --bwc-transition: var(--transition);
}

/* ==========================================================================
   Base
   ========================================================================== */

.bwc-admin-content, .bwc-admin-content body, body:has(.bwc-admin-content) {
    background: var(--admin-bg);
}

/* Around 30 admin views colour page headings with var(--bwc-primary),
   inherited from before the admin operator theme was split out from the
   customer-facing storefront brand colour. Rather than hand-edit every
   file, --bwc-primary resolves to the admin ink colour anywhere inside the
   admin shell, so those headings stay coherent with the rest of the admin
   UI regardless of what the cafe picks for their public storefront in
   Settings → Branding. True storefront pages (outside .bwc-admin-content)
   are unaffected and keep following the settings-driven colour. */
.bwc-admin-content {
    --bwc-primary: var(--ink);
    --bwc-primary-rgb: 22, 22, 15;
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.font-mono {
    font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
.tabular { font-variant-numeric: tabular-nums; }

:where(a, button, input, select, textarea, .btn, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius);
}

/* ==========================================================================
   Admin shell — sidebar, topbar
   ========================================================================== */

.bwc-admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--admin-sidebar-width);
    background: var(--op-ink);
    color: var(--admin-sidebar-text);
    z-index: 1050;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: none;
    transition: width var(--transition);
}

.bwc-admin-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.3rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    position: relative;
}

.sidebar-brand-collapsed-icon { display: none; font-size: 1.15rem; }

.sidebar-collapse-btn {
    border: 0;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .55);
    width: 22px; height: 22px;
    border-radius: 50%;
    align-items: center; justify-content: center;
    font-size: .65rem;
    flex: none;
    margin-left: auto;
    transition: background var(--transition), color var(--transition);
}
.sidebar-collapse-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ── Collapsed (icons-only) state — desktop only, toggled via JS and
   persisted in localStorage. Labels/section headers hide; icons centre. ── */
.bwc-admin-sidebar.is-collapsed { width: 68px; }
.bwc-admin-sidebar.is-collapsed .nav-label,
.bwc-admin-sidebar.is-collapsed .sidebar-section { display: none; }
.bwc-admin-sidebar.is-collapsed .sidebar-brand-collapsed-icon { display: block; }
.bwc-admin-sidebar.is-collapsed .sidebar-brand { justify-content: center; padding: 1.3rem .5rem; }
.bwc-admin-sidebar.is-collapsed .sidebar-collapse-btn { position: absolute; right: -11px; top: 1.15rem; background: var(--op-ink-raised); box-shadow: var(--shadow-1); }
.bwc-admin-sidebar.is-collapsed .nav-link { justify-content: center; padding: .6rem 0; border-left-width: 3px; }
.bwc-admin-sidebar.is-collapsed .nav-link i { width: auto; font-size: 1rem; }
.bwc-admin-sidebar.is-collapsed ~ .bwc-admin-content { margin-left: 68px; }

.bwc-admin-sidebar .brand-text,
.bwc-admin-sidebar .sidebar-brand .brand-text {
    /* The one deliberate serif flourish in the whole admin UI — a brand
       wordmark, not a page-title convention. */
    font-family: 'Fraunces', 'Playfair Display', serif;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--op-gold);
    letter-spacing: .01em;
}

.bwc-admin-sidebar .sidebar-section,
.bwc-admin-sidebar .nav-section {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .32);
    padding: 1.1rem 1.25rem .4rem;
}

.bwc-admin-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: var(--admin-sidebar-text);
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: .55rem .75rem .55rem 1.05rem;
    margin: .05rem 0;
    border-left: 3px solid transparent;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.bwc-admin-sidebar .nav-link i { width: 17px; text-align: center; font-size: .9rem; flex: none; opacity: .85; }

.bwc-admin-sidebar .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .05);
}

/* Flat, flush-edge active row — a solid accent border, not a floating
   rounded/glowing chip. Deliberately no border-radius or box-shadow here. */
.bwc-admin-sidebar .nav-link.active {
    color: #fff;
    font-weight: 600;
    background: rgba(255, 255, 255, .04);
    border-left-color: var(--op-gold);
}
.bwc-admin-sidebar .nav-link.active i { opacity: 1; color: var(--op-gold); }

.bwc-admin-content {
    margin-left: var(--admin-sidebar-width);
    min-height: 100vh;
    background: var(--admin-bg);
}

.bwc-admin-topbar {
    height: 60px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: none;
}

/* ==========================================================================
   Page header
   ========================================================================== */

.admin-page-header { margin-bottom: 1.5rem; }
.admin-page-header h1,
h4.admin-page-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .2rem;
    letter-spacing: -.01em;
}
.admin-page-header .breadcrumb,
.admin-page-subtitle {
    font-size: var(--fs-sm);
    color: var(--muted);
}
.admin-page-header .breadcrumb a { color: var(--op-gold); text-decoration: none; }

.section-title {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: .75rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: var(--fs-base);
    border-radius: var(--radius);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
    letter-spacing: 0;
}
.btn:active { transform: none; }

.btn-dark, .bwc-btn-primary, .btn-primary-lux {
    background: var(--op-ink);
    border-color: var(--op-ink);
    color: #fff;
}
.btn-dark:hover, .btn-dark:focus,
.bwc-btn-primary:hover, .bwc-btn-primary:focus,
.btn-primary-lux:hover {
    background: var(--op-ink-raised);
    border-color: var(--op-ink-raised);
    color: var(--op-gold);
}

.btn-warning {
    background: var(--op-gold);
    border-color: var(--op-gold);
    color: var(--op-ink);
}
.btn-warning:hover, .btn-warning:focus {
    background: #b8862c;
    border-color: #b8862c;
    color: var(--op-ink);
}

.btn-outline-dark {
    border-color: var(--border-strong);
    color: var(--n-700);
    background: var(--surface);
}
.btn-outline-dark:hover, .btn-outline-dark:focus {
    background: var(--n-100);
    border-color: var(--n-400);
    color: var(--n-900);
}

.btn-light { background: var(--surface); border-color: var(--border); color: var(--n-700); }
.btn-light:hover { background: var(--n-100); border-color: var(--border-strong); }

/* Bootstrap's default .nav-pills.active is saturated blue — out of
   palette everywhere in this app. Route it through the same ink/gold
   language as every other "selected" state (sidebar nav, segmented
   controls, category pills). */
.nav-pills .nav-link { color: var(--n-600); font-weight: 600; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background: var(--op-ink);
    color: #fff;
}
.nav-tabs .nav-link.active { border-color: var(--border) var(--border) var(--surface); color: var(--ink); }
.nav-tabs .nav-link { color: var(--muted); }

.btn-sm { padding: .35rem .7rem; font-size: var(--fs-sm); }
.btn-lg { padding: .65rem 1.3rem; font-size: var(--fs-md); }

.btn-icon {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border-radius: var(--radius);
    color: var(--muted); background: transparent; border: 1px solid transparent;
    transition: background var(--transition), color var(--transition);
}
.btn-icon:hover { background: var(--n-100); color: var(--n-800); border-color: var(--border); }
.btn-icon.danger:hover { background: var(--err-bg); color: var(--err); }

/* Rounded-pill is reserved for genuine pill affordances (filters, tags,
   segmented toggles) — not the default button shape. Existing markup
   using rounded-pill on primary actions still renders correctly since
   Bootstrap's own utility class handles the radius; this rule only stops
   *new* components defaulting to pill. */

/* ==========================================================================
   Settings tab navigation — replaces oversized rounded-pill nav-pills that
   forced multi-line wrapping and read as generic Bootstrap, not a deliberate
   tab bar.
   ========================================================================== */

.settings-tab-scroll {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border);
}
.settings-tab-scroll::-webkit-scrollbar { display: none; }

.settings-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.settings-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: none;
    white-space: nowrap;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: .65rem .9rem;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}
.settings-tab-btn i { font-size: .8rem; opacity: .8; }
.settings-tab-btn:hover { color: var(--n-900); }
.settings-tab-btn.active { color: var(--n-900); font-weight: 600; border-bottom-color: var(--op-gold); }

/* ==========================================================================
   Pagination — replaces Laravel's stock oversized pagination component
   ========================================================================== */

.pagination-compact-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 .5rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--n-700);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
a.pagination-compact-btn:hover { background: var(--n-50); border-color: var(--n-400); color: var(--n-900); }
.pagination-compact-btn.is-active { background: var(--op-ink); border-color: var(--op-ink); color: #fff; }
.pagination-compact-btn.is-disabled { color: var(--n-300); cursor: default; }

/* ==========================================================================
   Cards & surfaces
   ========================================================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    transition: none;
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: .9rem 1.1rem;
    font-weight: 600;
    font-size: var(--fs-md);
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

/* ── Stat tile — one neutral surface for every metric; colour lives only
   in the icon chip. Do not add per-card background tints. ─────────────── */
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-1);
    height: 100%;
}
.stat-card .stat-label {
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted); margin-bottom: .45rem;
}
.stat-card .stat-value {
    font-size: var(--fs-xl); font-weight: 650; line-height: 1.1;
    color: var(--n-900); font-variant-numeric: tabular-nums;
}
.stat-card .stat-meta { font-size: var(--fs-sm); color: var(--muted); margin-top: .3rem; }
.stat-card .stat-icon {
    width: 38px; height: 38px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--op-gold-rgb), .12); color: #96721f; font-size: 1rem;
}
.stat-card.stat-warn .stat-icon { background: var(--warn-bg); color: var(--warn); }
.stat-card.stat-err  .stat-icon { background: var(--err-bg);  color: var(--err); }
.stat-card.stat-ok   .stat-icon { background: var(--ok-bg);   color: var(--ok); }

.trend-up   { color: var(--ok); font-weight: 600; }
.trend-down { color: var(--err); font-weight: 600; }

/* ==========================================================================
   Tables
   ========================================================================== */

.bwc-admin-table {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.bwc-admin-table > .table-responsive,
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bwc-admin-table .table { margin: 0; }

.bwc-admin-table .table > thead th {
    background: var(--n-50);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .7rem .9rem;
    white-space: nowrap;
}
.bwc-admin-table .table > tbody td {
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--n-100);
    vertical-align: middle;
    color: var(--n-700);
    font-size: var(--fs-sm);
}
.bwc-admin-table .table > tbody tr:last-child td { border-bottom: 0; }
.bwc-admin-table .table > tbody tr { transition: background var(--transition); }
.bwc-admin-table .table-hover > tbody tr:hover > * { background: var(--n-50); }

/* ==========================================================================
   Badges & status
   ========================================================================== */

.badge {
    font-weight: 600;
    font-size: var(--fs-xs);
    padding: .3em .65em;
    border-radius: var(--radius-pill);
    letter-spacing: .01em;
}
.badge.bg-success { background: var(--ok-bg)  !important; color: var(--ok)  !important; }
.badge.bg-warning { background: var(--warn-bg)!important; color: var(--warn)!important; }
.badge.bg-danger  { background: var(--err-bg) !important; color: var(--err) !important; }
.badge.bg-info,
.badge.bg-primary { background: var(--info-bg)!important; color: var(--info)!important; }
.badge.bg-secondary { background: var(--n-100)!important; color: var(--n-600)!important; }
/* Order::status_badge() references these two Bootstrap-looking classes for
   'preparing' and 'out_for_delivery', but neither is a real Bootstrap
   class — both rendered with no background at all until these existed. */
.badge.bg-orange { background: var(--warn-bg) !important; color: var(--warn) !important; }
.badge.bg-purple { background: #efe8fb !important; color: #6c4bb6 !important; }

.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: .4rem; flex: none; }
.status-dot.ok   { background: var(--ok); }
.status-dot.warn { background: var(--warn); }
.status-dot.err  { background: var(--err); }
.status-dot.idle { background: var(--n-400); }

/* ==========================================================================
   Forms
   ========================================================================== */

.form-label { font-weight: 500; font-size: var(--fs-sm); color: var(--n-700); margin-bottom: .35rem; }
.form-control, .form-select {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: .5rem .75rem;
    font-size: var(--fs-base);
    color: var(--n-800);
    background: var(--surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control::placeholder { color: var(--n-400); }
.form-control:focus, .form-select:focus { border-color: var(--op-gold); box-shadow: var(--ring); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--err); }
.invalid-feedback { font-size: var(--fs-sm); }
.input-group-text { background: var(--n-50); border-color: var(--border-strong); color: var(--muted); }
.form-check-input:checked { background-color: var(--op-ink); border-color: var(--op-ink); }
.form-check-input:focus { box-shadow: var(--ring); }

.option-card {
    display: block;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius);
    padding: .85rem .95rem;
    cursor: pointer;
    background: var(--surface);
    transition: border-color var(--transition), background var(--transition);
}
.option-card:hover { border-color: var(--n-400); background: var(--n-25); }
.btn-check:checked + .option-card, .option-card.is-selected {
    border-color: var(--op-gold);
    background: rgba(var(--op-gold-rgb), .06);
}
.btn-check:focus-visible + .option-card { box-shadow: var(--ring); }

/* ==========================================================================
   Notification popup
   ========================================================================== */

.order-toast-stack {
    position: fixed; top: 1rem; right: 1rem; z-index: 1090;
    display: flex; flex-direction: column; gap: .6rem;
    width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}
.order-toast-stack > * { pointer-events: auto; }

.order-toast {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--op-gold);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    padding: .8rem .9rem;
    animation: toast-in 200ms ease-out;
}
.order-toast.is-leaving { animation: toast-out 150ms ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(14px); } }

.order-toast .toast-title { font-weight: 600; font-size: var(--fs-base); color: var(--n-900); display: flex; align-items: center; gap: .5rem; }
.order-toast .toast-meta { font-size: var(--fs-sm); color: var(--muted); margin-top: .15rem; }
.order-toast .toast-close { background: none; border: 0; color: var(--n-400); font-size: 1.05rem; line-height: 1; padding: .1rem .3rem; border-radius: 6px; }
.order-toast .toast-close:hover { color: var(--n-700); background: var(--n-100); }

/* New-order alert pulse — the one motion effect kept, because it signals
   something time-sensitive a cashier/kitchen must notice, not decoration. */
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(var(--op-gold-rgb), .4); }
    70%  { box-shadow: 0 0 0 10px rgba(var(--op-gold-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--op-gold-rgb), 0); }
}
.pulse { animation: pulse-ring 1.8s cubic-bezier(.4, 0, .6, 1) infinite; }

.notif-dot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--err); border: 2px solid var(--surface); }

/* ==========================================================================
   Empty states
   ========================================================================== */

.empty-state { text-align: center; padding: 2.5rem 1.5rem; color: var(--muted); }
.empty-state .empty-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--n-100); color: var(--n-400);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin: 0 auto .85rem;
}
.empty-state h6 { color: var(--n-700); font-weight: 600; margin-bottom: .3rem; font-size: var(--fs-base); }

/* ==========================================================================
   Table cards — floor / list views
   --------------------------------------------------------------------------
   Colour tone comes from data-status (ok/warn/err/info/idle), set server-
   side from CafeTable::status_tone and kept identical when the JS refresh
   path re-renders the same partial's output.
   ========================================================================== */

.table-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    width: 100%;
    user-select: none;
}

.table-card-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: .4rem .7rem;
    font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.table-card[data-status="ok"]   .table-card-bar { background: var(--ok); }
.table-card[data-status="warn"] .table-card-bar { background: var(--warn); }
.table-card[data-status="err"]  .table-card-bar { background: var(--err); }
.table-card[data-status="info"] .table-card-bar { background: var(--info); }
.table-card[data-status="idle"] .table-card-bar { background: var(--n-500); }

.table-card-body { padding: .75rem .85rem .5rem; }
.table-card-number { font-size: 1.375rem; font-weight: 650; color: var(--ink); line-height: 1; }
.table-card-capacity {
    display: flex; align-items: center; gap: .3rem;
    font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
    background: var(--n-100); padding: .2rem .5rem; border-radius: var(--radius-pill);
}
.table-card-location { font-size: var(--fs-xs); color: var(--muted); margin-top: .25rem; }
.table-card-order {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--border);
    font-size: var(--fs-sm); color: var(--n-700);
}
.table-card-flag {
    display: flex; align-items: center; gap: .3rem;
    margin-top: .4rem; font-size: var(--fs-xs); font-weight: 600; color: var(--err);
}

.table-card-actions {
    display: flex; gap: .35rem;
    padding: .5rem .6rem .6rem;
}
.tc-btn {
    flex: 1;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--n-700);
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: .4rem .5rem;
    border-radius: calc(var(--radius) - 2px);
    transition: background var(--transition), border-color var(--transition);
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
}
.tc-btn:hover { background: var(--n-50); border-color: var(--n-400); }
.tc-btn-primary { background: var(--op-ink); border-color: var(--op-ink); color: #fff; }
.tc-btn-primary:hover { background: var(--op-ink-raised); border-color: var(--op-ink-raised); color: var(--op-gold); }
.tc-btn-icon { flex: 0 0 auto; width: 32px; padding: .4rem 0; }

.floor-table-item.is-draggable { cursor: grab; }
.floor-table-item.is-draggable:active { cursor: grabbing; }
.floor-table-item .table-card { box-shadow: var(--shadow-2); }

/* ==========================================================================
   Category pills (storefront menu — genuine pill use case)
   ========================================================================== */

.bwc-category-pills { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: none; }
.bwc-category-pills::-webkit-scrollbar { display: none; }
.bwc-category-pills .pill {
    flex: none; padding: .45rem 1rem; border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--n-700);
    font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; transition: all var(--transition);
}
.bwc-category-pills .pill:hover { border-color: var(--bwc-primary); color: var(--bwc-primary); }
.bwc-category-pills .pill.active { background: var(--bwc-primary); border-color: var(--bwc-primary); color: #fff; }

/* ==========================================================================
   Utilities
   ========================================================================== */

/* ==========================================================================
   Lucide icons — one consistent stroke language
   ========================================================================== */
[x-cloak] { display: none !important; }
[data-lucide] { display: inline-block; vertical-align: -3px; }
.icon-xs { width: 14px; height: 14px; stroke-width: 2.25; }
.icon-sm { width: 16px; height: 16px; stroke-width: 2.25; }
.icon-md { width: 20px; height: 20px; stroke-width: 2; }
.icon-lg { width: 26px; height: 26px; stroke-width: 1.75; }

.text-accent { color: var(--op-gold) !important; }
.text-brand  { color: var(--op-gold) !important; }
.bg-brand-soft { background: rgba(var(--op-gold-rgb), .1) !important; }
.border-soft { border-color: var(--border) !important; }
.shadow-soft { box-shadow: var(--shadow-1) !important; }
.rounded-xl { border-radius: var(--radius) !important; }

.skeleton {
    background: linear-gradient(90deg, var(--n-100) 25%, var(--n-150) 37%, var(--n-100) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: var(--radius);
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
    .stat-card .stat-value { font-size: 1.5rem; }
    .bwc-admin-sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition);
        overflow-y: auto;
    }
    .bwc-admin-sidebar.is-open { transform: none; box-shadow: var(--shadow-2); }
    .sidebar-scrim {
        position: fixed; inset: 0; z-index: 1040;
        background: rgba(15, 23, 20, .45);
        opacity: 0; visibility: hidden;
        transition: opacity var(--transition), visibility var(--transition);
    }
    .sidebar-scrim.is-open { opacity: 1; visibility: visible; }
    .bwc-admin-content { margin-left: 0 !important; width: 100% !important; }
}

@media (max-width: 575.98px) {
    .stat-card { padding: .9rem; }
    .stat-card .stat-value { font-size: 1.3rem; }
    .bwc-admin-table .table > thead th,
    .bwc-admin-table .table > tbody td { padding: .6rem .7rem; font-size: var(--fs-sm); }
    .order-toast-stack { top: auto; bottom: 1rem; right: .75rem; left: .75rem; width: auto; }
    .btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
    .btn-sm { min-height: 36px; }
    .btn-icon { width: 40px; height: 40px; }

    .bwc-admin-topbar {
        height: auto !important;
        min-height: 60px;
        padding: .5rem .75rem !important;
        flex-wrap: wrap;
        row-gap: .35rem;
    }
    .bwc-admin-topbar > div:first-child { min-width: 0; }
    .bwc-admin-topbar > div:first-child h6 {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw;
    }
    .bwc-admin-topbar .text-muted.small { display: none; }
}

@media print {
    .bwc-admin-sidebar, .bwc-admin-topbar, .order-toast-stack, .no-print { display: none !important; }
    .bwc-admin-content { margin: 0 !important; width: 100% !important; }
    .card, .bwc-admin-table { box-shadow: none !important; border: 1px solid #ddd !important; }
}

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