/* ============================================================
   Eserocka — Modern SaaS redesign
   Design tokens & global styles
   ============================================================ */

:root {
  /* Natívne ovládacie prvky (select popup, scrollbar, date picker) → svetlá schéma. */
  color-scheme: light;
  /* ── Colors (light) ───────────────────────────────────────── */
  --bg: #F7F8FA;
  --bg-elev: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #FAFAFB;
  --surface-3: #F3F4F6;
  --border: #E6E8EE;
  --border-strong: #D5D9E2;
  --text: #0B1220;
  --text-2: #475066;
  --text-3: #7A8298;
  --text-muted: #9AA1B2;

  /* Brand */
  --brand: #4F46E5;          /* indigo-600 */
  --brand-hover: #4338CA;
  --brand-soft: #EEF0FE;
  --brand-soft-2: #E0E4FD;
  --brand-ring: rgba(79, 70, 229, 0.18);

  /* Status */
  --success: #10A971;
  --success-soft: #E8F7F0;
  --warning: #D97706;
  --warning-soft: #FEF3E2;
  --danger: #DC2626;
  --danger-soft: #FCEBEB;
  --info: #2563EB;
  --info-soft: #E8F0FE;
  --neutral: #64748B;
  --neutral-soft: #EEF0F4;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.04), 0 16px 32px rgba(15, 23, 42, 0.08);
  --shadow-pop: 0 8px 24px rgba(15, 23, 42, 0.10), 0 24px 64px rgba(15, 23, 42, 0.12);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Type */
  --font-sans: "Geist", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Layout */
  --topbar-h: 60px;
  --tabsbar-h: 50px;

  /* Legacy brand bar — modrý gradient #0F3964 → #2388ED. */
  --brand-bar: linear-gradient(135deg, #0F3964 0%, #2388ED 100%);
  --brand-bar-solid: #0F3964;
  --brand-bar-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 2px rgba(15, 57, 100, 0.25), 0 2px 16px rgba(15, 57, 100, 0.18);
}

[data-theme="dark"] {
  /* Natívne ovládacie prvky (select popup, scrollbar, date picker) → tmavá schéma → čitateľný text. */
  color-scheme: dark;
  --bg: #0A0B0F;
  --bg-elev: #11131A;
  --surface: #14161E;
  --surface-2: #181A23;
  --surface-3: #1F222C;
  --border: #232733;
  --border-strong: #2E3340;
  --text: #F1F3F8;
  --text-2: #B4BAC9;
  --text-3: #848A9C;
  --text-muted: #5F6577;

  --brand: #818CF8;
  --brand-hover: #A5B4FC;
  --brand-soft: #1C1F35;
  --brand-soft-2: #262A4A;
  --brand-ring: rgba(129, 140, 248, 0.25);

  --success: #34D399;
  --success-soft: #112620;
  --warning: #FBBF24;
  --warning-soft: #2B1F10;
  --danger: #F87171;
  --danger-soft: #2A1414;
  --info: #60A5FA;
  --info-soft: #122036;
  --neutral: #94A3B8;
  --neutral-soft: #1B1E27;

  /* Brand bar v dark mode — tmavšia varianta legacy gradientu. */
  --brand-bar: linear-gradient(135deg, #0A2640 0%, #1A6FC9 100%);
  --brand-bar-solid: #0A2640;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.3), 0 16px 32px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.55);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
/* Poistka: žiadny prvok (aj keď je omylom širší než viewport) nesmie roztiahnuť CELÚ stránku
   vodorovne — vlastný horizontálny scroll majú len explicitne určené kontajnery (.bh-scroll,
   .tb-scroll, .table-scroll, …). Príliš široký obsah sa tak oreže namiesto toho, aby "rozšíril
   obrazovku".
   POZOR: len na `html`, NIKDY aj na `body` — `body { overflow-x: hidden }` spolu s `height: 100%`
   spraví z body vlastný scroll kontajner, čím sa rozbije scrollovanie okna (`window.scrollTo`,
   scroll na kotvu aj obnova pozície po reloade prestanú fungovať). Overflow z `html` sa podľa
   špecifikácie propaguje na viewport, čo je presne to, čo chceme. */
html { overflow-x: hidden; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  transition: background 0.2s ease, color 0.2s ease;
}
button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
/* Natívne <option> v rozbalenom select popupe — explicitné farby témy (poistka popri color-scheme,
   rieši nečitateľný text v tmavom režime: dropdowny + prepínač firmy). */
select option, select optgroup { background: var(--surface); color: var(--text); }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }
/* Reboot-parita po odstránení Bootstrapu z LayoutV2: inline SVG (Lucide ikony) + obrázky
   centrované na text, aby v nadpisoch / inline labeloch nesadali na baseline. */
svg, img { vertical-align: middle; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 8px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ── App shell ─────────────────────────────────────────────── */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
}

/* ── Brand header ──────────────────────────────────────────── */
.brand-header {
  height: var(--topbar-h);
  background: var(--brand-bar);
  box-shadow: var(--brand-bar-shadow);
  color: white;
  position: sticky;
  top: 0;
  z-index: 60;
}
/* Horizontálny scroll ide na VNÚTORNÝ wrapper, nie na `.brand-header` samotný — `position:sticky`
   spolu s `overflow-x:auto` na TOM ISTOM elemente vie na niektorých mobilných prehliadačoch
   spočítať šírku boxu nesprávne (lišta sa vykreslí orezaná na zlomok viewportu, namiesto
   celej šírky). Outer `<header>` len sticky-uje; `.bh-scroll` rieši layout + prípadný scroll. */
.bh-scroll {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bh-scroll::-webkit-scrollbar { display: none; }
/* Pevné položky (logo, firma, ikony, user) sa nestláčajú → pri pretečení sa lišta
   posúva namiesto rozširovania stránky. .bh-spacer a .bh-search ostávajú pružné
   (ich vlastné pravidlá nižšie obnovia flex-shrink:1). */
.bh-scroll > * { flex-shrink: 0; }
.bh-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.bh-logo-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: grid; place-items: center;
  backdrop-filter: blur(4px);
}
.bh-logo-wordmark {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bh-logo-wordmark .sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.28);
}
.bh-logo-wordmark .sub {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.bh-spacer { flex: 1; }

.bh-search {
  flex: 1;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  height: 34px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-md);
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.15s, border-color 0.15s;
}
.bh-search:focus-within {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
}
.bh-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: white;
  font-size: 13px;
}
.bh-search input::placeholder { color: rgba(255, 255, 255, 0.65); }
.bh-search .kbd {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 5px;
  font-family: var(--font-mono);
}

.bh-company {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px 5px 10px;
  height: 36px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  border-radius: 10px;
  cursor: pointer;
  border: 0;
  font: inherit;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 2px 8px rgba(0, 0, 0, 0.08);
}
.bh-company:hover { background: white; }
/* Dark režim: pill nesmie ostať biely (text var(--text) je svetlý → svetlé na bielom = neviditeľné).
   Tmavé priesvitné pozadie na modrej lište → svetlý text je čitateľný, konzistentné s témou. */
