/*
 * KFC Aruba back office. Loaded AFTER kfc.css, which owns the fonts, every colour, the spacing,
 * radius and border scales and the focus ring — the same arrangement as kiosk.css. Nothing here
 * redefines a token and nothing here writes a colour: every value is a var(--ui-*) or var(--w-*)
 * (AdminDesignSystemTest holds this file to that).
 *
 * It is a WORK TOOL, not a marketing page, so it departs from the storefront on purpose:
 *   - UI text is Kentucky Fried Sans REGULAR, not Light: dense tables are read for hours.
 *   - Serif Heavy Italic caps is for the page title only. Section headings are Sans.
 *   - Tables are dense, headers stick on long lists, numbers and AWG amounts are right-aligned.
 *   - One status language: ALERT red, WARNING amber, OK green, NEUTRAL grey — as a chip with a
 *     mark, never red text for emphasis. Warning-dark fails contrast as text on white, so a
 *     warning is black text on warning-light with an amber mark.
 *   - Every control is at least 44px (WCAG 2.5.8), focus is kfc.css's ring.
 *
 * Every rule is scoped under body.admin so the storefront's element styles (h1-h4 display sizes,
 * the pill .btn) never apply here and nothing here can leak onto the storefront.
 */

/* ------------------------------------------------------------------ shell */
/* Every display rule below is a class selector, which beats the browser's own [hidden]. The board's
   "Could not refresh" chip was on screen with the board working. Hidden means hidden. */
.admin [hidden] { display: none !important; }

body.admin {
    background: var(--ui-grey-50); color: var(--ui-text);
    font-weight: 400; font-size: 15px; line-height: 22px;
}
.admin a { color: var(--ui-text); text-underline-offset: 3px; }
.admin p { margin: 0 0 var(--ui-space-3); }
.admin strong, .admin b { font-weight: 400; color: var(--ui-black); }

/* Desktop: a fixed-width black sidebar and the page beside it. Phone: a black bar with the menu
   button, and the same nav as a panel (:target, so it works without JavaScript). */
.admin-shell { min-height: 100vh; }
@media (min-width: 900px) { .admin-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); } }

.admin-side { background: var(--ui-black); color: var(--ui-white); }
@media (min-width: 900px) {
    .admin-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
}
.admin-side :focus-visible { outline-color: var(--ui-white); }
.admin-bar { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--ui-space-2) 0 var(--ui-space-4); }
@media (min-width: 900px) { .admin-bar { min-height: 64px; padding: 0 var(--ui-space-5); } }
.admin-brand { display: inline-flex; align-items: center; gap: var(--ui-space-3); min-height: 44px; text-decoration: none; }
.admin .admin-brand { color: var(--ui-white); }
.admin-brand img { height: 24px; width: auto; }
.admin-brand span { font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 16px; line-height: 20px; }

.admin-menu-button, .admin-menu-close { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; text-decoration: none; }
.admin .admin-menu-button, .admin .admin-menu-close { color: var(--ui-white); }
@media (min-width: 900px) { .admin-menu-button, .admin-menu-close { display: none; } }

.admin-nav { display: none; }
.admin-nav:target, .admin-nav.is-open { display: block; position: fixed; inset: 0; z-index: 40; overflow-y: auto; background: var(--ui-black); }
.admin-nav-head { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--ui-space-2) 0 var(--ui-space-4); }
@media (min-width: 900px) {
    .admin-nav, .admin-nav:target { display: flex; flex-direction: column; flex: 1; position: static; overflow: visible; }
    .admin-nav-head { display: none; }
}
.admin-nav-group { padding: var(--ui-space-2) 0; border-top: var(--ui-border-100) solid var(--ui-grey-700); }
.admin-nav-group h2 {
    margin: 0; padding: var(--ui-space-1) var(--ui-space-5);
    font-family: var(--ui-font-body); font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px;
    text-transform: uppercase; letter-spacing: .5px; color: var(--ui-grey-300);
}
.admin .admin-nav-group ul { list-style: none; margin: 0; padding: 0; }
.admin-nav-group a {
    display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2);
    min-height: 44px; padding: 0 var(--ui-space-5); text-decoration: none;
    border-left: var(--ui-border-400) solid transparent;
}
.admin .admin-nav-group a { color: var(--ui-grey-100); }
.admin .admin-nav-group a:hover { color: var(--ui-white); background: var(--ui-grey-800); }
.admin .admin-nav-group a[aria-current="page"] { color: var(--ui-white); border-left-color: var(--ui-primary); background: var(--ui-grey-900); }
.admin-nav-count {
    min-width: 24px; padding: 0 var(--ui-space-2); border-radius: var(--ui-radius-200);
    background: var(--ui-error-main); color: var(--ui-white); font-size: 13px; line-height: 22px; text-align: center;
}
.admin-who { margin-top: auto; padding: var(--ui-space-4) var(--ui-space-5) var(--ui-space-5); border-top: var(--ui-border-100) solid var(--ui-grey-700); font-size: 14px; line-height: 20px; color: var(--ui-grey-300); }
.admin-who p { margin: 0 0 var(--ui-space-3); }
.admin .admin-who .btn { background: transparent; color: var(--ui-white); box-shadow: inset 0 0 0 1px var(--ui-grey-400); width: 100%; }
.admin .admin-who .btn:hover { background: var(--ui-grey-800); }

