/* =====================================================================
   Project Food — shared components (design-system reskin)
   Built ONLY from tokens.css variables — never a hardcoded colour here.
   As each screen converts, its old competing rules in admin.css/menu.css/
   menu-builder.css are deleted (not just overridden), so there is exactly
   one definition of each shared pattern once the reskin is complete.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Sidebar nav (admin)
   --------------------------------------------------------------------- */
.sidebar-nav {
    position: fixed;
    inset: 0 auto 0 0;
    width: 240px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    z-index: 60;
}
.sidebar-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-6) var(--space-6) var(--space-5);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    flex-shrink: 0;
}
.sidebar-brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
}
.sidebar-brand-accent { color: var(--brand-color); margin-left: 4px; }
.sidebar-brand-powered {
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-faint);
}

/* Server app / Till POS (Phase 35C/37B) — always-visible quick links, one
   click away from the sidebar brand rather than nested inside the
   collapsible Sales group, since they're separate apps staff jump to
   constantly during service. */
.sidebar-quick-links {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.sidebar-quick-link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-control);
    background: var(--canvas);
    color: var(--ink-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.sidebar-quick-link:hover,
.sidebar-quick-link.is-active { background: var(--brand-color-soft); color: var(--brand-color); }
.sidebar-quick-link .icon { width: 16px; height: 16px; flex-shrink: 0; }

/* This is the ONLY part of the sidebar that scrolls (min-height: 0 lets a
   flex child shrink below its content size so overflow-y actually kicks
   in) — the brand header above and the Help/profile/Logout footer below
   stay pinned on screen no matter how many groups are added here. */
.sidebar-groups { padding: var(--space-4) var(--space-4); flex: 1; min-height: 0; overflow-y: auto; }
.sidebar-group { margin-bottom: var(--space-5); }
/* Groups living outside .sidebar-groups (Help, My profile) don't inherit
   its container padding, so they need the same horizontal inset applied
   directly to line up with Orders/Analytics/etc. */
.sidebar-nav > .sidebar-group { padding: 0 var(--space-4); }
.sidebar-group-label {
    display: inline-block;
    margin: 0 var(--space-4) var(--space-2);
    padding-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    border-bottom: 2px solid var(--border);
}
/* Other Services cross-sell group (Phase 41) — collapsed by default,
   always present (not dismissible), same nav vocabulary as every other
   sidebar group otherwise. */
.sidebar-group-collapsible > summary.sidebar-group-label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    list-style: none;
}
.sidebar-group-collapsible > summary.sidebar-group-label::-webkit-details-marker { display: none; }
.sidebar-group-collapsible > summary .icon { width: 12px; height: 12px; transition: transform .15s ease; }
.sidebar-group-collapsible[open] > summary .icon { transform: rotate(90deg); }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1px 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.sidebar-link:hover { background: var(--canvas); color: var(--ink); }
.sidebar-link.is-active { background: var(--brand-color-soft); color: var(--brand-color); }
.sidebar-link .icon { width: 18px; height: 18px; flex-shrink: 0; }
/* "Opens in a new tab" marker (Server app, Till POS) — trails the label,
   smaller and lower-emphasis than the leading nav icon. */
.sidebar-link .icon-external-link { width: 13px; height: 13px; margin-left: -4px; opacity: .6; }

/* Pinned footer (Help/My profile, just above): sits below the scrollable
   .sidebar-groups, never inside it, so Logout stays reachable in one
   click no matter how far a long nav has been scrolled. */
.sidebar-nav > .sidebar-group-profile {
    flex-shrink: 0;
    padding-top: var(--space-4);
    margin-bottom: 0;
    border-top: 1px solid var(--border);
}
.sidebar-version { margin: 0; padding: 0 var(--space-4) var(--space-4); font-size: 11px; font-family: monospace; color: var(--ink-faint); text-align: center; flex-shrink: 0; }

/* Help + Logout share one compact row instead of two stacked full-width
   elements — less visually heavy under the My Account group. */