[data-theme="dark"] .bh-company {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
[data-theme="dark"] .bh-company:hover { background: rgba(255, 255, 255, 0.18); }
.bh-company-mark {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, #F59E0B, #EA580C);
  color: white;
  font-weight: 700;
  font-size: 10.5px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.bh-company-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bh-company-code {
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 500;
}
.bh-company .chev {
  color: var(--text-3);
  margin-right: 2px;
}
/* Prepínač firmy — VLASTNÝ dropdown (nie natívny select), aby rešpektoval tmavú tému. */
.bh-company-wrap { position: relative; margin: 0; border: 0; padding: 0; }
.bh-company-menu {
  display: none;
  /* fixed (nie absolute) — .brand-header má overflow-y:hidden, absolútny dropdown by sa orezal.
     top/left nastaví JS z pozície tlačidla pri otvorení. */
  position: fixed;
  min-width: 248px;
  width: max-content;
  max-width: calc(100vw - 24px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  padding: 6px;
  z-index: 220;
  max-height: 64vh;
  overflow: auto;
}
.bh-company-menu.open { display: block; }
.bh-company-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: none;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font: inherit;
}
.bh-company-item:hover { background: var(--surface-2); }
.bh-company-item.active { background: var(--brand-soft); color: var(--brand); }
.bh-company-item .ci-name { font-size: 13px; font-weight: 600; white-space: nowrap; }
.bh-company-item .ci-code { font-size: 11px; color: var(--text-3); font-weight: 500; }
.bh-company-item.active .ci-code { color: var(--brand); }

/* ── Vlastný select (.f-select) — náhrada natívneho <select> tam, kde natívny popup nerešpektuje
   tmavú tému (color-scheme). Plne v CSS → garantovane čitateľný v light aj dark. ───────────── */
.f-select { position: relative; display: inline-block; }
.f-select-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.f-select-btn:hover { border-color: var(--border-strong); }
.f-select-btn .fs-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-select-btn .fs-chev { color: var(--text-3); flex-shrink: 0; }
.f-select-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;           /* rastie podľa najširšej položky (žiadne zalamovanie názvov) */
  max-width: calc(100vw - 24px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  padding: 5px;
  z-index: 130;
  max-height: 320px;
  overflow: auto;
}
.f-select-menu.open { display: block; }
.f-select-item {
  display: block; width: 100%;
  padding: 8px 10px;
  border: 0; background: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;          /* názov firmy na jeden riadok */
  color: var(--text);
  font: inherit; font-size: 13px;
}
.f-select-item:hover { background: var(--surface-2); }
.f-select-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

.bh-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 4px;
  height: 36px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: white;
  cursor: pointer;
}
.bh-user:hover { background: rgba(255, 255, 255, 0.22); }
.bh-user-avatar {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, #06B6D4 0%, #818CF8 100%);
  color: white;
  font-weight: 700;
  font-size: 11px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.bh-user-mail {
  font-size: 13px;
  font-weight: 500;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 4px;
}
.bh-icon-btn {
  width: 34px; height: 34px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: white;
  display: grid; place-items: center;
  cursor: pointer;
  position: relative;
  transition: background 0.12s;
}
.bh-icon-btn:hover { background: rgba(255, 255, 255, 0.22); }
.bh-icon-btn .dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 7px; height: 7px;
  background: #FB923C;
  border: 2px solid var(--brand-bar-solid);
  border-radius: 50%;
}
/* Odznak zvončeka — počet neprečítaných správ (nie len bodka: číslo hovorí, koľko ich je). */
.bh-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  background: #FB923C;
  border: 2px solid var(--brand-bar-solid);
  border-radius: 9px;
  color: #1F2937;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}
.bh-divider {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.22);
}

/* ── Tabs bar (sub-nav) ────────────────────────────────────── */
.tabs-bar {
  height: var(--tabsbar-h);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--topbar-h);
  z-index: 50;
}
/* Rovnaký dôvod ako `.bh-scroll` vyššie — sticky + self-scroll na tom istom elemente je
   nespoľahlivé, horizontálny scroll pri pretečení tabov preto rieši vnútorný wrapper. */
.tb-scroll {
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tb-scroll::-webkit-scrollbar { display: none; }
/* Pretečená lišta: jemný prechod vpravo hovorí, že tam ešte niečo je. Trieda `has-more` prichádza
   z LayoutV2 (globálny skript), ktorý zároveň mapuje koliesko myši na vodorovný posun — bez toho
   sa myšou k schovaným položkám nedalo dostať (skrytý scrollbar). Vzniká to najmä vtedy, keď je
   vpravo pripnutý sken (`.dok-sp`) a obsah stránky sa zúži. */
.brand-header, .tabs-bar { position: sticky; }
.brand-header.has-more::after,
.tabs-bar.has-more::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
}
.brand-header.has-more::after { background: linear-gradient(to right, rgba(0,0,0,0), var(--brand-bar)); }
.tabs-bar.has-more::after     { background: linear-gradient(to right, rgba(0,0,0,0), var(--bg-elev)); }
.tab-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 100%;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  border: 0;
  background: transparent;
  position: relative;
  transition: color 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.tab-link:hover { color: var(--text); }
.tab-link.active { color: var(--brand); }
.tab-link.active::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px;
  bottom: -1px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
}
.tab-link svg { width: 16px; height: 16px; }
.tab-link .pill {
  font-size: 10.5px;
  background: var(--surface-3);
  color: var(--text-2);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tab-link.active .pill {
  background: var(--brand-soft);
  color: var(--brand);
}

.tabs-bar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-left: 8px;
}

/* ── Mobile (≤ 768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
  /* Brand header — kompaktnejší */
  .bh-scroll { padding: 0 12px; gap: 8px; }
  .bh-search { display: none; }
  .bh-spacer { display: none; }
  .bh-logo-wordmark { display: none; }
  .bh-company { padding: 4px 8px; }
  .bh-company-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bh-company-code { display: none; }
  .bh-user span.uname { display: none; }   /* user pill — len iniciálky */

  /* Tabs bar — horizontal scroll na mobile + skry "Nová faktúra" tlačidlo */
  .tb-scroll {
    padding: 0 8px;
    scroll-snap-type: x proximity;
  }
  .tab-link { padding: 0 10px; font-size: 12.5px; flex-shrink: 0; scroll-snap-align: start; }
  .tab-link svg { width: 14px; height: 14px; }
  .tab-link .pill { font-size: 10px; padding: 0 6px; }
  .tabs-bar-actions { display: none; }   /* "Nová faktúra" v tabs bar skrytá → FAB nižšie */

  /* Floating action button — "Nová faktúra" prístupná na mobile */
  .fkt-fab {
    position: fixed;
    right: 16px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
    z-index: 900;
    border: 0;
    cursor: pointer;
    text-decoration: none;
  }
  .fkt-fab:hover { background: var(--brand-hover); }
  .fkt-fab svg { width: 24px; height: 24px; }

  /* Content padding na mobile */
  .content { padding: 16px 12px 80px; }

  /* Status timeline (detail faktúry) — 4-5 vodorovných stĺpcov sa na úzky telefón nezmestí
     (jednoslovné labely ako "Vystavená"/"Odoslaná" nemajú medzeru na prirodzené zalomenie a
     v tesnom stĺpci by aj s break-word pôsobili natlačené) → na mobile vertikálny zoznam
     (ikona + popis + dátum v jednom riadku, kroky pod sebou namiesto vedľa seba). */
  .timeline { flex-direction: column; gap: 14px; }
  .tl-step {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding-right: 0;
  }
  .tl-step:not(:last-child)::after { display: none; }
  .tl-step .tl-label { flex: 1; min-width: 0; }
  .tl-step .tl-date { flex-shrink: 0; margin-top: 0; text-align: right; }
}
@media (min-width: 769px) {
  .fkt-fab { display: none; }
}

/* ── Main content ──────────────────────────────────────────── */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* generic ghost icon button reused across the app */
.topbar-icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  display: grid; place-items: center;
  cursor: pointer;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.topbar-icon-btn:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

.content {
  flex: 1;
  padding: 28px 32px 60px;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
}

/* ── Typography utilities ──────────────────────────────────── */
.h-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}
.h-1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.15;
}
.h-2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.3;
}
.h-3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
}
.label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.muted { color: var(--text-3); }
.muted-2 { color: var(--text-2); }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── Card ──────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* flex-basis: auto → nadpis si drží šírku a akčné tlačidlá sa pri pretečení zalomia pod neho. */
.card-head h2 { flex: 1 1 auto; }
.card-head-wrap { flex-wrap: wrap; }   /* alias — základ už zalamuje */
.card-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* `overflow-wrap: anywhere` (NIE `break-word`!) — poistka pre reálne dáta (mená firiem, IBAN,
   adresy…), ktoré niekedy obsahujú nezalomiteľné medzery (U+00A0) alebo iné znaky bez prirodzeného
   bodu zalomenia. `break-word` rieši len VIZUÁLNE pretečenie pri layoute, ale NEZMENŠÍ min-content
   príspevok elementu do predka — vnútri `.two-col` (CSS grid) preto `auto` track sizing naďalej
   počítal s plnou (nezalomenou) šírkou textu a naťahoval CELÝ grid-stĺpec (a všetky karty v ňom) na
   šírku najdlhšieho nezalomiteľného reťazca, aj na úzkom telefóne. `anywhere` znižuje aj min-content,
   takže grid stĺpec aj karty sa správne zmestia do dostupnej šírky. Text s bežnými medzerami sa
   správa úplne rovnako ako predtým. */