.admin-main { min-width: 0; padding: var(--ui-space-5) var(--ui-space-4) var(--ui-space-12); }
@media (min-width: 900px) { .admin-main { padding: var(--ui-space-8) var(--ui-space-10) var(--ui-space-16); } }
.admin-main > .admin-page { max-width: 1400px; }

/* ------------------------------------------------------------------ type */
/* The page title is the one Serif Heavy Italic caps line on a screen. */
.admin h1 { font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 26px; line-height: 1; margin: 0 0 var(--ui-space-5); }
@media (min-width: 900px) { .admin h1 { font-size: 34px; line-height: 1; } }
.admin h2, .admin h3, .admin h4 { font-family: var(--ui-font-body); font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
.admin .admin-main h2 { font-size: 20px; line-height: 1; margin: var(--ui-space-10) 0 var(--ui-space-3); padding-bottom: var(--ui-space-2); border-bottom: var(--ui-border-100) solid var(--ui-grey-200); }
.admin .admin-main h3 { font-size: 16px; line-height: 22px; margin: var(--ui-space-5) 0 var(--ui-space-2); color: var(--ui-black); }
.admin .muted { color: var(--ui-text-secondary); }
.admin .small { font-size: 12px; line-height: 16px; }   /* Caption */
.admin .mono { font-family: var(--ui-font-body); font-weight: 400; font-variant-numeric: tabular-nums; font-size: 14px; line-height: 20px; word-break: break-all; }
.admin ul, .admin ol { padding-left: var(--ui-space-5); }

/* ------------------------------------------------------------------ status: one language
   .status-alert  red    something is wrong and someone has to act
   .warn          amber  not live / needs sign-off / paused — attention, not an emergency
   .status-ok     green  confirmed good
   .status-muted  grey   neutral state
   On an inline element it is a chip with a mark; on a block (p, div, h3, summary) it is the same
   colours as a bar on the left, so a paragraph is never a wall of red text. */
.admin .warn, .admin .status-alert, .admin .status-ok, .admin .status-muted { color: var(--ui-black); font-weight: 400; }
.admin span.warn, .admin span.status-alert, .admin span.status-ok, .admin span.status-muted, .admin strong.warn, .admin strong.status-alert {
    display: inline-flex; align-items: center; gap: var(--ui-space-2); padding: 0 var(--ui-space-2); border-radius: var(--ui-radius-40);
    font-size: 13px; line-height: 20px; white-space: normal;
}
.admin span.warn::before, .admin span.status-alert::before, .admin span.status-ok::before, .admin span.status-muted::before,
.admin strong.warn::before, .admin strong.status-alert::before {
    content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--ui-radius-none);
}
.admin span.warn, .admin strong.warn { background: var(--ui-warning-light); }
.admin span.warn::before, .admin strong.warn::before { background: var(--ui-warning-main); }
.admin span.status-alert, .admin strong.status-alert { background: var(--ui-error-light); color: var(--ui-error-dark); }
.admin span.status-alert::before, .admin strong.status-alert::before { background: var(--ui-error-main); }
.admin span.status-ok { background: var(--ui-success-light); color: var(--ui-success-dark); }
.admin span.status-ok::before { background: var(--ui-success-main); }
.admin span.status-muted { background: var(--ui-grey-100); }
.admin span.status-muted::before { background: var(--ui-grey-400); }
.admin p.warn, .admin div.warn, .admin h3.warn, .admin summary.warn, .admin p.status-alert, .admin div.status-alert, .admin h3.status-alert {
    padding: var(--ui-space-2) var(--ui-space-3); border-left: var(--ui-border-400) solid var(--ui-warning-main); background: var(--ui-warning-light);
}
.admin p.status-alert, .admin div.status-alert, .admin h3.status-alert { border-left-color: var(--ui-error-main); background: var(--ui-error-light); color: var(--ui-error-dark); }
.admin h3.warn, .admin h3.status-alert { margin-top: 0; }

