/* The back office's one stylesheet.

   It speaks the till's visual language (src/Client/Omega.Pos.Desktop/Theming): the same Inter face, the same
   cool-tinted neutrals, the same single accent, the same hairline-edged panels and the same radius family,
   so an operator moving between the till and this site sees one product. The colour values are the till's
   Light and Dark theme tokens, copied by name; change one there and it wants changing here.

   Where the till's colour is used for TEXT on a light canvas it is darkened (the *-text tokens): the till
   sets those colours on large keys and fills, and at 13–14px on white they miss WCAG AA's 4.5:1. The fills
   and borders keep the till's exact values. */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    /* Inter 4.1 (SIL OFL 1.1, fonts/Inter-OFL.txt), the variable face subset to Latin. Served from this
       host: a font CDN would learn every operator's address and every page they open. */
    src: url("../fonts/InterVariable-latin.woff2") format("woff2");
}

:root {
    color-scheme: light dark;

    /* === Till tokens: LightTheme.axaml === */
    --surface: #EFF2F7;
    --on-surface: #161A21;
    --card: #FCFDFE;
    --accent: #0E7AB8;
    --on-accent: #FFFFFF;
    --accent-muted: #DCECF7;
    --muted: #5B6472;
    --border: #DFE4EC;
    --success: #15924E;
    --danger: #CB3B3B;
    --warning: #C9810A;

    /* Text-safe variants (>= 4.5:1 on --surface, --card and the tinted callouts). */
    --accent-text: #0A6699;
    --success-text: #11793F;
    --danger-text: #B53030;
    --warning-text: #8A5A07;

    /* A form control's edge must clear 3:1 against its fill (WCAG 1.4.11); the till's hairline is 1.3:1. */
    --control-border: #7D8693;

    /* === Till tokens: App.axaml (variant-independent) === */
    --fs-caption: 12px;
    --fs-meta: 13px;
    --fs-body: 14px;
    --fs-subtitle: 16px;
    --fs-title: 20px;
    --fs-screen-title: 26px;
    --radius-control: 7px;
    --radius-panel: 12px;
    --radius-chip: 6px;
    --shadow-panel: 0 1px 3px rgb(0 0 0 / 8%);
    --shadow-raised: 0 2px 6px rgb(0 0 0 / 12%);

    /* 4/8 spacing grid. */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;

    --topbar-height: 56px;
    --ease: 150ms ease-out;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* === Till tokens: DarkTheme.axaml === */
        --surface: #14161B;
        --on-surface: #E7E9EE;
        --card: #1C1F27;
        --accent: #38B6E6;
        --on-accent: #052430;
        --accent-muted: #13303F;
        --muted: #9AA1AD;
        --border: #2B2F39;
        --success: #27B06A;
        --danger: #E25757;
        --warning: #E8B23A;

        --accent-text: #38B6E6;
        --success-text: #3CC27D;
        --danger-text: #F07575;
        --warning-text: #E8B23A;
        --control-border: #6B7280;
        --shadow-panel: 0 1px 3px rgb(0 0 0 / 40%);
        --shadow-raised: 0 2px 8px rgb(0 0 0 / 50%);
    }
}

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

*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--topbar-height) + var(--s4)); }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--surface);
    color: var(--on-surface);
    font: 400 var(--fs-body)/1.5 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-feature-settings: "cv11", "ss01"; /* Inter's single-storey a and open digits: the till's look. */
    -webkit-font-smoothing: antialiased;
    accent-color: var(--accent);
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; text-wrap: balance; }
h1 { font-size: var(--fs-screen-title); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-title); }
h3 { font-size: var(--fs-subtitle); }
p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }

a { color: var(--accent-text); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

code {
    font: 500 var(--fs-meta)/1.3 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    padding: 1px 6px;
    border-radius: var(--radius-chip);
    background: var(--surface);
    border: 1px solid var(--border);
    overflow-wrap: anywhere;
}

img { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

/* ===== Top bar, the till's top strip: card fill, hairline under, uppercase semibold captions ===== */

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--s4);
    min-height: var(--topbar-height);
    padding: 0 var(--s5);
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--s2);
    color: var(--on-surface);
    text-decoration: none;
    white-space: nowrap;
}
.brand img { display: block; width: auto; height: 26px; }
.brand .wordmark { font-size: 18px; font-weight: 300; letter-spacing: 0.08em; }
.brand .product { font-size: var(--fs-meta); color: var(--muted); }

/* A heading per group, each a <details> whose list drops below it. Nothing here may clip (no overflow), or the
   open list is cut off at the bar's edge; the headings wrap instead. */
.menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.menu-group { position: relative; }
.menu-group + .menu-group { margin-top: 0; }
.menu-group > ul {
    position: absolute;
    top: calc(100% + var(--s1));
    left: 0;
    z-index: 1;
    min-width: 15rem;
    max-height: 70vh;
    overflow-y: auto;
    margin: 0;
    padding: var(--s1);
    list-style: none;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-raised);
}
/* The last heading sits nearest the bar's right end: its list opens leftwards, so it stays on screen. */
.menu-group:last-child > ul { left: auto; right: 0; }
.menu-group li .action { display: flex; width: 100%; }

/* Button.action in PosControls.axaml. */
.action {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 var(--s3);
    border: 0;
    border-radius: var(--radius-chip);
    background: transparent;
    color: var(--on-surface);
    font-family: inherit;
    font-size: var(--fs-meta);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ease), color var(--ease);
}
.action:hover { background: var(--accent-muted); text-decoration: none; }
/* Button.action.selected: the section you are in, and the menu heading it is under. */
.action[aria-current] { background: var(--accent-muted); color: var(--accent-text); }

.account {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin-left: auto;
    white-space: nowrap;
}
.account .operator { font-size: var(--fs-meta); color: var(--muted); }
.account .operator strong { color: var(--on-surface); }
.account form { margin: 0; }

/* ===== Scope strip, who you are acting for, read like the till's mode lamps ===== */

.scope {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s1) var(--s3);
    padding: var(--s2) var(--s5);
    font-size: var(--fs-meta);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.scope .lamp {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--success);
    flex: none;
}
.scope.warn { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); }
/* Hollow, not just another colour: the till's network lamp differs in shape as well as hue. */
.scope.warn .lamp { background: transparent; border: 2px solid var(--warning); }
.scope a { font-weight: 600; margin-left: auto; }

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

/* Capped so a table on a very wide monitor still reads as one line of sight, and centred so the cap does not
   leave the whole spare width on one side. The top bar and scope strip stay full width above it. */
main {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--s6) var(--s5) var(--s7);
}

main > h1 { margin-bottom: var(--s3); }
main > h1 + .note,
main > h1 + .lead { margin-bottom: var(--s5); }
main > h2,
.section-head { margin: var(--s6) 0 var(--s3); }
.section-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.section-head h2 { margin: 0; }
.section-head .note { margin: 0; }

.note { color: var(--muted); max-width: 78ch; }
.note strong { color: var(--on-surface); }
.hint { display: block; margin-top: var(--s1); color: var(--muted); font-size: var(--fs-meta); line-height: 1.4; }
td .hint, th .hint { font-size: var(--fs-caption); }

/* Border.panel: flat fill and hairline, not a floating card. */
.panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-panel);
    padding: var(--s5);
}
.panel + .panel,
.panel + .table-wrap,
.table-wrap + .panel,
.table-wrap + .table-wrap { margin-top: var(--s4); }
.panel > h2:first-child,
.panel > h3:first-child { margin-bottom: var(--s4); }

.stack > * + * { margin-top: var(--s4); }

/* Two panels side by side where there is room (the signing key beside the offline limit). */
.columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: var(--s4);
    align-items: start;
}
.columns + *, * + .columns { margin-top: var(--s4); }
.columns > .panel + .panel { margin-top: 0; }