.card-body { padding: 20px; overflow-wrap: anywhere; }
.card-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 2px var(--brand-ring);
}
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-danger {
  background: var(--surface);
  border-color: var(--border);
  color: var(--danger);
}
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }

.btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: var(--r-sm);
}
.btn-sm svg { width: 13px; height: 13px; }

/* Tlačidlo s dlhým popisom — text sa smie zalomiť do viacerých riadkov, keď sa nezmestí na šírku
   (základný `.btn` má `white-space: nowrap` + fixnú výšku, takže dlhý popis pretiekol z kontajnera
   von z obrazovky). Výška dorastie podľa počtu riadkov; `min-height` drží pôvodnú výšku pri
   jednoriadkovom texte, nech sa vzhľad v riadku s inými tlačidlami nemení. */
.btn-wrap {
  white-space: normal;
  height: auto;
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.3;
  text-align: left;
}
.btn-wrap.btn-sm { min-height: 28px; }
.btn-wrap svg { flex-shrink: 0; }

.btn-icon {
  width: 32px;
  padding: 0;
}

/* ── Badge / chip ──────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger);  }
.badge-info    { background: var(--info-soft);    color: var(--info);    }
.badge-neutral { background: var(--neutral-soft); color: var(--neutral); }
.badge-brand   { background: var(--brand-soft);   color: var(--brand);   }
[data-theme="dark"] .badge-success,
[data-theme="dark"] .badge-warning,
[data-theme="dark"] .badge-danger,
[data-theme="dark"] .badge-info,
[data-theme="dark"] .badge-neutral,
[data-theme="dark"] .badge-brand { font-weight: 500; }

/* ── KPI / Stat ────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}
/* Klikateľná dlaždica — vedie na evidenciu, z ktorej číslo pochádza. Šípka sa objaví pri
   hoveri, aby pokojný stav dashboardu ostal čistý (rovnaký princíp ako chipy upozornení). */
.kpi-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.kpi-link:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(2, 8, 23, .10));
  transform: translateY(-1px);
}
.kpi-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.kpi-go {
  position: absolute;
  right: 14px;
  bottom: 14px;
  color: var(--text-3);
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity .12s ease, transform .12s ease;
}
.kpi-link:hover .kpi-go { opacity: 1; transform: translateX(0); }
.kpi-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 500;
}
.kpi-label svg { width: 14px; height: 14px; }
.kpi-value {
  margin-top: 6px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kpi-value .cur {
  font-size: 14px;
  color: var(--text-3);
  font-weight: 500;
  margin-left: 4px;
}
.kpi-delta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
}
.kpi-delta .up   { color: var(--success); }
.kpi-delta .down { color: var(--danger); }
.kpi-spark {
  position: absolute;
  right: 14px; top: 14px;
  width: 64px; height: 28px;
}

/* ── Table ─────────────────────────────────────────────────── */
.table {
  width: 100%;
  font-size: 13px;
}
.table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}
.table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: 0; }
.table tr.row-link { cursor: pointer; transition: background 0.1s; }
.table tr.row-link:hover { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .col-id { font-family: var(--font-mono); font-weight: 500; color: var(--text-2); font-size: 12.5px; }
/* Horizontálny posuvník pre široké tabuľky na úzkych/mobilných obrazovkách (zoznam faktúr a pod.).
   min-width na tabuľke vynúti scroll namiesto zalamovania stĺpcov; na desktope (širší .card) sa neprejaví. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > .table { min-width: 760px; }


/* ── Reporty filter — natívny v2 chip multiselect (sortiment/položka/odberateľ) ── */
.rpt-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-soft-2); border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 500; }
.rpt-chip-x { cursor: pointer; color: var(--brand); text-decoration: none; opacity: .65; font-weight: 600; }
.rpt-chip-x:hover { opacity: 1; }
.rpt-sugg { position: absolute; z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-pop); max-height: 320px; overflow-y: auto; left: 0; right: 0; top: 100%; margin-top: 4px; }
.rpt-sugg-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border); padding: 8px 12px; font-size: 13px; color: var(--text); cursor: pointer; }
.rpt-sugg-item:last-child { border-bottom: 0; }
.rpt-sugg-item:hover:not(:disabled) { background: var(--surface-2); }
.rpt-sugg-item:disabled { opacity: .45; cursor: default; }
.rpt-sugg-item .meta { color: var(--text-3); font-size: 11.5px; }
/* Reporty — dlaždice datasetov (dashboard + exporty) */
.report-tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 900px) { .report-tile-grid { grid-template-columns: 1fr; } }
.report-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); transition: border-color .15s; }
.report-tile:hover { border-color: var(--brand); }
.report-tile-ico { width: 36px; height: 36px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; }
/* Reporty — rok multiselect ako toggle chipy */
.rpt-years { display: flex; flex-wrap: wrap; gap: 6px; }
.rpt-year-chip { display: inline-flex; align-items: center; cursor: pointer; user-select: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; transition: background .12s, border-color .12s, color .12s; }
.rpt-year-chip:hover { background: var(--surface-2); }
.rpt-year-chip.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
/* Reporty — JS filter widgety (multi-select dropdown + autocomplete) v2 štýl */
.js-msd-trigger { width: 100%; text-align: left; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-sm); padding: 9px 11px; font: inherit; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.js-msd-panel, .js-ac-dropdown, .js-acm-dropdown { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-pop); }
.js-msd-search { width: 100%; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-sm); padding: 7px 10px; font: inherit; }
.js-msd-option, .js-ac-item, .js-acm-item { padding: 6px 10px; font-size: 13px; color: var(--text); cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 8px; }
.js-msd-option:hover, .js-ac-item:hover, .js-acm-item:hover { background: var(--surface-2); }
.js-msd-cb { width: 15px; height: 15px; accent-color: var(--brand); }
.js-acm-wrap { width: 100%; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: var(--r-sm); padding: 5px 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 38px; cursor: text; }
.js-acm-input { flex: 1 1 80px; border: 0 !important; outline: none; background: transparent !important; color: var(--text); font: inherit; min-width: 80px; box-shadow: none !important; padding: 4px 2px !important; }
.js-acm-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-soft-2); border-radius: 6px; padding: 2px 7px; font-size: 12px; }
/* Reporty — pagination náhľadu (v2, prebíja Bootstrap .pagination/.page-link) */
.rpt-pg { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0; }
.rpt-pg .page-link { display: block; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 6px; padding: 5px 10px; font-size: 13px; text-decoration: none; cursor: pointer; }
.rpt-pg .page-link:hover { background: var(--surface-2); }
.rpt-pg .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }
.rpt-pg .page-item.disabled .page-link { opacity: .4; pointer-events: none; }

/* ── Filters bar ───────────────────────────────────────────── */
.filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 12.5px;
  cursor: pointer;
}
.filter-chip:hover { background: var(--surface-3); }
.filter-chip.active {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand-soft-2);
}
.filter-chip svg { width: 13px; height: 13px; }
.filter-chip .count {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.filter-chip.active .count {
  background: white;
  border-color: transparent;
  color: var(--brand);
}

/* ── Customer card ─────────────────────────────────────────── */
.customer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: white;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}
.avatar-sm { width: 24px; height: 24px; font-size: 10.5px; border-radius: 6px; }
.avatar-lg { width: 44px; height: 44px; font-size: 15px; border-radius: 10px; }
.avatar-xl { width: 56px; height: 56px; font-size: 18px; border-radius: 12px; }

