/* Ctrl + Eat - shared stylesheet (customer menu, cashier, kitchen, admin) */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
    /* Brand color system: Deep Black #17191A, Lime Green #A8F000, White #FFFFFF */
    --brand: #17191a;
    --brand-dark: #000000;
    --accent: #a8f000;        /* lime accent */
    --accent-light: #c6ff4d;
    --accent-text: #5f8f00;   /* darker lime, readable on white */
    --bg: #f5f7f2;
    --card-bg: #ffffff;
    --text: #17191a;
    --muted: #6b7068;
    --border: #e1e6dc;
    --success: #3f9a1f;
    --warning: #d89a12;
    --danger: #c9302c;
    --radius: 12px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding-bottom: 44px; /* clears the fixed .site-footer on every page */
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 14px 110px; /* room for the floating cart button + fixed footer */
}

.wide-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 40px;
}

/* ---------- header ---------- */
.site-header {
    background: var(--brand);
    color: #fff;
    padding: 16px 14px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 20;
}

.site-header .logo {
    height: 64px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
    margin-inline-end: 8px;
}

.site-header h1 {
    margin: 0;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.site-header .table-label {
    font-size: 13px;
    opacity: .85;
    margin-top: 2px;
}

/* ---------- category tabs ---------- */
.category-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 0;
    position: sticky;
    /* Fallback for before JS measures the real header height (see menu.js) */
    top: 96px;
    background: var(--bg);
    z-index: 15;
    scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }

.category-tabs a {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

.category-tabs a.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* ---------- product list ---------- */
.category-section h2 {
    font-size: 17px;
    margin: 22px 0 10px;
    border-bottom: 2px solid var(--accent);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
}

.category-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
}

.product-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 10px;
}

.product-card img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    background: #eee;
    flex-shrink: 0;
}

.product-card .no-image {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #eee;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #bbb;
}

.product-info { flex: 1; min-width: 0; }
.product-info .name { font-weight: 600; font-size: 15px; }
.product-info .name-sub { font-size: 12px; color: var(--muted); }
.product-info .price { color: var(--accent-text); font-weight: 700; margin-top: 2px; }

.qty-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.qty-stepper button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.qty-stepper button.primary {
    background: var(--accent);
    color: var(--brand);
    border-color: var(--accent);
}

.qty-stepper .qty-value {
    min-width: 18px;
    text-align: center;
    font-weight: 600;
}

/* ---------- floating cart button ---------- */
.cart-fab {
    position: fixed;
    bottom: 42px; /* sits just above the fixed .site-footer */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 28px);
    max-width: 690px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 14px 18px;
    display: none;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    z-index: 30;
    text-decoration: none;
}
.cart-fab.visible { display: flex; }