.panel-head { margin: 0 0 var(--s4); }
.subhead { margin: var(--s5) 0 var(--s3); }
.empty .note { margin: 0; }

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Above a list: its filter on the left, what can be done to the marked rows on the right. */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s3) var(--s5);
    margin-bottom: var(--s3);
}
.toolbar .field { margin: 0; }
.toolbar .field > select { flex: 0 1 16rem; }
.toolbar .field > .hint { max-width: 60ch; }
.bulk { max-width: 34rem; margin-left: auto; }
.bulk .actions { margin-top: 0; justify-content: flex-end; }
.bulk .hint { text-align: right; }

/* ===== Callouts ===== */

.banner {
    margin: 0 0 var(--s4);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-control);
    background: var(--card);
    max-width: 90ch;
}
.banner.ok { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--card)); }
.banner.warn { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 11%, var(--card)); }
.banner.danger { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--card)); }
.banner p { margin: 0; }
.banner p + p { margin-top: var(--s2); }

/* Border.chip. */
.tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--radius-chip);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--fs-caption);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}
.tag.ok { background: color-mix(in srgb, var(--success) 12%, var(--card)); border-color: transparent; color: var(--success-text); }
.tag.warn { background: color-mix(in srgb, var(--warning) 16%, var(--card)); border-color: transparent; color: var(--warning-text); }
.tag.danger { background: color-mix(in srgb, var(--danger) 12%, var(--card)); border-color: transparent; color: var(--danger-text); }

/* ===== Buttons =====
   One accent for the action a form exists for; everything else is the till's default key (card face,
   hairline, accent on hover); destructive is Button.func.danger (red edge and text, red fill on hover). */

button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-control);
    background: var(--accent);
    color: var(--on-accent);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ease), border-color var(--ease), color var(--ease), filter var(--ease);
}
button:hover,
.button:hover { filter: brightness(1.08); text-decoration: none; }
button:active,
.button:active { filter: brightness(0.94); }

.secondary {
    background: var(--card);
    border-color: var(--control-border);
    color: var(--on-surface);
}
.secondary:hover { filter: none; background: var(--accent-muted); border-color: var(--accent); }

.danger {
    background: var(--card);
    border-color: var(--danger);
    color: var(--danger-text);
}
.danger:hover { filter: none; background: var(--danger); border-color: var(--danger); color: #FFFFFF; }

.small { min-height: 32px; padding: 0 var(--s3); font-size: var(--fs-meta); }

.actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s2) var(--s3);
    margin-top: var(--s5);
}

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

form { margin: 0; }

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    min-height: 40px;
    padding: var(--s2) var(--s3);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    background: var(--card);
    color: var(--on-surface);
    font: inherit;
    transition: border-color var(--ease), box-shadow var(--ease);
}
textarea { min-height: 88px; resize: vertical; line-height: 1.5; width: 100%; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.8; }
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0; flex: none; cursor: pointer; }

/* A field: label over control over hint. Controls sit side by side where a field has two (price and
   currency), and a checkbox field reads as box, label, then its hint indented under the label. */
.field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px var(--s2);
    margin: 0 0 var(--s4);
}
.field > label { flex-basis: 100%; font-size: var(--fs-meta); font-weight: 600; }
.field > input:not([type="checkbox"]):not([type="radio"]),
.field > select,
.field > textarea { flex: 1 1 14rem; min-width: 0; max-width: 32rem; }
.field > textarea { max-width: none; }
.field > input + select { flex: 0 0 auto; }
.field > .hint { flex-basis: 100%; margin-top: 0; }
.field > input[type="checkbox"] + label { flex: 1 1 0; font-size: var(--fs-body); cursor: pointer; }
.field:has(> input[type="checkbox"]:first-child) > .hint { padding-left: calc(18px + var(--s2)); }