/* ── Timeline ──────────────────────────────────────────────── */
.timeline {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 4px 0 4px;
}
.tl-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  padding-right: 12px;
  min-width: 0;
}
/* Spojovacia čiara: zo stredu markera tohto kroku doprava až k markeru nasledujúceho.
   Vďaka tomu čiara začína už od prvého dokladu v procese (výdajky). */
.tl-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 10px;
  height: 2px;
  width: 100%;
  background: var(--border);
  z-index: 0;
}
.tl-step.done:not(:last-child)::after { background: var(--success); }
.tl-step .marker {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border);
  display: grid; place-items: center;
  z-index: 1;
  position: relative;
  color: var(--text-3);
}
.tl-step.done .marker {
  background: var(--success);
  border-color: var(--success);
  color: white;
}
.tl-step.current .marker {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-ring);
}
.tl-step .marker svg { width: 12px; height: 12px; }
.tl-step .tl-label {
  font-size: 12.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.tl-step.pending .tl-label { color: var(--text-3); }
.tl-step .tl-date {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: -4px;
  overflow-wrap: anywhere;
}

/* ── Definition list ───────────────────────────────────────── */
.dl {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 12px 20px;
  align-items: baseline;
}
.dl dt {
  font-size: 12.5px;
  color: var(--text-3);
  font-weight: 500;
}
.dl dd {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.dl dd.mono { font-size: 12.5px; }

/* ── Items table on detail ─────────────────────────────────── */
.items {
  width: 100%;
  font-size: 13px;
}
.items th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.items th.num, .items td.num { text-align: right; font-variant-numeric: tabular-nums; }
.items td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.items tr:last-child td { border-bottom: 0; }
.item-name { font-weight: 500; }
.item-desc { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.items tr.editable:hover {
  background: var(--surface-2);
}
.items input.edit {
  width: 100%;
  border: 1px solid var(--brand);
  border-radius: 6px;
  background: var(--surface);
  padding: 4px 6px;
  font: inherit;
  color: var(--text);
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-ring);
}

/* ── Totals box ────────────────────────────────────────────── */
.totals {
  margin-left: auto;
  width: 320px;
}
.totals-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-2);
}
.totals-row .v {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text);
}
.totals-row.total {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 14px;
  font-size: 16px;
  font-weight: 600;
}
.totals-row.total .v {
  font-size: 22px;
  letter-spacing: -0.015em;
}

/* ── Rekapitulácia DPH (vľavo od totals v card-foot) ── */
.dph-recap {
  align-self: flex-start;
}
.dph-recap .dr-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 8px;
}
.dph-recap table {
  border-collapse: collapse;
  font-size: 12.5px;
}
.dph-recap th,
.dph-recap td {
  padding: 5px 16px 5px 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dph-recap th {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.dph-recap td { color: var(--text-2); }
.dph-recap th:first-child,
.dph-recap td:first-child { text-align: left; }
.dph-recap td:last-child { color: var(--text); font-weight: 600; }

/* ── PDF preview ───────────────────────────────────────────── */
.pdf-shell {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pdf-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.pdf-toolbar .page {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.pdf-frame {
  padding: 20px;
  display: flex;
  justify-content: center;
  overflow: auto;
}
.pdf-page {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1.414;
  background: white;
  color: #111;
  border-radius: 3px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18), 0 1px 2px rgba(15, 23, 42, 0.10);
  padding: 30px 32px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
}

/* ── Activity log ──────────────────────────────────────────── */
.activity { display: flex; flex-direction: column; gap: 0; }
.act-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  position: relative;
}
.act-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.act-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--text-2);
  flex-shrink: 0;
  z-index: 1;
}
.act-icon.brand { background: var(--brand-soft); border-color: var(--brand-soft-2); color: var(--brand); }
.act-icon.success { background: var(--success-soft); border-color: var(--success-soft); color: var(--success); }
.act-icon svg { width: 13px; height: 13px; }
.act-body { flex: 1; min-width: 0; }
.act-title { font-size: 13px; font-weight: 500; color: var(--text); }
.act-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.act-note {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  color: var(--text-2);
}

/* ── Comments composer ────────────────────────────────────── */
.composer {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.composer:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.composer textarea {
  border: 0;
  resize: none;
  background: transparent;
  outline: none;
  min-height: 50px;
  width: 100%;
  font-size: 13px;
}
.composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Banner ────────────────────────────────────────────────── */
.banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  border: 1px solid;
  background: var(--surface);
  margin-bottom: 20px;
}
.banner-warning { background: var(--warning-soft); border-color: rgba(217, 119, 6, 0.25); color: var(--warning); }
.banner-info { background: var(--info-soft); border-color: rgba(37, 99, 235, 0.2); color: var(--info); }
.banner-danger { background: var(--danger-soft); border-color: rgba(220, 38, 38, 0.25); color: var(--danger); }
/* .banner-success sa používal (Banka, Pokladňa, ORP), ale trieda chýbala — banner ostával biely. */
.banner-success { background: var(--success-soft); border-color: rgba(16, 169, 113, 0.25); color: var(--success); }
.banner .b-icon { flex-shrink: 0; }
.banner .b-icon svg { width: 20px; height: 20px; }
.banner .b-body { flex: 1; min-width: 0; }
.banner .b-title { font-weight: 600; font-size: 13.5px; }
.banner .b-msg { font-size: 12.5px; opacity: 0.85; margin-top: 1px; }

/* ── Detail page heading ───────────────────────────────────── */
.page-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.page-head .ph-left { flex: 1; min-width: 0; }
.page-head .ph-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-3);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  margin-bottom: 8px;
}
.page-head .ph-back:hover { color: var(--text); }
.page-head .ph-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.page-head .ph-meta {
  font-size: 13px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.page-head .ph-meta .sep { color: var(--text-muted); }
.page-head .ph-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
  /* `min-width: 0` (nie flex-shrink:0) — bez toho si položka pýta od `.page-head` šírku podľa
     VLASTNÝCH detí NEZALOMENÝCH (tlačidlá na jeden riadok), aj keď má vlastný `flex-wrap: wrap`;
     na úzkom telefóne to tlačilo celú stránku doširoka namiesto toho, aby sa tlačidlá zalomili. */
  min-width: 0;
}
/* Mobile: horizontálny posuvník namiesto zalamovania do viacerých riadkov (čitateľnejšie,
   kratší page-head) — rovnaký vzor ako `.fkt-export-chips` nižšie. Musí prísť AŽ PO základnom
   pravidle vyššie (rovnaká špecifickosť selektora `.page-head .ph-actions` — v cascade vyhráva
   posledný v poradí v súbore, nie poloha vnútri media query). */
@media (max-width: 768px) {
  .page-head .ph-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    max-width: 100%;
  }
  .page-head .ph-actions > * { flex-shrink: 0; }
  .page-head .ph-actions::-webkit-scrollbar { height: 4px; }
  .page-head .ph-actions::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
}

/* Export chipy (XLSX/CSV/PDF) — nikdy nerozširujú stránku: cap na dostupnú šírku + horizontálny
   posuvník (riadok sa scrolluje, chipy sa nezmršťujú/nezalamujú). Funguje naprieč stránkami. */
