/* Caterer.PRO's design system (docs/analysis/03 §5, CONSTITUTION C11): quiet and corporate, one accent, light and dark.
   Every screen uses these tokens and components. The security policy allows no inline styles: anything dynamic is set with
   style.setProperty from a script. The Android app reads --c-bg, --c-text and --c-accent from a screen (android/README). */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/ui/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ğ, ş, İ and ₺ are here. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/ui/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  /* The accent is a placeholder until the founder chooses one (HANDOFF §7). */
  --c-accent: #2457c5; --c-accent-hover: #1d48a6; --c-accent-text: #ffffff; --c-accent-soft: #e9effc;
  --c-bg: #f5f6f8; --c-surface: #ffffff; --c-surface-2: #f0f2f5; --c-text: #1b2230; --c-muted: #5d6676; --c-line: #e1e4ea; --c-line-strong: #c9ced8;
  --c-ok: #1a7f4b; --c-ok-soft: #e5f4ec; --c-warn: #9a5800; --c-warn-soft: #fcf1e1; --c-danger: #c42b2b; --c-danger-soft: #fbe9e9; --c-info: #2457c5; --c-info-soft: #e9effc;
  --c-test: #b3261e; --c-focus: rgba(36, 87, 197, 0.35); --c-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --fs-xs: 12px; --fs-s: 13px; --fs-m: 14px; --fs-l: 16px; --fs-xl: 20px; --fs-xxl: 24px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --r-s: 6px; --r-m: 8px; --r-l: 12px;
  --sidebar: 248px; --topbar: 56px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-accent: #7aa2ff; --c-accent-hover: #9bb9ff; --c-accent-text: #0b1220; --c-accent-soft: #1c2a47;
    --c-bg: #0f141b; --c-surface: #161c25; --c-surface-2: #1c2330; --c-text: #e5e9f0; --c-muted: #9aa4b3; --c-line: #273041; --c-line-strong: #364256;
    --c-ok: #4cc38a; --c-ok-soft: #14301f; --c-warn: #f0b04a; --c-warn-soft: #33260f; --c-danger: #ff7070; --c-danger-soft: #3a1717; --c-info: #7aa2ff; --c-info-soft: #1c2a47;
    --c-test: #e5534b; --c-focus: rgba(122, 162, 255, 0.4); --c-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-accent: #7aa2ff; --c-accent-hover: #9bb9ff; --c-accent-text: #0b1220; --c-accent-soft: #1c2a47;
  --c-bg: #0f141b; --c-surface: #161c25; --c-surface-2: #1c2330; --c-text: #e5e9f0; --c-muted: #9aa4b3; --c-line: #273041; --c-line-strong: #364256;
  --c-ok: #4cc38a; --c-ok-soft: #14301f; --c-warn: #f0b04a; --c-warn-soft: #33260f; --c-danger: #ff7070; --c-danger-soft: #3a1717; --c-info: #7aa2ff; --c-info-soft: #1c2a47;
  --c-test: #e5534b; --c-focus: rgba(122, 162, 255, 0.4); --c-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* A caterer's own accent (MILESTONES 1.11): the frame sets --brand and its variants (common.js applyBrand) and marks the root data-brand. */