/* ---------- buttons/forms ---------- */
.btn {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.btn:hover { background: var(--accent); color: var(--brand); }
.btn.secondary { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn.danger { background: var(--danger); }
.btn.success { background: var(--success); }
.btn.block { display: block; width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 15px;
    font-family: inherit;
}

.login-box {
    max-width: 360px;
    margin: 60px auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 26px;
}
.login-box h1 { text-align: center; font-size: 20px; margin-bottom: 20px; }
.login-box .logo {
    display: block;
    width: 160px;
    height: auto;
    object-fit: contain;
    margin: 0 auto 16px;
}

/* ---------- site footer credit (fixed at the bottom of the viewport) ---------- */
.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    text-align: center;
    padding: 8px 14px;
    font-size: 12px;
    color: var(--muted);
    z-index: 25;
}
.site-footer a {
    color: var(--accent-text);
    text-decoration: none;
    font-weight: 600;
}
.site-footer a:hover { text-decoration: underline; }

.alert {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 14px;
}
.alert.error { background: #fdecea; color: var(--danger); border: 1px solid #f5c2bd; }
.alert.success { background: #eaf6ec; color: var(--success); border: 1px solid #c3e6c9; }

/* ---------- cart / order review ---------- */
.cart-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.cart-line .line-name { font-weight: 600; }
.cart-totals {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 2px solid var(--text);
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 700;
}

/* ---------- status badges ---------- */
.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}
.status-pending   { background: var(--warning); }
.status-preparing { background: #2b6fb3; }
.status-ready     { background: var(--success); }
.status-served    { background: #6b6258; }
.status-cancelled { background: var(--danger); }

/* ---------- staff dashboards (cashier / kitchen) ---------- */
.board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--brand);
    color: #fff;
}
.board-header h1 {
    margin: 0;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
}
.board-header .logo {
    height: 36px;
    width: auto;
    object-fit: contain;
    margin-inline-end: 8px;
}
.board-header .actions a, .board-header .actions button {
    color: #fff;
    background: rgba(255,255,255,.15);
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}

.order-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    padding: 18px;
}

.order-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.order-card .order-title {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 4px;
}
.order-card .order-time { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.order-card ul { list-style: none; padding: 0; margin: 0 0 12px; }
.order-card li { font-size: 15px; padding: 3px 0; display: flex; justify-content: space-between; }
.order-card li .qty { font-weight: 700; }
.order-card .card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.order-card .card-actions .btn { flex: 1; padding: 9px 8px; font-size: 14px; }

.order-card.new-flash { animation: flash 1s ease-in-out 2; }
@keyframes flash {
    0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.05); }
    50% { box-shadow: 0 0 0 4px rgba(172,127,59,.5); }
}

/* ---------- cashier: compact table chips + detail modal ---------- */
.table-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 4px 18px 18px;
}
.table-chip {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    cursor: pointer;
    text-align: center;
    transition: transform .1s, box-shadow .1s;
}
.table-chip:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.table-chip .chip-table { font-weight: 800; font-size: 16px; }
.table-chip .chip-count { font-size: 12px; color: var(--muted); margin: 4px 0; }
.table-chip .chip-total { font-weight: 700; color: var(--accent-text); }
.table-chip.has-pending { border-color: var(--warning); box-shadow: 0 0 0 2px rgba(201,138,26,.3); }

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 100;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 30px 14px;
}
.modal-overlay.visible { display: flex; }
.modal-box {
    background: var(--bg);
    border-radius: var(--radius);
    max-width: 560px;
    width: 100%;
    padding: 18px;
    position: relative;
}
.modal-box h2 { margin-top: 0; }
.modal-close {
    position: absolute;
    top: 8px;
    left: 8px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
}
.modal-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    margin-top: 12px;
}
.modal-section h3 { margin: 0 0 8px; font-size: 14px; }
.modal-section .inline-form { display: flex; gap: 6px; }
.modal-section .inline-form input,
.modal-section .inline-form select { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid var(--border); }
.pay-summary { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.pay-summary .remaining { font-weight: 800; color: var(--danger); }

/* ---------- admin tables ---------- */
/* when a table was opened - on its chip and at the top of its modal */
.table-chip .chip-time { font-size: 12px; color: var(--muted); margin-top: 2px; }
.modal-opened { font-size: 13px; color: var(--muted); margin: -6px 0 10px; }

/* drawer-expense grid: a small spreadsheet the cashier types the items into */
.exp-grid { width: 100%; border-collapse: collapse; margin-top: 10px; }
.exp-grid th, .exp-grid td { padding: 4px; border-bottom: 1px solid var(--border); text-align: start; }
.exp-grid th { background: #eef5e0; font-size: 12px; padding: 6px 4px; }
.exp-grid input { width: 100%; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 14px; box-sizing: border-box; }
.exp-grid td.num { width: 21%; min-width: 74px; }
.exp-grid td.tot { width: 20%; min-width: 68px; font-weight: 800; white-space: nowrap; }
.exp-grid td.del { width: 32px; }
.exp-grid .row-del { background: none; border: 0; color: var(--danger); font-size: 17px; line-height: 1; cursor: pointer; padding: 4px; }
.exp-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 800; font-size: 15px; margin-top: 10px; padding-top: 8px; border-top: 2px solid var(--border); }

.data-table { width: 100%; border-collapse: collapse; background: var(--card-bg); border-radius: var(--radius); }
.data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: start; font-size: 14px; }
/* Column headings stay put while a long table scrolls under them. The table
   must NOT sit in an overflow container or sticky stops working, which is why
   the rounded corners come from the corner cells instead of clipping. */
