/* Budget UI — Material Design 3 (light). Jeden vizuální systém:
   app shell + login + Tabulator. Editor konfigurace, ne dashboard:
   hustá čitelná editace, ale MD3 tvarosloví — tonální plochy, plné
   zaoblení (pill nav/tlačítka/taby), klidná tonální elevace. */

:root {
  /* MD3 barevné role (light, primary = modrá) */
  --primary:#1b5fd9; --on-primary:#ffffff;
  --primary-container:#dbe5ff; --on-primary-container:#082c66;
  --secondary-container:#dde3f0; --on-secondary-container:#1a2740;
  --bg:#f5f7fc; --surface:#ffffff;
  --surface-1:#f4f6fb; --surface-2:#eef1f8; --surface-3:#e7ebf4;
  --on-surface:#15171b; --on-surface-var:#3b404b;
  --outline:#b3bac8; --outline-var:#d3d9e4;
  --ink:var(--on-surface); --muted:var(--on-surface-var);
  --faint:#8a91a2; --ro-ink:#3c4250;
  --border:var(--outline-var); --border-d:var(--outline);
  --accent:var(--primary); --accent-d:#16489f; --accent-l:#eaf0ff;

  /* MD3 shape scale */
  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:26px;
  --r-full:999px;

  /* MD3 tonal elevation (jemná, barevná) */
  --sh-1:0 1px 2px rgba(20,30,60,.05), 0 1px 3px rgba(20,30,60,.04);
  --sh-2:0 2px 6px -1px rgba(20,30,60,.10), 0 1px 3px rgba(20,30,60,.06);
  --sh-pop:0 14px 40px -10px rgba(20,30,60,.20),
           0 4px 12px -4px rgba(20,30,60,.10);

  /* status (tonální containery, MD3 styl) */
  --ok:#1b6b3a; --ok-bg:#d6f3df; --ok-bd:#b4e6c5;
  --warn:#8a5400; --warn-bg:#fdeecb; --warn-bd:#f6dca0;
  --err:#b3261e; --err-bg:#fbdedc; --err-bd:#f3c0bd;
  --info:#16489f; --info-bg:#dbe5ff; --info-bd:#bcd0ff;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { font-family:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--bg); font-size:14px;
  -webkit-font-smoothing:antialiased; }

.layout { display:flex; min-height:100vh; }

/* ── Sidebar = MD3 navigation drawer ─────────────────────────────── */
.sidebar { width:248px; flex:0 0 248px; background:var(--surface);
  border-right:1px solid var(--border); padding:1.4rem 1rem;
  position:sticky; top:0; height:100vh; overflow-y:auto; }
.brand { font-size:1.25rem; font-weight:800; letter-spacing:-.02em;
  display:flex; align-items:center; gap:.45rem; }
.brand-sub { color:var(--muted); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; margin:.25rem 0 1.1rem; }

/* Globální přepínač klienta — primární kontext appky */
.client-picker { background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r); padding:.7rem .8rem .8rem; margin:0 0 1.2rem; }
.client-picker label { font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  display:block; margin:0 0 .35rem; }
.client-picker .select-wrap { position:relative; }
.client-picker .select-wrap::after { content:"▾"; position:absolute;
  right:.7rem; top:50%; transform:translateY(-50%); pointer-events:none;
  color:var(--muted); font-size:.75rem; }
.client-picker select { width:100%; appearance:none; -webkit-appearance:none;
  font:inherit; font-weight:600; color:var(--ink); cursor:pointer;
  padding:.55rem 1.8rem .55rem .7rem; border:1px solid var(--border-d);
  border-radius:var(--r-sm); background:var(--surface);
  transition:border-color .12s, box-shadow .12s; }
.client-picker select:focus { outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(27,95,217,.16); }
.client-picker noscript button { margin-top:.5rem; }

.nav { display:flex; flex-direction:column; gap:.2rem; }
.nav a { display:block; padding:.6rem .9rem; border-radius:var(--r-full);
  color:var(--on-surface-var); text-decoration:none; font-weight:600;
  transition:background .12s, color .12s; }