.sidebar-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.sidebar-help-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-muted);
    text-decoration: none;
}
.sidebar-help-link:hover, .sidebar-help-link[aria-current="page"] { color: var(--ink); }
.sidebar-help-link .icon { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-logout-form { margin: 0; }
.sidebar-logout-btn {
    font: inherit;
    font-size: 13px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--ink-muted);
    cursor: pointer;
}
.sidebar-logout-btn:hover { background: var(--canvas); color: var(--ink); }

.mobile-topbar { display: none; }
.nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    color: var(--ink);
    border-radius: var(--radius-control);
    padding: 4px 11px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 900px) {
    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 60;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        padding: 8px var(--space-6);
    }
    .mobile-topbar-brand { display: flex; flex-direction: column; gap: 1px; }
    .mobile-topbar-name { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
    .nav-burger { display: inline-flex; }
    .sidebar-nav {
        top: 49px;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 2px 0 12px rgba(22, 24, 21, 0.12);
    }
    .sidebar-nav.open { transform: translateX(0); }
    .admin-main { margin-left: 0 !important; }
}

/* ---------------------------------------------------------------------
   Content area (wraps every admin screen's page body)
   --------------------------------------------------------------------- */
.admin-main {
    box-sizing: border-box;
    min-height: 100vh;
    margin-left: 240px;
    max-width: 1320px;
    padding: var(--space-8) var(--space-8) var(--space-9);
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-body);
}
.admin-main h1 {
    margin: 0 0 var(--space-6);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
}
.admin-main h2 {
    margin: var(--space-8) 0 var(--space-4);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}
.muted { color: var(--ink-muted); }

@media (max-width: 640px) {
    .admin-main { padding: var(--space-5) var(--space-5) var(--space-8); }
}

/* ---------------------------------------------------------------------
   Sub-navigation tabs (within a single sidebar item — e.g. Settings'
   General/Ordering hours/Account split, Phase 12C). Sits directly under
   the page <h1>. Uses the same brand-color active convention as
   .sidebar-link.is-active, just laid out horizontally with an
   underline instead of a filled background.
   --------------------------------------------------------------------- */
.subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin: 0 0 var(--space-8);
    border-bottom: 1px solid var(--border);
}
.subtabs a {
    padding: 0 0 var(--space-4);
    margin-bottom: -1px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.subtabs a:hover { color: var(--ink); }
.subtabs a.is-active { color: var(--brand-color); border-bottom-color: var(--brand-color); font-weight: 600; }

/* ---------------------------------------------------------------------
   Card panel
   --------------------------------------------------------------------- */
.panel {
    margin: 0 0 var(--space-6);
    padding: var(--space-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.menu-card-head { font-weight: 600; margin-bottom: var(--space-4); }
.menu-card-note { font-size: 12px; font-weight: 400; color: var(--ink-muted); margin-left: 4px; }
.menu-card-sub { font-size: 13px; margin: 0 0 var(--space-4); }

/* A secondary action button that isn't quite .btn-secondary — used for
   per-row/per-card status actions (order status advance, card on file). */
.status-btn {
    font: inherit;
    padding: 8px 14px;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--ink);
}
.status-btn:hover { background: var(--canvas); }
.status-btn.status-cancelled { color: var(--rust); border-color: var(--rust); }
.status-btn.is-current { opacity: 0.5; cursor: default; }

/* ---------------------------------------------------------------------
   Data table
   --------------------------------------------------------------------- */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: 100%; margin: 0; }

.data-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 13.5px; }
.data-table th, .data-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
/* Users table mixes selects, links and plain text in the same row —
   top-alignment exaggerates their differing inline heights, so this one
   centers instead (other tables keep top-align for wrapped/multi-line cells). */
.users-table td { vertical-align: middle; }