:root[data-brand] { --c-accent: var(--brand); --c-accent-hover: var(--brand-hover); --c-accent-text: var(--brand-text); --c-accent-soft: var(--brand-soft); --c-focus: var(--brand-focus); }
@media (prefers-color-scheme: dark) {
  :root[data-brand]:not([data-theme="light"]) { --c-accent: var(--brand-dark); --c-accent-hover: var(--brand-dark-hover); --c-accent-text: #0b1220; --c-accent-soft: var(--brand-dark-soft); }
}
:root[data-brand][data-theme="dark"] { --c-accent: var(--brand-dark); --c-accent-hover: var(--brand-dark-hover); --c-accent-text: #0b1220; --c-accent-soft: var(--brand-dark-soft); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--c-bg); color: var(--c-text); font: 400 var(--fs-m)/1.45 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "tnum"; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-xxl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-l); }
p { margin: 0; }
a { color: var(--c-accent); text-decoration: none; } a:hover { text-decoration: underline; }
.muted { color: var(--c-muted); } .small { font-size: var(--fs-s); } .mono { font-variant-numeric: tabular-nums; } .struck > :first-child { text-decoration: line-through; color: var(--c-muted); }
/* A long unbroken value, a certificate fingerprint say, wraps rather than leaving its card. */
.break { overflow-wrap: anywhere; }
.hidden { display: none !important; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; }

/* ---------- Layout helpers ---------- */
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.stack.tight { gap: var(--sp-2); } .stack.loose { gap: var(--sp-5); }
.row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.row.end { justify-content: flex-end; } .row.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- The TEST band (CONSTITUTION B2) ---------- */
.test-band { background: var(--c-test); color: #fff; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-align: center; padding: 3px var(--sp-3); }

/* ---------- Console shell: sidebar, top bar, content ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--c-surface); border-right: 1px solid var(--c-line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: var(--sp-2); height: var(--topbar); padding: 0 var(--sp-4); border-bottom: 1px solid var(--c-line); font-weight: 650; letter-spacing: -0.01em; }
.price-amount { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.brand-logo { display: block; max-height: 28px; max-width: 140px; object-fit: contain; }
.print-logo { display: block; max-height: 48px; max-width: 200px; object-fit: contain; }
.brand-preview { display: block; max-height: 96px; max-width: 320px; object-fit: contain; padding: var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-s); background: #ffffff; }
.brand-mark { width: 26px; height: 26px; border-radius: var(--r-s); background: var(--c-accent); color: var(--c-accent-text); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.brand-name { font-size: var(--fs-l); }
.sidebar .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nav { padding: var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: 2px; }
.nav-section { font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); text-transform: none; letter-spacing: 0.04em; padding: var(--sp-4) var(--sp-3) var(--sp-1); }
.nav-item { display: flex; align-items: center; gap: var(--sp-3); padding: 7px var(--sp-3); border-radius: var(--r-s); color: var(--c-text); font-weight: 500; cursor: pointer; border: 0; background: none; font: inherit; text-align: left; width: 100%; }
.nav-item:hover { background: var(--c-surface-2); text-decoration: none; }
.nav-item[aria-current="page"] { background: var(--c-accent-soft); color: var(--c-accent); }
.nav-item svg { width: 18px; height: 18px; flex: none; }
.sidebar-foot { margin-top: auto; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line); font-size: var(--fs-xs); color: var(--c-muted); }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar); background: var(--c-surface); border-bottom: 1px solid var(--c-line); display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-5); position: sticky; top: 0; z-index: 5; }
.topbar-title { font-weight: 600; font-size: var(--fs-l); }
.topbar .who { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-muted); font-size: var(--fs-s); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent); display: grid; place-items: center; font-weight: 600; font-size: 12px; }
/* A caterer's own address (3.9): the label typed, the domain after it. */
.address-field { display: flex; align-items: center; gap: var(--sp-2); }
.address-field input { flex: 1; min-width: 0; max-width: 16rem; }
/* The bell (3.8): its unread count as a small badge on its corner. */
.bell { position: relative; }
.bell-count { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--c-danger); color: #ffffff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.inbox-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 60vh; overflow: auto; min-width: min(480px, 80vw); }
.inbox-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-s, 6px); }
.inbox-item p { margin: 0; }
.inbox-item.unread { border-left: 3px solid var(--c-info); background: var(--c-info-soft); }
.inbox-head { display: flex; justify-content: space-between; gap: var(--sp-3); width: 100%; }
.icon-btn { width: 36px; height: 36px; border-radius: var(--r-s); border: 0; background: none; color: var(--c-text); display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { background: var(--c-surface-2); }
.icon-btn svg { width: 20px; height: 20px; }
.content { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); max-width: 1200px; width: 100%; position: relative; min-height: 60vh; }
/* Loading (CONSTITUTION C15): a bar while requests are in flight, a mask with a spinner over a page being drawn, placeholder lines for a
   part being updated, and a spinner in a busy button. They fade in after a tenth of a second, so quick loads don't flicker. */
.busy-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .15s; }
.busy-bar.on { opacity: 1; transition-delay: .1s; }
.busy-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--c-accent); animation: busy-slide 1.1s ease-in-out infinite; }
@keyframes busy-slide { to { left: 100%; } }
.loading-mask { position: absolute; inset: 0; z-index: 4; display: flex; justify-content: center; align-items: flex-start; background: color-mix(in srgb, var(--c-bg) 72%, transparent); border-radius: var(--r-m); animation: mask-in .15s ease-out .1s both; }
.loading-mask .spinner { position: sticky; top: 35vh; margin-top: min(30vh, 180px); }
@keyframes mask-in { from { opacity: 0; } to { opacity: 1; } }
.spinner { display: inline-block; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--c-line-strong); border-top-color: var(--c-accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.page-spinner { display: flex; justify-content: center; padding: 15vh 0; }
.skeleton-block { display: grid; gap: var(--sp-3); padding: var(--sp-3) 0; }
.skeleton-line { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-line) 50%, var(--c-surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.skeleton-line.short { width: 60%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.btn.busy { position: relative; color: transparent !important; }
.btn.busy > * { visibility: hidden; }
.btn.busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--c-line-strong); border-top-color: var(--c-accent); animation: spin .8s linear infinite; }
.btn.primary.busy::after { border-color: rgba(255, 255, 255, .45); border-top-color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .skeleton-line { animation: none; } .spinner, .btn.busy::after { animation-duration: 2s; } .busy-bar::before { animation-duration: 2.5s; } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.page-head p { color: var(--c-muted); margin-top: var(--sp-1); }
#menu-toggle, #app-menu { display: none; }
/* Narrow screens: the sidebar slides over the content. Inside the app, its own drawer has the screens, so the button opens that. */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 20; width: min(var(--sidebar), 86vw); transform: translateX(-100%); transition: transform 0.18s ease-out; box-shadow: var(--c-shadow); }
  .shell.open .sidebar { transform: none; }
  .scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 15; }
  .shell:not(.open) .scrim { display: none; }
  #menu-toggle { display: grid; }
  .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
  /* A phone's bar keeps the avatar and icons; the name and the theme's word make room. */
  .topbar .who .who-name, #theme .label { display: none; }
  /* The language button as its code on a narrow screen (1.22); the whole text stays the button's own, and its title. */
  .topbar #lang .label, .portal-top #lang .label { display: none; }
  .topbar #lang::after, .portal-top #lang::after { content: attr(data-short); font-weight: 600; }
  #theme { width: 36px; padding: 0; }
  .content { padding: var(--sp-4); }
}
@media (min-width: 861px) { .scrim { display: none; } }
/* The app's tablet and phone screens (manage.js SCREENS): no sidebar, the screen's pages as tabs, bigger targets for fingers. */
.screen-mode .shell { grid-template-columns: minmax(0, 1fr); }
.screen-mode .sidebar, .screen-mode .scrim, .screen-mode #menu-toggle { display: none; }
.screen-tabs { display: flex; gap: var(--sp-1); overflow-x: auto; padding: var(--sp-2) var(--sp-4); background: var(--c-surface); border-bottom: 1px solid var(--c-line); position: sticky; top: var(--topbar); z-index: 4; }
.screen-tab { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--r-m); color: var(--c-muted); font-weight: 600; white-space: nowrap; text-decoration: none; }
.screen-tab[aria-current="page"] { background: var(--c-accent-soft, var(--c-info-soft)); color: var(--c-accent); }
.screen-mode .content .btn { min-height: 44px; }
.screen-mode .content .btn.small { min-height: 40px; padding: 0 var(--sp-3); }
.screen-mode .content input, .screen-mode .content select { min-height: 44px; }
.in-app #menu-toggle { display: none; }
.in-app #app-menu { display: grid; }

