/* ── Design tokens ─────────────────────────────────────────
   Light theme, same Puzzle brand (purple / cream / gold).
   Tokens are named by ROLE, not by colour, so a rule reads as intent:
     canvas < surface < surface-2   = page, cards, raised fills
     line                           = borders
     ink / muted / on-accent        = text on light, secondary, text on a fill
   The old --bg/--bg2/--bg3/--cream names are kept as aliases at the bottom so any
   stray usage still resolves to something sensible. */
:root {
    /* brand */
    --purple:#5B3E96; --lpurple:#7B5EA7; --purple-soft:#EFEAF8;
    --gold:#A97C1F;   --gold-soft:#FBF1DC; --gold-ink:#6E4E12;

    /* surfaces */
    --canvas:#F6F4FA; --surface:#FFFFFF; --surface-2:#F2EFF8; --line:#E6E1F0;

    /* text */
    --ink:#241B3A; --muted:#6F6685; --on-accent:#FFFFFF;

    /* status */
    --red:#C0392B; --green:#1E8E4E;

    --r:12px;
    --shadow-sm:0 1px 2px rgba(36,27,58,.06);
    --shadow:0 6px 20px rgba(36,27,58,.09);
    --scrim:rgba(36,27,58,.45);

    /* legacy aliases — safety net for anything not migrated */
    --bg:var(--canvas); --bg2:var(--surface); --bg3:var(--surface-2); --cream:var(--ink);
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
    background:var(--canvas);
    color:var(--ink);
    font-family:'Segoe UI', Tahoma, sans-serif;
    min-height:100vh;
}
a { color:var(--lpurple); text-decoration:none; }
a:hover { color:var(--ink); }
h1, h2, h3, h4 { color:var(--ink); }
.text-gold { color:var(--gold); }
.text-muted2 { color:var(--muted); }

/* ── App shell ─────────────────────────────────────────── */
.pz-header {
    position:sticky; top:0; z-index:100;
    background:var(--surface); border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px; gap:12px;
}
.logo { width:40px; height:40px; }
.pz-brand { display:flex; align-items:center; gap:10px; color:inherit; }
.pz-brand:hover { color:inherit; }
.pz-brand .title { font-weight:700; font-size:1.05rem; line-height:1.1; color:var(--ink); }
.pz-brand .subtitle { font-size:.62rem; letter-spacing:2px; text-transform:uppercase; color:var(--gold); }
.pz-actions { display:flex; align-items:center; gap:10px; }
.pz-actions form { margin:0; }
.pz-user { color:var(--muted); font-size:.85rem; }
.pz-lang {
    background:var(--surface-2); border:1px solid var(--purple); color:var(--ink);
    border-radius:20px; padding:5px 12px; font-size:.78rem; font-weight:700; cursor:pointer;
}
.pz-lang:hover { background:var(--purple); color:var(--on-accent); }
.pz-content { max-width:1100px; margin:0 auto; padding:20px 16px; }

/* ── Buttons ───────────────────────────────────────────── */
.btn-pz {
    background:var(--purple); color:var(--on-accent); border:none; border-radius:20px;
    padding:9px 18px; font-weight:600; font-size:.9rem; cursor:pointer;
    transition:.2s; display:inline-block;
}
.btn-pz:hover { background:var(--lpurple); color:var(--on-accent); }
.btn-pz-ghost {
    background:var(--surface); border:1px solid var(--line); color:var(--muted);
    border-radius:20px; padding:9px 18px; font-weight:600; font-size:.9rem; cursor:pointer;
    display:inline-block;
}
.btn-pz-ghost:hover { border-color:var(--purple); color:var(--ink); }
.btn-pz-danger {
    background:var(--red); color:#fff; border:none; border-radius:20px;
    padding:9px 18px; font-weight:600; font-size:.9rem; cursor:pointer;
    transition:.2s; display:inline-block;
}
.btn-pz-danger:hover { filter:brightness(1.08); }

/* ── Tiles / cards ─────────────────────────────────────── */
.pz-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:16px; }
.pz-tile {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
    padding:22px 16px; display:flex; flex-direction:column; gap:6px;
    text-align:center; transition:.2s; color:inherit;
}
.pz-tile:hover { border-color:var(--purple); transform:translateY(-2px); color:inherit; }
.pz-tile .icon { font-size:2.1rem; }
.pz-tile .label { font-weight:700; color:var(--ink); }
.pz-tile .label-ar { font-size:.85rem; color:var(--muted); }

.pz-hero { text-align:center; padding:34px 12px; }
.pz-hero .logo { width:78px; height:78px; margin-bottom:6px; }
.pz-hero h1 { font-size:1.8rem; margin:14px 0 6px; }
.pz-hero p { color:var(--muted); }

.vat-note {
    background:var(--surface); border:1px solid var(--gold); border-radius:var(--r);
    padding:10px 16px; margin:18px auto; max-width:640px;
    font-size:.8rem; color:var(--gold); text-align:center;
}

/* ── Themed bootstrap controls (Identity pages) ────────── */
.form-control, .form-select {
    background:var(--surface); border:1px solid var(--line); color:var(--ink);
}
.form-control:focus, .form-select:focus {
    background:var(--surface); border-color:var(--purple); color:var(--ink); box-shadow:none;
}
.form-floating > label { color:var(--muted); }
.btn-primary { color:#fff; background-color:var(--purple); border-color:var(--purple); }
.btn-primary:hover { background-color:var(--lpurple); border-color:var(--lpurple); }
.card { background:var(--surface); border:1px solid var(--line); color:var(--ink); }
h1:focus { outline:none; }

.valid.modified:not([type=checkbox]) { outline:1px solid var(--green); }
.invalid { outline:1px solid var(--red); }
.validation-message { color:var(--red); }

/* ── Blazor error UI ───────────────────────────────────── */
#blazor-error-ui {
    background:var(--surface-2); color:var(--ink); bottom:0;
    box-shadow:0 -2px 10px rgba(36,27,58,.12); display:none;
    left:0; padding:.6rem 1.25rem; position:fixed; width:100%; z-index:1000;
}
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:.75rem; top:.5rem; }
.blazor-error-boundary {
    background:var(--red); padding:1rem; color:#fff; border-radius:var(--r);
}
.blazor-error-boundary::after { content:"An error has occurred."; }

/* RTL-friendly floating placeholders */
.form-floating > .form-control::placeholder { color:var(--muted); text-align:end; }
.form-floating > .form-control:focus::placeholder { text-align:start; }

@media (max-width:520px) {
    .pz-grid { grid-template-columns:1fr 1fr; }
    .pz-header { padding:10px 12px; gap:8px; }
    .pz-brand .subtitle { display:none; }
    .pz-brand .title { white-space:nowrap; font-size:.95rem; }
    .pz-user { display:none; }
    .btn-pz, .btn-pz-ghost { padding:8px 14px; font-size:.82rem; }
}