.data-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eef5e0;
    box-shadow: inset 0 -1px 0 var(--border);   /* a collapsed border would scroll away */
}
.data-table thead th:first-child { border-start-start-radius: var(--radius); }
.data-table thead th:last-child  { border-start-end-radius: var(--radius); }
.data-table tbody tr:last-child td:first-child { border-end-start-radius: var(--radius); }
.data-table tbody tr:last-child td:last-child  { border-end-end-radius: var(--radius); }
.data-table img.thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }

.topnav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid var(--border);
}
.topnav .logo {
    width: auto;
    height: 36px;
    object-fit: contain;
    margin-inline-end: 8px;
}
/* fullscreen toggle - inherits the header styling it sits in */
.fs-toggle { font-family: inherit; cursor: pointer; }
.topnav .fs-toggle {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
}
.topnav a {
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    color: var(--text);
}
.topnav a.active, .topnav a:hover { background: var(--bg); }

.page-actions { padding: 16px; display: flex; justify-content: space-between; align-items: center; }
.card-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin: 0 16px 16px; }

@media print {
    .no-print { display: none !important; }
}

.qr-print-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 20px;
}
.qr-print-cell {
    text-align: center;
    border: 1px dashed #999;
    padding: 16px;
    border-radius: 8px;
}
.qr-print-cell .table-num { font-size: 18px; font-weight: 800; margin-top: 8px; }

/* ---------- register shift bar (cashier) ---------- */
.shift-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 12px 18px 0;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: #eef9d6;
    border: 1px solid var(--accent);
    font-size: 14px;
}
.shift-bar.no-shift {
    background: #fdecea;
    border-color: #f5c2bd;
}
.shift-bar .shift-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.shift-bar .shift-stat { color: var(--muted); }
.shift-bar .shift-stat b { color: var(--text); }
.shift-bar .shift-actions { display: flex; gap: 8px; }
.shift-bar .shift-actions .btn { padding: 8px 14px; font-size: 14px; }

/* ---------- stat grid (shift / day reports, admin dashboard) ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 12px 0;
}
.stat-box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
}
.stat-box .stat-label { font-size: 12px; color: var(--muted); }
.stat-box .stat-value { font-size: 20px; font-weight: 800; margin-top: 2px; }
.stat-box.accent { border-color: var(--accent); background: #f6fde6; }
.diff-positive { color: var(--success); }
.diff-negative { color: var(--danger); }

@media print {
    .shift-bar, .no-print { display: none !important; }
    body { background: #fff; padding-bottom: 0; }
    .site-footer { display: none; }
}

/* ---------- online ordering: order-type chooser + checkout ---------- */
.order-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.order-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 10px;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    cursor: pointer;
    transition: all .15s ease;
    color: var(--text);
}
.order-type-card:hover, .order-type-card.selected {
    border-color: var(--brand);
    box-shadow: 4px 4px 0 var(--accent);
    transform: translate(-1px, -1px);
}
.order-type-card .ot-icon { font-size: 34px; }
.order-type-card .ot-label { font-weight: 800; font-size: 17px; }
.order-type-card .ot-hint { font-size: 12px; color: var(--muted); }

.checkout-box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
}
.pay-method {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: #f6fde6;
    border: 1.5px solid var(--accent);
    margin-top: 4px;
}
.pay-method > span { font-size: 26px; }

/* order-type pill shown to staff */
.type-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--brand);
    color: var(--accent);
    vertical-align: middle;
}
.customer-box {
    background: #f6fde6;
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    margin-top: 8px;
    line-height: 1.7;
}
.customer-box a { color: inherit; font-weight: 700; }
.table-chip.is-online { border-style: dashed; }
.table-chip.is-online .chip-table { font-size: 15px; }