/* Flash after an action, and the error summary. */
.admin .flash { padding: var(--ui-space-3) var(--ui-space-4); margin: 0 0 var(--ui-space-5); background: var(--ui-white);
    border-left: var(--ui-border-400) solid var(--ui-success-main); border-radius: var(--ui-radius-40); box-shadow: inset 0 0 0 1px var(--ui-grey-200); }
.admin .flash.error, .admin .flash.err { border-left-color: var(--ui-error-main); background: var(--ui-error-light); color: var(--ui-error-dark); box-shadow: none; }
.admin .flash.error a { color: var(--ui-error-dark); }
/* An error next to the field it is about (admin.js puts it there; the summary above stays for no-JS). */
.admin .field-error { margin: var(--ui-space-1) 0 0; color: var(--ui-error-dark); font-size: 14px; line-height: 20px; }
.admin [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--ui-error-main); }

/* ------------------------------------------------------------------ panels */
.admin .box { background: var(--ui-white); border: 0; box-shadow: inset 0 0 0 1px var(--ui-grey-200); border-radius: var(--ui-radius-100); padding: var(--ui-space-4) var(--ui-space-5); margin: 0 0 var(--ui-space-4); }
.admin .box.alert { box-shadow: inset 0 0 0 1px var(--ui-grey-200), inset 4px 0 0 var(--ui-error-main); }
.admin details.box > summary { margin: calc(-1 * var(--ui-space-4)) calc(-1 * var(--ui-space-5)); padding: var(--ui-space-3) var(--ui-space-5); min-height: 44px; }
.admin details.box[open] > summary { margin-bottom: var(--ui-space-3); border-bottom: var(--ui-border-100) solid var(--ui-grey-200); }
.admin details > summary { cursor: pointer; font-weight: 400; color: var(--ui-black); min-height: 44px; display: flex; align-items: center; gap: var(--ui-space-2); }

/* ------------------------------------------------------------------ tables
   Dense, scannable, white on the grey canvas. Headers stick while a long list scrolls. On a
   phone a wide table scrolls sideways INSIDE itself; the page never does. */
.admin table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 var(--ui-space-4); background: var(--ui-white);
    box-shadow: inset 0 0 0 1px var(--ui-grey-200); border-radius: var(--ui-radius-100); font-size: 14px; line-height: 20px; }
.admin th, .admin td { text-align: left; vertical-align: top; padding: var(--ui-space-2) var(--ui-space-3); border-bottom: var(--ui-border-100) solid var(--ui-grey-100); }
.admin th {
    position: sticky; top: 0; z-index: 1; background: var(--ui-grey-50); white-space: nowrap;
    font-weight: 400; font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .4px; color: var(--ui-grey-600);
    border-bottom: var(--ui-border-100) solid var(--ui-grey-200);
}
.admin tbody th { position: static; text-transform: none; font-size: 14px; letter-spacing: 0; color: var(--ui-text-secondary); background: transparent; }
.admin tbody tr:last-child td, .admin tbody tr:last-child th { border-bottom: 0; }
.admin tbody tr:hover td { background: var(--ui-grey-50); }
.admin td.num, .admin th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin td a { text-decoration: none; }
.admin td a:hover { text-decoration: underline; }
@media (max-width: 899px) {
    .admin table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin th { position: static; }
    /* Inside its own scroll box a cell keeps a readable width instead of being crushed to fit
       390px: a status stays one line and an id is not broken mid-word. */
    .admin td, .admin th { min-width: 112px; }
    .admin td span.warn, .admin td span.status-alert, .admin td span.status-ok, .admin td span.status-muted { white-space: nowrap; }
    .admin td .mono { word-break: normal; overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------------ buttons
   Secondary (the default .btn): outlined. Primary (.btn.primary): the brand's red CTA, one per
   form. Destructive (.btn.danger): red outline, in its own form after the rest, and confirmed. */
.admin .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-2);
    min-height: 44px; padding: 0 var(--ui-space-4); border: 0; border-radius: var(--ui-radius-40);
    background: var(--ui-white); color: var(--ui-black); box-shadow: inset 0 0 0 1px var(--ui-black);
    font-family: var(--ui-font-body); font-style: normal; font-weight: 400; font-size: 15px; line-height: 20px; text-transform: none;
    text-decoration: none; cursor: pointer; transform: none; overflow: visible; white-space: nowrap;
}
.admin .btn:hover { background: var(--ui-grey-100); }
.admin .btn.primary { background: var(--ui-cta-bg); color: var(--ui-cta-text); box-shadow: none; }
.admin .btn.primary:hover, .admin .btn.primary:active { background: var(--ui-cta-bg-pressed); }
.admin .btn.small { padding: 0 var(--ui-space-3); font-size: 14px; }
.admin .btn.danger { color: var(--ui-error-dark); box-shadow: inset 0 0 0 1px var(--ui-error-main); }
.admin .btn.danger:hover { background: var(--ui-error-light); }
.admin .btn[disabled] { background: var(--ui-grey-100); color: var(--ui-grey-500); box-shadow: none; cursor: not-allowed; }
/* The destructive action sits apart from Save, under a rule. */
.admin .danger-zone { margin-top: var(--ui-space-8); padding-top: var(--ui-space-4); border-top: var(--ui-border-100) solid var(--ui-grey-200); }