.fkt-export-chips {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  vertical-align: middle;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.fkt-export-chips > * { flex-shrink: 0; white-space: nowrap; }
.fkt-export-chips::-webkit-scrollbar { height: 4px; }
.fkt-export-chips::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

/* ── Two-column detail grid ────────────────────────────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
  align-items: start;
}
.col-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Empty state */
.empty {
  text-align: center;
  color: var(--text-3);
  padding: 40px 20px;
  font-size: 13px;
}

/* progress meter (payment) */
.meter {
  height: 8px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: 8px;
}
.meter > div {
  height: 100%;
  background: var(--success);
  border-radius: inherit;
  transition: width 0.4s ease;
}
.meter.warning > div { background: var(--warning); }
.meter.danger > div { background: var(--danger); }

/* dropdown menu */
.menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 4px;
  z-index: 100;
  min-width: 200px;
  animation: fadein 0.12s ease;
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item svg { width: 14px; height: 14px; color: var(--text-3); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger svg { color: var(--danger); }
.menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
.menu-label {
  padding: 6px 12px 2px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg-elev);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1000;
  box-shadow: var(--shadow-pop);
  animation: toastin 0.2s ease;
}
@keyframes toastin {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.toast svg { width: 15px; height: 15px; color: var(--success); }

/* Modal */
.modal-back {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  z-index: 200;
  animation: fadein 0.15s ease;
}
[data-theme="dark"] .modal-back { background: rgba(0, 0, 0, 0.6); }
.modal {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-pop);
}
.modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-head h2 { flex: 1; }
.modal-body { padding: 20px; }
.modal-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.field label {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
}
.field input, .field textarea, .field select {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  font: inherit;
  color: var(--text);
  outline: none;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

/* Tabs */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding: 0 4px;
}
.tab {
  position: relative;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.tab:hover { color: var(--text-2); }
.tab.active { color: var(--text); }
.tab.active::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -1px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
}

/* Bar chart */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 160px;
  padding-top: 10px;
}
.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  cursor: pointer;
  min-width: 0;
}
.bar-col-stack {
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 2px;
  position: relative;
}
.bar-col-stack > .seg {
  border-radius: 3px;
  transition: opacity 0.15s;
}
.bar-col:hover .seg { opacity: 0.78; }
.bar-col-lbl {
  font-size: 10.5px;
  color: var(--text-3);
  text-align: center;
  font-weight: 500;
}

/* Donut */
.donut {
  width: 140px; height: 140px;
  flex-shrink: 0;
}

/* Sparkline svg */
.spark { display: block; }

/* Misc */
.row-flex {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.col-flex {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.spacer { flex: 1; }

/* Print PDF heading content (visual fidelity inside PDF preview) */
.pdf-page .pdf-h { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: #111; margin: 0; }
.pdf-page .pdf-row { display: flex; justify-content: space-between; }
.pdf-page .pdf-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 8.5px; }
.pdf-page .pdf-table th { background: #F4F5F8; text-align: left; padding: 5px 6px; font-weight: 600; color: #444; font-size: 8px; }
.pdf-page .pdf-table td { padding: 5px 6px; border-bottom: 1px solid #EEE; }
.pdf-page .pdf-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pdf-divider { height: 1px; background: #EAEBEF; margin: 14px 0; }

/* ── Pokladňa / receipts ───────────────────────────────────── */
.capture-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
}
.capture-bar::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand) 0%, #7C3AED 100%);
}
.capture-bar .qr-icon {
  width: 48px;
  display: grid;
  place-items: center;
  color: var(--brand);
  margin-left: 6px;
  flex-shrink: 0;
}
.capture-input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 4px;
  min-width: 220px;
}
.capture-input label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}
.capture-input input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 12px 0;
  min-width: 0;
}
.capture-input input::placeholder { color: var(--text-3); letter-spacing: 0; }
.capture-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 6px;
  flex-wrap: wrap;
}

/* receipt card (pending) */
.receipt-card {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.1s;
  cursor: pointer;
  overflow: hidden;
}
.receipt-card:hover {
  border-color: var(--brand-soft-2);
  box-shadow: var(--shadow-sm);
}
.receipt-card.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.rc-left {
  width: 6px;
  background: linear-gradient(180deg, var(--warning) 0%, #F59E0B 100%);
  flex-shrink: 0;
}
.receipt-card.income .rc-left {
  background: linear-gradient(180deg, var(--success) 0%, #059669 100%);
}
.receipt-card.income .rc-amount-value {
  color: var(--success);
}
.receipt-card.income .rc-amount-value::before {
  content: "+";
  margin-right: 2px;
}
.receipt-card.expense .rc-amount-value::before {
  content: "−";
  margin-right: 2px;
  color: var(--text-3);
  font-weight: 500;
}
.rc-link-invoice {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-mono);
  cursor: pointer;
  border: 1px solid var(--brand-soft-2);
  transition: background 0.12s;
}
.rc-link-invoice:hover { background: var(--brand-soft-2); }
.rc-link-invoice svg { width: 11px; height: 11px; }

/* Type chips */
.type-chips {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  flex-wrap: wrap;
}
.type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: 5px;
  background: transparent;
  border: 0;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.type-chip:hover { background: var(--surface-3); color: var(--text); }
.type-chip.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.type-chip svg { width: 12px; height: 12px; }
.type-chip .count {
  background: var(--surface-3);
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.type-chip.active.income .count { background: var(--success-soft); color: var(--success); }
.type-chip.active.expense .count { background: var(--warning-soft); color: var(--warning); }
.type-chip.active.all .count { background: var(--brand-soft); color: var(--brand); }
.type-chip.active.stock .count { background: var(--info-soft); color: var(--info); }

/* Viacero `.type-chips` skupín v jednom `.filters` riadku (napr. typ + úhrada vo Výdajkách) —
   na mobile/tablet nech sa poskladajú pod seba na celú šírku namiesto tlačenia vedľa seba
   (to by inak zúžilo sklad-select/hľadanie do nezmyselnej šírky, nie rozšírilo stránku — .filters
   aj samotné .type-chips už majú flex-wrap, ale bez tohto by sa skupiny snažili zmestiť vedľa seba
   čo najdlhšie predtým, než sa zalomia). */
@media (max-width: 768px) {
  .filters .type-chips { flex: 1 1 100%; }
}

/* Balance KPI hero */
.balance-card {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #1E40AF 100%);
  color: white;
  border-radius: var(--r-lg);
  position: relative;
  /* Statický obal (gradient + zaoblené rohy) — nescrolluje sa. Samotný vodorovný posuv je na
     vnútornom `.balance-card-scroll`, aby sa `::before` dekorácia nehýbala spolu s obsahom
     (keby `overflow-x:auto` sedel priamo tu, absolútne pozicovaný gradient by pri posuve odhalil
     neprekrytý okraj — `position:sticky` na pseudo-elemente sa nedá, lebo by sa stal reálnou
     flex položkou a rozbil layout). */
  overflow: hidden;
}
[data-theme="dark"] .balance-card {
  background: linear-gradient(135deg, #1B1E27 0%, #232733 50%, #1E3A8A 100%);
}
.balance-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 20%, rgba(96, 165, 250, 0.25) 0%, transparent 50%);
  pointer-events: none;
}
/* Vodorovný posuv obsahu namiesto orezania: na tablete/mobile sa akcie vpravo (Vloženie/výber
   hotovosti, Nákup/predaj valuty) nezmestia. Na širokej obrazovke sa nič nemení — obsah sa
   zmestí a scrollbar nevznikne. */
.balance-card-scroll {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
/* Scrollbar na tmavom hero — decentný, ale viditeľný, nech je zrejmé, že sa dá posunúť. */
.balance-card-scroll::-webkit-scrollbar { height: 6px; }
.balance-card-scroll::-webkit-scrollbar-track { background: transparent; }
.balance-card-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.32);
  border-radius: 3px;
}
.balance-card-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }
/* Obsah sa pri posuve nesmie stláčať — inak by sa scrollbar nikdy neobjavil a texty by sa lámali. */
.balance-card-scroll > * { flex-shrink: 0; }
.balance-card .b-ico {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: grid; place-items: center;
  flex-shrink: 0;
  position: relative;
}
.balance-card .b-lbl {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.balance-card .b-val {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 2px;
}
.balance-card .b-flow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 22px;
  margin-left: 22px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}