/* ---------- Cards ---------- */
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-l); box-shadow: var(--c-shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-line); }
.card-body { padding: var(--sp-5); }
.card-body.flush { padding: 0; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 36px; padding: 0 var(--sp-4); border-radius: var(--r-m); border: 1px solid var(--c-line-strong);
  background: var(--c-surface); color: var(--c-text); font: 500 var(--fs-m) var(--font); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--c-surface-2); text-decoration: none; }
.btn.primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-text); }
.btn.primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.btn.danger { color: var(--c-danger); border-color: var(--c-line-strong); }
.btn.quiet { border-color: transparent; background: none; color: var(--c-muted); }
.btn.quiet:hover { background: var(--c-surface-2); color: var(--c-text); }
.btn.small { height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-s); }
.btn.block { width: 100%; height: 42px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-size: var(--fs-s); font-weight: 500; }
.field .hint { font-size: var(--fs-xs); color: var(--c-muted); }
.input, input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="month"], input[type="time"], input[type="email"], select, textarea {
  height: 38px; padding: 0 var(--sp-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-m); background: var(--c-surface); color: var(--c-text); font: inherit; width: 100%; }
textarea { height: auto; min-height: 88px; padding: var(--sp-2) var(--sp-3); resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-focus); }
input[aria-invalid="true"] { border-color: var(--c-danger); }
.check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-m); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--c-accent); }
/* A record's rows (ui.js recordForm, "lines"): one per line, its fields side by side. */
.lines { display: flex; flex-direction: column; gap: var(--sp-2); }
.line-row { display: flex; gap: var(--sp-2); align-items: center; }
.line-row input, .line-row select { flex: 1; min-width: 0; }
/* The first field of a row is its name (a checklist item's, a recipe's product): it gets the most room. */
.line-row > :first-child { flex: 2; }
.checks.days { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-2) var(--sp-4); }
.form-error { color: var(--c-danger); font-size: var(--fs-s); min-height: 1em; }
.form-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); padding-top: var(--sp-2); }

