/* Kitchen tablet admin — landscape.

   The design is drawn on a fixed 1920x1200 artboard, but the tablet in the kitchen is whatever the
   owner bought. Every size below is written as "design pixels" times --px, so the whole layout
   scales with the viewport instead of being right on exactly one device.

   ponytail: --px is the calibration knob. The clamp floor keeps a small 1280-wide tablet legible
   and the ceiling stops a desk monitor from rendering cartoon-sized buttons. Widen it if a real
   device lands outside. */
.admin {
    --px: clamp(0.62px, calc(100vw / 1920), 1.15px);

    --bg: #F4F5F6;
    --surface: #FBFBFC;
    --surface-sunk: #EFF1F2;
    --line: #DFE3E6;
    --line-soft: #ECEEF0;
    --line-strong: #CDD3D8;

    --ink: #2E3338;
    --ink-mid: #4C555C;
    --ink-soft: #6D757C;
    --ink-faint: #8B9298;

    --accent: #4A6B8A;
    --accent-dark: #3F5E7A;

    --go: #6F9C7F;
    --go-dark: #5F8A70;
    --go-soft: #EEF3EF;
    --go-ink: #4E6F5B;
    --go-line: #BFD2C6;

    --stop: #A97068;
    --stop-dark: #96635E;
    --stop-soft: #F5EDEC;
    --stop-ink: #8A5F58;
    --stop-line: #DDC6C3;

    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

/* ---------------------------------------------------------------- navigation */

/* The toggle drives the whole rail: it is a real checkbox parked off-screen so the rail opens and
   closes with no circuit (App.razor only remembers the choice). #admin-nav-toggle:checked = rail
   shown. It ships checked, so the no-JS state is "rail open". */
.admin-nav-toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

.admin-nav {
    flex: 0 0 calc(300 * var(--px));
    width: calc(300 * var(--px));
    min-width: 0;
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Rail closed on a desktop-sized screen: it leaves the flow entirely and the body reflows wide.
   Scoped to the wide breakpoint so it never fights the off-canvas drawer below 1024. */
@media (min-width: 1024px) {
    .admin-nav-toggle:not(:checked) ~ .admin-nav { display: none; }
}

.admin-nav__brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: calc(76 * var(--px));
    padding: 0 calc(26 * var(--px));
    border-bottom: 1px solid var(--line);
}

.admin-nav__logo {
    font-size: calc(30 * var(--px));
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--ink);
}

