/* Faktury CORE. Barvy se řídí ikonou, kterou si uživatel vybral (data-palette na html). */
:root {
  color-scheme: light dark;
  --brand-a: #ffa028; --brand-b: #f03c82; --neon: #ffec3c;
  --accent: #c42d63; --accent-ink: #ffffff; --accent-soft: #fde8ef;
  --bg: #f4f3f8; --surface: #ffffff; --surface-2: #f8f7fc; --ink: #1d1b2e; --muted: #625d7c; --line: #e6e3f0; --line-strong: #d4d0e4;
  --side: #1b1830; --side-ink: #d9d5ee; --side-muted: #9b95bf; --side-hover: #ffffff14; --side-active: #ffffff24;
  --good: #16794a; --good-soft: #e1f4e9; --warn: #8a5a00; --warn-soft: #fdf1d6; --bad: #b4232f; --bad-soft: #fde7e9;
  --brand: linear-gradient(135deg, var(--brand-a), var(--brand-b));
  --r: 12px; --r-lg: 20px; --shadow: 0 1px 2px rgb(27 24 48 / .05), 0 4px 16px rgb(27 24 48 / .05);
  --font: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}
:root[data-palette=more] { --brand-a: #12c8b6; --brand-b: #1078e6; --neon: #ff3366; --accent: #0b67c9; --accent-soft: #e2effc; }
:root[data-palette=party] { --brand-a: #9646ff; --brand-b: #ff46aa; --neon: #3cffc8; --accent: #7535de; --accent-soft: #efe7fd; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode=light]) {
    --bg: #12111d; --surface: #1c1a2c; --surface-2: #232136; --ink: #ecebf6; --muted: #a9a4c4; --line: #2e2b45; --line-strong: #3d3a58;
    --side: #0d0c16; --accent-ink: #14121f;
    --good: #6fd69c; --good-soft: #173527; --warn: #f0c35a; --warn-soft: #3a2f14; --bad: #ff8d97; --bad-soft: #43202a;
    --accent: #ff8ab4; --accent-soft: #3f1d2e;
  }
  :root[data-palette=more]:not([data-mode=light]) { --accent: #6db7ff; --accent-soft: #15304d; }
  :root[data-palette=party]:not([data-mode=light]) { --accent: #bd94ff; --accent-soft: #2f2150; }
}
:root[data-mode=light] { color-scheme: light; }
:root[data-mode=dark] {
  color-scheme: dark;
  --bg: #12111d; --surface: #1c1a2c; --surface-2: #232136; --ink: #ecebf6; --muted: #a9a4c4; --line: #2e2b45; --line-strong: #3d3a58;
  --side: #0d0c16; --accent-ink: #14121f;
  --good: #6fd69c; --good-soft: #173527; --warn: #f0c35a; --warn-soft: #3a2f14; --bad: #ff8d97; --bad-soft: #43202a;
  --accent: #ff8ab4; --accent-soft: #3f1d2e;
}
:root[data-mode=dark][data-palette=more] { --accent: #6db7ff; --accent-soft: #15304d; }
:root[data-mode=dark][data-palette=party] { --accent: #bd94ff; --accent-soft: #2f2150; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 2px; }
h1 { font-size: 26px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 18px; }
h2 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin: 32px 0 12px; }
h3 { font-size: 16px; font-weight: 700; }
h2[id] { scroll-margin-top: 90px; }
.muted { color: var(--muted); }
.bad-text { color: var(--bad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.head h1 { margin: 0; }
.empty { color: var(--muted); padding: 22px; text-align: center; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--bad); color: #ffffff; font-size: 12px; font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 8px; }
.card { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.card span, .card small { color: var(--muted); }
.card span { font-size: 13px; font-weight: 600; }
.card strong { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
a.card:hover { border-color: var(--accent); }
.card.alert { border-color: var(--bad); }
.table { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; background: var(--surface-2); }
th, td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.badge.paid { background: var(--good-soft); color: var(--good); }
.badge.partial, .badge.overpaid, .badge.unpaid { background: var(--warn-soft); color: var(--warn); }
.badge.overdue { background: var(--bad-soft); color: var(--bad); }
.badge.cancelled { color: var(--muted); text-decoration: line-through; }
.flash { padding: 12px 16px; border-radius: var(--r); margin: 0 0 18px; font-weight: 500; }
.flash.ok { background: var(--good-soft); color: var(--good); }
.flash.bad { background: var(--bad-soft); color: var(--bad); }
.flash.warn { background: var(--warn-soft); color: var(--warn); }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); }
label.check { flex-direction: row; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 500; }
input, select, textarea { width: 100%; min-height: 42px; padding: 9px 12px; font: inherit; font-weight: 400; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
input[type=checkbox], input[type=radio] { width: 18px; min-height: 18px; accent-color: var(--accent); }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 16px; font: inherit; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; text-decoration: none; cursor: pointer; transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s, filter .12s; }
button:not(:disabled):hover, .button:hover { background: var(--accent-soft); border-color: var(--accent); }
button:not(:disabled):active, .button:active { transform: translateY(1px); }
.primary { background: var(--brand); border-color: transparent; color: #ffffff; font-weight: 700; box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-b) 30%, transparent); }
.primary:not(:disabled):hover { background: var(--brand); border-color: transparent; color: #ffffff; filter: brightness(1.07) saturate(1.05); }
.danger { color: var(--bad); }
.danger:not(:disabled):hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.ghost { background: transparent; border-color: transparent; }
button:disabled { opacity: .5; cursor: default; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack > button { align-self: flex-start; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.grid .wide { grid-column: 1 / -1; }
main > form.stack, main > .stack { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.ares-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ares-row label { flex: 0 1 220px; }
.ares-status { margin: -6px 0 0; font-size: 14px; color: var(--muted); }
.ares-status:empty { display: none; }
.ares-status.bad-text { color: var(--bad); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.inline label { flex: 1 1 180px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.row-actions form { display: flex; gap: 6px; }
.row-actions select { min-width: 180px; }
#items td { padding: 6px; }
#items input { min-width: 80px; }
#items td:first-child input { min-width: 200px; }
.total { margin: 0; text-align: right; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 0 0 20px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.facts dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
.plain { padding-left: 18px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; padding: 4px; width: fit-content; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.tabs a { padding: 7px 14px; border-radius: 9px; color: var(--muted); font-weight: 600; text-decoration: none; }
.tabs a:hover { color: var(--ink); background: var(--surface-2); }
.tabs a.active { background: var(--accent-soft); color: var(--accent); }
.state { display: inline-flex; }
.state.paid { color: var(--good); }
.state.unpaid, .state.cancelled, .sent { color: var(--muted); }
.state.partial, .state.overpaid { color: var(--warn); }
.state.overdue { color: var(--bad); }
.list-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.search { position: relative; flex: 0 1 340px; }
.search .icon { position: absolute; left: 12px; top: 11px; color: var(--muted); }
.search input[type=search] { padding-left: 40px; }
.bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.export { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.export select, .export input[type=date] { width: auto; }
.export label { flex-direction: row; gap: 6px; align-items: center; }
.list th, .list td { padding: 9px 12px; white-space: nowrap; }
.list tbody tr:hover { background: var(--surface-2); }
.list .pick { width: 36px; }
.list .clip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.list input[type=checkbox] { width: 18px; min-height: 18px; }
.row-tools { display: flex; gap: 2px; align-items: center; }
.tool { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-height: 0; padding: 0; color: var(--accent); background: transparent; border: 1px solid transparent; border-radius: 9px; }
.tool:not(:disabled):hover { background: var(--accent-soft); border-color: transparent; }
.list-total { margin-top: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.sent.yes { color: var(--good); }
.sent.no { color: var(--muted); opacity: .35; }
body.readonly form[method=post]:not(.always), body.readonly #bulk-form, body.readonly #statement-form, body.readonly .edit-only, body.readonly .list .pick, body.readonly a[href="/invoices/new"] { display: none; }
body.bare { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 16px; }
.auth-card { width: 100%; max-width: 420px; margin: 0; padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.auth-card .brand { margin: 0 0 12px; font-size: 22px; font-weight: 800; }
.auth-card button.primary { justify-content: center; align-self: stretch; }
td.row-actions, td.row-tools { display: table-cell; }
td.row-actions > form, td.row-tools > form, td.row-tools > a, td.row-tools > button { display: inline-flex; vertical-align: middle; margin: 2px; }
td.row-tools { white-space: nowrap; }
td.row-actions input[type=password] { width: 170px; }
form.row-actions { flex-wrap: nowrap; }
form.row-actions select { width: auto; min-width: 120px; }

.client { margin-bottom: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.client.blocked { border-color: var(--bad); }
.client h3 { margin: 0; font-size: 16px; }
.client header p { margin: 2px 0 8px; font-size: 14px; }
.firm-list { list-style: none; margin: 0; padding: 0; }
.firm-list li { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.client-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.inline-form { display: flex; gap: 6px; }
.inline-form input { width: 190px; }
.checks { list-style: none; margin: 0 0 12px; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.check { display: grid; grid-template-columns: 24px minmax(150px, 1fr) minmax(120px, 2fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.check:last-child { border-bottom: 0; }
.check-label { font-weight: 600; }
.check-detail, .check-state { color: var(--muted); font-size: 14px; }
.check.good .icon { color: var(--good); }
.check.warning .icon { color: var(--warn); }
.check.critical .icon { color: var(--bad); }
.chart-card { padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.chart { display: block; width: 100%; height: auto; max-height: 340px; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-text { fill: var(--muted); font-size: 12px; }
.chart-value { fill: var(--ink); font-size: 12px; font-weight: 600; }
.chart-bar { fill: var(--accent); }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.chart-hit { fill: transparent; }
.chart-hit:hover { fill: var(--accent-soft); fill-opacity: .35; }
.chart-tip { position: fixed; z-index: 10; padding: 4px 8px; font-size: 13px; color: var(--surface); background: var(--ink); border-radius: 4px; pointer-events: none; }
.data-view { margin-top: 8px; font-size: 14px; }
.data-view summary { cursor: pointer; color: var(--muted); }
@media (max-width: 640px) { .check { grid-template-columns: 24px 1fr; } .check-state { display: none; } }

.module-form { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; }
.module-form label.check { font-size: 14px; }
.module-form input[type=checkbox] { width: auto; min-height: 0; }
.phone-list { list-style: none; margin: 0 0 12px; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.phone-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 12px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.phone-list li:first-child { border-top: 0; }
.op-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 12px; }
.op-add label { flex: 0 1 340px; }
.op-row { display: flex; gap: 6px; }
.op-row select, .op-row input { min-width: 150px; }
.op-bill-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.op-settings { margin: 12px 0; }
fieldset.plain { margin: 0; padding: 0; border: 0; min-width: 0; }
input.amount { width: 110px; min-height: 34px; padding: 4px 8px; text-align: right; }
fieldset[disabled] input, fieldset[disabled] select { color: var(--muted); background: transparent; }
.op-sum { display: grid; grid-template-columns: max-content max-content; gap: 2px 20px; justify-content: end; margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.op-sum dt { color: var(--muted); }
.op-sum dd { margin: 0; text-align: right; }
.operator-mark { display: inline-flex; vertical-align: -4px; margin-right: 6px; color: var(--ink); }
.coef-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.coef-row label { flex: 0 1 110px; }
.grid .coef-row { grid-column: 1 / -1; }
.sent.wait { color: var(--warn); }
.sent.failed { color: var(--bad); }
.send-mail input[type=checkbox] { width: auto; min-height: 0; }
.grid input[type=color] { padding: 2px; }
.asset-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.asset-preview { max-height: 48px; max-width: 200px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }

label.check input[type=checkbox] { width: auto; min-height: 0; flex: none; }
label.check { min-width: 0; }
.nav-logo { display: block; height: 34px; max-width: 130px; object-fit: contain; border-radius: 6px; }
.nav-logo.sim { clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%, 0 76%); }
.sign-pad { display: block; width: 100%; max-width: 620px; aspect-ratio: 25 / 8; background: #fff; border: 1px dashed var(--line); border-radius: 8px; touch-action: none; cursor: crosshair; }
.stamp-box { max-width: 420px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.stamp-canvas { display: block; width: 100%; aspect-ratio: 12 / 5; }
.sign-preview { max-height: 64px; max-width: 220px; object-fit: contain; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.file-label { display: flex; flex-direction: row; gap: 8px; align-items: center; }
.file-label input { width: auto; }
.watermark { position: fixed; inset: 0; z-index: -1; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; color: var(--accent); opacity: .1; }
.watermark svg { width: min(92vh, 92vw); height: min(92vh, 92vw); flex: none; }
.watermark.animated.mandala svg { animation: watermark-turn 240s linear infinite; }
.watermark.lotus { opacity: 1; }
.watermark.lotus svg { opacity: .1; }
.watermark.lotus canvas { opacity: .6; }
.watermark.animated.lotus svg { animation: watermark-lotus 14s ease-in-out infinite; transform-origin: 50% 74%; }
@keyframes watermark-lotus { 0%, 100% { transform: scale(1); opacity: .08; } 50% { transform: scale(1.05); opacity: .12; } }
@keyframes watermark-turn { to { transform: rotate(360deg); } }
@keyframes watermark-breathe { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.05); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .watermark.animated svg { animation: none; } }
@media print { .watermark { display: none; } }
.pattern-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pattern-list label { flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.pattern-list input { width: auto; min-height: 0; }
.pattern-preview { display: block; width: 44px; height: 44px; color: var(--accent); }
.pattern-preview svg { display: block; width: 100%; height: 100%; }
.watermark.anunnaki { opacity: .42; }
.watermark.rain { opacity: .3; }
.watermark canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.watermark.mandala { opacity: 1; }
.watermark.mandala svg { opacity: .1; }
.watermark.mandala canvas { opacity: .32; }
.book-week { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 8px; overflow-x: auto; }
.book-day { padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.book-day.today { border-color: var(--accent); }
.book-day h3 { display: flex; flex-direction: column; margin: 0 0 8px; font-size: 15px; }
.book-day h3 small { color: var(--muted); font-weight: 400; }
.book-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.book-item { display: flex; flex-direction: column; gap: 2px; padding: 8px; font-size: 14px; background: var(--accent-soft); border-radius: 6px; }
.hours-row { display: grid; grid-template-columns: minmax(130px, 200px) 120px 120px; gap: 8px; align-items: center; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; }
.slots legend { margin-bottom: 6px; font-size: 14px; color: var(--muted); }
.slots label { flex-direction: row; }
.slots input { position: absolute; opacity: 0; width: 0; min-height: 0; }
.slots span { flex: 1; padding: 8px 4px; text-align: center; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.slots input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.slots input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
.public-wide { width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
body.bare:has(.public-wide) { align-items: flex-start; }
.event-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.event-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.event-day { min-height: 200px; padding: 6px; background: var(--bg); border-radius: 8px; }
.event-day.today { outline: 2px solid var(--accent); }
.event-day h3 { display: flex; flex-direction: column; align-items: center; margin: 0 0 8px; font-size: 14px; }
.event-day h3 small { color: var(--muted); font-weight: 400; }
.event-tile { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; padding: 10px; font-size: 14px; color: #1f2328; text-decoration: none; background: var(--tile); border-radius: 8px; }
a.event-tile:hover { outline: 2px solid currentColor; }
.event-tile .event-name { font-weight: 600; }
.event-tile .event-state { font-size: 13px; }
.event-tile.closed { color: var(--muted); background: var(--line); }
.color-blue { --tile: #cfe3ff; } .color-pink { --tile: #fbd3ec; } .color-green { --tile: #cdeed4; } .color-yellow { --tile: #fbeeb0; }
.color-violet { --tile: #e0d4fb; } .color-orange { --tile: #fcdcc0; } .color-teal { --tile: #c4efe8; } .color-red { --tile: #fbd0d0; }
@media (max-width: 800px) { .event-week { grid-template-columns: 1fr; } .event-day { min-height: 0; } .event-day h3 { flex-direction: row; gap: 8px; } }
.stay-grid { table-layout: fixed; min-width: 900px; }
.stay-grid th, .stay-grid td { padding: 0; height: 36px; font-size: 12px; text-align: center; border: 1px solid var(--line); }
.stay-grid th:first-child { width: 150px; padding: 0 8px; text-align: left; font-size: 14px; }
.stay-grid td.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.src-manual { background: #8fd3a8; color: #10321c; } .src-booking { background: #8fb8f0; color: #0d2748; } .src-airbnb { background: #f5a3b7; color: #4d0f20; } .src-web { background: #c9b5f5; color: #2a1356; } .conflict { background: #e0483f; color: #fff; }
.stay-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.stay-legend span { display: inline-block; width: 16px; height: 16px; margin-right: -8px; border-radius: 4px; }
.clean-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.clean-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--bg); border-radius: 8px; }
.clean-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.clean-chip { padding: 4px 12px; font-size: 14px; font-weight: 600; color: #1f2328; border-radius: 16px; }
.clean-chip.open, .clean-tile.open { background: #fde3b5; }
.clean-chip.confirmed, .clean-tile.confirmed { background: #c8ecd2; }
.clean-chip.done, .clean-tile.done { background: #d5dcec; }
.clean-tile.late { background: #f9c3bd; }
.clean-head, .clean-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.clean-head { margin-bottom: 4px; font-size: 13px; color: var(--muted); text-align: center; }
.clean-day { min-height: 92px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.clean-day.blank { background: transparent; border: 0; }
.clean-day.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.clean-day h3 { display: flex; gap: 6px; align-items: baseline; margin: 0 0 4px; font-size: 14px; }
.clean-day h3 small { display: none; color: var(--muted); font-weight: 400; }
.clean-tile { display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; padding: 6px 8px; font-size: 13px; line-height: 1.3; color: #1f2328; border-radius: 6px; }
.clean-tile .clean-who { font-weight: 600; }
.clean-tile form { margin-top: 4px; }
.clean-tile button { min-height: 28px; padding: 2px 8px; font-size: 13px; color: #1f2328; background: #ffffffb0; border-color: #1f232833; }
@media (max-width: 800px) {
  .clean-head { display: none; }
  .clean-grid { grid-template-columns: 1fr; }
  .clean-day.blank, .clean-day.free { display: none; }
  .clean-day { min-height: 0; }
  .clean-day h3 small { display: inline; }
}
.clean-pick summary { display: flex; flex-direction: column; gap: 1px; cursor: pointer; list-style: none; }
.clean-pick summary::-webkit-details-marker { display: none; }
.clean-pick select { width: 100%; min-height: 30px; padding: 2px 4px; margin-top: 4px; font-size: 13px; color: #1f2328; background: #fff; }
.clean-pick form { display: grid; gap: 4px; }
.clean-note { margin: 4px 0 0; font-size: 12px; }
.clean-arrival { font-weight: 600; }
.stay-grid td { position: relative; }
.stay-grid .stay-guests { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; }
.stay-guests { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; font-size: 12px; font-weight: 700; line-height: 1; color: #1f2328; text-decoration: none; background: #fff; border: 1px solid rgb(0 0 0 / .35); border-radius: 11px; box-shadow: 0 1px 3px rgb(0 0 0 / .35); }
tr[id^="pobyt-"] { scroll-margin-top: 130px; }
tr[id^="pobyt-"]:target td { background: var(--accent-soft); }
.clean-tile { position: relative; }
.clean-pin { position: absolute; top: 4px; right: 4px; z-index: 1; }
.clean-tile strong { padding-right: 26px; }
.clean-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.book-table input[type=number] { width: 64px; min-width: 0; }
.book-table input[name=note] { min-width: 170px; }
.book-table small { color: var(--bad, #b3261e); font-weight: 600; }
.book-skip { margin-top: 4px; font-size: 12px; white-space: nowrap; }
.book-row.cancelled td, .book-row.skip td, .book-row.duplicate td { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.book-total th, .book-total td { font-weight: 700; border-top: 2px solid var(--line); }
.book-export { display: flex; flex-wrap: wrap; gap: 12px; }
.book-export fieldset { display: grid; gap: 4px; min-width: 190px; margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; }
.book-export legend { padding: 0 4px; font-weight: 600; }
.fee-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.fee-result { margin: 12px 0; font-size: 18px; }
#fee-persons { margin-bottom: 8px; }
.fee-slot { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.fee-slot h4 { margin: 0 0 8px; }


.qr-pay { width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 20px; border: 0; border-radius: 16px; text-align: center; background: #ffffff; color: #1b2422; box-shadow: 0 20px 60px rgb(0 0 0 / .35); }
.qr-pay::backdrop { background: rgb(0 0 0 / .55); }
.qr-pay h2 { margin: 0; font-size: 19px; color: #1b2422; }
.qr-pay p { margin: 4px 0; color: #5f6d69; }
.qr-pay img { display: block; width: min(320px, 100%); height: auto; margin: 12px auto; image-rendering: pixelated; }
.qr-fields { display: grid; gap: 8px; margin-top: 10px; text-align: left; }
.qr-pay label { color: #5f6d69; font-size: 13px; }
.qr-pay input { color: #1b2422; background: #ffffff; border-color: #c9cdd8; }
.qr-error { margin: 6px 0 0; color: #a12a2a !important; font-size: 13px; }
.qr-pay button { width: 100%; justify-content: center; margin-top: 8px; color: #1b2422; background: #ffffff; border-color: #c9cdd8; }

.widget-help { margin: 0 0 12px; }
.widget-help summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.steps { padding-left: 22px; }
.steps li { margin: 4px 0; }

.icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.icon-picker label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; color: var(--ink); font-size: 12px; text-align: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.icon-picker input { position: absolute; opacity: 0; }
.icon-picker img { width: 72px; height: 72px; border-radius: 16px; }
.icon-picker label:hover { border-color: var(--accent); }
.icon-picker label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--accent-soft); }
.icon-picker label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.stay-grid th.today { background: var(--accent-soft); color: var(--ink); }
.stay-grid td.stay-cell { padding: 3px 0; }
.stay-bar { display: flex; align-items: center; gap: 4px; height: 30px; margin: 0 2px; padding: 0 3px; overflow: hidden; border-radius: 7px; }
.stay-bar.open-left { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.stay-bar.open-right { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.stay-bar .stay-guests { position: static; transform: none; flex: none; }
.src-mark, .src-logo { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px; background: #ffffff; color: #1f2328; font-size: 13px; font-weight: 700; object-fit: contain; }

.leds { display: inline-flex; gap: 4px; margin-left: 7px; vertical-align: -1px; }
.led { display: inline-flex; align-items: center; justify-content: center; min-width: 12px; height: 12px; border-radius: 10px; font-size: 12px; font-weight: 700; line-height: 1; box-shadow: inset 0 1px 1px rgb(255 255 255 / .55), 0 0 0 1px rgb(0 0 0 / .18); }
.led:not(:empty) { min-width: 20px; height: 20px; padding: 0 5px; }
.led.green { background: #22c55e; box-shadow: inset 0 1px 1px rgb(255 255 255 / .6), 0 0 0 1px rgb(0 0 0 / .18), 0 0 7px #22c55e; animation: led-check 2.4s ease-in-out infinite; }
.led.yellow { background: #facc15; color: #3f2f00; box-shadow: inset 0 1px 1px rgb(255 255 255 / .6), 0 0 0 1px rgb(0 0 0 / .18), 0 0 7px #facc15; }
.led.red { background: #e11d2e; color: #ffffff; box-shadow: inset 0 1px 1px rgb(255 255 255 / .4), 0 0 0 1px rgb(0 0 0 / .18), 0 0 8px #e11d2e; }
.led.idle { background: #9ca3af; }
@keyframes led-check { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .led.green { animation: none; } }

.op-balance { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 16px; }
.op-balance div { display: flex; flex-direction: column; min-width: 170px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.op-balance span { color: var(--muted); font-size: 13px; }
.op-balance strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.op-balance .plus { background: var(--good-soft); border-color: var(--good); }
.op-balance .plus strong { color: var(--good); }
.op-balance .minus { background: var(--bad-soft); border-color: var(--bad); }
.op-balance .minus strong { color: var(--bad); }

/* Přihlášení: přechod v barvách poslední ikony, plující kruhy, nápis faktury a skleněný panel. */
.login6 { margin: 0; min-height: 100vh; color: #ffffff; background: var(--brand); --side-muted: rgb(255 255 255 / .55); }
.lg-scene { position: relative; min-height: 100vh; overflow: hidden; display: flex; }
.lg-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.lg-b1 { left: -160px; top: -180px; width: 560px; height: 560px; background: rgb(255 255 255 / .15); animation: lg-drift1 16s ease-in-out infinite; }
.lg-b2 { left: 34%; bottom: -260px; width: 620px; height: 620px; background: rgb(27 24 48 / .12); animation: lg-drift2 20s ease-in-out infinite; }
.lg-b3 { right: 33%; top: 70px; width: 150px; height: 150px; background: rgb(255 255 255 / .12); animation: lg-drift3 12s ease-in-out infinite; }
@keyframes lg-drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, 50px) scale(1.08); } }
@keyframes lg-drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-90px, -40px) scale(.94); } }
@keyframes lg-drift3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, 40px); } }
@media (prefers-reduced-motion: reduce) { .lg-blob { animation: none; } }
.lg-hero { position: relative; flex: 1 1 auto; min-width: 0; padding: 60px 70px; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.lg-tile { width: 48px; height: 48px; border-radius: 14px; background: #ffffff; display: grid; place-items: center; }
.lg-tile .brand-f { font-size: 31px; }
.lg-words { display: flex; flex-direction: column; gap: 14px; }
.lg-word { font-weight: 900; font-size: clamp(60px, 9vw, 124px); letter-spacing: -.05em; line-height: .95; color: #ffffff; }
.lg-hero .invoicer { font-size: clamp(18px, 2.6vw, 34px); letter-spacing: .24em; }
.lg-tag { margin: 0; font-size: 16px; font-weight: 500; color: rgb(255 255 255 / .86); }
.lg-panel { position: relative; flex: 0 0 440px; max-width: 100%; box-sizing: border-box; margin: 26px 26px 26px 0; padding: 0 48px; border-radius: 28px; display: flex; flex-direction: column; justify-content: center; background: rgb(255 255 255 / .18); border: 1px solid rgb(255 255 255 / .42); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.auth-body { display: flex; flex-direction: column; padding: 32px 0; }
.auth-body h1 { margin: 0 0 18px; font-size: 28px; font-weight: 800; color: #ffffff; }
.auth-body > p { color: rgb(255 255 255 / .88); }
.auth-body > p.flash { color: var(--bad); background: #ffffff; }
.auth-body label { color: #ffffff; }
.auth-body .stack { gap: 14px; padding: 0; background: transparent; border: 0; box-shadow: none; }
.auth-body input:not([type=hidden]) { min-height: 50px; padding: 0 16px; border: 1px solid rgb(255 255 255 / .6); border-radius: 14px; background: rgb(255 255 255 / .92); color: #1d1b2e; }
.auth-body input::placeholder { color: #6f6a88; opacity: 1; }
.auth-body input:focus { outline: 3px solid rgb(255 255 255 / .55); border-color: #ffffff; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 52px !important; }
.auth-body .reveal { position: absolute; top: 5px; right: 5px; width: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #4a4566; }
.auth-body .reveal:not(:disabled):hover { background: rgb(0 0 0 / .06); }
.reveal svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.reveal[aria-pressed=true] { background: rgb(0 0 0 / .08); }
.auth-body .stack > button.primary { align-self: stretch; min-height: 52px; border-radius: 14px; background: #1b1830; box-shadow: none; color: #ffffff; }
.auth-body .stack > button.primary:not(:disabled):hover { background: #2a2548; filter: none; }
.auth-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.auth-help summary { cursor: pointer; color: rgb(255 255 255 / .92); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.auth-help p { margin: 6px 0 0; color: rgb(255 255 255 / .88); font-size: 14px; }
.auth-language { margin: 0; }
.auth-language select { width: auto; min-height: 36px; padding: 0 10px; border: 1px solid rgb(255 255 255 / .5); border-radius: 10px; background: rgb(255 255 255 / .16); color: #ffffff; font-size: 14px; }
.auth-language option { color: #1d1b2e; }
@media (max-width: 900px) {
  .lg-scene { flex-direction: column; }
  .lg-hero { padding: 26px 22px 8px; gap: 18px; justify-content: flex-start; }
  .lg-tag { display: none; }
  .lg-panel { flex: none; margin: 14px 16px 26px; padding: 4px 22px; }
}


/* Kostra: boční panel, pracovní plocha s horním řádkem, na mobilu spodní lišta. */
.shell { display: flex; min-height: 100vh; }
.workspace { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
main { width: 100%; max-width: 1360px; margin: 0 auto; padding: 8px 32px 48px; }
.sidebar { position: sticky; top: 0; flex: none; width: 248px; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; background: var(--side); color: var(--side-ink); }
.brand { display: flex; align-items: center; gap: 13px; padding: 4px 8px 20px; color: #ffffff; text-decoration: none; }
.brand-mark { flex: none; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .16); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12); }
.brand-f, .brand-word { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.brand-f { font-size: 29px; padding-bottom: 3px; }
.brand-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.brand-word { width: fit-content; font-size: 26px; }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; background: #ffffff; padding: 3px; }
.invoicer { display: inline-flex; font-size: 11px; font-weight: 800; letter-spacing: .3em; line-height: 1; }
.invoicer .l { color: var(--side-muted); animation: invoicer-lit 10s linear infinite; }
.invoicer .r { color: var(--neon); animation: invoicer-neon 10s linear infinite; animation-delay: .84s; }
.invoicer .l2 { animation-delay: .12s; } .invoicer .l3 { animation-delay: .24s; } .invoicer .l4 { animation-delay: .36s; }
.invoicer .l5 { animation-delay: .48s; } .invoicer .l6 { animation-delay: .6s; } .invoicer .l7 { animation-delay: .72s; }
@keyframes invoicer-lit { 0% { color: var(--side-muted); text-shadow: none; } 1.5% { color: #ffffff; text-shadow: 0 0 6px #ffffff, 0 0 14px rgb(255 255 255 / .65); } 4.5%, 100% { color: var(--side-muted); text-shadow: none; } }
@keyframes invoicer-neon {
  0% { opacity: .35; text-shadow: none; }
  1% { opacity: 1; color: #ffffff; text-shadow: 0 0 6px #ffffff, 0 0 18px var(--neon), 0 0 34px var(--neon), 0 0 60px var(--neon); }
  2% { opacity: .55; text-shadow: 0 0 4px var(--neon); }
  3%, 95% { opacity: 1; color: var(--neon); text-shadow: 0 0 5px var(--neon), 0 0 14px var(--neon), 0 0 28px var(--neon); }
  100% { opacity: .35; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .invoicer .l, .invoicer .r { animation: none; } .invoicer .r { text-shadow: 0 0 6px var(--neon); } }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group { margin: 16px 12px 6px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--side-muted); }
.nav-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--side-ink); font: inherit; font-size: 14.5px; font-weight: 550; text-decoration: none; text-align: left; cursor: pointer; }
.nav-link .icon { width: 20px; height: 20px; opacity: .9; }
.nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-link:hover, button.nav-link:not(:disabled):hover { background: var(--side-hover); color: #ffffff; border-color: transparent; }
.nav-link.active { background: var(--side-active); color: #ffffff; font-weight: 700; box-shadow: inset 3px 0 0 var(--brand-a); }
.nav-link .leds, .nav-link .count { margin-left: auto; }
.nav-logo { display: block; height: 26px; max-width: 120px; object-fit: contain; border-radius: 5px; }
.nav-logo.sim { clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%, 0 76%); }
.side-foot { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid #ffffff14; }
.nav-toggle { margin: 0; }

.topbar { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 32px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.firm-switch { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 4px 0 14px; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.firm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; }
.firm-switch select { min-height: 40px; width: auto; max-width: 260px; padding: 0 6px; border: 0; background: transparent; font-weight: 700; }
.firm-switch select:focus { outline: 0; }
.top-search { position: relative; flex: 1 1 260px; max-width: 520px; margin: 0; }
.top-search .icon { position: absolute; left: 13px; top: 12px; color: var(--muted); pointer-events: none; }
.top-search input { height: 44px; padding-left: 42px; border-color: var(--line); border-radius: 12px; }
.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.qr-open { height: 44px; padding: 0 14px; border-color: var(--line); border-radius: 12px; }
.qr-open .icon { width: 19px; height: 19px; }
.new-invoice { height: 44px; padding: 0 18px; border-radius: 12px; }
.new-invoice .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.avatar { width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--side); color: #ffffff; font-weight: 800; font-size: 14px; }
.avatar:not(:disabled):hover { background: var(--side); filter: brightness(1.4); }
.profile-menu { position: fixed; inset: 70px 24px auto auto; width: 300px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 50px rgb(20 16 40 / .25); }
.profile-menu > a, .profile-menu button.ghost { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; }
.profile-menu > a:hover { background: var(--surface-2); }
.profile-menu form { margin: 0; }
.profile-name { margin: 2px 10px 10px; font-weight: 750; display: flex; flex-direction: column; }
.profile-name small { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.profile-label { margin: 10px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mode-switch { display: flex; gap: 4px; padding: 4px; margin: 0 6px; background: var(--surface-2); border-radius: 11px; }
.mode-switch button { flex: 1; min-height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); }
.mode-switch button[aria-pressed=true] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.mode-switch .icon { width: 18px; height: 18px; }

/* Zasunutý panel: zůstanou jen ikony, název ukáže bublina. */
.nav-rail .sidebar { width: 76px; padding: 18px 10px; align-items: center; }
.nav-rail .brand { padding: 4px 0 18px; justify-content: center; }
.nav-rail .brand-text, .nav-rail .nav-label, .nav-rail .nav-group { display: none; }
.nav-rail .nav-link { justify-content: center; width: 52px; padding: 0; position: relative; }
.nav-rail .nav-link .leds, .nav-rail .nav-link .count { position: absolute; top: 2px; right: 2px; margin: 0; }
.nav-rail .side-nav { gap: 4px; }
.nav-rail .nav-link:has(.nav-logo) .icon { display: none; }
.nav-rail .nav-logo { max-width: 46px; height: 22px; }

/* Panel nahoře: stejné odkazy ve vodorovné liště. */
.nav-top .shell { flex-direction: column; }
.nav-top .sidebar { position: sticky; top: 0; z-index: 31; width: 100%; height: auto; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px 6px; padding: 10px 24px; overflow: visible; }
.nav-top .brand { padding: 0 14px 0 0; }
.nav-top .side-nav { flex: 1 1 auto; min-width: 0; flex-direction: row; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nav-top .nav-group { display: none; }
.nav-top .nav-link { width: auto; min-height: 40px; flex: none; }
.nav-top .side-foot .nav-link { padding: 0 10px; }
.nav-top .nav-link.active { box-shadow: inset 0 -3px 0 var(--brand-a); }
.nav-top .side-foot { flex: none; margin: 0 0 0 auto; padding: 0; border: 0; flex-direction: row; gap: 2px; }
.nav-top .side-foot .nav-label { display: none; }
.nav-top .topbar { top: 62px; }

.tabbar, .nav-sheet { display: none; }
.nav-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 82vh; margin: 0; padding: 16px 14px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; border: 0; border-radius: 22px 22px 0 0; background: var(--side); color: var(--side-ink); }
.nav-sheet::backdrop { background: rgb(10 8 20 / .5); }
.nav-sheet:popover-open { display: block; }
.nav-sheet .side-foot { margin-top: 12px; }

@media (max-width: 900px) {
  .sidebar { display: none; }
  .nav-top .sidebar { display: none; }
  .topbar { position: static; padding: 12px 16px 6px; gap: 8px; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .firm-switch { flex: 1 1 0; min-width: 0; }
  .firm-switch select { max-width: none; width: 100%; }
  .top-search { order: 5; flex-basis: 100%; max-width: none; }
  .top-actions { margin-left: 0; flex: none; }
  .qr-open span, .new-invoice span { display: none; }
  .qr-open, .new-invoice { width: 44px; padding: 0; }
  main { padding: 8px 16px calc(100px + env(safe-area-inset-bottom)); }
  .tabbar { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 66px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; border-radius: 24px; background: var(--side); box-shadow: 0 10px 30px rgb(10 8 20 / .3); }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 0; height: 100%; padding: 0; border: 0; background: transparent; color: var(--side-muted); font: inherit; font-size: 11px; font-weight: 650; text-decoration: none; }
  .tabbar a.active { color: #ffffff; }
  .tabbar a.active .icon { color: var(--neon); }
  .tabbar .icon { width: 22px; height: 22px; }
  .tab-dot { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #facc15; color: #3f2f00; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
  .profile-menu { inset: 64px 12px auto 12px; width: auto; }
  h1 { font-size: 23px; }
}
@media print { .sidebar, .topbar, .tabbar { display: none !important; } main { padding: 0; } }

/* Přehled */
.hero { position: relative; display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 22px; padding: 28px 30px; overflow: hidden; border-radius: 24px; background: var(--brand); color: #ffffff; box-shadow: 0 14px 40px color-mix(in srgb, var(--brand-b) 28%, transparent); }
.hero::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .22), transparent 65%); pointer-events: none; }
.hero-main { flex: 1 1 300px; display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
.hero-led { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 14px; font-weight: 600; color: rgb(255 255 255 / .9); }
.hero-led .led { box-shadow: 0 0 0 2px rgb(255 255 255 / .7); }
.hero-label { margin: 0; font-size: 15px; font-weight: 600; color: rgb(255 255 255 / .85); }
.hero-amount { margin: 0; font-size: clamp(36px, 5vw, 50px); font-weight: 850; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-note { margin: 4px 0 0; font-size: 14px; color: rgb(255 255 255 / .88); }
.hero-stats { flex: 1 1 440px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; align-self: center; position: relative; z-index: 1; }
.hero-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; background: rgb(255 255 255 / .18); border: 1px solid rgb(255 255 255 / .38); color: #ffffff; text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-stat:hover { background: rgb(255 255 255 / .26); }
.hero-stat span, .hero-stat small { font-size: 12.5px; font-weight: 600; color: rgb(255 255 255 / .86); }
.hero-stat strong { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hero-brand { position: absolute; right: 26px; bottom: 12px; margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: rgb(255 255 255 / .75); }
.hero-brand span { color: var(--neon); text-shadow: 0 0 6px var(--neon); }
.dash-grid { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 22px; }
.panel { flex: 2 1 340px; min-width: 0; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.panel.wide { flex: 3 1 520px; }
.panel h2 { margin: 0; font-size: 17px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-head a { font-size: 14px; font-weight: 650; text-decoration: none; }
.panel-label { margin: 14px 0 8px; font-size: 13px; font-weight: 650; color: var(--muted); }
.table.flat { border: 0; box-shadow: none; border-radius: 0; }
.table.flat th { background: transparent; }
.table.flat td, .table.flat th { white-space: nowrap; }
.mini-stats { display: flex; gap: 10px; }
.mini-stats div { flex: 1 1 0; display: flex; flex-direction: column; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.mini-stats span { font-size: 12px; font-weight: 650; color: var(--muted); }
.mini-stats strong { font-size: 22px; font-weight: 800; }
.occupancy { display: grid; grid-template-columns: minmax(80px, 110px) repeat(7, minmax(0, 1fr)); gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.occ-day { text-align: center; }
.occ-name { font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.occ-cell { height: 5px; border-radius: 3px; background: var(--line-strong); }
.occ-cell.on { height: 16px; border-radius: 6px; background: var(--brand); }
.dash-grid.status .panel { flex: 1 1 300px; }
.status-card { display: flex; align-items: center; gap: 14px; }
.status-card > div { flex: 1 1 auto; }
.status-card h2 { font-size: 15px; }
.status-card p { margin: 2px 0 0; font-size: 13.5px; }
.status-card form { margin: 0; }
.wide-search { max-width: 640px; flex: none; margin-bottom: 14px; }
@media (max-width: 900px) { .hide-mobile { display: none; } .hero { padding: 22px 20px 30px; border-radius: 22px; } .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; } .hero-stat:nth-child(3) { grid-column: span 2; } .hero-stat strong { font-size: 20px; } }
tbody th { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); background: transparent; }
.stay-grid thead th { text-transform: none; letter-spacing: 0; }
.layout-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.layout-picker label { flex: 1 1 180px; flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px; color: var(--ink); font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.layout-picker label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); background: var(--accent-soft); }

/* Profilová fotka */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.photo-face { position: relative; flex: none; width: 96px; height: 96px; overflow: hidden; border-radius: 50%; background: var(--side); color: #ffffff; display: grid; place-items: center; font-size: 30px; font-weight: 800; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--brand-a); }
.photo-face.big { width: 160px; height: 160px; margin: 8px auto; font-size: 48px; }
.photo-face img, .photo-face canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-face [hidden] { display: none; }
.photo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-actions label.button { cursor: pointer; }
.camera-box { display: grid; gap: 10px; max-width: 420px; }
.camera-box[hidden] { display: none; }
.camera-box video { width: 100%; border-radius: 16px; background: #000000; transform: scaleX(-1); }
.photo-link { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.photo-link img { border-radius: 12px; background: #ffffff; padding: 8px; border: 1px solid var(--line); }
.photo-link > div { flex: 1 1 280px; }
.photo-form label.button.primary { justify-content: center; }
.auth-card > form.stack, .public-wide > form.stack { padding: 0; border: 0; box-shadow: none; background: transparent; }

.photo-face canvas { cursor: grab; touch-action: none; }
.photo-face canvas.dragging { cursor: grabbing; }
.photo-adjust { display: grid; gap: 4px; max-width: 360px; }
.photo-adjust input[type=range] { padding: 0; min-height: 28px; accent-color: var(--accent); border: 0; }
.photo-adjust p { margin: 0; font-size: 13px; }

/* Rezervační web: fotky apartmánu ve správě */
.site-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 8px 0 14px; }
.site-photo { margin: 0; border: 1px solid var(--line, #e6e3f0); border-radius: 14px; overflow: hidden; background: var(--surface, #fff); }
.site-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.site-photo figcaption { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.site-photo .op-row input { min-width: 0; flex: 1; }
.site-photo-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.site-photo-actions form { margin: 0; }
.site-ical { padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.site-ical code { word-break: break-all; }
.danger-text { color: var(--bad, #b4232f); }
.site-occ { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.site-occ legend { padding: 0 6px; font-size: 13px; color: var(--muted); }
.site-occ label { display: flex; align-items: center; gap: 6px; flex-direction: row; }
.site-occ input { width: 70px; }
.site-occ small { flex-basis: 100%; }
.site-lang { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.site-lang summary { cursor: pointer; font-weight: 700; }
.site-lang .grid { margin-top: 10px; }
.src-mark.web-mark { background: linear-gradient(135deg, #9646ff, #ff46aa); padding: 2px; }
.src-mark.web-mark svg { width: 100%; height: 100%; display: block; }
.stay-legend .web-mark { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; }
.stay-grid td.free { cursor: cell; user-select: none; }
.stay-grid td.free:hover { background: color-mix(in srgb, var(--brand-a, #9646ff) 12%, transparent); }
.stay-grid td.pick { background: color-mix(in srgb, var(--brand-a, #9646ff) 35%, transparent) !important; }
.stay-dialog { border: 0; border-radius: 16px; padding: 22px; width: min(560px, calc(100vw - 32px)); background: var(--surface, #fff); color: var(--ink); box-shadow: 0 20px 60px #0004; }
.stay-dialog::backdrop { background: #1b183066; }
.stay-dialog h3 { margin: 0; }
.stay-pick-help { margin: 6px 0 0; }
/* Odlišení firem: barevná tečka a proužek u přepínače firmy. */
.firm-c1 .firm-dot { background: #12a594; } .firm-c2 .firm-dot { background: #f08c00; } .firm-c3 .firm-dot { background: #1078e6; }
.firm-c1 .firm-switch { box-shadow: inset 3px 0 0 #12a594; } .firm-c2 .firm-switch { box-shadow: inset 3px 0 0 #f08c00; } .firm-c3 .firm-switch { box-shadow: inset 3px 0 0 #1078e6; }
.nav-firm { display: block; font-size: 10.5px; font-weight: 500; opacity: .7; line-height: 1.1; }
.nav-group .nav-firm { display: inline; margin-left: 4px; }
.nav-rail .nav-firm, .nav-rail .nav-group .nav-firm { display: none; }
/* Uzavřený termín: žlutá výstražná páska a zámek s běžícími kontrolkami. */
.src-block { background: repeating-linear-gradient(45deg, #ffe08a 0 6px, #f3c94a 6px 11px) !important; color: #3a2e00 !important; cursor: pointer; }
.src-mark.lock-mark { background: #1f1d24; padding: 2px; }
.src-mark.lock-mark svg, .pick-kind .lock-mark svg, .stay-dialog h3 .lock-mark svg { width: 100%; height: 100%; display: block; }
.lock-chase circle { fill: #5a4a1a; animation: lock-chase 1.2s steps(1) infinite; }
.lock-chase circle:nth-child(2) { animation-delay: .3s; } .lock-chase circle:nth-child(3) { animation-delay: .6s; } .lock-chase circle:nth-child(4) { animation-delay: .9s; }
@keyframes lock-chase { 0% { fill: #ff8a00; } 25% { fill: #5a4a1a; } }
@media (prefers-reduced-motion: reduce) { .lock-chase circle { animation: none; fill: #ff8a00; } }
.stay-legend .lock-mark { width: 18px; height: 18px; vertical-align: -4px; margin-right: 6px; }
.pick-kind { display: flex; gap: 8px; flex-wrap: wrap; }
.pick-kind label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.pick-kind label:has(input:checked) { border-color: var(--brand-a, #9646ff); background: color-mix(in srgb, var(--brand-a, #9646ff) 10%, transparent); }
.pick-kind .lock-mark, .pick-kind .web-mark, .stay-dialog h3 .lock-mark { width: 22px; height: 22px; display: inline-flex; vertical-align: -5px; }
.stay-bar.src-block:hover { filter: brightness(.95); }
.pick-kind label { flex-direction: row; font-weight: 600; }
.passkey-login { width: 100%; margin-top: 10px; }
.passkeys { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.passkeys li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.passkeys li form { margin-left: auto; }
.passkey-name { max-width: 240px; }