/* ── Admin: tabs, tables, modal, forms ─────────────────── */
.adm-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.adm-head h2 { font-size:1.3rem; }
.adm-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.adm-tab { background:var(--surface); border:1px solid var(--line); color:var(--muted); padding:8px 18px; border-radius:20px; font-size:.85rem; font-weight:600; cursor:pointer; }
.adm-tab.active { background:var(--gold-soft); border-color:var(--gold); color:var(--gold-ink); }
.adm-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.adm-filter { background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:20px; padding:8px 14px; font-size:.85rem; }
.adm-row { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 16px; display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.adm-row-info { flex:1; min-width:0; }
.adm-row-name { font-weight:600; color:var(--ink); }
.adm-row-name-ar { font-size:.82rem; color:var(--muted); }
.adm-row-sub { font-size:.72rem; color:var(--muted); margin-top:2px; }
.adm-price { color:var(--gold); font-weight:700; min-width:84px; text-align:end; }
.adm-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.badge { padding:5px 10px; border-radius:8px; font-size:.75rem; font-weight:700; border:none; cursor:pointer; }
.badge-on { background:rgba(30,142,78,.12); color:var(--green); }
.badge-off { background:rgba(192,57,43,.10); color:var(--red); }
.btn-mini { padding:5px 12px; border-radius:8px; font-size:.76rem; font-weight:600; border:none; cursor:pointer; }
.btn-edit { background:var(--purple-soft); color:var(--purple); }
.btn-del { background:rgba(192,57,43,.10); color:var(--red); }
.btn-ok { background:rgba(30,142,78,.12); color:var(--green); }
.btn-move { background:var(--surface-2); color:var(--muted); border:1px solid var(--line); }

/* Modal */
.pz-overlay { position:fixed; inset:0; background:var(--scrim); z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; }
.pz-modal { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); width:100%; max-width:540px; max-height:90vh; display:flex; flex-direction:column; }
.pz-modal-sm { max-width:400px; }
.pz-modal-hdr { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); flex-shrink:0; }
.pz-modal-hdr h3 { color:var(--gold); font-size:1rem; }
.pz-modal-close { background:var(--surface-2); color:var(--muted); width:30px; height:30px; border-radius:50%; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.14s; }
.pz-modal-close:hover { background:var(--purple-soft); color:var(--purple); }
.pz-modal-body { overflow-y:auto; padding:16px 18px; flex:1; }
.pz-modal-footer { padding:14px 18px; border-top:1px solid var(--line); display:flex; gap:10px; flex-shrink:0; }

/* Forms */
.field { margin-bottom:12px; }
.field > label { display:block; font-size:.8rem; color:var(--muted); margin-bottom:5px; }
.field input, .field select, .field textarea { width:100%; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:9px 12px; font-size:.9rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--purple); }
.field textarea { resize:vertical; min-height:56px; }
.field-row { display:flex; gap:10px; }
.field-row .field { flex:1; }
.check-row { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:.85rem; }
.check-row input { width:18px; height:18px; accent-color:var(--purple); }

/* Ingredient chips editor */
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.chip { background:var(--surface-2); border:1px solid var(--line); color:var(--ink); padding:4px 8px 4px 10px; border-radius:12px; font-size:.76rem; display:inline-flex; align-items:center; gap:6px; }
.chip button { background:none; border:none; color:var(--red); cursor:pointer; font-size:.95rem; line-height:1; padding:0; }
.chip-add { display:flex; gap:6px; margin-top:8px; }
.chip-add input { flex:1; }

.link-chips { display:flex; flex-wrap:wrap; gap:6px; }
.link-chip { background:var(--surface-2); border:1px solid var(--line); color:var(--muted); padding:5px 12px; border-radius:14px; font-size:.78rem; cursor:pointer; }
.link-chip.on { background:rgba(123,94,167,.3); border-color:var(--purple); color:var(--ink); }

.mod-group { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; margin-bottom:14px; }
.mod-group h3 { color:var(--gold); font-size:1rem; margin-bottom:4px; }
.mod-opt { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); }
.mod-opt:last-of-type { border-bottom:none; }
.mod-opt .nm { flex:1; }
.section-label { font-size:.74rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin:12px 0 6px; }
.empty { text-align:center; color:var(--muted); padding:34px; }

/* ── Customer ordering ─────────────────────────────────── */
.loading { text-align:center; padding:60px 20px; color:var(--muted); }
.ord-bar { position:sticky; top:0; z-index:90; background:var(--surface); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:10px 16px; gap:10px; }
.table-badge { background:var(--surface-2); border:1px solid var(--purple); color:var(--ink); padding:6px 14px; border-radius:20px; font-size:.85rem; font-weight:700; }
.who-badge { color:var(--muted); font-size:.75rem; }
.cart-btn { background:var(--purple); color:var(--on-accent); border:none; padding:8px 16px; border-radius:20px; font-weight:700; font-size:.85rem; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.cart-btn:hover { background:var(--lpurple); }
.cart-count { background:var(--gold); color:var(--on-accent); min-width:20px; height:20px; border-radius:10px; font-size:.7rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; }

.cat-tabs { display:flex; gap:8px; overflow-x:auto; padding:12px 16px; background:var(--surface); position:sticky; top:53px; z-index:80; border-bottom:1px solid var(--line); scrollbar-width:none; }
.cat-tabs::-webkit-scrollbar { display:none; }
.cat-tab { background:var(--surface-2); color:var(--muted); border:1px solid transparent; padding:7px 15px; border-radius:20px; white-space:nowrap; font-size:.82rem; font-weight:600; cursor:pointer; }
.cat-tab.active { background:var(--purple); color:var(--on-accent); border-color:var(--purple); }

.items-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; padding:16px; }
.item-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px; display:flex; flex-direction:column; gap:7px; }
.item-card:hover { border-color:var(--purple); }
.item-top { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.item-name { font-weight:700; color:var(--ink); }
.item-name-ar { font-size:.85rem; color:var(--muted); }
.item-desc { font-size:.75rem; color:var(--muted); }
.item-ingr { display:flex; flex-wrap:wrap; gap:4px; }
.ingr-tag { background:var(--surface-2); color:var(--muted); padding:2px 8px; border-radius:10px; font-size:.68rem; }
.item-foot { display:flex; justify-content:flex-end; margin-top:2px; }
.item-price { color:var(--gold); font-weight:800; white-space:nowrap; }
.add-btn { background:var(--purple); color:var(--on-accent); border:none; padding:7px 18px; border-radius:20px; font-weight:700; font-size:.82rem; cursor:pointer; }
.add-btn:hover { background:var(--lpurple); }

/* Customization */
.cz-ingr { display:flex; flex-wrap:wrap; gap:6px; }
.cz-chip { background:var(--surface-2); border:1px solid var(--line); color:var(--ink); padding:4px 12px; border-radius:14px; font-size:.78rem; cursor:pointer; user-select:none; }
.cz-chip.removed { background:rgba(224,82,82,.15); border-color:var(--red); color:var(--red); text-decoration:line-through; }
.cz-opt { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line); cursor:pointer; }
.cz-opt:last-child { border-bottom:none; }
.cz-opt input { width:18px; height:18px; accent-color:var(--purple); }
.cz-opt .op-name { flex:1; }
.cz-opt .op-price { color:var(--gold); font-weight:700; font-size:.85rem; }

