/* Účetní asistent – klidný vzhled pro mobil i počítač. Písmo IBM Plex Sans je uložené na vlastním serveru (OFL). */
@font-face { font-family: "Plex"; font-weight: 400; font-display: swap; src: url("fonts/plexl-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex"; font-weight: 500; font-display: swap; src: url("fonts/plexl-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex"; font-weight: 600; font-display: swap; src: url("fonts/plexl-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex"; font-weight: 400; font-display: swap; src: url("fonts/plex-400.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex"; font-weight: 500; font-display: swap; src: url("fonts/plex-500.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex"; font-weight: 600; font-display: swap; src: url("fonts/plex-600.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --- Barvy a rozměry ------------------------------------------------------------------------------- */
:root {
  --bg: #eef1ef;          /* papír stránky */
  --card: #ffffff;        /* plocha karet a formulářů */
  --sunk: #f5f7f6;        /* pole formulářů, řádky tabulek */
  --ink: #17211e;
  --muted: #5d6a65;
  --line: #d9e0dd;
  --line-strong: #c3ccc8;
  --accent: #0d6b5b;      /* účetní zelená – hlavní akce a výběr */
  --accent-hover: #0a574a;
  --accent-soft: #e2f0ec;
  --brand: #ffffff;
  --brand-ink: #17211e;
  --ok-bg: #e5f3ea; --ok: #1d6d3c;
  --err-bg: #fbe9e7; --err: #b42318;
  --warn-bg: #fdf1dc; --warn: #94560a;
  --info-bg: #e7eef8; --info: #2b5a9b;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(23, 33, 30, .06);
  --shadow-pop: 0 12px 32px rgba(23, 33, 30, .16);
  --field-h: 44px;
  color-scheme: light;
  font-family: "Plex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111715; --card: #19211e; --sunk: #141b18; --ink: #e6ece9; --muted: #98a6a0; --line: #2a3531;
    --line-strong: #3a4842; --accent: #4fbfa6; --accent-hover: #6fd0b9; --accent-soft: #17332c;
    --brand: #19211e; --brand-ink: #e6ece9;
    --ok-bg: #12301f; --ok: #7fd49d; --err-bg: #3a1714; --err: #ff9b8f; --warn-bg: #36280c; --warn: #f0c26a;
    --info-bg: #172741; --info: #8db4ef;
    --shadow: none; --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
h1 { font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; margin: .1rem 0 .5rem; }
h2 { font-size: 1.05rem; line-height: 1.3; font-weight: 600; margin: 1.4rem 0 .5rem; }
h3 { font-size: .98rem; font-weight: 600; margin: 1rem 0 .4rem; }
strong, b { font-weight: 600; }
p { margin: .5rem 0; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* --- Kostra: horní lišta, boční menu (počítač), spodní lišta (telefon) ------------------------------ */
.ico { width: 20px; height: 20px; flex: none; vertical-align: middle; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  min-height: 56px; padding: 6px 12px; padding-top: max(6px, env(safe-area-inset-top));
  background: var(--brand); color: var(--brand-ink); border-bottom: 1px solid var(--line);
}
.topbar a { color: var(--brand-ink); text-decoration: none; }
.topbar-title { font-weight: 600; padding: 6px; }
.topbar .spacer { flex: 1; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
  border-radius: 8px; background: var(--accent); color: #fff; margin-right: 4px; }
.brand-mark .ico { width: 18px; height: 18px; }
@media (prefers-color-scheme: dark) { .brand-mark { color: #0d1a16; } }
.switcher { position: relative; min-width: 0; }
.switcher > summary, .switcher.static {
  list-style: none; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm);
  cursor: pointer; font-weight: 600; max-width: 46vw; color: var(--brand-ink); min-height: 40px;
}
.switcher > summary .ico { color: var(--muted); }
.switcher > summary::-webkit-details-marker { display: none; }
.switcher > summary:hover, .switcher[open] > summary { background: var(--sunk); }
.switcher.static { cursor: default; }
.switcher-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher .chev { width: 16px; height: 16px; }
.branch-switch > summary, .branch-switch.static { font-weight: 500; }
.topbar .branch-switch { padding-left: 6px; border-left: 1px solid var(--line); }
.dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 270px; max-width: 90vw; z-index: 30;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 6px; display: grid; gap: 1px;
}
.dropdown.right { left: auto; right: 0; }
.dropdown a, .dropdown button {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px;
  border-radius: var(--radius-sm); color: var(--ink) !important; text-decoration: none; font: inherit;
  background: none; border: 0; text-align: left; width: 100%; cursor: pointer;
}
.dropdown a:hover, .dropdown button:hover { background: var(--sunk); }
.dropdown a.current { background: var(--accent-soft); font-weight: 600; }
.dropdown-title { margin: 6px 12px 4px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.user-menu .switcher-label { display: none; }
@media (max-width: 640px) {
  /* telefon: provozovna na vlastním řádku, aby byly vidět celé názvy */
  .topbar { padding-left: 8px; padding-right: 8px; }
  .brand-mark { display: none; }
  .switcher > summary { max-width: 74vw; }
  .topbar .branch-switch { order: 3; flex-basis: 100%; border-left: 0; padding-left: 0; padding-bottom: 2px; }
  .branch-switch > summary, .branch-switch.static { max-width: 100%; min-height: 36px; padding: 5px 10px;
    background: var(--sunk); font-size: .92rem; }
}

.layout { display: block; }
.page { max-width: 880px; margin: 0 auto; padding: 18px 16px 104px; }
.sidebar { display: none; }

.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: flex-end;
  background: var(--card); border-top: 1px solid var(--line);
  padding: 0 4px env(safe-area-inset-bottom);
}
.bottomnav a {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px 9px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: .74rem;
}
.bottomnav .ico { width: 23px; height: 23px; }
.bottomnav a.active { color: var(--accent); font-weight: 600; }
.bottomnav a.active::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--accent); }
/* Vyfotit: kulaté tlačítko nad lištou – nejčastější akce klienta */
.bottomnav a.primary { color: var(--ink); }
.bottomnav a.primary .ico { box-sizing: content-box; width: 26px; height: 26px; padding: 14px; margin-top: -26px;
  border-radius: 50%; background: var(--accent); color: #fff; border: 4px solid var(--card);
  box-shadow: 0 4px 12px rgba(13, 107, 91, .35); }
.bottomnav a.primary.active::before { display: none; }
.bottomnav .count { position: absolute; top: 4px; left: calc(50% + 6px); }

.count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--warn); color: #fff; font-size: .72rem; font-weight: 600;
}
@media (prefers-color-scheme: dark) { .count { color: #1a1206; } }

@media (min-width: 960px) {
  body.with-nav .layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  body.with-nav .sidebar {
    display: block; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto;
    padding: 12px 10px 24px; border-right: 1px solid var(--line); background: var(--card);
  }
  body.with-nav .bottomnav { display: none; }
  body.with-nav .page { max-width: 1080px; padding: 28px 36px 56px; margin: 0; }
  .user-menu .switcher-label { display: inline; }
}
.nav-group { margin-bottom: 6px; }
.nav-group + .nav-group { padding-top: 6px; border-top: 1px solid var(--line); }
.nav-title { margin: 8px 10px 4px; font-size: .78rem; color: var(--muted); font-weight: 600; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: .94rem; min-height: 36px;
}
.nav-item .ico { width: 18px; height: 18px; color: var(--muted); }
.nav-item span:first-of-type { flex: 1; }
.nav-item:hover { background: var(--sunk); color: var(--ink); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item.active .ico { color: var(--accent); }

/* --- Karty, formuláře, tlačítka ------------------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
  margin: 14px 0; box-shadow: var(--shadow); }
.card.narrow { max-width: 420px; margin: 48px auto; }
details.card > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; flex: none; }
details.card[open] > summary::before { transform: rotate(45deg); }
details.card[open] > summary { margin-bottom: 12px; }

.form { display: grid; gap: 14px; }
.form label { display: block; font-weight: 500; font-size: .86rem; color: var(--muted); }
.form label > input:not([type=checkbox]):not([type=radio]), .form label > select, .form label > textarea { display: block; margin-top: 5px; }
.form label.inline { display: flex; }
.form label.inline { color: var(--ink); font-size: .94rem; }
input, select, textarea {
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--ink); background: var(--card);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 12px;
  min-height: var(--field-h); width: 100%;
}
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
input[type=file] { padding: 8px; background: var(--sunk); }
textarea { min-height: 96px; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
fieldset:disabled input, fieldset:disabled select, input:disabled, select:disabled {
  background: var(--sunk); border-color: var(--line); color: var(--ink); opacity: 1; }
select { appearance: none; padding-right: 34px; background-repeat: no-repeat; background-position: right 12px center;
  background-size: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235d6a65' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px;
  padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--card);
  color: var(--ink); font: inherit; font-weight: 500; font-size: .95rem; text-decoration: none; cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--sunk); color: var(--ink); border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
@media (prefers-color-scheme: dark) { .btn.primary, .btn.primary:hover { color: #0d1a16; } }
.btn.danger { color: var(--err); }
.btn.danger:hover { background: var(--err-bg); border-color: var(--err); }
.btn.small { min-height: 34px; padding: 5px 12px; font-size: .86rem; }
.btn.big { width: 100%; min-height: 56px; font-size: 1.05rem; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn .ico { width: 18px; height: 18px; }
@media (max-width: 640px) { .btn { min-height: 44px; } .btn.small { min-height: 38px; } }

.flash { padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid transparent; }
.flash.ok { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 20%, transparent); }
.flash.error { background: var(--err-bg); color: var(--err); border-color: color-mix(in srgb, var(--err) 20%, transparent); }
.flash.warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 20%, transparent); }
.flash .ico { width: 18px; height: 18px; vertical-align: -4px; }
.flash ul { margin: 6px 0; padding-left: 20px; }
.flash p { margin: 4px 0; }

/* --- Seznamy: jeden řádek = jedna věc; částka a stav vpravo --------------------------------------- */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.list > li + li { border-top: 1px solid var(--line); }
.list-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; min-height: 60px;
  background: var(--card); text-decoration: none; color: var(--ink);
}
a.list-item:hover { background: var(--sunk); color: var(--ink); }
.list-item > span:not(.badge):not(.amount):not(.thumb):not(.state):not(.pill) { display: grid; gap: 1px; flex: 1; min-width: 0; }
.list-item > span > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .muted { font-size: .86rem; }
.list-item > .badge, .list-item > .amount, .list-item > .pill { flex: none; }
.list-item.doc .thumb { width: 44px; height: 56px; object-fit: cover; object-position: top; border-radius: 5px; flex: none;
  background: var(--sunk); border: 1px solid var(--line); }
.thumb.pdf { display: grid; place-items: center; font-weight: 600; font-size: .72rem; color: var(--muted); }
/* samostatné řádky mimo seznam (např. dávky exportu) */
.card > .list-item, section > .list-item, div.list-item:not(li > *) { border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin: 8px 0; min-height: 0; }
.list-item form { margin: 0; }
li > form.list-item { width: 100%; }
.list.unpaid-list { background: none; border: 0; box-shadow: none; gap: 10px; overflow: visible; }
.list.unpaid-list > li + li { border-top: 1px solid var(--line); }

/* řádek dokladu: dodavatel | datum a číslo | částka | stav */
.doc-main { display: grid; gap: 1px; flex: 1; min-width: 0; }
.doc-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-amount { flex: none; text-align: right; font-weight: 600; white-space: nowrap; min-width: 7.5em; }
.doc-state { flex: none; width: 9.5em; display: flex; justify-content: flex-end; }
@media (max-width: 640px) {
  .list-item { padding: 11px 12px; gap: 12px; }
  .list-item.doc { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "t m a" "t m s"; row-gap: 2px; }
  .list-item.doc .thumb { grid-area: t; width: 40px; height: 52px; }
  .list-item.doc .doc-main { grid-area: m; }
  .list-item.doc .doc-amount { grid-area: a; min-width: 0; }
  .list-item.doc .doc-state { grid-area: s; width: auto; }
}

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; background: var(--sunk); color: var(--muted); white-space: nowrap; border: 1px solid var(--line); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge.kontrola, .badge.chyba { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge.chyba { background: var(--err-bg); color: var(--err); }
.badge.potvrzeno { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.exportovano { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.badge.zpracovava, .badge.nahrano { background: var(--info-bg); color: var(--info); border-color: transparent; }
/* stavy dokladů pro klienta */
.badge.u-ucetni { background: var(--info-bg); color: var(--info); border-color: transparent; }
.badge.hotovo { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.badge.nezapisuje { background: var(--sunk); color: var(--muted); }
h1 .badge { vertical-align: middle; font-size: .8rem; letter-spacing: 0; }

.stats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.stats a { display: grid; gap: 2px; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.stats .num { font-size: 1.5rem; font-weight: 600; }

/* filtry: jeden řádek, posouvá se do strany; počet u každého filtru */
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin: 6px 0 10px; scrollbar-width: thin; }
.chips a, .chips .chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 6px 12px;
  min-height: 36px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--card);
  text-decoration: none; color: var(--ink); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; }
.chips a:hover, .chips .chip:hover { border-color: var(--muted); color: var(--ink); }
.chips a.active { background: var(--ink); border-color: var(--ink); color: var(--card); }
.chip-n { font-size: .78rem; font-weight: 600; color: var(--muted); }
.chips a.active .chip-n { color: inherit; opacity: .75; }
.chips a.attn .chip-n { color: var(--warn); }
.chips a.active.attn .chip-n { color: inherit; }

/* --- Focení ------------------------------------------------------------------------------------------ */
.camera { display: grid; gap: 14px; }
.camera video { width: 100%; max-height: 60vh; background: #000; border-radius: var(--radius); object-fit: contain; }
.camera-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.camera-step { margin: 0; display: grid; gap: 2px; }
.camera-step strong { font-size: 1.1rem; }
.pages { display: flex; gap: 10px; overflow-x: auto; }
.pages figure { margin: 0; display: grid; gap: 4px; justify-items: start; font-size: .8rem; color: var(--muted); }
.pages img { height: 120px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.file-btn { cursor: pointer; }
#camera-queue { margin-bottom: 12px; }
#camera-queue .list-item { min-height: 0; }

.doc-pages { display: grid; gap: 12px; margin-bottom: 16px; }
.doc-pages img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; display: block; }

/* --- Kontrola dokladu: fotka vlevo, formulář vpravo -------------------------------------------------- */
.review { display: grid; gap: 18px; }
@media (min-width: 900px) {
  .page:has(.review) { max-width: 1320px; }
  .review { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .review .doc-pages { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow: auto; margin: 0; }
}
@media (max-width: 899px) {
  .review .doc-pages img { max-height: 45vh; object-fit: contain; background: var(--card); }
}
.doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.doc-head h1 { margin: 0; }
.doc-head .doc-sub { margin: 4px 0 0; }
.doc-total { text-align: right; }
.doc-total .label { display: block; font-size: .8rem; color: var(--muted); }
.doc-total .value { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.review-form { padding: 0; overflow: visible; }
.review-form > fieldset > .form-section { padding: 16px 18px; }
.review-form > fieldset > .form-section + .form-section { border-top: 1px solid var(--line); }
.form-section > h2 { margin: 0 0 12px; font-size: .95rem; }
.form-section > h2 .muted { font-weight: 400; }
.form-section { display: grid; gap: 12px; }
.action-bar { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 18px; background: var(--card); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
.action-bar .spacer { flex: 1; }
.action-bar .note { flex-basis: 100%; margin: 0; }
@media (max-width: 959px) { body.with-nav .action-bar { bottom: calc(64px + env(safe-area-inset-bottom)); } }
@media (max-width: 640px) { .action-bar .btn { flex: 1; } }
.more-actions { margin: 10px 0 0; }
.more-actions > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--muted); font-size: .9rem; padding: 6px 2px; }
.more-actions > summary::-webkit-details-marker { display: none; }
.more-actions > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.more-actions[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.more-actions .actions { margin-top: 6px; }

fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
.grid2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid3 { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid3 label { font-size: .85rem; }
@media (max-width: 520px) { .grid3.stack-sm { grid-template-columns: 1fr; } }
.checks { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.check { padding: 9px 12px 9px 34px; border-radius: var(--radius-sm); font-size: .92rem; position: relative; }
.check::before { position: absolute; left: 12px; top: 9px; font-weight: 700; width: 14px; text-align: center; }
.check.chyba { background: var(--err-bg); color: var(--err); font-weight: 500; }
.check.chyba::before { content: "!"; }
.check.pozor { background: var(--warn-bg); color: var(--warn); }
.check.pozor::before { content: "!"; }
.check.info { background: var(--sunk); color: var(--muted); }
.check.info::before { content: "i"; font-style: italic; font-family: Georgia, serif; }
input.strong { font-weight: 600; }
label.inline { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
label.inline input { width: auto; min-height: auto; margin-top: 4px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.vat-rows { display: grid; gap: 8px; }
.vat-row { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 8px 10px; align-items: end; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunk); }
.vat-row.empty { background: none; }
.vat-row.empty .vat-rate { color: var(--muted); }
.vat-row label { font-size: .8rem; font-weight: 500; color: var(--muted); }
.vat-rate { font-size: 1rem; font-weight: 600; align-self: center; }
.vat-text { grid-column: 2 / -1; }
@media (min-width: 600px) { .vat-row { grid-template-columns: 44px 1fr 1fr 1.4fr; } .vat-text { grid-column: auto; } }

/* --- Tabulky ------------------------------------------------------------------------------------------ */
table.vat { width: 100%; border-collapse: collapse; }
table.vat th { text-align: left; font-size: .82rem; color: var(--muted); padding: 4px; font-weight: 500; }
table.vat td { padding: 4px; }
table.vat td:first-child { font-weight: 600; white-space: nowrap; }
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--card); }
table.data th, table.data td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.data thead th { font-size: .8rem; font-weight: 600; color: var(--muted); background: var(--sunk);
  border-bottom-color: var(--line-strong); white-space: nowrap; position: sticky; top: 0; }
table.data tbody tr:hover td { background: var(--sunk); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; white-space: nowrap; }
table.data.small { font-size: .85rem; }
table.data.small th, table.data.small td { padding: 6px 10px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  box-shadow: var(--shadow); margin: 10px 0; }
.card .table-wrap { box-shadow: none; }
tr.empty-day td { color: var(--muted); }
tr.empty-day td a { color: var(--muted); }
tr.overdue td { background: var(--warn-bg); }

/* --- Banka, peníze ---------------------------------------------------------------------------------- */
.amount { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.list-item > .amount { min-width: 8em; }
.amount.in { color: var(--ok); }
.amount.in::before { content: "+"; }
.amount.out { color: var(--ink); }
.warn-text { color: var(--warn); }
.ok-text { color: var(--ok); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
dl.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
dl.facts dd { margin: 0; font-weight: 600; }
.total { font-size: 1.05rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 12px 0; }
.tiles a { padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); font-weight: 600; }
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.month-nav h1 { margin: 0; text-align: center; }
.card.cancelled { opacity: .6; }

/* --- Docházka a sklad ------------------------------------------------------------------------------- */
.att-row { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--card); }
.att-row legend { font-weight: 600; padding: 0 4px; }
.att-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.att-grid label { font-size: .85rem; }
.att-grid [hidden] { display: none; }
.stock-cat { margin: 16px 0 4px; font-size: .95rem; color: var(--muted); }
.stock-line { display: flex !important; justify-content: space-between; align-items: center; gap: 10px; font-weight: 400 !important;
  color: var(--ink) !important; font-size: .95rem !important; padding: 6px 0; border-bottom: 1px solid var(--line); }
.stock-qty { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.stock-qty input { width: 96px; min-height: 40px; text-align: right; }

input.copy { width: 100%; font-size: .9rem; }

/* kalkulace */
.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-form input.qty { width: 5.5em; min-height: 36px; }
.inline-form select { width: auto; min-height: 36px; }
.inline-form input.qty.wide { width: 10em; }
h2.small-h { font-size: 1rem; margin-bottom: 2px; }
.recipe-item .item-edit { margin: -4px 0 8px; padding-left: 4px; }

/* chat */
.chat-log { display: grid; gap: 10px; margin-bottom: 10px; }
.chat-q { margin: 0 0 6px; font-weight: 600; }
.chat-a { margin: 0 0 8px; white-space: pre-line; }
pre.facts-json { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--sunk); padding: 8px; border-radius: var(--radius-sm); }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }

/* --- Přehled firmy ---------------------------------------------------------------------------------- */
.page-head { margin-bottom: 10px; }
.page-head h1 { margin-bottom: 2px; }
.page-head p { margin: 0; }
.section { margin-top: 28px; }
.section > h2 { margin: 0 0 10px; }
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.quick-btn {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600;
  font-size: .95rem; box-shadow: var(--shadow);
}
.quick-btn .ico { width: 22px; height: 22px; color: var(--accent); }
.quick-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.quick-btn.primary .ico { color: #fff; }
.quick-btn:hover { border-color: var(--accent); color: var(--ink); }
.quick-btn.primary:hover { background: var(--accent-hover); color: #fff; }
@media (prefers-color-scheme: dark) { .quick-btn.primary, .quick-btn.primary .ico, .quick-btn.primary:hover { color: #0d1a16; } }
@media (max-width: 640px) {
  .quick { gap: 8px; }
  .quick-btn { flex-direction: column; justify-content: center; text-align: center; gap: 6px; min-height: 78px;
    padding: 10px 6px; font-size: .86rem; }
}

/* Úkoly: kniha úkolů – vlevo velké číslo (kolik toho je), vpravo co a proč */
.tasks { display: grid; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); }
.task {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 16px 13px 18px; min-height: 64px;
  background: var(--card); color: var(--ink); text-decoration: none;
}
.tasks > .task + .task { border-top: 1px solid var(--line); }
.task::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-strong); }
.task.warn::before { background: var(--warn); }
.task.urgent::before { background: var(--err); }
.task.done::before { background: var(--ok); }
.task.info::before { background: var(--info); opacity: .6; }
a.task:hover { background: var(--sunk); color: var(--ink); }
.task-num { flex: none; width: 2.6em; text-align: right; font-size: 1.6rem; font-weight: 600; line-height: 1;
  letter-spacing: -.02em; color: var(--ink); }
.task.warn .task-num { color: var(--warn); }
.task.urgent .task-num { color: var(--err); }
.task.info .task-num { color: var(--muted); }
.task-ico { display: inline-flex; padding: 8px; border-radius: 9px; background: var(--sunk); color: var(--muted); flex: none; }
.task-num + .task-ico { display: none; }
.task.warn .task-ico { background: var(--warn-bg); color: var(--warn); }
.task.urgent .task-ico { background: var(--err-bg); color: var(--err); }
.task.done .task-ico { background: var(--ok-bg); color: var(--ok); }
.task-text { flex: 1; display: grid; gap: 1px; min-width: 0; }
.task-text strong { font-weight: 600; }
.task-text .muted { font-size: .88rem; }
.task-go { color: var(--muted); }
div.task.done { border: 1px solid var(--line); border-radius: var(--radius); }
.tasks > div.task.done { border: 0; border-radius: 0; }
@media (max-width: 640px) { .task { padding-left: 14px; gap: 12px; } .task-num { width: 1.9em; font-size: 1.4rem; } }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { display: grid; gap: 2px; padding: 14px 16px; background: var(--card); color: var(--ink); text-decoration: none;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }
a.kpi:hover { background: var(--sunk); color: var(--ink); }
.kpi-label { font-size: .84rem; color: var(--muted); font-weight: 500; }
.kpi-value { font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }
.kpi-hint { font-size: .78rem; color: var(--muted); }

.menu-group { margin-bottom: 14px; }
.menu-group .nav-title { margin: 0 2px 6px; }
.menu-tiles { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); }
@media (min-width: 700px) { .menu-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.menu-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card); color: var(--ink);
  text-decoration: none; }
@media (min-width: 700px) { .menu-tiles > .menu-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }
a.menu-tile:hover { background: var(--sunk); color: var(--ink); }
.menu-tile > .ico, .menu-ico .ico { color: var(--accent); width: 22px; height: 22px; }
.menu-text { flex: 1; display: grid; gap: 1px; min-width: 0; }
.menu-text strong { font-weight: 500; }

.company-cards { display: grid; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); }
.company-card { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--card); color: var(--ink);
  text-decoration: none; }
.company-card + .company-card { border-top: 1px solid var(--line); }
a.company-card:hover { background: var(--sunk); color: var(--ink); }
.company-ico { display: inline-flex; padding: 9px; border-radius: 10px; background: var(--accent-soft); }
.company-ico .ico { width: 22px; height: 22px; color: var(--accent); }
.company-text { flex: 1; display: grid; gap: 5px; min-width: 0; }
.company-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: .78rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--sunk); color: var(--muted); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.info { background: var(--accent-soft); color: var(--accent); }
.card.notice { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--card)); }

/* nastavení */
.setting-group { border-top: 1px solid var(--line); padding: 12px 0; }
.setting-group > summary { cursor: pointer; font-weight: 600; }
.setting-group > .form, .setting-group > form { margin-top: 12px; }
@media (min-width: 900px) { .setting-group > .form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; } }
.sticky-save { position: sticky; bottom: 80px; z-index: 5; display: flex; justify-content: flex-end; }
@media (min-width: 960px) { .sticky-save { bottom: 16px; } }
@media (min-width: 960px) { body.with-nav .only-mobile { display: none; } }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }

/* uzávěrka */
progress.progress { width: 100%; height: 8px; margin: 4px 0 14px; accent-color: var(--ok); }
.task.na { opacity: .65; }
.task.na .task-ico { background: var(--sunk); color: var(--muted); }
table.overview .step-col { text-align: center; width: 44px; }
.st { display: inline-flex; padding: 4px; border-radius: 7px; }
.st.ok { background: var(--ok-bg); color: var(--ok); }
.st.warn { background: var(--warn-bg); color: var(--warn); }
.st.na { color: var(--muted); }
.legend { margin-top: 10px; padding-left: 20px; }

/* dotazy */
.question { border-left: 3px solid var(--warn); padding: 4px 0 4px 12px; margin: 10px 0; }
.question.answered { border-left-color: var(--info); }
.question.resolved { border-left-color: var(--ok); opacity: .8; }
.question p { margin: 4px 0; }
.q-answer { background: var(--sunk); border-radius: var(--radius-sm); padding: 6px 10px; }
.q-form { width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inline-h { display: inline; }

/* výhled peněz */
details.task.week { display: block; }
details.task.week > summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; }
details.task.week > summary::-webkit-details-marker { display: none; }
.week-items { margin-top: 10px; }

/* vysvětlivky „i“ */
details.info { display: inline-block; position: relative; vertical-align: middle; margin-left: 4px; font-size: 1rem;
  font-weight: 400; line-height: 1.4; }
details.info > summary { list-style: none; cursor: pointer; display: inline-flex; }
details.info > summary::-webkit-details-marker { display: none; }
details.info > summary span {
  display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); color: var(--muted); font: italic 600 12px/1 Georgia, serif;
}
details.info > summary:hover span { border-color: var(--accent); color: var(--accent); }
details.info[open] > summary span { background: var(--accent); border-color: var(--accent); color: #fff; }
.info-pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: -10px; width: max-content; max-width: 320px;
  padding: 10px 12px; border-radius: var(--radius-sm); background: var(--ink); color: var(--card); font-size: .88rem;
  font-weight: 400; box-shadow: var(--shadow-pop); white-space: normal; text-transform: none; letter-spacing: 0;
}
@media (max-width: 640px) {
  /* telefon: vysvětlivka jako karta nad spodní lištou, aby nevyjela z obrazovky */
  .info-pop { position: fixed; top: auto; left: 12px; right: 12px; bottom: 88px; max-width: none; width: auto; }
}

/* nezaplacené faktury */
.card.unpaid { margin: 0; }
.card.unpaid.overdue { border-left: 4px solid var(--warn); }
.unpaid-head { display: flex; gap: 12px; align-items: flex-start; }
.unpaid-thumb img, .unpaid-thumb.pdf { width: 48px; height: 62px; object-fit: cover; object-position: top; border-radius: 5px; border: 1px solid var(--line); }
.unpaid-thumb.pdf { display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.unpaid-text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.unpaid-amount { text-align: right; display: grid; gap: 2px; white-space: nowrap; font-size: 1.05rem; }
.qr-box, .paid-box { width: 100%; }
.qr-box > summary, .paid-box > summary { list-style: none; display: inline-flex; }
.qr-box > summary::-webkit-details-marker, .paid-box > summary::-webkit-details-marker { display: none; }
.qr-box[open], .paid-box[open] { padding: 10px 0; }
img.qr { display: block; width: 220px; max-width: 70vw; height: auto; margin: 10px 0; background: #fff; padding: 10px; border-radius: 8px; image-rendering: pixelated; }
.pick { align-self: center; }
@media (min-width: 640px) { .qr-box, .paid-box { width: auto; } }

/* strany dokladu */
.page-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; }
.add-page { margin-top: 4px; }
fieldset.choice { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; display: grid; gap: 6px; }
fieldset.choice legend { font-weight: 600; font-size: .92rem; padding: 0 4px; }

/* dvoufázové přihlášení */
.twofa-qr { margin: 10px 0; }
.twofa-qr svg { display: block; width: 300px; max-width: 80vw; height: auto; background: #fff; padding: 10px; border-radius: 8px; }
ul.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; list-style: none; padding: 0; font-size: 1.1em; }
ol.steps li { margin-bottom: 10px; }
code.secret { font-size: 1.15em; letter-spacing: .05em; word-break: break-all; user-select: all; }

[hidden] { display: none !important; }
.confirm-delete > summary { list-style: none; display: inline-flex; }
.confirm-delete > summary::-webkit-details-marker { display: none; }

/* prázdný stav */
.empty-state { padding: 28px 18px; text-align: center; color: var(--muted); background: var(--card);
  border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.empty-state strong { display: block; color: var(--ink); margin-bottom: 4px; }

/* přihlášení */
.login-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 48px 0 -28px; font-weight: 600; }

.head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.head-row h1 { margin: 0; }
@media (max-width: 959px) { body.with-nav .head-row > .btn.primary { display: none; } }
.review > div > .card:first-child, .review > div > form.card:first-child, .review-form { margin-top: 0; }
.review > div > .checks:first-child { margin-top: 0; }
@media (max-width: 640px) {
  .doc-head { display: grid; gap: 8px; }
  .doc-total { text-align: left; display: flex; align-items: baseline; gap: 10px; }
  .doc-total .value { font-size: 1.3rem; }
}
.form > .card, .form > section.card { display: grid; gap: 12px; margin: 0; }
.form > .card > h2:first-child { margin: 0; }
.form > .card > p { margin: 0; }
.list-item.inactive { opacity: .6; }
.list.wrap .list-item > span > strong { white-space: normal; overflow-wrap: anywhere; }
.oidc-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.form-section > summary { cursor: pointer; }
.form-section h3 { margin: 14px 0 4px; color: var(--muted); }
.form-section.foreign { border-left: 4px solid var(--accent); }
label.field.ok input, label.field.ok select { background: var(--ok-bg); }
label.field.check input, label.field.check select { background: var(--warn-bg); }
/* přehled firem: od klienta čeká na kontrolu */
.company-card.has-new { border-left: 4px solid var(--err); background: color-mix(in srgb, var(--err-bg) 55%, var(--card)); }
.company-card .new-line { color: var(--err); font-size: .88rem; }
.new-count { flex: none; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; background: var(--err);
  color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.uploaded.from-client { color: var(--err); }
/* mzdy – platby: QR kódy odvodů */
.qr-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.qr-card { display: grid; gap: 6px; justify-items: start; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.qr-card.paid { opacity: .6; }
.qr-card .qr, .qr-mini .qr { width: 180px; height: 180px; background: #fff; padding: 6px; border-radius: 6px; }
.qr-amount { font-size: 1.25rem; font-weight: 700; }
.btn.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.qr-mini > summary { list-style: none; }
/* kancelář: fronty práce přes všechny firmy */
.work-queues { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-bottom: 18px; }
.work-queues .queue { margin: 0; }
.work-queues .queue > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.work-queues .queue > summary strong { flex: 1; }
.work-queues .new-count { min-width: 28px; height: 28px; font-size: .9rem; }
/* prostředí: kancelář (tmavá hlavička) × klientská zóna (světlá) */
.zone-badge { font-size: .75rem; font-weight: 700; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); margin-right: 6px; white-space: nowrap; }
body.office { --brand: #14302a; --brand-ink: #f2f7f5; }
body.office .topbar { border-bottom-color: #0c1f1b; }
body.office .zone-badge { background: #f2c94c; color: #2b2300; }
body.office .switcher > summary .ico { color: rgba(242, 247, 245, .7); }
body.office .switcher > summary:hover, body.office .switcher[open] > summary { background: rgba(255, 255, 255, .1); }
body.office .topbar .branch-switch { border-left-color: rgba(255, 255, 255, .2); }
.client-strip { margin: 0 0 12px; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--sunk);
  color: var(--muted); font-size: .88rem; display: flex; align-items: center; gap: 6px; }
@media (max-width: 520px) { .zone-badge { display: none; } body.office .brand-mark { background: #f2c94c; color: #2b2300; } }