.nav a:hover { background:var(--surface-2); color:var(--ink); }
.nav a.active { background:var(--secondary-container);
  color:var(--on-secondary-container); }
.side-foot { margin-top:1.5rem; border-top:1px solid var(--border);
  padding-top:.9rem; font-size:.8rem; color:var(--muted); }
.side-foot a { color:var(--primary); text-decoration:none; font-weight:600; }
.side-foot a:hover { text-decoration:underline; }

/* ── Content ─────────────────────────────────────────────────────── */
.content { flex:1 1 auto; padding:1rem 2.1rem 3rem; max-width:100%;
  overflow-x:auto; }
.h1 { font-size:1.25rem; font-weight:700; margin:0 0 .1rem;
  letter-spacing:-.02em; }
.sub { color:var(--muted); font-size:.82rem; margin:0 0 .7rem;
  line-height:1.35; }
/* Section header = kotva mezi pracovními zónami (konfigurace / kontrola
   / ruční úprava). Levý akcentový pruh + tonální pás → zóny nesplývají. */
.content h3 { font-size:1.08rem; font-weight:800; letter-spacing:-.01em;
  margin:2.4rem 0 .9rem; padding:.5rem .85rem; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--border);
  border-left:4px solid var(--primary); border-radius:var(--r-sm); }

/* ── Flash / status (MD3 tonální containery) ─────────────────────── */
.flash { padding:.7rem 1rem; border-radius:var(--r); margin:0 0 .85rem;
  font-size:.88rem; border:1px solid transparent; font-weight:500; }
.flash.success { background:var(--ok-bg); color:var(--ok);
  border-color:var(--ok-bd); }
.flash.error   { background:var(--err-bg); color:var(--err);
  border-color:var(--err-bd); }
.flash.warning { background:var(--warn-bg); color:var(--warn);
  border-color:var(--warn-bd); }
.flash.info    { background:var(--info-bg); color:var(--info);
  border-color:var(--info-bd); }

/* ── Taby = MD3 segmentovaný pill blok ───────────────────────────── */
.tabs { display:inline-flex; gap:.2rem; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r-full);
  padding:.2rem; margin:0 0 .7rem; }
.tabs a { padding:.35rem 1rem; font-weight:600; font-size:.86rem;
  color:var(--muted); text-decoration:none; border-radius:var(--r-full);
  transition:background .12s, color .12s, box-shadow .12s; }
.tabs a:hover { color:var(--ink); }
.tabs a.active { color:var(--primary); background:var(--surface);
  box-shadow:var(--sh-1); }

/* ── Tlačítka (MD3 filled / outlined, pill) ──────────────────────── */
button, .btn { font:inherit; font-weight:600; border-radius:var(--r-full);
  border:1px solid var(--border-d); background:var(--surface);
  color:var(--ink); padding:.5rem 1.1rem; cursor:pointer;
  text-decoration:none; display:inline-block; line-height:1.4;
  transition:background .12s, border-color .12s, box-shadow .12s; }
button:hover, .btn:hover { background:var(--surface-2);
  border-color:var(--muted); }
button.primary, .btn.primary { background:var(--primary);
  color:var(--on-primary); border-color:var(--primary);
  box-shadow:var(--sh-1); }
button.primary:hover, .btn.primary:hover { background:var(--accent-d);
  border-color:var(--accent-d); box-shadow:var(--sh-2); }
button:disabled { opacity:.5; cursor:not-allowed; }
/* Riziková akce (zápis na živé reklamní účty) — vizuálně oddělená */
button.danger, .btn.danger { background:var(--err); color:#fff;
  border-color:var(--err); box-shadow:var(--sh-1); font-weight:700; }
button.danger:hover, .btn.danger:hover { background:#8f1d17;
  border-color:#8f1d17; box-shadow:var(--sh-2); }

/* Počítadlo neuložených změn = stavový pill vedle akce (rozhodující
   info: mám co ukládat / zapisovat na živé účty?). */
.chg-count { font-size:.78rem; font-weight:700; color:var(--muted);
  background:var(--surface-3); border:1px solid var(--border-d);
  padding:.28rem .7rem; border-radius:var(--r-full); letter-spacing:.01em; }
.chg-count.on { color:var(--warn); background:var(--warn-bg);
  border-color:var(--warn-bd); }

/* ── Pole (MD3 filled-ish) ───────────────────────────────────────── */
input, select { font:inherit; padding:.45rem .6rem;
  border:1px solid var(--border-d); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); }