/* The PLU and the button that fills it in: one row however narrow the editor's column, the input taking the room. */
.plu-input-group { display: flex; flex: 1 1 100%; gap: var(--s2); }
.plu-input-group > input { flex: 1 1 auto; min-width: 0; }
.plu-input-group > button { flex: 0 0 auto; }

/* An editor: its fields flow into columns on a wide screen, and anything spanning, a group of
   checkboxes, a fieldset, the buttons, takes the whole row. */
.editor {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    column-gap: var(--s5);
    align-items: start;
}
.editor > .field > input:not([type="checkbox"]):not([type="radio"]),
.editor > .field > select { max-width: none; }
.editor > .wide,
.editor > fieldset,
.editor > .actions,
.editor > h2,
.editor > h3,
.editor > .note,
.editor > .table-wrap { grid-column: 1 / -1; }
.editor > .actions { margin-top: var(--s2); }
fieldset.editor { margin-bottom: var(--s4); }
.editor > fieldset:not(.editor) > .field + .field { margin-top: 0; }

.narrow { max-width: 36rem; }
.narrow .field > input:not([type="checkbox"]):not([type="radio"]),
.narrow .field > select { max-width: none; flex-basis: 100%; }

fieldset {
    margin: 0 0 var(--s4);
    padding: var(--s4);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    min-width: 0;
}
legend { padding: 0 var(--s1); font-size: var(--fs-meta); font-weight: 600; }
fieldset > .field:last-child { margin-bottom: 0; }

/* Radio and checkbox options as rows you can hit anywhere on. */
.option {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s3);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--card);
    cursor: pointer;
    transition: background-color var(--ease), border-color var(--ease);
}
.option + .option { margin-top: var(--s2); }
.option input { margin-top: 2px; }
.option:hover { border-color: var(--accent); }
.option:has(input:checked) { border-color: var(--accent); background: var(--accent-muted); }
.option .hint { margin-top: 2px; }

.options { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.options > li + li { margin-top: var(--s2); }

/* ===== Tables, the till's register table: hairline rows on the card, a quiet header ===== */

.table-wrap {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-panel);
    overflow-x: auto;
}

table { width: 100%; border-collapse: collapse; }
th, td {
    padding: 10px var(--s4);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}
thead th {
    padding-top: var(--s3);
    padding-bottom: var(--s3);
    background: color-mix(in srgb, var(--surface) 60%, var(--card));
    color: var(--muted);
    font-size: var(--fs-caption);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: bottom;
}
tbody th { font-weight: 600; }
/* Row cells centre on the row's buttons, so a name reads on the same line as its Ändra. */
tbody td, tbody th { vertical-align: middle; }
tbody tr:last-child > th,
tbody tr:last-child > td { border-bottom: 0; }
tbody tr { transition: background-color var(--ease); }
tbody tr:hover { background: color-mix(in srgb, var(--accent-muted) 45%, transparent); }
/* A whole row is one link: its first link stretches over the row, so a click anywhere opens it and a keyboard
   still tabs to the one real link. */
tr.row-link { position: relative; cursor: pointer; }
tr.row-link a::after { content: ""; position: absolute; inset: 0; }
tr.row-link:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
td em, th em { font-style: normal; color: var(--muted); }
/* A code in a row is one token (a PLU, an account): it scrolls with the table rather than breaking. */
td > code { white-space: nowrap; overflow-wrap: normal; }
.actions-cell > .hint { display: inline; }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
td.actions-cell { text-align: right; white-space: nowrap; }
.actions-cell > * { vertical-align: middle; }
.actions-cell > * + * { margin-left: var(--s2); }
.actions-cell form { display: inline-flex; }

/* A key/value table (a signing key, a pairing request). */
.facts th { width: 14rem; color: var(--muted); font-weight: 500; }

/* Controls inside a table cell (the bookkeeping accounts). */
td > input:not([type="checkbox"]):not([type="radio"]) { width: 100%; max-width: 16rem; }