/* ------------------------------------------------------------------ forms: labels above fields */
.admin .field { margin: 0 0 var(--ui-space-4); }
.admin .field > label, .admin .field > .label, .admin .field label[for] { display: block; margin: 0 0 var(--ui-space-2); font-weight: 400; font-size: 14px; line-height: 20px; color: var(--ui-black); }
.admin label { font-weight: 400; }
.admin input[type=text], .admin input[type=email], .admin input[type=password], .admin input[type=number], .admin input[type=date],
.admin input[type=datetime-local], .admin input[type=time], .admin input[type=search], .admin input[type=url], .admin input[type=tel], .admin input:not([type]), .admin select, .admin textarea {
    min-height: 44px; max-width: 100%; padding: var(--ui-space-2) var(--ui-space-3);
    border: 0; border-radius: var(--ui-radius-40); background: var(--ui-white); box-shadow: inset 0 0 0 1px var(--ui-control-line);
    font-size: 15px; line-height: 22px;
}
.admin textarea { width: 100%; min-height: 88px; }
.admin input[type=checkbox], .admin input[type=radio] { width: 20px; height: 20px; accent-color: var(--ui-primary); vertical-align: middle; }
.admin .field label:has(> input[type=checkbox]), .admin .field label:has(> input[type=radio]) { display: inline-flex; align-items: center; gap: var(--ui-space-2); min-height: 44px; }
.admin .field .muted { font-size: 12px; line-height: 16px; margin-top: var(--ui-space-1); }
.admin .row { display: flex; flex-wrap: wrap; gap: var(--ui-space-3) var(--ui-space-4); align-items: flex-end; }
.admin .row > .field { flex: 0 1 auto; }
.admin form.inline { display: inline; }
/* Published + window, the same everywhere it appears (slides, events, promotions, campaigns). */
.admin fieldset.window { min-width: 0; margin: 0 0 var(--ui-space-4); padding: var(--ui-space-3) var(--ui-space-4) 0; border: 0; border-radius: var(--ui-radius-100); background: var(--ui-white); box-shadow: inset 0 0 0 1px var(--ui-grey-200); }
.admin fieldset.window legend { float: left; width: 100%; margin: 0 0 var(--ui-space-3); padding: 0; font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .4px; color: var(--ui-grey-600); }

/* A page's own head: title, and one action on the right. */
.admin .page-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-3); margin-bottom: var(--ui-space-5); }
.admin .page-top h1 { margin: 0; }

/* ------------------------------------------------------------------ dashboard */
.admin .attention-count { display: inline-flex; min-width: 28px; justify-content: center; margin-left: var(--ui-space-2); padding: 0 var(--ui-space-2);
    border-radius: var(--ui-radius-200); background: var(--ui-error-main); color: var(--ui-white); font-size: 14px; line-height: 24px; vertical-align: middle; }
.admin .all-clear { display: flex; align-items: center; gap: var(--ui-space-2); color: var(--ui-success-dark); }
.admin .all-clear::before { content: ""; width: 8px; height: 8px; border-radius: var(--ui-radius-none); background: var(--ui-success-main); flex: none; }

/* ------------------------------------------------------------------ the board
   On a kitchen or manager screen all day: read at a distance. Big order numbers, the count per
   column large, the New column marked, and an order that has just arrived impossible to miss. */
.admin .board-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-3); margin-bottom: var(--ui-space-3); }
.admin .board-top h1 { margin: 0; }
.admin .board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ui-space-4); }
@media (max-width: 1100px) { .admin .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .admin .board { grid-template-columns: minmax(0, 1fr); } }
.admin .col { background: var(--ui-white); border-radius: var(--ui-radius-100); box-shadow: inset 0 0 0 1px var(--ui-grey-200); padding: var(--ui-space-3); min-height: 200px; }
.admin .col-new { box-shadow: inset 0 0 0 2px var(--ui-primary); }
.admin .admin-main .col h2 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 var(--ui-space-3); padding: 0 0 var(--ui-space-2);
    border-bottom: var(--ui-border-300) solid var(--ui-black); font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 24px; line-height: 1; }