input:focus, select:focus { outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(27,95,217,.16); }
label { font-size:.74rem; color:var(--muted); font-weight:600;
  display:block; margin:.2rem 0 .2rem; text-transform:uppercase;
  letter-spacing:.04em; }
.row { display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-end; }
.row > div { display:flex; flex-direction:column; }
.muted { color:var(--muted); font-size:.85rem; }
.spacer { height:1rem; }
.inline-note { font-size:.8rem; color:var(--muted); margin:.3rem 0 .55rem; }
.inline-note a, .muted a { color:var(--primary); font-weight:600;
  text-decoration:none; }
.inline-note a:hover { text-decoration:underline; }

/* Filtrovací toolbar — MD3 surface container, kompaktní strip */
.filterbar { align-items:flex-end; gap:.4rem .8rem;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r); padding:.5rem .75rem; margin:0 0 .7rem;
  box-shadow:var(--sh-1); }
.filterbar label { margin:0 0 .15rem; font-size:.66rem;
  letter-spacing:.05em; }
.filterbar select[multiple] { min-width:8.5rem;
  background-image:none; padding:.2rem .35rem; }
.filterbar select[multiple] option { padding:.08rem .3rem;
  font-size:.82rem; }
.filterbar input[type=date], .filterbar input[type=text],
.filterbar select:not([multiple]) { height:2.15rem; }
.filterbar .btn { margin-bottom:1px; }

/* Chip multi-select — kompaktní náhrada za <select multiple> */
.chips { display:flex; flex-wrap:wrap; gap:.3rem; padding-top:.05rem; }
.chip { display:inline-flex; align-items:center; cursor:pointer;
  margin:0; padding:0; text-transform:none; letter-spacing:0; }
.chip input { position:absolute; opacity:0; width:0; height:0; }
.chip span { display:inline-block; padding:.32rem .85rem; font-size:.82rem;
  font-weight:700; color:var(--on-surface-var); background:var(--surface);
  border:1.5px solid var(--border-d); border-radius:var(--r-full);
  transition:background .12s, color .12s, border-color .12s; }
.chip:hover span { border-color:var(--muted); color:var(--ink); }
.chip input:checked + span { background:var(--primary);
  color:var(--on-primary); border-color:var(--primary);
  box-shadow:var(--sh-1); }
.chip input:focus-visible + span {
  box-shadow:0 0 0 3px rgba(27,95,217,.22); }

/* Potvrzovací karta před zápisem na živé účty (riziková akce) */
.confirm-card { border:1px solid var(--err-bd); background:var(--err-bg);
  border-radius:var(--r-lg); padding:1.2rem 1.4rem; margin:.4rem 0 1rem;
  box-shadow:var(--sh-1); }
.confirm-card__head { display:flex; gap:.7rem; align-items:flex-start;
  margin:0 0 1rem; }
.confirm-card__icon { flex:0 0 auto; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-full); background:var(--err); color:#fff;
  font-weight:800; }
.confirm-card .scrollx { background:var(--surface); }

/* Stat řádek (log souhrn) — MD3 card */
.statbar { gap:1.8rem; align-items:flex-end;
  border:1px solid var(--border); background:var(--surface);
  border-radius:var(--r-lg); padding:.85rem 1.2rem; margin:.2rem 0 1.1rem;
  box-shadow:var(--sh-1); }
.statbar > div { gap:.1rem; }
.statbar strong { font-size:1.2rem; font-weight:800;
  letter-spacing:-.01em; }

/* ── Empty state: „Vyberte klienta" (MD3 centrovaná karta) ───────── */
.empty-state { max-width:520px; margin:4rem auto; text-align:center;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:3rem 2.5rem;
  box-shadow:var(--sh-2); }