/* The fast-programming grid (Snabbprogrammering): compact cells, and a red cell the save refused. */
table.grid th, table.grid td { padding: 4px 6px; }
/* A long grid scrolls in its own box, so its column headings stay in view: the wrapper already scrolls sideways,
   which would otherwise pin a sticky heading to a box that never scrolls down. */
.table-wrap.sticky-head { max-height: calc(100vh - 12rem); overflow: auto; }
.table-wrap.sticky-head thead th { position: sticky; top: 0; z-index: 1; }
table.grid td > input:not([type="checkbox"]):not([type="radio"]),
table.grid td > select { width: 100%; min-width: 6rem; max-width: none; }
table.grid td.flagged { background: color-mix(in srgb, var(--danger) 14%, transparent); }
table.grid [aria-invalid="true"] { border-color: var(--danger); outline: 2px solid var(--danger); }
table.grid .cell-error { display: block; color: var(--danger-text); font-size: var(--fs-caption); }

/* The row a disclosure opens beneath. */
tr.detail-row > td { padding-top: 0; background: transparent; }
tr.detail-row:hover { background: transparent; }

/* A table sitting inside a panel: the panel is the frame. */
.table-wrap.flat { box-shadow: none; border-radius: var(--radius-control); }
.panel > .note + .table-wrap { margin-top: var(--s3); }

/* The pairing request beside the selected store: the label column quiet, the store column the answer. */
.compare tbody th { width: 12rem; color: var(--muted); font-weight: 500; }

.swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: var(--s2);
    border-radius: 4px;
    border: 1px solid rgb(0 0 0 / 20%);
    vertical-align: -2px;
}

/* The pairing code is read off a till screen and typed: set it like the till shows it. */
.code-input { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.field > .code-input + button { flex: 0 0 auto; }

/* ===== Disclosure ===== */

details > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 32px;
    padding: 0 var(--s3);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-control);
    background: var(--card);
    font-size: var(--fs-meta);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background-color var(--ease), border-color var(--ease);
}
details > summary::-webkit-details-marker { display: none; }
details + details { margin-top: var(--s2); }
details > summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--ease);
}
details[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
details > summary:hover { background: var(--accent-muted); border-color: var(--accent); }
details[open] > summary { background: var(--accent-muted); border-color: var(--accent); }

.disclosure-body {
    margin-top: var(--s3);
    padding: var(--s4);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    text-align: left;
    white-space: normal;
}
.disclosure-body > form + form {
    margin-top: var(--s4);
    padding-top: var(--s4);
    border-top: 1px solid var(--border);
}
.disclosure-body .field { margin-bottom: var(--s3); }
.disclosure-body .table-wrap { box-shadow: none; }
.disclosure-body > form > button { margin-top: var(--s1); }
.actions-cell .disclosure-body { width: min(24rem, 80vw); }
.actions-cell details { display: inline-block; text-align: right; }
.detail-row details > summary code { padding: 0 4px; }

/* ===== Start page, the till's start-screen launcher ===== */

.launcher {
    display: grid;
    /* At most four across, however wide: seven tools as 4 + 3, never 6 + 1. */
    grid-template-columns: repeat(auto-fill, minmax(max(15rem, calc((100% - 3 * var(--s4)) / 4)), 1fr));
    gap: var(--s4);
    margin: 0 0 var(--s6);
    padding: 0;
    list-style: none;
}
/* Button.launch. */
.tile {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    height: 100%;
    padding: var(--s5) var(--s4) var(--s4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-raised);
    color: var(--on-surface);
    text-decoration: none;
    transition: background-color var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.tile:hover {
    background: var(--accent-muted);
    border-color: var(--accent);
    box-shadow: 0 8px 20px rgb(0 0 0 / 19%);
    text-decoration: none;
}
.tile svg { width: 34px; height: 34px; fill: var(--accent); }
.tile .name { font-size: var(--fs-subtitle); font-weight: 600; }
.tile .summary { font-size: var(--fs-meta); color: var(--muted); line-height: 1.4; }

/* ===== Signed-out pages: the till's start screen, mark, light wordmark, one panel ===== */

body.signed-out main {
    max-width: 30rem;
    margin: 0 auto;
    padding-top: var(--s7);
}
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s6);
    text-align: center;
}
.hero img { height: 72px; width: auto; }
.hero .wordmark { font-size: 30px; font-weight: 300; letter-spacing: 0.1em; line-height: 1.1; }
.hero .product { color: var(--muted); font-size: var(--fs-subtitle); }
body.signed-out .panel > h1 { font-size: var(--fs-title); margin-bottom: var(--s4); }
body.signed-out .panel > h2 { font-size: var(--fs-subtitle); margin: var(--s5) 0 var(--s2); }
body.signed-out .panel > .banner { max-width: none; }
body.signed-out main > .note { margin-top: var(--s4); text-align: center; }
body.signed-out form button[type="submit"] { width: 100%; margin-top: var(--s2); }
body.signed-out .field > input:not([type="checkbox"]):not([type="radio"]) { flex-basis: 100%; max-width: none; }

