/* Labels & Logs – head office. Look agreed 26 Sep 2026 (docs: design-and-themes).
   Look (company setting): <html data-colour="…"> – green, red or pastel (org/appearance.py STYLES).
   Light or dark: <html data-mode="light|dark">, set by the script in base.html (auto by time, device, or fixed).
   Pages only ever use the variables below. Never hard-code a colour in a template. */

:root {
  /* Light: clean white page, neutral greys (no colour tint), one strong accent */
  --bg: #FAFAFA; --panel: #FFFFFF; --ink: #111827; --muted: #4B5563; --line: #E5E7EB; --line-soft: #F3F4F6;
  --primary: #15803D; --primary-ink: #FFFFFF; --primary-soft: #DCFCE7; --primary-soft-ink: #14532D;
  --switch-on: #16A34A; --switch-off: #D1D5DB; --field: #FFFFFF; --field-border: #D1D5DB;
  --radius: 12px; --tile-radius: 16px; --danger: #B42318; --danger-soft: #FDECEA;
  --tile-ink: var(--ink); --tile-meta: var(--muted); --tile-icon-bg: var(--primary); --tile-icon-ink: var(--primary-ink);
  --run-ok: #16A34A; --run-late: #D97706; --run-miss: #DC2626; --run-todo: #E5E7EB; --bar: var(--primary);
  --shadow: 0 10px 30px rgba(17, 24, 39, .12); --card-shadow: 0 1px 2px rgba(17, 24, 39, .05);
  --bar-bg: #14532D; --bar-ink: #FFFFFF; --bar-muted: rgba(255,255,255,.82); --bar-hover: rgba(255,255,255,.12);
  color-scheme: light;
}
/* 9 Burger red: red bar, pale red tiles with red numbers */
[data-colour="red"] { --bar-bg: #B91C1C; --primary: #B91C1C; --primary-soft: #FEE2E2; --primary-soft-ink: #991B1B; --switch-on: #B91C1C; }

/* Dark: same layout, dark neutrals, a lighter accent with dark text on it */
[data-mode="dark"] {
  --bg: #111214; --panel: #1B1C1F; --ink: #F2F1EE; --muted: #A6A39D; --line: #2C2E33; --line-soft: #26282C;
  --field: #232428; --field-border: #3A3C42; --switch-off: #3A3C42; --primary-ink: #111214;
  --danger: #F87171; --danger-soft: #3B1515;
  --run-ok: #22C55E; --run-late: #F59E0B; --run-miss: #EF4444; --run-todo: #2C2E33;
  --shadow: 0 10px 30px rgba(0, 0, 0, .5); --card-shadow: none; --bar-bg: #1B1C1F; --bar-ink: #F2F1EE; --bar-muted: #A6A39D; --bar-hover: rgba(255,255,255,.08);
  --primary: #4ADE80; --primary-soft: #14331F; --primary-soft-ink: #86EFAC; --switch-on: #22C55E;
  color-scheme: dark;
}
[data-mode="dark"][data-colour="red"] { --primary: #F87171; --primary-soft: #3B1515; --primary-soft-ink: #FCA5A5; --switch-on: #EF4444; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); font-size: 16px; }
a { color: var(--primary); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* Layout: slim bar across the top, page underneath */
.app { display: flex; flex-direction: column; min-height: 100vh; }
.topnav { position: sticky; top: 0; z-index: 20; height: 68px; flex-shrink: 0; background: var(--bar-bg); color: var(--bar-ink); border-bottom: var(--bar-border, 1px solid var(--line));
  display: flex; align-items: center; gap: 24px; padding: 0 28px; }
.brandmark { display: flex; align-items: center; gap: 10px; color: var(--bar-ink); text-decoration: none; flex-shrink: 0; }
.brandmark .logo { width: 36px; height: 36px; border-radius: 10px; margin: 0; font-size: 13px; }
.brandmark .logo:not(.has-img) { background: var(--bar-ink); color: var(--bar-bg); }
[data-mode="dark"] .brandmark .logo:not(.has-img) { background: var(--primary); color: var(--primary-ink); }
.brandmark .word { font-weight: 800; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; }
.tabs { display: flex; align-items: center; gap: 2px; flex-grow: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; color: var(--bar-muted); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tabs a:hover { background: var(--bar-hover); color: var(--bar-ink); }
.tabs a.on, .tabs a.on:hover { background: var(--tab-on-bg, var(--bar-ink)); color: var(--tab-on-ink, var(--bar-bg)); font-weight: 800; }
[data-mode="dark"] .tabs a.on, [data-mode="dark"] .tabs a.on:hover { background: var(--primary); color: var(--primary-ink); }
.navright { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.navright > a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--bar-muted); font-size: 15px; font-weight: 600; text-decoration: none; }
.navright > a:hover, .navright > a.on { background: var(--bar-hover); color: var(--bar-ink); }
.me { position: relative; }
.me > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px 6px 6px; border: 1px solid var(--bar-line, rgba(255,255,255,.28)); border-radius: 12px; cursor: pointer; color: var(--bar-ink); }
.me > summary::-webkit-details-marker { display: none; }
.me > summary:hover, .me[open] > summary { background: var(--bar-hover); }
.me .avatar { width: 34px; height: 34px; border-radius: 999px; background: var(--bar-ink); color: var(--bar-bg); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.me .who { display: flex; flex-direction: column; line-height: 1.25; }
.me .who b { font-size: 14px; font-weight: 800; white-space: nowrap; }
.me .who span { font-size: 12px; color: var(--bar-muted); white-space: nowrap; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); width: 280px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.menu a, .menu button.item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; text-align: left; }
.menu a:hover, .menu button.item:hover { background: var(--line-soft); }
.menu hr { border: 0; border-top: 1px solid var(--line-soft); margin: 6px 4px; width: auto; }
.menu .menu-label { padding: 6px 12px 2px; font-size: 12px; font-weight: 800; color: var(--muted); }
.menu form { margin: 0; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 4px 4px 2px; background: var(--line-soft); border-radius: 10px; }
.seg button { min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.menu .menu-note { padding: 2px 12px 6px; font-size: 12px; color: var(--muted); }
@media (max-width: 1100px) { .me .who, .brandmark .word { display: none; } .topnav { gap: 12px; padding: 0 16px; } }
.logo.has-img { background: #FFFFFF; padding: 4px; box-sizing: border-box; } .logo.has-img img { width: 100%; height: 100%; object-fit: contain; }
.logo { flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px; background: var(--primary); color: var(--primary-ink); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; text-decoration: none; margin-bottom: 8px; }
.main { flex-grow: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 28px 40px 48px; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.topbar h1 { margin: 0; font-size: 32px; font-weight: 800; }
.topbar .sub { font-size: 14px; font-weight: 700; color: var(--muted); }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 800; font-size: 16px; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { height: 44px; padding: 0 16px; font-size: 14px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.big { height: 58px; font-size: 18px; flex-grow: 1; }

/* Home tiles */
.hello { font-size: 14px; font-weight: 700; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 760px; }
.tile { height: 76px; padding: 12px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); color: var(--tile-ink); text-decoration: none; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-content: center; transition: transform .12s ease; }
.tile:hover { transform: translateY(-2px); }
.tile .ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--tile-icon-bg); color: var(--tile-icon-ink); grid-row: 1 / 3; align-self: center; }
.tile .name { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .meta { font-size: 12px; font-weight: 600; color: var(--tile-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.links { display: flex; gap: 12px; margin-top: 20px; }

/* Dashboard: number tiles, then three panels */
.counts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.count { position: relative; min-height: 112px; padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--card-shadow); color: var(--tile-ink); text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .12s ease; }
.count:hover { transform: translateY(-2px); }
/* Number tiles. Default: each tile its own solid colour. A look can set --tile-bg, --tile-num, --tile-name,
   --tile-icon, --tile-icon-ink, --tile-border (on <html>) to style them all the same way. */
.count.t1 { --tile-auto: #15803D; } .count.t2 { --tile-auto: #2563EB; } .count.t3 { --tile-auto: #C2410C; }
.count.t4 { --tile-auto: #7C3AED; } .count.t5 { --tile-auto: #0F766E; } .count.t6 { --tile-auto: #BE185D; }
.count .ic { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--tile-icon-bg); color: var(--tile-icon-ink); }
.count .value { font-size: 34px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.count .name { font-size: 14px; font-weight: 700; color: var(--tile-meta); }

.dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.panel { display: flex; flex-direction: column; min-height: 320px; padding: 20px; }
.panel h2 { margin: 0 0 16px; font-size: 18px; font-weight: 800; }
.panel .empty { padding: 16px 0; }
.panel-link { margin-top: auto; padding-top: 14px; font-size: 14px; font-weight: 800; text-decoration: none; }
.panel-link:hover { text-decoration: underline; }

.ring-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ring { width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ring-hole { width: 98px; height: 98px; border-radius: 50%; background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-hole strong { font-size: 26px; font-weight: 800; line-height: 1; }
.ring-hole span { font-size: 12px; font-weight: 700; color: var(--muted); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; min-width: 140px; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.ldot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.run-ok { background: var(--run-ok); } .run-late { background: var(--run-late); }
.run-miss { background: var(--run-miss); } .run-todo { background: var(--run-todo); }

.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bar-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-num { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { height: 10px; border-radius: 6px; background: var(--line-soft); overflow: hidden; }
.bar span { display: block; height: 100%; min-width: 3px; border-radius: 6px; background: var(--bar); }
.pill { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #FFFFFF; }
.pill.miss { background: #B91C1C; } /* darker than the ring colour so the white text is readable (QA 30 Sep) */ .pill.late { background: var(--run-late); }

.activity { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 3px solid var(--line); display: grid; gap: 12px; }
.activity li { position: relative; display: grid; font-size: 14px; }
.activity li::before { content: ""; position: absolute; left: -21px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--primary); }
.activity .when { font-size: 12px; font-weight: 800; color: var(--muted); }
.activity .what { font-weight: 800; }
.activity .who { font-size: 13px; color: var(--muted); }

@media (max-width: 1200px) { .counts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash { grid-template-columns: 1fr; } }

/* Cards, lists */
.card { background: var(--panel); border-radius: var(--tile-radius); padding: 24px; border: var(--card-border, 1px solid var(--line)); box-shadow: var(--card-shadow); }
.filters { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.filters input, .filters select { height: 48px; padding: 0 16px; border-radius: var(--radius); border: 2px solid var(--field-border); background: var(--field); font-weight: 600; }
.rows { display: flex; flex-direction: column; }
.row { display: grid; gap: 12px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line-soft); text-decoration: none; color: inherit; border-radius: 12px; }
.row.head { border-top: 0; font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-top: 0; }
a.row:hover { background: var(--line-soft); }
.row.muted { opacity: .55; }
.row .first { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.dot { width: 14px; height: 14px; border-radius: 999px; flex-shrink: 0; }
/* Item pictures in the items list */
.thumb { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.thumb.none { display: inline-block; background: var(--line-soft); border-style: dashed; }
.flag { color: var(--danger); font-weight: 800; }
.empty { padding: 32px 16px; color: var(--muted); font-weight: 600; }

/* Forms */
.form-wrap { max-width: 720px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field > label, .field .label { font-size: 14px; font-weight: 800; color: var(--muted); }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=time], .field select, .field textarea {
  height: 52px; padding: 0 16px; border-radius: var(--radius); border: 2px solid var(--field-border); background: var(--field); font-size: 17px; font-weight: 700; width: 100%; }
.field input:focus, .field select:focus { outline: 3px solid var(--primary-soft); border-color: var(--primary); }
.field input[type=color] { width: 80px; height: 52px; border-radius: var(--radius); border: 2px solid var(--field-border); padding: 4px; background: var(--field); }
.help { font-size: 13px; color: var(--muted); }
.errors { color: var(--danger); font-size: 14px; font-weight: 700; margin: 0; padding: 0; list-style: none; }
.alert { background: var(--danger-soft); color: var(--danger); border-radius: var(--radius); padding: 14px 18px; font-weight: 700; margin-bottom: 16px; }
.toast { background: var(--primary-soft); color: var(--primary-soft-ink); border-radius: var(--radius); padding: 14px 18px; font-weight: 800; margin-bottom: 18px; }

/* Toggle switch (a real checkbox) */
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line-soft); margin-bottom: 4px; }
.toggle-row label { font-size: 16px; font-weight: 800; color: var(--ink); }
input.switch { appearance: none; -webkit-appearance: none; width: 62px; height: 36px; border-radius: 999px; background: var(--switch-off); position: relative; cursor: pointer; transition: background .15s; margin: 0; flex-shrink: 0; }
input.switch::before { content: ""; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 999px; background: #FFFFFF; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
input.switch:checked { background: var(--switch-on); }
input.switch:checked::before { transform: translateX(26px); }
input.switch:focus-visible { outline: 3px solid var(--primary-soft); outline-offset: 2px; }

/* Chips (checkbox / radio groups) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--panel); font-weight: 800; cursor: pointer; user-select: none; }
.chip span:hover { border-color: var(--muted); }
.chip input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-soft-ink); }
.chip input:focus-visible + span { outline: 3px solid var(--primary-soft); }

.actions { display: flex; gap: 12px; margin-top: 24px; }

/* Batch run-time rows */
.runs { display: flex; flex-direction: column; gap: 10px; }
.run { display: grid; grid-template-columns: minmax(0, 1fr) 170px 110px; gap: 12px; align-items: center; }
.run select, .run input[type=time] { height: 52px; padding: 0 14px; border-radius: var(--radius); border: 2px solid var(--field-border); background: var(--field); font-weight: 700; width: 100%; }
.run .del { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--muted); }

/* Sign-in page (the back office front door) */
.signin { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.signin-brand { background: var(--primary); color: var(--primary-ink); padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.signin-logo { width: 64px; height: 64px; border-radius: 18px; background: #FFFFFF; color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; }
.signin-kicker { font-size: 16px; font-weight: 700; opacity: .85; }
.signin-title { font-size: 64px; font-weight: 800; line-height: 1; margin: 6px 0 18px; }
.signin-lead { font-size: 18px; font-weight: 600; line-height: 1.5; max-width: 420px; margin: 0; opacity: .92; }
.signin-tiles { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; }
.signin-tiles span { width: 72px; height: 72px; border-radius: 20px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); color: #FFFFFF; }
.signin-tiles .t1, .signin-tiles .t3, .signin-tiles .t5 { background: rgba(255,255,255,.22); }
.signin-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); }
.signin-form { width: 100%; max-width: 420px; }
.signin-form h1 { margin: 0; font-size: 36px; font-weight: 800; }
.signin-sub { margin: 6px 0 28px; color: var(--muted); font-weight: 600; }
.signin-btn { width: 100%; margin-top: 8px; }
.pw { position: relative; }
.pw input { padding-right: 88px !important; }
.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 38px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--primary-soft); color: var(--primary-soft-ink); font-weight: 800; cursor: pointer; }
.signin-notes { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.signin-notes p { margin: 0 0 8px; }
.signin-notes strong { color: var(--ink); }

@media (max-width: 900px) {
  .signin { grid-template-columns: 1fr; }
  .signin-brand { padding: 28px 24px; gap: 20px; }
  .signin-title { font-size: 44px; margin-bottom: 10px; }
  .signin-tiles, .signin-lead { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main { padding: 20px 16px 40px; }
}

/* Settings page */
.card-title { margin: 0 0 16px; font-size: 22px; font-weight: 800; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.card-head .card-title { margin: 0; }
.rows .btn.small { white-space: nowrap; }

/* Admin lock page */
.gate .gate-lead { margin: -6px 0 16px; font-size: 14px; }
.gate-steps { margin: 0 0 12px; padding-left: 20px; font-size: 15px; display: grid; gap: 8px; }
.gate-qr { display: inline-block; background: #fff; padding: 8px; border-radius: 12px; border: 1px solid var(--line); margin: 4px 0 8px; }
.gate-qr svg { display: block; }
.gate-key { font-size: 15px; font-weight: 800; letter-spacing: .08em; background: var(--line-soft); padding: 2px 8px; border-radius: 6px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Customers (app admin) */
.pill-on { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-soft-ink); font-weight: 800; font-size: 14px; }
.topbar .right form { display: inline; }

/* Label designs page */
.designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 14px 0; }
.design { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; background: var(--panel); }
.design.on, .design:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.design input { position: absolute; opacity: 0; pointer-events: none; }
.design-title { font-weight: 700; font-size: 14px; }
.design img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }

/* Settings: current company logo */
.logo-now { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logo-now img { width: 96px; height: 96px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 6px; }

/* Settings: Label design tile (clearly clickable) */
.label-tile { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; text-decoration: none; color: inherit; border: 2px solid var(--line); transition: border-color .15s, box-shadow .15s; }
.label-tile:hover, .label-tile:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.label-tile-pic img { width: 260px; max-width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.label-tile-text { flex: 1; min-width: 220px; }
.label-tile-text p { margin: 6px 0; }
.label-tile-text .btn { margin-top: 10px; display: inline-flex; }

/* Back button, same place on every page except Home */
.back-link { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 10px -6px; padding: 6px 12px 6px 6px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--muted); text-decoration: none; }
.back-link:hover, .back-link:focus-visible { background: var(--primary-soft); color: var(--primary-soft-ink); }

/* Item picker for batches: one folded group per category */
.picker-total { color: var(--muted); font-weight: 700; }
.pick-group { border: 2px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; background: var(--panel); }
.pick-group.has-picks { border-color: var(--primary); }
.pick-group > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; font-weight: 800; font-size: 17px; }
.pick-group > summary::-webkit-details-marker { display: none; }
.pick-group > summary::before { content: "▸"; color: var(--muted); transition: transform .15s ease; }
.pick-group[open] > summary::before { transform: rotate(90deg); }
.pick-count { color: var(--muted); font-weight: 700; font-size: 14px; }
.pick-btns { margin-left: auto; display: flex; gap: 6px; }
.pick-btns .btn { height: 36px; padding: 0 14px; font-size: 14px; }
.pick-group .chips { padding: 4px 14px 14px; }
.pick-item { display: inline-flex; align-items: center; gap: 4px; }
.pick-item .copies { display: none; align-items: center; gap: 2px; font-weight: 800; color: var(--primary-soft-ink); }
.pick-item:has(input[type=checkbox]:checked) .copies { display: inline-flex; }
.pick-item .copies input { width: 52px; height: 40px; border-radius: 10px; border: 2px solid var(--primary); background: var(--panel); font-weight: 800; font-size: 16px; text-align: center; padding: 0 4px; }
.pick-item .copies .x { color: var(--muted); }

/* On/off switch inside a list row (e.g. Items): saves straight away */
.row-toggle { display: flex; align-items: center; gap: 10px; }
.row-toggle .switch { width: 52px; height: 30px; }
.row-toggle .switch::before { width: 22px; height: 22px; }
.row-toggle .switch:checked::before { transform: translateX(22px); }
.row-toggle .toggle-word { font-weight: 700; }

/* Tabs above a list (e.g. Items: Active / Off) */
.list-tabs { display: flex; gap: 8px; margin: 0 0 16px; }
.list-tabs a { height: 44px; line-height: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 800; text-decoration: none; }
.list-tabs a.current { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-soft-ink); }
.list-tabs .tab-count { font-weight: 700; opacity: .7; }

/* The row you just edited, briefly highlighted when you come back to the list */
.row.just-edited { background: var(--primary-soft); transition: background .6s ease; }

/* Settings › Look: a colour dot on each colour choice */
.look-form .chip input[name="look-theme_colour"] + span::before { content: ""; width: 16px; height: 16px; border-radius: 999px; margin-right: 10px; background: #166534; }

.look-form .chip input[value="red"] + span::before { background: #B91C1C; }
.look-form .chip input[value="pastel"] + span::before { background: conic-gradient(#DCFCE7 0 33%, #DBEAFE 0 66%, #FFEDD5 0); box-shadow: 0 0 0 1px #9CA3AF; }

.count[class*=" t"] { border: var(--tile-border, 0); background: var(--tile-bg, var(--tile-auto)); }
.count[class*=" t"] .value { color: var(--tile-num, #FFFFFF); }
.count[class*=" t"] .name { color: var(--tile-name, rgba(255,255,255,.92)); }
.count[class*=" t"] .ic { background: var(--tile-icon, rgba(255,255,255,.2)); color: var(--tile-icon-ink, #FFFFFF); }

/* Styles: Green (default), Burger red, Soft pastel. Cut from 14 on 29 Sep (org/appearance.py STYLES). */
[data-mode="light"][data-colour="pastel"] { /* 4 Soft pastel: grey page, white bar, soft tile colours */
  --bg: #F3F4F6; --bar-bg: #FFFFFF; --bar-ink: #111827; --bar-muted: #4B5563; --bar-hover: #F3F4F6; --bar-line: #E5E7EB;
  --tab-on-bg: #DCFCE7; --tab-on-ink: #14532D; --card-border: 1px solid transparent; --tile-name: #374151; --tile-icon: rgba(255,255,255,.75); }
[data-mode="light"][data-colour="pastel"] .count.t1 { --tile-auto: #DCFCE7; --tile-num: #14532D; --tile-icon-ink: #14532D; }
[data-mode="light"][data-colour="pastel"] .count.t2 { --tile-auto: #DBEAFE; --tile-num: #1E3A8A; --tile-icon-ink: #1E3A8A; }
[data-mode="light"][data-colour="pastel"] .count.t3 { --tile-auto: #FFEDD5; --tile-num: #9A3412; --tile-icon-ink: #9A3412; }
[data-mode="light"][data-colour="pastel"] .count.t4 { --tile-auto: #EDE9FE; --tile-num: #5B21B6; --tile-icon-ink: #5B21B6; }
[data-mode="light"][data-colour="pastel"] .count.t5 { --tile-auto: #CCFBF1; --tile-num: #115E59; --tile-icon-ink: #115E59; }
[data-mode="light"][data-colour="pastel"] .count.t6 { --tile-auto: #FCE7F3; --tile-num: #9D174D; --tile-icon-ink: #9D174D; }
[data-mode="light"][data-colour="red"] {    /* 9 Burger red */
  --tile-bg: #FEF2F2; --tile-border: 1px solid #FECACA; --tile-num: #B91C1C; --tile-name: #57534E; --tile-icon: #B91C1C; --tile-icon-ink: #FFFFFF; }

/* Categories as cards: one big picture (the first item that has one), then name and item count */
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.cat-tiles .row.cat-tile { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  background: var(--panel); border: var(--card-border, 1px solid var(--line)); border-radius: var(--tile-radius);
  box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.cat-tiles .row.cat-tile:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(17, 24, 39, .08); }
.cat-tiles .row.cat-tile:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.cat-tiles .row.cat-tile.just-edited { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.cat-cover { height: 170px; display: flex; align-items: center; justify-content: center; background: #FFFFFF; border-bottom: 1px solid var(--line-soft); padding: 14px; }
.cat-cover img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cat-badge { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; }
.cat-text { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 14px; }
.cat-name { font-size: 17px; font-weight: 800; line-height: 1.25; }
.cat-meta { font-size: 14px; font-weight: 600; color: var(--muted); }
.cat-cover { overflow: hidden; flex-shrink: 0; }
.cat-cover.four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2px; padding: 2px; background: var(--line-soft); }
.cat-cover.four img { width: 100%; height: 100%; min-height: 0; object-fit: contain; background: #FFFFFF; padding: 6px; box-sizing: border-box; }
.view-switch { display: inline-flex; padding: 4px; margin: 0 0 16px; background: var(--line-soft); border-radius: 12px; gap: 2px; }
.view-switch a { min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 9px; color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none; }
.view-switch a.current { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* Search box in the top bar (every page) and the results page */
.navsearch { position: relative; display: flex; align-items: center; margin-right: 8px; }
.navsearch svg { position: absolute; left: 13px; color: var(--bar-muted); pointer-events: none; }
.navsearch input { width: 250px; height: 42px; padding: 0 36px 0 40px; border-radius: 999px; border: 1px solid transparent;
  background: var(--bar-hover); color: var(--bar-ink); font: inherit; font-size: 15px; font-weight: 600;
  transition: width .2s ease, background .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none; }
.navsearch input::placeholder { color: var(--bar-muted); font-weight: 500; opacity: 1; }
.navsearch input::-webkit-search-cancel-button { display: none; }
.navsearch input:focus { outline: none; width: 320px; background: var(--panel); color: var(--ink); border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft); }
.navsearch:focus-within svg { color: var(--muted); }
.navsearch kbd { position: absolute; right: 12px; min-width: 20px; padding: 1px 6px; border-radius: 6px; text-align: center;
  border: 1px solid var(--bar-muted); color: var(--bar-muted); font-weight: 700; font-size: 12px; line-height: 16px; opacity: .8; pointer-events: none; }
.navsearch:focus-within kbd { display: none; }
/* Results as you type, under the top bar search box */
.search-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 420px; max-height: min(70vh, 560px); overflow-y: auto;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 8px;
  box-shadow: 0 18px 40px rgba(17, 24, 39, .18); z-index: 60; }
.search-panel[hidden] { display: none; }
.search-panel .sr-h { padding: 10px 10px 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.search-panel .sr { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: inherit; text-decoration: none; min-height: 44px; }
.search-panel .sr:hover, .search-panel .sr.on { background: var(--hover, rgba(17, 24, 39, .06)); }
.search-panel .sr img, .search-panel .sr-dot { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; object-fit: cover; background: #fff; }
.search-panel .sr-dot { display: flex; align-items: center; justify-content: center; font-weight: 800; background: var(--primary); color: var(--primary-ink, #fff); }
.search-panel .sr span { display: flex; flex-direction: column; min-width: 0; }
.search-panel .sr b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-panel .sr small { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-panel .sr-all { justify-content: center; margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; font-weight: 700; color: var(--primary); }
.search-panel .sr-none { padding: 16px 12px; color: var(--muted); }
.matching { margin: 0 0 16px; color: var(--muted); }
.matching a { margin-left: 8px; font-weight: 700; }
@media (max-width: 1250px) { .navsearch input { width: 180px; } .navsearch input:focus { width: 240px; } }
@media (max-width: 760px) { .navsearch { display: none; } }
.search-h { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; font-size: 20px; font-weight: 800; }

/* Help button in the top bar: question-mark icon + word, icon only on smaller screens */
.navright > a.navhelp { gap: 8px; height: 42px; min-height: 42px; padding: 0 16px 0 12px; margin-right: 6px; border-radius: 999px;
  background: var(--bar-hover); color: var(--bar-ink); }
.navright > a.navhelp:hover, .navright > a.navhelp.on { background: var(--bar-ink); color: var(--bar-bg); }
.navright > a.navhelp:focus-visible { outline: 3px solid var(--primary-soft); outline-offset: 2px; }
@media (max-width: 1250px) { .navright > a.navhelp { padding: 0; width: 42px; justify-content: center; } .navhelp span { display: none; } }

/* Change the order of categories: drag, or the arrows */
.order-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.order-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); cursor: grab; user-select: none; }
.order-list li.dragging { opacity: .5; border-style: dashed; }
.order-grip { color: var(--muted); display: flex; }
.order-badge { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.order-name { flex-grow: 1; font-weight: 700; display: flex; flex-direction: column; }
.order-name small { color: var(--muted); font-weight: 600; font-size: 13px; }
.order-list .btn.small { min-width: 40px; justify-content: center; font-size: 16px; }

/* Dragging category cards on the Categories page */
.cat-tiles .cat-tile[draggable="true"] { cursor: grab; }
.cat-tiles .cat-tile.dragging { opacity: .45; border-style: dashed; border-color: var(--primary); }
.order-note { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; margin: 0; z-index: 50;
  transition: opacity .2s ease, transform .2s ease; box-shadow: var(--shadow); pointer-events: none; }
.order-note.show { opacity: 1; transform: translate(-50%, 0); }
.order-note.bad { background: var(--danger-soft); color: var(--danger); }

/* Delete: Admin deletes unused items/categories, others request (27 Sep) */
.danger-zone { margin-top: 20px; border: 1px solid var(--danger-soft); }
.danger-zone h2 { margin: 0 0 10px; font-size: 18px; font-weight: 800; }
.danger-why { margin: 0 0 10px; padding-left: 20px; }
.danger-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.danger-confirm { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.danger-confirm[hidden] { display: none; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #FFFFFF; }
.btn.danger:hover { filter: brightness(.92); }
a.toast.notice-link { display: block; text-decoration: none; background: var(--danger-soft); color: var(--danger); }

/* Batch item picker, list look (27 Sep): search, rows with picture, − n + labels once ticked */
.pick-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.pick-search-wrap { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 420px; }
.pick-search-wrap svg { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.pick-search { width: 100%; height: 44px; padding: 0 14px 0 38px; border-radius: 999px; border: 1px solid var(--field-border); background: var(--field); color: var(--ink); font: inherit; font-size: 15px; }
.pick-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.picker-total { color: var(--muted); font-weight: 700; font-size: 14px; }
.pick-group { border: 1px solid var(--line); }
.pick-group.has-picks { border-color: var(--primary); }
.pick-group[hidden] { display: none; }
.pick-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 8px; padding: 2px 14px 14px; }
.pick-row { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 8px 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.pick-row[hidden] { display: none; }
.pick-row:has(input[type=checkbox]:checked) { border-color: var(--primary); background: var(--primary-soft); }
.pick-main { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.pick-main input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--primary); margin: 0; }
.pick-thumb { width: 38px; height: 38px; flex-shrink: 0; border-radius: 9px; overflow: hidden; background: #FFFFFF; border: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; }
.pick-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pick-initial { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-weight: 800; }
.pick-label { font-weight: 700; font-size: 14px; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.pick-qty { display: none; align-items: center; gap: 2px; flex-shrink: 0; }
.pick-row:has(input[type=checkbox]:checked) .pick-qty { display: inline-flex; }
.pick-qty button { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--primary); background: var(--panel); color: var(--primary); font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer; }
.pick-qty button:hover { background: var(--primary); color: var(--primary-ink); }
.pick-qty input { width: 34px; height: 30px; border: 0; background: transparent; text-align: center; font-weight: 800; font-size: 15px; color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.pick-qty input::-webkit-outer-spin-button, .pick-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pick-none { padding: 20px 0; }
.pick-row .pick-qty input[type=number] { width: 34px; min-width: 0; height: 30px; min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 6px; background: transparent; box-shadow: none; text-align: center; font-weight: 800; font-size: 15px; }
.pick-row .pick-qty input[type=number]:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Phones (27 Sep): the tabs fold into a menu button, and list rows stack as small cards instead of squashed columns */
.navtoggle, .tabs .phone-only { display: none; }
@media (max-width: 760px) {
  .topnav { gap: 8px; padding: 0 12px; }
  .navtoggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; margin-right: auto;
    border: 1px solid var(--bar-line, rgba(255,255,255,.28)); border-radius: 12px; background: transparent; color: var(--bar-ink);
    font-weight: 800; font-size: 15px; cursor: pointer; }
  .topnav.nav-open .navtoggle { background: var(--bar-hover); }
  .tabs { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 8px 12px 14px; background: var(--bar-bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); overflow: visible; }
  .topnav.nav-open .tabs { display: flex; }
  .tabs a, .tabs .phone-only { display: flex; min-height: 48px; font-size: 16px; }
  .navright > a.navhelp { width: 44px; }
  .me > summary { padding: 4px 8px 4px 4px; gap: 6px; }

  .rows:not(.cat-tiles) > .row.head { display: none; }
  .rows:not(.cat-tiles) > .row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 14px 6px; }
  .rows:not(.cat-tiles) > .row > .first { flex-basis: 100%; min-width: 0; }
  .rows:not(.cat-tiles) > .row > span:not(.first):not(.row-toggle) { font-size: 14px; color: var(--muted); }
  .rows:not(.cat-tiles) > .row > .row-toggle { margin-left: auto; }
  .main .card { padding-left: 14px; padding-right: 14px; }
}

/* 29 Sep: [hidden] always wins (grid/flex rows used to ignore it) */
[hidden] { display: none !important; }

/* 29 Sep: file pickers styled like the rest (was the browser's raw "Choose file / No file chosen") */
input[type="file"] { display: block; width: 100%; padding: 14px; border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--muted); font-size: 15px; cursor: pointer; }
input[type="file"]:hover { border-color: var(--primary); }
input[type="file"]::file-selector-button { margin-right: 14px; height: 44px; padding: 0 18px; border-radius: 12px;
  border: 2px solid var(--primary); background: var(--primary-soft); color: var(--primary-soft-ink); font: inherit;
  font-weight: 800; cursor: pointer; }

/* 29 Sep: pictures fade in over a soft grey box instead of popping in on white */
.thumb, .cat-cover img { background: var(--line-soft); }

/* 29 Sep (round 2): nothing wider than a phone; readable in dark mode */
.topbar { flex-wrap: wrap; }
.topbar h1 { overflow-wrap: anywhere; min-width: 0; }
.list-tabs { flex-wrap: wrap; }
.pill.late { color: #1F1300; }
[data-mode="dark"] .btn.danger { color: #111214; }
[data-mode="dark"] .search-panel .sr:hover, [data-mode="dark"] .search-panel .sr.on { background: var(--line-soft); }
.day-nav, .pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.pager { margin: 14px 0 0; }
.history summary { cursor: pointer; }
.history-list { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 10px; font-size: 14px; }
.history-list ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); }
.history .when { color: var(--muted); }

/* ==== 29 Sep: professional pass. Calmer and denser on a computer: smaller buttons and chips, thin borders,
   styled dropdowns, no full-width Save bars, a quiet menu highlight, forms laid out label | field on wide screens.
   Still 40px+ targets, so it works on a tablet. ==== */
body { font-size: 15px; -webkit-font-smoothing: antialiased; }
.main { padding-top: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.topbar { margin-bottom: 20px; }
.topbar h1 { font-size: 26px; letter-spacing: -.015em; }

/* Top menu: the current page is a quiet highlight, not a bright green block */
.tabs a { font-size: 14px; min-height: 36px; padding: 0 12px; border-radius: 8px; }
.tabs a.on, .tabs a.on:hover, [data-mode="dark"] .tabs a.on, [data-mode="dark"] .tabs a.on:hover {
  background: var(--bar-hover); color: var(--bar-ink); font-weight: 700; }

/* Buttons */
.btn { height: 40px; padding: 0 16px; border-width: 1px; border-color: var(--field-border); border-radius: 10px; font-size: 14px; font-weight: 700; }
.btn.small { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn.big { height: 42px; padding: 0 22px; font-size: 15px; flex-grow: 0; }
.btn svg { width: 18px; height: 18px; }
.actions { align-items: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.label-tile-text .btn { margin-top: 12px; }

/* Cards and text */
.card { padding: 24px 28px; border-radius: 14px; }
.card-title { font-size: 17px; font-weight: 800; margin-bottom: 18px; }
.help { font-size: 13px; line-height: 1.45; }
.toast, .alert { padding: 12px 16px; font-size: 14px; }

/* Fields */
.field { gap: 6px; margin-bottom: 20px; }
.field > label, .field .label { font-size: 13px; font-weight: 700; color: var(--ink); }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=time], .field input[type=date], .field select {
  height: 42px; padding: 0 12px; border-width: 1px; border-radius: 10px; font-size: 15px; font-weight: 500; }
.field textarea { height: auto; min-height: 96px; padding: 10px 12px; border-width: 1px; border-radius: 10px; font-size: 15px; font-weight: 500; line-height: 1.45; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field input[type=time] { max-width: 160px; }

/* Every dropdown looks the same, with our own arrow (the Label designs rows were the browser's raw grey ones) */
select, .field select, .filters select, .run select {
  -webkit-appearance: none; appearance: none; height: 40px; padding: 0 36px 0 12px; border: 1px solid var(--field-border); border-radius: 10px;
  background-color: var(--field); color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; max-width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
.field select { height: 42px; font-size: 15px; }
select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.filters input { height: 40px; border-width: 1px; border-radius: 10px; font-weight: 500; }

/* Choice chips: slim pills */
.chips { gap: 8px; }
.chip span { min-height: 36px; padding: 0 14px; border-width: 1px; border-color: var(--field-border); border-radius: 999px; font-size: 14px; font-weight: 600; }
.chip input:checked + span { font-weight: 700; box-shadow: inset 0 0 0 1px var(--primary); }
.look-form .chip input[name="look-theme_colour"] + span::before { width: 12px; height: 12px; margin-right: 8px; }

/* On/off switch and file picker: smaller */
.toggle-row { padding: 12px 0; }
.toggle-row label { font-size: 14px; font-weight: 700; }
input.switch { width: 44px; height: 26px; }
input.switch::before { top: 3px; left: 3px; width: 20px; height: 20px; }
input.switch:checked::before { transform: translateX(18px); }
input[type="file"] { padding: 10px; border-width: 1px; font-size: 14px; }
input[type="file"]::file-selector-button { height: 34px; padding: 0 14px; border-width: 1px; border-radius: 8px; font-weight: 700; }
.logo-now img { width: 72px; height: 72px; border-radius: 12px; }

/* List pages: tabs, filter, Tiles/List and the buttons on one line */
.topbar-tools .right { margin-left: auto; }
.topbar-tools .list-tabs, .topbar-tools .filters, .topbar-tools .view-switch, .toolbar .list-tabs, .toolbar .filters, .toolbar .view-switch { margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; }
.toolbar:not(:has(*)) { display: none; }
.list-tabs a { height: 36px; min-height: 36px; padding: 0 14px; border-width: 1px; border-color: var(--field-border); font-size: 14px; font-weight: 700; }
.list-tabs a.current { box-shadow: inset 0 0 0 1px var(--primary); }
.view-switch { padding: 3px; border-radius: 10px; }
.view-switch a { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.row { padding: 12px 16px; }
.row .first { font-weight: 700; }

/* Tiles: a bit smaller, lighter names */
.cat-tiles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.cat-cover { height: 150px; }
.cat-text { padding: 10px 14px 12px; }
.cat-name { font-size: 15px; font-weight: 700; }
.cat-meta { font-size: 13px; font-weight: 500; }

/* Forms on a computer: label on the left, field on the right, so the page uses its width */
@media (min-width: 1000px) {
  .form-wrap { max-width: 960px; }
  .form-wrap .card .field { display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .form-wrap .card .field > label, .form-wrap .card .field > .label { grid-column: 1; grid-row: 1; padding-top: 11px; }
  .form-wrap .card .field { row-gap: 6px; }
  .form-wrap .card .field[role=group] > .label { padding-top: 8px; }
  .form-wrap .card .field > :not(label):not(.label) { grid-column: 2; }
  .form-wrap .card .toggle-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 32px; border-top: 0; padding: 4px 0 16px; }
  .form-wrap .card .toggle-row input.switch { justify-self: start; }
  .form-wrap .card .actions { padding-left: 242px; }
  .form-wrap .card .item-picker, .form-wrap .card .pick-bar { margin-left: 0; }
}

/* Label designs: the "Shop can change its size" tick lines up under its dropdown; other shops fold away */
.check-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.check-line input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
.rows select { width: 100%; }
.more-shops { border-top: 1px solid var(--line-soft); }
.more-shops > summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 34px; cursor: pointer; list-style: none; font-weight: 700; }
.more-shops > summary::-webkit-details-marker { display: none; }
.more-shops > summary::before { content: "▸"; color: var(--muted); transition: transform .15s ease; }
.more-shops[open] > summary::before { transform: rotate(90deg); }
.more-shops > summary:hover { background: var(--line-soft); border-radius: 10px; }
.designs { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.design { border-width: 1px; }

.row-toggle .switch { width: 40px; height: 24px; }
.row-toggle .switch::before { width: 18px; height: 18px; }
.row-toggle .switch:checked::before { transform: translateX(16px); }
.row-toggle .toggle-word { font-size: 13px; font-weight: 600; color: var(--muted); }

/* Dashboard number tiles: calmer */
.count .value { font-size: 30px; }

/* 29 Sep: dark mode keeps the style's colour in the top bar (a deep shade, so it isn't glaring at night).
   Soft pastel stays neutral grey on purpose. */
[data-mode="dark"][data-colour="red"], [data-mode="dark"][data-colour="green"] {
  --bar-ink: #FFFFFF; --bar-muted: rgba(255,255,255,.78); --bar-hover: rgba(255,255,255,.12); --bar-line: rgba(255,255,255,.22);
  --bar-border: 1px solid rgba(0,0,0,.35); }
[data-mode="dark"][data-colour="red"] { --bar-bg: #7A1717; }
[data-mode="dark"][data-colour="green"] { --bar-bg: #123D24; }
[data-mode="dark"][data-colour="red"] .navsearch input:focus, [data-mode="dark"][data-colour="green"] .navsearch input:focus { color: var(--ink); }

/* Top bar never hides menu tabs (QA 30 Sep): at 1120–1440 px and 780–960 px "Print log" and "Shops" were cut off
   behind the search box with no scrollbar. Drop the long words first, then shrink the search box. */
@media (max-width: 1480px) and (min-width: 761px) { .me .who, .brandmark .word { display: none; } .topnav { gap: 14px; } }
@media (max-width: 1040px) and (min-width: 761px) {
  .topnav { padding: 0 14px; gap: 10px; }
  .tabs a { padding: 0 10px; font-size: 14px; }
  .navsearch input { width: 130px; } .navsearch input:focus { width: 200px; } .navsearch kbd { display: none; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .tabs a { padding: 0 8px; }
  .navhelp { margin-right: 0 !important; }
  .navsearch input { width: 42px; padding: 0 0 0 40px; } .navsearch input::placeholder { color: transparent; }
  .navsearch input:focus { width: 200px; padding: 0 12px 0 40px; }
}
/* Phones (QA 30 Sep): the shop box in batch run times squeezed to nothing, so you couldn't see which shop a time was for */
@media (max-width: 600px) {
  .run { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .run select { grid-column: 1 / -1; }
}
/* Customer page (app admin): two cards side by side, one under the other on tablets and phones (QA 30 Sep) */
.dash.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .dash.two-col { grid-template-columns: 1fr; } }
.rows .row > span { overflow-wrap: anywhere; }

/* ==== 30 Sep: Teal and Orange styles, matching the two Labels & Logs logos (teal tag, orange tag).
   Stored as theme_colour "teal" and "warm". Light: coloured bar, pale tiles with coloured numbers. Dark: deep bar. ==== */
[data-colour="teal"] { --bar-bg: #0F766E; --primary: #0D9488; --primary-soft: #CCFBF1; --primary-soft-ink: #115E59; --switch-on: #0D9488; }
[data-colour="warm"] { --bar-bg: #EA580C; --primary: #EA580C; --primary-soft: #FFEDD5; --primary-soft-ink: #9A3412; --switch-on: #EA580C; }
[data-mode="light"][data-colour="teal"] { --tile-bg: #F0FDFA; --tile-border: 1px solid #99F6E4; --tile-num: #0F766E; --tile-name: #134E4A; --tile-icon: #0D9488; --tile-icon-ink: #FFFFFF; }
[data-mode="light"][data-colour="warm"] { --tile-bg: #FFF7ED; --tile-border: 1px solid #FED7AA; --tile-num: #C2410C; --tile-name: #7C2D12; --tile-icon: #EA580C; --tile-icon-ink: #FFFFFF; }
[data-mode="dark"][data-colour="teal"] { --primary: #2DD4BF; --primary-soft: #0F3330; --primary-soft-ink: #99F6E4; --switch-on: #14B8A6; --bar-bg: #0B3B37; }
[data-mode="dark"][data-colour="warm"] { --primary: #FB923C; --primary-soft: #3A2210; --primary-soft-ink: #FDBA74; --switch-on: #F97316; --bar-bg: #7C2D12; }
[data-colour="teal"], [data-colour="warm"] { --bar-ink: #FFFFFF; --bar-muted: rgba(255,255,255,.82); --bar-hover: rgba(255,255,255,.14); --bar-line: rgba(255,255,255,.28); }
[data-mode="dark"][data-colour="teal"] .navsearch input:focus, [data-mode="dark"][data-colour="warm"] .navsearch input:focus { color: var(--ink); }
.look-form .chip input[value="teal"] + span::before { background: #0D9488; }
.look-form .chip input[value="warm"] + span::before { background: #EA580C; }
[data-mode="dark"][data-colour="teal"] { --tile-bg: #0F2F2C; --tile-border: 1px solid #134E4A; --tile-num: #5EEAD4; --tile-name: #99F6E4; --tile-icon: #14B8A6; --tile-icon-ink: #0B1F1D; }
[data-mode="dark"][data-colour="warm"] { --tile-bg: #33200F; --tile-border: 1px solid #7C2D12; --tile-num: #FDBA74; --tile-name: #FED7AA; --tile-icon: #F97316; --tile-icon-ink: #1F1208; }

/* 30 Sep: Teal and Orange top bar = "Clean white" (Husnain picked option A): white bar, thin line, his logo exactly as he
   gave it; colour only in the current tab, buttons and tiles. Dark mode: plain dark bar with the white-lettering logo. */
[data-mode="light"][data-colour="teal"], [data-mode="light"][data-colour="warm"] {
  --bar-bg: #FFFFFF; --bar-ink: #111827; --bar-muted: #4B5563; --bar-line: #E5E7EB; --bar-border: 1px solid #E5E7EB; }
[data-mode="light"][data-colour="teal"] { --bar-hover: #EEF7F6; }
[data-mode="light"][data-colour="warm"] { --bar-hover: #FFF4EC; }
[data-mode="light"][data-colour="teal"] .tabs a.on { color: #0F766E; }
[data-mode="light"][data-colour="warm"] .tabs a.on { color: #C2410C; }
/* Dark mode: option B – a gradient bar in the app icon's colours (deep enough for the coloured "&" in the logo to show). */
[data-mode="dark"][data-colour="teal"], [data-mode="dark"][data-colour="warm"] {
  --bar-ink: #FFFFFF; --bar-muted: rgba(255,255,255,.88); --bar-hover: rgba(255,255,255,.18); --bar-line: rgba(255,255,255,.3); --bar-border: 0; }
[data-mode="dark"][data-colour="teal"] { --bar-bg: #0B6F6C; }
[data-mode="dark"][data-colour="warm"] { --bar-bg: #B23E0C; }
[data-mode="dark"][data-colour="teal"] .topnav { background: linear-gradient(100deg, #064F4D, #0B6F6C 55%, #10968A); }
[data-mode="dark"][data-colour="warm"] .topnav { background: linear-gradient(100deg, #7C2D12, #B23E0C 55%, #DD6414); }
[data-mode="dark"][data-colour="teal"] .tabs a.on, [data-mode="dark"][data-colour="warm"] .tabs a.on { color: #FFFFFF; }