:root { --menu:#15201B; --bg:#F4F5F2; --accent:#0E6B58; --ink:#15201B; --muted:#5A6B7A; --line:#DDE1DA; --card:#fff; --warn:#B3261E; --soft:#F6F7F4; --soft2:#EEF0EC; --grid:#E6E8E3; }
* { box-sizing: border-box; }
body { margin:0; font-family: Manrope, system-ui, sans-serif; background:var(--bg); color:var(--ink); }
input, select, textarea { color:var(--ink); }
a { color: var(--link, var(--accent)); }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.shell { display:flex; min-height:100vh; align-items:flex-start; }
.main { align-self:stretch; }
.side { position:sticky; top:0; height:100vh; overflow-y:auto; width:248px; flex:none; background:var(--menu); color:var(--ink); padding:20px 14px; display:flex; flex-direction:column; gap:20px; }
.logo-pill { display:block; padding:6px 4px; line-height:0; }
.side img.logo { width:100%; max-width:150px; height:auto; }
.companies { display:flex; gap:8px; }
.companies a { display:block; border-radius:50%; border:3px solid transparent; line-height:0; }
.companies a.on { border-color:#F59331; }
.companies img { width:44px; height:44px; border-radius:50%; }
.nav { display:flex; flex-direction:column; gap:4px; }
.nav a { color:var(--ink); text-decoration:none; padding:0 12px; min-height:44px; display:flex; align-items:center; border-radius:8px; font-weight:600; font-size:14px; }
.nav a:hover { background:rgba(21,32,27,.08); }
.nav a.on { background:var(--accent); color:#fff; }
.nav a:focus-visible, .btn:focus-visible, .chip:focus-visible { outline:3px solid #F59331; outline-offset:2px; }
.userbox { margin-top:auto; font-size:13px; color:#3F4F5C; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding-top:14px; border-top:1px solid rgba(21,32,27,.12); }
.main { flex:1; min-width:0; padding:20px 28px 48px; }
.top { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.top h1 { margin:0; font-size:24px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { min-height:44px; padding:0 14px; border-radius:22px; border:1px solid var(--line); background:var(--card); color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.chip.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:6px; border:0; background:var(--accent); color:#fff; font-weight:700; font-size:14px; cursor:pointer; font-family:inherit; }
.btn:hover { filter:brightness(1.1); }
.btn.secondary { background:var(--card); color:var(--ink); border:1px solid var(--line); }
.btn.danger { background:var(--warn); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; }
.hero { border-radius:16px; color:#fff; display:grid; grid-template-columns: minmax(240px,1fr) 2fr; gap:16px; padding:24px; overflow:hidden; }
.hero canvas { width:100%; height:340px; display:block; touch-action:none; }
.hero h2 { margin:0 0 6px; font-size:26px; }
.kpis { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.kpi { background:rgba(255,255,255,.1); border-radius:10px; padding:10px 14px; }
.kpi small { display:block; opacity:.8; }
.kpi b { font-size:20px; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-top:20px; }
.tile { display:block; text-decoration:none; color:inherit; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; min-height:88px; }
.tile:hover { border-color:var(--accent); }
.tile b { display:block; margin-bottom:4px; }
.tile span { color:var(--muted); font-size:13px; }
.note { color:var(--muted); font-size:13px; margin-top:10px; }
.banner { background:#F59331; color:#2B1700; padding:10px 16px; border-radius:10px; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-weight:600; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
/* number columns: the heading sits right above its values and both are centred */
th.num, td.num { text-align:center; white-space:nowrap; }
.matrix td, .matrix th { text-align:center; }
.matrix td:first-child, .matrix th:first-child { text-align:left; }
input[type=text], input[type=email], input[type=date], input[type=number], input[type=search], input[type=password], input[type=tel], input[type=url], select { box-sizing:border-box; background:var(--card); color:var(--ink); min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:6px; font-family:inherit; font-size:14px; }
input[type=checkbox] { width:22px; height:22px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:16px; }
.stack { display:flex; flex-direction:column; gap:16px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.err { color:var(--warn); font-weight:600; }
/* login */
.login { position:relative; min-height:100vh; overflow:hidden; background:#fff; }
.login canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.login .in { position:relative; min-height:100vh; padding:28px 24px; display:flex; flex-direction:column; gap:24px; }
.login .headrow { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.login .pill { font-size:13px; font-weight:600; color:#1C6BC7; background:rgba(255,255,255,.85); padding:6px 12px; border-radius:20px; }
.login .center { flex-grow:1; display:flex; align-items:center; justify-content:center; }
.lcard { width:100%; max-width:380px; background:#2F88EE; color:#fff; border-radius:12px; padding:40px 32px 32px; display:flex; flex-direction:column; gap:22px; box-shadow:0 18px 50px rgba(28,77,140,.25); }
.lcard h1 { margin:0; font-size:28px; text-align:center; }
.lcard p { margin:0; font-size:14px; line-height:1.5; font-weight:500; text-align:center; }
.lcard .emb { display:flex; justify-content:center; gap:10px; }
.lcard .emb img { width:40px; height:40px; border-radius:50%; background:#fff; padding:2px; }
.ms { display:flex; align-items:center; justify-content:center; gap:10px; min-height:46px; border-radius:6px; background:#F59331; color:#fff; font-size:15px; font-weight:700; text-decoration:none; border:0; cursor:pointer; font-family:inherit; width:100%; }
.ms:hover { filter:brightness(1.06); }
.dev { background:rgba(255,255,255,.14); border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:8px; font-size:13px; }
.dev button { min-height:40px; border-radius:6px; border:0; cursor:pointer; font-family:inherit; font-weight:600; }
@media (max-width: 860px) {
  .shell { flex-direction:column; }
  .side { width:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:12px 16px; gap:12px; }
  .side img.logo { width:110px; }
  .nav { flex-direction:row; flex-wrap:wrap; width:100%; }
  .side { position:static; height:auto; overflow:visible; }
  .shell { align-items:stretch; }
  .userbox { margin-top:0; width:100%; }
  .main { padding:16px; }
  .hero { grid-template-columns:1fr; }
}

.ok { background:#E3F2EC; color:#0A4D3F; border:1px solid #9BCBB8; border-radius:10px; padding:12px 16px; margin:0; font-weight:600; }
.user-card summary { list-style:none; }
.user-card summary::-webkit-details-marker { display:none; }
.user-card summary::before { content:'▸'; margin-right:6px; }
.user-card[open] summary::before { content:'▾'; }

.ok { background:color-mix(in srgb, var(--accent) 12%, var(--card)); color:var(--ink); border-color:color-mix(in srgb, var(--accent) 45%, var(--card)); }
a { color:var(--link, var(--accent)); }
.tile:hover { border-color:var(--accent); }
/* Author display rules (.chip etc.) would otherwise override the hidden attribute. */
[hidden] { display:none !important; }

/* Roles are light green so they never blend with the company colours. */
.chip.role-badge { background:#DDEFE6; border-color:#9BCBB8; color:#0A4D3F; }

.user-wrap, section[id] { scroll-margin-top:16px; }
.user-wrap > .ok { margin-top:8px; }

/* Years: the selected one is light green like roles, the others use the company colour. */
.chip.year { background:var(--accent); border-color:var(--accent); color:#fff; }
.chip.year:hover { filter:brightness(1.1); }
.chip.year.current { background:#DDEFE6; border-color:#9BCBB8; color:#0A4D3F; }

.matrix .all-row td { border-bottom:2px solid var(--line); background:color-mix(in srgb, var(--accent) 6%, var(--card)); }

/* Page title stays for screen readers only; the menu already shows where you are. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.top { justify-content:flex-start; }

/* Language switch, same structure and behaviour as on intechi.tech (light theme colours). */
.top { justify-content:space-between; align-items:center; }
.dd { position:relative; display:flex; }
.dd > button { width:40px; height:40px; display:grid; place-items:center; background:none; border:0; color:var(--ink); cursor:pointer; }
.dd > button svg { width:18px; height:auto; fill:currentColor; }
.dd:hover > button, .dd > button:focus-visible { color:var(--accent); }
.dd ul { list-style:none; margin:0; padding:6px 0; position:absolute; top:100%; right:0; min-width:max-content; background:var(--card); border:1px solid var(--line); border-radius:10px; opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .2s .15s, transform .2s .15s; box-shadow:0 12px 40px rgba(21,32,27,.18); z-index:20; }
.dd:hover ul, .dd.open ul { opacity:1; pointer-events:auto; transform:translateY(6px); transition-delay:0s; }
.dd li a { display:flex; align-items:center; gap:10px; padding:8px 16px; text-decoration:none; color:var(--ink); font-weight:600; font-size:14px; }
.dd li a:hover { color:var(--accent); }
.dd li img { width:18px; }
.dd ul::before { content:""; position:absolute; left:-8px; right:-8px; top:-14px; height:14px; }
.login .dd > button { width:40px; }

.hero { position:relative; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 24px 70px -28px var(--brand); }
.hero canvas { cursor:grab; }

/* ---------- charts ---------- */
:root { --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100; --series-5:#e87ba4; --mark-other:#A9B0AA; }
.kpi-tile { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.kpi-tile small { color:var(--muted); font-size:13px; }
.kpi-tile b { font-size:21px; font-weight:600; }
.chart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:16px; }
.chart { margin:0; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.chart h3 { margin:0; font-size:16px; }
.chart .svg { width:100%; height:auto; display:block; overflow:visible; }
.chart .donut { width:190px; height:190px; flex:none; }
.donut-row { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.legend { list-style:none; margin:0; padding:0; display:flex; gap:6px 16px; flex-wrap:wrap; font-size:13px; color:var(--ink); }
.legend li { display:flex; align-items:center; gap:7px; }
.legend .key { width:12px; height:12px; border-radius:3px; flex:none; }
.legend-col { flex-direction:column; flex-wrap:nowrap; gap:8px; flex:1; min-width:160px; }
.legend-col li { justify-content:flex-start; }
.legend-col li b { margin-left:auto; font-weight:600; }
.svg .grid { stroke:var(--grid); stroke-width:1; }
.svg .base { stroke:var(--grid); stroke-width:1; }
.svg .link { stroke:var(--grid); stroke-width:1; }
.svg .ax { fill:var(--muted); font-size:11px; font-family:Manrope, system-ui, sans-serif; }
.svg .lab { fill:var(--ink); font-size:12.5px; font-family:Manrope, system-ui, sans-serif; }
.svg .val { fill:var(--ink); font-size:11px; font-weight:600; font-family:'IBM Plex Mono', ui-monospace, monospace; }
.svg .center-v { fill:var(--ink); font-size:13px; font-weight:600; font-family:'IBM Plex Mono', ui-monospace, monospace; }
.svg .hit { fill:transparent; }
.svg .cat:hover .hit, .svg .cat:focus .hit { fill:rgba(21,32,27,.05); }
.svg .cat { outline:none; }
.svg .cat:focus-visible .hit { stroke:#F59331; stroke-width:2; }
.svg .xhair { stroke:#8A948D; stroke-width:1; opacity:0; }
.svg .cat:hover .xhair, .svg .cat:focus .xhair { opacity:1; }
.svg .arc { transition:opacity .15s; outline:none; }
.svg .arc:hover, .svg .arc:focus { opacity:.8; }
.chart-table summary { cursor:pointer; color:var(--muted); font-size:13px; min-height:32px; display:flex; align-items:center; }
.chart-table table { font-size:13px; }
.chart-table th[scope], .chart-table tbody th { font-weight:600; }
table.pl th, table.pl td { padding:7px 10px; }
table.pl .num { text-align:center; white-space:nowrap; }
table.pl tr.strong th, table.pl tr.strong td { font-weight:700; background:color-mix(in srgb, var(--accent) 6%, var(--card)); }
ul.plain { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.tt { position:fixed; z-index:50; pointer-events:none; background:#15201B; color:#fff; border-radius:8px; padding:8px 10px; font-size:12.5px; box-shadow:0 8px 24px rgba(0,0,0,.25); max-width:280px; }
.tt[hidden] { display:none; }
.tt-title { font-weight:700; margin-bottom:4px; opacity:.85; }
.tt-row { display:flex; align-items:center; gap:8px; }
.tt-row b { font-weight:700; color:#fff; }
.tt-row span:last-child { opacity:.8; }
.tt-key { width:14px; height:3px; border-radius:2px; flex:none; }

/* ---------- soft shadows on cards, tiles and charts ---------- */
:root { --shadow: 0 1px 2px rgba(21,32,27,.06), 0 8px 20px -10px rgba(21,32,27,.22); --shadow-hover: 0 2px 4px rgba(21,32,27,.08), 0 14px 28px -10px rgba(21,32,27,.30); }
.card, .kpi-tile, .chart, .tile { box-shadow:var(--shadow); }
.tile { transition:box-shadow .18s, transform .18s, border-color .18s; }
.tile:hover { box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.svg .center-v { font-size:12px; }
@media (prefers-reduced-motion: reduce) { .tile, .tile:hover { transition:none; transform:none; } }

/* Wide charts keep a readable size on phones and scroll sideways instead of shrinking their text. */
.svg-wrap .svg { min-width:520px; }
.svg .lab.strong { font-weight:700; }

/* user box: name with the role pill under it on the left, Odhlásit on the right, pinned to the bottom of the menu */
.who { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.who-name { font-weight:700; font-size:14px; color:var(--ink); overflow-wrap:anywhere; }
.who-role { min-height:28px; padding:0 12px; font-size:12px; cursor:default; }
.userbox form { flex:none; }

/* compare: pickers with the label above their chips, left-aligned with the year chips */
.pickers { display:flex; flex-direction:column; gap:10px; }
.pick-row { display:flex; flex-direction:column; gap:6px; }
.pick-label { font-size:13px; font-weight:600; color:var(--muted); }

/* KPI tiles: columns follow the available width so the last row is never a single orphan */
.kpi-wrap { container-type:inline-size; }
.kpi-row { display:grid; gap:12px; grid-template-columns:1fr; }
.kpi-row.n2, .kpi-row.n4 { grid-template-columns:repeat(2,1fr); }
@container (max-width: 419px) { .kpi-row.n2, .kpi-row.n4 { grid-template-columns:1fr; } }
@container (min-width: 620px) { .kpi-row.n3 { grid-template-columns:repeat(3,1fr); } }
@container (min-width: 800px) { .kpi-row.n4 { grid-template-columns:repeat(4,1fr); } }

/* charts only scroll sideways where they would otherwise be too small to read */
.svg-wrap { overflow:visible; }
@media (max-width: 600px) { .svg-wrap { overflow-x:auto; overflow-y:hidden; } }

/* the language globe stays top-right next to the years, even when the years wrap on a phone */
.top { flex-wrap:nowrap; align-items:flex-start; }
.top .chips { flex:1; min-width:0; }
.top .dd { flex:none; }

/* ---------- bank statements ---------- */
.docs-drop { border:2px dashed var(--line); background:var(--card); transition:border-color .15s, background .15s; }
.docs-drop.drag { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, var(--card)); }
table.stm th, table.stm td { vertical-align:middle; }
table.stm tbody th { white-space:nowrap; }
table.stm .num { text-align:center; white-space:nowrap; }
.file-cell { display:flex; flex-direction:column; gap:4px; min-width:190px; }
.file-name { font-weight:600; font-size:13px; overflow-wrap:anywhere; }
.btn.sm { min-height:34px; padding:0 12px; font-size:13px; display:inline-flex; align-items:center; text-decoration:none; cursor:pointer; }
a.btn { text-decoration:none; display:inline-flex; align-items:center; }
.badge { display:inline-flex; align-items:center; gap:4px; min-height:26px; padding:0 10px; border-radius:13px; font-size:12px; font-weight:600; white-space:nowrap; }
.badge.good { background:#DDEFE6; color:#0A4D3F; }
.badge.warn { background:#FCEFD3; color:#7A4B00; }
.badge.muted { background:var(--soft2); color:#4C5A55; }
.badge.bad { background:#F8DCDC; color:#8A1C1C; }
.conv { font-style:italic; }
.warn-box { background:#FCEFD3; color:#5E3A00; border:1px solid #E8CD8F; border-radius:10px; padding:12px 16px; margin:0; font-weight:600; }
.btn.danger.sm { background:var(--card); color:var(--warn); border:1px solid color-mix(in srgb, var(--warn) 50%, var(--card)); }
.btn.danger.sm:hover { background:color-mix(in srgb, var(--warn) 8%, var(--card)); filter:none; }
table.stm { font-size:13px; }
.file-cell { min-width:170px; }

/* payroll */
.pay-detail { margin-top:6px; font-size:13px; }
.pay-detail summary { gap:6px 12px; flex-wrap:wrap; cursor:pointer; color:var(--accent); font-weight:600; min-height:28px; display:inline-flex; align-items:center; }
.pay-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; padding:10px 0 4px; min-width:280px; }
.pay-grid h4 { margin:10px 0 4px; font-size:13px; }
.pay-grid h4:first-child { margin-top:0; }
table.mini { width:100%; border-collapse:collapse; margin-bottom:8px; }
table.mini caption { text-align:left; font-weight:600; color:var(--muted); padding:2px 0; }
table.mini td { padding:3px 0; border-bottom:1px solid var(--line); }
table.mini td.num { text-align:right; white-space:nowrap; padding-left:14px; }
table.mini tr.sum td { font-weight:700; }
table.stm tfoot th, table.stm tfoot td { border-top:2px solid var(--line); }
tr.pay-main th, tr.pay-main td { border-bottom:0; }
tr.pay-sub td { padding-top:0; }
/* wide enough for the two buttons of a card side by side (the eye and "Back to waiting") */
.order-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(236px, 1fr)); gap:12px; margin:8px 0; }
.order-card { display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.order-qr { width:150px; height:150px; background:#fff; padding:6px; border-radius:8px; align-self:center; }
.order-qr svg { width:100%; height:100%; display:block; }
/* the buttons of a card stand in the middle, under the QR code */
.order-card > .row { justify-content:center; }
.pay-group.pay-collapsed > tr:not(.pay-head) { display:none; }
tr.pay-head > td { background:var(--soft); border-bottom:1px solid var(--line); padding:4px 8px; }
tr.pay-head .month-toggle { display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; padding:8px 4px; font:inherit; color:inherit; cursor:pointer; text-align:left; flex-wrap:wrap; }
tr.pay-head .chev { color:var(--accent); width:14px; }
.pay-person { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:6px 0; }
.pay-types { display:flex; flex-wrap:wrap; gap:6px; }
.pay-types .badge { padding:2px 10px; font-size:12px; line-height:1.5; }
tr.pay-sub td { padding-bottom:14px; }
tr.pay-sub .pay-detail { margin-top:0; }
.btn.sm { white-space:nowrap; }

/* VAT */
ul.plain { margin:0; padding-left:18px; }
.vat-note { width:100%; min-width:220px; min-height:34px; border:1px solid var(--line); border-radius:6px; padding:0 10px; font:inherit; font-size:13px; }

/* documents */
select.compact, input.compact { min-height:34px; border:1px solid var(--line); border-radius:6px; padding:0 8px; font:inherit; font-size:13px; background:var(--card); max-width:220px; }
.doc-panel table.stm th { white-space:normal; }

/* profit split */
.scn-row { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.scn { margin:0; }
.scn-btn { width:100%; height:100%; text-align:left; display:flex; flex-direction:column; gap:4px; padding:14px 16px; border:2px solid var(--line); border-radius:12px; background:var(--card); font:inherit; color:var(--ink); cursor:pointer; box-shadow:var(--shadow); }
.scn-btn:hover { border-color:var(--accent); }
.scn.selected .scn-btn { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--card)); }
.scn-value { font-size:22px; font-weight:700; }
.scn-btn:focus-visible { outline:3px solid #F59331; outline-offset:2px; }
table.stm td.off, table.stm th.off { opacity:.45; text-decoration:line-through; text-decoration-color:transparent; }

/* company details */
.entity-list { margin:0; display:grid; gap:6px; }
.entity-row { display:grid; grid-template-columns:minmax(110px,170px) 1fr; gap:12px; align-items:baseline; }
.entity-row dt { color:var(--muted); font-size:13px; }
.entity-row dd { margin:0; font-weight:600; overflow-wrap:anywhere; }
@media (max-width:520px) { .entity-row { grid-template-columns:1fr; gap:0; } }

/* back to top: bottom left, in the colour of the company */
.to-top { position:fixed; right:24px; bottom:20px; width:46px; height:46px; border-radius:50%; border:0; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.25); z-index:50; transition:transform .15s, filter .15s; }
body.hand-on main, body.hand-on .viewer-body { cursor:grab; }
body.hand-on main, body.hand-on .viewer-body { user-select:none; -webkit-user-select:none; }
body.hand-on.hand-grab, body.hand-on.hand-grab * { cursor:grabbing !important; user-select:none; }
.hand-btn { position:fixed; right:31px; bottom:76px; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.18); z-index:50; padding:0; }
.hand-btn.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.hand-btn:focus-visible { outline:3px solid #F59331; outline-offset:2px; }
@media (max-width:860px) { .hand-btn { display:none; } }
.to-top[hidden] { display:none; }
.to-top:hover { transform:translateY(-2px); filter:brightness(1.1); }
.to-top:focus-visible { outline:3px solid #F59331; outline-offset:3px; }
@media (max-width:860px) { .to-top { right:14px; bottom:14px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition:none; } }
.entity-card { margin-top:24px; }
.check-inline { display:inline-flex; align-items:center; gap:6px; color:var(--warn); font-weight:600; }
.check-inline input { width:18px; height:18px; }

/* messages at the bottom, folding away by themselves */
.toasts { position:fixed; left:248px; right:0; top:20px; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:60; pointer-events:none; padding:0 16px; }
.toast { pointer-events:auto; position:relative; max-width:min(760px, 100%); width:100%; box-shadow:0 8px 24px rgba(0,0,0,.2); border-radius:10px; opacity:0; transform:translateY(-12px); max-height:240px; overflow:hidden; transition:opacity .25s, transform .25s, max-height .3s, margin .3s; }
.toast.shown { opacity:1; transform:none; }
.toast.leaving { opacity:0; transform:translateY(-12px); max-height:0; margin-top:-8px; }
.toast > [role] { margin:0; padding-right:44px; background-clip:padding-box; }
.toast > .err { background:#FDECEA; border:1px solid #F1B5AE; border-radius:10px; padding:12px 44px 12px 16px; }
.toast-close { position:absolute; top:6px; right:8px; width:30px; height:30px; border:0; border-radius:50%; background:transparent; color:inherit; font-size:22px; line-height:1; cursor:pointer; }
.toast-close:hover { background:rgba(0,0,0,.08); }
.toast-close:focus-visible { outline:3px solid #F59331; outline-offset:1px; }
@media (max-width:860px) { .toasts { left:0; top:12px; } }
@media (prefers-reduced-motion: reduce) { .toast { transition:none; } }

.kpi-row.n5 { grid-template-columns:repeat(2,1fr); }
@container (min-width: 620px) { .kpi-row.n5 { grid-template-columns:repeat(3,1fr); } }
@container (min-width: 900px) { .kpi-row.n5 { grid-template-columns:repeat(5,1fr); } }
.kpi-row.n5 { grid-template-columns:repeat(2,1fr); }
@container (min-width: 620px) { .kpi-row.n5 { grid-template-columns:repeat(3,1fr); } }
@container (min-width: 900px) { .kpi-row.n5 { grid-template-columns:repeat(5,1fr); } }

/* sending by data box: orange button in the colours of the data box system */
.btn.ds { background:#F28C00; color:#1b1b1b; display:inline-flex; align-items:center; gap:10px; }
.btn.ds:hover { filter:brightness(1.08); }
.btn.ds:focus-visible { outline:3px solid #1b1b1b; outline-offset:2px; }
.ds-icon { flex:none; }
.ds-list { margin:0; display:grid; gap:10px; }
.ds-row { display:grid; grid-template-columns:minmax(150px,240px) 1fr; gap:12px; align-items:start; }
.ds-row dt { color:var(--muted); font-size:13px; padding-top:6px; }
.ds-row dd { margin:0; display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.ds-text { margin:0; white-space:pre-wrap; font:inherit; background:var(--soft); border:1px solid var(--line); border-radius:8px; padding:10px 12px; flex:1 1 320px; }
@media (max-width:640px) { .ds-row { grid-template-columns:1fr; gap:2px; } }

/* search and filter above a table */
.filter-box { gap:10px; align-items:center; }
.filter-input { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:22px; padding:0 14px; min-height:40px; background:var(--card); flex:1 1 260px; max-width:420px; color:var(--muted); }
.filter-input:focus-within { border-color:var(--accent); outline:2px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.filter-input input { border:0; outline:0; font:inherit; font-size:14px; flex:1; min-width:0; background:transparent; color:var(--ink); }
[hidden] { display:none !important; }

/* search in the top bar */
.top-tools { display:flex; align-items:center; gap:14px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.top-search { margin:0; }
.top-search .filter-input { min-height:38px; width:min(320px, 60vw); max-width:none; }
.check-plain { display:inline-flex; align-items:center; gap:8px; font-size:14px; }
ul.hits { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
ul.hits li { padding-bottom:8px; border-bottom:1px solid var(--line); }
ul.hits li:last-child { border-bottom:0; }

/* ---------- polish: alignment and breathing room ---------- */
/* blocks placed one after another directly in the page always have a gap between them */
.main > .top ~ * + * { margin-top:20px; }
.stack { gap:20px; }
.stack > .stack { gap:16px; }
.card { padding:24px; }
.card .card { box-shadow:none; }
.kpi-row { gap:16px; }
.kpi-tile { padding:16px 20px; }
.chart-grid { gap:20px; }
th, td { padding:10px 12px; }
table.mini td { padding:3px 0; }
table.pl th, table.pl td { padding:8px 12px; }

/* label + field pairs sit on one line, centred on each other */
.row { gap:12px 16px; }
.row > label { display:inline-flex; align-items:center; gap:10px; }
.row > label.stack { display:flex; align-items:stretch; }
.row > b { display:inline-flex; align-items:center; min-height:44px; }

/* prepared messages (data box, e-mails): label, value and buttons line up */
.ds-list { gap:14px; }
.ds-row { align-items:center; grid-template-columns:minmax(150px,240px) 1fr; }
.ds-row dt { padding-top:0; line-height:1.35; }
.ds-row dd { align-items:center; gap:12px; }
.ds-row.top { align-items:start; }
.ds-row.top dt { padding-top:12px; }
.ds-row dd > .mono, .ds-row dd > span[id] { min-height:34px; display:inline-flex; align-items:center; }
.ds-actions { display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ds-row.top .ds-actions { align-self:flex-start; }
.ds-text { padding:12px 14px; line-height:1.5; }
.is-editing { outline:2px solid var(--accent); outline-offset:2px; background:var(--card); border-radius:6px; }
span.is-editing { padding:2px 6px; }
textarea.tpl-text { width:100%; font:inherit; font-size:14px; line-height:1.5; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:var(--soft); resize:vertical; }
textarea.tpl-text:not([readonly]) { background:var(--card); border-color:var(--accent); }
.mail-edit { display:flex; flex-direction:column; gap:6px; align-items:flex-start; min-width:200px; }
.mail-edit .pay-detail { margin-top:0; }
.mail-edit .pay-detail[open] { width:min(520px, 80vw); }
input[type=text].tpl-in, .mail-edit input[type=text] { min-height:40px; }

/* folded cards: forms stay rolled up until opened, and roll up again after saving */
details.fold > summary { list-style:none; cursor:pointer; font-size:17px; font-weight:700; display:flex; align-items:center; gap:10px; min-height:32px; }
details.fold > summary::-webkit-details-marker { display:none; }
details.fold > summary::before { content:'▸'; color:var(--accent); font-size:15px; }
details.fold[open] > summary::before { content:'▾'; }
details.fold > summary:focus-visible { outline:3px solid #F59331; outline-offset:4px; border-radius:6px; }
details.fold[open] > summary { margin-bottom:16px; }

/* plus / minus buttons */
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; font:inherit; line-height:1; cursor:pointer; flex:none; transition:background .15s, color .15s; }
.icon-btn.add { background:#DDF1E3; color:#1E8E3E; }
.icon-btn.add:hover { background:#1E8E3E; color:#fff; }
.icon-btn.remove { background:#FBE0DE; color:#C62828; }
.icon-btn.remove:hover { background:#C62828; color:#fff; }
.icon-btn:focus-visible { outline:3px solid #F59331; outline-offset:2px; }

/* logo and company emblems lead home */
.logo-pill { text-decoration:none; }

/* documents by month */
tbody.month-group > tr.month-head > td { padding:0; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--accent) 7%, var(--card)); }
.month-bar { display:flex; align-items:center; gap:10px; padding:2px 12px; }
.month-toggle { flex:0 1 auto; min-width:0; display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:none; border:0; font:inherit; font-size:15px; color:var(--ink); text-align:left; cursor:pointer; min-height:32px; padding:0; }
.month-toggle .chev { color:var(--accent); width:14px; }
.month-toggle:focus-visible { outline:3px solid #F59331; outline-offset:2px; border-radius:6px; }
tbody.month-group > tr.month-head > td.month-act { padding:0 12px; text-align:left; width:1%; white-space:nowrap; position:sticky; right:0; background:color-mix(in srgb, var(--accent) 7%, var(--card)); }
tbody.month-group.collapsed > tr:not(.month-head) { display:none; }
tbody.month-group.drag > tr.month-head > td { background:color-mix(in srgb, var(--accent) 22%, var(--card)); outline:2px dashed var(--accent); outline-offset:-3px; }
tbody.month-group.drag > tr:not(.month-head) { background:color-mix(in srgb, var(--accent) 8%, var(--card)); }
a.doc-link[data-thumb] { text-decoration-style:dotted; }
.thumb-pop { position:fixed; z-index:70; pointer-events:none; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:6px; box-shadow:0 12px 36px rgba(21,32,27,.28); max-width:280px; }
.thumb-pop img { display:block; max-width:260px; max-height:360px; width:auto; height:auto; border-radius:6px; background:#f4f5f2; }
@media (hover: none) { .thumb-pop { display:none; } }

/* a value and its name stay on one line in tooltips, legends and tiles */
.tt { max-width:none; width:max-content; }
.tt-row, .tt-row b, .tt-row span { white-space:nowrap; }
.tt-row { gap:10px; }
.legend-col li b, .scn-value, .donut-row .mono { white-space:nowrap; }
.tt-row.tt-sum { margin-top:4px; padding-top:5px; border-top:1px solid rgba(255,255,255,.2); }

/* file viewer */
dialog.viewer { width:min(1000px, 96vw); height:min(88vh, 900px); max-width:none; padding:0; border:0; border-radius:14px; box-shadow:0 24px 80px rgba(0,0,0,.4); overflow:hidden; flex-direction:column; background:var(--card); }
dialog.viewer[open] { display:flex; }
dialog.viewer::backdrop { background:rgba(21,32,27,.55); }
.viewer-bar { cursor:grab; user-select:none; display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); }
.viewer-bar .btn { cursor:pointer; }
body.win-drag, body.win-drag * { cursor:grabbing !important; }
.viewer-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viewer-body { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; background:var(--soft2); overflow:auto; }
.viewer-body iframe { width:100%; height:100%; border:0; background:var(--card); }
.viewer-body img { max-width:100%; max-height:100%; object-fit:contain; }
/* the viewer's download button wears the light tint of the company, like the menu */
dialog.viewer .viewer-bar .btn:not(.secondary) { background:var(--menu); color:var(--ink); border:1px solid color-mix(in srgb, var(--accent) 35%, var(--card)); }
dialog.viewer .viewer-bar .btn:not(.secondary):hover { filter:none; background:color-mix(in srgb, var(--accent) 22%, var(--card)); }
dialog.viewer .viewer-bar .btn.print-btn, dialog.viewer .viewer-bar .btn.print-btn:hover { background:#6F42C1; border-color:#6F42C1; color:#fff; }
dialog.viewer .viewer-bar .btn.print-btn:hover { background:#5E35AD; border-color:#5E35AD; }

/* account number, IBAN and BIC: each in its own pill */
.acc-line { display:inline-flex; flex-wrap:wrap; gap:8px 10px; align-items:center; }
.acc-chip { display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 6px 0 12px; border-radius:17px; background:var(--menu); border:1px solid color-mix(in srgb, var(--accent) 18%, var(--card)); font-weight:500; }
.acc-chip small { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.acc-chip .mono { font-size:13.5px; font-weight:500; color:var(--ink); white-space:nowrap; }
.acc-copy { display:inline-grid; place-items:center; width:26px; height:26px; border:0; border-radius:50%; background:transparent; color:var(--accent); cursor:pointer; padding:0; }
.acc-copy:hover { background:color-mix(in srgb, var(--accent) 16%, var(--card)); }
.acc-copy:focus-visible { outline:3px solid #F59331; outline-offset:1px; }
.acc-copy.copied { background:#DDEFE6; color:#1E8E3E; }
.acc-copy.copied svg { display:none; }
.acc-copy.copied::after { content:'✓'; font-weight:800; }
.acc-copy.copy-failed::after { content:'!'; font-weight:800; color:var(--warn); }
.acc-copy.copy-failed svg { display:none; }
.acc-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:6px; }
.acc-row > b { min-width:44px; }

/* companies in the administration */
.co-list { display:grid; gap:16px; }
.co-card { border:1px solid var(--line); border-left:5px solid var(--co, var(--accent)); border-radius:12px; padding:18px 20px; display:flex; flex-direction:column; gap:16px; background:var(--card); }
.co-head { display:flex; align-items:center; gap:12px; }
.co-head img { border-radius:50%; flex:none; }
.co-head h3 { margin:0; font-size:17px; }
.facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px 20px; }
.fact { display:flex; flex-direction:column; gap:2px; min-width:0; }
.fact.wide { grid-column:1 / -1; }
.fact small { color:var(--muted); font-size:12px; font-weight:600; }
.fact b { font-weight:600; font-size:14.5px; overflow-wrap:anywhere; }
.co-accounts { display:flex; flex-direction:column; gap:10px; padding-top:14px; border-top:1px dashed var(--line); }
.co-accounts .acc-row { margin-top:0; }
.cur-badge { display:inline-flex; align-items:center; justify-content:center; min-width:52px; height:30px; padding:0 10px; border-radius:6px; background:var(--co, var(--accent)); color:#fff; font-size:13px; font-weight:800; letter-spacing:.04em; }

/* menu icons */
.nav a { gap:12px; }
.nav-ico { flex:none; color:#4A5568; }
.nav a.on .nav-ico { color:#fff; }
.nav a:hover:not(.on) .nav-ico { color:var(--ink); }
.nav-sep { border:0; border-top:1px solid rgba(21,32,27,.12); margin:6px 0; width:100%; }
@media (max-width:860px) { .nav-sep { display:none; } }
.entity-card .co-card { border-top:0; border-right:0; border-bottom:0; border-radius:0; padding:2px 0 2px 18px; }

/* invoices */
input.compact.wide { width:100%; min-width:220px; max-width:none; }
.invoice-form input[type=text], .invoice-form input[type=date], .invoice-form select { width:100%; }
.invoice-form td input, .invoice-form td select { width:auto; }
.invoice-form td input.wide { width:100%; }

/* the invoice as printed: colours of the company (--inv) */
.inv-sheet { background:#fff; color:var(--inv-ink); width:100%; max-width:860px; margin:0 auto; box-shadow:var(--shadow); border-radius:6px; overflow:hidden; font-size:14px; position:relative; }
.inv-sheet.cancelled::after { content:'STORNO'; position:absolute; top:42%; left:50%; transform:translate(-50%,-50%) rotate(-18deg); font-size:90px; font-weight:800; color:rgba(179,38,30,.16); letter-spacing:.1em; pointer-events:none; }
.inv-top { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.inv-logo { padding:34px 36px 20px; display:flex; align-items:center; }
.inv-logo img { max-width:210px; max-height:64px; height:auto; width:auto; }
.inv-title { background:var(--inv); padding:26px 36px; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.inv-title h2 { margin:0; font-size:26px; }
.inv-parties { display:grid; grid-template-columns:1fr 1fr; }
.inv-parties > div { padding:26px 36px 22px; display:flex; flex-direction:column; gap:6px; }
.inv-parties > div:first-child { border-right:1px solid #e3e3e3; }
.inv-parties small { color:#777; letter-spacing:.06em; text-transform:uppercase; font-size:11.5px; }
.inv-name { font-size:15.5px; }
.inv-addr { margin:0; color:#555; line-height:1.5; white-space:pre-line; }
.inv-ids, .inv-pay, .inv-dates { margin:0; display:grid; gap:4px; }
.inv-ids > div, .inv-pay > div, .inv-dates > div { display:flex; justify-content:space-between; gap:16px; }
.inv-ids dt, .inv-pay dt, .inv-dates dt { color:#666; }
.inv-ids dd, .inv-pay dd, .inv-dates dd { margin:0; text-align:right; }
.inv-band { display:grid; grid-template-columns:1fr 1fr; }
.inv-pay { background:var(--inv); padding:20px 36px; }
.inv-pay dt { color:var(--inv-ink); }
.inv-dates { background:#f0f0f0; padding:20px 36px; }
.inv-intro { margin:26px 36px 0; color:#555; }
.inv-items { width:calc(100% - 72px); margin:24px 36px 0; border-collapse:collapse; }
.inv-items th { color:#777; font-weight:500; text-transform:uppercase; font-size:12px; padding:8px 10px; border-bottom:2px solid #dcdcdc; }
.inv-items td { padding:10px; border-bottom:1px solid #dcdcdc; vertical-align:top; }
.inv-items .r { text-align:right; white-space:nowrap; }
.inv-items td.shade { background:#f0f0f0; }
.inv-items tr:first-child th:first-child, .inv-items td:first-child { padding-left:0; }
.inv-bottom { display:grid; grid-template-columns:1fr 1.15fr; gap:36px; padding:26px 36px 20px; align-items:start; }
.inv-qr { display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.inv-qr svg { width:150px; height:150px; border:1px solid #eee; padding:10px; background:#fff; }
.inv-qr small { color:#888; }
.inv-sums table { width:100%; border-collapse:collapse; }
.inv-sums th { text-align:left; color:#777; font-weight:500; text-transform:uppercase; font-size:12px; padding:4px 0; }
.inv-sums th.r, .inv-sums td.r { text-align:right; }
.inv-sums td { padding:4px 0; }
.inv-sums tr.muted td { color:#666; text-transform:uppercase; font-size:12px; }
.inv-sums tbody tr:last-child td { border-bottom:3px solid var(--inv); padding-bottom:8px; }
.inv-grand { margin:10px 0 0; text-align:right; font-size:26px; font-weight:800; }
.inv-foot { padding:20px 36px 30px; color:#666; font-size:12.5px; display:grid; gap:8px; }
.inv-foot p { margin:0; }
@media (max-width:700px) {
  .inv-top, .inv-parties, .inv-band, .inv-bottom { grid-template-columns:1fr; }
  .inv-parties > div:first-child { border-right:0; }
  .inv-title h2 { font-size:22px; }
}
@media print {
  @page { size:A4; margin:0; }
  body { background:#fff; }
  .side, .top, .toasts, .to-top, .no-print, .banner { display:none !important; }
  .shell { display:block; }
  .main { padding:0; }
  .inv-sheet { box-shadow:none; max-width:none; border-radius:0; font-size:12.5px; }
  .inv-title, .inv-pay, .inv-dates, .inv-items td.shade, .inv-sums tbody tr:last-child td { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* lock, public invoice */
.lock { color:var(--muted); display:inline-flex; vertical-align:middle; }
.public-invoice { padding:24px 16px 48px; }

/* contacts */
tr.letter-row td { background:color-mix(in srgb, var(--accent) 7%, var(--card)); font-weight:800; color:var(--accent); padding:8px 12px; letter-spacing:.04em; }
table.contacts th a { text-decoration:none; font-weight:700; }
.chips.seg { gap:0; }
.chips.seg .chip { border-radius:0; margin-left:-1px; }
.chips.seg .chip:first-child { border-radius:22px 0 0 22px; margin-left:0; }
.chips.seg .chip:last-child { border-radius:0 22px 22px 0; }
.chips.seg .chip:has(input:checked) { background:var(--accent); border-color:var(--accent); color:#fff; }
.chips.seg .chip:has(input:focus-visible) { outline:3px solid #F59331; outline-offset:2px; }
.contact-form input[type=text], .contact-form select { width:100%; }

.preview .inv-sheet::after { content:'NÁHLED'; position:absolute; top:42%; left:50%; transform:translate(-50%,-50%) rotate(-18deg); font-size:90px; font-weight:800; color:rgba(21,32,27,.07); letter-spacing:.1em; pointer-events:none; }

input[type=date], input[type=search], input[type=number], textarea { background:var(--card); color:var(--ink); }
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.8; }

/* theme switch next to the language globe */
.theme-toggle { width:40px; height:40px; display:grid; place-items:center; background:none; border:0; color:var(--ink); cursor:pointer; border-radius:50%; }
.theme-toggle:hover, .theme-toggle:focus-visible { color:var(--accent); }
.theme-toggle:focus-visible { outline:3px solid #F59331; outline-offset:1px; }
.theme-toggle .sun { display:none; }
html[data-theme="dark"] .theme-toggle .sun { display:block; }
html[data-theme="dark"] .theme-toggle .moon { display:none; }

/* ---------- dark theme: the same app on dark surfaces ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0E1311; --card:#18201C; --ink:#E7EDE9; --muted:#9DABA4; --line:#2B3731; --soft:#202A25; --soft2:#27332D; --grid:#2B3731;
  --warn:#FF8A80; --link:color-mix(in srgb, var(--accent) 42%, #fff);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 20px -10px rgba(0,0,0,.6); --shadow-hover: 0 2px 4px rgba(0,0,0,.5), 0 14px 28px -10px rgba(0,0,0,.7);
}
html[data-theme="dark"] .shell { --menu: var(--menu-dark) !important; }
html[data-theme="dark"] .nav a:hover { background:rgba(255,255,255,.07); }
html[data-theme="dark"] .userbox { color:var(--muted); border-top-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .nav-ico { color:var(--muted); }
html[data-theme="dark"] .nav a:hover:not(.on) .nav-ico { color:var(--ink); }
html[data-theme="dark"] .nav-sep { border-top-color:rgba(255,255,255,.12); }
html[data-theme="dark"] .side img.logo, html[data-theme="dark"] .logo-pill { filter:none; }
/* the logo has no white plate in the dark: its colours are lightened so they read on the dark menu */
html[data-theme="dark"] .logo-pill img { filter:brightness(1.75) saturate(1.05); }
html[data-theme="dark"] .companies a.on { border-color:#F59331; }
html[data-theme="dark"] .ok { background:color-mix(in srgb, var(--accent) 26%, var(--card)); border-color:color-mix(in srgb, var(--accent) 55%, var(--card)); color:var(--ink); }
html[data-theme="dark"] .warn-box { background:#3A2E12; color:#F6D58E; border-color:#6A5420; }
html[data-theme="dark"] .toast > .err, html[data-theme="dark"] .err { color:var(--warn); }
html[data-theme="dark"] .toast > .err { background:#3A1B18; border-color:#7A322C; }
html[data-theme="dark"] .badge.good { background:#1E3A2E; color:#8FD6B4; }
html[data-theme="dark"] .badge.warn { background:#3A2E12; color:#F0C873; }
html[data-theme="dark"] .badge.bad { background:#3E1D1D; color:#F2A7A7; }
html[data-theme="dark"] .badge.muted { background:#27332D; color:#A9B7B0; }
html[data-theme="dark"] .chip.role-badge, html[data-theme="dark"] .chip.year.current { background:#1E3A2E; border-color:#2F5C48; color:#BFE8D2; }
html[data-theme="dark"] .chip { color:var(--ink); }
html[data-theme="dark"] .chip.on, html[data-theme="dark"] .chip.year { color:#fff; }
html[data-theme="dark"] .chip.year.current { color:#BFE8D2; }
html[data-theme="dark"] .btn.secondary { color:var(--ink); }
html[data-theme="dark"] .btn.danger.sm { background:transparent; }
html[data-theme="dark"] .pay-detail summary, html[data-theme="dark"] a { color:var(--link); }
html[data-theme="dark"] .btn, html[data-theme="dark"] .nav a.on, html[data-theme="dark"] .chip.on { color:#fff; }
html[data-theme="dark"] .btn.secondary, html[data-theme="dark"] .chip { color:var(--ink); }
html[data-theme="dark"] .btn.ds { color:#1b1b1b; }
html[data-theme="dark"] .icon-btn.add { background:#1E3A2E; color:#7FD3A2; }
html[data-theme="dark"] .icon-btn.remove { background:#3A1B18; color:#FF9A92; }
html[data-theme="dark"] .acc-chip small, html[data-theme="dark"] tr.letter-row td, html[data-theme="dark"] .month-toggle .chev, html[data-theme="dark"] details.fold > summary::before { color:var(--link); }
html[data-theme="dark"] .chart .svg .xhair { stroke:#6C7A73; }
html[data-theme="dark"] .svg .cat:hover .hit, html[data-theme="dark"] .svg .cat:focus .hit { fill:rgba(255,255,255,.07); }
html[data-theme="dark"] .svg .link { stroke:var(--grid); }
html[data-theme="dark"] .ds-text, html[data-theme="dark"] textarea.tpl-text { background:var(--soft); color:var(--ink); }
html[data-theme="dark"] textarea.tpl-text:not([readonly]) { background:var(--card); }
html[data-theme="dark"] .viewer-body { background:#0E1311; }
html[data-theme="dark"] .dd ul { box-shadow:0 12px 40px rgba(0,0,0,.6); }
html[data-theme="dark"] .dd > button, html[data-theme="dark"] .dd li a { color:var(--ink); }
html[data-theme="dark"] .scn.selected .scn-btn { background:color-mix(in srgb, var(--accent) 22%, var(--card)); }
html[data-theme="dark"] .user-card summary { color:var(--ink); }
html[data-theme="dark"] .kpi-tile b, html[data-theme="dark"] .scn-value { color:var(--ink); }
html[data-theme="dark"] .thumb-pop img { background:var(--soft); }
html[data-theme="dark"] ::selection { background:color-mix(in srgb, var(--accent) 55%, #000); color:#fff; }
/* the invoice is a paper document: it stays white in every theme */
html[data-theme="dark"] .inv-sheet { color-scheme:light; background:#fff; color:#15201B; }
html[data-theme="dark"] .public-invoice { background:var(--bg); }
@media print { html[data-theme="dark"] body { background:#fff; color:#000; } }
/* the theme switch sits close to the globe: the gap between the icons equals the gap before the first one */
.top-tools .theme-toggle { margin-right:-12px; }

/* ---- help ---- */
.nav-help { padding-top:10px; border-top:1px solid rgba(21,32,27,.12); }
.help-group { margin:14px 0 2px; padding:8px 12px; border-radius:8px; background:color-mix(in srgb, var(--accent) 7%, var(--card)); color:var(--accent); font-size:15px; font-weight:800; letter-spacing:.04em; }
details.help-topic { padding:0; }
details.help-topic > summary { list-style:none; cursor:pointer; padding:14px 18px; display:flex; flex-direction:column; gap:2px; position:relative; padding-right:44px; }
details.help-topic > summary::-webkit-details-marker { display:none; }
details.help-topic > summary::after { content:'▸'; position:absolute; right:18px; top:16px; color:var(--accent); }
details.help-topic[open] > summary::after { content:'▾'; }
details.help-topic > summary:focus-visible { outline:3px solid #F59331; outline-offset:-3px; border-radius:10px; }
.help-title { font-size:16px; font-weight:700; }
.help-sum { color:#4C5A55; font-size:14px; }
.help-body { padding:0 18px 16px; border-top:1px solid rgba(21,32,27,.08); padding-top:12px; }
.help-body ol, .help-body ul { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px; line-height:1.5; }
.help-tips { background:var(--soft2); border-radius:8px; padding:10px 14px; }
.help-tips ul { margin-top:6px; }
html[data-theme="dark"] .help-sum { color:#A9B7B0; }
html[data-theme="dark"] .nav-help { border-top-color:rgba(255,255,255,.12); }
@media (max-width:860px) { .nav-help { margin-top:0; border-top:0; padding-top:0; width:100%; } }

/* ---- about the app ---- */
.about-list { padding:0; overflow:hidden; }
.about-item { display:grid; grid-template-columns:minmax(180px,1fr) 2fr; gap:6px 18px; padding:12px 18px; border-bottom:1px solid rgba(21,32,27,.08); align-items:center; }
.about-item:last-child { border-bottom:0; }
.about-name { display:flex; gap:8px; align-items:center; justify-content:flex-start; text-align:left; flex-wrap:wrap; }
.about-use { color:#4C5A55; line-height:1.45; }
html[data-theme="dark"] .about-use { color:#A9B7B0; }
html[data-theme="dark"] .about-item { border-bottom-color:rgba(255,255,255,.08); }
@media (max-width:700px) { .about-item { grid-template-columns:1fr; } }

/* ---- invoice designs: the same invoice in other looks (classic is the base above) ---- */
.inv-vatstatus { margin:0; font-weight:600; color:#555; }
.d-modern { border-top:10px solid var(--inv-brand); }
.d-modern .inv-title { background:transparent; }
.d-modern .inv-title h2 { color:var(--inv-brand); font-size:30px; }
.d-modern .inv-parties small { color:var(--inv-brand); font-weight:700; }
.d-modern .inv-pay, .d-modern .inv-dates { background:transparent; border-top:2px solid var(--inv-brand); border-bottom:1px solid #ddd; }
.d-modern .inv-pay dt { color:#666; }
.d-modern .inv-items th { color:var(--inv-brand); border-bottom:2px solid var(--inv-brand); }
.d-modern .inv-items td.shade { background:transparent; }
.d-modern .inv-sums tbody tr:last-child td { border-bottom-color:var(--inv-brand); }
.d-modern .inv-grand { color:var(--inv-brand); }

.d-minimal { box-shadow:none; border:1px solid #d6d6d6; }
.d-minimal .inv-title, .d-minimal .inv-pay, .d-minimal .inv-dates { background:transparent; }
.d-minimal .inv-title h2 { font-weight:600; }
.d-minimal .inv-pay dt { color:#666; }
.d-minimal .inv-band { border-top:1px solid #222; border-bottom:1px solid #222; margin-top:8px; }
.d-minimal .inv-items th { color:#222; border-bottom:1px solid #222; }
.d-minimal .inv-items td { border-bottom:1px solid #e6e6e6; }
.d-minimal .inv-items td.shade { background:transparent; }
.d-minimal .inv-sums tbody tr:last-child td { border-bottom:1px solid #222; }

.d-bold .inv-top { background:var(--inv-brand); color:#fff; }
.d-bold .inv-title { background:transparent; color:#fff; }
.d-bold .inv-logo img { filter:brightness(0) invert(1); }
.d-bold .inv-pay { background:var(--inv-brand); color:#fff; }
.d-bold .inv-pay dt { color:rgba(255,255,255,.85); }
.d-bold .inv-dates { background:var(--inv); }
.d-bold .inv-items th { background:var(--inv-brand); color:#fff; border-bottom:0; }
.d-bold .inv-items tr:first-child th:first-child { padding-left:10px; }
.d-bold .inv-items td.shade { background:transparent; }
.d-bold .inv-sums tbody tr:last-child td { border-bottom-color:var(--inv-brand); }
.d-bold .inv-grand { background:var(--inv-brand); color:#fff; padding:8px 14px; border-radius:6px; }

.d-compact { font-size:12.5px; }
.d-compact .inv-logo { padding:18px 28px 10px; }
.d-compact .inv-title { padding:14px 28px; }
.d-compact .inv-title h2 { font-size:20px; }
.d-compact .inv-parties > div { padding:14px 28px; }
.d-compact .inv-pay, .d-compact .inv-dates { padding:12px 28px; }
.d-compact .inv-intro { margin:14px 28px 0; }
.d-compact .inv-items { width:calc(100% - 56px); margin:14px 28px 0; }
.d-compact .inv-items th, .d-compact .inv-items td { padding:5px 8px; }
.d-compact .inv-bottom { padding:14px 28px 10px; gap:24px; }
.d-compact .inv-qr svg { width:110px; height:110px; padding:6px; }
.d-compact .inv-grand { font-size:20px; }
.d-compact .inv-foot { padding:12px 28px 18px; font-size:11px; }

.d-elegant { font-family:Georgia, 'Times New Roman', serif; }
.d-elegant .inv-top { grid-template-columns:1fr; text-align:center; border-bottom:4px double var(--inv-brand); }
.d-elegant .inv-logo { justify-content:center; padding:28px 36px 6px; }
.d-elegant .inv-title { background:transparent; align-items:center; padding:6px 36px 20px; }
.d-elegant .inv-title h2 { font-weight:400; letter-spacing:.12em; text-transform:uppercase; font-size:24px; }
.d-elegant .inv-pay, .d-elegant .inv-dates { background:transparent; border-bottom:1px solid #ccc; }
.d-elegant .inv-pay dt { color:#666; }
.d-elegant .inv-items th { color:var(--inv-brand); border-bottom:1px solid var(--inv-brand); }
.d-elegant .inv-items td.shade { background:transparent; }
.d-elegant .inv-sums tbody tr:last-child td { border-bottom:1px solid var(--inv-brand); }
.d-elegant .inv-grand { border-top:4px double var(--inv-brand); padding-top:6px; font-weight:400; }

@media print { .inv-sheet, .inv-sheet * { -webkit-print-color-adjust:exact; print-color-adjust:exact; } }

.design-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,420px), 1fr)); gap:16px; }
.design-card { margin:0; display:flex; flex-direction:column; gap:12px; min-width:0; }
.design-card.current { outline:2px solid var(--accent); }
.design-frame { min-width:0; max-width:100%; zoom:.5; pointer-events:none; border:1px solid #ddd; border-radius:6px; overflow:hidden; background:#fff; }
.design-frame .inv-sheet { max-width:none; box-shadow:none; border-radius:0; }
@media (max-width:520px) { .design-grid { grid-template-columns:1fr; } }

/* audit log: one line per change, the whole record opens on a click */
.audit td { vertical-align:top; }
.audit-change { font-size:12px; max-width:420px; }
.audit-change summary { cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:420px; }
.audit-full { margin-top:6px; padding:8px 10px; background:var(--soft2); border-radius:6px; word-break:break-all; white-space:pre-wrap; max-height:260px; overflow:auto; }

/* menu on a desktop: every line (between groups, above Nápověda, above the user) has the same 10px of air above and below */
@media (min-width:861px) {
  .side { gap:0; }
  .logo-pill, .companies { margin-bottom:20px; }
  .nav { margin-bottom:10px; }
  .nav-help { margin-top:0; margin-bottom:10px; padding-top:10px; }
  .nav-help + .userbox { margin-top:auto; padding-top:10px; }
}

.audit-filter { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.audit-filter .filter-input { flex:1 1 220px; }
.audit-diff { display:grid; gap:2px; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12px; }
.audit-diff b { color:var(--accent); margin-right:4px; }
.audit-diff .from { color:#8a4b4b; text-decoration:line-through; }
.audit-diff .to { color:#1f6b3f; }
.audit-raw summary { cursor:pointer; font-size:12px; color:var(--muted, #5b6b64); margin-top:4px; }
.audit-pager { justify-content:center; gap:12px; }
html[data-theme="dark"] .audit-diff .from { color:#e0a0a0; }
html[data-theme="dark"] .audit-diff .to { color:#8FD6B4; }

/* ---- menu: on a desktop the wrapper disappears and nothing changes; on a phone it is folded behind a button ---- */
.side-menu { display:contents; }
.menu-toggle { display:none; }
@media (max-width:860px) {
  .side { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px 12px; padding:10px 16px; }
  .logo-pill { padding:0; }
  .side img.logo { width:84px; }
  .companies { justify-content:flex-start; gap:2px; min-width:0; }
  .companies a { border-width:2px; }
  .companies img { width:32px; height:32px; }
  html[data-theme="dark"] .logo-pill img { filter:brightness(2.2) saturate(1.05); }
  .menu-toggle { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border-radius:22px; border:1px solid rgba(21,32,27,.18); background:rgba(255,255,255,.55); color:var(--ink); font:inherit; font-weight:700; font-size:13.5px; cursor:pointer; }
  .menu-toggle:focus-visible { outline:3px solid #F59331; outline-offset:2px; }
  .side-menu { display:none; grid-column:1 / -1; flex-direction:column; gap:10px; }
  .side.open .side-menu { display:flex; }
  .side-menu .nav { display:grid; grid-template-columns:1fr 1fr; gap:4px 8px; width:100%; }
  .side-menu .nav a { padding:0 10px; font-size:13.5px; line-height:1.25; }
  .side-menu .nav-help { border-top:1px solid rgba(21,32,27,.12); padding-top:8px; margin:0; }
  .side-menu .userbox { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; width:100%; margin:0; padding-top:10px; }
  .top { flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:10px; }
  .top .chips { flex:none; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .top .chips .chip { flex:none; }
  .top .chips { scrollbar-width:none; }
  .top .chips::-webkit-scrollbar { display:none; }
  .top-tools { margin-left:0; width:100%; flex-wrap:nowrap; justify-content:flex-start; gap:10px; }
  .top-search { flex:1; min-width:0; }
  .top-search .filter-input { width:100%; min-width:0; }
  .top-tools .zdd { display:none; }
  .top-tools .theme-toggle { margin-right:0; }
}
html[data-theme="dark"] .menu-toggle { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }
html[data-theme="dark"] .side-menu .nav-help, html[data-theme="dark"] .side-menu .userbox { border-top-color:rgba(255,255,255,.12); }

/* very narrow phones (320 px): nothing may be wider than the screen */
@media (max-width:420px) {
  .acc-chip { max-width:100%; min-width:0; }
  .acc-chip .mono { white-space:normal; overflow-wrap:anywhere; }
  .btn, .chip { max-width:100%; white-space:normal; text-align:center; }
  .compact { max-width:100%; }
}

/* ---- review fixes ---- */
/* years never break into several rows: when the search does not fit beside them, it goes to its own row */
@media (min-width:861px) {
  .top { flex-wrap:wrap; }
  .top .chips { flex:0 1 auto; flex-wrap:nowrap; }
}
/* the invoice follows its own width, not the screen: a narrower sheet gets tighter margins */
.inv-sheet { container-type:inline-size; }
@container (max-width:680px) {
  .inv-logo { padding:24px 22px 14px; }
  .inv-title { padding:20px 22px; }
  .inv-parties > div { padding:20px 22px 18px; }
  .inv-pay, .inv-dates { padding:16px 22px; }
  .inv-pay dt { white-space:nowrap; }
  .inv-pay dd { overflow-wrap:anywhere; }
  .inv-intro { margin:20px 22px 0; }
  .inv-items { width:calc(100% - 44px); margin:18px 22px 0; }
  .inv-bottom { padding:20px 22px 16px; gap:22px; }
  .inv-foot { padding:16px 22px 24px; }
}
/* the logo of the bold design sits on a white plate, so its colours and its shape stay */
.d-bold .inv-logo img { filter:none; background:#fff; padding:8px 14px; border-radius:8px; }
/* the minimal design really is black and grey */
.d-minimal .inv-logo img { filter:grayscale(1); }
/* the gallery shows each design at the real width, shrunk to fit by public/js/designs.js */
.design-frame .inv-sheet { width:860px; max-width:none; }

/* QR payment: a thin grey frame with the label sitting on its bottom edge, the same in every design */
.inv-qr { position:relative; display:block; width:max-content; max-width:100%; margin:0 0 14px; padding:14px; border:1px solid #c9c9c9; background:#fff; }
.inv-qr svg { display:block; width:150px; height:150px; max-width:100%; border:0; padding:0; background:#fff; }
.inv-qr small { position:absolute; left:12px; bottom:0; transform:translateY(55%); padding:0 6px; background:#fff; color:#8a8a8a; font-size:14px; line-height:1.2; }
.d-compact .inv-qr { padding:10px; margin-bottom:12px; }
.d-compact .inv-qr svg { width:110px; height:110px; padding:0; }
.d-compact .inv-qr small { font-size:12px; }
.inv-bottom { align-items:start; }
@media print { .inv-qr, .inv-qr small { -webkit-print-color-adjust:exact; print-color-adjust:exact; } }

/* ---- calendar ---- */
.nav-badge.red { background:#D93025; }
.nav-badge + .nav-badge { margin-left:-8px; } /* the item has a gap of 12px: the two circles stand 4px apart */
.nav-badge { margin-left:auto; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:#F59331; color:#fff; font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.reminders { border-left:4px solid #F59331; }
.reminder { display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px; align-items:center; padding:8px 0; border-top:1px solid var(--line); }
.reminder:first-of-type { border-top:0; }
.reminder .note { grid-column:2; }
.reminder-when { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); white-space:nowrap; }
/* the date and the button stand in the middle of the text, which has two lines: title and what it is about */
.reminder-when { grid-column:1; grid-row:1 / span 2; align-self:center; }
.reminder-title { grid-column:2; grid-row:1; align-self:end; }
.reminder .note { grid-row:2; align-self:start; }
.reminder.overdue .reminder-when { color:#B3261E; }
.reminder.today .reminder-when { color:#B26A00; }
html[data-theme="dark"] .reminder.overdue .reminder-when { color:#FF8A80; }
html[data-theme="dark"] .reminder.today .reminder-when { color:#F5B14A; }
.reminder-title { font-weight:700; }
.reminder form { grid-row:1 / span 2; grid-column:3; }
.cal-grid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px; }
.cal-wd { font-size:12px; font-weight:700; color:var(--muted); text-align:center; padding:4px 0; text-transform:uppercase; }
.cal-day { min-height:92px; border:1px solid var(--line); border-radius:8px; padding:6px; display:flex; flex-direction:column; gap:3px; background:var(--card); min-width:0; }
.cal-day.empty { border:0; background:transparent; }
.cal-day.today { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.cal-n { font-size:12px; font-weight:700; color:var(--muted); }
.cal-day.today .cal-n { color:var(--accent); }
.cal-item { display:block; font-size:12px; line-height:1.25; padding:2px 6px; border-radius:6px; text-decoration:none; overflow-wrap:break-word; hyphens:auto; background:color-mix(in srgb, var(--accent) 16%, var(--card)); color:var(--ink); }
.cal-item.overdue { background:#F8DCDC; color:#8A1C1C; }
.cal-item.today { background:#FCEFD3; color:#7A4B00; }
.cal-item.done { text-decoration:line-through; opacity:.6; }
.cal-item.auto { background:var(--soft2); color:var(--muted); border:1px dashed var(--line); }
.cal-key { display:inline-block; width:12px; height:12px; border-radius:3px; margin:0 6px 0 12px; vertical-align:-1px; background:color-mix(in srgb, var(--accent) 30%, var(--card)); }
.cal-key.auto { background:var(--soft2); border:1px dashed var(--muted); }
.cal-month { font-size:18px; }
html[data-theme="dark"] .cal-item.overdue { background:#3E1D1D; color:#F2A7A7; }
html[data-theme="dark"] .cal-item.today { background:#3A2E12; color:#F0C873; }
@media (max-width:1100px) {
  /* on a phone or a narrow window the grid becomes a list of the days that have something on */
  .cal-grid { grid-template-columns:1fr; }
  .cal-wd, .cal-day.empty, .cal-day.quiet { display:none; }
  .cal-day { min-height:0; flex-direction:row; flex-wrap:wrap; align-items:flex-start; }
  .cal-n { min-width:28px; font-size:15px; }
  .cal-item { flex:1 1 60%; font-size:14px; }
}
@media (max-width:860px) {
  .reminder { grid-template-columns:1fr auto; }
  .reminder-when { grid-column:1; grid-row:1; }
  .reminder-title, .reminder .note { grid-column:1; grid-row:auto; align-self:auto; }
  .reminder form { grid-row:1 / span 3; grid-column:2; }
}

/* ---- home hero: no greeting; the company and year are the title; the box adapts to desktop and phone ---- */
.hero { align-items:center; }
.hero-text { display:flex; flex-direction:column; justify-content:center; }
.hero-title { font-size:26px; font-weight:700; line-height:1.2; margin:0; }
.hero-year { opacity:.8; margin-top:2px; }
@media (max-width:700px) {
  .hero { padding:18px 16px; gap:12px; }
  .hero-title { font-size:21px; }
  .hero canvas { height:230px; }
  .kpis { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
  .kpis .kpi:first-child { grid-column:1 / -1; }
  .kpi { padding:9px 12px; }
  .kpi b { font-size:18px; }
}

/* ---- administration: the backup card, its colour says how old the last backup is ---- */
.backup-card { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-left:6px solid var(--bk, #2E9E6B); }
.backup-card.fresh { --bk:#2E9E6B; }
.backup-card.soon { --bk:#E0A030; }
.backup-card.stale { --bk:#D9453D; }
.backup-state { display:flex; align-items:center; gap:14px; }
.backup-dot { width:16px; height:16px; border-radius:50%; background:var(--bk); box-shadow:0 0 0 5px color-mix(in srgb, var(--bk) 25%, transparent); flex:none; }
.backup-card.stale .backup-dot { animation:backup-pulse 1.6s ease-in-out infinite; }
.backup-state b { font-size:18px; }
.backup-age { color:var(--bk); font-weight:600; }
@keyframes backup-pulse { 50% { box-shadow:0 0 0 9px color-mix(in srgb, var(--bk) 10%, transparent); } }
@media (prefers-reduced-motion:reduce) { .backup-card.stale .backup-dot { animation:none; } }

/* ---- clean-up of the trial data: a checkbox and its text stay side by side, however long the text ---- */
.clean-row { display:flex; flex-wrap:nowrap; align-items:flex-start; gap:10px; }
.clean-row input { flex:none; margin-top:4px; }
.clean-row span { min-width:0; }

/* ---- real numbers: where they are incomplete ---- */
.warn-card { border:1px solid color-mix(in srgb, var(--warn) 55%, var(--card)); background:color-mix(in srgb, var(--warn) 10%, var(--card)); border-radius:12px; padding:12px 16px; }
.warn-card { display:flex; flex-direction:column; gap:12px; }
.warn-card ul { margin:0; }
.warn-card form.row { gap:10px 14px; align-items:center; }

/* ---- notes: private to-dos ---- */
.note-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.note-card.waiting { border-left:6px solid #F59331; }
.note-card.done .note-title { text-decoration:line-through; color:var(--muted); }
.note-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.note-title { font-size:16px; flex:1; min-width:140px; overflow-wrap:anywhere; }
.note-body { margin:0; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; }

/* ---- API keys ---- */
.api-fresh { border-left:6px solid #F59331; }
.api-fresh input { width:100%; }
.api-code { margin:0; padding:12px 14px; border-radius:10px; background:var(--soft); border:1px solid var(--line); overflow-x:auto; font-size:13px; white-space:pre; }
.api-admin code { font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:13px; overflow-wrap:anywhere; }

/* ---- import of a folder ---- */
.fi-scroll { overflow-x:auto; }
.fi-table td, .fi-table th { vertical-align:top; }
.fi-name { overflow-wrap:anywhere; min-width:150px; max-width:280px; font-size:12px; }
.fi-warn { font-size:12px; margin-top:2px; }
.fi-table input.guessed { border-color:#F59331; }

/* ---- a chip that holds a checkbox shows at once whether it is ticked (people of a reminder, kinds of material) ---- */
label.chip { cursor:pointer; }
label.chip:has(input[type="checkbox"]:checked) { background:var(--accent); border-color:var(--accent); color:#fff; }
label.chip:has(input[type="checkbox"]:focus-visible) { outline:3px solid #F59331; outline-offset:2px; }
label.chip:has(input[type="checkbox"]:checked)::before { content:'\2713'; margin-right:6px; font-weight:700; }

/* ---- numbering series of invoices ---- */
.series-card.pending { border-left:6px solid #F59331; }
.series-form .grid2 { align-items:end; }

/* ---- statuses of documents: one colour for one meaning (green paid, blue waiting, red overdue, orange to do, grey nothing) ---- */
.badge.info { background:#DCE9FA; color:#0E3F7A; }
.badge.cancelled { text-decoration:line-through; }
html[data-theme="dark"] .badge.info { background:#16304F; color:#9CC4F5; }
.badge.good::first-letter, .badge.bad::first-letter { font-weight:800; }

/* ---- the upload of documents: a preview picture of each file, and what was read from the PDF ---- */
.doc-pv { display:inline-block; line-height:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; font-size:12px; padding:2px; }
.doc-pv img { display:block; max-height:72px; width:auto; }
table.stm input.guessed { border-color:#F59331; }

/* ---- cells with only a badge or a button are centred, and their heading (align.js) with them ---- */
table.stm td:has(> .badge:only-child), table.stm td:has(> .btn:only-child), table.stm td:has(> .file-cell),
table.stm td:has(> form:only-child > .btn:only-child) { text-align:center; }
table.stm .file-cell { align-items:center; text-align:center; }

/* ---- the size of the page ---- */
.zdd { position:relative; display:flex; }
.zdd > .zbtn { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 10px; background:none; border:1px solid transparent; border-radius:10px; color:var(--ink); font-weight:600; font-size:13px; cursor:pointer; }
.zdd > .zbtn:hover, .zdd > .zbtn:focus-visible, .zdd.open > .zbtn { color:var(--accent); border-color:var(--line); }
.zdd.changed > .zbtn { border-color:var(--line); background:var(--card); }
.zdd ul { list-style:none; margin:0; padding:6px 0; position:absolute; top:100%; right:0; min-width:max-content; background:var(--card); border:1px solid var(--line); border-radius:10px; opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .2s, transform .2s; box-shadow:0 12px 40px rgba(21,32,27,.18); z-index:20; }
.zdd.open ul { opacity:1; pointer-events:auto; transform:translateY(6px); }
.zdd li button { display:flex; width:100%; align-items:center; padding:8px 18px; background:none; border:0; text-align:left; color:var(--ink); font:inherit; font-weight:600; font-size:14px; cursor:pointer; }
.zdd li button:hover, .zdd li button:focus-visible { color:var(--accent); background:var(--soft2); }

/* ---- Print is orange everywhere (all companies), so it stands out from the other buttons ---- */
.btn.print-btn { background:#6F42C1; border-color:#6F42C1; color:#fff; }
.btn.print-btn:hover, .btn.print-btn:focus-visible { background:#5E35AD; border-color:#5E35AD; color:#fff; filter:none; }
html[data-theme="dark"] .btn.print-btn { background:#8B5CD6; border-color:#8B5CD6; color:#fff; }

/* the title of an invoice that is overdue is red, one that falls due soon is orange */
.reminder.auto.overdue .reminder-title { color:#B3261E; }
.reminder.auto.today .reminder-title, .reminder.auto.soon .reminder-title { color:#B26A00; }
html[data-theme="dark"] .reminder.auto.overdue .reminder-title { color:#F2A7A7; }
html[data-theme="dark"] .reminder.auto.today .reminder-title, html[data-theme="dark"] .reminder.auto.soon .reminder-title { color:#F0C873; }

/* the actions of a statement file (download, replace, delete) are folded behind an arrow */
details.file-more > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--link); padding:2px 6px; border-radius:8px; }
details.file-more > summary::-webkit-details-marker { display:none; }
details.file-more > summary::before { content:'\25B8'; display:inline-block; transition:transform .15s; }
details.file-more[open] > summary::before { transform:rotate(90deg); }
details.file-more > .row { margin-top:6px; justify-content:center; }

/* the check of an upload: a quiet box above the table, green when nothing is wrong, orange when something is */
.upload-sum { border:1px solid var(--line); border-left:6px solid #2E8B57; border-radius:10px; padding:8px 12px; background:var(--card); }
.upload-sum.warn { border-left-color:#F59331; }

/* a month of the statements is folded to one line (✓ PDF, ✓ GPC); the arrow opens the names, sizes and actions */
tr.stm-row:not(.open) .file-full { display:none; }
tr.stm-row.open .file-short { display:none; }
.row-toggle { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; margin-left:6px; background:none; border:1px solid var(--line); border-radius:8px; color:var(--link); cursor:pointer; }
.row-toggle .chev { transition:transform .15s; }
.row-toggle[aria-expanded="true"] .chev { transform:rotate(90deg); }
tr.stm-row th { white-space:nowrap; }

/* buttons of one card on a single line (two at most when they do not fit) */
.toolbar { display:flex; flex-wrap:wrap; gap:10px 8px; align-items:center; }
.toolbar > .bundle-bar { display:contents; }
.toolbar > [data-bundle-status] { margin:0; }

/* a tile coloured by its meaning: blue = information, green = fine, orange = waits, red = late */
.kpi-tile.info { background:color-mix(in srgb, #1C6BC7 11%, var(--card)); border-color:color-mix(in srgb, #1C6BC7 40%, var(--card)); }
.kpi-tile.good { background:color-mix(in srgb, #2E8B57 13%, var(--card)); border-color:color-mix(in srgb, #2E8B57 45%, var(--card)); }
.kpi-tile.warn { background:color-mix(in srgb, #F59331 16%, var(--card)); border-color:color-mix(in srgb, #F59331 55%, var(--card)); }
.kpi-tile.bad { background:color-mix(in srgb, #B3261E 12%, var(--card)); border-color:color-mix(in srgb, #B3261E 50%, var(--card)); }
.kpi-tile.bad b { color:#B3261E; }
html[data-theme="dark"] .kpi-tile.bad b { color:#FF8A80; }

/* a bank above its accounts: a small badge in place of the logo, the name, then the accounts under it */
.bank-group { display:flex; flex-direction:column; gap:8px; }
.bank-pill { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:4px 14px 4px 5px; border:1px solid var(--line); border-radius:999px; background:var(--soft); font-weight:700; }
.bank-logo { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 6px; border-radius:50%; background:var(--bank, var(--accent)); color:#fff; font-size:11px; font-weight:800; letter-spacing:.02em; }
.bank-group .acc-row { padding-left:12px; }

/* the results of the search for an invoice: an open list under the box, seen at once */
select.pay-results { height:auto; flex:1 1 100%; width:100%; min-width:320px; box-sizing:border-box; padding:4px; }
select.pay-results option { padding:6px 24px 6px 8px; white-space:normal; }

/* "Urgovat" (chase a late invoice) in its own colour, apart from "Odbavit" */
.btn.urge { background:#6F42C1; color:#fff; border:1px solid #6F42C1; }
.btn.urge:hover { filter:brightness(1.08); }

/* the number of a balance: red when it is below zero, green when above (the number only, not the whole tile) */
.kpi-tile b.neg, .num.neg, .amt.neg { color:#B3261E; }
.kpi-tile b.pos, .num.pos, .amt.pos { color:#1E7B4B; }
html[data-theme="dark"] .kpi-tile b.neg, html[data-theme="dark"] .num.neg, html[data-theme="dark"] .amt.neg { color:#FF8A80; }
html[data-theme="dark"] .kpi-tile b.pos, html[data-theme="dark"] .num.pos, html[data-theme="dark"] .amt.pos { color:#7DD6A0; }

/* the state of the backup: green with a tick when it is done */
.backup-status.ok { color:#1E7B4B; font-weight:700; }
html[data-theme="dark"] .backup-status.ok { color:#7DD6A0; }

/* a table whose cells are all centred, like the number columns elsewhere */
table.tbl-center th, table.tbl-center td { text-align:center; }
table.tbl-center .row { justify-content:center; }
/* ---- menu: a calmer, more modern look (soft active pill, light text, thin icons colour) ---- */
.nav { gap:2px; }
.nav a { min-height:40px; padding:0 12px; border-radius:10px; font-weight:500; font-size:14px; letter-spacing:.005em; position:relative; transition:background .15s ease, color .15s ease; }
.nav a:hover:not(.on) { background:color-mix(in srgb, var(--ink) 6%, transparent); }
.nav a.on { background:color-mix(in srgb, var(--accent) 14%, var(--card)); color:var(--accent); font-weight:700; box-shadow:0 1px 2px rgba(21,32,27,.06); }
.nav a.on::before { content:''; position:absolute; left:-14px; top:9px; bottom:9px; width:4px; border-radius:0 4px 4px 0; background:var(--accent); }
.nav-ico { color:var(--muted); opacity:.9; width:18px; height:18px; }
.nav a.on .nav-ico { color:var(--accent); opacity:1; }
.nav-sep { border-top-color:color-mix(in srgb, var(--ink) 9%, transparent); margin:8px 10px; width:auto; }
.nav-badge { height:20px; min-width:20px; border-radius:10px; font-size:11.5px; }
.nav-help { border-top-color:color-mix(in srgb, var(--ink) 9%, transparent); }
html[data-theme="dark"] .nav a.on { background:color-mix(in srgb, var(--accent) 28%, var(--card)); color:var(--link, #fff); box-shadow:none; }
html[data-theme="dark"] .nav a.on .nav-ico { color:var(--link, #fff); }
html[data-theme="dark"] .nav a.on::before { background:var(--link, var(--accent)); }
html[data-theme="dark"] .nav a:hover:not(.on) { background:rgba(255,255,255,.06); }
@media (max-width:860px) {
  .nav a { min-height:44px; }
  .nav a.on::before { display:none; }
}

/* the buttons of a notice (chase, dismiss) sit together in the third column and wrap instead of overlapping */
.reminder-actions { grid-column:3; grid-row:1 / span 2; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; min-width:0; }
.reminder-actions form { display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:flex-end; margin:0; }
.reminder-actions input.compact { width:200px; max-width:100%; }
@media (max-width:860px) { .reminder-actions { grid-column:1 / -1; grid-row:auto; justify-content:flex-start; } .reminder-actions form { justify-content:flex-start; } }
/* a choice of a few words in one frame (payment method of an invoice) */
.seg-field { border:0; padding:0; margin:0; min-width:0; display:flex; flex-direction:column; gap:4px; }
.seg-field legend { padding:0; margin-bottom:4px; }
.seg { display:inline-flex; flex-wrap:wrap; align-self:flex-start; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--card); }
.seg label { position:relative; display:flex; align-items:center; min-height:40px; padding:0 16px; cursor:pointer; border-right:1px solid var(--line); font-weight:500; }
.seg label:last-child { border-right:0; }
.seg input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.seg label:has(input:checked) { background:color-mix(in srgb, var(--accent) 12%, var(--card)); color:var(--accent); font-weight:700; }
.seg label:has(input:focus-visible) { outline:3px solid #F59331; outline-offset:-3px; }
/* the sums by VAT rate under the items of an invoice form */
.vat-summary { margin-left:auto; border-collapse:collapse; font-size:13px; }
.vat-summary th, .vat-summary td { padding:4px 10px; border-bottom:1px solid var(--line); text-align:right; }
.vat-summary th:first-child, .vat-summary td:first-child { text-align:left; }

/* the values read from a VAT return in the import preview */
.fi-vat { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; }
.fi-vat input { width:110px; }

/* the results of the search for the invoice of a payment: a list with whole lines, the button stays beside the box */
form:has(.pay-search) .pay-search { order:1; }
form:has(.pay-search) > button { order:2; }
select.pay-hidden { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.pay-list { order:3; flex:1 1 100%; list-style:none; margin:6px 0 0; padding:4px; border:1px solid var(--line); border-radius:8px; background:var(--card); max-height:340px; overflow:auto; }
.pay-list li { padding:8px 10px; border-radius:6px; line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
.pay-list .pay-group { font-weight:700; font-size:13px; color:var(--muted); padding-top:10px; }
.pay-list .pay-item { cursor:pointer; }
.pay-list .pay-item:hover { background:var(--soft2); }
.pay-list .pay-item.on { background:color-mix(in srgb, var(--accent) 14%, var(--card)); outline:2px solid var(--accent); outline-offset:-2px; font-weight:600; }
.pay-list .pay-item:focus-visible { outline:3px solid #F59331; outline-offset:-3px; }
.pay-list .pay-none { color:var(--muted); }

/* the table of the months of VAT: the status and the actions in the middle of their cells */
table.vat-table th:nth-child(n+2), table.vat-table td:nth-child(n+2) { text-align:center; }
table.vat-table .row { justify-content:center; }

/* the card of a company in the administration: sections with a coloured heading */
/* the people responsible for the payments: a framed card for each company */
.pay-resp-co { display:flex; flex-direction:column; gap:8px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.pay-resp-h { margin:0; font-size:15px; }
.co-sec { --sec:#2F6FD8; display:flex; flex-direction:column; gap:10px; padding:12px 14px 14px; border:1px solid var(--line); border-left:5px solid var(--sec); border-radius:12px; background:var(--card); }
.co-sec .co-h { margin:0; }
.co-sec .co-h span { display:inline-block; padding:4px 14px; border-radius:999px; font-size:14px; font-weight:700; color:var(--sec); background:color-mix(in srgb, var(--sec) 13%, var(--card)); }
.co-ident { --sec:#2F6FD8; }
.co-boxes { --sec:#0E8C7A; }
.co-life { --sec:#6B7A8C; }
.co-tax { --sec:#7B3FD1; }
.co-inv { --sec:#1E8E3E; }
.co-agenda { --sec:#C77A10; }
.co-acc { --sec:#1F4E8C; }
html[data-theme="dark"] .co-ident { --sec:#6FA0F5; }
html[data-theme="dark"] .co-boxes { --sec:#4FC7B2; }
html[data-theme="dark"] .co-life { --sec:#A9B6C4; }
html[data-theme="dark"] .co-tax { --sec:#B28CF0; }
html[data-theme="dark"] .co-inv { --sec:#62C77B; }
html[data-theme="dark"] .co-agenda { --sec:#F0B35A; }
html[data-theme="dark"] .co-acc { --sec:#7FA6E0; }
.co-save { position:sticky; bottom:0; z-index:5; display:flex; align-items:center; gap:12px; padding:10px 0; background:var(--card); border-top:1px solid var(--line); }

/* roles in the administration: folded, and each role compact */
.role-row { gap:8px; padding:14px 16px; box-shadow:none; }
.role-row .row { gap:6px 8px; }
.role-row .chip { min-height:28px; padding:0 12px; font-size:13px; }
.role-row .pay-detail > summary { font-size:13px; }

/* documents that wait to be sorted */
.inbox-item { gap:12px; padding:16px; box-shadow:none; }
.inbox-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px 16px; }
.inbox-grid label { display:flex; flex-direction:column; gap:4px; font-size:13px; }
.inbox-grid input, .inbox-grid select { width:100%; }
.inbox-grid .inbox-pay { grid-column:1 / -1; background:var(--soft2); border-radius:10px; padding:10px 12px; }

/* the field for people in copy of an e-mail opens by a button */
.cc-add { display:inline-block; }
.cc-add > summary { list-style:none; cursor:pointer; }
.cc-add > summary::-webkit-details-marker { display:none; }
.cc-add[open] > summary { margin-bottom:6px; }

/* the forms of the sorting of costs, of plans and of corrections: every field has the same height and the fields stand on one line */
.inbox-grid { align-items:end; }
.inbox-grid label { justify-content:flex-end; }
.inbox-grid input[type=text], .inbox-grid input[type=date], .inbox-grid input[type=number], .inbox-grid select { min-height:44px; width:100%; }
.inbox-grid input[type=text], .inbox-grid input[type=date], .inbox-grid input[type=number], .inbox-grid select { height:44px; box-sizing:border-box; line-height:1.2; margin:0; }
.inbox-grid select { -webkit-appearance:menulist-button; appearance:auto; padding-top:0; padding-bottom:0; }

/* the responsible people of a company: one block for the payroll, one for the costs */
.pay-resp-kind { display:flex; flex-direction:column; gap:6px; padding:8px 0; }
.pay-resp-kind + .pay-resp-kind { border-top:1px dashed var(--line); }

/* a fixed cost in the review of an upload: the line under it that spreads the amount over several months */
.spread-row > td { padding:0 0 10px; border-top:0; }
.spread-strip { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:10px 14px; background:var(--soft2); border-radius:10px; }
.spread-strip label { font-weight:700; cursor:pointer; }
.spread-detail { display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; }
.spread-out { font-family:var(--mono, monospace); font-weight:700; }

/* the bar of the bulk change of documents */
.bulk-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 14px; background:var(--soft2); border-radius:10px; border:1px solid var(--line); position:sticky; top:8px; z-index:5; }
.bulk-bar[hidden] { display:none; }

/* the banner of the demo: it says on every page that the numbers are invented */
.demo-banner { display:flex; flex-direction:column; gap:4px; background:#FFF4D6; border-color:#E8C46B; color:#4A3500; }
html[data-theme="dark"] .demo-banner { background:#3A2E0F; border-color:#7A5F1B; color:#F5E3B0; }

/* amounts stand under the head of their column, on the right, and the columns of a list of plans keep their widths */
table.stm th.num, table.stm td.num { text-align:right; }
table.plans-table { table-layout:fixed; width:100%; min-width:760px; }
table.plans-table th, table.plans-table td { text-align:left; vertical-align:middle; overflow-wrap:anywhere; white-space:normal; }
table.plans-table th.num, table.plans-table td.num { text-align:right; }
table.plans-table td:last-child { text-align:right; }

/* the eye that shows the invoice before a reminder is sent: in the colour of the accent */
.btn.eye-btn { color:var(--accent); border-color:var(--accent); padding:0 8px; min-width:0; gap:0; }
.reminder-actions { gap:6px; }
.reminder-actions .btn { padding-left:10px; padding-right:10px; }
.reminder-actions .btn.eye-btn { padding-left:8px; padding-right:8px; }
.btn.eye-btn:hover, .btn.eye-btn:focus-visible { background:var(--accent); color:#fff; }

/* the card of the reminders is compact: low rows, small buttons and fields, a narrow frame */
.reminders { padding:14px 18px; gap:6px; }
.reminders h3 { font-size:17px; }
.reminder { padding:6px 0; }
.reminder-title { font-size:15px; line-height:1.3; }
.reminder .note { font-size:12.5px; }
.reminder-actions .btn, .reminder-actions input.compact { min-height:34px; height:34px; font-size:13px; line-height:1; box-sizing:border-box; }
.reminder-actions input.compact { width:170px; }

/* very narrow phones: long links, fields and figures wrap instead of widening the page */
.note, .note a, .stack > p { overflow-wrap:anywhere; }
.kpi-tile { min-width:0; }
.kpi-tile b.mono, .kpi-tile small, .kpi-tile .note { overflow-wrap:anywhere; }
@media (max-width:640px) {
  .kpi-row.n5 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ds-row { grid-template-columns:minmax(0, 1fr); }
  .ds-row dd { min-width:0; max-width:100%; }
  .ds-row dd > * { min-width:0; max-width:100%; }
  .cc-add input, .cc-add[open] { max-width:100%; }
  .cc-add[open] { display:block; width:100%; }
  .cc-add input.compact { width:100%; }
}
@media (max-width:640px) { .inv-sheet { overflow-x:auto; } .inv-items { min-width:380px; } }

/* every kind of the work agreement in its own colour: employment blue, DPP orange, DPČ purple, other grey */
.badge.type-hpp { background:#DCE8F8; color:#0F3F7A; }
.badge.type-dpp { background:#FDE8CF; color:#7A4300; }
.badge.type-dpc { background:#E8DDF5; color:#4B2A7A; }
.badge.type-other { background:var(--soft2); color:#4C5A55; }
html[data-theme="dark"] .badge.type-hpp { background:#1C3355; color:#9CC3F5; }
html[data-theme="dark"] .badge.type-dpp { background:#4A3217; color:#F3C48A; }
html[data-theme="dark"] .badge.type-dpc { background:#35264D; color:#CDB4EE; }
html[data-theme="dark"] .badge.type-other { background:#27332D; color:#A9B7B0; }

/* in the card of the reminders: has the customer been reminded of the invoice? */
.reminder-sent { font-size:12.5px; font-weight:600; }
.reminder-sent.none { color:#B3261E; }
.reminder-sent.done { color:#0A6B4F; }
html[data-theme="dark"] .reminder-sent.none { color:#F2A7A7; }
html[data-theme="dark"] .reminder-sent.done { color:#8FD6B4; }
.login .dev input[type=password] { min-height:40px; border-radius:6px; border:0; padding:0 12px; font:inherit; }

/* the sent-reminder line stands under the title (desktop) or across the whole card (phone) */
.reminder-sent { grid-column:2; }

/* ---- phone, second pass ---- */
@media (max-width:640px) {
  /* an account: the label above, the number below in one line, the copy button on the right */
  .acc-line, .acc-row { flex-direction:column; align-items:stretch; gap:6px; }
  .acc-chip { display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:'lab btn' 'val btn'; align-items:center; column-gap:8px; row-gap:0; width:100%; box-sizing:border-box; padding:5px 6px 5px 12px; border-radius:14px; max-width:100%; }
  .acc-chip small { grid-area:lab; }
  .acc-chip .mono { grid-area:val; white-space:normal; overflow-wrap:normal; font-size:13px; min-width:0; line-height:1.35; }
  .acc-chip .acc-copy { grid-area:btn; }
  /* the reminders: the e-mail field across the card, the buttons together in one row beneath it */
  .reminder { grid-template-columns:minmax(0, 1fr); }
  .reminder-when, .reminder-title, .reminder .note, .reminder-sent, .reminder-actions { grid-column:1 / -1; grid-row:auto; }
  .reminder-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:flex-start; }
  .reminder-actions form { display:contents; }
  .reminder-actions input.compact { flex:1 1 100%; width:100%; max-width:none; }
  .reminder-actions .btn { padding-left:10px; padding-right:10px; flex:0 0 auto; }
}
.svg .lab.sm { font-size:11.5px; }

/* the list of invoices on a phone: only what is needed to recognise an invoice (the rest is in its detail), no sideways scrolling */
@media (max-width:640px) {
  .hide-sm { display:none; }
  .inv-table th:first-child .badge { display:block; width:max-content; margin:2px 0 0; }
  .inv-table td:nth-child(2) { min-width:110px; }
}
@media (max-width:640px) {
  /* every invoice is one little card of three lines: number and amount, customer and status, due date */
  .inv-table, .inv-table tbody { display:block; width:100%; }
  .inv-table thead { display:none; }
  .inv-table tr.letter-row, .inv-table tr.letter-row td { display:block; }
  .inv-table tr:not(.letter-row) { display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:12px; align-items:center; padding:8px 4px; border-top:1px solid var(--line); }
  .inv-table tr:not(.letter-row) > th, .inv-table tr:not(.letter-row) > td { display:block; border:0; padding:1px 0; text-align:left; }
  .inv-table tr:not(.letter-row) > th { grid-column:1; grid-row:1; }
  .inv-table tr:not(.letter-row) > td.num { grid-column:2; grid-row:1; text-align:right; }
  .inv-table tr:not(.letter-row) > td:nth-child(2) { grid-column:1; grid-row:2; min-width:0; color:var(--muted); font-size:13px; }
  .inv-table tr:not(.letter-row) > td:nth-child(9) { grid-column:2; grid-row:2; text-align:right; }
  .inv-table tr:not(.letter-row) > td.inv-due { grid-column:1 / -1; grid-row:3; font-size:12px; color:var(--muted); }
  .inv-table td.inv-due::before { content:attr(data-label) ': '; }
}
@media (max-width:640px) { .inv-table .hide-sm { display:none !important; } }

/* a table as a list of cards on a phone (public/js/stack.js marks the tables and fills in the labels) */
@media (max-width:640px) {
  table.stack-table, table.stack-table tbody { display:block; width:100%; }
  table.stack-table thead { display:none; }
  table.stack-table tr { display:block; padding:8px 4px; border-top:1px solid var(--line); }
  table.stack-table tr.letter-row, table.stack-table tr.pay-head, table.stack-table tr[data-filter-follow] { padding:0; }
  table.stack-table th, table.stack-table td { display:flex; justify-content:space-between; align-items:baseline; gap:10px; border:0; padding:2px 0; text-align:left; min-width:0; max-width:none; width:auto; }
  table.stack-table th[scope="row"], table.stack-table tr > th:first-child { font-size:15px; }
  table.stack-table td[data-label]::before, table.stack-table th[data-label]::before { content:attr(data-label); color:var(--muted); font-size:12px; font-weight:600; flex:none; max-width:42%; }
  table.stack-table td[data-label] > *:not(.badge):not(a):not(button):not(form):not(span) { text-align:right; }
  table.stack-table td.num { text-align:right; }
  table.stack-table td:empty { display:none; }
  table.stack-table td[colspan], table.stack-table th[colspan] { display:block; }
  table.stack-table td[data-label=""]::before, table.stack-table th[data-label=""]::before { content:none; }
  table.stack-table colgroup { display:none; }
}

/* the actions of a document: small pills in one row, the opened form beneath them across the whole cell, everything to the left */
.doc-actions { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:flex-start; text-align:left; }
.doc-actions .pay-detail { margin:0; }
.doc-actions .pay-detail > summary { border:1px solid var(--line); border-radius:16px; padding:2px 12px; background:var(--card); min-height:30px; }
.doc-actions .pay-detail[open] { flex:1 1 100%; }
.doc-actions .pay-detail[open] > summary { margin-bottom:8px; }
.doc-actions .pay-detail form { align-items:flex-start; text-align:left; min-width:0; max-width:340px; }
.doc-actions .pay-detail form label { display:flex; flex-direction:column; gap:4px; }
.doc-actions .pay-detail form label.row { flex-direction:row; align-items:center; }
.doc-actions .pay-detail form .note { text-align:left; }
.doc-actions form.doc-del { margin:0; }
.doc-actions { flex:1 1 auto; justify-content:flex-start; min-width:0; }
.doc-actions .pay-detail[open] > summary { display:inline-flex; }
table.stack-table td .doc-actions, .doc-actions { text-align:left !important; }
@media (max-width:640px) {
  table.stack-table td[data-empty] { display:none; }
  .doc-actions .pay-detail > summary, .doc-actions .btn { white-space:nowrap; }
}

/* the "+ Kopie" before a button never touches it */
.cc-add { margin:0 8px 8px 0; vertical-align:top; }
.vat-form { margin-bottom:6px; }
.vat-form + .row { margin-top:6px; }
/* the label of a bar stays inside the chart, the hover frame is a quiet rounded one */
.svg .cat .hit { rx:8; ry:8; }
@media (max-width:640px) { .svg .lab { font-size:11.5px; } }
.doc-actions .pay-detail > summary, .doc-actions .btn { white-space:nowrap; }

/* "Do plánu" / "Do odpisů": a small pill in the row, the form in a window */
.doc-pill { border:1px solid var(--line); border-radius:16px; padding:2px 12px; min-height:30px; background:var(--card); color:var(--accent); font:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.doc-pill:hover, .doc-pill:focus-visible { border-color:var(--accent); }
dialog.doc-act { border:1px solid var(--line); border-radius:14px; padding:16px 18px; background:var(--card); color:var(--ink); width:min(420px, 92vw); box-shadow:0 20px 60px rgba(21,32,27,.3); }
dialog.doc-act::backdrop { background:rgba(21,32,27,.45); }
dialog.doc-act form { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
dialog.doc-act label { display:flex; flex-direction:column; gap:4px; }
dialog.doc-act label.row { flex-direction:row; align-items:center; }

/* the amount of a document is corrected right in the list */
.doc-amt-form { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; margin:0; }
.doc-amt-form .amt-in { width:112px; padding:6px 8px; text-align:right; font:inherit; border:1px solid transparent; background:transparent; border-radius:8px; }
.doc-amt-form .amt-in:hover, .doc-amt-form .amt-in:focus { border-color:var(--line, #d0d5dd); background:var(--card, #fff); }

/* the two small buttons of a document: the month it counts in, and in or out of the costs */
.doc-icons { display:inline-flex; align-items:center; gap:6px; }
.doc-icons form { margin:0; }
.icon-btn.cal, .icon-btn.in, .icon-btn.out { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; padding:0; border-radius:10px; border:1px solid var(--line); background:var(--card); cursor:pointer; }
.icon-btn.cal { color:var(--accent); }
.icon-btn.in { color:#1a7f4b; border-color:#9fd4b6; background:#eaf7ef; }
.icon-btn.out { color:#667085; background:#f2f4f7; }
.icon-btn.cal:hover, .icon-btn.in:hover, .icon-btn.out:hover { border-color:var(--accent); }
.doc-who-form .who-in { width:100%; min-width:130px; padding:6px 8px; font:inherit; border:1px solid transparent; background:transparent; border-radius:8px; }
.doc-who-form .who-in:hover, .doc-who-form .who-in:focus { border-color:var(--line, #d0d5dd); background:var(--card, #fff); }
.doc-amt-form .cur-in { width:54px; padding:6px 6px; text-transform:uppercase; font:inherit; border:1px solid transparent; background:transparent; border-radius:8px; }
.doc-amt-form .cur-in:hover, .doc-amt-form .cur-in:focus { border-color:var(--line, #d0d5dd); background:var(--card, #fff); }

/* the explanation of a small button appears at once when the mouse is over it */
.icon-btn[data-tip] { position:relative; }
.icon-btn[data-tip]:hover::after, .icon-btn[data-tip]:focus-visible::after { content:attr(data-tip); position:absolute; right:0; bottom:calc(100% + 8px); z-index:30; width:max-content; max-width:260px; padding:8px 10px; border-radius:8px; background:#1b1f23; color:#fff; font-size:13px; font-weight:500; line-height:1.35; text-align:left; white-space:normal; pointer-events:none; box-shadow:0 6px 18px rgba(0,0,0,.25); }

/* a field of the list that is being saved, was saved, or was not */
.saving { opacity:.6; }
.saved { box-shadow:0 0 0 2px #1a7f4b inset !important; border-color:#1a7f4b !important; transition:box-shadow .2s; }
.save-err { box-shadow:0 0 0 2px #b42318 inset !important; border-color:#b42318 !important; }

/* the invoices to pay: two blocks, the waiting ones orange and the done ones green */
.pay-sec { border:1px solid var(--line); border-left-width:6px; border-radius:14px; padding:16px 18px; background:var(--card); display:flex; flex-direction:column; gap:10px; }
.pay-sec.wait { border-left-color:#f59331; background:linear-gradient(180deg, #fff7ec, var(--card) 140px); }
.pay-sec.done { border-left-color:#1a7f4b; background:linear-gradient(180deg, #eef9f2, var(--card) 140px); }
.pay-sec-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.pay-sec-head h3 { margin:0; }
.pay-chip { padding:5px 12px; border-radius:999px; font-weight:700; font-size:14px; }
.pay-chip.wait { background:#ffe7c7; color:#9a5200; }
.pay-chip.done { background:#d3f0de; color:#14633b; }
/* the sections and the cards of the invoices to pay on a dark page: dark tints, light text */
html[data-theme="dark"] .pay-sec.wait { background:linear-gradient(180deg, #3b2a12, var(--card) 140px); }
html[data-theme="dark"] .pay-sec.done { background:linear-gradient(180deg, #12301f, var(--card) 140px); }
html[data-theme="dark"] .pay-chip.wait { background:#4f3615; color:#ffcf94; }
html[data-theme="dark"] .pay-chip.done { background:#15432b; color:#a6e6c0; }
.order-card.is-wait { border-color:#f4c58a; background:#fffdfa; }
.order-card.is-done { border-color:#a7dcbc; background:#fbfffc; }
html[data-theme="dark"] .order-card.is-wait { border-color:#7a5a2e; background:#241d12; }
html[data-theme="dark"] .order-card.is-done { border-color:#2f6a4b; background:#122019; }

/* the line of a month in the list of documents: the sum, what is outside the costs, and the kinds of the documents as small chips */
.month-toggle { flex-wrap:wrap; row-gap:6px; }
.mh-total { font-weight:500; font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; }
.mh-kinds { display:inline-flex; flex-wrap:wrap; gap:6px; }
.mh-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:500; background:#eef1f4; color:#475467; }
.mh-chip b { font-weight:500; font-variant-numeric:tabular-nums; }
.mh-chip.out { background:#fde9e7; color:#a1281c; }
.mh-chip.kind-invoice { background:#e3f1fb; color:#14578a; }
.mh-chip.kind-proforma { background:#ffecd2; color:#9a5200; }
.mh-chip.kind-advance_tax { background:#ece6fb; color:#5a35a8; }
.mh-chip.kind-credit { background:#e8efe8; color:#3f5f3f; }
.mh-chip.zero { opacity:.45; }
tr.month-head { background:linear-gradient(90deg, #e9f3ee, #eef3fb); }
html[data-theme="dark"] .mh-chip { background:#2a323a; color:#c7d0d9; }
html[data-theme="dark"] .mh-chip.out { background:#4a2320; color:#ffb4ab; }
html[data-theme="dark"] .mh-chip.kind-invoice { background:#17364b; color:#9fd0f2; }
html[data-theme="dark"] .mh-chip.kind-proforma { background:#4a3416; color:#ffcf8a; }
html[data-theme="dark"] .mh-chip.kind-advance_tax { background:#34285a; color:#cdbcf5; }
html[data-theme="dark"] .mh-chip.kind-credit { background:#26382a; color:#b9d6bb; }
html[data-theme="dark"] tr.month-head { background:linear-gradient(90deg, #1d2d27, #1f2a3a); }

.mh-cell { vertical-align:middle; }
.mh-cell .mh-chip { margin:2px 4px 2px 0; }
td.num.mh-cell { text-align:right; }

.kind-cell { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.kind-cell .doc-pill { margin:0; }
.mh-chip.cat { background:#e8f3ee; color:#1f6b4a; }
html[data-theme="dark"] .mh-chip.cat { background:#1f3a2e; color:#a8dcc0; }

/* the window of the final invoice of an advance: a searched list */
.settle-list { display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; padding:2px; }
.settle-opt { text-align:left; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font:inherit; cursor:pointer; display:flex; flex-direction:column; gap:2px; }
.settle-opt .note { margin:0; }
.settle-opt:hover { border-color:var(--accent); }
.settle-opt.on { border-color:#1a7f4b; background:#eaf7ef; }
.settle-opt[hidden] { display:none; }

/* the categories that are not a cost of the company have their own colours in the line of a month */
.mh-chip.cat.cat-private { background:#fde9e7; color:#a1281c; }
.mh-chip.cat.cat-investment { background:#e5eaf7; color:#34508f; }
html[data-theme="dark"] .mh-chip.cat.cat-private { background:#4a2320; color:#ffb4ab; }
html[data-theme="dark"] .mh-chip.cat.cat-investment { background:#22304f; color:#b5c8f5; }

/* "Měsíc v rozpočtu" under an amount: a coloured chip, so that it is not taken for a part of the amount */
.mh-chip.ev-note { background:#e0f4f1; color:#0f6b5f; font-family:inherit; margin-top:4px; }
html[data-theme="dark"] .mh-chip.ev-note { background:#173b36; color:#9be0d4; }

/* the detail of a customer or a supplier */
.party-search { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.party-search input[type="search"] { flex:1 1 240px; min-width:0; }
.party-years { display:flex; flex-wrap:wrap; gap:8px; }
.party-years .chip { display:inline-flex; flex-wrap:wrap; gap:4px 14px; padding:4px 14px; border-radius:999px; background:#eef1f4; color:#475467; text-decoration:none; font-size:14px; }
.party-years .chip.on { background:var(--accent); color:#fff; }
html[data-theme="dark"] .party-years .chip { background:#2a323a; color:#c7d0d9; }
a.chart-link { cursor:pointer; }
a.chart-link:hover .arc, a.chart-link:hover path { opacity:.85; }

/* a line of figures over a group: coloured pills with the names, the values plain. The line fills the whole width of the bar, in columns
   that share the free width equally and are never narrower than what is in them, whatever the width of the page */
.sum-line { flex:1 1 auto; width:100%; display:grid; grid-template-columns:repeat(var(--n, 3), minmax(max-content, 1fr)); justify-content:stretch; justify-items:start; align-items:center; gap:8px 28px; min-width:0; }
@media (max-width:760px) { .sum-line { grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); justify-content:stretch; } }
.sum-item { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-weight:400; }
.sum-val { font-variant-numeric:tabular-nums; font-weight:400; }
.sum-chip { display:inline-flex; align-items:center; justify-content:center; min-width:12ch; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:500; }
.sum-chip.tone-0 { background:#e3f1fb; color:#14578a; }
.sum-chip.tone-1 { background:#e5f4e8; color:#25693a; }
.sum-chip.tone-2 { background:#ece6fb; color:#5a35a8; }
.sum-chip.tone-3 { background:#ffecd2; color:#9a5200; }
.sum-chip.tone-4 { background:#e0f4f1; color:#0f6b5f; }
.sum-chip.tone-5 { background:#fbe6ee; color:#9b2c57; }
html[data-theme="dark"] .sum-chip.tone-0 { background:#17364b; color:#9fd0f2; }
html[data-theme="dark"] .sum-chip.tone-1 { background:#1f3a27; color:#a9dcb6; }
html[data-theme="dark"] .sum-chip.tone-2 { background:#34285a; color:#cdbcf5; }
html[data-theme="dark"] .sum-chip.tone-3 { background:#4a3416; color:#ffcf8a; }
html[data-theme="dark"] .sum-chip.tone-4 { background:#173b36; color:#9be0d4; }
html[data-theme="dark"] .sum-chip.tone-5 { background:#4a2036; color:#f3b3cf; }
.month-toggle.spread { width:100%; }
tr.letter-row td .sum-line { padding:2px 0; }
tr.letter-row td .sum-val { color:var(--ink); font-weight:400; letter-spacing:0; }

/* the same kind of button has the same colour all over the app: delete red, edit green, done / handled teal, remind purple */
.btn.danger, .btn.danger.sm, form[action*="/delete"] .btn, .btn[formaction*="/delete"] { background:#fde9e7; color:#a1281c; border:1px solid #f1b7b0; }
.btn.danger:hover, form[action*="/delete"] .btn:hover, .btn[formaction*="/delete"]:hover { background:#fbd7d2; filter:none; }
.btn[data-edit], .btn[data-party-edit], a.btn[href*="/edit"], .btn.edit { background:#e5f4e8; color:#25693a; border:1px solid #a9d8b7; }
.btn[data-edit]:hover, .btn[data-party-edit]:hover, a.btn[href*="/edit"]:hover, .btn.edit:hover { background:#d3ecd9; filter:none; }
form[action*="/paid"] .btn:not(.secondary), form[action*="/done"] .btn:not(.secondary), form[action*="/auto-done"] .btn:not(.secondary), form[action*="/costs/pay/"] .btn:not(.secondary), .btn.done { background:#e0f4f1; color:#0f6b5f; border:1px solid #9fd6cc; }
form[action*="/paid"] .btn:not(.secondary):hover, form[action*="/done"] .btn:not(.secondary):hover, form[action*="/costs/pay/"] .btn:not(.secondary):hover, .btn.done:hover { background:#cdece7; filter:none; }
html[data-theme="dark"] .btn.danger, html[data-theme="dark"] .btn.danger.sm, html[data-theme="dark"] form[action*="/delete"] .btn, html[data-theme="dark"] .btn[formaction*="/delete"] { background:#4a2320; color:#ffb4ab; border-color:#7a3a35; }
html[data-theme="dark"] .btn[data-edit], html[data-theme="dark"] .btn[data-party-edit], html[data-theme="dark"] a.btn[href*="/edit"], html[data-theme="dark"] .btn.edit { background:#1f3a27; color:#a9dcb6; border-color:#3d6a4b; }
html[data-theme="dark"] form[action*="/paid"] .btn:not(.secondary), html[data-theme="dark"] form[action*="/done"] .btn:not(.secondary), html[data-theme="dark"] form[action*="/auto-done"] .btn:not(.secondary), html[data-theme="dark"] form[action*="/costs/pay/"] .btn:not(.secondary), html[data-theme="dark"] .btn.done { background:#173b36; color:#9be0d4; border-color:#2f6a60; }

/* the form of a document in the detail of a firm: the fields in a grid over the whole width, the same height */
.party-edit-form { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px 16px; align-items:end; width:100%; }
.party-edit-form label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted, inherit); min-width:0; }
.party-edit-form input, .party-edit-form select { width:100%; min-height:40px; box-sizing:border-box; }
.party-edit-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
/* the name of the group has the same width in every row, so that the figures start at the same place */
.month-toggle.spread > b { flex:0 0 150px; }
.month-toggle.spread > b.mh-name { flex-basis:96px; }
.month-toggle.spread { flex-wrap:nowrap; }

/* the years of a firm: a row for each, the figures as in the other lines of figures */
.party-years { flex-direction:column; gap:8px; }
.party-year { display:block; padding:8px 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); text-decoration:none; }
.party-year:hover { border-color:var(--accent); }
.party-year.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, var(--card)); }

.party-title { margin:16px 0 4px; padding:0 4px; }

/* the colour of the white buttons by what they do (the class is given when the page is put together, see src/views/buttonTone.ts) */
.btn.secondary.bt-del { background:#fde9e7; color:#a1281c; border-color:#f1b7b0; }
.btn.secondary.bt-edit { background:#e5f4e8; color:#25693a; border-color:#a9d8b7; }
.btn.secondary.bt-done { background:#e0f4f1; color:#0f6b5f; border-color:#9fd6cc; }
.btn.secondary.bt-back { background:#fff1d6; color:#8a5a00; border-color:#f0d49a; }
.btn.secondary.bt-out { background:#e8eaf9; color:#3d4a9a; border-color:#bcc3ee; }
.btn.secondary.bt-add { background:#e3f1fb; color:#14578a; border-color:#a8d0ee; }
.btn.secondary.bt-del:hover, .btn.secondary.bt-edit:hover, .btn.secondary.bt-done:hover, .btn.secondary.bt-back:hover, .btn.secondary.bt-out:hover, .btn.secondary.bt-add:hover { filter:brightness(.96); }
html[data-theme="dark"] .btn.secondary.bt-del { background:#4a2320; color:#ffb4ab; border-color:#7a3a35; }
html[data-theme="dark"] .btn.secondary.bt-edit { background:#1f3a27; color:#a9dcb6; border-color:#3d6a4b; }
html[data-theme="dark"] .btn.secondary.bt-done { background:#173b36; color:#9be0d4; border-color:#2f6a60; }
html[data-theme="dark"] .btn.secondary.bt-back { background:#4a3416; color:#ffcf8a; border-color:#7a5a2a; }
html[data-theme="dark"] .btn.secondary.bt-out { background:#252b52; color:#bcc3f5; border-color:#444d8a; }
html[data-theme="dark"] .btn.secondary.bt-add { background:#17364b; color:#9fd0f2; border-color:#2e5a7a; }

summary.sum-summary { display:flex; align-items:center; }
summary.sum-summary .sum-line { width:100%; }

/* a button that is only an icon, with its name shown at once over it */
.btn.icon-only { min-width:34px; width:34px; min-height:34px; padding:0; gap:0; position:relative; }
.btn.icon-only svg { display:block; }
[data-hint] { position:relative; }
[data-hint]:hover::after, [data-hint]:focus-visible::after { content:attr(data-hint); position:absolute; right:0; bottom:calc(100% + 8px); z-index:60; width:max-content; max-width:260px; padding:8px 10px; border-radius:8px; background:#1b1f23; color:#fff; font-size:13px; font-weight:500; line-height:1.35; text-align:left; white-space:normal; pointer-events:none; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.cc-add { align-self:center; }
.reminder-actions .cc-add, .row .cc-add { margin:0; vertical-align:middle; }
/* a form with a copy field and its button (the notice of the VAT, the e-mails of the app): side by side while they fit */
form:has(> details.cc-add) { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.month-bar.spread > b { flex:0 0 150px; }
.month-bar.spread { width:100%; }

.btn.secondary.bt-asset { background:#fbe6ee; color:#9b2c57; border-color:#f0b8ce; }
.btn.secondary.bt-plan { background:#e0f2fa; color:#0b6a8c; border-color:#a5d4e8; }
html[data-theme="dark"] .btn.secondary.bt-asset { background:#4a2036; color:#f3b3cf; border-color:#7a3a58; }
html[data-theme="dark"] .btn.secondary.bt-plan { background:#12384a; color:#9bd6ee; border-color:#2e6580; }
/* the actions of a document in a row, small icon buttons side by side */
.doc-actions { display:flex; flex-wrap:nowrap; align-items:center; gap:6px; }
.doc-actions form { margin:0; }

/* the months of the invoices roll up like the months of the documents */
tbody[data-inv-month].collapsed > tr:not(.letter-row) { display:none; }
tr.letter-row .month-toggle { color:inherit; font-weight:inherit; letter-spacing:inherit; width:100%; }

/* a cost paid from a loan */
.icon-btn.loan { color:var(--muted, #667085); }
.icon-btn.loan.on { background:#fff1d6; border-color:#f0d49a; color:#8a5a00; }
html[data-theme="dark"] .icon-btn.loan.on { background:#4a3416; border-color:#7a5a2a; color:#ffcf8a; }
form.doc-loan-form { margin:0; display:inline-flex; }

/* the buttons of a document stand close in one row: the two cells (the toggles and the actions) have no space between them */
td.doc-icons-cell { padding-right:0; }
td.doc-actions-cell { padding-left:6px; }
.doc-icons { gap:6px; }

/* the kind of VAT of a document that has no VAT in it: a small pill under the amount (not the class of the field of a VAT note) */
.mh-chip.vat-kind { margin-top:4px; }
.mh-chip.vat-kind.vat-none { background:#eef1f4; color:#344054; }
.mh-chip.vat-kind.vat-rpdp { background:#ece6fb; color:#5a35a8; }
html[data-theme="dark"] .mh-chip.vat-kind.vat-none { background:#2a323a; color:#c7d0d9; }
html[data-theme="dark"] .mh-chip.vat-kind.vat-rpdp { background:#34285a; color:#cdbcf5; }

/* "Paid from a loan" in the form of sorting: the box and its words on one line, over the whole width */
.inbox-grid label.inbox-loan { grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; font-size:14px; }
.inbox-grid label.inbox-loan input[type=checkbox] { width:22px; height:22px; min-height:0; flex:0 0 auto; margin:0; }

.btn.secondary.bt-end { background:#fff1d6; color:#8a5a00; border-color:#f0d49a; }
html[data-theme="dark"] .btn.secondary.bt-end { background:#4a3416; color:#ffcf8a; border-color:#7a5a2a; }
/* a row under a row of a list, opened by the button Edit */
tr.row-edit > td { background:color-mix(in srgb, var(--accent) 5%, var(--card)); padding:12px 14px; }

/* the window Edit of a document: the fields in a grid, the note and the buttons over the whole width */
/* (a form in the window is a column by the rule of the window: here it is the grid, and the window is wider) */
.doc-edit-form, dialog.doc-act form.doc-edit-form { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px 16px; align-items:end; min-width:0; }
dialog.doc-act.wide { width:min(760px, 94vw); }
.doc-act-head { display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:space-between; gap:12px; }
.doc-act-head > b { flex:1 1 auto; min-width:0; font-size:17px; line-height:1.3; padding-top:5px; }
.doc-act-head > .btn { flex:0 0 auto; }
.doc-edit-form label { display:flex; flex-direction:column; gap:4px; font-size:13px; min-width:0; }
.doc-edit-form input, .doc-edit-form select { width:100%; min-height:40px; box-sizing:border-box; }
.doc-edit-form .doc-edit-wide, .doc-edit-actions { grid-column:1 / -1; }
.doc-edit-actions { display:flex; flex-wrap:wrap; gap:10px; }

/* a line of a check whose document was just changed in the window Edit; the row of the list that was looked for ("Find in the list") */
tr.row-saved > td { background:color-mix(in srgb, #1a7f4b 12%, var(--card)); transition:background .3s; }
@keyframes docflash { 0% { box-shadow:inset 0 0 0 3px var(--accent); background:color-mix(in srgb, var(--accent) 24%, var(--card)); } 100% { box-shadow:inset 0 0 0 3px transparent; background:transparent; } }
tr.doc-flash > td { animation:docflash 3s ease-out; }
/* the proposed corrections of a check: the box in the first column is small, the numbers are on the right */
.co-plan table th:first-child, .co-plan table td:first-child { width:34px; text-align:center; }
.co-plan input[type=checkbox] { width:20px; height:20px; min-height:0; margin:0; }

/* the state of an invoice in the list with the button that marks it as paid beside it */
.inv-state { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; white-space:nowrap; }

/* on a phone the figures of a month go under its name (the line of a month does not fit in one row), and the cell of the actions is as wide as the card */
@media (max-width:760px) {
  .month-toggle.spread { flex-wrap:wrap; }
  .month-toggle.spread .sum-line { flex:1 1 100%; width:100%; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
  tbody.month-group > tr.month-head > td.month-act { width:auto; position:static; }
}

/* a field with a smaller text makes the iPhone zoom into the page when it is touched: on a phone the text of the fields is 16 px */
@media (max-width:640px) {
  input[type=text], input[type=email], input[type=date], input[type=number], input[type=search], input[type=password], input[type=tel], input[type=url], input:not([type]), select, select.compact, textarea, textarea.tpl-text, input.compact { font-size:16px; }
}

/* small things that are touched with a finger get a taller place to touch */
@media (max-width:640px) {
  table.stack-table td a:not(.btn) { display:inline-block; padding:6px 0; }
  .reminder-title, a.cal-item { padding-top:6px; padding-bottom:6px; }
  details > summary.btn.sm, summary.btn.sm { min-height:36px; display:inline-flex; align-items:center; }
  button.acc-copy { min-width:36px; min-height:36px; }
}

/* a field in a card of a table takes the rest of its line and does not push the card wider than the page */
@media (max-width:640px) {
  table.stack-table td > input:only-child:not([type=checkbox]):not([type=radio]), table.stack-table td > select:only-child { flex:1 1 0; min-width:0; width:auto; max-width:100%; }
}

/* nothing in a card is wider than the card on a phone: the plans, the chips and the figures, the text of an e-mail */
@media (max-width:640px) {
  table.plans-table.stack-table { min-width:0; table-layout:auto; }
  .sum-item { white-space:normal; flex-wrap:wrap; }
  .mh-chip { max-width:100%; }
  .mail-body { white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; }
  table.stack-table td details, table.stack-table td summary { min-width:0; max-width:100%; overflow-wrap:break-word; }
}

/* the long heading of a card of a table (a name, an address) wraps instead of being cut at the edge */
@media (max-width:640px) {
  table.stack-table th, table.stm.stack-table tbody th, tr.stm-row th { white-space:normal; overflow-wrap:anywhere; }
  table.stack-table td { white-space:normal; overflow-wrap:break-word; }
  table.stack-table td.num, table.stack-table th.num { white-space:nowrap; }
}

/* a cell with more than one thing in it (a field and a chip, a field and a note): what does not fit goes to the next line instead of being squeezed */
@media (max-width:640px) {
  table.stack-table td:has(> * + *) { flex-wrap:wrap; }
  table.stack-table td > .mh-chip { white-space:nowrap; }
}

/* a list or a form inside a card of a table is never wider than the card */
@media (max-width:640px) {
  table.stack-table td select, table.stack-table td form, table.stack-table td input:not([type=checkbox]):not([type=radio]) { max-width:100%; min-width:0; box-sizing:border-box; }
}

/* the fields of a card of a table all start at the same place: the names before them are of one width */
@media (max-width:640px) {
  table.stack-table td[data-label]:has(> input:only-child:not([type=checkbox]):not([type=radio]))::before,
  table.stack-table td[data-label]:has(> select:only-child)::before { flex:0 0 36%; max-width:36%; }
}