.admin .col [data-count] { font-family: var(--ui-font-body); font-style: normal; font-weight: 400; font-size: 40px; line-height: 40px; color: var(--ui-black); font-variant-numeric: tabular-nums; }
.admin .col-new [data-count] { color: var(--ui-primary); }
.admin .ticket { display: block; margin: 0 0 var(--ui-space-2); padding: var(--ui-space-3); border-radius: var(--ui-radius-40); text-decoration: none;
    background: var(--ui-white); box-shadow: inset 0 0 0 1px var(--ui-grey-200); }
.admin .ticket:hover { box-shadow: inset 0 0 0 1px var(--ui-black); }
.admin .ticket .n { font-size: 32px; line-height: 32px; font-variant-numeric: tabular-nums; color: var(--ui-black); }
.admin .ticket .l { font-size: 14px; line-height: 20px; color: var(--ui-text-secondary); }
.admin .col-new .ticket { box-shadow: inset 4px 0 0 var(--ui-primary), inset 0 0 0 1px var(--ui-grey-200); }
/* Arrived since the board was opened: a solid red tile for a minute. */
.admin .ticket.is-fresh { background: var(--ui-primary); box-shadow: none; }
.admin .ticket.is-fresh .n, .admin .ticket.is-fresh div, .admin .ticket.is-fresh .l { color: var(--ui-white); }
.admin .board-empty { color: var(--ui-grey-400); font-size: 14px; }
.admin .board-status { margin: 0 0 var(--ui-space-4); color: var(--ui-text-secondary); font-size: 14px; }
.admin .board-status .status-alert { margin-left: var(--ui-space-2); }

/* ------------------------------------------------------------------ log in */
.admin-login { min-height: 100vh; display: grid; place-items: center; padding: var(--ui-space-6) var(--ui-space-4); background: var(--ui-black); }
.admin-login-card { width: 100%; max-width: 400px; padding: var(--ui-space-8) var(--ui-space-6); background: var(--ui-white); border-radius: var(--ui-radius-100); }
.admin-login-card .admin-login-mark { display: flex; align-items: center; gap: var(--ui-space-3); margin: 0 0 var(--ui-space-6); }
.admin-login-card .admin-login-mark img { height: 28px; width: auto; }
.admin-login-card .admin-login-mark span { font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 16px; }
.admin .admin-login-card h1 { font-size: 26px; line-height: 1; }
.admin-login-card input { width: 100%; }
.admin-login-card .btn { width: 100%; }

/* A row of checkboxes (restaurants, allergens): each option on the line, with room around it. */
.admin .check-inline { display: inline-flex; align-items: center; gap: var(--ui-space-2); min-height: 44px; margin-right: var(--ui-space-4); }
.admin textarea.mono { word-break: normal; }
/* A fieldset is min-width: min-content by default, so a row of date fields inside one could not
   wrap and pushed the page sideways at 390. Neither can any field. */
.admin fieldset { min-width: 0; }
.admin .row > .field { min-width: 0; max-width: 100%; }
/* The legend floats to sit inside the panel rather than on its border; everything after it clears
   it, or the first row is squeezed into the space beside a full-width legend. */
.admin fieldset.window > :not(legend) { clear: both; }

/* Two-step check (review 2026-09-25 #19) */
.admin-2fa-qr-wrap { margin: var(--ui-space-4) 0; }
.admin-2fa-qr-wrap svg { width: 220px; height: 220px; }
.admin-2fa-key { font-size: 16px; letter-spacing: 0.05em; word-break: break-all; }
.admin-2fa-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-2); }
.admin-2fa-codes code { font-size: 16px; }

/* Table codes (spec §19.2): a printable sheet, three codes across. Printing drops the back office
   around it, so the paper carries only the codes, their numbers and the restaurant's name. */
.table-qr-sheet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-5); }
.table-qr-tent { text-align: center; break-inside: avoid; page-break-inside: avoid; }
.table-qr-tent svg { width: 100%; max-width: 220px; height: auto; }
.table-qr-tent strong { display: block; font-family: var(--ui-font-heading); font-weight: 900; font-size: 36px; line-height: 40px; }
@media print {
    .admin-side, .table-qr-controls, .admin-page > .flash { display: none; }
    .admin-shell, .admin-main, .admin-page { display: block; margin: 0; padding: 0; }
}