.admin-nav__items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.admin-nav__user {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--px));
    padding: calc(18 * var(--px)) calc(22 * var(--px));
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.admin-nav__user-name {
    font-size: calc(20 * var(--px));
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-nav__user form { margin: 0; }

.admin-nav__logout {
    width: 100%;
    height: calc(72 * var(--px));
    border: 1px solid var(--line-strong);
    border-radius: calc(10 * var(--px));
    background: var(--surface);
    color: var(--ink-mid);
    font-family: inherit;
    font-size: calc(22 * var(--px));
    font-weight: 600;
    cursor: pointer;
}

.admin-nav__logout:hover { background: var(--surface-sunk); }

/* The menu / collapse control in the top bar. Present at every size — on a phone it opens the
   drawer, on a desk monitor it hides the rail. */
.admin-navbtn {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(6 * var(--px));
    width: calc(58 * var(--px));
    height: calc(58 * var(--px));
    margin-left: calc(-10 * var(--px));
    padding: calc(16 * var(--px));
    border-radius: calc(10 * var(--px));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.admin-navbtn:hover { background: var(--surface-sunk); }

.admin-navbtn span {
    width: 100%;
    height: calc(3 * var(--px));
    border-radius: 2px;
    background: var(--ink-mid);
}

/* Off-canvas backdrop, only ever visible while the drawer is open below 1024. */
.admin-scrim { display: none; }

.admin-nav__item {
    flex: 1 0 calc(96 * var(--px));
    display: flex;
    align-items: center;
    padding: 0 calc(26 * var(--px)) 0 0;
    border: none;
    border-bottom: 1px solid var(--line-soft);
    background: var(--surface);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

/* The four configuration pages the tablet design leaves out. Still reachable, visibly secondary. */
.admin-nav__item--minor { flex: 0 0 calc(70 * var(--px)); }

/* Signed out there is only one item, and a button down the whole rail looks like a mistake. */
.admin-nav__item--single { flex: 0 0 calc(96 * var(--px)); }

.admin-nav__bar {
    flex: 0 0 calc(10 * var(--px));
    align-self: stretch;
    background: transparent;
}

.admin-nav__label {
    flex: 1;
    padding-left: calc(26 * var(--px));
    font-size: calc(27 * var(--px));
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

.admin-nav__item--minor .admin-nav__label {
    font-size: calc(21 * var(--px));
    font-weight: 600;
    color: var(--ink-faint);
}

.admin-nav__item.active { background: var(--accent); }
.admin-nav__item.active .admin-nav__bar { background: rgba(0, 0, 0, 0.22); }
.admin-nav__item.active .admin-nav__label { color: #fff; }

.admin-nav__badge {
    min-width: calc(46 * var(--px));
    height: calc(46 * var(--px));
    padding: 0 calc(12 * var(--px));
    border-radius: calc(23 * var(--px));
    background: var(--accent);
    color: #fff;
    font-size: calc(24 * var(--px));
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-nav__item.active .admin-nav__badge {
    background: #fff;
    color: var(--accent);
}

/* ---------------------------------------------------------------- frame */

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

.admin-topbar {
    flex: 0 0 auto;
    height: calc(76 * var(--px));
    display: flex;
    align-items: center;
    gap: calc(20 * var(--px));
    padding: 0 calc(32 * var(--px));
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.admin-topbar__title {
    font-size: calc(26 * var(--px));
    font-weight: 600;
}

.admin-topbar__meta {
    font-size: calc(22 * var(--px));
    color: var(--ink-faint);
}

.admin-topbar__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: calc(24 * var(--px));
    font-size: calc(22 * var(--px));
    color: var(--ink-soft);
}

.admin-topbar__clock {
    font-size: calc(24 * var(--px));
    font-weight: 600;
    color: var(--ink-mid);
    font-variant-numeric: tabular-nums;
}

.admin-topbar a,
.admin-topbar .btn-link {
    font-size: calc(21 * var(--px));
    color: var(--accent);
    text-decoration: none;
    padding: 0;
}

.admin-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: calc(28 * var(--px)) calc(36 * var(--px));
    font-size: calc(20 * var(--px));
}

/* A redesigned page fills the frame and does its own scrolling; everything else keeps the
   scroll-and-pad default above, which is why the pages this design does not cover need no edit. */
.admin-body:has(> .adm-page, > .orders, > .menu) {
    padding: 0;
    overflow: hidden;
    font-size: inherit;
}

.admin-body > .adm-page,
.admin-body > .orders,
.admin-body > .menu { flex: 1; min-height: 0; }

/* ---------------------------------------------------------------- primitives */

.adm-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.adm-pad { padding: calc(28 * var(--px)) calc(36 * var(--px)) calc(36 * var(--px)); }

.adm-page {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.adm-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: calc(12 * var(--px));
}

.adm-empty {
    padding: calc(40 * var(--px)) calc(8 * var(--px));
    font-size: calc(24 * var(--px));
    color: var(--ink-faint);
    text-align: center;
}

.adm-muted { color: var(--ink-faint); }
.adm-num { font-variant-numeric: tabular-nums; }

.adm-btn {
    height: calc(84 * var(--px));
    padding: 0 calc(24 * var(--px));
    border: 1px solid var(--line-strong);
    border-radius: calc(10 * var(--px));
    background: var(--surface);
    color: var(--ink-mid);
    font-family: inherit;
    font-size: calc(24 * var(--px));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Some of these are links (Byt lösenord); they should still read as buttons. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.adm-btn:disabled { opacity: 0.45; cursor: default; }

.adm-btn--tall { height: calc(108 * var(--px)); font-size: calc(30 * var(--px)); font-weight: 600; }

.adm-btn--go {
    background: var(--go);
    border-color: var(--go-dark);
    color: #fff;
    font-size: calc(34 * var(--px));
    font-weight: 600;
}

.adm-btn--stop {
    background: var(--stop);
    border-color: var(--stop-dark);
    color: #fff;
    font-weight: 600;
}

.adm-btn--dark {
    background: var(--ink-mid);
    border-color: #7E868C;
    color: #fff;
    font-weight: 600;
}

.adm-btn--accent {
    background: var(--accent);
    border-color: var(--accent-dark);
    color: #fff;
    font-size: calc(28 * var(--px));
    font-weight: 600;
    height: calc(96 * var(--px));
    padding: 0 calc(40 * var(--px));
    border-radius: calc(12 * var(--px));
}

.adm-btn--dashed {
    width: 100%;
    height: calc(88 * var(--px));
    border: 1px dashed #C7CDD2;
    background: transparent;
    color: var(--ink-faint);
    font-size: calc(26 * var(--px));
}

/* Segmented tab, e.g. Nya / Pågående */
.adm-pill {
    flex: 1;
    height: calc(80 * var(--px));
    border-radius: calc(10 * var(--px));
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink-soft);
    font-family: inherit;
    font-size: calc(25 * var(--px));
    font-weight: 500;
    cursor: pointer;
}

.adm-pill.is-on {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    font-weight: 700;
}

/* Single-choice option, e.g. 20 min / Slut på råvaror */
.adm-chip {
    height: calc(88 * var(--px));
    padding: 0 calc(26 * var(--px));
    border-radius: calc(10 * var(--px));
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink-mid);
    font-family: inherit;
    font-size: calc(26 * var(--px));
    font-weight: 500;
    cursor: pointer;
}

.adm-chip--go.is-on { background: var(--go); border-color: var(--go-dark); color: #fff; }
.adm-chip--stop.is-on { background: var(--stop); border-color: var(--stop-dark); color: #fff; }

.adm-tag {
    padding: calc(6 * var(--px)) calc(14 * var(--px));
    border-radius: calc(8 * var(--px));
    font-size: calc(21 * var(--px));
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.adm-tag--delivery { background: #E4EAF0; color: var(--accent-dark); }
.adm-tag--pickup { background: #EDEFF1; color: var(--ink-soft); }

.adm-state {
    text-align: center;
    padding: calc(8 * var(--px)) calc(14 * var(--px));
    border-radius: calc(8 * var(--px));
    font-size: calc(22 * var(--px));
    font-weight: 600;
}

.adm-state--ok { background: var(--go-soft); color: var(--go-ink); }
.adm-state--bad { background: var(--stop-soft); color: var(--stop-ink); }

.adm-toggle {
    flex: 0 0 calc(200 * var(--px));
    height: calc(88 * var(--px));
    border-radius: calc(10 * var(--px));
    font-family: inherit;
    font-size: calc(26 * var(--px));
    font-weight: 600;
    cursor: pointer;
    background: var(--go-soft);
    color: var(--go-ink);
    border: 1px solid var(--go-line);
}

.adm-toggle.is-off {
    background: var(--stop-soft);
    color: var(--stop-ink);
    border-color: var(--stop-line);
}

.adm-field { margin-bottom: calc(20 * var(--px)); }

.adm-label {
    display: block;
    font-size: calc(24 * var(--px));
    color: var(--ink-faint);
    margin-bottom: calc(8 * var(--px));
}

.adm-input {
    width: 100%;
    height: calc(88 * var(--px));
    padding: 0 calc(22 * var(--px));
    font-family: inherit;
    font-size: calc(28 * var(--px));
    border: 1px solid var(--line-strong);
    border-radius: calc(10 * var(--px));
    background: var(--surface);
    color: var(--ink);
}

.adm-input--time { width: calc(220 * var(--px)); }
.adm-input--short { width: calc(320 * var(--px)); }

.adm-check {
    width: calc(46 * var(--px));
    height: calc(46 * var(--px));
    accent-color: var(--accent);
}

.adm-note {
    font-size: calc(22 * var(--px));
    color: var(--ink-faint);
    margin-top: calc(8 * var(--px));
}

.adm-h2 {
    font-size: calc(30 * var(--px));
    font-weight: 600;
    margin: calc(32 * var(--px)) 0 calc(16 * var(--px));
}

.adm-saved {
    padding: calc(16 * var(--px)) calc(22 * var(--px));
    border-radius: calc(10 * var(--px));
    background: var(--go-soft);
    border: 1px solid var(--go-line);
    color: var(--go-ink);
    font-size: calc(24 * var(--px));
    margin-bottom: calc(20 * var(--px));
}

/* ---------------------------------------------------------------- orders */

.orders { display: flex; width: 100%; min-height: 0; }

.orders__queue {
    flex: 0 0 calc(460 * var(--px));
    width: calc(460 * var(--px));
    min-width: 0;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.orders__tabs {
    flex: 0 0 auto;
    display: flex;
    gap: calc(10 * var(--px));
    padding: calc(20 * var(--px)) calc(20 * var(--px)) calc(12 * var(--px));
}

.orders__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: calc(8 * var(--px)) calc(20 * var(--px)) calc(24 * var(--px));
    display: flex;
    flex-direction: column;
    gap: calc(10 * var(--px));
}

.queue-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    padding: calc(20 * var(--px)) calc(22 * var(--px));
    border: 1px solid var(--line);
    border-radius: calc(10 * var(--px));
    background: var(--surface-sunk);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.queue-row.is-selected {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.queue-row__top {
    display: flex;
    align-items: center;
    gap: calc(14 * var(--px));
    width: 100%;
    min-width: 0;
}

.queue-row__num {
    font-size: calc(40 * var(--px));
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.queue-row__time {
    margin-left: auto;
    font-size: calc(24 * var(--px));
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

.queue-row__meta {
    margin-top: calc(8 * var(--px));
    font-size: calc(22 * var(--px));
    color: #6F8B78;
}

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

.detail__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: calc(20 * var(--px));
    padding: calc(28 * var(--px)) calc(36 * var(--px)) calc(20 * var(--px));
}

.detail__num {
    font-size: calc(56 * var(--px));
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.detail__meta {
    margin-left: auto;
    font-size: calc(24 * var(--px));
    color: var(--ink-soft);
}

.detail__address {
    flex: 0 0 auto;
    margin: 0 calc(36 * var(--px)) calc(12 * var(--px));
    padding: calc(18 * var(--px)) calc(22 * var(--px));
    background: var(--surface-sunk);
    border-radius: calc(10 * var(--px));
    font-size: calc(26 * var(--px));
    color: #3F464C;
}

.detail__items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: calc(8 * var(--px)) calc(36 * var(--px)) calc(20 * var(--px));
}

.item-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: calc(10 * var(--px));
    padding: calc(20 * var(--px)) calc(24 * var(--px));
    margin-bottom: calc(12 * var(--px));
}

.item-card__top {
    display: flex;
    align-items: baseline;
    gap: calc(18 * var(--px));
}

.item-card__qty {
    flex: 0 0 auto;
    min-width: calc(46 * var(--px));
    font-size: calc(30 * var(--px));
    font-weight: 600;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.item-card__name { flex: 1; font-size: calc(32 * var(--px)); font-weight: 500; }

.item-card__price {
    font-size: calc(26 * var(--px));
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.item-card__addition {
    margin-top: calc(8 * var(--px));
    padding-left: calc(64 * var(--px));
    font-size: calc(25 * var(--px));
    color: var(--ink-soft);
}

/* The one thing on the slip that ruins the dish if it is missed. */
.item-card__note {
    margin-top: calc(10 * var(--px));
    margin-left: calc(64 * var(--px));
    font-size: calc(26 * var(--px));
    font-weight: 600;
    color: var(--stop-ink);
}

.detail__total {
    display: flex;
    align-items: baseline;
    gap: calc(16 * var(--px));
    padding: calc(16 * var(--px)) calc(24 * var(--px)) 0;
}

.detail__total-label { font-size: calc(26 * var(--px)); color: var(--ink-faint); }

.detail__total-value {
    margin-left: auto;
    font-size: calc(32 * var(--px));
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* The action bar never scrolls away — accepting is the whole job of this screen. */
.detail__actions {
    flex: 0 0 auto;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: calc(22 * var(--px)) calc(36 * var(--px)) calc(26 * var(--px));
}

.detail__action-label {
    font-size: calc(26 * var(--px));
    color: var(--ink-soft);
    margin: 0 0 calc(14 * var(--px));
}

.detail__action-row { display: flex; gap: calc(16 * var(--px)); }
.detail__action-row--wrap { flex-wrap: wrap; margin-bottom: calc(18 * var(--px)); gap: calc(12 * var(--px)); }

.detail__reasons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(12 * var(--px));
    margin-bottom: calc(18 * var(--px));
}

.detail__promise { flex: 1; font-size: calc(26 * var(--px)); color: var(--ink-soft); }

/* ---------------------------------------------------------------- menu */

.menu { display: flex; width: 100%; min-height: 0; }

.menu__cats {
    flex: 0 0 calc(300 * var(--px));
    width: calc(300 * var(--px));
    min-width: 0;
    border-right: 1px solid var(--line);
    padding: calc(20 * var(--px)) calc(16 * var(--px));
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--px));
    overflow-y: auto;
}

.menu__cat {
    flex: 0 0 auto;
    height: calc(88 * var(--px));
    padding: 0 calc(22 * var(--px));
    border: 1px solid transparent;
    border-radius: calc(10 * var(--px));
    background: transparent;
    color: var(--ink-soft);
    text-align: left;
    font-family: inherit;
    font-size: calc(27 * var(--px));
    font-weight: 500;
    cursor: pointer;
}

.menu__cat.is-on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 700;
}

.menu-row {
    display: flex;
    align-items: center;
    gap: calc(20 * var(--px));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: calc(10 * var(--px));
    padding: calc(20 * var(--px)) calc(26 * var(--px));
    margin-bottom: calc(10 * var(--px));
}

.menu-row.is-unavailable { background: #F6F7F7; color: var(--ink-faint); }

.menu-row__name { flex: 1; min-width: 0; font-size: calc(30 * var(--px)); font-weight: 500; }

.menu-row__price {
    flex: 0 0 calc(200 * var(--px));
    text-align: right;
    font-size: calc(26 * var(--px));
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.menu-row__toggle {
    flex: 0 0 calc(200 * var(--px));
    height: calc(80 * var(--px));
    border-radius: calc(10 * var(--px));
    font-family: inherit;
    font-size: calc(24 * var(--px));
    font-weight: 500;
    cursor: pointer;
    background: var(--go-soft);
    color: var(--go-ink);
    border: 1px solid var(--go-line);
}

.menu-row__toggle.is-unavailable {
    background: var(--stop-soft);
    color: var(--stop-ink);
    border-color: var(--stop-line);
}

/* The full item editor keeps living inside a Bootstrap form; it just gets tablet-sized room. */
.menu-editor {
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: calc(10 * var(--px));
    padding: calc(24 * var(--px)) calc(26 * var(--px));
    margin-bottom: calc(10 * var(--px));
    font-size: calc(22 * var(--px));
}

.menu .menu-editor .form-control,
.menu .menu-editor .form-select { font-size: calc(22 * var(--px)); height: calc(64 * var(--px)); }

/* Menu import. Onboarding lives at the bottom of the menu page, folded away behind a summary. */
.menu-import {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: calc(10 * var(--px));
    padding: calc(20 * var(--px)) calc(26 * var(--px));
    margin-top: calc(24 * var(--px));
    font-size: calc(22 * var(--px));
    line-height: 1.5;
}

.menu-import__summary {
    font-size: calc(26 * var(--px));
    font-weight: 500;
    cursor: pointer;
}

.menu-import[open] .menu-import__summary { margin-bottom: calc(18 * var(--px)); }

.menu-import__steps { padding-left: calc(32 * var(--px)); }
.menu-import__steps li { margin-bottom: calc(8 * var(--px)); }

/* .admin-body .form-control pins every field to one tablet-sized row, which flattens a textarea
   and ignores its rows attribute. The prompt is the one field that needs to be tall. */
.menu .menu-import__prompt.form-control {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: calc(18 * var(--px));
    line-height: 1.4;
    background: var(--surface-sunk);
    white-space: pre-wrap;
    height: calc(420 * var(--px));
    resize: vertical;
}

.menu-import__warning {
    background: var(--stop-soft);
    color: var(--stop-ink);
    border: 1px solid var(--stop-line);
    border-radius: calc(10 * var(--px));
    padding: calc(16 * var(--px)) calc(20 * var(--px));
}

.menu-import__status { margin-top: calc(16 * var(--px)); color: var(--ink-soft); }

.menu-import__errors {
    margin-top: calc(16 * var(--px));
    padding-left: calc(32 * var(--px));
    color: var(--stop-ink);
}

/* ---------------------------------------------------------------- hours */

.hours-row {
    display: flex;
    align-items: center;
    gap: calc(20 * var(--px));
    padding: calc(22 * var(--px)) calc(28 * var(--px));
    border-bottom: 1px solid var(--line-soft);
}

.hours-row:last-child { border-bottom: none; }
.hours-row__day { flex: 0 0 calc(220 * var(--px)); font-size: calc(28 * var(--px)); font-weight: 500; }
.hours-row__range { flex: 1; font-size: calc(28 * var(--px)); color: var(--ink-mid); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- history */

.hist__filters {
    flex: 0 0 auto;
    display: flex;
    gap: calc(10 * var(--px));
    padding: calc(24 * var(--px)) calc(36 * var(--px)) calc(12 * var(--px));
}

.hist__filters .adm-pill { flex: 0 0 calc(220 * var(--px)); }

.hist__summary {
    margin-left: auto;
    align-self: center;
    font-size: calc(24 * var(--px));
    color: var(--ink-faint);
}

.hist-item { margin-bottom: calc(10 * var(--px)); }

/* A button, not a div: the whole row opens the order, so it has to be reachable by keyboard too. */
.hist-row {
    display: flex;
    align-items: center;
    gap: calc(24 * var(--px));
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: calc(10 * var(--px));
    padding: calc(22 * var(--px)) calc(28 * var(--px));
    color: var(--ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.hist-row.is-open {
    border-color: var(--accent);
    border-bottom-color: var(--line-soft);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.hist-detail {
    background: var(--surface);
    border: 1px solid var(--accent);
    border-top: none;
    border-radius: 0 0 calc(10 * var(--px)) calc(10 * var(--px));
    padding: calc(20 * var(--px)) calc(28 * var(--px)) calc(24 * var(--px));
}

.hist-detail__line {
    display: flex;
    align-items: baseline;
    gap: calc(16 * var(--px));
    font-size: calc(25 * var(--px));
    color: var(--ink-mid);
    padding: calc(6 * var(--px)) 0;
}

.hist-detail__line span:last-child {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.hist-detail__banner {
    padding: calc(16 * var(--px)) calc(22 * var(--px));
    border-radius: calc(10 * var(--px));
    background: var(--surface-sunk);
    font-size: calc(25 * var(--px));
    color: #3F464C;
    margin-bottom: calc(14 * var(--px));
}

.hist-detail__banner--reason { background: var(--stop-soft); color: var(--stop-ink); }

.hist-detail__ref {
    margin-top: calc(14 * var(--px));
    font-size: calc(20 * var(--px));
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

.hist-row__num { flex: 0 0 calc(120 * var(--px)); font-size: calc(30 * var(--px)); font-weight: 600; font-variant-numeric: tabular-nums; }
.hist-row__time { flex: 0 0 calc(130 * var(--px)); font-size: calc(24 * var(--px)); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.hist-row__summary {
    flex: 1;
    min-width: 0;
    font-size: calc(25 * var(--px));
    color: var(--ink-mid);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hist-row .adm-state { flex: 0 0 calc(150 * var(--px)); }
.hist-row__total { flex: 0 0 calc(150 * var(--px)); text-align: right; font-size: calc(27 * var(--px)); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- configuration pages

   Kategorier, Variantgrupper, Tillvalsgrupper and Betalningar. Set up once and rarely touched, but
   still touched on the same tablet — so they get the same card, row and button language as the
   daily screens rather than a Bootstrap form. */

.cfg-intro {
    font-size: calc(24 * var(--px));
    color: var(--ink-soft);
    margin: 0 0 calc(24 * var(--px));
    max-width: calc(1100 * var(--px));
}

.cfg-group { margin-bottom: calc(16 * var(--px)); }

.cfg-head {
    display: flex;
    align-items: center;
    gap: calc(20 * var(--px));
    padding: calc(22 * var(--px)) calc(28 * var(--px));
    border-bottom: 1px solid var(--line-soft);
}

.cfg-group:has(.cfg-head:only-child) .cfg-head { border-bottom: none; }

.cfg-title {
    flex: 1;
    min-width: 0;
    font-size: calc(30 * var(--px));
    font-weight: 600;
}

.cfg-row {
    display: flex;
    align-items: center;
    gap: calc(20 * var(--px));
    padding: calc(18 * var(--px)) calc(28 * var(--px));
    border-bottom: 1px solid var(--line-soft);
}

.cfg-row__name { flex: 1; min-width: 0; font-size: calc(27 * var(--px)); }

.cfg-row__price {
    flex: 0 0 calc(180 * var(--px));
    text-align: right;
    font-size: calc(25 * var(--px));
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

/* The add row closes the card, so it owns the bottom edge. */
.cfg-add {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--px));
    padding: calc(18 * var(--px)) calc(28 * var(--px));
    background: var(--surface-sunk);
    border-bottom: none;
}

.cfg-add .adm-input { flex: 1; }
.cfg-add .adm-input--price { flex: 0 0 calc(200 * var(--px)); }

.cfg-note {
    display: flex;
    align-items: center;
    gap: calc(12 * var(--px));
    flex-wrap: wrap;
    padding: calc(18 * var(--px)) calc(28 * var(--px));
    font-size: calc(24 * var(--px));
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line-soft);
}

.cfg-note .adm-input { flex: 0 0 calc(140 * var(--px)); }

/* Destructive, so it never sits under a thumb that is aiming at something else. */
.adm-btn--danger {
    background: var(--stop-soft);
    border-color: var(--stop-line);
    color: var(--stop-ink);
}

.adm-btn--small {
    height: calc(60 * var(--px));
    padding: 0 calc(18 * var(--px));
    font-size: calc(22 * var(--px));
}

/* ---------------------------------------------------------------- pages still on Bootstrap

   Printers, Payment providers, the group editors and the account pages do more than the tablet
   mock shows (pairing, health, queue depth, Connect onboarding), so their markup is left alone and
   only sized up for touch from here. */

.admin-body h1 { font-size: calc(34 * var(--px)); }
.admin-body h2 { font-size: calc(28 * var(--px)); }
.admin-body h3 { font-size: calc(24 * var(--px)); }
.admin-body .btn { font-size: calc(20 * var(--px)); padding: calc(12 * var(--px)) calc(20 * var(--px)); }
.admin-body .btn-sm { font-size: calc(18 * var(--px)); padding: calc(9 * var(--px)) calc(16 * var(--px)); }
.admin-body .form-control,
.admin-body .form-select { font-size: calc(20 * var(--px)); height: calc(60 * var(--px)); }
.admin-body .form-check-input { width: calc(28 * var(--px)); height: calc(28 * var(--px)); }
.admin-body table { font-size: calc(20 * var(--px)); }

/* Action-bar proportions: the primary action is twice the escape hatch. */
.adm-btn--wide { flex: 2; }
.adm-btn--narrow { flex: 1; }
.detail__action-row--wrap .adm-chip { flex: 1; }


/* ================================================================ dashboard

   The landing overview. Calm and glanceable — nothing to operate. Reuses the tag / state / pill
   language of the daily screens and scales on --px like the rest. */

.dash { display: flex; flex-direction: column; gap: calc(22 * var(--px)); max-width: calc(1400 * var(--px)); }

.dash__periods { display: flex; gap: calc(10 * var(--px)); }
.dash__periods .adm-pill { flex: 0 0 calc(260 * var(--px)); }

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(14 * var(--px));
}

.dash-kpi {
    display: flex;
    flex-direction: column;
    gap: calc(6 * var(--px));
    padding: calc(24 * var(--px)) calc(26 * var(--px));
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: calc(12 * var(--px));
}

.dash-kpi__value {
    font-size: calc(44 * var(--px));
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.dash-kpi__label { font-size: calc(21 * var(--px)); color: var(--ink-faint); }

.dash-kpi--alert { border-color: var(--stop-line); background: var(--stop-soft); }
.dash-kpi--alert .dash-kpi__value,
.dash-kpi--alert .dash-kpi__label { color: var(--stop-ink); }

.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(16 * var(--px));
}

.dash-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: calc(12 * var(--px));
    padding: calc(22 * var(--px)) calc(24 * var(--px));
}

.dash-panel__title {
    font-size: calc(24 * var(--px));
    font-weight: 600;
    color: var(--ink-mid);
    margin-bottom: calc(16 * var(--px));
}

.pop-row { display: flex; align-items: center; gap: calc(16 * var(--px)); padding: calc(10 * var(--px)) 0; }
.pop-row__name {
    flex: 0 0 calc(280 * var(--px));
    font-size: calc(22 * var(--px));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pop-row__track {
    flex: 1;
    height: calc(20 * var(--px));
    background: var(--surface-sunk);
    border-radius: calc(10 * var(--px));
    overflow: hidden;
}
.pop-row__bar { display: block; height: 100%; background: var(--accent); border-radius: calc(10 * var(--px)); }
.pop-row__count { flex: 0 0 calc(56 * var(--px)); text-align: right; font-size: calc(22 * var(--px)); font-weight: 600; }

.spark { display: block; width: 100%; height: calc(150 * var(--px)); fill: var(--accent); }
.spark__scale {
    display: flex;
    justify-content: space-between;
    margin-top: calc(8 * var(--px));
    font-size: calc(19 * var(--px));
    color: var(--ink-faint);
}

.dash-order {
    display: flex;
    align-items: center;
    gap: calc(18 * var(--px));
    padding: calc(16 * var(--px)) calc(6 * var(--px));
    border-top: 1px solid var(--line-soft);
    color: var(--ink);
    text-decoration: none;
}
.dash-order:first-of-type { border-top: none; }
.dash-order:hover { background: var(--surface-sunk); }
.dash-order__num { flex: 0 0 calc(90 * var(--px)); font-size: calc(26 * var(--px)); font-weight: 700; }
.dash-order__time { flex: 0 0 calc(90 * var(--px)); font-size: calc(22 * var(--px)); color: var(--ink-faint); }
.dash-order__status { flex: 0 0 calc(150 * var(--px)); }
.dash-order__total { margin-left: auto; font-size: calc(24 * var(--px)); font-weight: 600; }


/* Desk use is real too — show where keyboard focus is on the actions that matter. */
.adm-btn:focus-visible,
.adm-pill:focus-visible,
.adm-chip:focus-visible,
.admin-nav__item:focus-visible {
    outline: calc(3 * var(--px)) solid var(--accent);
    outline-offset: calc(2 * var(--px));
}


/* ================================================================ phone + tablet portrait

   Below 1024 the 1920-wide landscape layout does not fit: the rail becomes an off-canvas drawer,
   the frame stacks and scrolls as one document, and the two-pane screens show one pane at a time.
   Landscape tablets (>=1024) keep the design above untouched. */

.detail__back { display: none; }

@media (max-width: 1023px) {
    .admin {
        --px: clamp(0.55px, calc(100vw / 600), 1px);
        flex-direction: column;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    .admin-nav {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        width: min(84vw, 340px);
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.28);
    }

    .admin-nav-toggle:checked ~ .admin-nav { transform: none; }

    .admin-nav-toggle:checked ~ .admin-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(0, 0, 0, 0.42);
    }

    .admin-nav__item,
    .admin-nav__item--minor,
    .admin-nav__item--single { flex: 0 0 auto; min-height: calc(84 * var(--px)); }

    .admin-main { min-height: 100dvh; }

    .admin-topbar {
        position: sticky;
        top: 0;
        z-index: 40;
        flex-wrap: wrap;
        height: auto;
        row-gap: calc(8 * var(--px));
        padding-top: calc(10 * var(--px));
        padding-bottom: calc(10 * var(--px));
    }

    /* Full-width second row; wraps internally so the print station (which carries a long "browser
       can't reach USB" sentence in some states) can never push the bar off-screen. Its own
       wrapping / shrinking is in PrintStation.razor.css. */
    .admin-topbar__right {
        flex-basis: 100%;
        min-width: 0;
        flex-wrap: wrap;
        row-gap: calc(6 * var(--px));
    }

    .admin-body,
    .admin-body:has(> .adm-page, > .orders, > .menu) { overflow: visible; }

    .adm-scroll,
    .orders__list,
    .detail__items,
    .menu .adm-scroll { overflow: visible; }

    /* Ordrar — one pane at a time */
    .orders { flex-direction: column; }
    .orders__queue {
        flex: 0 0 auto;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }
    .orders.is-list .orders__detail { display: none; }
    .orders.is-detail .orders__queue { display: none; }

    .detail__back {
        display: inline-flex;
        align-items: center;
        border: none;
        background: none;
        padding: 0 calc(8 * var(--px)) 0 0;
        font-family: inherit;
        font-size: calc(26 * var(--px));
        font-weight: 600;
        color: var(--accent);
        white-space: nowrap;
        cursor: pointer;
    }

    /* Header is tight next to the big order number on a phone — let the timestamp / email drop. */
    .detail__head { flex-wrap: wrap; }
    .detail__meta { flex-basis: 100%; margin-left: 0; word-break: break-word; }

    .orders__detail .detail__actions { position: sticky; bottom: 0; }

    /* Meny — category rail becomes a scrolling strip, rows wrap */
    .menu { flex-direction: column; }
    .menu__cats {
        flex: 0 0 auto;
        flex-direction: row;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--line);
        overflow-x: auto;
    }
    .menu__cat { flex: 0 0 auto; }
    .menu-row { flex-wrap: wrap; gap: calc(12 * var(--px)); }
    .menu-row__name { flex: 1 0 100%; }
    .menu-row__price { flex: 0 0 auto; text-align: left; }
    .menu-row__toggle { flex: 1 1 auto; }
    .menu-editor .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

    /* Secondary pages — let --px-fixed rows wrap instead of overflowing */
    .hist__filters { flex-wrap: wrap; }
    .hist__filters .adm-pill { flex: 1 1 auto; }
    .hist__summary { margin-left: 0; }
    .hist-row { flex-wrap: wrap; gap: calc(12 * var(--px)); }
    .hist-row__summary { flex: 1 0 100%; }
    .hours-row { flex-wrap: wrap; }
    .hours-row__range { flex: 1 0 100%; }
    .cfg-head, .cfg-row, .cfg-add, .cfg-note { flex-wrap: wrap; }

    /* Any leftover Bootstrap table scrolls sideways rather than stretching the page... */
    .admin-body table:not(.adm-datatable) { display: block; overflow-x: auto; max-width: 100%; }

    /* ...but a tagged one restacks into one card per row: the header cells go away and each body
       cell puts its column name in front (data-label on the <td>). */
    .adm-datatable,
    .adm-datatable tbody,
    .adm-datatable tr,
    .adm-datatable td { display: block; width: 100%; }

    .adm-datatable thead { display: none; }

    .adm-datatable tr {
        border: 1px solid var(--line);
        border-radius: calc(10 * var(--px));
        margin-bottom: calc(12 * var(--px));
        padding: calc(6 * var(--px)) calc(14 * var(--px));
        background: var(--surface);
    }

    .adm-datatable td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: calc(16 * var(--px));
        border: none;
        border-bottom: 1px solid var(--line-soft);
        padding: calc(12 * var(--px)) 0;
        text-align: right;
    }

    .adm-datatable td:last-child { border-bottom: none; }

    .adm-datatable td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-weight: 600;
        color: var(--ink-faint);
        text-align: left;
    }

    /* The actions cell has no label and its buttons wrap full-width. */
    .adm-datatable td.adm-datatable__actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: calc(8 * var(--px));
    }
    .adm-datatable td.adm-datatable__actions::before { content: none; }
    .adm-datatable__actions .btn { flex: 1 1 auto; }

    /* Dashboard stacks */
    .dash { max-width: 100%; }
    .dash__periods { flex-wrap: wrap; }
    .dash__periods .adm-pill { flex: 1 1 auto; }
    .dash-kpis { grid-template-columns: 1fr 1fr; }
    .dash-grid { grid-template-columns: 1fr; }
    .pop-row__name { flex: 1 1 calc(160 * var(--px)); }

    /* 24h feed row: the --px-fixed columns overrun a phone, so let them size to content and wrap. */
    .dash-order { flex-wrap: wrap; gap: calc(6 * var(--px)) calc(12 * var(--px)); }
    .dash-order__num,
    .dash-order__time,
    .dash-order__status { flex: 0 0 auto; }
}

@media (max-width: 560px) {
    .dash-kpis { grid-template-columns: 1fr; }
}