/* The application shell (restaurant staff) and the sign-in pages. Screens inside it keep their own layouts (see css/*.css). */
:root { --head-h: 56px; }
body[data-role='plain'] { background: var(--bg); }
.app { min-height: 100dvh; display: flex; flex-direction: column; }
.app-head { position: sticky; top: 0; z-index: 60; background: var(--card); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
body[data-role='kitchen'] .app-head { background: #0e1115; border-color: #2b323d; }
.app-head .in { display: flex; align-items: center; gap: 12px; min-height: var(--head-h); padding: 6px var(--gutter); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.app-head .in::-webkit-scrollbar { display: none; }
.app-head .logo { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; flex: none; } .app-head .brand { white-space: nowrap; }
.tabs { display: flex; gap: 4px; margin-left: 8px; flex: none; } .tab { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 14px; border-radius: 99px; font-weight: 700; color: var(--mute); text-decoration: none; white-space: nowrap; } .tab:hover { background: var(--line); } .tab[aria-current='page'] { background: var(--accent-soft); color: var(--accent); }
.who { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .who .nm { font-weight: 600; font-size: 14px; }
.module { flex: 1; min-width: 0; } .banner { background: var(--warn-soft); color: var(--warn); padding: 8px var(--gutter); font-weight: 600; text-align: center; }
/* sign-in: a large welcome, password with show / hide, help that says what really happens */
.login-title { font-size: 1.5rem; letter-spacing: -.02em; }
.pw-wrap { position: relative; } .pw-wrap input { width: 100%; padding-right: 76px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.login-help { margin-top: 14px; font-size: 14px; } .login-help summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.login-help p { margin: 4px 0 0; }
.login-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 14px; flex-wrap: wrap; }
/* inner sticky bars of the screens sit under the application header */
.c-head, .k-head { top: var(--head-h) !important; } .c-list { top: calc(var(--head-h) + 20px) !important; }
.o-tabs { display: flex !important; padding-top: 12px; } .o-tabs button { color: var(--mute) !important; } .o-tabs button[aria-current='page'] { background: var(--accent-soft) !important; color: var(--accent) !important; }
@media (max-width: 640px) { .app-head .who .nm { display: none; } .app-head .brand { max-width: 120px; overflow: hidden; text-overflow: ellipsis; } }
/* staff screen */
.stafflist { display: grid; } .srow { display: grid; gap: 8px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); grid-template-columns: 1fr; } .srow:last-child { border-bottom: 0; }
.srow select { min-height: 40px; }
.creds { background: var(--bg); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 12px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; }
@media (min-width: 900px) { .srow { grid-template-columns: minmax(180px, 1.4fr) 200px 110px 1fr auto; } }
/* header controls never shrink below a fingertip; the row scrolls sideways if it must */
.app-head .in > * { flex: none; } .app-head .in > .grow { flex: 1 0 8px; }
.app-head .btn { min-height: 40px; white-space: nowrap; }
.login-links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; }

/* ── polish (2026-09-23) ── */
/* Owner / manager sections: the second row of tabs is a quieter, underlined sub-navigation (not a copy of the main tabs), and every owner screen
   uses the same centred column as Menu and Staff (.wrap: 1240px), so pages no longer jump between full-width and centred. */
.o-wrap .o-tabs { gap: 2px; padding: 6px max(var(--gutter), calc((100% - 1240px) / 2 + var(--gutter))) 0 !important; border-bottom: 1px solid var(--line); background: var(--card); }
.o-wrap .o-tabs button { border-radius: 0 !important; background: transparent !important; border-bottom: 2px solid transparent !important; min-height: 42px; padding: 4px 12px; font-weight: 600; }
.o-wrap .o-tabs button:hover { color: var(--ink) !important; }
.o-wrap .o-tabs button[aria-current='page'] { background: transparent !important; color: var(--accent) !important; border-bottom-color: var(--accent) !important; font-weight: 700; }
.o-wrap .o-main { max-width: 1240px; }
/* A phone header keeps the live dot but drops its word, so nothing runs off the right edge. */
@media (max-width: 640px) { .app-head .conn > span { display: none; } .app-head .who .badge { display: none; } }
/* Kitchen (dark): status and role badges readable from across the room. */
body[data-role='kitchen'] .badge.s-submitted, body[data-role='kitchen'] .badge.s-kitchen_received, body[data-role='kitchen'] .badge.s-new, body[data-role='kitchen'] .badge.s-pending { background: #4a3408; color: #fcd34d; }
body[data-role='kitchen'] .badge.s-ready, body[data-role='kitchen'] .badge.s-served, body[data-role='kitchen'] .badge.s-success, body[data-role='kitchen'] .badge.s-paid, body[data-role='kitchen'] .badge.s-succeeded, body[data-role='kitchen'] .badge.s-closed { background: #12351f; color: #86efac; }
body[data-role='kitchen'] .badge.s-open, body[data-role='kitchen'] .badge.s-bill_generated, body[data-role='kitchen'] .badge.s-occupied { background: #1e2f55; color: #bfdbfe; }
body[data-role='kitchen'] .badge.s-failed, body[data-role='kitchen'] .badge.s-rejected, body[data-role='kitchen'] .badge.s-cancelled { background: #4a1d1d; color: #fca5a5; }
/* Narrow phones: optional header extras step aside so the essential buttons (Sign out) stay on screen; long status badges wrap. */
@media (max-width: 480px) { .hide-narrow { display: none !important; } }
.kv .v .badge { white-space: normal; text-align: center; }

/* ── screen-to-screen motion (View Transitions; see transition() in main.js) ──
   The header is its own layer, so it never moves; only the screen below slides, forward or back like a phone app. */
/* Only WHILE a slide plays (html.sliding): a named layer is its own stacking context, which would otherwise trap full-screen panels (the counter's
   table view on phones) under the header. */
html.sliding .app-head { view-transition-name: app-head; }
html.sliding main.module { view-transition-name: screen; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(screen) { animation-duration: 320ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  ::view-transition-old(screen) { animation: 220ms cubic-bezier(.4, 0, 1, 1) both screen-out; }
  ::view-transition-new(screen) { animation: 320ms cubic-bezier(.2, .8, .2, 1) both screen-in; }
  html[data-nav='back']::view-transition-old(screen) { animation-name: screen-out-back; }
  html[data-nav='back']::view-transition-new(screen) { animation-name: screen-in-back; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; } /* a skin change (kitchen is dark) cross-fades */
}
@keyframes screen-out { to { opacity: 0; transform: translateX(-28px); } }
@keyframes screen-in { from { opacity: 0; transform: translateX(44px); } }
@keyframes screen-out-back { to { opacity: 0; transform: translateX(28px); } }
@keyframes screen-in-back { from { opacity: 0; transform: translateX(-44px); } }
/* the tab highlight glides to its new place instead of jumping */
.tab { transition: background-color .2s ease, color .2s ease; }
/* the owner screens' own section tabs stay put while the section below slides */
html.sliding .o-wrap > .o-tabs { view-transition-name: sub-tabs; }

/* Stock count: a comfortable box to type in; on a phone each ingredient is a small card (name and book figure, the box, the difference). */
table.count-sheet td.qty input { min-width: 110px; }
@media (max-width: 600px) {
  table.count-sheet thead { display: none; }
  table.count-sheet tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.count-sheet td { border: 0; padding: 0; }
  table.count-sheet td.book::before { content: 'Books: '; color: var(--mute); font-size: 12.5px; }
  table.count-sheet td.qty, table.count-sheet td.df { grid-column: 1 / -1; }
  table.count-sheet td.qty input { min-width: 0; }
}

/* Clock-in & checks: the PIN pad on the restaurant's shared device (big keys for wet or gloved fingers), and today's checklists beside it. */
.daily-grid { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .daily-grid { grid-template-columns: minmax(300px, 400px) 1fr; } }
.pin-card { text-align: center; }
.pin-dots { display: flex; justify-content: center; gap: 14px; padding: 6px 0; }
.pin-dots span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); transition: background .12s, border-color .12s; }
.pin-dots span.on { background: var(--accent); border-color: var(--accent); }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pinpad .btn { min-height: 64px; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pin-said { min-height: 48px; padding: 10px; border-radius: var(--radius-sm); font-weight: 700; font-size: 17px; }
.pin-said:empty { padding: 0; }
.pin-said.in { background: var(--ok-soft); color: var(--ok); } .pin-said.out { background: var(--info-soft); color: var(--info); } .pin-said.bad { background: var(--bad-soft); color: var(--bad); }
.pin-show { font-size: 44px; font-weight: 800; letter-spacing: .3em; text-align: center; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.cl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cl-row:last-child { border-bottom: 0; }
.cl-list { display: grid; gap: 0; }
.cl-item { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cl-item .cl-label { flex: 1 1 220px; font-weight: 600; margin: 0; }
.cl-item .btn[aria-pressed='true'] { box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); }
.ct-item { padding: 10px; }

/* Attendance sheet: one row per person, one small cell per day; the name column stays in place while the days scroll sideways. */
table.att-sheet { font-size: 13px; }
table.att-sheet th.dcol { text-align: center; padding: 4px 1px; min-width: 26px; } table.att-sheet th.dcol .wd { font-size: 10px; }
table.att-sheet th.sun { color: var(--bad); } table.att-sheet th.today, table.att-sheet td.today { background: var(--accent-soft); }
table.att-sheet .sticky { position: sticky; left: 0; background: var(--card); z-index: 1; min-width: 130px; box-shadow: 1px 0 0 var(--line); }
table.att-sheet td.dcell { padding: 2px 1px; text-align: center; }
table.att-sheet td.dcell button { position: relative; width: 24px; height: 30px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-weight: 700; cursor: pointer; color: var(--mute); }
table.att-sheet td.dcell button:hover { outline: 2px solid var(--line-strong); }
table.att-sheet td.dcell button:focus-visible { outline: 2px solid var(--accent); }
td.c-p button { background: var(--ok-soft) !important; color: var(--ok) !important; } td.c-h button { background: var(--warn-soft) !important; color: var(--warn) !important; }
td.c-a button { background: var(--bad-soft) !important; color: var(--bad) !important; } td.c-l button { background: var(--info-soft) !important; color: var(--info) !important; }
td.c-o button { background: var(--line) !important; color: var(--mute) !important; } td.c-q button { color: var(--warn) !important; outline: 1px dashed var(--warn); }
.dot-open, .dot-fix { position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; }
.dot-open { background: var(--bad); } .dot-fix { background: var(--info); top: auto; bottom: 2px; }
.mark-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }

/* Staff phase 2: late and overtime on the attendance sheet, the rota grid, shift chips. */
.kpis.six { grid-template-columns: repeat(2, 1fr); } @media (min-width: 640px) { .kpis.six { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .kpis.six { grid-template-columns: repeat(6, 1fr); } }
.warnc { color: var(--warn); }
table.att-sheet td.dcell.is-late button { box-shadow: inset 0 -3px 0 var(--warn); }
table.att-sheet td.dcell.is-ot button::after { content: ''; position: absolute; top: 0; left: 0; border-top: 7px solid var(--ink); border-right: 7px solid transparent; border-top-left-radius: 6px; opacity: .55; }
table.rota-sheet th.rcol { text-align: center; white-space: nowrap; font-size: 11.5px; padding: 6px 4px; } table.rota-sheet th.today, table.rota-sheet td.today { background: var(--accent-soft); }
table.rota-sheet .sticky { position: sticky; left: 0; background: var(--card); z-index: 1; min-width: 150px; box-shadow: 1px 0 0 var(--line); }
table.rota-sheet td.rcell { padding: 4px 3px; text-align: center; }
table.rota-sheet td.rcell button { position: relative; width: 100%; min-width: 84px; min-height: 36px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: inherit; cursor: pointer; padding: 2px; }
table.rota-sheet td.rcell button:hover { border-color: var(--line-strong); } table.rota-sheet td.rcell button:focus-visible { outline: 2px solid var(--accent); }
table.rota-sheet td.rcell button.changed::after { content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--info); }
.shift-chip { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.shift-chip.sc0 { background: var(--accent-soft); color: var(--accent); } .shift-chip.sc1 { background: var(--info-soft); color: var(--info); } .shift-chip.sc2 { background: var(--ok-soft); color: var(--ok); }
.shift-chip.sc3 { background: var(--warn-soft); color: var(--warn); } .shift-chip.sc4 { background: #ede9fe; color: #6d28d9; } .shift-chip.sc5 { background: #fce7f3; color: #be185d; }
.shift-chip.off { background: transparent; color: var(--mute); border: 1px dashed var(--line-strong); font-weight: 600; } .shift-chip.leave { background: var(--info-soft); color: var(--info); }
.btn.linkish { padding: 0; min-height: 0; border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 12.5px; }