/* SimplyTax design tokens — the ONE source of truth for colours/spacing.
   Light in :root, dark under [data-bs-theme="dark"]. One attribute flips everything.
   Modules use var(--stx-*) only — never colour literals. */

:root {
  --stx-color-bg: #f3f5f8;
  --stx-color-surface: #ffffff;
  --stx-color-surface-2: #f7f9fc;
  --stx-color-text: #1f2430;
  --stx-color-text-muted: #6b7280;
  --stx-color-border: #e3e7ee;
  --stx-color-primary: #2563eb;
  --stx-color-accent: #7c3aed;
  --stx-color-positive: #16a34a;
  --stx-color-negative: #dc2626;
  /* Podświetlenie znalezionej frazy na liście — „na żółto”, jak prosił klient. */
  --stx-color-highlight: #fde68a;

  --stx-radius: 10px;
  --stx-space: 1rem;
  --stx-topbar-h: 56px;
  --stx-sidebar-w: 232px;
}

[data-bs-theme="dark"] {
  --stx-color-bg: #0f1522;
  --stx-color-surface: #172033;
  --stx-color-surface-2: #131b2b;
  --stx-color-text: #e7ebf3;
  --stx-color-text-muted: #93a0b4;
  --stx-color-border: #263149;
  --stx-color-primary: #5b8cff;
  --stx-color-accent: #a884ff;
  --stx-color-positive: #22c55e;
  --stx-color-negative: #f87171;
  /* W ciemnym motywie jasna żółć oślepia i zjada tekst — przygaszona, tekst zostaje jasny. */
  --stx-color-highlight: #7c6514;
}

body {
  background: var(--stx-color-bg);
  color: var(--stx-color-text);
}

.stx-topbar {
  height: var(--stx-topbar-h);
  background: var(--stx-color-surface);
  border-bottom: 1px solid var(--stx-color-border);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.stx-brand {
  font-weight: 600;
  color: var(--stx-color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.stx-brand-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--stx-color-primary);
  display: inline-block;
}

.stx-shell {
  display: flex;
  min-height: calc(100vh - var(--stx-topbar-h));
}

.stx-sidebar {
  width: var(--stx-sidebar-w);
  flex: 0 0 var(--stx-sidebar-w);
  background: var(--stx-color-surface);
  border-right: 1px solid var(--stx-color-border);
  padding: 1rem .75rem;
}

.stx-nav-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border-radius: 8px;
  color: var(--stx-color-text-muted);
  text-decoration: none;
}

.stx-nav-link:hover { background: var(--stx-color-surface-2); color: var(--stx-color-text); }
.stx-nav-link.active { background: color-mix(in srgb, var(--stx-color-primary) 12%, transparent); color: var(--stx-color-primary); font-weight: 600; }

/* Collapsible nav groups */
.stx-nav-group { margin-top: .1rem; }
.stx-nav-group-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .5rem .75rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--stx-color-text-muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.stx-nav-group-header:hover { background: var(--stx-color-surface-2); color: var(--stx-color-text); }
.stx-nav-group-header.open { color: var(--stx-color-text); font-weight: 600; }
.stx-nav-group-header > span:first-child { flex: 1 1 auto; }
.stx-caret { font-size: .7em; transition: transform .15s ease; }
.stx-nav-group-header[aria-expanded="false"] .stx-caret { transform: rotate(-90deg); }
.stx-nav-sub { padding-left: 1.75rem; font-size: .95em; }

/* min-width: 0 — element flex ma domyślnie min-width: auto, czyli nie zwęzi się poniżej najszerszego
   dziecka. Szeroka tabela albo długa linia XML rozpychały wtedy całą stronę (przewijanie w poziomie
   poniżej ~1800 px), a ich własne przewijanie (.table-responsive, <pre> z overflow) nigdy nie ruszało —
   razem z przyklejonymi kolumnami siatki planu budżetu. Tu jest jedno miejsce, które to załatwia. */