/* A QR code is read by a camera, which wants dark on light whatever the theme. */
.qr {
    display: inline-block;
    padding: var(--s3);
    background: #FFFFFF;
    border-radius: var(--radius-control);
    border: 1px solid var(--border);
}
.qr img { display: block; }

/* ===== Kitchen and pickup screens ===== */

/* The store's own look (Kok/Utseende) arrives as these variables in a style attribute; the fallbacks are its default. */
.kitchen-screen {
    background: var(--kds-bg, var(--surface));
    padding: var(--s4);
    border-radius: var(--radius-panel);
}
.kitchen-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--s4); }
.kitchen-tickets .panel + .panel { margin-top: 0; }
.kitchen-ticket {
    background: var(--kds-ticket-bg, var(--card));
    color: var(--kds-ticket-text, var(--on-surface));
    font-size: var(--kds-text-size, 18px);
}
.kitchen-ticket h2 { font-size: 1.3em; }
.kitchen-ticket .hint { color: inherit; opacity: 0.75; font-size: 0.8em; }
.kitchen-ticket ul { margin: 0 0 var(--s4); padding-left: 1.2em; }
.kitchen-ready { display: flex; flex-wrap: wrap; gap: var(--s2); align-content: flex-start; }

/* The kitchen screen fills its display: incoming tickets on the left, ready ones on the right, buttons below. */
body.kds-body { margin: 0; }
.kds { min-height: 100vh; border-radius: 0; display: flex; flex-direction: column; gap: var(--s3);
    color: var(--kds-ticket-text, var(--on-surface)); }