.balance-card .flow-row {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.balance-card .flow-row svg { width: 12px; height: 12px; }
.balance-card .flow-row .v { font-weight: 600; font-variant-numeric: tabular-nums; }

/* invoice picker (in PPD modal) */
.inv-pick-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  max-height: 280px;
  overflow-y: auto;
}
.inv-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.inv-pick + .inv-pick { border-top: 1px solid var(--border); }
.inv-pick:hover { background: var(--surface-2); }
.inv-pick.selected { background: var(--brand-soft); }
.inv-pick-id {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-2);
}
.inv-pick-customer { font-size: 13px; font-weight: 500; flex: 1; }
.inv-pick-amount { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.inv-pick-status { font-size: 11px; }

/* ── Sklad / warehouse ─────────────────────────────────────── */
.sub-nav {
  display: flex;
  gap: 4px;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sub-nav::-webkit-scrollbar { display: none; }
.sub-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-3);
  background: transparent;
  white-space: nowrap;
  flex-shrink: 0;
  border: 0;
  cursor: pointer;
  position: relative;
  transition: color 0.12s;
}
.sub-nav-link:hover { color: var(--text-2); }
.sub-nav-link.active { color: var(--brand); }
.sub-nav-link.active::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px;
  bottom: 0;
  height: 2px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
}
.sub-nav-link svg { width: 16px; height: 16px; }
.sub-nav-link .pill {
  margin-left: 2px;
  font-size: 10.5px;
  background: var(--surface-3);
  color: var(--text-2);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sub-nav-link.active .pill { background: var(--brand-soft); color: var(--brand); }

/* Stock row highlights — 4 stavy zhodné so .stock-pill (ok=žiadne podfarbenie, warn=oranžová,
   zero=sivá, danger=červená). Priorita: danger > warn > zero > ok, viď Sklad\View::stavRowsClassified. */
.table tr.row-warning td { background: rgba(217, 119, 6, 0.06); }
.table tr.row-warning:hover td { background: rgba(217, 119, 6, 0.10); }
.table tr.row-danger td { background: rgba(220, 38, 38, 0.06); }
.table tr.row-danger:hover td { background: rgba(220, 38, 38, 0.10); }
.table tr.row-zero td { background: rgba(122, 130, 152, 0.06); }
.table tr.row-zero:hover td { background: rgba(122, 130, 152, 0.10); }
.table tr.row-warning td:first-child,
.table tr.row-danger td:first-child,
.table tr.row-zero td:first-child {
  position: relative;
}
.table tr.row-warning td:first-child::before,
.table tr.row-danger td:first-child::before,
.table tr.row-zero td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.table tr.row-warning td:first-child::before { background: var(--warning); }
.table tr.row-danger td:first-child::before  { background: var(--danger); }
.table tr.row-zero td:first-child::before    { background: var(--text-3); }

/* Stock badge (pill + dot) */
.stock-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13px;
}
.stock-pill .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
}
.stock-pill.ok      { color: var(--success); }
.stock-pill.ok .dot      { background: var(--success); }
.stock-pill.warn    { color: var(--warning); }
.stock-pill.warn .dot    { background: var(--warning); }
.stock-pill.danger  { color: var(--danger); }
.stock-pill.danger .dot  { background: var(--danger); }
.stock-pill.zero    { color: var(--text-3); }
.stock-pill.zero .dot    { background: var(--text-3); }

/* Type chips re-used; ensure spacing for sklad checkbox */
.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.checkbox-row input { width: 14px; height: 14px; cursor: pointer; }

/* Product detail drawer cards */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mini-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.mini-card .mc-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.mini-card .mc-value {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.mini-card .mc-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}

/* ── New invoice form ──────────────────────────────────────── */
.create-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
.create-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* big direction toggle (Vystavená / Prijatá) */
.dir-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
}
.dir-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text-2);
  transition: background 0.12s, color 0.12s;
}
.dir-opt:hover { color: var(--text); }
.dir-opt.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.dir-opt .ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--surface-3);
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--text-3);
  transition: background 0.12s, color 0.12s;
}
.dir-opt.active.out .ico { background: var(--brand-soft); color: var(--brand); }
.dir-opt.active.in  .ico { background: var(--warning-soft); color: var(--warning); }
.dir-opt .title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dir-opt .sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 1px;
}
.dir-opt .badge-mini {
  margin-left: auto;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--text-2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.dir-opt.active.out .badge-mini { background: var(--brand-soft); color: var(--brand); }
.dir-opt.active.in  .badge-mini { background: var(--warning-soft); color: var(--warning); }

/* subtype radio cards */
.subtype-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.subtype-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 14px 14px;
  cursor: pointer;
  background: var(--surface);
  transition: border-color 0.12s, background 0.12s;
}
.subtype-card:hover { border-color: var(--brand-soft-2); }
.subtype-card.selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.subtype-card .st-radio {
  position: absolute;
  top: 14px; right: 14px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: grid; place-items: center;
  background: var(--surface);
}
.subtype-card.selected .st-radio {
  border-color: var(--brand);
  background: var(--brand);
}
.subtype-card.selected .st-radio::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: white;
}
.subtype-card .st-title {
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 4px;
  padding-right: 24px;
}
.subtype-card .st-sub {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.4;
}

/* Form section card uses .card */
.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px 20px;
  box-shadow: var(--shadow-xs);
}
.form-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.form-section-head .h-2 { flex: 1; }
.form-section-head .num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* Jednotná karta (im-card) — zdieľaný komponent pre formuláre vystavenej aj prijatej faktúry.
   Drawer prijatej (#prijDrawer) pridáva navyše vlastné layout pravidlá (poradie, 2-stĺpec). */
.im-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev, var(--surface));
  margin-bottom: 14px;
  overflow: hidden;
}
.im-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.im-card-head > svg,
.im-card-head > span.im-ic {
  color: var(--brand);
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
}
.im-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.im-card-body { padding: 14px; }
.im-card-body > *:last-child { margin-bottom: 0; }

/* Poradie kariet prijatej faktúry — platí na plnej stránke aj v úzkom draweri (stĺpce zlúčené cez
   display:contents → radíme cez `order`). Široký drawer (#prijDrawer.expanded) prepína na 2 stĺpce
   (block) cez inline pravidlá vo View.php, kde sa `order` ignoruje. Používa len prijatý formulár. */
.im-body { display: flex; flex-direction: column; }
.im-main, .im-side { display: contents; }
.im-body .im-card, .im-body .im-col-right { order: 99; }
.im-body #prijZostava { order: 1; }
.im-body #prijUhrada { order: 2; }
.im-body [data-card="vytazenie"] { order: 3; }
.im-body [data-card="dod"] { order: 4; }
.im-body [data-card="doklad"] { order: 5; }
.im-body [data-card="platba"] { order: 6; }
.im-body [data-card="polozky"] { order: 7; }
.im-body #prijAmount { order: 8; }
.im-body [data-card="uctovanie"] { order: 9; }
.im-body [data-card="zakazky"] { order: 10; }
.im-body [data-card="poznamka"] { order: 11; }

/* Spodná akčná lišta (sticky) — zdieľaná vystavenou (.sticky-footer) aj prijatou (.drawer-foot s inline sticky). */
.sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  flex-wrap: wrap;       /* nikdy neprekrývať/nepretekať — keď sa nezmestí, zalom na ďalší riadok */
  gap: 10px;
  padding: 12px 20px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