/* Cart bottom sheet */
.sheet-overlay { position:fixed; inset:0; background:var(--scrim); z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; }
.sheet { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); width:100%; max-width:600px; max-height:85vh; display:flex; flex-direction:column; box-shadow:var(--shadow); }
.sheet-hdr { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
.sheet-hdr h3 { font-size:1rem; }
.sheet-body { overflow-y:auto; padding:14px 18px; flex:1; }
.sheet-foot { padding:14px 18px; border-top:1px solid var(--line); }

/* Customer "amount due" bar under the table bill */
.bill-due { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding:14px 16px; background:var(--surface-2); border:1px solid var(--gold); border-radius:var(--r); font-weight:800; }
.bill-due-amt { color:var(--gold); font-size:1.15rem; white-space:nowrap; }

/* Admin review tables (Orders / Tables / History) */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); margin-top:14px; background:var(--surface); }
.data-table { width:100%; border-collapse:collapse; font-size:.85rem; min-width:520px; }
.data-table th, .data-table td { padding:11px 14px; text-align:start; white-space:nowrap; }
.data-table thead th { background:var(--surface-2); color:var(--gold); font-weight:700; }
.data-table tbody tr { border-top:1px solid var(--line); }
.data-table tbody tr:hover { background:rgba(123,94,167,.12); }
/* Money hugs the far edge so a full-width table doesn't leave a dead gutter,
   and figures line up digit-under-digit down the column. */
.data-table .num { color:var(--gold); font-weight:700; text-align:end; }
.data-table thead th.num { color:var(--gold); }
.data-table .st { padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700; }
.st-new { background:rgba(155,126,199,.2); color:var(--lpurple); }
.st-ready { background:rgba(201,168,76,.18); color:var(--gold); }
.st-served { background:rgba(82,192,117,.16); color:var(--green); }
.st-cancelled { background:rgba(224,82,82,.16); color:var(--red); }
/* filter bar + sortable headers */
.filter-bar { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; align-items:center; }
.filter-bar input, .filter-bar select { background:var(--surface); border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:8px 12px; font-size:.82rem; font-family:inherit; }
.filter-bar input { min-width:160px; }
.filter-bar input:focus, .filter-bar select:focus { outline:none; border-color:var(--purple); }
.filter-count { color:var(--muted); font-size:.78rem; margin-inline-start:auto; white-space:nowrap; }
.data-table th.sortable { cursor:pointer; user-select:none; }
.data-table th.sortable:hover { color:var(--ink); }
.sort-arrow { color:var(--gold); font-size:.72rem; }
.data-table tfoot .tot-foot td { background:var(--surface-2); font-weight:800; border-top:2px solid var(--purple); color:var(--ink); padding:12px 14px; }
.data-table tfoot .tot-foot .num { color:var(--gold); font-size:.95rem; }
.filter-bar input[type=date] { color-scheme:dark; min-width:auto; }
.cart-line { background:var(--surface-2); border-radius:10px; padding:12px; margin-bottom:10px; }
.cart-line-top { display:flex; justify-content:space-between; gap:8px; }
.cart-line-name { font-weight:700; }
.cart-line-price { color:var(--gold); font-weight:700; white-space:nowrap; }
.cart-mod { font-size:.72rem; color:var(--muted); margin-top:3px; }
.cart-note { font-size:.72rem; color:var(--gold); font-style:italic; margin-top:3px; }
.qty { display:flex; align-items:center; gap:10px; margin-top:8px; }
.qty-btn { background:var(--surface); color:var(--ink); border:none; width:28px; height:28px; border-radius:50%; font-size:1.1rem; cursor:pointer; }
.qty-val { min-width:20px; text-align:center; font-weight:700; }
.rm-btn { background:rgba(224,82,82,.15); color:var(--red); border:none; padding:4px 10px; border-radius:8px; font-size:.72rem; margin-inline-start:auto; cursor:pointer; }
.tot-row { display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:4px; color:var(--muted); }
.tot-row.grand { font-size:1.1rem; font-weight:800; color:var(--ink); margin:8px 0; }
.place-btn { width:100%; background:var(--purple); color:var(--on-accent); border:none; padding:13px; border-radius:var(--r); font-size:1rem; font-weight:800; cursor:pointer; }
.place-btn:hover { background:var(--lpurple); }

/* Tracking */
.track { padding:16px; border-top:2px solid var(--line); }
.track h3 { color:var(--gold); font-size:.95rem; margin-bottom:10px; }
.order-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; margin-bottom:10px; }
.order-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.order-no { font-weight:700; }
.status { padding:3px 10px; border-radius:12px; font-size:.72rem; font-weight:700; }
.st-new { background:rgba(82,192,117,.15); color:var(--green); }
.st-prep { background:rgba(201,168,76,.15); color:var(--gold); }
.st-ready { background:rgba(123,94,167,.3); color:var(--lpurple); }
.st-served { background:var(--surface-2); color:var(--muted); }
.order-ln { font-size:.8rem; color:var(--muted); }