/* ---------- Tables ---------- */
.table-tools { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); }
.table-tools input[type="search"] { max-width: 320px; }
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-m); }
.table th { text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted); letter-spacing: 0.02em; padding: var(--sp-2) var(--sp-4); background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.table th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.table th[aria-sort="ascending"] button::after { content: "▲"; font-size: 9px; }
.table th[aria-sort="descending"] button::after { content: "▼"; font-size: 9px; }
.table td { padding: 10px var(--sp-4); border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover { background: var(--c-surface-2); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td select { min-width: 170px; height: 32px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line); font-size: var(--fs-s); color: var(--c-muted); }

/* ---------- Badges, notices, empty states ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 var(--sp-2); border-radius: 99px; font-size: var(--fs-xs); font-weight: 600; background: var(--c-surface-2); color: var(--c-muted); white-space: nowrap; }
.badge.ok { background: var(--c-ok-soft); color: var(--c-ok); } .badge.warn { background: var(--c-warn-soft); color: var(--c-warn); }
.badge.danger { background: var(--c-danger-soft); color: var(--c-danger); } .badge.info { background: var(--c-info-soft); color: var(--c-info); }
.badge.test { background: var(--c-test); color: #fff; }
/* A record's history (1.19): a quiet line down the left of each change. */
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.history > li { border-left: 2px solid var(--c-line-strong); padding-left: var(--sp-3); }
.history ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); }
.notice { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); background: var(--c-info-soft); color: var(--c-text); font-size: var(--fs-m); }
.notice.warn { background: var(--c-warn-soft); } .notice.danger { background: var(--c-danger-soft); } .notice.ok { background: var(--c-ok-soft); }
.empty { padding: var(--sp-6) var(--sp-5); text-align: center; color: var(--c-muted); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.empty h3 { color: var(--c-text); }

/* ---------- The setup checklist ---------- */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--c-line); }
.checklist li:last-child { border-bottom: 0; }
.checklist .tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-line-strong); flex: none; display: grid; place-items: center; }
.checklist li.done .tick { background: var(--c-ok); border-color: var(--c-ok); color: #fff; }
.checklist li.done .tick::after { content: "✓"; font-size: 12px; font-weight: 700; }
.progress { height: 6px; background: var(--c-surface-2); border-radius: 99px; overflow: hidden; }
.progress > span { display: block; height: 100%; width: var(--done, 0%); background: var(--c-ok); }

/* ---------- Dialogs and toasts ---------- */
dialog.dialog { border: 0; border-radius: var(--r-l); padding: 0; width: min(560px, calc(100vw - 32px)); background: var(--c-surface); color: var(--c-text); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); }
dialog.dialog::backdrop { background: rgba(15, 20, 27, 0.45); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-line); }
.dialog-body { padding: var(--sp-5); max-height: calc(100vh - 200px); overflow-y: auto; }
.dialog-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--c-line); background: var(--c-surface-2); border-radius: 0 0 var(--r-l) var(--r-l); }
.toasts { position: fixed; bottom: var(--sp-5); right: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); z-index: 50; }
.toast { background: var(--c-text); color: var(--c-bg); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); box-shadow: var(--c-shadow); font-size: var(--fs-m); max-width: 360px; }
.toast.danger { background: var(--c-danger); color: #fff; }

/* ---------- Login and plain pages ---------- */
.center-page { min-height: 100vh; display: flex; flex-direction: column; }
.center-page .center { flex: 1; display: grid; place-items: center; padding: var(--sp-5) var(--sp-4); }
.login-card { width: min(400px, 100%); }
.login-card .card-body { display: flex; flex-direction: column; gap: var(--sp-4); }
.login-brand { display: flex; align-items: center; gap: var(--sp-3); }
.login-brand .brand-mark { width: 36px; height: 36px; font-size: 16px; }
.page-foot { text-align: center; color: var(--c-muted); font-size: var(--fs-xs); padding: var(--sp-4); }

/* A record's own page, such as a recipe's card: figures side by side, a list of facts, and text kept as it was written. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-4); }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat strong { font-size: var(--fs-xl, 22px); font-weight: 650; font-variant-numeric: tabular-nums; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-5); margin: 0; }
.facts dt { color: var(--c-muted); } .facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.pre { white-space: pre-wrap; margin: 0; }

/* Printing a page, a recipe card for the kitchen say: the page alone, without the console around it. The TEST band stays (B2). */
@media print {
  .sidebar, .topbar, .scrim, .page-head .row, .table-tools, .pager, .btn { display: none !important; }
  .shell { display: block; }
  .content { padding: 0; max-width: none; }
  .card { break-inside: avoid; box-shadow: none; }
  body { background: #fff; color: #000; }
}

/* The monthly plan's grid: a column per course, a row per day; closed days and half days marked, a meal over its target in warning. */
.plan-bar { flex-wrap: wrap; align-items: center; }
.plan-bar select { width: auto; min-width: 200px; }
.plan-month { min-width: 140px; text-align: center; }
.plan-grid { font-size: var(--fs-s); }
.plan-grid th.meal { text-align: center; border-bottom: 1px solid var(--c-line); }
.plan-grid th.day { position: sticky; left: 0; background: var(--c-surface); white-space: nowrap; vertical-align: top; }
.plan-grid td.cell { min-width: 150px; padding: 4px; vertical-align: top; }
.plan-grid .cell-btn { all: unset; display: block; width: 100%; box-sizing: border-box; padding: 6px 8px; border-radius: var(--r-s, 6px); cursor: pointer; }
.plan-grid .cell-btn:hover, .plan-grid .cell-btn:focus-visible { background: var(--c-surface-2); outline: 2px solid var(--c-focus); }
.plan-grid .dish { font-weight: 600; }
.plan-grid tr.closed td, .plan-grid tr.closed th { background: var(--c-surface-2); }
.plan-grid tr.week td { background: var(--c-bg); padding: 6px 8px; }
.plan-grid td.total { white-space: nowrap; vertical-align: top; }
.plan-grid td.total.over, .stat strong.over { color: var(--c-warn); }

/* A plan cell that breaks a planning rule (rules.js): orange when it warns, red when it blocks publishing. */
.plan-grid td.cell.breach.warn { box-shadow: inset 3px 0 0 var(--c-warn); }
.plan-grid td.cell.breach.block { box-shadow: inset 3px 0 0 var(--c-danger); }
.breaches { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }

/* The printed monthly menu (manage.js printPage): a calendar of weeks on a landscape page, or a list of days on an upright one. */
.pm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.pm-head h2 { margin: 0; }
.pm-calendar, .pm-list { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-s); }
.pm-calendar th, .pm-list th { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--c-line-strong); }
.pm-calendar td, .pm-list td, .pm-list tbody th { vertical-align: top; padding: 6px 8px; border: 1px solid var(--c-line); }
.pm-list tbody th { width: 160px; font-weight: 600; border-bottom: 1px solid var(--c-line); }
.pm-calendar td.pm-off, .pm-calendar td.pm-empty { background: var(--c-surface-2); }
.pm-date { font-weight: 700; margin-bottom: 4px; }
.pm-half, .pm-closed { color: var(--c-muted); font-weight: 400; }
.pm-meal + .pm-meal { margin-top: 6px; }
.pm-meal-name { font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; color: var(--c-muted); }
.pm-meal ul { margin: 0; padding-left: 16px; }
.pm-allergens, .pm-variant { color: var(--c-muted); font-size: var(--fs-xs); }
.pm-energy { font-size: var(--fs-xs); margin-top: 2px; }
.pm-notes p { margin: 0; }
@page landscape { size: A4 landscape; margin: 10mm; }
@page upright { size: A4 portrait; margin: 12mm; }
/* The whole document takes the sheet's page, so nothing around it starts a page of its own (found printing to PDF, 2026-11-04). */
body:has(.print-sheet.calendar) { page: landscape; }
body:has(.print-sheet.list) { page: upright; }
@media print {
  .print-controls, .page-head:has(+ .print-controls) { display: none !important; }
  /* The sheet carries its own TEST mark (B2), so the band doesn't print as a page of its own. */
  body:has(.print-sheet) .test-band { display: none !important; }
  .print-sheet { border: 0; }
  .print-sheet .card-body { padding: 0; }
  .pm-calendar tr, .pm-list tr { break-inside: avoid; }
}