/* waiter table picker */
.table-chip.is-open { border-color: var(--success); background: #eef9d6; }
.waiter-bar {
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    padding: 6px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.waiter-bar a { color: var(--accent); font-weight: 700; text-decoration: none; }

/* menu search */
.menu-search { padding: 10px 14px 0; }
.menu-search input {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    background: var(--card-bg);
}
.menu-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(168,240,0,.25); }

/* cashier "new order" toolbar */
.new-order-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 12px 18px 0; padding: 10px 14px;
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.new-order-bar .nob-title { font-weight: 800; }
.new-order-bar .btn { padding: 8px 14px; font-size: 14px; }
.new-order-bar select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; }
.table-chip .chip-ready { margin-top: 4px; font-size: 12px; font-weight: 800; color: #fff; background: var(--success); border-radius: 999px; padding: 2px 8px; display: inline-block; }
.item-remove { background: none; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; padding: 2px 6px; margin-inline-start: 6px; font-size: 13px; }
.item-remove:hover { border-color: var(--danger); background: #fdecea; }

/* staff: current orders on this table (above the menu) */
.table-orders { margin-top: 10px; background: var(--card-bg); border: 1.5px solid var(--accent); border-radius: var(--radius); padding: 10px 12px; }
.table-orders .to-head { font-weight: 800; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.table-orders .to-count { background: var(--brand); color: var(--accent); border-radius: 999px; padding: 0 8px; font-size: 12px; }
.table-orders .to-order { border-top: 1px dashed var(--border); padding: 6px 0; font-size: 13px; }
.table-orders .to-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; }
.table-orders .to-time { color: var(--muted); font-weight: 400; font-size: 12px; }
.table-orders .to-cancel { margin-inline-start: auto; background: none; border: 1px solid var(--danger); color: var(--danger); border-radius: 6px; padding: 2px 8px; font-family: inherit; font-size: 12px; cursor: pointer; }
.table-orders .to-items { color: var(--text); margin-top: 2px; }
.table-orders .to-notes { color: #8a5a1a; font-size: 12px; }
.table-orders .to-total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; text-align: end; font-size: 14px; }
.table-orders .status-badge { font-size: 11px; padding: 2px 8px; }

/* live-orders icon in the customer menu header */
.site-header { position: sticky; }
.site-header .orders-icon {
    position: absolute; top: 14px; inset-inline-start: 14px;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.35);
    display: grid; place-items: center; font-size: 20px; text-decoration: none; color: #fff;
}
.site-header .orders-icon.has-orders { background: var(--accent); border-color: var(--accent); }
.site-header .orders-icon .oi-count {
    position: absolute; top: -6px; inset-inline-end: -6px;
    background: var(--danger); color: #fff; font-size: 11px; font-weight: 800;
    min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px;
}

/* ---- size / bread chooser on the customer menu ---- */
.product-card .btn.pick-options { padding: 8px 14px; font-size: 14px; white-space: nowrap; }
.option-sheet {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.option-sheet[hidden] { display: none !important; }
.option-box {
    background: var(--bg);
    width: 100%;
    max-width: 480px;
    border-radius: 18px 18px 0 0;
    padding: 18px 16px 20px;
    position: relative;
    max-height: 88vh;
    overflow-y: auto;
}
.option-box h3 { margin: 0 0 14px; font-size: 18px; padding-inline-end: 28px; }
.option-close {
    position: absolute; top: 10px; left: 12px;
    background: none; border: 0; font-size: 26px; line-height: 1;
    color: var(--muted); cursor: pointer;
}
.option-group { margin-bottom: 14px; }
.option-label { font-size: 14px; font-weight: 800; margin-bottom: 6px; }
.option-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.option-choices label { flex: 1 1 110px; cursor: pointer; }
.option-choices input { position: absolute; opacity: 0; pointer-events: none; }
.option-choices span {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    border: 2px solid var(--border); border-radius: 12px;
    padding: 10px 8px; font-size: 15px; font-weight: 700;
    background: var(--card-bg); text-align: center;
}
.option-choices span small { font-size: 12px; font-weight: 600; color: var(--muted); }
.option-choices input:checked + span { border-color: var(--brand); background: var(--accent); color: var(--brand); }
.option-choices input:checked + span small { color: var(--brand); }
.option-qty { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 12px; font-weight: 800; }

/* ---------------------------------------------------------------
   Narrow screens: the report tables carry 13-17 columns, which used to
   stretch the whole page wider than the phone and leave a white strip
   down the side. Let each table scroll on its own instead. Sticky
   headings only work when the table is NOT inside a scroll container,
   so they're a desktop-only nicety.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        border-radius: var(--radius);
    }
    .data-table th { position: static; }
    .data-table th, .data-table td { padding: 9px 10px; }

    /* nothing else may push the page wider than the screen */
    .wide-container, .container { max-width: 100%; }
    img, table, pre { max-width: 100%; }
}

@media (max-width: 600px) {
    .topnav { gap: 2px; padding: 8px 10px; }
    .topnav a { padding: 7px 9px; font-size: 13px; }
    .topnav .logo { height: 28px; }
    .board-header { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
    .board-header h1 { font-size: 15px; }
    .wide-container, .container { padding-inline: 10px; }
    h1 { font-size: 20px; }
    .stat-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* day chips in the product availability grid */
.day-picks { display: flex; gap: 4px; flex-wrap: wrap; }
.day-pick { cursor: pointer; }
.day-pick input { position: absolute; opacity: 0; pointer-events: none; }
.day-pick span { display: inline-block; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; background: #fff; }
.day-pick input:checked + span { background: var(--accent); border-color: var(--brand); color: var(--brand); font-weight: 800; }

/* cashier board filter tabs - keeps today's work apart from stale bills */
.board-filters { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 18px 0; }
.board-filters .bf {
    background: #fff; border: 1px solid var(--border); border-radius: 999px;
    padding: 7px 14px; font-family: inherit; font-size: 14px; font-weight: 700;
    color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.board-filters .bf .bf-n {
    background: var(--border); color: var(--text); border-radius: 999px;
    padding: 0 7px; font-size: 12px; font-weight: 800; min-width: 18px; text-align: center;
}
.board-filters .bf.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.board-filters .bf.active .bf-n { background: var(--accent); color: var(--brand); }
.board-filters .bf.warn { border-color: #e0b250; background: #fff6e0; }
.board-filters .bf.warn.active { background: var(--brand); border-color: var(--brand); }
.table-chip.is-old { border-color: #e0b250; background: #fffaf0; }

/* "serving time is over" prompt on the cashier board */
.closure-note {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    background: #fff6e0; border: 2px solid #e0b250; border-radius: var(--radius);
    margin: 10px 18px 0; padding: 12px 14px;
}
.closure-note .cn-text { flex: 1 1 260px; font-size: 15px; line-height: 1.6; }
.closure-note .cn-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.closure-note .cn-actions .btn { padding: 9px 14px; font-size: 14px; }

/* scheduled-group control on the cashier board */
.group-bar { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 18px 0; }
.group-bar .gb-item {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 9px 14px;
}
.group-bar .gb-item.off { background: #f4f4f4; border-color: #d6d6d6; }
.group-bar .gb-info { font-size: 14px; line-height: 1.5; }
.group-bar .gb-sub { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.group-bar .btn { padding: 7px 12px; font-size: 13px; }

/* doorway to a partner brand's menu on shared tables (separate bill) */
.partner-link {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: var(--brand); color: #fff; text-decoration: none;
    border-radius: var(--radius); padding: 14px 16px; font-weight: 800; font-size: 17px;
    border: 2px solid var(--accent);
}
.partner-link small { font-weight: 600; font-size: 12px; opacity: .75; }
.partner-link:active { transform: scale(.99); }