.data-table th {
    background: var(--surface-sunken);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.data-table td.num, .data-table th.num { text-align: right; }
.data-table td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.data-table tbody tr:hover { background: var(--surface-hover); }
/* A bare <select> (e.g. role picker) defaults to native OS chrome, which
   renders taller than the plain text of the "no dropdown here" rows next
   to it — throwing off row height and the divider-line rhythm down the
   table. Match it to a single line of table text instead. */
.data-table select {
    font: inherit;
    font-size: 13.5px;
    line-height: 1.4;
    min-width: 100px;
    padding: 2px 24px 2px 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--ink);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7268' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
}
.data-table .empty-row td { text-align: center; padding: var(--space-8); color: var(--ink-muted); }

/* ---------------------------------------------------------------------
   Badges / status pills — Discount Codes' own status vocabulary
   (active/scheduled/expired/limit_reached/disabled), unrelated to order
   lifecycle. Order-status badges moved to nv_status_badge()/.nv-badge
   (nv-core.css) in Phase 13C — see orders.php, order-detail.php,
   admin-orders.js.
   --------------------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
}
.badge.status-warn { background: var(--amber-soft); color: var(--amber); }
.badge.status-ok   { background: var(--brand-color-soft); color: var(--brand-color); }
.badge.status-off  { background: var(--canvas); color: var(--ink-faint); border-color: var(--border); }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn-primary, button.primary {
    font: inherit;
    padding: 9px 16px;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--brand-color);
    color: var(--brand-color-contrast);
    font-weight: 600;
    cursor: pointer;
}
.btn-primary:hover, button.primary:hover { background: color-mix(in srgb, var(--brand-color) 85%, black); }
.btn-secondary {
    display: inline-block;
    font: inherit;
    padding: 8px 15px;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.btn-secondary[hidden] { display: none; }
.btn-secondary:hover { background: var(--canvas); }
.link {
    background: none; border: 0; padding: 0;
    font: inherit; color: var(--brand-color); text-decoration: underline; cursor: pointer;
}
.link-danger {
    background: none; border: 0; padding: 0;
    font: inherit; color: var(--rust); text-decoration: underline; cursor: pointer;
}
.inline-form { display: inline-block; margin: 0 6px 0 0; }
/* .col-action is a plain <td> — deliberately NOT display:flex. That
   would take it out of normal table-cell sizing (percentage heights don't
   rescue it either, since it stops being a table-cell box once its own
   display is flex), so it'd stop honouring vertical-align and sit at its
   own shorter content height instead of the row's, throwing the action
   link/button out of line with the rest of the row. Multi-action cells
   (e.g. orders.php) get their flex/gap layout from the .row-actions
   wrapper below instead, nested inside this plain cell. */
.col-action { }
.row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   Form layout helpers + form controls inside a .panel
   --------------------------------------------------------------------- */
/* align-items: start (not end) — several rows pair a field that has a
   trailing hint/error line with siblings that don't; end-alignment would
   bottom-align the whole label+input+hint block, shoving the shorter
   siblings' inputs down out of line with the tall one's input. Top-aligning
   keeps every input on the same row regardless of what follows it. */
.field-row { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: start; }
.field-row label { margin-bottom: 0; }
.switch { display: flex; align-items: center; gap: var(--space-4); }
.switch input { width: auto; margin: 0; }

.panel label { display: block; margin: 0 0 var(--space-5); font-size: 13px; color: var(--ink-muted); }
.panel input[type="text"],
.panel input[type="number"],
.panel input[type="time"],
.panel input[type="date"],
.panel input[type="file"],
.panel input[type="email"],
.panel input[type="tel"],
.panel input[type="url"],
.panel input[type="password"],
.panel input[type="search"],
.panel select,
.panel textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 360px;
    min-height: 34px;
    margin-top: 3px;
    padding: 7px 9px;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
}
.panel textarea { max-width: 520px; resize: vertical; }
/* Native select: strip OS chrome and draw our own chevron so it renders
   identically to the text inputs above (same pattern as menu.css .field select). */
.panel select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7268' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
}

@media (max-width: 640px) {
    .panel input[type="text"],
    .panel input[type="number"],
    .panel input[type="time"],
    .panel input[type="date"],
    .panel input[type="email"],
    .panel input[type="tel"],
    .panel input[type="url"],
    .panel select,
    .panel textarea { max-width: 100%; }
}