/* A client's statement (manage.js statementPage): an upright A4 sheet, totals beside the notice that it isn't an invoice. */
.pm-list.statement { table-layout: auto; }
.pm-list.statement th.num, .pm-list.statement td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-list.statement td:first-child { white-space: nowrap; }
.pm-list.statement tr.carried td { font-weight: 600; background: var(--c-surface-2); }
.statement-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-5); flex-wrap: wrap; }
.statement-foot p { margin: 0 0 4px; }
.statement-foot .facts { min-width: 280px; margin-left: auto; }
/* On a phone (the portal's Cari tab), the table scrolls inside its card rather than pushing the page sideways. */
.portal-account .card-body { overflow-x: auto; }
@media (max-width: 640px) { .pm-list.statement { font-size: var(--fs-xs); } .pm-list.statement th, .pm-list.statement td { padding: 4px 6px; } .statement-foot .facts { min-width: 0; width: 100%; } }

/* The client portal (portal.html): a plain page for a phone as much as a desktop. */
.portal-shell { max-width: 900px; margin: 0 auto; }
.portal-top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-line); background: var(--c-surface); }
.portal-tabs { gap: var(--sp-2); }
.portal-menu .portal-day { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); }
.portal-menu .portal-day:last-child { border-bottom: 0; }
.portal input[type="number"] { max-width: 120px; }
/* Teslimat (driver.html): a phone in a van. Big targets, one stop a card. */
.driver-top { gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); position: sticky; top: 0; z-index: 5; }
.driver-top .grow { min-width: 0; }
.driver-top #who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.driver .content { padding: var(--sp-4); }
.driver-head h2 { margin: 0; }
.driver-route { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.driver-stop.done { opacity: .8; }
.driver-stop.problem { border-color: var(--c-danger); }
.driver-facts { gap: var(--sp-4); flex-wrap: wrap; }
.driver-list { list-style: none; margin: 0; padding: 0; }
.driver-list li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-line); }
.driver-list li:last-child { border-bottom: 0; }
.driver-actions { flex-wrap: wrap; gap: var(--sp-2); }
.driver-actions .btn { min-height: 44px; }
/* Rota önerisi (8.2): a wider dialog, the two plots side by side, a colour per route. */
dialog.dialog:has(.optimise) { width: min(1040px, calc(100vw - 32px)); }
.optimise-plots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
.plot { margin: 0; }
.plot svg { display: block; width: 100%; height: auto; background: var(--c-surface-2); border-radius: var(--r-m); }
.plot-kitchen { fill: var(--c-text); }
.plot-stop { fill: var(--c-surface); stroke: var(--c-text); stroke-width: 1.5; }
.plot-stop.late { fill: var(--c-danger); stroke: var(--c-danger); }
.plot-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.plot-line.r0 { stroke: #2563eb; } .plot-line.r1 { stroke: #16a34a; } .plot-line.r2 { stroke: #ea580c; } .plot-line.r3 { stroke: #9333ea; }
.plot-line.r4 { stroke: #db2777; } .plot-line.r5 { stroke: #0891b2; } .plot-line.r6 { stroke: #ca8a04; } .plot-line.r7 { stroke: #64748b; }
.optimise-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
.optimise-route { border: 1px solid var(--c-line); border-radius: var(--r-m); padding: var(--sp-3); }
.optimise-route ol { margin: var(--sp-2) 0 0; padding-left: 1.4em; }
.optimise-route li { padding: 2px 0; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: baseline; }
.swatch.r0 { background: #2563eb; } .swatch.r1 { background: #16a34a; } .swatch.r2 { background: #ea580c; } .swatch.r3 { background: #9333ea; }
.swatch.r4 { background: #db2777; } .swatch.r5 { background: #0891b2; } .swatch.r6 { background: #ca8a04; } .swatch.r7 { background: #64748b; }
.btn.small.on { background: var(--c-info-soft); border-color: var(--c-info); color: var(--c-info); }
.code-chips { flex-wrap: wrap; }
.danger-text { color: var(--c-danger); font-weight: 600; }
/* The inspection file (4.8): a row an inspector should look at twice. */
.table tr.flagged td { background: var(--c-danger-soft); }
.inspection-totals { margin: 0; padding-left: var(--sp-4); }
/* The second step's setup key and recovery codes (1.24): easy to read and copy. */
.setup-key { font-size: var(--fs-l); letter-spacing: 0.08em; }
.recovery-codes { columns: 2; font-size: var(--fs-l); }
.code-chip { gap: 6px; }
.chip-x { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0 2px; }
canvas.signature { width: 100%; height: auto; aspect-ratio: 3 / 1; background: #fff; border: 1px solid var(--c-line-strong); border-radius: var(--r-m); touch-action: none; }
.proof-img { display: block; max-width: 100%; max-height: 60vh; background: #fff; border-radius: var(--r-m); }
.plan-bar input[type="date"], .plan-bar input[type="month"] { width: auto; }

/* Production sheets (manage.js productionPage): one station to a printed page. */
@media print { .station-sheet { break-after: page; } .station-sheet:last-child { break-after: auto; } }

/* A printed document looked at before it goes to the box's printer (5.4): its lines in a 58 mm roll's 32 columns, one document under another. */
.doc-preview { max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.doc-preview .doc { box-sizing: content-box; width: 32ch; max-width: calc(100% - 2 * var(--sp-3)); padding: var(--sp-3); border: 1px dashed var(--c-line); border-radius: var(--r-s, 6px); background: var(--c-surface); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; line-height: 1.45; }
.doc-preview .doc-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-preview .doc-line.big { font-weight: 700; font-size: 14px; }
.doc-preview .doc-line.center { text-align: center; }
.doc-preview .doc-line.split { display: flex; justify-content: space-between; gap: var(--sp-2); }
/* 5.9: an 80 mm roll's 48 columns, and each line's look as the printer draws it. */
.doc-preview.w80 .doc { width: 48ch; }
.doc-preview .doc-line.tall { font-size: 18px; line-height: 1.2; transform: scaleX(0.6); transform-origin: left; }
.doc-preview .doc-line.tall.center { transform-origin: center; }
.doc-preview .doc-line.bold { font-weight: 700; }
.doc-preview .doc-line.invert { background: var(--c-text); color: var(--c-surface); }
.doc-preview .doc-line.underline { text-decoration: underline; }
.doc-preview .doc-line.qr1::before, .doc-preview .doc-line.qr2::before, .doc-preview .doc-line.qr3::before { content: ""; display: block; margin: 4px auto; background: repeating-conic-gradient(var(--c-text) 0 25%, transparent 0 50%) 0 0 / 8px 8px; }
.doc-preview .doc-line.qr1::before { width: 40px; height: 40px; } .doc-preview .doc-line.qr2::before { width: 56px; height: 56px; } .doc-preview .doc-line.qr3::before { width: 76px; height: 76px; }
.doc-preview .doc-logo img { max-width: 66%; max-height: 60px; filter: grayscale(1) contrast(2); }
/* Belge şablonları: a layout's lines, each with its part, its own text or a hint, and its buttons. */
.tpl-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); counter-reset: tpl; }
.tpl-line { display: grid; grid-template-columns: 2ch minmax(0, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-2); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-s, 6px); background: var(--c-surface); counter-increment: tpl; }
.tpl-line::before { content: counter(tpl); grid-column: 1; grid-row: 1; color: var(--c-muted); font-size: var(--fs-s); text-align: right; }
.tpl-line .tpl-part { grid-column: 2; grid-row: 1; font-weight: 600; }
.tpl-line > .row { grid-column: 3; grid-row: 1; justify-content: flex-end; }
.tpl-line > input, .tpl-line > .tpl-hint { grid-column: 2 / -1; grid-row: 2; min-width: 0; }
.tpl-line > .tpl-hint:empty { display: none; }
@media (max-width: 720px) { .tpl-line { grid-template-columns: 2ch minmax(0, 1fr); } .tpl-line > .row { grid-column: 2; grid-row: 3; justify-content: flex-start; } .tpl-line > input, .tpl-line > .tpl-hint { grid-column: 2; } }
/* With 5.9's six looks a line's buttons go under its name, on every screen, so the name keeps its width. */
.tpl-line > .tpl-styles { grid-column: 2 / -1; grid-row: 3; justify-content: flex-start; flex-wrap: wrap; }