.kds-zones { flex: 1; }
.kds-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.kds-bar h1 { margin: 0; font-size: 1.4rem; }
.kds-menu { position: relative; }
.kds-menu summary, .kds-menu nav { color: var(--on-surface); }
.kds-menu summary { cursor: pointer; padding: var(--s2) var(--s4); border-radius: var(--radius-control); background: var(--card); }
.kds-menu nav { position: absolute; right: 0; z-index: 2; display: grid; gap: var(--s2); min-width: 12rem; padding: var(--s3);
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.kds-zones { display: grid; grid-template-columns: 3fr 1fr; gap: var(--s4); align-items: start; touch-action: manipulation; }
.kds-zone { border-radius: var(--radius-panel); }
.kds-zone.ready { background: var(--kds-ready-bg, transparent); padding-bottom: var(--s3); }
.kds-zone.ready .kitchen-tickets { padding: 0 var(--s3); }
.kds-zone h2, .kds-bar { background: var(--kds-header-bg, transparent); color: var(--kds-header-text, inherit); }
.kds-zone h2 { font-size: var(--kds-header-size, 1.1rem); margin: 0 0 var(--s3); padding: var(--s2) var(--s3);
    border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
.kds-bar { padding: var(--s2) var(--s3); border-radius: var(--radius-panel); }
.kds-bar h1 { color: inherit; }
.kds .kitchen-tickets { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--kds-ticket-width, 16rem)), 1fr)); }
.kitchen-ticket.takeaway, .kds-ready-ticket.takeaway { background: var(--kds-takeaway-bg); color: var(--kds-takeaway-text); }
.kds-count { opacity: 0.6; }
.kds-pick { display: block; cursor: pointer; user-select: none; }
.kds-pick input { position: absolute; opacity: 0; pointer-events: none; }
.kitchen-ticket { position: relative; }
.kitchen-ticket:has(input:checked), .kds-ready-ticket:has(input:checked) { outline: 4px solid var(--accent); outline-offset: -4px; }
.kds-head { display: flex; justify-content: space-between; gap: var(--s3); font-size: 1.3em; }
.kds-wait { font-variant-numeric: tabular-nums; }
.kds-enlarge { position: absolute; right: var(--s3); bottom: var(--s3); }
.kds-busy { display: block; margin: 0 0 var(--s2); padding: var(--s1) var(--s2); border-radius: var(--radius-control);
    background: var(--warning); color: #FFFFFF; font-size: 0.8em; font-weight: 600; }
.kds-busy[hidden] { display: none; }

/* The kitchen start page: big choices for a touch screen. */
.kds-start { max-width: 56rem; margin: 0 auto; padding: var(--s6) var(--s4); display: grid; gap: var(--s6); }
.kds-start h2 { margin-bottom: var(--s3); }
.kds-start-choices { display: flex; flex-wrap: wrap; gap: var(--s3); }
.kds-start-choices .button { min-width: 12rem; padding: var(--s4) var(--s5); font-size: 1.2rem; }
.kds-start-remember { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.kds-ready-ticket { padding: var(--s2) var(--s4); border-radius: var(--radius-control); background: var(--kds-ticket-bg, var(--card));
    color: var(--kds-ticket-text, var(--on-surface)); font-size: var(--kds-text-size, 18px); }
.kds-actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: flex-end; }
.kds-large { max-width: min(90vw, 48rem); width: 100%; border: none; border-radius: var(--radius-panel); padding: var(--s5);
    background: var(--kds-ticket-bg, var(--card)); color: var(--kds-ticket-text, var(--on-surface)); }
.kds-large .kitchen-ticket { font-size: calc(var(--kds-text-size, 18px) * 1.6); }
.kds-large::backdrop { background: rgb(0 0 0 / 0.6); }
@media (max-width: 720px) { .kds-zones { grid-template-columns: 1fr; } }

.pickup-screen { display: grid; grid-template-columns: 1fr 1fr; color: var(--pickup-text, #FFFFFF); }
.pickup-half { padding: var(--s5); min-height: 12rem; }
.pickup-half.preparing { background: var(--pickup-preparing, #161A21); }
.pickup-half.ready { background: var(--pickup-ready, #15924E); }
.pickup-half h1, .pickup-half h2 { color: inherit; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; }
.pickup-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2em 0.6em; font-weight: 700; line-height: 1.1; }
.pickup-numbers span { font-size: var(--pickup-size, 96px); font-variant-numeric: tabular-nums; }
.look-preview { display: grid; gap: var(--s4); }
.look-preview .look-preview-kds { min-height: 0; border-radius: var(--radius-panel); padding: var(--s3); }
.look-preview .pickup-numbers span { font-size: calc(var(--pickup-size, 96px) / 2); }
.look-preview .pickup-screen { border-radius: var(--radius-panel); overflow: hidden; }
.pickup-link { word-break: break-all; user-select: all; }

/* The public pickup screen fills the display it is opened on, with no back office around it. */
body.pickup-body { margin: 0; }
body.pickup-body.idle, body.pickup-body.idle * { cursor: none; }
.pickup-tools { position: fixed; top: var(--s3); right: var(--s3); display: flex; gap: var(--s2); }
body.pickup-body.idle .pickup-tools { visibility: hidden; }
.pickup-screen.full { min-height: 100vh; max-width: none; padding: 0; }
.pickup-screen.full .pickup-half h1 { font-size: clamp(24px, 4vw, 64px); margin: 0 0 var(--s5); }

/* Shelf labels: each A4 sheet is one SVG in millimetres. On screen it is a preview; on paper it is the sheet
   itself, at the page's top-left with no margin, so the label stock's own margins are the only ones. */
.label-sheet { display: block; width: 210mm; max-width: 100%; height: auto; aspect-ratio: 210 / 297;
    background: #FFFFFF; color: #000000; border: 1px solid var(--line, #D0D4DA); margin: 0 0 var(--s5); }
.label-sheet text { font-family: Inter, Arial, sans-serif; fill: #000000; }
.label-sheet .bars { fill: #000000; }

/* ===== Sales charts (Rapporter/Diagram): drawn on the server as SVG, one hue, thin rules ===== */

.chart { margin: var(--s5) 0; max-width: 60rem; }
.chart figcaption { font-weight: 600; margin-bottom: var(--s2); }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .chart-bar { fill: var(--accent); }
.chart .chart-bar:hover { fill: var(--accent-text, var(--accent)); }
.chart .chart-zero { stroke: var(--muted); stroke-width: 1; }
.chart .chart-rule { stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 4; }
.chart text { fill: var(--on-surface); font-size: 12px; }
.chart .chart-axis { fill: var(--muted); }
.chart details { margin-top: var(--s2); }

@page labels { size: A4; margin: 0; }

/* Text a person wrote with its own line breaks, such as a customer's note. */
.pre-wrap { white-space: pre-wrap; }

/* A receipt from the digital papperskorg, as the roll prints it: one fixed-width line per row. */
.receipt-copy { font-family: ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; max-width: 46ch;
    padding: var(--s2); border: 1px solid var(--border); background: var(--surface); }

@media print {
    .topbar, .scope, .no-print { display: none !important; }
    main:has(.label-sheet) { padding: 0; margin: 0; max-width: none; }
    .label-sheet { page: labels; width: 210mm; height: 297mm; max-width: none; border: 0; margin: 0; break-after: page; }
}

/* ===== Narrow screens ===== */

/* Below this the six menu headings, the brand and the account no longer share one row: the menu takes a row of
   its own under them, its first heading's text in line with the brand. */
@media (max-width: 1500px) {
    .topbar { flex-wrap: wrap; row-gap: 0; padding-top: var(--s2); padding-bottom: var(--s1); }
    .menu { order: 3; flex-basis: 100%; margin-left: calc(-1 * var(--s3)); }
}

@media (max-width: 960px) {
    .topbar { flex-wrap: wrap; padding: var(--s2) var(--s4) 0; gap: var(--s2) var(--s3); }
    .menu { order: 3; flex-basis: 100%; margin: 0 calc(-1 * var(--s4)); padding: 0 var(--s3) var(--s1); position: relative; }
    /* The list spans the menu's width under it, wherever its heading wrapped to. */
    .menu-group { position: static; }
    .menu-group > summary { padding: 0 var(--s2); }
    .menu-group > ul,
    .menu-group:last-child > ul { top: 100%; left: var(--s3); right: var(--s3); min-width: 0; }
    .account .operator { display: none; }
    .scope { padding: var(--s2) var(--s4); }
    main { padding: var(--s5) var(--s4) var(--s6); }
    h1 { font-size: var(--fs-title); }
    .panel { padding: var(--s4); }
    th, td { padding: var(--s2) var(--s3); }
}

/* Searching kitchen articles hides rows without clearing their checked destinations. */
[data-kitchen-article][hidden] { display: none; }