/* ── QR codes ──────────────────────────────────────────── */
.qr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.qr-card { background:#fff; border-radius:var(--r); padding:18px; text-align:center; }
.qr-card .qr-title { color:#120828; font-weight:800; margin-bottom:10px; }
.qr-img svg { width:180px; height:180px; }
.qr-url { color:#7B5EA7; font-size:.68rem; word-break:break-all; margin-top:8px; }
@media print {
    .pz-header, .adm-head { display:none !important; }
    .qr-card { break-inside:avoid; border:1px solid #ccc; }
}

/* ── Floor map ─────────────────────────────────────────── */
.fp-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.fp-sections { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.fp-canvas {
    position:relative; width:100%; height:540px; overflow:hidden;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
    background-image:radial-gradient(var(--line) 1.4px, transparent 1.4px);
    background-size:26px 26px; touch-action:none;
}
.fp-canvas.edit { box-shadow:inset 0 0 0 2px var(--purple); }
.fp-table {
    position:absolute; background:var(--surface-2); border:2px solid var(--muted); color:var(--ink);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
    user-select:none; transition:box-shadow .15s, border-color .2s;
}
.fp-canvas.edit .fp-table { cursor:grab; }
.fp-table.dragging { cursor:grabbing; box-shadow:0 10px 24px rgba(36,27,58,.22); z-index:20; opacity:.95; }
.fp-table.free { border-color:var(--muted); }
.fp-table.active { border-color:var(--green); box-shadow:0 0 0 3px rgba(82,192,117,.18); background:rgba(82,192,117,.08); }
.shape-round { border-radius:50%; }
.shape-square, .shape-rectangle { border-radius:12px; }
.fp-label { font-weight:800; font-size:1.05rem; line-height:1; }
.fp-seats { font-size:.62rem; color:var(--muted); }
.fp-total { font-size:.64rem; color:var(--gold); font-weight:800; }
.fp-edit {
    position:absolute; top:-9px; inset-inline-end:-9px; background:var(--purple); color:#fff;
    border:none; width:24px; height:24px; border-radius:50%; font-size:.72rem; cursor:pointer; z-index:5;
}
.fp-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.9rem; text-align:center; padding:20px; }
.fp-legend { display:flex; gap:18px; font-size:.75rem; color:var(--muted); margin-top:10px; flex-wrap:wrap; }
.fp-dot { display:inline-block; width:11px; height:11px; border-radius:50%; margin-inline-end:6px; vertical-align:middle; }
.fp-dot.free { background:var(--muted); }
.fp-dot.active { background:var(--green); }
.fp-hint { font-size:.75rem; color:var(--gold); }

/* ── Order boards (waiter / kitchen) ───────────────────── */
.board { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; align-items:start; }
.board-col { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px; }
.board-col-hd { display:flex; align-items:center; justify-content:space-between; font-weight:800; padding:7px 10px; border-radius:8px; margin-bottom:10px; font-size:.9rem; }
.board-col-hd.col-new { background:rgba(82,192,117,.15); color:var(--green); }
.board-col-hd.col-prep { background:rgba(201,168,76,.15); color:var(--gold); }
.board-col-hd.col-ready { background:rgba(123,94,167,.3); color:var(--lpurple); }
.col-count { background:var(--canvas); border-radius:10px; padding:1px 10px; font-size:.8rem; }
.board-empty { text-align:center; color:var(--muted); padding:16px; font-size:.85rem; }
.worder { background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:10px; }
.worder-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.worder-table { font-weight:800; color:var(--ink); }
.worder-time { font-size:.72rem; color:var(--muted); }
.worder-item { font-size:.85rem; padding:4px 0; border-bottom:1px solid var(--line); color:var(--ink); }
.worder-item:last-child { border-bottom:none; }
.worder-mod { font-size:.72rem; color:var(--muted); margin-inline-start:14px; }
.worder-mod.note { color:var(--gold); font-style:italic; }
.worder-by { font-size:.7rem; color:var(--lpurple); margin-inline-start:14px; }
.worder-foot { display:flex; align-items:center; gap:8px; margin-top:10px; }
.worder-total { font-weight:800; color:var(--gold); }
.wbtn { margin-inline-start:auto; border:none; border-radius:8px; padding:8px 16px; font-size:.82rem; font-weight:800; cursor:pointer; }
.wbtn-prep { background:rgba(201,168,76,.2); color:var(--gold); }
.wbtn-ready { background:rgba(123,94,167,.35); color:var(--lpurple); }
.wbtn-done { background:rgba(82,192,117,.2); color:var(--green); }

/* ── Cashier ───────────────────────────────────────────── */
.cash-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.cash-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; }
.cash-card h4 { color:var(--gold); font-size:1.2rem; margin-bottom:6px; }
.cash-sub { font-size:.78rem; color:var(--muted); }
.cash-total { font-size:1.5rem; font-weight:800; color:var(--ink); margin:10px 0; }
.cash-card .btn-pz { width:100%; }
.pay-methods { display:flex; gap:8px; margin:12px 0 4px; }
.pay-m { flex:1; background:var(--surface-2); border:1px solid var(--line); color:var(--muted); border-radius:8px; padding:11px; font-weight:800; cursor:pointer; font-size:.9rem; }
.pay-m.sel { background:rgba(123,94,167,.3); border-color:var(--purple); color:var(--ink); }
.bill-order { border-bottom:1px dashed var(--line); padding:8px 0; margin-bottom:4px; }
.bill-order:last-of-type { border-bottom:none; }
.paid-ok { text-align:center; color:var(--green); font-weight:800; font-size:1.1rem; padding:24px; line-height:1.8; }

/* ── Admin dashboard & reports ─────────────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
@media (max-width:700px) { .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:430px) { .kpi-grid { grid-template-columns:1fr; } }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; }
.kpi-label { font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.kpi-val { font-size:1.8rem; font-weight:800; color:var(--ink); margin-top:6px; }
.danger-zone { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:18px; padding:16px 18px; background:rgba(224,82,82,.07); border:1px solid rgba(224,82,82,.3); border-radius:var(--r); }
.dz-title { font-weight:700; color:var(--ink); }
.dz-sub { font-size:.78rem; color:var(--muted); margin-top:3px; max-width:520px; }

/* Branch switcher (header) */
.branch-switch { display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:4px 10px; }
.branch-switch select { background:transparent; border:none; color:var(--ink); font-family:inherit; font-size:.82rem; font-weight:600; cursor:pointer; max-width:150px; }
.branch-switch select:focus { outline:none; }
.branch-switch option { background:var(--surface); color:var(--ink); }
.branch-single { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:.82rem; font-weight:600; }
.branch-pin { font-size:.8rem; }

/* Menu item images */
.item-img { width:100%; height:150px; object-fit:cover; border-radius:10px; margin-bottom:10px; display:block; background:var(--surface-2); }
.row-thumb { width:46px; height:46px; border-radius:8px; object-fit:cover; flex:0 0 auto; background:var(--surface-2); border:1px solid var(--line); }
.row-thumb-empty { display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:var(--muted); }
.img-upload { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.img-preview { width:92px; height:92px; border-radius:10px; object-fit:cover; background:var(--surface-2); border:1px solid var(--line); flex:0 0 auto; }
.img-empty { display:flex; align-items:center; justify-content:center; font-size:1.7rem; color:var(--muted); }
.img-upload-actions { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.img-upload-actions input[type=file] { color:var(--muted); font-size:.8rem; max-width:230px; }
.kpi-sub { font-size:.72rem; color:var(--muted); margin-top:2px; }
.chart-wrap { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; margin-bottom:18px; }
.chart-wrap h3 { color:var(--gold); font-size:.95rem; margin-bottom:16px; }
.bar-chart { display:flex; align-items:flex-end; gap:5px; height:210px; overflow-x:auto; padding-bottom:26px; }
.bar-col { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; min-width:26px; flex:1; }
.bar { width:100%; max-width:34px; background:linear-gradient(180deg,var(--lpurple),var(--purple)); border-radius:5px 5px 0 0; min-height:2px; transition:filter .15s, box-shadow .15s, transform .15s; }
.bar-col:hover .bar { filter:brightness(1.18) saturate(1.15); box-shadow:0 6px 16px rgba(155,126,199,.45); }
.bar-val { font-size:.6rem; color:var(--gold-ink); font-weight:700; white-space:nowrap; transition:.15s; }
.bar-col:hover .bar-val { transform:scale(1.1); }
.bar-lbl { font-size:.56rem; color:var(--muted); white-space:nowrap; transform:rotate(-45deg); margin-top:10px; }
.period-tabs { display:flex; gap:8px; margin-bottom:14px; }
.ptab { background:var(--surface-2); color:var(--muted); border:none; padding:6px 16px; border-radius:12px; font-size:.8rem; font-weight:700; cursor:pointer; }
.ptab.active { background:var(--purple); color:var(--on-accent); }
.ta-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.ta-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; }
.ta-card h4 { color:var(--gold); margin-bottom:10px; }
.ta-stat { display:flex; justify-content:space-between; font-size:.82rem; padding:5px 0; border-bottom:1px solid var(--line); }
.ta-stat:last-child { border:none; }
.tx-row { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px 14px; margin-bottom:6px; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.82rem; flex-wrap:wrap; }
.tx-total { color:var(--gold); font-weight:800; margin-inline-start:10px; }
.tx-method { color:var(--muted); font-size:.72rem; }
.staff-row { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:12px 16px; margin-bottom:8px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.staff-role { background:var(--surface-2); color:var(--lpurple); padding:2px 10px; border-radius:10px; font-size:.72rem; font-weight:700; }
.staff-locked { color:var(--red); font-size:.72rem; }

/* ══ App shell: fixed sidebar + top bar ════════════════════════════ */
.shell { display:flex; min-height:100vh; }

.side {
    width:104px; flex:0 0 104px; background:var(--surface);
    border-inline-end:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center;
    padding:14px 0 18px; position:sticky; top:0; height:100vh;
}
.side-brand { display:block; margin-bottom:18px; }
.side-brand .logo { width:44px; height:44px; }
.side-nav { display:flex; flex-direction:column; gap:4px; width:100%; padding:0 10px; overflow-y:auto; }
.side-foot { margin-top:auto; width:100%; padding:10px 10px 0; border-top:1px solid var(--line); }
.side-foot form { margin:0; }

.side-link {
    display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:11px 4px; border-radius:14px; color:var(--muted);
    font-size:.68rem; font-weight:600; text-align:center; line-height:1.2;
    transition:.16s; border:none; background:none; width:100%; cursor:pointer;
    font-family:inherit;
}
.side-link:hover { background:var(--surface-2); color:var(--ink); }
.side-link.active { background:var(--gold-soft); color:var(--gold-ink); }
.side-link.active .ic { stroke-width:2; }
.side-link-btn:hover { color:var(--red); }

.shell-main { flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar {
    position:sticky; top:0; z-index:90; background:var(--surface);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
    gap:14px; padding:10px 22px; flex-wrap:wrap;
}
.topbar-start, .topbar-end { display:flex; align-items:center; gap:14px; }
.brand-name { font-weight:800; font-size:1.02rem; color:var(--ink); line-height:1.15; }
.brand-sub { font-size:.7rem; color:var(--muted); }
.topbar-date {
    display:inline-flex; align-items:center; gap:6px;
    color:var(--muted); font-size:.82rem; font-weight:600; white-space:nowrap;
}
.topbar-user { display:flex; align-items:center; gap:10px; }
.tu-text { text-align:end; line-height:1.2; }
.tu-name { font-weight:700; font-size:.88rem; color:var(--ink); }
.tu-role { font-size:.72rem; color:var(--muted); }
.tu-avatar {
    width:38px; height:38px; border-radius:50%; flex:0 0 38px;
    background:var(--purple-soft); color:var(--purple);
    display:flex; align-items:center; justify-content:center;
}

/* The shell already has a fixed sidebar, so the content column takes whatever is
   left — no centred cap. A POS dashboard is read at a glance; empty gutters on a
   wide screen just push the numbers away from each other. */
.shell-content { padding:24px 26px 40px; width:100%; max-width:none; }

.ic { flex:0 0 auto; }

@media (max-width:760px) {
    .shell { flex-direction:column; }
    .side {
        width:100%; flex:none; height:auto; position:sticky; top:0; z-index:95;
        flex-direction:row; align-items:center; padding:8px 10px;
        border-inline-end:none; border-bottom:1px solid var(--line);
    }
    .side-brand { margin:0 8px 0 0; }
    .side-brand .logo { width:34px; height:34px; }
    .side-nav { flex-direction:row; overflow-x:auto; padding:0; gap:2px; }
    .side-link { flex-direction:row; gap:6px; padding:8px 12px; white-space:nowrap; width:auto; }
    .side-link span { display:none; }
    .side-link.active span { display:inline; }
    .side-foot { margin:0 0 0 auto; width:auto; border:none; padding:0; }
    .side-foot .side-link span { display:none; }
    .topbar { padding:10px 14px; }
    .brand-sub, .topbar-date, .tu-text { display:none; }
    .shell-content { padding:16px 14px 32px; }
}

/* ══ Dashboard overview ════════════════════════════════════════════ */
.ov-strip {
    display:grid; gap:0;
    grid-template-columns:repeat(4, minmax(0,1fr)) minmax(180px,1.5fr) minmax(190px,1.2fr);
    align-items:center; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r); padding:16px 6px; margin-bottom:20px; box-shadow:var(--shadow-sm);
}
.ov-stat { text-align:center; padding:4px 10px; border-inline-end:1px solid var(--line); color:var(--purple); }
.ov-label { font-size:.76rem; color:var(--muted); font-weight:600; margin-top:6px; }
.ov-num { font-size:1.5rem; font-weight:800; color:var(--ink); margin-top:2px; }
.ov-num-money { font-size:1.15rem; }
.ov-sub { font-size:.7rem; color:var(--muted); margin-top:2px; }
.ov-chart { padding:0 14px; }
.ov-headline { padding:4px 16px; text-align:end; }
.ov-headline-num { font-size:1.55rem; font-weight:800; color:var(--ink); line-height:1.15; white-space:nowrap; }
.ov-delta { display:flex; align-items:center; justify-content:flex-end; gap:6px; font-size:.74rem; margin-top:4px; }
.ov-delta.up { color:var(--green); }
.ov-delta.down { color:var(--red); }
.ov-delta-label { color:var(--muted); }
.ov-delta.down .ic { transform:scaleY(-1); }

.spark { width:100%; height:74px; display:block; overflow:visible; }
.spark-labels { display:flex; justify-content:space-between; margin-top:4px; }
.spark-labels span { font-size:.58rem; color:var(--muted); white-space:nowrap; letter-spacing:-.2px; }

.ov-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); gap:18px; }
.panel {
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
    padding:16px 18px; box-shadow:var(--shadow-sm);
}
.panel-head { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.panel-head h3 { font-size:1rem; margin:0; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--green); flex:0 0 8px; }
.live-dot.off { background:var(--line); }

.cur-order { border:1px solid var(--line); border-radius:10px; padding:14px; }
.cur-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.cur-table { display:inline-flex; align-items:center; gap:7px; font-weight:700; color:var(--ink); }
.cur-since, .cur-by { font-size:.76rem; color:var(--muted); display:inline-flex; align-items:center; gap:5px; }
.cur-id { font-weight:800; color:var(--ink); }
.cur-lines { border-top:1px solid var(--line); padding-top:10px; margin-top:6px; }
.cur-line { display:flex; justify-content:space-between; font-size:.85rem; padding:4px 0; color:var(--ink); }
.cur-qty { color:var(--muted); }
.cur-total {
    display:flex; justify-content:space-between; align-items:center;
    border-top:1px solid var(--line); margin-top:8px; padding-top:10px; font-weight:700;
}
.cur-total strong { color:var(--ink); font-size:1.05rem; }
.btn-block { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:12px; text-align:center; }

.op-list { display:flex; flex-direction:column; }
.op-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line); }
.op-row:first-child { border-top:none; }
.op-ic { width:38px; height:38px; border-radius:50%; flex:0 0 38px; display:flex; align-items:center; justify-content:center; }
.op-green  { background:rgba(30,142,78,.12);  color:var(--green); }
.op-amber  { background:var(--gold-soft);     color:var(--gold-ink); }
.op-teal   { background:rgba(23,138,150,.12); color:#146c78; }
.op-purple { background:var(--purple-soft);   color:var(--purple); }
.op-text { flex:1; min-width:0; }
.op-title { font-weight:700; font-size:.9rem; color:var(--ink); }
.op-sub { font-size:.75rem; color:var(--muted); }
.op-num { text-align:center; min-width:74px; }
.op-num strong { display:block; font-size:1.05rem; color:var(--ink); }
.op-num span { font-size:.68rem; color:var(--muted); }
.btn-sm { padding:6px 14px; font-size:.78rem; }

@media (max-width:1000px) {
    .ov-strip { grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 0; }
    .ov-stat:nth-child(2n) { border-inline-end:none; }
    .ov-chart, .ov-headline { grid-column:1 / -1; text-align:start; padding:8px 14px 0; }
    .ov-delta { justify-content:flex-start; }
    .ov-cols { grid-template-columns:1fr; }
}
@media (max-width:520px) {
    .ov-strip { grid-template-columns:1fr 1fr; }
    .op-num { min-width:56px; }
    .op-sub { display:none; }
}

.page-head { margin-bottom:20px; }
.page-head h1 { font-size:1.75rem; font-weight:800; margin:0 0 4px; }
.page-head p { color:var(--muted); margin:0; font-size:.92rem; }

/* ══ Signed-out landing ════════════════════════════════════════════ */
.landing { max-width:520px; margin:0 auto; padding:48px 20px; text-align:center; }
.landing .logo { width:76px; height:76px; }
.landing h1 { font-size:1.9rem; margin:18px 0 4px; }
.landing-sub { color:var(--muted); margin:0 0 26px; }
.landing-cta { padding:12px 30px; font-size:.98rem; }
.landing-hint {
    display:flex; align-items:center; gap:12px; text-align:start;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
    padding:14px 16px; margin:30px 0 0; color:var(--muted); font-size:.88rem;
    box-shadow:var(--shadow-sm);
}
.landing-hint .ic { color:var(--purple); flex:0 0 auto; }
.landing-hint strong { display:block; color:var(--ink); font-size:.9rem; }
.landing-note {
    margin-top:14px; font-size:.76rem; color:var(--gold-ink);
    background:var(--gold-soft); border-radius:20px; padding:7px 16px; display:inline-block;
}

/* ══ Customer menu (QR) ════════════════════════════════════════════ */
/* Warmer than the admin canvas — this screen sits next to the food. */
body:has(.cart-bar) { background:#FDF9F2; padding-bottom:84px; }

.ord-bar {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:transparent; border:none; padding:4px 2px 12px;
}
.table-badge, .who-badge {
    display:inline-flex; align-items:center; gap:6px;
    font-size:.82rem; font-weight:700; color:var(--ink);
}
.who-badge { color:var(--muted); font-weight:600; }

.menu-search {
    display:flex; align-items:center; gap:10px;
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:11px 15px; margin-bottom:14px; box-shadow:var(--shadow-sm);
}
.menu-search .ic { color:var(--muted); flex:0 0 auto; }
.menu-search input {
    flex:1; border:none; background:none; outline:none;
    font-family:inherit; font-size:.92rem; color:var(--ink); min-width:0;
}

.cat-tabs { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 14px; scrollbar-width:none; }
.cat-tabs::-webkit-scrollbar { display:none; }
.cat-tab {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    background:var(--surface); border:1px solid var(--line); color:var(--muted);
    border-radius:14px; padding:10px 14px; font-size:.74rem; font-weight:700;
    cursor:pointer; white-space:nowrap; font-family:inherit; transition:.16s;
}
.cat-tab .cat-emoji { font-size:1.2rem; line-height:1; }
.cat-tab:hover { border-color:var(--purple); color:var(--ink); }
.cat-tab.active { background:var(--gold-soft); border-color:var(--gold); color:var(--gold-ink); }

.items-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.item-card {
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:12px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
    transition:.18s;
}
.item-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.item-img { width:100%; height:168px; object-fit:cover; border-radius:12px; margin-bottom:11px; background:var(--surface-2); }
.item-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.item-name { font-weight:800; font-size:1rem; color:var(--ink); line-height:1.25; }
.item-price { color:var(--gold-ink); font-weight:800; white-space:nowrap; }
.item-desc { color:var(--muted); font-size:.83rem; margin-top:5px; line-height:1.5; }
.item-ingr { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.ingr-tag { background:var(--surface-2); color:var(--muted); border-radius:20px; padding:3px 9px; font-size:.7rem; }
.item-foot { display:flex; justify-content:flex-start; margin-top:auto; padding-top:12px; }

.add-btn {
    display:inline-flex; align-items:center; gap:6px;
    background:var(--purple); color:var(--on-accent); border:none;
    padding:9px 18px; border-radius:22px; font-weight:700; font-size:.85rem;
    cursor:pointer; font-family:inherit; transition:.16s;
}
.add-btn:hover { background:var(--lpurple); }

.stepper {
    display:inline-flex; align-items:center; gap:2px;
    border:1px solid var(--line); border-radius:22px; padding:3px; background:var(--surface);
}
.stepper button {
    width:32px; height:32px; border-radius:50%; border:none; background:var(--surface-2);
    color:var(--purple); cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:.14s;
}
.stepper button:hover { background:var(--purple-soft); }
.stepper span { min-width:30px; text-align:center; font-weight:800; color:var(--ink); }

/* Sticky cart bar — always reachable with a thumb. */
.cart-bar { position:fixed; inset-inline:0; bottom:0; z-index:150; padding:10px 14px 14px; pointer-events:none; }
.cart-bar-btn {
    pointer-events:auto; width:100%; max-width:640px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    background:var(--purple); color:var(--on-accent); border:none;
    border-radius:18px; padding:12px 16px; cursor:pointer; font-family:inherit;
    box-shadow:0 8px 26px rgba(91,62,150,.32); transition:.16s;
}
.cart-bar-btn:hover:not(:disabled) { background:#4B3080; }
.cart-bar.empty { opacity:0; transform:translateY(100%); transition:.22s; }
.cbb-open { display:inline-flex; align-items:center; gap:6px; background:var(--gold-soft); color:var(--gold-ink); border-radius:14px; padding:8px 14px; font-weight:800; font-size:.85rem; }
.cbb-sum { text-align:center; line-height:1.2; }
.cbb-sum strong { display:block; font-size:1.02rem; }
.cbb-sum small { font-size:.72rem; opacity:.85; }
.cbb-ic { position:relative; display:inline-flex; }
.cbb-count {
    position:absolute; inset-inline-end:-7px; top:-7px; min-width:19px; height:19px;
    border-radius:10px; background:var(--gold); color:var(--on-accent);
    font-size:.68rem; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 4px;
}

@media (max-width:520px) {
    .items-grid { grid-template-columns:1fr; }
    .item-img { height:148px; }
}

/* ══ Icon discipline ═══════════════════════════════════════════════ */
/* Icons that point somewhere have to point the other way in Arabic.
   Icons that carry meaning (check, trend) must NOT flip, so this is
   opt-in per usage rather than a blanket rule on .ic. */
[dir="rtl"] .ic-dir { transform:scaleX(-1); }

/* Category chips on the customer menu now carry a line icon. */
.cat-tab .ic { color:var(--purple); }
.cat-tab.active .ic { color:var(--gold-ink); }

/* ══ Admin: segmented tabs, filters, tables ════════════════════════ */
.adm-tabs {
    display:flex; gap:4px; flex-wrap:wrap; margin-bottom:20px;
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:5px; box-shadow:var(--shadow-sm); width:fit-content; max-width:100%;
}
.adm-tab {
    display:inline-flex; align-items:center; gap:8px;
    background:none; border:none; color:var(--muted);
    padding:9px 16px; border-radius:10px; font-size:.86rem; font-weight:700;
    font-family:inherit; cursor:pointer; transition:.16s; white-space:nowrap;
}
.adm-tab .ic { color:var(--muted); transition:.16s; }
.adm-tab:hover { background:var(--surface-2); color:var(--ink); }
.adm-tab:hover .ic { color:var(--purple); }
.adm-tab.active { background:var(--purple); color:var(--on-accent); }
.adm-tab.active .ic { color:var(--on-accent); }

/* Heading + actions on one line, used by every non-dashboard page. */
.page-head-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.page-head-row .page-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.btn-pz, .btn-pz-ghost, .btn-pz-danger { display:inline-flex; align-items:center; gap:8px; justify-content:center; }

/* Search field with the magnifier inside it, like the customer menu. */
.filter-search { position:relative; display:inline-flex; align-items:center; }
.filter-search > .ic { position:absolute; inset-inline-start:12px; color:var(--muted); pointer-events:none; }
.filter-search input { padding-inline-start:36px !important; }

.filter-bar select, .filter-bar input { transition:.16s; cursor:pointer; }
.filter-bar input { cursor:text; }
.filter-bar input[type=date] { color-scheme:light; }

/* A label with its icon inside a table cell / list row. */
.cell-ic { display:inline-flex; align-items:center; gap:7px; }
.cell-ic .ic { color:var(--muted); flex:0 0 auto; }
.data-table { font-variant-numeric:tabular-nums; }
.data-table thead th { position:sticky; top:0; z-index:2; }
.data-table tbody tr { transition:background .14s; }
.tot-foot .cell-ic .ic { color:var(--purple); }

.dz-title { display:inline-flex; align-items:center; gap:8px; }
.dz-title .ic { color:var(--red); }

/* Revenue period switch — same segmented language as the tabs. */
.period-tabs {
    display:inline-flex; gap:4px; margin-bottom:16px; padding:4px;
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
}
.ptab { background:none; border-radius:8px; padding:7px 18px; transition:.16s; font-family:inherit; }
.ptab:hover { background:var(--surface-2); color:var(--ink); }

/* ══ Panels reused by the staff screens ════════════════════════════ */
.panel-head .ic { color:var(--purple); flex:0 0 auto; }
.panel-head .panel-count {
    margin-inline-start:auto; background:var(--surface-2); color:var(--muted);
    border-radius:20px; padding:2px 11px; font-size:.78rem; font-weight:800;
}
.empty-state { display:flex; flex-direction:column; align-items:center; gap:10px; padding:38px 20px; color:var(--muted); text-align:center; }
.empty-state .ic { color:var(--line); }
.empty-state strong { color:var(--ink); font-weight:700; }

/* Board / cashier / floor headings pick up the shell language. */
.board-col-hd .ic { flex:0 0 auto; }
.worder-table, .worder-by, .worder-mod, .cash-sub, .fp-seats, .fp-hint, .qr-title {
    display:inline-flex; align-items:center; gap:6px;
}
.worder-mod, .worder-by { display:flex; }
.pay-m { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; transition:.16s; }
.pay-m:hover { border-color:var(--purple); color:var(--ink); }
.paid-ok { display:flex; flex-direction:column; align-items:center; gap:8px; }
.paid-ok .ic { color:inherit; }
.paid-ok.warn { color:var(--gold-ink); }
.fp-edit { display:inline-flex; align-items:center; justify-content:center; }

/* Placeholder thumbnails use the image icon, not a food emoji. */
.row-thumb-empty, .img-empty { color:var(--line); }
.row-thumb-empty .ic, .img-empty .ic { color:var(--muted); opacity:.55; }

.staff-locked { display:inline-flex; align-items:center; gap:5px; }
.branch-switch .ic, .branch-single .ic { color:var(--purple); flex:0 0 auto; }

/* Blazor's reconnect/error strip — an icon button, not a glyph. */
#blazor-error-ui .dismiss { display:inline-flex; align-items:center; }

/* ══ Customer menu: photo-beside-text card (matches the mockup) ════ */
@media (max-width:640px) {
    .items-grid { grid-template-columns:1fr; gap:0; }
    .item-card {
        display:grid; grid-template-columns:minmax(0,1fr) 132px; gap:14px;
        border:none; border-bottom:1px solid var(--line); border-radius:0;
        box-shadow:none; padding:16px 2px; align-items:start;
    }
    .item-card:hover { box-shadow:none; transform:none; }
    .item-card .item-img { grid-column:2; grid-row:1 / span 4; height:132px; margin:0; border-radius:14px; }
    .item-card > :not(.item-img) { grid-column:1; }
    /* A dish with no photo gets the whole row — an empty photo column reads as broken. */
    .item-card.no-img { grid-template-columns:minmax(0,1fr); }
    .item-top { flex-direction:column; align-items:flex-start; gap:6px; }
    .item-price { font-size:1.05rem; }
    .item-foot { padding-top:10px; }
}

/* Narrow screens: let a list row's actions drop to their own line instead of
   squeezing the name until it clips. */
@media (max-width:620px) {
    .adm-row, .staff-row { flex-wrap:wrap; }
    .adm-row-info { flex:1 1 55%; min-width:0; }
    .adm-actions { flex:1 1 100%; justify-content:flex-end; }
    .adm-price { text-align:start; }
    .adm-toolbar { gap:8px; }
    .page-head h1 { font-size:1.45rem; }
    .adm-tabs { width:100%; }
    .adm-tab { flex:1 1 auto; justify-content:center; }
}

/* ══ Settlement (split payments) ════════════════════════════════════════ */
/* Paid vs left-to-pay, so the cashier reads the number that matters first. */
.settle-strip {
    display:grid; grid-template-columns:1fr 1fr; gap:0; margin:14px 0 4px;
    background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
    overflow:hidden;
}
.settle-strip > div { padding:11px 14px; text-align:center; }
.settle-strip > div + div { border-inline-start:1px solid var(--line); }
.settle-strip span { display:block; font-size:.74rem; color:var(--muted); font-weight:600; }
.settle-strip strong { display:block; font-size:1.05rem; color:var(--ink); margin-top:3px; }
.settle-rest { background:var(--gold-soft); }
.settle-rest strong { color:var(--gold-ink); }

/* ── Split the bill (guest) ──────────────────────────────────────────── */
.split-opt {
    display:flex; align-items:center; gap:14px; width:100%; text-align:start;
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:14px 16px; margin-bottom:10px; cursor:pointer; font-family:inherit;
    color:var(--ink); transition:.16s;
}
.split-opt:hover { border-color:var(--purple); box-shadow:var(--shadow-sm); }
.split-opt > .ic:first-child { color:var(--purple); }
.split-opt > .ic:last-child { margin-inline-start:auto; color:var(--muted); }
.split-opt span { display:flex; flex-direction:column; gap:2px; font-size:.8rem; color:var(--muted); }
.split-opt strong { font-size:.95rem; color:var(--ink); }

.split-or { display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--muted); font-size:.78rem; font-weight:700; }
.split-or::before, .split-or::after { content:""; flex:1; height:1px; background:var(--line); }

.claim-row {
    display:flex; align-items:center; gap:12px;
    padding:12px 2px; border-bottom:1px solid var(--line);
}
.claim-row:last-child { border-bottom:none; }
.claim-row.taken { opacity:.45; }
.claim-info { flex:1; min-width:0; }
.claim-name { font-weight:700; color:var(--ink); font-size:.92rem; }
.claim-sub { font-size:.76rem; color:var(--muted); margin-top:2px; }
.claim-row .stepper button:disabled { opacity:.35; cursor:not-allowed; }

/* Your declared share, sitting on the bill waiting for the cashier. */
.my-share {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-top:12px; padding:14px 16px; border-radius:var(--r);
    background:var(--purple-soft); border:1px solid var(--purple);
}
.ms-label { font-size:.76rem; color:var(--muted); font-weight:600; }
.ms-amt { font-size:1.25rem; font-weight:800; color:var(--purple); }
.ms-hint { font-size:.74rem; color:var(--muted); margin-top:2px; }

/* Cashier: a share a guest declared, ready to collect. */
.share-row {
    display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:8px;
    background:var(--purple-soft); border:1px solid var(--line); border-radius:10px;
}
.share-row .share-amt { font-weight:800; color:var(--purple); margin-inline-start:auto; }

/* ── Online payment (status + test gateway) ─────────────────────────── */
.ms-actions { display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.ms-actions .btn-sm { white-space:nowrap; }

.pay-status { max-width:520px; margin:0 auto; padding:32px 18px 40px; }
.pay-result {
    display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
    background:var(--surface); border:1px solid var(--line); border-radius:16px;
    padding:34px 22px; box-shadow:var(--shadow-sm); margin-bottom:16px;
}
.pay-result h2 { font-size:1.3rem; margin:4px 0 0; }
.pay-result p { color:var(--muted); font-size:.88rem; margin:0; }
.pay-result.ok .ic { color:var(--green); }
.pay-result.ok h2 { color:var(--green); }
.pay-result.pending .ic { color:var(--gold); }
.pay-result.failed .ic { color:var(--red); }
.pay-result.failed h2 { color:var(--red); }
.pay-amt { font-size:1.6rem; font-weight:800; color:var(--ink); }

.fake-gw {
    background:var(--surface); border:1px dashed var(--gold); border-radius:16px;
    padding:24px 20px; text-align:center; display:flex; flex-direction:column; gap:10px;
}
.fake-gw-tag {
    background:var(--gold-soft); color:var(--gold-ink); border-radius:20px;
    padding:5px 14px; font-size:.72rem; font-weight:800; align-self:center;
}
.fake-gw-ref { font-size:.68rem; color:var(--muted); word-break:break-all; margin-bottom:6px; }
.fake-gw .section-label { margin-top:14px; }

/* Refunded transactions: the gross is struck through, the net stands. */
.tx-refunded { text-decoration:line-through; color:var(--muted); font-weight:600; margin-inline-end:6px; }