/* Meno + avatar odberateľa/dodávateľa a suma dokladu v lište (za tlačidlom Zrušiť). */
.ff-party { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ff-avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  color: #fff; font-size: 13px; font-weight: 700;
  flex-shrink: 0;
  background: var(--brand);
}
.ff-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
.ff-amount { display: flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
.ff-amount-lbl { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ff-amount-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ff-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }
@media (max-width: 640px) {
  .ff-name { max-width: 130px; }
  .ff-amount-lbl { display: none; }
  /* Lišta sa na mobile ZALAMUJE (žiadny horizontálny posuvník) — tlačidlá sú vždy dosiahnuteľné. */
  .sticky-footer, .drawer-foot { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .sticky-footer > .spacer, .drawer-foot > .spacer { display: none; }
  .sticky-footer .ff-party, .drawer-foot .ff-party { order: -1; flex: 1 1 100%; }
  .sticky-footer .ff-amount, .drawer-foot .ff-amount { margin-left: auto; }
  .sticky-footer .btn, .drawer-foot .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
}

/* Read-only („view") režim prijatého formulára — class .prij-view na #prijForm. Funguje na stránke aj v draweri
   (drawer má navyše vlastné inline #prijDrawer.prij-view pravidlá; tieto globálne pokrývajú plnú stránku). */
.prij-view select, .prij-view input[type=checkbox], .prij-view input[type=radio], .prij-view input[type=file], .prij-view .fkt-pp-input, .prij-view .fkt-sp-input { pointer-events: none; }
.prij-view .field input[readonly], .prij-view .field textarea[readonly] { border-color: transparent; background: transparent; padding-left: 2px; padding-right: 2px; }
.prij-view .field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; border-color: transparent; background-color: transparent; padding-left: 2px; }
.prij-view #prijIban { pointer-events: auto !important; }
.prij-view [data-card="vytazenie"] { display: none !important; }
.prij-view #prijPdfDrop, .prij-view #prijPdfActions, .prij-view #prijAddItem, .prij-view #prijUctAdd, .prij-view #prijPredkApply, .prij-view #prijPredkAll, .prij-view .prij-it-row .btn, .prij-view .uct-del, .prij-view .uct-pick, .prij-view .fkt-sp-clear { display: none !important; }
.prij-view #prijPredk, .prij-view #prijUctOperacia, .prij-view #prijUctSadzbaWrap { opacity: .55; }
/* Banner „Režim úpravy" — len pri úprave existujúceho dokladu (.prij-editing), NIE pri vytváraní. */
#prijEditBanner { display: none; align-items: center; gap: 10px; padding: 9px 14px; margin-bottom: 14px; background: var(--brand-soft, #e8f0fe); border: 1px solid var(--brand, #2563eb); border-radius: 8px; font-size: 12.5px; color: var(--brand, #2563eb); font-weight: 500; }
.prij-editing #prijEditBanner { display: flex; }

/* Form grid */
.fg-row {
  display: grid;
  gap: 12px;
}
.fg-2 { grid-template-columns: 1fr 1fr; }
.fg-3 { grid-template-columns: 1fr 1fr 1fr; }
.fg-4 { grid-template-columns: repeat(4, 1fr); }
.fg-2-1 { grid-template-columns: 2fr 1fr; }
.fg-1-2 { grid-template-columns: 1fr 2fr; }
/* Responzívne zbalenie formulárových mriežok — bez toho si `1fr 1fr 1fr` drží počet stĺpcov aj na
   telefóne a polia (napr. natívny date input má min. šírku ~151 px) pretečú von z karty: v hlavičke
   novej faktúry bol takto celý „Dátum splatnosti" mimo obrazovky. Prahy sú odvodené od reálnej
   šírky poľa, nie od okrúhlych čísel: 3 stĺpce potrebujú ~465 px, 2 stĺpce ~314 px vnútri karty. */
@media (max-width: 600px) {
  .fg-3, .fg-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .fg-2, .fg-3, .fg-4, .fg-2-1, .fg-1-2 { grid-template-columns: 1fr; }
}

/* Inputs (form variant) */
.f-input {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.f-input label {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}
.f-input label .opt { color: var(--text-3); font-weight: 400; margin-left: 4px; }
.f-input label .req { color: var(--danger); margin-left: 2px; }
.f-input input,
.f-input textarea,
.f-input select {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  font: inherit;
  color: var(--text);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.f-input input:focus,
.f-input textarea:focus,
.f-input select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.f-input .with-prefix {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.f-input .with-prefix:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.f-input .with-prefix .prefix {
  padding: 0 12px;
  color: var(--text-3);
  font-size: 13px;
  border-right: 1px solid var(--border);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.f-input .with-prefix input {
  border: 0;
  flex: 1;
  outline: none;
}
.f-input .hint {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 1px;
}

/* Customer/Supplier search row */
.party-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.party-search {
  flex: 1;
  position: relative;
}
.party-search .search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  z-index: 20;
  max-height: 260px;
  overflow-y: auto;
}
.party-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.party-result:last-child { border-bottom: 0; }
.party-result:hover { background: var(--surface-2); }
.party-result .name { font-size: 13px; font-weight: 500; }
.party-result .meta { font-size: 11.5px; color: var(--text-3); }

.party-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-2);
  border-radius: var(--r-md);
}
.party-selected .ps-name { font-size: 14px; font-weight: 600; }
.party-selected .ps-meta { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.party-selected .ps-clear {
  margin-left: auto;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-3);
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.party-selected .ps-clear:hover {
  color: var(--text);
  background: white;
}
[data-theme="dark"] .party-selected .ps-clear:hover {
  background: rgba(255,255,255,0.1);
}

/* Items table inside form */
.items-form {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.items-form .if-head {
  display: grid;
  grid-template-columns: 28px 1fr 90px 60px 110px 80px 110px 32px;
  gap: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.items-form .if-head > div { padding: 9px 10px; }
.items-form .if-row {
  display: grid;
  grid-template-columns: 28px 1fr 90px 60px 110px 80px 110px 32px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.items-form .if-row:last-child { border-bottom: 0; }
.items-form .if-row > div { padding: 8px 8px; }
.items-form .if-row input,
.items-form .if-row select {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  padding: 4px 6px;
  font: inherit;
  color: var(--text);
  outline: none;
}
.items-form .if-row input:hover,
.items-form .if-row select:hover { border-color: var(--border); }
.items-form .if-row input:focus,
.items-form .if-row select:focus {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.items-form .if-row .num input { text-align: right; }
.items-form .if-row .num { font-variant-numeric: tabular-nums; text-align: right; }
.items-form .if-row .name input { font-weight: 500; }
.items-form .if-row .total { font-weight: 600; text-align: right; padding-right: 12px; }
.items-form .if-row .del-btn {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: grid; place-items: center;
}
.items-form .if-row .del-btn:hover {
  background: var(--danger-soft);
  color: var(--danger);
}
.items-form .if-add {
  padding: 10px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* file dropzone */
.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 22px;
  text-align: center;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.dropzone:hover, .dropzone.drag {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.dropzone .dz-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--brand);
  display: grid; place-items: center;
  margin: 0 auto 10px;
}
.dropzone .dz-title { font-weight: 600; font-size: 14px; }
.dropzone .dz-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.dropzone .dz-link { color: var(--brand); font-weight: 500; }

/* OCR card after upload */
.ocr-card {
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-2);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ocr-card .ocr-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--brand);
  color: white;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ocr-card .ocr-body { flex: 1; min-width: 0; }
.ocr-card .ocr-title { font-size: 13px; font-weight: 600; color: var(--brand); }
.ocr-card .ocr-sub { font-size: 12px; color: var(--text-2); margin-top: 1px; }

/* Live preview sidebar */
.preview-card {
  position: sticky;
  top: calc(var(--topbar-h) + var(--tabsbar-h) + 24px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.preview-head {
  padding: 14px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.preview-head .h-3 { flex: 1; }
.preview-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.preview-mini-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
}
.preview-mini-row .lbl { color: var(--text-3); width: 90px; flex-shrink: 0; }
.preview-mini-row .val { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-totals {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.preview-totals .pt-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-2);
}
.preview-totals .pt-row .v { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text); }
.preview-totals .pt-total {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 12px;
  font-size: 16px;
  font-weight: 600;
}
.preview-totals .pt-total .v {
  font-size: 22px;
  letter-spacing: -0.015em;
  font-weight: 700;
}

/* sticky footer (create action bar) */
.create-foot {
  position: sticky;
  bottom: 0;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  margin: 24px -32px -60px;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 40;
  box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.04);
}
[data-theme="dark"] .create-foot {
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
}
.create-foot .ff-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  font-size: 12.5px;
  color: var(--text-3);
}
.create-foot .ff-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 12px;
}
.create-foot .ff-total .lbl { font-size: 11px; color: var(--text-3); }
.create-foot .ff-total .val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Item picker drawer */
.picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px;
}
.picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1px solid transparent;
}
.picker-row:hover {
  background: var(--surface-2);
  border-color: var(--border);
}
.picker-row .plu {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  width: 76px;
  flex-shrink: 0;
}
.picker-row .name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; }
.picker-row .desc { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.picker-row .price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13px;
  width: 90px;
  text-align: right;
  flex-shrink: 0;
}
.picker-row .add-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--brand);
  border: 0;
  cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.picker-row .add-btn:hover { background: var(--brand); color: white; }