.stx-content { flex: 1 1 auto; min-width: 0; padding: 1.5rem; }

/* Auth screens (login/register): centered card, no shell chrome. */
.stx-auth {
  min-height: calc(100vh - var(--stx-topbar-h) - 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stx-auth-card { width: 100%; max-width: 420px; }
.stx-auth-logo { height: 52px; width: auto; max-width: 220px; }
.stx-topbar-logo { height: 30px; width: auto; display: block; }
.stx-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }

/* Pasek udziału w tabeli raportu (konta, pozycje RPD) — rysowany tokenami, więc tryb ciemny działa sam. */
.stx-bar {
  background: var(--stx-color-border);
  border-radius: 2px;
  height: 8px;
  overflow: hidden;
}
.stx-bar-fill { background: var(--stx-color-primary); height: 100%; }
.stx-bar-fill--negative { background: var(--stx-color-negative); }

.stx-card {
  background: var(--stx-color-surface);
  border: 1px solid var(--stx-color-border);
  border-radius: var(--stx-radius);
}

.stx-spacer { flex: 1 1 auto; }

/* Oznaczenia ze schematu MF w kartotekach (tryb włączany w pasku). Drobne i wyszarzone —
   kolumna zostaje przy swojej nazwie, kod jest dopiskiem, nie zamiennikiem. */
.stx-gov {
  display: inline-block;
  margin-left: .35rem;
  padding: 0 .3rem;
  font-size: .72em;
  font-weight: 600;
  font-family: var(--stx-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  color: var(--stx-color-text-muted);
  border: 1px solid var(--stx-color-border);
  border-radius: var(--stx-radius-sm, .25rem);
  white-space: nowrap;
  vertical-align: middle;
}

/* Kolumna pokazuje co innego niż plik — kod bez tego znaku wprowadzałby w błąd. */
.stx-gov-warn {
  color: var(--stx-color-negative);
  border-color: var(--stx-color-negative);
}

/* Karta zadania w tle (komponent JobCard z Shared.UI): stan, faza, pasek postępu, błąd, „Anuluj”.
   Wyłącznie tokeny — karta wygląda tak samo w każdym module i w obu motywach. */
.stx-job { padding: .75rem 1rem; margin-bottom: 1rem; }
.stx-job-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.stx-job-title { font-weight: 600; }
.stx-job-status {
  padding: .05rem .5rem;
  font-size: .78em;
  color: var(--stx-color-text-muted);
  border: 1px solid var(--stx-color-border);
  border-radius: 999px;
  white-space: nowrap;
}
.stx-job-status--running { color: var(--stx-color-primary); border-color: var(--stx-color-primary); }
.stx-job-status--done { color: var(--stx-color-positive); border-color: var(--stx-color-positive); }
.stx-job-status--failed { color: var(--stx-color-negative); border-color: var(--stx-color-negative); }
.stx-job-phase { margin-top: .35rem; color: var(--stx-color-text-muted); }
.stx-job-bar {
  height: .5rem;
  margin-top: .5rem;
  overflow: hidden;
  background: var(--stx-color-surface-2);
  border: 1px solid var(--stx-color-border);
  border-radius: 999px;
}
.stx-job-bar-fill { height: 100%; background: var(--stx-color-primary); transition: width .4s ease; }
/* Nie wiadomo, ile jest do zrobienia — pasek „w ruchu” zamiast udawanego procentu. */
.stx-job-bar--indeterminate .stx-job-bar-fill { animation: stx-job-slide 1.6s ease-in-out infinite; }
@keyframes stx-job-slide {
  0% { margin-left: -35%; }
  100% { margin-left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .stx-job-bar--indeterminate .stx-job-bar-fill { animation: none; }
  .stx-job-bar-fill { transition: none; }
}
.stx-job-progress, .stx-job-details { margin-top: .35rem; font-size: .85em; color: var(--stx-color-text-muted); }
.stx-job-error { margin-top: .5rem; color: var(--stx-color-negative); white-space: pre-wrap; overflow-wrap: anywhere; }
.stx-job-actions { margin-top: .6rem; }

/* ── Wspólna lista (_StxList) ─────────────────────────────────────────────────────────────────────
   Uwagi klienta z 2026-10-16: podświetlanie znalezionego, filtry w nagłówkach, przeciąganie i rozciąganie
   kolumn. Wszystko na tokenach — tryb ciemny działa sam, bez drugiego zestawu kolorów. */
.stx-mark {
  padding: 0 .1em;
  color: inherit;
  background: var(--stx-color-highlight);
  border-radius: var(--stx-radius-sm, 3px);
}
.stx-list-table th[data-stx-col] { position: relative; vertical-align: top; }
/* Pola filtrów muszą stać w JEDNEJ linii niezależnie od długości nagłówka (uwaga właściciela: „nierówno
   się układają filtry, zależnie od długości opisu kolumny”). Nazwa kolumny dostaje więc stałą wysokość
   i jest dosuwana do dołu, a filtr zaczyna się zawsze na tej samej wysokości. */
.stx-th {
  display: flex;
  align-items: flex-end;
  gap: .35rem;
  min-height: 2.6em;
  padding-right: .5rem;
}
.stx-th-sort { color: inherit; text-decoration: none; }
.stx-th-sort:hover { text-decoration: underline; }
/* Uchwyt rozciągania: cienki pasek przy prawej krawędzi nagłówka. */
.stx-th-grip {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
}
.stx-th-grip:hover { background: var(--stx-color-border); }
.stx-th-filter { display: flex; gap: .25rem; margin-top: .35rem; }
.stx-th-filter .form-control { min-width: 4rem; }
.stx-th-pick { line-height: 1; padding: .15rem .35rem; }
.stx-list-table th.stx-th-drag { opacity: .5; }
.stx-list-table th.stx-th-over { outline: 2px dashed var(--stx-color-primary); outline-offset: -2px; }
.stx-pick-panel {
  position: absolute;
  z-index: 20;
  right: 0;
  min-width: 14rem;
  display: flex;
  flex-direction: column;
  max-height: 20rem;
  padding: .5rem;
  font-weight: 400;
  background: var(--stx-color-surface);
  border: 1px solid var(--stx-color-border);
  border-radius: var(--stx-radius-md, 6px);
  box-shadow: 0 .5rem 1rem rgb(0 0 0 / 15%);
}
.stx-list-columns { max-height: 20rem; overflow: auto; }

/* Wartości przewijają się osobno, a „Zastosuj" zostaje widoczny — przy dwustu wartościach zjeżdżanie na dół
   po przycisk było (słusznie) zgłoszone jako wada. */
.stx-pick-list { flex: 1 1 auto; min-height: 0; overflow: auto; }
.stx-pick-footer {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-top: .5rem;
  margin-top: .25rem;
  border-top: 1px solid var(--stx-color-border);
}

/* Grupowanie jak drzewko: wiersz grupy klikalny, pod nim jej wiersze. */
.stx-list-groups .stx-group > td { font-weight: 600; }
.stx-list-groups .stx-group--open > td { background: var(--stx-color-surface-2); }
.stx-group-toggle { color: var(--stx-color-text-muted); text-decoration: none; }
.stx-group-toggle:hover { color: var(--stx-color-text); }
.stx-list-groups .stx-group-rows > td { padding: .25rem .5rem .75rem; background: var(--stx-color-surface-2); }

/* ── Zwijane menu po lewej ────────────────────────────────────────────────────────────────────────
   Uwaga klienta: „menu lewe zwijalne powinno być”. Klasę na <html> ustawia skrypt w <head>, zanim strona
   się narysuje — inaczej menu mrugałoby przy każdym wejściu. */
.stx-nav-off .stx-sidebar { display: none; }
.stx-nav-toggle { margin-right: .5rem; }