.empty-state__icon { width:72px; height:72px; margin:0 auto 1.4rem;
  border-radius:var(--r-full); display:flex; align-items:center;
  justify-content:center; background:var(--primary-container);
  color:var(--on-primary-container); }
.empty-state__icon svg { width:34px; height:34px; }
.empty-state h2 { font-size:1.35rem; font-weight:700; margin:0 0 .5rem;
  letter-spacing:-.01em; }
.empty-state p { color:var(--muted); font-size:.95rem; margin:0;
  line-height:1.55; }

/* ── Read-only HTML tabulky (vykon pivot / control / log) ─────────── */
/* Read-only tabulky = stejná karta jako Tabulator editor (rám/zaoblení/
   stín/podklad) → vizuálně jednotná appka (Kontrola/Výkon/Log i editor). */
.scrollx { overflow-x:auto; max-height:78vh; overflow-y:auto;
  border:1px solid var(--border); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--sh-1); }
table.grid { border-collapse:collapse; width:100%; font-size:.85rem; }
table.grid th, table.grid td { border:1px solid var(--border-d);
  padding:.4rem .6rem; text-align:right; white-space:nowrap; }
table.grid th { position:sticky; top:0; background:var(--surface-2);
  z-index:2; font-weight:700; color:var(--on-surface-var);
  border-bottom:2px solid var(--border); }
table.grid td.txt, table.grid th.txt { text-align:left; }
table.grid tr:nth-child(even) td { background:var(--surface-1); }
table.grid tbody tr:hover td { background:var(--accent-l); }

/* Jediná řeč: verdikt řádku = pill ve sloupci „Stav". Buňka, která
   verdikt způsobila (čerpání/metrika), dostane jen BAREVNÉ TUČNÉ ČÍSLO
   — žádný plný barevný blok (jinak dvě soupeřící signalizace = zmatek).
   Pill říká „co", barevné číslo „čím". */
table.grid td.st-green  { color:var(--ok);   font-weight:800; }
table.grid td.st-yellow { color:var(--warn); font-weight:800; }
table.grid td.st-red    { color:var(--err); font-weight:800; }

/* Souhrnný „Stav" sloupec = kompaktní badge (uživatel nemusí
   interpretovat každé číslo ručně). Ne KPI karta — pill v buňce. */
table.grid td.st-badge { text-align:center; }
table.grid td.st-badge.st-green,
table.grid td.st-badge.st-yellow,
table.grid td.st-badge.st-red { font-weight:inherit; }
table.grid td.st-badge span { display:inline-block; padding:.16rem .6rem;
  border-radius:var(--r-full); font-size:.76rem; font-weight:800;
  letter-spacing:.02em; border:1px solid transparent; }
td.st-badge.st-green  span { background:var(--ok-bg); color:var(--ok);
  border-color:var(--ok-bd); }
td.st-badge.st-yellow span { background:var(--warn-bg); color:var(--warn);
  border-color:var(--warn-bd); }
td.st-badge.st-red    span { background:var(--err-bg); color:var(--err);
  border-color:var(--err-bd); }

/* ── Tabulator: vizuální jistota u rizikového editoru ───────────── */
.tabulator { font-size:.85rem; border:1px solid var(--border);
  border-radius:var(--r); background:var(--surface);
  box-shadow:var(--sh-1); }
.tabulator .tabulator-header { background:var(--surface-2);
  font-weight:700; border-bottom:2px solid var(--border);
  color:var(--on-surface-var); }
.tabulator-col.col-edit .tabulator-col-title { color:var(--accent-d); }
/* Editovatelné = pozitivní signál UŽ V KLIDU (ne až na hover): jemný
   modrý podklad + tmavší text + náznak levého akcentu. Read-only = šedý
   tonální podklad, žádný akcent. Rozdíl „tady piš vs. live z platformy"
   musí být čitelný na první pohled (rizikový editor živých účtů). */
.tabulator-cell.col-edit { cursor:text; background:#f3f7ff;
  color:var(--ink); box-shadow:inset 2px 0 0 rgba(27,95,217,.35); }