@media (max-width: 1180px) {
  .create-grid { grid-template-columns: 1fr; }
  .preview-card { position: static; }
}
@media (max-width: 760px) {
  .subtype-grid { grid-template-columns: 1fr; }
  .dir-toggle { grid-template-columns: 1fr; }
}
.rc-date {
  width: 92px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.rc-date-day {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rc-date-mon {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rc-date-time {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.rc-body {
  flex: 1;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.rc-supplier-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rc-supplier-meta {
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rc-supplier-meta .sep { color: var(--text-muted); }
.rc-uid {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
}
.rc-actions {
  padding: 14px 18px 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.rc-amount {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 14px 0 14px 14px;
  border-left: 1px solid var(--border);
  margin-left: 0;
}
.rc-amount-value {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.rc-amount-vat {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}

/* predkontacia dropdown trigger inside card */
.predkontacia-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px 0 12px;
  border-radius: var(--r-sm);
  border: 1px dashed var(--border-strong);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12.5px;
  cursor: pointer;
  min-width: 200px;
}
.predkontacia-trigger:hover {
  border-color: var(--brand);
  color: var(--text);
}
.predkontacia-trigger.set {
  background: var(--brand-soft);
  border-color: var(--brand-soft-2);
  border-style: solid;
  color: var(--brand);
}
.predkontacia-trigger .code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.predkontacia-trigger.set .code {
  background: white;
  color: var(--brand);
}
[data-theme="dark"] .predkontacia-trigger.set .code {
  background: rgba(255, 255, 255, 0.12);
  color: var(--brand);
}

/* tab badge for primary tabs (pokladňa) */
.tab .tab-badge {
  display: inline-block;
  margin-left: 6px;
  background: var(--warning);
  color: white;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.tab.active .tab-badge { background: var(--brand); }
.tab .tab-badge.neutral { background: var(--surface-3); color: var(--text-2); }

/* receipt drawer / expandable modal */
.drawer-back {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 200;
  animation: fadein 0.15s ease;
}
[data-theme="dark"] .drawer-back { background: rgba(0, 0, 0, 0.55); }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(720px, 100vw);
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  box-shadow: -20px 0 60px rgba(15, 23, 42, 0.2);
  z-index: 210;
  display: flex;
  flex-direction: column;
  animation: drawerin 0.25s cubic-bezier(0.32, 0.72, 0.3, 1);
}
@keyframes drawerin {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Expanded modal mode — centered, 2/3 width */
.drawer.expanded {
  top: 4vh;
  bottom: 4vh;
  left: 16.6vw;
  right: 16.6vw;
  width: auto;
  border-left: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28), 0 8px 24px rgba(15, 23, 42, 0.15);
  animation: modalin 0.2s cubic-bezier(0.32, 0.72, 0.3, 1);
}
[data-theme="dark"] .drawer.expanded {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4);
}
@keyframes modalin {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.drawer.expanded .drawer-head {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.drawer.expanded .drawer-foot {
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
@media (max-width: 1200px) {
  .drawer.expanded { left: 5vw; right: 5vw; }
}
@media (max-width: 800px) {
  .drawer.expanded { left: 0; right: 0; top: 0; bottom: 0; border-radius: 0; }
  .drawer.expanded .drawer-head { border-radius: 0; }
}

/* Expand/collapse toggle in drawer header */
.drawer-expand-btn {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  flex-shrink: 0;
}
.drawer-expand-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}

/* Quote items table needs slightly different layout */
.items-form .if-head.cp,
.items-form .if-row.cp {
  grid-template-columns: 28px 1fr 90px 60px 110px 80px 110px 32px;
}
.drawer-head {
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
/* Text v drawer/modal oknách musí byť VŽDY označiteľný a kopírovateľný (prebije prípadnú zdedenú user-select:none). */
.drawer, .drawer-body, .drawer-head, .drawer-foot,
.modal, .modal-back, .modal-body, .modal-head,
.fkt-modal, .fkt-modal-overlay, aside[data-close] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
.drawer-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;       /* nikdy neprekrývať/nepretekať — keď sa nezmestí, zalom na ďalší riadok */
  gap: 10px;
  background: var(--surface-2);
}

/* receipt items list inside drawer */
.r-items {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.r-items-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
}
.r-items-row + .r-items-row { border-top: 1px solid var(--border); }
.r-items-row .name { flex: 1; min-width: 0; font-weight: 500; }
.r-items-row .qty {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.r-items-row .price {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  flex-shrink: 0;
  width: 80px;
  text-align: right;
}

/* predkontacia picker (in drawer) */
.predk-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.predk-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--surface);
  transition: border-color 0.12s, background 0.12s;
}
.predk-option:hover {
  border-color: var(--brand-soft-2);
  background: var(--surface-2);
}
.predk-option.selected {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.predk-option .pk-code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--text-2);
  flex-shrink: 0;
}
.predk-option.selected .pk-code {
  background: var(--brand);
  color: white;
}
.predk-option .pk-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}
.predk-option .pk-hint {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}

/* KPI row variant for pokladňa */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.kpi-row .kpi-mini {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.kpi-mini-ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.kpi-mini-ico.warn { background: var(--warning-soft); color: var(--warning); }
.kpi-mini-ico.ok { background: var(--success-soft); color: var(--success); }
.kpi-mini-ico.brand { background: var(--brand-soft); color: var(--brand); }
.kpi-mini-lbl {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
}
.kpi-mini-val {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.kpi-mini-val .small { font-size: 12px; color: var(--text-3); font-weight: 500; margin-left: 4px; }

/* Info-only KPI dlaždice na veľmi úzkych obrazovkách zaberajú miesto a rozťahujú stránku
   (fixný grid-template-columns cez inline štýl sa nedá zúžiť) — na mobile nie sú potrebné. */
@media (max-width: 600px) {
  .kpi-row { display: none; }
}

@media (max-width: 1100px) {
  .two-col { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  /* Detail vystavenej faktúry (Invoices\View::detailView) — po zložení na 1 stĺpec sa obe
     .col-stack (ľavý/pravý stĺpec na desktope) zlúčia do jedného flow cez display:contents,
     nech fa-ord-N (viď nižšie) vie karty preusporiadať naprieč PÔVODNÝMI stĺpcami. Scoped na
     `.two-col > .col-stack`, aby sa netýkalo .col-stack na iných stránkach (Pokladňa/Banka/Nastavenia). */
  .two-col > .col-stack { display: contents; }
  /* KRITICKÉ: `display:contents` vyššie robí z týchto kariet priame GRID položky, a tie majú
     `min-width: auto` → ich minimálna šírka = min-content celého vnútra. Karta „Položky" obsahuje
     širokú tabuľku (~9 stĺpcov, min-content ~736 px), takže NAFÚKLA zdieľaný `1fr` track a s ním
     VŠETKY ostatné karty v stĺpci (Úhrada, Odberateľ, Údaje faktúry, Zákazky, Bankové údaje,
     Aktivita) na 736 px — na telefóne trčali von z obrazovky a ich obsah nebolo vidieť.
     `min-width: 0` umožní tracku zmenšiť sa na dostupnú šírku; samotná tabuľka sa potom scrolluje
     vo vlastnom `.fkt-it-scroll` (overflow-x:auto), tak ako bolo zamýšľané. */
  .two-col > .col-stack > * { min-width: 0; }
  .fa-ord-1  { order: 1; }
  .fa-ord-2  { order: 2; }
  .fa-ord-3  { order: 3; }
  .fa-ord-4  { order: 4; }
  .fa-ord-5  { order: 5; }
  .fa-ord-6  { order: 6; }
  .fa-ord-7  { order: 7; }
  .fa-ord-8  { order: 8; }
  .fa-ord-9  { order: 9; }
  .fa-ord-10 { order: 10; }
  .fa-ord-11 { order: 11; }
}
@media (max-width: 1180px) {
  .bh-user-mail { display: none; }
  .bh-user { padding-right: 6px; }
  .bh-company-code { display: none; }
  .bh-search { max-width: 220px; }
}
@media (max-width: 980px) {
  .bh-search { display: none; }
  .bh-logo-wordmark .sub { display: none; }
  .bh-logo-wordmark .sep { display: none; }
}