/* Heedly – vzhled „E · Kompaktní“ ve stylu Fakturassa, jen světlý režim.
   Základ převzatý z klikacího dema (tokeny Fakturassa + úpravy Kompaktní), doplněný o formuláře
   a obrazovky, které demo nemělo. Písmo nadpisů Sora je u nás (fonts/, licence OFL), jinak systémové. */

@font-face { font-family: "Sora"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/static/fonts/sora-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600 700; font-display: swap; src: url(/static/fonts/sora-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --bg: #f1efe8;
  --panel: #ffffff;
  --side: #0f2942;
  --ink: #2c2c2a;
  --muted: #5f5e5a;
  --line: #d3d1c7;
  --line2: #e6e4dc;
  --hover: #f5f4ee;
  --sel: #e6f1fb;
  --chip: #f1efe8;
  --btn: #1b5fa8;
  --btn-ink: #ffffff;
  --focus: #378add;
  --link: #185fa5;
  --crit-row: #fdf8f7;
  --u4: #e24b4a;
  --u4-bg: #fcebeb;
  --u4-fg: #a32d2d;
  --u3: #ec835a;
  --u3-bg: #fdeee6;
  --u3-fg: #8a3b17;
  --u2: #f2b53a;
  --u2-bg: #faeeda;
  --u2-fg: #854f0b;
  --u1: #b4b2a9;
  --u1-bg: #f1efe8;
  --u1-fg: #5f5e5a;
  --ok-bg: #eaf3de;
  --ok-fg: #3b6d11;
  --c-fu: #2a78d6;
  --c-ssz: #eb6834;
  --c-zp: #1baf7a;
  --c-urad: #eda100;
  --c-cu: #e87ba4;
  --c-soud: #008300;
  --c-up: #6250d6;
  --c-ex: #e34948;
  --c-jine: #a8a69e;
  --s-nova-bg: #e6f1fb;
  --s-nova-fg: #185fa5;
  --s-roz-bg: #f1efe8;
  --s-roz-fg: #2c2c2a;
  --s-kli-bg: #f3e8ff;
  --s-kli-fg: #6b21a8;
  --s-vyr-bg: #eaf3de;
  --s-vyr-fg: #3b6d11;
  --scrim: rgba(15, 41, 66, 0.28);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --side-ink: #ffffff;
  --side-muted: #b5d4f4;
  --side-active: #1b4a7a;
  --side-active-ink: #ffffff;
  --side-hover: #163757;
  --side-line: #1d3a58;
  --side-cnt: #22476e;
  --logo-bg: #0f2942;
  --logo-ink: #ffffff;
  --top-bg: #f5f4ee;
  --row-rule: #e6e4dc;
  --r: 8px;
  --r-sm: 6px;
  --r-pill: 20px;
  --bw: 0.5px;
  --shadow-card: none;
  --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-num: var(--font);
  --h1-size: 18px;
  --h1-weight: 600;
  --h1-transform: none;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { flex: none; }
.grow { flex: 1 1 auto; }
.hint { font-size: 13px; color: var(--muted); }
.fw { font-weight: 600; }
.sm { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.fg4 { color: var(--u4-fg); } .fg3 { color: var(--u3-fg); } .fgm { color: var(--muted); }
.ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* demo bar + shell */
.shell { display: flex; align-items: stretch; min-height: 100dvh; }
.side { width: 252px; flex: none; background: var(--side); border-right: 1px solid var(--line); padding-block: 18px 22px; padding-right: 14px; padding-left: max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.brand b { display: block; font-size: 16px; }
.brand small { display: block; color: var(--muted); font-size: 12px; }
.logo { width: 34px; height: 34px; border-radius: 9px; background: var(--btn); color: var(--btn-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.navs { display: flex; flex-direction: column; gap: 2px; }
.nav { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left; font-weight: 500; color: var(--ink); }
.nav:hover { background: var(--hover); }
.nav.on { background: var(--panel); border-color: var(--line); font-weight: 600; }
.nav .cnt { margin-left: auto; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--chip); }
/* Podstrom Pošty (návrh B): odsazený se svislou čarou, dělicí čáry s názvem skupiny, druh složky podle ikony */
.sb-tree { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 10px; padding-left: 6px; border-left: 1px solid var(--side-line); }
.sb-i { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 27px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--side-ink); text-align: left; font-size: 12.5px; }
.sb-i:hover { background: var(--side-hover); }
.sb-i .ic { flex: none; color: #85b7eb; }
.sb-i.on { background: var(--side-active); color: var(--side-active-ink); font-weight: 600; }
.sb-i.on .ic { color: var(--side-active-ink); }
.sb-i.add { color: var(--side-muted); }
.sb-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-c { flex: none; font-size: 11px; font-weight: 600; color: var(--side-muted); font-variant-numeric: tabular-nums; }
.sb-i.on .sb-c { color: var(--side-active-ink); }
.sb-c.w, .sb-c.e { min-width: 18px; padding: 0 6px; border-radius: var(--r-pill); text-align: center; }
.sb-c.w { background: #eda100; color: #0f2942; }
.sb-c.e { background: var(--u4); color: #ffffff; }
.sb-c.m { opacity: 0.7; }
.sb-zm { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #eda100; }
.sb-g { display: flex; align-items: center; gap: 6px; padding: 7px 0 3px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; color: #85b7eb; }
.sb-g::before, .sb-g::after { content: ''; height: 1px; background: var(--side-line); }
.sb-g::before { flex: none; width: 10px; }
.sb-g::after { flex: 1; }
.office { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; }
.office strong { color: var(--ink); font-weight: 600; }
.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-block: 12px; padding-left: 24px; padding-right: max(24px, env(safe-area-inset-right, 0px)); background: var(--panel); border-bottom: 1px solid var(--line); }
.search { flex: 1 1 260px; max-width: 520px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--muted); }
.search:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.search input { flex: 1 1 auto; min-width: 0; height: 36px; border: 0; outline: 0; background: transparent; color: var(--ink); }
.sync { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.sync .ic { color: var(--ok-fg); }
.me { display: inline-flex; align-items: center; gap: 8px; }
.me-t { display: flex; flex-direction: column; line-height: 1.2; font-size: 13px; }
.me-t small { color: var(--muted); font-size: 12px; }
.view { padding-block: 22px 96px; padding-left: 24px; padding-right: max(24px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font-weight: 600; font-size: 14px; white-space: nowrap; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.btn.primary:hover { opacity: 0.88; }
.btn.sm { min-height: 34px; padding: 0 11px; font-size: 13px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn .cnt { padding: 0 7px; border-radius: 999px; background: var(--btn-ink); color: var(--btn); font-size: 12px; font-weight: 700; }
.ibtn { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); }
.ibtn.sm { width: 32px; height: 32px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 500; }
.chip[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.badge.warn { background: var(--u2-bg); color: var(--u2-fg); }
select { height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
.sel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 600; color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.txt { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
.ck { display: flex; align-items: center; gap: 8px; min-height: 34px; font-size: 13.5px; }
.ck input { width: 16px; height: 16px; margin: 0; accent-color: var(--btn); }

/* pills, tags */
.up { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.up i { width: 7px; height: 7px; border-radius: 50%; }
.u4 { background: var(--u4-bg); color: var(--u4-fg); } .u4 i { background: var(--u4); }
.u3 { background: var(--u3-bg); color: var(--u3-fg); } .u3 i { background: var(--u3); }
.u2 { background: var(--u2-bg); color: var(--u2-fg); } .u2 i { background: var(--u2); }
.u1 { background: var(--u1-bg); color: var(--u1-fg); } .u1 i { background: var(--u1); }
.st { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.s-nova { background: var(--s-nova-bg); color: var(--s-nova-fg); }
.s-rozprac { background: var(--s-roz-bg); color: var(--s-roz-fg); }
.s-klient { background: var(--s-kli-bg); color: var(--s-kli-fg); }
.s-vyrizeno, .okb { background: var(--s-vyr-bg); color: var(--s-vyr-fg); }
.warnb { background: var(--u2-bg); color: var(--u2-fg); }
.errb { background: var(--u4-bg); color: var(--u4-fg); }
.tagc { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--chip); font-size: 12.5px; font-weight: 600; }
.cat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; }
.cat b { color: var(--ink); font-weight: 600; }
.mk { width: 8px; height: 8px; border-radius: 2px; flex: none; display: inline-block; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.dot.sq { border-radius: 2px; }
.av { width: 30px; height: 30px; border-radius: 50%; background: var(--chip); display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; flex: none; }
.av.sm { width: 24px; height: 24px; font-size: 10.5px; }
.av.empty { background: transparent; border: 1px dashed var(--u1); }
.who { display: inline-flex; align-items: center; gap: 6px; }
.new { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--btn); color: var(--btn-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; flex: none; }

/* pošta */
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.ph-t { flex: 1 1 320px; min-width: 0; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; }
h1 { margin: 2px 0 0; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
.mviews { display: none; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.qchip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 600; color: var(--ink); }
.qchip .n { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--chip); text-align: center; font-variant-numeric: tabular-nums; }
.qchip[aria-pressed="true"] { border-color: var(--ink); background: var(--sel); }
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.pills { flex: 1 1 380px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 32px; padding: 0 2px 0 12px; border-radius: 8px; background: var(--chip); font-size: 13px; }
.pill b { font-weight: 600; white-space: nowrap; }
.pill .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill button { width: 28px; height: 28px; flex: none; border: 0; border-radius: 6px; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.addc { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px dashed var(--u1); border-radius: 8px; background: transparent; font-size: 13px; font-weight: 600; color: var(--ink); }
.posta-body { display: flex; align-items: flex-start; gap: 18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.list { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.gh { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--line2); background: var(--bg); text-align: left; font-size: 13px; font-weight: 600; color: var(--ink); }
.gh .chev { display: inline-flex; color: var(--muted); transition: transform 0.15s; }
.gh[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.gh .c { color: var(--muted); font-weight: 500; }
.row { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line2); background: var(--panel); text-align: left; color: var(--ink); }
.row:hover, .tr:hover { background: var(--hover); }
.row.crit, .tr.crit { background: var(--crit-row); }
.row.sel, .tr.sel { background: var(--sel); }
.row.compact { padding-block: 7px; gap: 2px; }
.l1, .l2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; width: 100%; }
.l1 .client { font-weight: 600; font-size: 14px; }
.l2 .subj { flex: 1 1 300px; min-width: 0; font-size: 14px; }
.l2 .subj.unread { font-weight: 600; }
.due { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.due b { font-weight: 600; }
.due .d { color: var(--muted); }
.due.col { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.3; }
.dl { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; white-space: nowrap; }
.vr { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--u3-fg); white-space: nowrap; }
.tw { overflow-x: auto; }
.th, .tr { display: grid; column-gap: 12px; align-items: center; padding-inline: 16px; }
.th { min-height: 38px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); }
.tr { width: 100%; padding-block: 11px; border: 0; border-bottom: 1px solid var(--line2); background: var(--panel); text-align: left; font-size: 13px; color: var(--ink); }
.tr.compact { padding-block: 6px; }
.tr > * { min-width: 0; }
.tr > .up, .tr > .st, .tr > .av { justify-self: start; }
.board { overflow-x: auto; padding: 14px; background: var(--bg); }
.bcols { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; min-width: 920px; }
.bcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bh { display: flex; gap: 8px; padding: 2px; font-size: 13px; font-weight: 600; }
.bh .c { color: var(--muted); font-weight: 500; }
.bcard { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); text-align: left; color: var(--ink); }
.bcard:hover { border-color: var(--u1); }
.bempty { padding: 14px; border: 1px dashed var(--line); border-radius: 10px; text-align: center; color: var(--muted); font-size: 13px; }
.prazdne { padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }

/* builder */
/* nastavení složky: okno s náhledem */
.builder { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; padding: 40px 24px; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vdlg { width: min(860px, 100%); max-height: min(700px, calc(100dvh - 80px)); display: flex; flex-direction: column; background: var(--panel); border-radius: calc(var(--r) + 4px); box-shadow: var(--shadow); overflow: hidden; outline: 0; }
.vdlg-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 22px 0; }
.vdlg-n { display: flex; align-items: center; gap: 10px; margin: 6px 22px 2px; padding: 0 12px; border: 1px dashed var(--line); border-radius: var(--r-sm); color: var(--muted); cursor: text; }
.vdlg-n:hover, .vdlg-n:focus-within { border-style: solid; border-color: var(--btn); }
.vdlg-n input { flex: 1; min-width: 0; height: 50px; border: 0; outline: 0; background: transparent; color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.vdlg-b { flex: 1; min-height: 0; display: flex; align-items: flex-start; gap: 22px; padding: 16px 22px 20px; overflow-y: auto; }
.vdlg-l { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
/* Náhled má pevnou šířku: dlouhá věc zprávy se zkrátí a nezúží nastavení vlevo. */
.vdlg-r { flex: 0 0 300px; width: 300px; min-width: 0; position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--bg); border-radius: var(--r); }
.vprev { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pv { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 12px; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-sm); }
.pv .l1 { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 10px; min-width: 0; font-size: 13px; }
.pv .l1 > b:last-child { flex: none; }
.vmore { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 14px; font-weight: 600; text-align: left; }
.vmore .chev { display: inline-flex; color: var(--muted); transition: transform 0.15s; }
.vmore[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.vmore .hint { font-weight: 400; }
.vdlg-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line2); background: var(--bg); }
.vdlg-f .grow { flex: 1; }
.bsec { display: flex; flex-direction: column; gap: 10px; }
.bsec h3 { margin: 0; font-size: 14px; }
.lbl { font-size: 13px; color: var(--muted); }
.lineq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cond { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.condh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.condh b { font-size: 13.5px; }
.op { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 12.5px; font-weight: 600; color: var(--ink); }
.boxd { padding: 12px; border: 1px dashed var(--line); border-radius: 10px; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }

/* drawer */
.scrim { position: fixed; inset: 0; z-index: 30; background: var(--scrim); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 31; width: min(600px, 100%); overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow); padding: calc(18px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) 22px; display: flex; flex-direction: column; gap: 16px; }
.dh { display: flex; align-items: flex-start; gap: 10px; }
.dh .tags { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.drawer h2 { margin: 0; font-size: 21px; line-height: 1.3; text-wrap: balance; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); }
.meta b { color: var(--ink); font-weight: 600; }
.cl { border: 0; background: transparent; padding: 0; font-weight: 600; color: var(--link); text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.box { padding: 14px 16px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line2); display: flex; flex-direction: column; gap: 8px; }
.box p { margin: 0; }
.box.warn { background: var(--u2-bg); border-color: #f3d9ae; color: var(--u2-fg); }
.box h3 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.box.warn h3 { color: inherit; }
.dlbig { font-size: 20px; font-weight: 700; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13.5px; }
/* Popisky (Řeší, Úkol, Přílohy…) černě a polotučně, ať jsou na první pohled vidět. */
.kv dt { color: var(--ink); font-weight: 600; }
.kv dd { margin: 0; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; }
.selrow { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.h3 { margin: 0 0 8px; font-size: 14px; }
.out { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.out .ic { color: var(--ok-fg); margin-top: 2px; }
.out.off { color: var(--muted); }
.out.off .ic { color: var(--muted); }
.tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.tl li { position: relative; padding-left: 22px; }
.tl li::before { content: ""; position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--btn); }
.tl li.ceka::before { background: var(--panel); border: 2px solid var(--btn); }
.tl small { display: block; color: var(--muted); font-size: 12.5px; }
.files { display: flex; flex-direction: column; gap: 6px; }
.file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line2); border-radius: 8px; font-size: 13px; }

/* screens */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: left; color: var(--ink); }
.tile:hover { border-color: var(--u1); }
.tile .k { font-size: 13px; color: var(--muted); }
.tile .v { font-size: 30px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tile .s { font-size: 12.5px; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.panel { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.panel h2 { margin: 0; font-size: 15px; }
.li { display: flex; align-items: center; gap: 10px; width: calc(100% + 20px); margin: 0 -10px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; color: var(--ink); }
.li:hover { background: var(--hover); }
.two { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.3; }
.two b, .two small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.two b { font-size: 13.5px; }
.two small { font-size: 12.5px; color: var(--muted); }
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 26px; gap: 10px; align-items: center; font-size: 13px; }
.track { display: flex; gap: 2px; height: 14px; }
.track span { height: 14px; border-radius: 3px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; }
.act { display: flex; gap: 10px; padding: 4px 0; font-size: 13px; }
.act .num { width: 40px; flex: none; color: var(--muted); }
table.t { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13.5px; }
table.t th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg); }
table.t td { padding: 10px 14px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
.calwrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.week { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); min-width: 780px; }
.day { border-right: 1px solid var(--line2); min-height: 280px; display: flex; flex-direction: column; }
.day:last-child { border-right: 0; }
.dayh { padding: 10px 12px; border-bottom: 1px solid var(--line2); display: flex; flex-direction: column; }
.dayh b { font-size: 13.5px; }
.dayh span { font-size: 12px; color: var(--muted); }
.dayh.today b { color: var(--link); }
.dayh .hol { color: var(--u3-fg); font-weight: 600; }
.dayb { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ev { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; text-align: left; font-size: 12.5px; }
.ev span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rem { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--muted); }
.tdl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tdi { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: var(--bg); }
.tdi input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--btn); flex: none; }
.tdi b { display: block; font-size: 13px; }
.tdi small { font-size: 12px; }
.tdi.done b { text-decoration: line-through; color: var(--muted); }
.mail { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line2); font-size: 13px; }
.mail:last-child { border-bottom: 0; }
.mail small { color: var(--muted); font-size: 12px; }
.note { padding: 12px 14px; border-radius: 10px; background: var(--sel); font-size: 13px; }
.rh { display: flex; align-items: flex-start; gap: 12px; }
.sw { width: 46px; height: 28px; flex: none; padding: 3px; border: 0; border-radius: 999px; background: var(--u1); display: inline-flex; justify-content: flex-start; }
.sw[aria-checked="true"] { background: var(--btn); justify-content: flex-end; }
.sw span { width: 22px; height: 22px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.ckb { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--line2); border-radius: 10px; font-size: 13.5px; }
.ckb input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--btn); flex: none; }
.ckb small { display: block; color: var(--muted); font-size: 12.5px; }
.ckb.dim { opacity: 0.55; }
.lvl { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line2); }
.lvlh { display: flex; align-items: center; gap: 10px; }
.lvlrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13.5px; }
.lvlrow .t { flex: 1 1 160px; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-weight: 700; color: var(--ink); }
.stepper output { min-width: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper output.wide { min-width: 130px; }
.orule { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 10px; }
.orule small { display: block; color: var(--muted); font-size: 12.5px; }

/* dialog, guide, toast */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: var(--scrim); }
.dialog { width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--panel); border-radius: 16px; box-shadow: var(--shadow); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.dialog h2 { margin: 2px 0 0; font-size: 21px; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50; width: max-content; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 10px; background: var(--btn); color: var(--btn-ink); font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow); }
@media (max-width: 1100px) { .calwrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .shell { flex-direction: column; min-height: 0; }
  .side { width: auto; flex-direction: row; align-items: center; gap: 12px; padding-block: 8px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .brand small, .brand b, .sb-tree, .office { display: none; }
  .navs { flex-direction: row; }
  .nav { width: auto; white-space: nowrap; min-height: 38px; }
  .topbar, .view { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .me-t, .sync { display: none; }
  .mviews { display: inline-flex; }
  .posta-body { flex-direction: column; }
  .builder { padding: 0; }
  .vdlg { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .vdlg-b { flex-direction: column; align-items: stretch; }
  .vdlg-r { position: static; flex-basis: auto; width: auto; }
}
.side { background: var(--side); color: var(--side-ink); border-right-color: var(--side-line); }
.brand small, .office { color: var(--side-muted); }
.office { border-top-color: var(--side-line); }
.office strong, .nav { color: var(--side-ink); }
.nav:hover { background: var(--side-hover); }
.nav.on { background: var(--side-active); border-color: var(--side-line); color: var(--side-active-ink); }
.nav .cnt { background: var(--side-cnt); color: inherit; }
.nav.on .cnt { background: var(--side-active-ink); color: var(--side-active); }
.logo { background: var(--logo-bg); color: var(--logo-ink); }
.logo .znak { width: 100%; height: 100%; display: block; }
/* V tmavé boční liště světlá verze znaku. */
.side .logo { background: var(--bg); color: var(--side); }
.topbar { background: var(--top-bg); }
.card, .tile, .bcard { border-radius: var(--r); border-width: var(--bw); box-shadow: var(--shadow-card); }
.btn, .seg, .search, select, .txt, .ibtn, .pill, .addc, .tagc, .box, .cond, .file, .ev, .tdi, .orule, .ckb, .note, .boxd, .toast, .li { border-radius: var(--r-sm); }
.seg button { border-radius: max(0px, calc(var(--r-sm) - 2px)); }
.chip, .qchip, .up, .badge, .op, .qchip .n, .btn .cnt, .nav .cnt { border-radius: var(--r-pill); }
.dialog { border-radius: calc(var(--r) + 4px); }
h1 { font-family: var(--font-display); font-size: var(--h1-size); font-weight: var(--h1-weight); text-transform: var(--h1-transform); }
.drawer h2, .dialog h2, .panel h2, .dlbig, .brand b { font-family: var(--font-display); }
.row, .tr, .gh { border-bottom-color: var(--row-rule); }

/* Fakturasso: béžová plocha, bílé karty, vlasové linky, modrá #1B5FA8, tmavě modrý panel, nadpisy Sora */
body { font-size: 13px; }
.topbar { border-bottom-width: 0.5px; }
.side { border-right: 0; }
.logo { width: 26px; height: 26px; border-radius: 6px; }
.brand b, h1, .panel h2, .drawer h2, .dialog h2 { font-family: var(--font-display); font-weight: 600; word-spacing: 0.12em; }
.eyebrow { font-size: 10.5px; letter-spacing: 0.06em; }
.th, table.t th { font-size: 10px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; background: var(--hover); border-bottom: 1.5px solid var(--line); }
.gh { background: var(--hover); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.row:hover, .tr:hover { background: var(--hover); }
.btn { border-width: 0.5px; }
.btn:not(.primary):not(.ghost) { background: var(--hover); border-color: #b4b2a9; }
.btn.primary:hover { background: #154e8f; border-color: #154e8f; opacity: 1; }
.chip[aria-pressed="true"], .seg button[aria-pressed="true"], .qchip[aria-pressed="true"] { background: var(--sel); color: var(--link); border-color: #b5d4f4; }
.search { background: var(--panel); border-width: 0.5px; }
.up { font-weight: 500; }
.nav.on { border-color: transparent; }
.toast { background: #0f2942; color: #ffffff; }

/* E · Kompaktní: hustší řádky a menší ovládací prvky jako v účetním pohledu Fakturassa */
body { font-size: 12.5px; }
@media (min-width: 901px) { .side { width: 236px; padding-top: 12px; gap: 14px; } }
.nav { min-height: 32px; font-size: 13px; }
.topbar { padding-block: 6px; }
.search { height: 32px; }
.search input { height: 30px; }
.btn { min-height: 32px; padding: 0 11px; font-size: 12.5px; }
.ibtn { width: 30px; height: 30px; }
.av { width: 26px; height: 26px; font-size: 10.5px; }
.view { padding-block: 14px 80px; gap: 10px; }
.qchip { min-height: 28px; font-size: 12px; }
.chip, .pill, .addc { min-height: 26px; font-size: 12px; }
select { height: 30px; font-size: 12.5px; }
.seg button { height: 28px; font-size: 12px; }
.row { padding: 7px 16px; gap: 3px; }
.tr { padding-block: 6px; }
.gh { min-height: 30px; }
.l1 .client, .l2 .subj { font-size: 13px; }
.up { height: 19px; padding: 0 7px; font-size: 11px; }
.tile { padding: 10px 12px; }
.tile .v { font-size: 24px; }

/* ---------- doplňky aplikace (formuláře, napojení, tým, přihlášení) ---------- */
button:disabled, input:disabled, select:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.danger { color: var(--u4-fg); }
.btn.warn { background: var(--u3-bg); border-color: transparent; color: var(--u3-fg); }
.link { border: 0; background: transparent; padding: 0; color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 9px 14px; border-radius: var(--r-sm); background: var(--sel); font-size: 12.5px; }
.banner.sim { background: var(--u2-bg); color: var(--u2-fg); }
.banner.err { background: var(--u4-bg); color: var(--u4-fg); }
.fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12.5px; color: var(--muted); }
.fld > span { font-weight: 600; }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 32px; padding: 6px 10px; border: 0.5px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; }
.fld textarea { min-height: 90px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.fld textarea.plain { font-family: var(--font); font-size: 13px; min-height: 70px; }
.fld small { font-weight: 400; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; }
.form .full { grid-column: 1 / -1; }
.lhed { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 10px; align-items: end; }
.prev { padding: 8px 10px; border-radius: var(--r-sm); background: var(--panel); border: 0.5px solid var(--line2); font-size: 12.5px; }
.muted { color: var(--muted); }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; word-break: break-all; }
.menu { position: relative; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; min-width: 200px; padding: 6px; border: 0.5px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.menu-list button { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; text-align: left; font-size: 13px; color: var(--ink); }
.menu-list button:hover { background: var(--hover); }
.me-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 2px 4px; border-radius: var(--r-sm); color: inherit; text-align: left; }
.me-btn:hover { background: var(--hover); }
.stamp { font-size: 11.5px; color: var(--muted); }
.bez { color: var(--muted); font-style: italic; }
.cell-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.zar { display: grid; grid-template-columns: 140px 130px minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line2); font-size: 13px; }
.zar:last-child { border-bottom: 0; }
.dialog .fld input, .dialog .fld select { min-height: 34px; }
.pw { padding: 10px 12px; border-radius: var(--r-sm); background: var(--u2-bg); color: var(--u2-fg); font-size: 13px; }
.pw b { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
@media (max-width: 900px) { .zar { grid-template-columns: 1fr 1fr; } }
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg); }
.login-card { width: min(380px, 100%); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.login-card.wide { width: min(620px, 100%); }
.login-card .brand { padding: 0; }
.login-card .brand b { font-size: 16px; }
.login-card h1 { margin: 4px 0 0; }
.login-card a.file { color: var(--link); text-decoration: none; }
.files a.file { color: var(--ink); text-decoration: none; }
.files a.file:hover { background: var(--hover); }

/* ---------- okna podle vybraných návrhů (1B, 2A, 3A, 4A, 5C, 6B, 8A, 9B, 10A/10C) ---------- */
.modal, .scrim { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal { padding: 24px; }
.modal.det { z-index: 32; }
.dialog { width: min(var(--w, 560px), 100%); max-height: calc(100dvh - 48px); padding: 0; gap: 0; overflow: hidden; font-size: 14px; }
.dlg-h { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 0; }
.dlg-h > .grow { min-width: 0; }
.dlg-h h2 { margin: 2px 0 0; font-size: 21px; line-height: 1.25; text-wrap: balance; }
.dlg-h .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dlg-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.dlg-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line2); background: var(--top-bg); }
.dlg-f .grow, .dfoot .grow { flex: 1 1 auto; }
.dialog p, .drawer p { margin: 0; }
.dialog .btn, .drawer .btn { min-height: 38px; padding: 0 16px; font-size: 13.5px; font-weight: 600; }
.dialog .btn.sm, .drawer .btn.sm { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.dialog .btn:not(.primary):not(.ghost), .drawer .btn:not(.primary):not(.ghost) { background: var(--panel); border: 1px solid var(--line); }
.dialog .btn:not(.primary):not(.ghost):hover, .drawer .btn:not(.primary):not(.ghost):hover { background: var(--hover); }
.btn.primary.danger { background: var(--u4-fg); border-color: var(--u4-fg); color: #ffffff; }
.btn.primary.danger:hover { background: #8a2424; border-color: #8a2424; }
.dialog .ibtn, .drawer .dclose { width: 36px; height: 36px; border-radius: 9px; }
.dialog .fld, .drawer .fld { gap: 6px; font-size: 13px; color: var(--ink); }
.dialog .fld input, .dialog .fld select, .dialog .fld textarea, .drawer .fld input, .drawer .fld select, .drawer .fld textarea { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.dialog .fld textarea.plain, .drawer .fld textarea.plain { min-height: 84px; }
.dialog .fld input:focus, .drawer .fld input:focus { outline: 0; border-color: var(--btn); box-shadow: 0 0 0 3px var(--sel); }
.fld .pod { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.h { margin: 0; font-size: 14px; font-weight: 650; }
.sekce { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sep { height: 1px; flex: none; background: var(--line2); }
.radek { display: flex; align-items: center; gap: 10px; }
.radek > .grow, .radek > input { flex: 1 1 auto; min-width: 0; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.03em; }
.bdg { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--hover); color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; flex: none; }
.bdg.ok { background: var(--ok-bg); color: var(--ok-fg); }
.bdg.acc { background: var(--sel); color: var(--link); }
.bdg.warn { background: var(--u2-bg); color: var(--u2-fg); }
.bdg.ora { background: var(--u3-bg); color: var(--u3-fg); }
.bdg.err { background: var(--u4-bg); color: var(--u4-fg); }
.box.acc { background: var(--sel); border-color: #c9def3; color: var(--link); }
.box.ok { background: var(--ok-bg); border-color: #cfe3b5; color: var(--ok-fg); }
.box.err { background: var(--u4-bg); border-color: #f2c4c4; color: var(--u4-fg); }
.box .radek { display: flex; gap: 8px; align-items: flex-end; }
/* Cesty k poště klienta (situace 1–4) a schránky kanceláře */
.cesta { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 10px; }
.cesta .ct { display: flex; align-items: center; gap: 8px; }
.cesta .cn { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sel); color: var(--link); font-size: 12px; font-weight: 700; }
.cesta dl { display: grid; grid-template-columns: 150px 1fr; gap: 4px 10px; margin: 0; font-size: 13px; }
.cesta dt { color: var(--muted); }
.cesta dd { margin: 0; }
.gh-vs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gh-vs .gh { flex: 1 1 auto; }
.idf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.skanc { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.skanc .sk-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dialog .box, .drawer .box { border-radius: 10px; font-size: 14px; }
.box b { font-weight: 650; }
.tlink { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0; color: var(--ink); font-size: 13.5px; font-weight: 650; text-align: left; }
.tlink:hover { color: var(--link); }
.tlink.pill { height: 24px; padding: 0 10px; border-radius: 999px; background: var(--sel); color: var(--link); font-size: 13px; vertical-align: 1px; }
.tlink.danger { color: var(--u4-fg); }
.mezi { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* karty s volbou (lhůta, komu poslat, režim schránky) */
.rcard { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; }
.rcard input[type="radio"] { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--btn); }
.rcard b { display: block; font-weight: 650; }
.rcard small { display: block; color: var(--muted); font-size: 13px; }
.rcard:has(input:checked), .rcard.on { border-color: #85b7eb; background: var(--sel); }
.rcard:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.rcard.on { cursor: default; }
.rcard-x { display: flex; flex-direction: column; gap: 8px; margin: -4px 0 0 30px; }
.volby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rcard.big { padding: 18px; }
.rc { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rc-top { display: flex; align-items: flex-start; gap: 12px; }
.rc-i { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line2); border-radius: 8px; background: var(--top-bg); color: var(--ink); }
.rcard.big:has(input:checked) .rc-i { background: var(--panel); border-color: #c9def3; color: var(--link); }
.rc .box { gap: 2px; }

/* okno Napojení jako průvodce (návrh A): kroky, shrnutí schránky, uložené přihlášení */
.wz { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 0 24px 14px; border-bottom: 1px solid var(--line2); }
.wz-k { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 14px; font-weight: 600; color: var(--muted); }
.wz-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--hover); color: var(--muted); font-size: 12.5px; font-weight: 700; }
.wz-k.akt { color: var(--ink); } .wz-k.akt .wz-n { background: var(--btn); color: #fff; }
.wz-k.hot { color: var(--ok-fg); } .wz-k.hot .wz-n { background: var(--ok-bg); color: var(--ok-fg); }
.wz-c { flex: 1 1 auto; height: 1px; background: var(--line); }
.wz-volby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wz-volby .rc-i { width: 36px; height: 36px; }
.wz-sum { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; background: var(--top-bg); font-size: 14px; }
.wz-sum .ic { color: var(--muted); }
.wz-sum .tlink { color: var(--link); font-weight: 600; }
.wz-in { position: relative; display: flex; }
.wz-in input { flex: 1 1 auto; min-width: 0; }
.wz-ul { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ok-fg); pointer-events: none; }
.wz-vr span small { display: block; color: var(--muted); font-size: 12.5px; }
.wz-dor { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--u2-bg, #faeeda); color: var(--u2-fg); font-size: 13.5px; }
.wz-dor .ic { margin-top: 2px; }
.wz-f { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 700px) {
  .wz-volby { grid-template-columns: minmax(0, 1fr); } .wz { padding: 0 16px 12px; }
  .wzo .dlg-b > .mezi { flex-direction: column; align-items: stretch; gap: 8px; }
  .wzo .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wzo .seg button { padding: 0 6px; }
  .wz-f { display: none; }
}

/* výběr člověka s avatarem */
.selav { display: flex; align-items: center; gap: 8px; min-height: 40px; padding-left: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.selav select, .dialog .selav select, .drawer .selav select { flex: 1 1 auto; min-width: 0; height: 38px; min-height: 0; padding: 0 8px 0 2px; border: 0; border-radius: 0; background: transparent; font-size: 14px; box-shadow: none; }
.selav select:focus-visible { outline: 0; }
.selav:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.selav .av, .av.big { background: var(--sel); color: var(--link); }
.av.big { width: 56px; height: 56px; font-size: 18px; }
.dialog select, .drawer select { height: 40px; font-size: 14px; }
.dialog .chip { min-height: 34px; padding: 0 12px; font-size: 13px; }
.dialog .seg, .drawer .seg { padding: 0; gap: 0; overflow: hidden; border-radius: 8px; flex-wrap: nowrap; }
.dialog .seg button, .drawer .seg button { height: 40px; padding: 0 14px; border-radius: 0; border-right: 1px solid var(--line); font-size: 13.5px; }
.dialog .seg button:last-child, .drawer .seg button:last-child { border-right: 0; }

/* okno 1: detail zprávy ve dvou sloupcích */
.dialog.det { --w: 1140px; height: min(880px, calc(100dvh - 48px)); }
.det-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; padding: 18px 24px 24px; }
.det-l, .det-r { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.det-l { padding-right: 28px; border-right: 1px solid var(--line2); }
.det-r { padding-left: 28px; }
.dialog .kv { grid-template-columns: 150px minmax(0, 1fr); gap: 10px 12px; font-size: 14px; }
.kv dd b { font-weight: 650; }
.dialog .files, .drawer .files { gap: 10px; }
.dialog .file { gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.dialog .file:hover { background: var(--hover); }
.fi { width: 22px; height: 26px; flex: none; border: 1px solid #85b7eb; border-radius: 3px; background: var(--sel); }
.fi.ics { border-color: #cfe3b5; background: var(--ok-bg); }
.fs { margin-left: auto; padding-left: 12px; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.det .box .acts { margin-top: 4px; }

/* okna 2 a 5: panel vpravo */
.drawer { padding: calc(24px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) 28px; gap: 18px; font-size: 14px; }
.drawer.s-pat { padding-bottom: 0; }
.drawer .dh { align-items: center; }
.drawer .meta { margin-top: 4px; font-size: 13.5px; }
.dsec { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line2); }
.krow { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.krow > div:first-child { min-width: 0; }
.krow small { display: block; color: var(--muted); font-size: 13px; }
.krow .selav { flex: 0 0 300px; }
.drawer .li { width: 100%; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line2); border-radius: 0; }
.drawer .li:last-of-type { border-bottom: 0; }
.drawer .li:hover { background: transparent; }
.drawer .li:hover b { color: var(--link); }
.drawer .two b { font-size: 14px; }
.drawer .two small { font-size: 13px; }
.kont { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.kont .kt { min-width: 0; }
.kont .kt small { display: block; color: var(--muted); font-size: 13.5px; }
.kont .kt .tlink { margin-top: 2px; color: var(--link); font-size: 13px; font-weight: 600; }
.kont .kc { flex: none; display: flex; flex-direction: column; }
.kont .ck { min-height: 28px; font-size: 14px; }
/* karta klienta (návrh A): nadpisy sekcí, tři možnosti, jak se kancelář dostane k poště, zprávy s proužkem */
.kk > h3.h, .kk > .mezi > h3.h { font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); }
.kp { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.kp.on { border-color: #85b7eb; background: #f3f8fd; }
.kp-ck { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 1px 0 0; padding: 0; border: 1.5px solid var(--line); border-radius: 5px; background: var(--panel); color: #fff; accent-color: var(--btn); }
input.kp-ck { cursor: pointer; }
button.kp-ck { cursor: pointer; }
button.kp-ck:hover { border-color: var(--btn); }
.kp-ck.kp-ano { border-color: var(--btn); background: var(--btn); }
.kp-t { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.kp-t > b { font-weight: 650; }
.kp-s { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.kp-s .code { color: var(--ink); }
.kp-st { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.kp-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kp-st.okb, .kp-st.warnb, .kp-st.errb { padding: 0; background: transparent; }
.kp-st.okb { color: var(--ok-fg); } .kp-st.warnb { color: var(--u2-fg); } .kp-st.errb { color: var(--u4-fg); }
.kp-w { font-size: 13px; color: var(--u2-fg); } .kp-w.e { color: var(--u4-fg); }
.kp-a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.kp-l { color: var(--link); font-size: 13.5px; font-weight: 600; }
.kp .idf { align-self: stretch; margin-top: 4px; }
.kp .chips { margin-top: 2px; }
.kp-pr { color: var(--ink); font-weight: 650; }
.kp .pm-vs { align-self: stretch; max-width: 340px; margin-top: 4px; }
.kl-posta { align-self: flex-start; }
.kzs { display: flex; flex-direction: column; }
.kz { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 0 9px 12px; border: 0; border-left: 3px solid var(--u1); border-bottom: 1px solid var(--line2); background: transparent; text-align: left; color: var(--ink); }
.kz:last-child { border-bottom: 0; }
.kz.u2 { border-left-color: var(--u2); } .kz.u3 { border-left-color: var(--u3); } .kz.u4 { border-left-color: var(--u4); }
.kz .two { flex: 1 1 auto; min-width: 0; }
.kz:hover b { color: var(--link); }
.kz .bdg { flex: none; }
.kont .kc { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.tgl { position: relative; display: inline-flex; cursor: pointer; }
.tgl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tgl span { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 12.5px; color: var(--muted); }
.tgl span .ic { display: none; }
.tgl input:checked + span { border-color: #85b7eb; background: var(--sel); color: var(--link); }
.tgl input:checked + span .ic { display: inline-block; }
.tgl input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.kont .kc .tlink { margin-left: 4px; color: var(--link); font-size: 13.5px; font-weight: 600; }
.drawer .ck input, .ck2 input { width: 18px; height: 18px; margin: 0; accent-color: var(--btn); flex: none; }
.kform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--top-bg); }
.kform .full { grid-column: 1 / -1; }
.form2 { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px 16px; }
.ck2 { display: flex; align-items: flex-start; gap: 10px; }
.ck2 input { margin-top: 2px; }
.ck2 small { display: block; color: var(--muted); font-size: 13px; }
.dfoot { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 8px; margin: auto calc(-1 * max(24px, env(safe-area-inset-right, 0px))) 0 -28px; padding: 14px max(24px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) 28px; border-top: 1px solid var(--line2); background: var(--top-bg); }

/* okno 6: kontrola hesla při psaní */
.checks { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line2); border-radius: 10px; background: var(--top-bg); }
.checks li { display: flex; align-items: center; gap: 10px; }
.checks i { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--line2); color: var(--muted); }
.checks li.ok i { background: var(--ok-bg); color: var(--ok-fg); }

/* okno 9: ukázka e-mailu */
.dialog .fw { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); gap: 24px; }
.dialog .fw > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mail { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.mail-h { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--line2); border-radius: 8px; background: var(--top-bg); color: var(--muted); font-size: 13px; }
.mail-h b { color: var(--ink); font-size: 14px; }
.mail-t { display: flex; flex-direction: column; gap: 10px; padding: 0 2px; }
.mail-b { align-self: flex-start; display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 6px; background: var(--btn); color: #ffffff; font-weight: 650; }

/* okno 10: smazáno s možností vrátit */
.toast.akce { display: flex; align-items: center; gap: 14px; width: min(560px, calc(100% - 32px)); padding: 12px 14px 12px 16px; border-radius: 12px; font-size: 14px; }
.toast .tok { width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #3b6d11; color: #ffffff; }
.toast .tt { flex: 1 1 auto; min-width: 0; }
.toast .btn:not(.primary):not(.ghost) { flex: none; min-height: 34px; padding: 0 14px; border-color: #ffffff; background: #ffffff; color: var(--side); font-size: 13.5px; font-weight: 650; }
.toast .tc { flex: none; color: #b5d4f4; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .modal { padding: 12px; }
  .modal:has(.dialog.wide), .modal:has(.dialog.det) { padding: 0; }
  .dialog.det, .dialog.wide { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  .det-b, .dialog .fw, .volby, .row2, .form2, .kform { grid-template-columns: minmax(0, 1fr); }
  .det-l { padding: 0 0 18px; border-right: 0; border-bottom: 1px solid var(--line2); }
  .det-r { padding: 18px 0 0; }
  .dialog .kv { grid-template-columns: 110px minmax(0, 1fr); }
  .krow, .kont { flex-direction: column; align-items: stretch; }
  .krow .selav { flex-basis: auto; }
  .dialog .seg, .drawer .seg { flex-wrap: wrap; }
  .drawer { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .dfoot { margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}

/* ---------- pošta: seznam a náhled zprávy vpravo (2B) ---------- */
.posta-body.split { display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: 12px; }
.rs { display: flex; gap: 10px; width: 100%; padding: 8px 14px; border: 0; border-bottom: 1px solid var(--row-rule); background: var(--panel); text-align: left; color: var(--ink); }
.rs:hover { background: var(--hover); }
.rs.crit { background: var(--crit-row); }
.rs.on { background: var(--sel); box-shadow: inset 3px 0 0 var(--btn); }
.rs.compact { padding-block: 5px; }
.rs > .dot { margin-top: 5px; }
.rs-m { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.rs-1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rs-1 > b { font-size: 12.5px; white-space: nowrap; }
.rs .cat { font-size: 11.5px; }
.rs .vr { color: var(--u3-fg); }
.rs-u { font-weight: 600; }
.nahled { position: sticky; top: 12px; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100dvh - 90px); overflow-y: auto; }
.nh-h { display: flex; align-items: flex-start; gap: 8px; }
.nh-tags { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nh-t { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.3; word-spacing: 0.08em; }
/* Otazník u dat zprávy: vysvětlení se otevře pod řádkem s daty. */
.qd-host { position: relative; }
.qd { display: inline; }
.qd > summary { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 2px; border-radius: 50%; background: var(--link); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: 1px; cursor: pointer; list-style: none; }
.qd > summary::-webkit-details-marker { display: none; }
.qd > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.qd-b { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: min(400px, 100%); padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); box-shadow: var(--shadow); color: var(--ink); font-size: 12.5px; font-weight: 400; line-height: 1.45; white-space: normal; }
.qd-b p { margin: 0 0 8px; }
.qd-b .qd-z { margin: 0; color: var(--muted); font-size: 11.5px; }
/* V detailu zprávy se vysvětlení vloží pod řádek Doručení, ať ho posuvný sloupec neořízne. */
.d2-v.qd-host .qd-b { position: static; width: auto; margin-top: 8px; box-shadow: none; background: var(--bg); }
.nh-lhuta { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: var(--r-sm); font-size: 12.5px; }
.nh-lhuta small { font-size: 12px; }
.nh-lhuta.u4 { background: var(--u4-bg); color: var(--u4-fg); }
.nh-lhuta.u3 { background: var(--u3-bg); color: var(--u3-fg); }
.nh-lhuta.u2 { background: var(--u2-bg); color: var(--u2-fg); }
.nh-lhuta.u1 { background: var(--hover); color: var(--muted); }
.nh-big { font-size: 22px; font-weight: 700; white-space: nowrap; }
.nh-sum { margin: 0; font-size: 13.5px; }
.nahled .kv { grid-template-columns: 120px minmax(0, 1fr); font-size: 12.5px; align-items: center; }
.nahled .kv dt:has(+ dd.files) { align-self: start; padding-top: 9px; }
.nahled .kv select { max-width: 240px; }
.nahled .files { display: flex; flex-direction: column; gap: 4px; }
.nahled .file { padding: 5px 8px; font-size: 12px; }
.nahled a.file { color: var(--ink); text-decoration: none; }
.nahled .tl { font-size: 12.5px; gap: 8px; }
.nh-prazdny { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--muted); }
.nh-prazdny b { color: var(--ink); }
@media (max-width: 900px) { .posta-body.split { display: block; } .nahled { display: none; } }

/* ---------- klienti: tabulka s barevnými značkami (3A) ---------- */
.kl-k { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kl-mono { width: 30px; height: 30px; flex: none; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; background: color-mix(in srgb, var(--c) 13%, #ffffff); color: color-mix(in srgb, var(--c) 80%, #000000); }
.kl-k .two { flex: 0 1 auto; }
.kl-k .two small { font-size: 11.5px; }
.kl-g { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--c) 10%, #ffffff); color: color-mix(in srgb, var(--c) 80%, #000000); }
.kl-g::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.kl-o { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; white-space: nowrap; }
.kl-o b { width: 14px; }
.kl-st { display: inline-flex; gap: 2px; }
.kl-st span { height: 8px; border-radius: 2px; }
.kl-t td { white-space: nowrap; }
.kl-hl { flex: 0 1 280px; height: 32px; }
.chips .chip .fgm { font-weight: 600; }

/* ---------- kalendář: týden / měsíc / seznam a pravý sloupec ---------- */
.kt-g { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; align-items: start; }
.kt-nav { display: flex; align-items: center; gap: 8px; }
.kt-nav b { font-family: var(--font-display); font-size: 14px; font-weight: 600; min-width: 150px; text-align: center; }
.ph .seg + .sel { margin-left: 4px; }
.kt-w { display: grid; min-height: 560px; }
.kt-d { border-right: 1px solid var(--line2); display: flex; flex-direction: column; min-width: 0; }
.kt-d:last-child { border-right: 0; }
.kt-d.we { background: var(--hover); }
.kt-d.on { background: #f7fbff; box-shadow: inset 0 0 0 2px var(--btn); }
.kt-h { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line2); background: transparent; text-align: left; color: var(--ink); }
.kt-h .dn { grid-row: 1; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.kt-h .dd { grid-row: 1 / span 2; grid-column: 1; font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1; margin-top: 14px; }
.kt-h .dc { grid-column: 2; grid-row: 2; font-size: 11.5px; color: var(--muted); }
.kt-h { height: 62px; }
.kt-h .dc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kt-h .dc.hol { color: var(--u3-fg); font-weight: 600; }
.kt-d.tdy .dd, .kt-d.tdy .dn { color: var(--link); }
.kt-b { padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.kt-ev, .kt-vd { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 9px; border: 0; border-left: 3px solid var(--k); border-radius: var(--r-sm); text-align: left; font-size: 12px; color: var(--ink); min-width: 0; }
.kt-ev.u4, .kt-vd.u4 { --k: var(--u4); background: var(--u4-bg); }
.kt-ev.u3, .kt-vd.u3 { --k: var(--u3); background: var(--u3-bg); }
.kt-ev.u2, .kt-vd.u2 { --k: var(--u2); background: var(--u2-bg); }
.kt-ev.u1, .kt-vd.u1 { --k: var(--u1); background: var(--hover); }
.kt-ev b { font-size: 12.5px; }
.kt-ev .es { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.kt-ev .eu { font-size: 11px; font-weight: 600; }
.kt-rem { display: flex; gap: 6px; align-items: flex-start; width: 100%; padding: 6px 8px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: transparent; text-align: left; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.kt-rem b { color: var(--ink); }
.kt-rem .ic { margin-top: 1px; }
.km { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; }
.km-h { padding: 6px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--hover); border-bottom: 1.5px solid var(--line); }
.km-c { height: 98px; padding: 5px 6px; border: 0; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); background: var(--panel); display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; text-align: left; color: var(--ink); }
.km-c:nth-child(7n) { border-right: 0; }
.km-c.we { background: #faf9f5; }
.km-c.mimo { background: var(--hover); }
.km-c.mimo .km-n { color: #b4b2a9; }
.km-c.on { box-shadow: inset 0 0 0 2px var(--btn); background: #f7fbff; }
.km-t { display: flex; align-items: center; gap: 5px; }
.km-n { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12.5px; font-weight: 600; }
.km-c.tdy .km-n { background: var(--btn); color: #ffffff; }
.km-t .hol { font-size: 10.5px; font-weight: 600; color: var(--u3-fg); }
.km-r { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; color: var(--muted); }
.km-e { display: flex; align-items: center; gap: 5px; height: 19px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 600; min-width: 0; }
.km-e i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.km-e.u4 { background: var(--u4-bg); color: var(--u4-fg); } .km-e.u4 i { background: var(--u4); }
.km-e.u3 { background: var(--u3-bg); color: var(--u3-fg); } .km-e.u3 i { background: var(--u3); }
.km-e.u2 { background: var(--u2-bg); color: var(--u2-fg); } .km-e.u2 i { background: var(--u2); }
.km-e.u1 { background: var(--hover); color: var(--muted); } .km-e.u1 i { background: var(--u1); }
.km-e em { font-style: normal; margin-left: auto; font-size: 10px; opacity: 0.75; }
.km-more { font-size: 10.5px; color: var(--muted); padding-left: 6px; }
.ks { padding: 4px 16px 8px; columns: 2; column-gap: 28px; column-rule: 1px solid var(--line2); }
.ks-d { break-inside: avoid; padding: 8px 0 6px; border-bottom: 1px solid var(--line2); }
.ks-d.on { background: #f7fbff; box-shadow: inset 3px 0 0 var(--btn); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.ks-h { display: flex; align-items: baseline; gap: 8px; width: 100%; margin-bottom: 4px; padding: 0; border: 0; background: transparent; text-align: left; color: var(--ink); }
.ks-h b, .ks-n { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; }
.ks-n { color: var(--muted); min-width: 58px; }
.ks-h .hol { font-size: 11px; font-weight: 600; color: var(--u3-fg); }
.ks-d.tdy .ks-h b, .ks-d.tdy .ks-n { color: var(--link); }
.ks-r { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 0 4px 8px; border: 0; background: transparent; text-align: left; font-size: 12px; color: var(--ink); }
.ks-r .two b { font-size: 12.5px; }
.ks-r .two small { font-size: 11.5px; }
.ks-r.rm { color: var(--muted); }
.ks-at { width: 50px; flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ks-b { width: 4px; align-self: stretch; border-radius: 2px; flex: none; }
.ks-b.u4 { background: var(--u4); } .ks-b.u3 { background: var(--u3); } .ks-b.u2 { background: var(--u2); } .ks-b.u1 { background: var(--u1); }
.kt-dt { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.kt-vd { font-size: 12.5px; }
.kt-vr { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--muted); }
.kt-vr b { color: var(--ink); }
.kt-ul h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
.kt-u { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line2); font-size: 12.5px; }
.kt-u:last-child { border-bottom: 0; }
.kt-u input { width: 15px; height: 15px; margin: 0; accent-color: var(--btn); flex: none; }
.kt-u span { font-size: 11.5px; white-space: nowrap; }
@media (max-width: 1100px) { .kt-g { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .ks { columns: 1; } .km-c { height: 72px; } }
/* ---------- přehled: widgety ---------- */
/* 4 pole v řadě; velikost 2 = dvě pole vedle sebe. Úprava: čárkovaný okraj, „−“ přes roh, prázdné pole s „+“. */
.ph .wg-plus, .ph .wg-tl { align-self: flex-start; margin-top: 14px; }
.wg-plus { width: 34px; height: 34px; border-radius: var(--r-sm); border: 0.5px solid #b4b2a9; background: var(--panel); color: var(--link); display: inline-flex; align-items: center; justify-content: center; }
.wg-plus:hover { background: var(--sel); }
.wg-tl { display: inline-flex; gap: 8px; }
.wg-ebar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r); background: var(--sel); color: var(--link); font-size: 12.5px; }
.wgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 236px; gap: 12px; }
.wgs.edit { gap: 16px; }
.wg { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 11px 14px 12px; background: var(--panel); border: 0.5px solid var(--line); border-radius: var(--r); overflow: hidden; }
.wg.s2 { grid-column: span 2; }
.wg-h { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.wg-h b { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; word-spacing: 0.1em; }
.wic { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--sel); color: var(--link); }
.wg.t4 { box-shadow: inset 3px 0 0 var(--u4); }
.wg.t4 .wic, .wg.t4b .wic { background: var(--u4-bg); color: var(--u4-fg); }
.wg.t4b { border-color: #f2c4c4; }
.wg-b { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; overflow: hidden; }
.wgo { flex: none; display: inline-flex; align-items: center; gap: 1px; padding: 0; border: 0; background: transparent; color: var(--link); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.wpill { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--chip); font-size: 11px; font-weight: 600; white-space: nowrap; }
.wpill.warn { background: var(--u2-bg); color: var(--u2-fg); }
.wpill.err { background: var(--u4-bg); color: var(--u4-fg); }
.wbig { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 4px; }
.wbig .v { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wbig .v.c4 { color: var(--u4-fg); }
.wbig .v.c3 { color: var(--u3-fg); }
.wbig .l { display: flex; flex-direction: column; line-height: 1.3; font-size: 12.5px; color: var(--muted); }
.wbig small { font-size: 11.5px; }
.wr { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 3px 0; border: 0; border-top: 0.5px solid var(--line2); background: transparent; color: var(--ink); text-align: left; font-size: 12.5px; }
button.wr:hover { color: var(--link); }
.wr b { font-size: 12px; white-space: nowrap; }
.wr > .mut { flex: none; white-space: nowrap; }
.wd { width: 62px; flex: none; color: var(--muted); font-size: 12px; }
.wn { width: 18px; text-align: right; }
.wnw { white-space: nowrap; }
.wplna { min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; }
.asg2 { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.asg2 .av { border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 0; }
.asg2 .av:hover { border-color: var(--btn); color: var(--link); }
.walert { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 12.5px; line-height: 1.35; }
.walert .ic { flex: none; margin-top: 2px; }
.walert.err { background: var(--u4-bg); color: var(--u4-fg); }
.walert.warn { background: var(--u2-bg); color: var(--u2-fg); }
.walert.ok { background: var(--ok-bg); color: var(--ok-fg); }
.wself { align-self: flex-start; }
.wkg { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wkc { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 4px 6px; border: 0; border-radius: var(--r-sm); background: var(--hover); color: var(--ink); text-align: left; line-height: 1.15; }
.wkc span:first-child { font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.wkc b { font-size: 13px; }
.wkc small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--muted); }
.wkc.we { background: #f8f7f3; }
.wkc.we b { color: var(--muted); }
.wkc.td { background: var(--sel); }
.wkc.td b, .wkc.td span:first-child { color: var(--link); }
.wkd { display: flex; flex-wrap: wrap; gap: 2px; min-height: 8px; }
.wkd i { width: 7px; height: 7px; border-radius: 50%; }
.wurg { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.wlg { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.wlg div { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.wlg i { width: 9px; height: 9px; border-radius: 2px; }
.wfk { display: flex; flex-direction: column; gap: 1px; width: 100%; min-width: 0; padding: 6px 0; border: 0; border-top: 0.5px solid var(--line2); background: transparent; color: var(--ink); text-align: left; font-size: 12.5px; }
.wfk-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.whint { margin: auto 0 0; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.wl { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 0.5px solid var(--line2); }
.wl-j { width: 160px; flex: none; }
.wtrack { flex: 1; height: 10px; }
.wtrack span { height: 10px; }
.wl7 { width: 74px; flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.wl7 small { font-size: 10.5px; color: var(--muted); }
.wbars { gap: 12px; margin-top: 6px; }
.wa { display: flex; gap: 10px; min-width: 0; padding: 3px 0; font-size: 12.5px; }
.wa .num { width: 36px; flex: none; }
.whb { display: grid; grid-template-columns: 96px minmax(0, 1fr) 18px; gap: 8px; align-items: center; font-size: 12px; }
.wtr { display: block; height: 9px; overflow: hidden; border-radius: 3px; background: var(--hover); }
.wtr span { display: block; height: 100%; border-radius: 3px; }
.wdva { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 22px; align-content: start; }
.wbtn { flex: none; padding: 1px 7px; border: 0.5px solid #b5d4f4; border-radius: 5px; background: var(--sel); color: var(--link); font-size: 11px; font-weight: 600; }
.wbox { width: 13px; height: 13px; flex: none; border: 1.5px solid #b4b2a9; border-radius: 3px; }
.wnac { display: flex; align-items: center; gap: 12px; }
.colw { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wakce { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.wakce .btn { justify-content: flex-start; width: 100%; }
/* úprava přehledu */
.wgs.edit .wg { overflow: visible; border: 1px dashed #85b7eb; background: #fdfdfb; cursor: grab; }
.wgs.edit .wg-b { pointer-events: none; overflow: hidden; }
.wgs.edit .wg:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.wgs.edit .wg.tazeny { opacity: 0.4; }
.wg-cil-pred { box-shadow: -8px 0 0 -2px var(--btn); }
.wg-cil-za { box-shadow: 8px 0 0 -2px var(--btn); }
.wadd.wg-cil-pred { box-shadow: 0 0 0 2px var(--btn); }
.wdrag { display: inline-flex; color: #b4b2a9; }
.wsz { flex: none; display: inline-flex; overflow: hidden; border: 0.5px solid var(--line); border-radius: var(--r-sm); }
.wsz button { padding: 2px 6px; border: 0; background: var(--panel); color: var(--muted); font-size: 10.5px; font-weight: 600; }
.wsz button[aria-pressed="true"] { background: var(--sel); color: var(--link); }
.wminus { position: absolute; top: -11px; right: -11px; z-index: 5; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 2px; border: 1px solid #b4b2a9; border-radius: 50%; background: var(--panel); color: var(--ink); font-size: 18px; font-weight: 600; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); }
.wminus:hover { border-color: var(--ink); }
.wadd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; border: 1.5px dashed #85b7eb; border-radius: var(--r); background: rgba(230, 241, 251, 0.45); color: var(--link); font-size: 13px; font-weight: 600; }
.wadd .pl { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; padding-bottom: 3px; border-radius: 50%; background: var(--btn); color: var(--btn-ink); font-size: 26px; font-weight: 600; line-height: 1; }
.wadd:hover .pl { background: #154e8f; }
/* okno „Přidat widget“: náhledy ve skutečném poměru, zelené „+“ v rohu, agenda v záhlaví */
.wg-scrim { position: fixed; inset: 0; z-index: 40; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wg-dlg { position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1204px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; overflow: hidden; background: var(--panel); border-radius: calc(var(--r) + 4px); box-shadow: var(--shadow); }
.wg-dlg-h { display: flex; align-items: center; gap: 10px; padding: 16px 22px 6px; }
.wg-dlg-h h2 { margin: 2px 0 0; font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.wg-hledat { flex: 0 1 240px; }
.wg-filtry { padding: 4px 22px 12px; }
.wg-nab { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, 154px); grid-auto-rows: 126px; grid-auto-flow: row dense; gap: 16px 12px; justify-content: space-between; align-content: start; padding: 14px 22px 20px; }
.wk2 { position: relative; border-radius: var(--r); box-shadow: 0 0 0 0.5px var(--line), 0 1px 3px rgba(0, 0, 0, 0.06); }
.wk2.k2 { grid-column: span 2; }
.wk-in { width: 100%; height: 100%; overflow: hidden; border-radius: var(--r); background: var(--panel); pointer-events: none; }
.wk-sc { height: 236px; transform: scale(0.535); transform-origin: 0 0; }
.wk-sc.k1 { width: 288px; }
.wk-sc.k2 { width: 588px; }
.wk-sc .wg { height: 236px; border: 0; }
.wk-sc .wgo, .wk-sc .wg-h .wpill { display: none; }
.wg-ag { flex: none; margin-top: 14px; margin-right: 6px; padding: 1px 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--panel); color: var(--muted); font-size: 15px; font-weight: 600; white-space: nowrap; }
.wk-plus, .wk-on { position: absolute; top: -10px; right: -10px; z-index: 3; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.wk-plus { padding: 0 0 2px; border: 0; background: #3b8a2a; color: #ffffff; font-size: 19px; font-weight: 600; line-height: 1; }
.wk-plus:hover { background: var(--ok-fg); }
.wk-on { border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
@media (max-width: 1100px) {
  .wgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .wgs, .wgs.edit { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(200px, auto); }
  .wg.s2 { grid-column: auto; }
  .wl-j { width: 120px; }
  .wl7 { display: none; }
  .wg-nab { justify-content: center; }
}

/* ---------- nastavení ---------- */
/* Rozmístění 0A: v bočním panelu jen jádro, „Nastavení“ dole nad kanceláří. */
.navs.dole { margin-top: auto; }
.navs.dole + .office { margin-top: 0; }
.nav .cnt.chyb, .nav.on .cnt.chyb { background: var(--u4); color: #ffffff; }
.nast { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.nmenu { padding: 6px; display: flex; flex-direction: column; gap: 1px; position: sticky; top: 14px; }
.nm-h { padding: 10px 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.nm { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; text-align: left; font-size: 13px; font-weight: 500; color: var(--ink); }
.nm:hover { background: var(--hover); }
.nm.on { background: var(--sel); color: var(--link); font-weight: 600; }
.nm-c { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--u4); color: #ffffff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.nast-b { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.nh { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.nh h2 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; word-spacing: 0.12em; }
.nh .sub { margin-top: 2px; }
.nh2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nh2 h3, .nh3 { margin: 0; font-family: var(--font-display); font-size: 14px; font-weight: 600; word-spacing: 0.1em; }
.nast .pillx { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--chip); white-space: nowrap; }
.nast .pillx.ok { background: var(--ok-bg); color: var(--ok-fg); }
.nast .pillx.warn { background: var(--u2-bg); color: var(--u2-fg); }
.nast .pillx.err { background: var(--u4-bg); color: var(--u4-fg); }
/* pravidla */
.phl { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--panel); border: 0.5px solid var(--line); border-radius: var(--r); }
.phl-i { width: 34px; height: 34px; border-radius: 8px; background: var(--sel); color: var(--link); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.phl.off .phl-i { background: var(--chip); color: var(--muted); }
.phl p { margin: 0; font-size: 14px; line-height: 2; }
.phl p b { font-weight: 600; }
.phl small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 2px; }
.ptok { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; margin: 0 2px; border-radius: 999px; border: 1px dashed #b4b2a9; background: var(--panel); font-size: 13px; font-weight: 600; color: var(--muted); vertical-align: middle; }
.ptok.on { border: 1px solid #b5d4f4; background: var(--sel); color: var(--link); }
.pst { padding: 16px 22px 14px; }
.psr { position: relative; height: 92px; margin: 30px 0 0; touch-action: none; }
.psb { position: absolute; top: 0; bottom: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 14px; border-radius: 6px; border: 2px solid var(--panel); font-size: 12px; line-height: 1.3; white-space: nowrap; }
.psb b { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.psb em { font-style: normal; font-weight: 600; opacity: 0.8; }
.psb.u4 { background: var(--u4-bg); color: var(--u4-fg); }
.psb.u3 { background: var(--u3-bg); color: var(--u3-fg); }
.psb.u2 { background: var(--u2-bg); color: var(--u2-fg); }
.psb.u1 { background: var(--u1-bg); color: var(--u1-fg); }
.psh { position: absolute; top: -24px; bottom: -6px; width: 0; border-left: 2px solid var(--side); z-index: 2; }
.psv { position: absolute; top: -6px; left: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2px; }
.psv b { min-width: 30px; height: 24px; padding: 0 6px; border-radius: 6px; background: var(--side); color: #ffffff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.psv b[role="slider"] { cursor: ew-resize; touch-action: none; }
.psv button { width: 20px; height: 20px; padding: 0; border: 0.5px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1; opacity: 0; transition: opacity 0.12s; }
.psh:hover .psv button, .psv:focus-within button { opacity: 1; }
.psx { position: relative; height: 18px; margin-top: 10px; font-size: 11px; color: var(--muted); }
.psx span { position: absolute; transform: translateX(-50%); }
.pvy { padding: 12px 22px 6px; gap: 0; }
.pvr { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 0.5px solid var(--line2); font-size: 13.5px; }
.pvr:last-child { border-bottom: 0; }
.pvr b { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pvr .stepper button { width: 26px; height: 26px; }
.pvp { width: 150px; }
.sw-misto { width: 46px; flex: none; }
.pdm { overflow: hidden; }
.pdh { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: 0; background: transparent; text-align: left; font-size: 13px; color: var(--ink); }
.pdh .chev { display: inline-flex; color: var(--muted); transition: transform 0.15s; }
.pdh[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.pdh b { font-weight: 600; white-space: nowrap; }
.pds { color: var(--muted); font-size: 12px; min-width: 0; }
.pdb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; padding: 4px 16px 16px; border-top: 0.5px solid var(--line2); }
.pdg { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.pdg h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
/* druhy odesílatelů */
.zarl { padding: 0 16px 6px; }
.zarh { font-size: 10px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 9px 0 7px; border-bottom: 1.5px solid var(--line); }
/* napojení schránek */
.nsim { gap: 6px; }
.badge.nsim:not(.warn) { background: var(--hover); color: var(--muted); }
.nbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nbar .quick { flex: 1 1 auto; }
.search.nsearch, .search.tsearch { flex: 0 0 250px; height: 30px; }
.search.nsearch input, .search.tsearch input { height: 28px; font-size: 12.5px; }
table.nt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.nt th { text-align: left; font-size: 10px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 7px 8px; background: var(--hover); border-bottom: 1.5px solid var(--line); white-space: nowrap; }
.nt td { padding: 5px 8px; border-bottom: 0.5px solid var(--line2); vertical-align: middle; white-space: nowrap; }
.nt th:first-child, .nt td:first-child { padding-left: 14px; }
.nt .r { text-align: right; padding-right: 12px; }
.nt tr:last-child td { border-bottom: 0; }
.nt tr.e td { background: var(--crit-row); }
.nt tr.w td { background: #fffaf0; }
.nt .cl { font-size: 12.5px; }
/* Na počítači se tabulka schránek vejde celá: pevné sloupce, dlouhý klient a poznámka se zkrátí (celé v nápovědě). */
@media (min-width: 901px) {
  table.nt { table-layout: fixed; }
  .nt col.c-st { width: 118px; } .nt col.c-id { width: 92px; } .nt col.c-nc { width: 150px; } .nt col.c-ak { width: 84px; }
  .nt td { overflow: hidden; text-overflow: ellipsis; }
  .nt .cl, .nt .npz { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
}
.nt .cell-acts { flex-wrap: nowrap; gap: 4px; }
.nt .ibtn.sm { width: 26px; height: 26px; background: var(--hover); border: 0.5px solid #b4b2a9; }
.nt .ibtn.pri { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.ndot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.npz { display: block; max-width: 210px; }
.nfoot { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--muted); }
/* tým a záznam činností */
.tr7 { display: flex; align-items: center; gap: 12px; padding: 7px 14px; background: var(--panel); border: 0.5px solid var(--line); border-radius: var(--r); }
.tr7.un { background: var(--hover); border-style: dashed; }
.tr7.off { opacity: 0.6; }
.tlead { display: flex; align-items: center; gap: 9px; flex: 0 0 196px; min-width: 0; }
.tlead .two b { font-size: 13.5px; }
.tm { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.tm b { font-size: 14px; }
.tm.grow { overflow: hidden; }
.tcap { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tbar { flex: 1 1 60px; max-width: 150px; min-width: 40px; height: 9px; }
.tbar span { height: 9px; border-radius: 2px; }
.tus { display: inline-flex; flex: none; gap: 6px; font-size: 11.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tus span { display: inline-flex; align-items: center; gap: 3px; }
.tus i { width: 7px; height: 7px; border-radius: 2px; }
.tact { flex: 0 0 112px; text-align: right; }
.tok { color: var(--ok-fg); font-weight: 600; }
.tz { overflow: hidden; }
.tzh { padding: 9px 14px 2px; }
.tfs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 14px 8px; border-bottom: 0.5px solid var(--line2); }
.tf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.tf select { height: 28px; font-size: 12.5px; }
.aco { display: inline-flex; align-items: center; gap: 6px; }
.aco .ic { color: var(--link); }
.av.sys { background: var(--side); color: #ffffff; }
.nmail { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-bottom: 0.5px solid var(--line2); font-size: 13px; }
.nmail:last-of-type { border-bottom: 0; }
.nmail small { color: var(--muted); font-size: 12px; }
/* můj účet */
.nkarta { max-width: 640px; }
.nk-i { width: 36px; height: 36px; border-radius: 8px; background: var(--sel); color: var(--link); display: inline-flex; align-items: center; justify-content: center; flex: none; }
@media (max-width: 900px) {
  .nast { grid-template-columns: minmax(0, 1fr); }
  .nmenu { position: static; flex-direction: row; flex-wrap: wrap; }
  .nm-h { display: none; }
  .nm { width: auto; }
  .pdb { grid-template-columns: minmax(0, 1fr); }
  .tr7 { flex-wrap: wrap; }
  .tlead { flex-basis: 100%; }
  .search.nsearch, .search.tsearch { flex: 1 1 200px; }
}
.nast .rowx { display: flex; align-items: center; gap: 10px; }
.zarl .zar { grid-template-columns: 180px 140px minmax(0, 1fr) auto; padding: 3px 0; }
.zarl .zarh { padding: 9px 0 7px; }
.zarl .ibtn.sm { width: 26px; height: 26px; }
@media (max-width: 900px) { .zarl .zar { grid-template-columns: 1fr 1fr; } }


/* stav cizí zprávy: vidět ano, měnit ne */
.fld.zamceno select { background: var(--hover); color: var(--muted); opacity: 1; }

/* ---------- Postupy a Helpdesk ---------- */
.dialog.np .dlg-b { gap: 12px; }
.dialog.np .seg { align-self: flex-start; }
.np-g { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; align-items: start; }
.np-menu { display: flex; flex-direction: column; gap: 2px; }
.np-menu .nm { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--r-sm); background: transparent; text-align: left; font-size: 13px; color: var(--ink); }
.np-menu .nm:hover { background: var(--hover); }
.np-menu .nm.on { background: var(--sel); color: var(--link); font-weight: 600; }
.np-box { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--panel); }
.np-box .h { margin: 0; }
.np-ol, .np-ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.np-faq { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-top: 1px solid var(--line2); font-size: 13px; }
.np-faq:first-of-type { border-top: 0; }
.np-faq span { color: var(--muted); }
@media (max-width: 900px) { .np-g { grid-template-columns: minmax(0, 1fr); } }
.np-box .kv { grid-template-columns: 80px minmax(0, 1fr); }
.np-box a { color: var(--link); font-weight: 600; }

/* ---------- náhled přílohy (PDF, obrázky) ---------- */
button.file { width: 100%; background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
button.file:hover, a.file:hover { border-color: #85b7eb; background: var(--hover); }
a.btn { text-decoration: none; }
.dialog.pv-dlg { width: min(1100px, 100%); height: 90vh; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; }
.pv-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line2); background: var(--panel); }
.pv-n { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pv-n b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-n small { font-size: 12px; color: var(--muted); }
.pv-b { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--hover); overflow: auto; }
.pv-b iframe { width: 100%; height: 100%; border: 0; background: #ffffff; }
.pv-b img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pv-stranka { height: 100dvh; display: flex; flex-direction: column; }
.pv-stranka .pv-b { flex: 1 1 auto; }
@media (max-width: 900px) {
  .modal:has(.pv-dlg) { padding: 0; }
  .dialog.pv-dlg { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
}

/* přehled: prázdné místo po odebraném widgetu a vlastní poznámky */
.wg-mezera { display: flex; align-items: center; justify-content: center; min-height: 160px; border: 1.5px dashed transparent; border-radius: var(--r); background: transparent; color: transparent; }
.wg-mezera:hover, .wg-mezera:focus-visible { border-color: var(--line); color: var(--muted); background: rgba(255, 255, 255, 0.4); }
.wadd.wg-cil-sem { box-shadow: 0 0 0 2px var(--btn); background: var(--sel); }
.wpz-l { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.wpz { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line2); font-size: 12.5px; }
.wpz input { width: 15px; height: 15px; margin: 0; accent-color: var(--btn); flex: none; }
.wpz.hotovo span { color: var(--muted); text-decoration: line-through; }
.wpz-x { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: transparent; color: var(--muted); opacity: 0; }
.wpz:hover .wpz-x, .wpz-x:focus-visible { opacity: 1; }
.wpz-n { margin-top: 6px; width: 100%; height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); font-size: 12.5px; }

/* ---------- detail zprávy (2D): lišta dalšího kroku, údaje jako v datové schránce ---------- */
.dialog.det2 { --w: 1080px; height: min(860px, calc(100dvh - 48px)); }
.d2-top { display: flex; flex-direction: column; gap: 8px; padding: 12px 24px 0; }
.d2-krok { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px 6px 10px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--hover); font-size: 13px; }
.d2-krok.acc { background: var(--sel); border-color: #c9def3; }
.d2-krok.warn { background: var(--u2-bg); border-color: #f3d9ae; }
.d2-krok.err { background: var(--u4-bg); border-color: #f2c4c4; }
.d2-krok.ok { background: var(--ok-bg); border-color: #cfe3b5; }
.d2-n { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--side); color: #ffffff; }
.d2-krok.acc .d2-n { background: var(--btn); }
.d2-krok.warn .d2-n { background: #b7791f; }
.d2-krok.err .d2-n { background: var(--u4); }
.d2-krok.ok .d2-n { background: var(--ok-fg); }
.d2-t { flex: 1 1 auto; min-width: 0; color: var(--muted); }
.d2-t b { color: var(--ink); font-size: 13.5px; }
.d2-a { display: flex; align-items: center; gap: 6px; flex: none; }
.d2-a .tlink { color: var(--link); font-size: 12.5px; margin-right: 4px; }
.d2-sel select { height: 30px; min-width: 240px; max-width: 300px; }
.d2-edit { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.d2-edit .tlink { color: var(--link); font-size: 12.5px; }
.d2-b { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; padding: 12px 24px 18px; }
.d2-l, .d2-rr { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.d2-rr { padding-right: 2px; }
.d2-ds { border: 1px solid var(--line); border-radius: var(--r); background: #fafaf8; padding: 2px 16px; }
.d2-r { padding: 10px 0; border-bottom: 1px dashed var(--line); display: flex; flex-direction: column; gap: 2px; }
.d2-r:last-child { border-bottom: 0; }
.d2-c { margin: 0 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.d2-v { font-size: 13.5px; }
.d2-v.b { font-size: 15px; font-weight: 600; }
.d2-s { font-size: 12.5px; color: var(--muted); }
.d2-s .tlink, .d2-v .tlink:not(.pill) { color: var(--link); font-size: 12.5px; }
.d2-ds .files { margin-top: 4px; }
.d2-ds .file { background: var(--panel); }
.d2-odp { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.d2-odp .box { padding: 10px 12px; }
.d2-box { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r); background: var(--hover); font-size: 13px; }
.d2-box p { margin: 0; }
.d2-hl { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.d2-box .tlink { color: var(--link); font-size: 12.5px; }
.d2-sec { display: flex; flex-direction: column; gap: 8px; }
.d2-sec .tlink { color: var(--link); font-size: 12.5px; align-self: flex-start; }
.d2-sec .tl { font-size: 12.5px; gap: 8px; }
.d2-pz { padding: 8px 10px; border: 1px solid var(--line2); border-radius: var(--r-sm); font-size: 12.5px; }
.d2-pz small { color: var(--muted); }
.d2-pz p { margin: 2px 0 0; }
@media (max-width: 900px) {
  .dialog.det2 { height: 100dvh; }
  .d2-top { padding: 10px 16px 0; }
  .d2-krok { flex-wrap: wrap; }
  .d2-a { flex-wrap: wrap; }
  .d2-sel select { min-width: 0; width: 100%; }
  .d2-b { display: block; overflow-y: auto; padding: 12px 16px; }
  .d2-l, .d2-rr { overflow: visible; }
  .d2-rr { margin-top: 16px; }
}

/* ---------- horní lišta: čas načtení, chyby, nápověda, účet ---------- */
.tb-cas { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--ok-bg); color: var(--ok-fg); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tb-cas i { width: 8px; height: 8px; border-radius: 50%; background: #3b8a2a; flex: none; }
.tb-cas.ne { background: var(--hover); color: var(--muted); }
.tb-cas.ne i { background: var(--u1); }
.tb-i { position: relative; width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); padding: 0; }
button.tb-i:hover { background: var(--hover); }
.tb-i:disabled { opacity: 1; cursor: default; }
.tb-i.on { background: var(--sel); border-color: #b5d4f4; color: var(--link); }
.tb-n { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--u4); color: #ffffff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--top-bg); }
.tb-napoveda { position: relative; display: inline-flex; }
.tb-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 25; width: 290px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.tb-cap { padding: 8px 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tb-menu button, .tb-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: transparent; text-align: left; color: var(--ink); text-decoration: none; font-size: 13px; }
.tb-menu button:hover, .tb-menu a:hover { background: var(--hover); }
.tb-menu .ic { color: var(--link); flex: none; }
.tb-menu small { display: block; color: var(--muted); font-size: 11.5px; }
.me-btn.tb-me { height: 38px; padding: 0 12px 0 4px; border-radius: 999px; background: #0f2942; color: #ffffff; gap: 9px; }
.me-btn.tb-me:hover { background: #163757; }
.tb-me .tb-av { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #1b5fa8; color: #ffffff; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tb-me .me-t small { color: #b5d4f4; }
.tb-me .ic { color: #b5d4f4; }
@media (max-width: 900px) {
  .tb-me .me-t, .tb-me .ic { display: none; }
  .me-btn.tb-me { padding: 0 4px; }
  .tb-cas { width: 30px; padding: 0; justify-content: center; }
  .tb-cas span { display: none; }
}

/* ---------- okno Přeposlat (1A): vlevo komu a co poslat, vpravo co odejde ---------- */
.dialog.fw1 .dlg-b { overflow: hidden; }
.dialog.fw1 .fw { flex: 1 1 auto; min-height: 0; grid-template-columns: 330px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 22px; }
.dialog.fw1 .fw-l { overflow-y: auto; min-height: 0; padding: 2px 4px 2px 2px; gap: 14px; }
.dialog.fw1 .fw-l .seg { align-self: flex-start; }
.dialog.fw1 .fw-p { min-height: 0; gap: 8px; }
.fw-pod { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); }
.fw-rd { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; font-weight: 400; color: var(--ink); }
.fw-rd input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--btn); }
.fw-rd b { display: block; font-weight: 600; font-size: 13px; }
.fw-rd small { display: block; color: var(--muted); font-size: 12px; }
.fw-rd:has(input:disabled) { opacity: 0.55; }
.fw-h { font-size: 13px; font-weight: 600; }
.fw-co { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.fw-komu { font-size: 12.5px; color: var(--muted); }
.fw-komu b { color: var(--ink); }
.fw-vzkaz { padding: 9px 12px; border-left: 3px solid var(--btn); background: var(--sel); border-radius: 0 6px 6px 0; font-size: 13px; white-space: pre-wrap; }
.fw-ds { border: 1px solid var(--line2); border-radius: 8px; background: #fafaf8; padding: 2px 14px; }
.fw-r { display: flex; flex-direction: column; gap: 1px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.fw-ds .fw-r:last-child { border-bottom: 0; }
.fw-co > .fw-r { border-bottom: 0; }
.fw-cap { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fw-r b { font-size: 13.5px; }
.fw-r small { color: var(--muted); font-size: 12px; }
.fw-file { display: flex; align-items: center; gap: 9px; margin-top: 4px; padding: 7px 10px; border: 1px solid var(--line2); border-radius: 7px; font-size: 12.5px; }
.fw-file .ic { color: var(--link); flex: none; }
.fw-file .ell { flex: 1 1 auto; }
@media (max-width: 900px) {
  .dialog.fw1 .dlg-b { overflow-y: auto; }
  .dialog.fw1 .fw { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .dialog.fw1 .fw-l { overflow: visible; }
}

/* ---------- hlavička Pošty a složky: co nejnižší ---------- */
.ph-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.ph-row h1 { margin: 0; font-size: 17px; line-height: 1.25; }
.ph-t1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; flex: 1 1 0; }
.ph-t1 .eyebrow { flex-basis: 100%; }
/* Název a popis složky se nezalomí a nevytlačí tlačítka na další řádek; dlouhý popis má tři tečky a celý je v nápovědě. */
.ph-t1 h1 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-t1 .ph-n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* počet zpráv jako odznak vedle názvu, pod názvem jen krátký popis složky */
.ph-cnt { flex: none; align-self: center; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--sel); color: var(--link); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ph-popis { flex-basis: 100%; min-width: 0; margin: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-n { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 900px) { .ph-t1 { flex-basis: 100%; } }
.ph-posta .quick { margin-left: 4px; }
.ph-row .pills { flex: 0 1 auto; }
.ph-vyber { background: var(--sel); color: var(--link); min-height: 28px; }
.ph-vyber .v { font-weight: 600; max-width: 320px; }
.ph-vyber button { color: var(--link); }
#posta-head.stack { gap: 8px; }

/* ---------- pevné rozložení: boční panel a horní lišta stojí, posouvá se jen obsah agendy ---------- */
@media (min-width: 901px) {
  .shell { height: 100dvh; min-height: 0; overflow: hidden; }
  .side { height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  .main { height: 100dvh; min-height: 0; }
  .topbar { flex: none; }
  .view { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 28px; }
  .view.v-posta { overflow: hidden; padding-bottom: 14px; }
  .v-posta #posta-head { flex: none; }
  .v-posta .posta-body { flex: 1 1 auto; min-height: 0; }
  .v-posta .posta-body > .list { align-self: flex-start; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
  .v-posta .posta-body.split { grid-template-rows: minmax(0, 1fr); align-items: start; }
  .v-posta .posta-body.split > .list { height: auto; }
  .v-posta .nahled { position: static; align-self: stretch; height: 100%; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
  .v-posta .list .gh { position: sticky; top: 0; z-index: 1; }
}

/* ---------- řádek pošty: zkratka odesílatele se nepřekrývá, odesílatel se zkrátí ---------- */
.rs-1 { overflow: hidden; }
.rs-1 > .cat { flex: 0 1 auto; overflow: hidden; }
.cat > b, .cat > .mk, .cat > i { flex: none; }
.cat > .ell { min-width: 0; }
.rs-1 > .dl, .rs-1 > .st, .rs-1 > .av, .rs-1 > .vr, .rs-1 > .new { flex: none; }
.tr .cat { overflow: hidden; }

/* ---------- okna kompaktně: menší písmo a menší vnitřní rámečky ---------- */
.dialog, .drawer { font-size: 13px; }
.dlg-h { padding: 16px 20px 0; gap: 10px; }
.dlg-h h2, .dialog h2, .drawer h2 { font-size: 18px; }
.dlg-h .tags { margin-bottom: 6px; }
.dlg-b { padding: 14px 20px 16px; gap: 12px; }
.dlg-f { padding: 10px 20px; }
.dialog .btn, .drawer .btn { min-height: 34px; padding: 0 13px; font-size: 13px; }
.dialog .btn.sm, .drawer .btn.sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.dialog .ibtn, .drawer .dclose { width: 32px; height: 32px; border-radius: 8px; }
.dialog .fld, .drawer .fld { gap: 4px; font-size: 12.5px; }
.dialog .fld input, .dialog .fld select, .dialog .fld textarea, .drawer .fld input, .drawer .fld select, .drawer .fld textarea { min-height: 34px; padding: 6px 10px; font-size: 13px; }
.dialog .fld textarea.plain, .drawer .fld textarea.plain { min-height: 70px; }
.dialog select, .drawer select { height: 34px; font-size: 13px; }
.dialog .seg button, .drawer .seg button { height: 32px; padding: 0 12px; font-size: 12.5px; }
.dialog .chip { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.dialog .box, .drawer .box { padding: 10px 12px; font-size: 13px; }
.dialog .kv { grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; font-size: 13px; }
.dialog .file { gap: 10px; padding: 8px 10px; font-size: 13px; }
.dialog .files, .drawer .files { gap: 6px; }
.dialog .h, .drawer .h { font-size: 13px; }
/* detail zprávy (2D) */
.dialog.det2 { --w: 1040px; }
.d2-top { padding: 10px 20px 0; gap: 6px; }
.d2-krok { min-height: 38px; padding: 4px 6px 4px 10px; font-size: 12.5px; }
.d2-krok .btn { min-height: 28px; }
.d2-t b { font-size: 13px; }
.d2-n { width: 22px; height: 22px; }
.d2-b { grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; padding: 10px 20px 14px; }
.d2-l, .d2-rr { gap: 12px; padding: 2px 4px 4px 2px; }
.d2-ds { padding: 0 14px; }
.d2-r { padding: 8px 0; }
.d2-v { font-size: 13px; }
.d2-v.b { font-size: 14px; }
.d2-s { font-size: 12px; }
.d2-box { padding: 10px 12px; font-size: 12.5px; }
.d2-sel select { height: 28px; min-width: 220px; }
/* okno Přeposlat (1A) */
.dialog.fw1 .fw { grid-template-columns: 330px minmax(0, 1fr); gap: 18px; }
.dialog.fw1 .fw-l { padding: 4px 8px 8px 4px; gap: 12px; }
.dialog.fw1 .fw-p { padding: 2px 2px 4px; }
.fw-co { gap: 8px; padding: 10px 12px; }
.fw-ds { padding: 0 12px; }
.fw-r { padding: 6px 0; font-size: 12.5px; }
.fw-r b { font-size: 13px; }
.fw-file { padding: 6px 9px; font-size: 12.5px; }
.fw-rd { padding: 2px 0; }
.seg-ik button { width: 32px; padding: 0; justify-content: center; }
.ph-posta .quick { flex: 0 1 auto; }
.ph-posta .qchip, .ph-row .qchip { min-height: 26px; padding: 0 6px 0 10px; gap: 6px; }
.d2-rr .row2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; }
.dialog .selav { min-height: 34px; padding-left: 6px; gap: 6px; }
.dialog .selav select, .drawer .selav select { height: 32px; }
.dialog .selav .av { width: 24px; height: 24px; font-size: 10px; }
.d2-ds .file { padding: 6px 10px; }

/* ---------- nic useknutého: opravy z automatické kontroly ---------- */
/* Pošta: když se filtry nevejdou vedle nadpisu, mají celý druhý řádek (třídu dává phFit) */
.ph-posta.dva .quick, .ph-posta.dva .prio { order: 1; margin-left: 0; }
.ph-posta.dva .prio { flex-basis: auto; }
/* přepínač záložek v okně se nesmí smrsknout, když je obsah okna dlouhý (Nápověda → Helpdesk) */
.dialog .seg, .drawer .seg { min-height: max-content; }
/* Lidé v kanceláři: na užší obrazovce jde jméno na vlastní řádek, ať se vejdou čísla zpráv */
@media (max-width: 1400px) {
  .tr7 { flex-wrap: wrap; row-gap: 6px; }
  .tlead { flex-basis: 100%; }
}
/* stupnice naléhavosti: popisky pásem pod stupnicí jen na telefonu */
.psl { display: none; }
@media (max-width: 900px) {
  .psb > * { display: none; }
  .psl { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 12.5px; }
  .psl > span { display: flex; align-items: center; gap: 8px; }
  /* měsíc: na úzké buňce místo slova „svátek“ jen barevné číslo dne */
  .km-t .hol { display: none; }
  .km-c:not(.tdy):has(.hol) .km-n { color: var(--u3-fg); font-weight: 700; }
  /* kompaktní okna výš platí jen od 901 px; na telefonu zůstává jeden sloupec */
  .dialog .kv { grid-template-columns: 110px minmax(0, 1fr); }
  .d2-top { padding: 10px 16px 0; }
  .d2-b { padding: 12px 16px; }
  .d2-sel select { min-width: 0; }
  .dialog.fw1 .fw, .d2-rr .row2 { grid-template-columns: minmax(0, 1fr); }
  /* Přeposlat na telefonu: oba sloupce pod sebou v plné výšce, posouvá se celé tělo okna */
  .dialog.fw1 .fw { flex: none; }
  .dialog.fw1 .fw-l, .dialog.fw1 .fw-p { min-height: auto; }
}
/* stupnice naléhavosti: úzké pásmo zkrátí popisek třemi tečkami */
.psb > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- podmenu Pošty (C): odsazený strom, proužek u vybrané, sbalitelné sekce ---------- */
.sb-tree { margin: 0 0 6px 14px; padding-left: 8px; border-left: 2px solid #2b4b6e; gap: 1px; }
.sb-tree .sb-i { margin-left: -10px; width: calc(100% + 10px); padding-left: 16px; border-radius: 0 6px 6px 0; font-size: 12.5px; }
.sb-tree .sb-i.on { background: rgba(27, 95, 168, 0.35); box-shadow: inset 3px 0 0 #85b7eb; color: #ffffff; }
.sb-tree .sb-g { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; max-width: calc(100% - 6px); margin: 9px 0 4px -2px; padding: 3px 9px; border: 0; border-radius: var(--r-pill); background: #dbe7f4; color: #0f2942; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; cursor: pointer; }
.sb-tree .sb-g::before, .sb-tree .sb-g::after { display: none; }
/* Záhlaví sekcí jsou světlá, aby rozbalená sekce byla na první pohled oddělená od položek. */
.sb-tree .sb-g:hover { background: #ffffff; }
.sb-tree .sb-g .sb-c { font-size: 10px; padding: 0 5px; color: #1b5fa8; }
.sb-tree .sb-g .sb-c.e { color: #ffffff; }
.sb-tree .sb-g .sb-c.w { color: #0f2942; }
.sb-chev { display: inline-flex; transition: transform 0.15s; }
.sb-g.zav .sb-chev { transform: rotate(-90deg); }
/* filtr priorit v hlavičce Pošty: jeden přepínač */
.prio { display: inline-flex; align-items: center; flex: none; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--panel); }
.prio button { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.prio button:hover { background: var(--hover); }
.prio button i { width: 8px; height: 8px; border-radius: 50%; }
.prio button b { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.prio button[aria-pressed="true"] { background: var(--sel); color: var(--link); }
.prio button[aria-pressed="true"] b { color: var(--link); }
@media (max-width: 900px) { .prio { overflow-x: auto; max-width: 100%; } }

/* tabulka v Poště: vždy na šířku seznamu, bez vodorovného posuvníku */
.tbl { width: 100%; overflow: hidden; }
.tbl .tr > *, .tbl .th > * { min-width: 0; }
.tbl .cat { min-width: 0; overflow: hidden; }
.tbl .st, .tbl .up { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tbl .dl.ell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* řádek seznamu (návrh C) a proužek priority v tabulce */
.rq { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px 12px 4px 14px; border: 0; border-bottom: 1px solid var(--row-rule); background: var(--panel); box-shadow: inset 3px 0 0 var(--k); text-align: left; color: var(--ink); }
.rq:hover { background: var(--hover); }
.rq.on { background: var(--sel); }
.rq.compact { min-height: 34px; padding-block: 2px; }
.rq-k { width: 48px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.rq-m { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; font-size: 12px; color: var(--muted); }
.rq-1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rq-1 b { font-size: 12.5px; color: var(--ink); }
.rq-1 .new { height: 16px; font-size: 9.5px; padding: 0 5px; }
.rq .rs-u { font-weight: 600; color: var(--ink); }
.rq-w { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #eda100; }
.rq-t { width: 78px; flex: none; text-align: right; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.tbl .tr { box-shadow: inset 3px 0 0 var(--k); }
/* nadpisy sekcí v náhledu zprávy (Průběh) černě */
.nahled .eyebrow { color: var(--ink); font-weight: 700; }

/* ---------- štítky zprávy (návrh B): priorita proužkem u okraje, odesílatel nad nadpisem, štítky pod ním ---------- */
.nahled.pruh { box-shadow: inset 4px 0 0 var(--k); }
.dialog.det2 { box-shadow: inset 4px 0 0 var(--k), var(--shadow); }
.nh-od { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.nh-od b { flex: none; color: var(--ink); font-weight: 700; }
.nh-od .mk { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.nh-od .ell { min-width: 0; }
.d2-h .nh-od { margin-bottom: 4px; }
.tgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tg { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tg .ic { flex: none; }
.tg.p4 { color: var(--u4-fg); box-shadow: inset 0 0 0 1px #f3b7b6; } .tg.p4 i { background: var(--u4); }
.tg.p3 { color: var(--u3-fg); box-shadow: inset 0 0 0 1px #f5c9b3; } .tg.p3 i { background: var(--u3); }
.tg.p2 { color: var(--u2-fg); box-shadow: inset 0 0 0 1px #f2dca0; } .tg.p2 i { background: var(--u2); }
.tg.p1 { color: var(--muted); } .tg.p1 i { background: var(--u1); }
.tg.warn { color: var(--u2-fg); box-shadow: inset 0 0 0 1px #f2dca0; }
.tg.auto { color: var(--ok-fg); box-shadow: inset 0 0 0 1px #9fd9bf; }
.rq-a { display: inline-flex; flex: none; color: var(--ok-fg); opacity: 0.85; }
/* ---------- Moje kancelář (jen vedoucí): vlevo lidé, vpravo práce nebo klienti vybraného ---------- */
.mko { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; }
.mko-l { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.mko-p { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; color: var(--ink); }
.mko-p:hover { background: var(--hover); }
.mko-p.on { background: var(--sel); box-shadow: inset 3px 0 0 var(--btn); }
.mko-pn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mko-pn b { font-size: 13.5px; }
.mko-pn small, .mko-pc small { font-size: 11.5px; color: var(--muted); }
.mko-pc { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.mko-pc b { font-size: 15px; color: var(--link); }
.mko-pc b.fg4 { color: var(--u4-fg); } .mko-pc b.fgm { color: var(--muted); }
.mko-pc small { color: var(--ok-fg); font-weight: 600; }
.mko-x .av, .mko-av0 { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); }
.mko-hr { width: 100%; margin: 6px 0; border: 0; border-top: 1px solid var(--line2); }
.mko-r { min-width: 0; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.mko-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.mko-ht { flex: 1 1 200px; min-width: 0; }
.mko-ht h2 { margin: 0; font-size: 17px; }
.mko-ht .sub { margin-top: 1px; }
.mko-cnt { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.mko-cnt b { font-size: 15px; margin-right: 2px; }
.fg-l { color: var(--link); } .fg-o { color: var(--ok-fg); }
.mko-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mko-tabs .seg button { height: 30px; }
.mko-n { display: inline-flex; min-width: 18px; justify-content: center; padding: 0 5px; border-radius: var(--r-pill); background: var(--hover); color: var(--muted); font-size: 11.5px; }
.mko-tabs .seg button[aria-pressed="true"] .mko-n { background: #fff; color: var(--link); }
/* tabulka práce: pevné sloupce, klient a věc se zkrátí; žádný posun do strany */
.mko-t { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; }
.mko-th, .mko-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.5fr) 88px 104px 110px; align-items: center; gap: 10px; min-width: 0; padding: 0 12px; }
.mko-th2, .mko-row2 { grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.5fr) 88px 170px; }
.mko-th { min-height: 32px; background: var(--hover); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.mko-row { min-height: 42px; border: 0; border-top: 1px solid var(--line2); background: var(--panel); text-align: left; font-size: 12.5px; color: var(--ink); }
.mko-th + .mko-row { border-top: 0; }
button.mko-row:hover, .mko-row2 button:hover { background: var(--hover); }
.mko-row2 button { min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; font: inherit; color: inherit; }
.mko-k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.mko-kli { font-weight: 600; }
.mko-lh { font-weight: 600; white-space: nowrap; }
.mko-kdo { font-size: 12px; color: var(--muted); }
.mko-st { display: inline-flex; align-items: center; gap: 4px; justify-self: start; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.mko-st.p { background: var(--sel); color: var(--link); }
.mko-st.o { background: var(--ok-bg); color: var(--ok-fg); }
.mko-sel { width: 100%; min-width: 0; height: 30px; font-size: 12.5px; }
/* klienti zaměstnance jako seznam firem s odebráním */
.mko-sum { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.mko-th.mko-thk, .mko-row.mko-rowk { grid-template-columns: minmax(0, 1fr) 150px 130px 70px; }
.mko-th.mko-thk > :last-child { display: block; }
.mko-rowk button.mko-kli { min-width: 0; padding: 0; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); text-align: left; }
.mko-rowk button.mko-kli:hover { color: var(--link); text-decoration: underline; }
.mko-co2 { color: var(--muted); white-space: nowrap; }
.mko-on { white-space: nowrap; }
.mko-odeb { justify-self: end; font-weight: 500; color: var(--muted); }
.mko-odeb:hover { color: var(--u4-fg); }
.mko-cn { min-width: 0; padding: 0; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); text-align: left; }
.mko-cn:hover { color: var(--link); text-decoration: underline; }
.mko-kr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) 200px; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-top: 1px solid var(--line2); background: var(--panel); font-size: 12.5px; }
.mko-kr:first-child { border-top: 0; }
.mko-co { display: flex; }
.mko-co button { flex: 1 1 0; justify-content: center; }
@media (max-width: 1280px) {
  .mko { grid-template-columns: 250px minmax(0, 1fr); }
  .mko-th, .mko-row { grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.3fr) 80px 100px; }
  .mko-th > :last-child, .mko-row > .mko-kdo { display: none; }
  .mko-th2, .mko-row2 { grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.3fr) 80px 150px; }
  .mko-th2 > :last-child { display: block; }
}
@media (max-width: 900px) {
  .mko { grid-template-columns: minmax(0, 1fr); }
  .mko-th { display: none; }
  .mko-row, .mko-row2 { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "k kli lh" "k v st"; row-gap: 2px; padding: 8px 12px; }
  .mko-row > .mko-k { grid-area: k; } .mko-row > .mko-kli { grid-area: kli; } .mko-row > .mko-v { grid-area: v; }
  .mko-row > .mko-lh { grid-area: lh; justify-self: end; } .mko-row > .mko-st, .mko-row2 > .mko-sel { grid-area: st; justify-self: end; }
  .mko-row2 > .mko-sel { width: 150px; }
  .mko-kr { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 12px; }
  .mko-row.mko-rowk { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kli odeb" "co on"; }
  .mko-rowk > .mko-kli { grid-area: kli; } .mko-rowk > .mko-co2 { grid-area: co; } .mko-rowk > .mko-on { grid-area: on; justify-self: end; } .mko-rowk > .mko-odeb { grid-area: odeb; }
}

/* ---------- filtr Pošty (návrh 1C + 2D + 3D): tlačítko vedle priorit a panel pod ním ---------- */
.pf { position: relative; flex: none; }
.ph-posta.dva .pf { order: 1; }
.pf-b { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--panel); color: var(--ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pf-b:hover { background: var(--hover); }
.pf-b .ic { color: var(--muted); }
.pf-b.on { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.pf-b.on .ic { color: var(--btn-ink); }
.pf-b b { min-width: 18px; padding: 0 6px; border-radius: var(--r-pill); background: var(--btn-ink); color: var(--btn); font-size: 11px; font-weight: 700; text-align: center; }
.pf-b[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--sel); }
.pf-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 380px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); }
.pf-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pf-h b { font-weight: 600; }
.pf-h + .pf-od, .pf-tags + .pf-h, .pf-pop > .hint + .pf-h { margin-top: 4px; }
.pf-zrus { border: 0; background: transparent; padding: 0; color: var(--link); font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.pf-q { flex: none; max-width: none; height: 36px; background: var(--panel); }
.pf-q input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 13px; color: var(--ink); }
.pf-q:focus-within { border-color: var(--link); }
.pf-sug { display: flex; flex-direction: column; gap: 1px; max-height: 300px; overflow-y: auto; }
.pf-sug:empty { display: none; }
.pf-n { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 13px; text-align: left; }
.pf-n .ic { flex: none; color: var(--muted); }
.pf-n .ell { flex: 1 1 auto; min-width: 0; }
.pf-n b { font-weight: 600; }
.pf-n .c { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pf-n:hover, .pf-n.hl { background: var(--sel); }
.pf-nic { margin: 2px 8px; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-tag { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-height: 26px; padding: 0 2px 0 10px; border-radius: var(--r-pill); background: var(--sel); color: var(--link); font-size: 12px; }
.pf-tag .ell { min-width: 0; }
.pf-tag b { font-weight: 600; }
.pf-tag button { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--link); }
.pf-tag button:hover { background: var(--panel); }
.pf-pop > .hint { margin: 0; }
.pf-od { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.pf-od label { flex: 1 1 0; min-width: 0; }
.pf-od input { width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; }
.pf-rych .chip { min-height: 28px; padding: 0 10px; font-size: 12px; }
.pf-rych .chip[aria-pressed="true"] { background: var(--sel); border-color: transparent; color: var(--link); }
/* Na telefonu panel zabere celou šířku hlavičky. */
@media (max-width: 600px) {
  .ph-posta { position: relative; }
  .pf { position: static; }
  .pf-pop { left: 0; right: 0; width: auto; max-width: none; }
}