.tabulator-cell.col-ro { background:var(--surface-2); color:var(--ro-ink);
  cursor:default; }
.tabulator-row:hover .tabulator-cell.col-ro { background:var(--surface-2); }
.tabulator-row:hover .tabulator-cell.col-edit {
  background:var(--accent-l); box-shadow:inset 0 0 0 1px rgba(27,95,217,.25); }
.tabulator-cell.tabulator-editing {
  box-shadow:inset 0 0 0 2px var(--primary) !important;
  background:#fff !important; }
.tabulator-cell.edited,
.tabulator-row:hover .tabulator-cell.edited {
  background:var(--warn-bg) !important;
  box-shadow:inset 3px 0 0 var(--warn) !important; }
.tabulator-cell.tabulator-frozen, .tabulator-col.tabulator-frozen {
  box-shadow:6px 0 6px -6px rgba(20,30,60,.20); }
.tabulator-row.tabulator-selectable:hover { cursor:default; }

.htmx-indicator { opacity:0; transition:opacity .2s; }
.htmx-request .htmx-indicator { opacity:1; }
.htmx-request.htmx-indicator { opacity:1; }

/* ── Login (stejný MD3 systém) ───────────────────────────────────── */
body.login { background:var(--bg); display:flex; flex-direction:column;
  align-items:center; justify-content:center; min-height:100vh;
  padding:1.5rem; }
.login-card { background:var(--surface); width:100%; max-width:420px;
  padding:2.6rem 2.4rem 2.4rem; border-radius:var(--r-xl);
  box-shadow:var(--sh-pop); text-align:center; }
.login-badge { width:60px; height:60px; margin:0 auto 1.3rem;
  border-radius:var(--r-lg); display:flex; align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,var(--primary),var(--accent-d));
  box-shadow:0 8px 20px -6px rgba(27,95,217,.45); }
.login-badge svg { width:28px; height:28px; color:#fff; }
.login-card h1 { font-size:1.7rem; font-weight:800; margin:0 0 .25rem;
  letter-spacing:-.02em; }
.login-card .sub { color:var(--muted); font-size:.98rem; margin:0 0 1.7rem; }
.login-err { background:var(--err-bg); color:var(--err);
  border:1px solid var(--err-bd); padding:.65rem .85rem;
  border-radius:var(--r-sm); font-size:.86rem; margin:0 0 1.1rem;
  text-align:left; }
.login-field { position:relative; display:flex; align-items:center;
  border:1.5px solid var(--border); border-radius:var(--r-lg);
  padding:0 .5rem 0 1rem; background:var(--surface);
  transition:border-color .15s, box-shadow .15s; }
.login-field:focus-within { border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(27,95,217,.16); }
.login-field input { flex:1; border:0; outline:0; background:transparent;
  font-size:1rem; padding:.95rem 0; color:var(--ink); }
.login-field input::placeholder { color:var(--faint); }
.login-count { display:none; min-width:22px; height:22px; padding:0 6px;
  align-items:center; justify-content:center; font-size:.72rem;
  font-weight:700; color:#fff; border-radius:var(--r-sm);
  background:var(--primary); margin-right:.35rem; }
.login-count.on { display:flex; }
.login-toggle { border:0; background:transparent; cursor:pointer;
  padding:.4rem; color:var(--faint); display:flex; align-items:center;
  border-radius:var(--r-sm); }
.login-toggle:hover { color:var(--muted); background:transparent; }
.login-toggle svg { width:20px; height:20px; }
.login-submit { width:100%; margin-top:1.4rem; padding:.95rem;
  font-size:1.02rem; font-weight:700; color:#fff; background:var(--primary);
  border:1px solid var(--primary); border-radius:var(--r-full);
  cursor:pointer; box-shadow:var(--sh-2);
  transition:background .15s, transform .05s; }
.login-submit:hover { background:var(--accent-d);
  border-color:var(--accent-d); }
.login-submit:active { transform:translateY(1px); }
.login-foot { color:var(--muted); font-size:.85rem; margin-top:1.5rem;
  font-weight:600; letter-spacing:.01em; }