/* ---------------------------------------------------------------------
   Flash messages
   --------------------------------------------------------------------- */
.flash { margin: 0 0 var(--space-6); padding: 9px var(--space-5); border-radius: var(--radius-control); font-size: 14px; border: 1px solid transparent; }
.flash-ok    { background: var(--brand-color-soft); border-color: var(--brand-color); color: var(--brand-color); }
.flash-error { background: var(--rust-soft); border-color: var(--rust); color: var(--rust); }
.flash-warn  { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); }

/* ---------------------------------------------------------------------
   Trial-status banner (Phase 38D) — admin/KDS/server-app/till chrome
   --------------------------------------------------------------------- */
.trial-banner {
    padding: 8px var(--space-5);
    background: var(--amber-soft); border-bottom: 1px solid var(--amber); color: var(--amber);
    font-size: 13px; text-align: center;
}
.trial-banner-danger { background: var(--rust-soft); border-color: var(--rust); color: var(--rust); }
/* Admin only: offset to clear the fixed sidebar, same breakpoint .admin-main uses. */
.sidebar-nav + .trial-banner { margin-left: 240px; }
@media (max-width: 900px) {
    .sidebar-nav + .trial-banner { margin-left: 0; }
}

/* ---------------------------------------------------------------------
   Inline "quick add" form row
   --------------------------------------------------------------------- */
.inline-add {
    display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: end;
    padding: var(--space-5);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.inline-add label { display: flex; flex-direction: column; font-size: 12px; color: var(--ink-muted); gap: 3px; }
/* The Postcode form is the one place an .inline-add row sits inside a
   .panel (Settings → General) — .panel label's own margin-bottom (meant
   for stacked single-column labels) would otherwise add to this label's
   height and throw the Re-verify button's align-items:end baseline off
   by that same amount. */
.panel .inline-add label { margin: 0; }
/* Settings → General: the New-order notifications switch sits directly
   after the postcode .inline-add box — needs its own top margin since
   .inline-add itself has no bottom margin (it isn't always the last
   thing in its container elsewhere it's used). */
.inline-add + .switch { margin-top: var(--space-5); }
.inline-add input, .inline-add select, .inline-add button { box-sizing: border-box; min-height: 34px; }
.inline-add input, .inline-add select {
    padding: 6px 8px; font: inherit; color: var(--ink); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-control);
}
.inline-add select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7268' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.inline-add button {
    font: inherit; font-weight: 600; padding: 6px 14px; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius-control);
    background: var(--surface); color: var(--ink);
}
.inline-add button:hover { background: var(--canvas); }

/* Mono treatment for inputs holding codes/identifiers/amounts/clock times
   (postcodes, PINs, fee/radius numbers, time pickers) — same family as
   .data-table td.mono above, extended to form fields outside a table.
   Declared after both the .panel and .inline-add input rules above so it
   wins the tie on source order at equal specificity in either context. */
.panel input.mono,
.inline-add input.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .data-table thead {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .data-table, .data-table tbody, .data-table tr { display: block; }
    .data-table tr {
        margin: 0 0 var(--space-4);
        padding: 4px var(--space-5);
        border: 1px solid var(--border);
        border-radius: var(--radius-card);
        background: var(--surface);
    }
    .data-table td {
        display: block;
        padding: 9px 0;
        border: 0;
        border-bottom: 1px solid var(--border);
        text-align: left;
    }
    .data-table tr td:last-child { border-bottom: 0; }
    .data-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ink-faint);
    }
    .data-table td[colspan] { text-align: center; color: var(--ink-muted); }
    .data-table td[colspan]::before { content: none; }
    .data-table .col-action.row-actions,
    .data-table .col-action .row-actions { justify-content: flex-end; }

    /* Opt-in: a cell that IS the row's title (e.g. a day name) rather than
       a label:value pair — no data-label prefix, just a bold heading. */
    .data-table td.col-day {
        padding-bottom: 6px;
        font-size: 15px;
        font-weight: 600;
    }
    .data-table td.col-day::before { content: none; }
}