/* =====================================================================================
   BOSZKA – styl „Granat bankowy” (decyzja D9, makieta: docs/makiety/wariant-a-granat-bankowy.html)
   Tokeny --boszka-* to jedyne źródło kolorów; zmienne Bootstrapa (--bs-*) są z nich wyprowadzone.
   Motyw: <html data-bs-theme="light|dark"> ustawia wwwroot/js/theme.js.
   ===================================================================================== */

:root,
[data-bs-theme=light] {
  --boszka-bg: #f4f6f9;
  --boszka-surface: #ffffff;
  --boszka-surface-2: #eef2f7;
  --boszka-fg: #16202e;
  --boszka-fg-rgb: 22, 32, 46;
  --boszka-muted: #5b6678;
  --boszka-line: #dde3eb;
  --boszka-accent: #1f4e79;
  --boszka-accent-rgb: 31, 78, 121;
  --boszka-accent-hover: #183d5f;
  --boszka-accent-fg: #ffffff;
  --boszka-accent-soft: #e3ecf6;
  --boszka-sidebar-bg: #173a5c;
  --boszka-sidebar-fg: #c9d7e6;
  --boszka-sidebar-muted: #8fa9c4;
  --boszka-sidebar-active: #ffffff;
  --boszka-sidebar-active-bg: rgba(255, 255, 255, .12);
  --boszka-sidebar-hover-bg: rgba(255, 255, 255, .07);
  --boszka-positive: #1d7a46;
  --boszka-negative: #c0392b;
  --boszka-shadow: 0 1px 2px rgba(16, 32, 52, .06), 0 2px 8px rgba(16, 32, 52, .05);
  --boszka-chart-1: #1f4e79;
  --boszka-chart-2: #3d7fb8;
  --boszka-chart-3: #74a9d6;
  --boszka-chart-4: #c9a14a;
  --boszka-chart-5: #6c8a5a;
  --boszka-chart-6: #9aa5b4;
}

[data-bs-theme=dark] {
  --boszka-bg: #0f1722;
  --boszka-surface: #162131;
  --boszka-surface-2: #1c2a3d;
  --boszka-fg: #e4ebf3;
  --boszka-fg-rgb: 228, 235, 243;
  --boszka-muted: #93a2b6;
  --boszka-line: #26364b;
  --boszka-accent: #6ea8de;
  --boszka-accent-rgb: 110, 168, 222;
  --boszka-accent-hover: #8dbce6;
  --boszka-accent-fg: #0b1420;
  --boszka-accent-soft: #1d3550;
  --boszka-sidebar-bg: #0b121c;
  --boszka-sidebar-fg: #8fa3ba;
  --boszka-sidebar-muted: #5f7690;
  --boszka-sidebar-active: #ffffff;
  --boszka-sidebar-active-bg: rgba(110, 168, 222, .16);
  --boszka-sidebar-hover-bg: rgba(110, 168, 222, .08);
  --boszka-positive: #4fc283;
  --boszka-negative: #f07a6c;
  --boszka-shadow: none;
  --boszka-chart-1: #6ea8de;
  --boszka-chart-2: #3f78ad;
  --boszka-chart-3: #a9cdee;
  --boszka-chart-4: #d9b462;
  --boszka-chart-5: #8fb07c;
  --boszka-chart-6: #5d6b7e;
  color-scheme: dark;
}

/* Zmienne Bootstrapa wyprowadzone z tokenów (wspólne dla obu motywów). */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --bs-body-font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: var(--boszka-bg);
  --bs-body-color: var(--boszka-fg);
  --bs-body-color-rgb: var(--boszka-fg-rgb);
  --bs-emphasis-color: var(--boszka-fg);
  --bs-secondary-color: var(--boszka-muted);
  --bs-secondary-bg: var(--boszka-surface-2);
  --bs-tertiary-bg: var(--boszka-surface-2);
  --bs-border-color: var(--boszka-line);
  --bs-border-radius: .5rem;
  --bs-primary: var(--boszka-accent);
  --bs-primary-rgb: var(--boszka-accent-rgb);
  --bs-primary-bg-subtle: var(--boszka-accent-soft);
  --bs-primary-text-emphasis: var(--boszka-accent);
  --bs-link-color: var(--boszka-accent);
  --bs-link-color-rgb: var(--boszka-accent-rgb);
  --bs-link-hover-color: var(--boszka-accent-hover);
  --bs-focus-ring-color: rgba(var(--boszka-accent-rgb), .35);
  --bs-box-shadow-sm: var(--boszka-shadow);
}

/* ---------- Podstawy ---------- */
html {
  font-size: 15px;
}

@media (min-width: 992px) {
  html {
    font-size: 16px;
  }
}

body {
  min-height: 100vh;
  background-color: var(--boszka-bg);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, .h1, .h2, .h3, .h4, .h5, .h6 {
  text-wrap: balance;
}

.skip-link {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 2000;
  padding: .5rem 1rem;
  background: var(--boszka-surface);
  border-radius: .5rem;
}

.icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  vertical-align: -.2em;
  fill: currentColor;
}

/* ---------- Komponenty Bootstrapa w stylu BOSZKA ---------- */
.card {
  --bs-card-bg: var(--boszka-surface);
  --bs-card-border-color: var(--boszka-line);
  --bs-card-border-radius: .5rem;
}

.btn {
  --bs-btn-font-weight: 500;
}

.btn-primary {
  --bs-btn-color: var(--boszka-accent-fg);
  --bs-btn-bg: var(--boszka-accent);
  --bs-btn-border-color: var(--boszka-accent);
  --bs-btn-hover-color: var(--boszka-accent-fg);
  --bs-btn-hover-bg: var(--boszka-accent-hover);
  --bs-btn-hover-border-color: var(--boszka-accent-hover);
  --bs-btn-active-color: var(--boszka-accent-fg);
  --bs-btn-active-bg: var(--boszka-accent-hover);
  --bs-btn-active-border-color: var(--boszka-accent-hover);
  --bs-btn-disabled-color: var(--boszka-accent-fg);
  --bs-btn-disabled-bg: var(--boszka-accent);
  --bs-btn-disabled-border-color: var(--boszka-accent);
}

.btn-outline-primary {
  --bs-btn-color: var(--boszka-accent);
  --bs-btn-border-color: var(--boszka-accent);
  --bs-btn-hover-color: var(--boszka-accent-fg);
  --bs-btn-hover-bg: var(--boszka-accent);
  --bs-btn-hover-border-color: var(--boszka-accent);
  --bs-btn-active-color: var(--boszka-accent-fg);
  --bs-btn-active-bg: var(--boszka-accent-hover);
  --bs-btn-active-border-color: var(--boszka-accent-hover);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

.form-control,
.form-select {
  background-color: var(--boszka-surface);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--boszka-accent);
}

/* Etykieta pływająca: tło takie jak pole (karta), a nie tło strony. */
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after {
  background-color: var(--boszka-surface);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--boszka-surface);
  --bs-dropdown-border-color: var(--boszka-line);
  --bs-dropdown-link-active-bg: var(--boszka-accent);
  --bs-dropdown-link-active-color: var(--boszka-accent-fg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
}

.dropdown-item {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.dropdown-check {
  visibility: hidden;
}

[aria-pressed="true"] > .dropdown-check {
  visibility: visible;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(var(--boszka-accent-rgb), .05);
}

/* Zasady tabel (docs/05-plan-rozwoju.md, 1.4): tekst w jednej linii, a gdy brakuje miejsca –
   najpierw data/godzina w dwóch liniach, potem przewijanie poziome (.table-responsive).
   Wyjątek dla długich tekstów, które mają się zawijać: klasa .cell-wrap. */
.table > :not(caption) > * > * {
  white-space: nowrap;
}

.table > :not(caption) > * > .cell-wrap {
  white-space: normal;
}

/* <date-time>: jedyne miejsce łamania to odstęp między datą a godziną. */
.dt {
  white-space: normal;
  font-variant-numeric: tabular-nums;
}

.dt-date,
.dt-time {
  display: inline-block;
  white-space: nowrap;
}

/* Tabela w karcie (np. dziennik aktywności): odstęp od krawędzi karty. */
.table-card > .table > :not(caption) > * > * {
  padding: .5rem .75rem;
}

.table-card > .table > thead th {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--boszka-muted);
  white-space: nowrap;
}

/* ---------- Szkielet aplikacji (zalogowany użytkownik) ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  display: none;
  flex-direction: column;
  flex: none;
  width: 15rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 1.125rem .75rem;
  background-color: var(--boszka-sidebar-bg);
  color: var(--boszka-sidebar-fg);
}

@media (min-width: 992px) {
  .app-sidebar {
    display: flex;
  }
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .25rem .625rem 1rem;
  color: var(--boszka-sidebar-active);
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
}

.app-brand:hover {
  color: var(--boszka-sidebar-active);
}

.app-brand-mark {
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: .45rem;
  background-color: #1f4e79;
  color: #ffffff;
  font-size: .875rem;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.app-nav-section {
  margin: 0;
  padding: 1rem .625rem .375rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--boszka-sidebar-muted);
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border-radius: .375rem;
  color: inherit;
  text-decoration: none;
}

.app-nav-link:hover {
  background-color: var(--boszka-sidebar-hover-bg);
  color: var(--boszka-sidebar-active);
}

.app-nav-link.active {
  background-color: var(--boszka-sidebar-active-bg);
  color: var(--boszka-sidebar-active);
  font-weight: 600;
}

.app-nav-link:focus-visible,
.app-brand:focus-visible,
.topbar-btn:focus-visible,
.app-tabbar a:focus-visible {
  outline: 2px solid var(--boszka-accent);
  outline-offset: 2px;
}

.app-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* Górny pasek: na telefonie granatowy (jak nagłówek aplikacji bankowej), na komputerze jasny. */
.app-topbar {
  --topbar-fg: #ffffff;
  --topbar-btn-bg: rgba(255, 255, 255, .1);
  --topbar-btn-border: rgba(255, 255, 255, .22);
  --topbar-btn-hover-bg: rgba(255, 255, 255, .18);
  --topbar-primary-bg: #ffffff;
  --topbar-primary-fg: var(--boszka-sidebar-bg);
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: calc(.625rem + env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) .625rem max(1rem, env(safe-area-inset-left, 0px));
  background-color: var(--boszka-sidebar-bg);
  color: var(--topbar-fg);
}

.app-topbar .app-brand {
  padding: 0;
}

.app-topbar-title {
  margin-right: auto;
  font-size: 1.0625rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 992px) {
  .app-shell .app-topbar {
    --topbar-fg: var(--boszka-fg);
    --topbar-btn-bg: var(--boszka-surface);
    --topbar-btn-border: var(--boszka-line);
    --topbar-btn-hover-bg: var(--boszka-surface-2);
    --topbar-primary-bg: var(--boszka-accent);
    --topbar-primary-fg: var(--boszka-surface);
    padding: .875rem 1.5rem;
    background-color: var(--boszka-surface);
    border-bottom: 1px solid var(--boszka-line);
  }

  .app-brand-compact {
    display: none;
  }

  .app-topbar-title {
    font-size: 1.125rem;
  }
}

.topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 .625rem;
  border: 1px solid var(--topbar-btn-border);
  border-radius: 999px;
  background-color: var(--topbar-btn-bg);
  color: var(--topbar-fg);
  font-size: .875rem;
  text-decoration: none;
}

.topbar-btn:hover {
  background-color: var(--topbar-btn-hover-bg);
  color: var(--topbar-fg);
}

.topbar-btn-text {
  display: none;
}

/* Główne działanie w górnym pasku („Dodaj wydatek”) – wyróżnione kolorem akcentu. */
.topbar-btn-primary,
.topbar-btn-primary:hover {
  border-color: var(--topbar-primary-bg);
  background-color: var(--topbar-primary-bg);
  color: var(--topbar-primary-fg);
  font-weight: 600;
}

.topbar-btn-primary:hover {
  filter: brightness(1.08);
}

.topbar-btn-code {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.language-code {
  width: 1.75rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--boszka-muted);
}

@media (min-width: 576px) {
  .topbar-btn-text {
    display: inline;
  }
}

[data-bs-theme=light] .theme-icon-dark,
[data-bs-theme=dark] .theme-icon-light {
  display: none;
}

/* Tryb dyskretny (etap 8): kwoty rozmyte i nie do zaznaczenia; ikona przełącznika według stanu. Wykresy ukrywają kwoty
   osobno (wwwroot/js/charts.js). */
html:not(.discreet) .discreet-icon-on,
html.discreet .discreet-icon-off {
  display: none;
}

html.discreet .amount,
html.discreet .account-balance,
html.discreet [data-sensitive] {
  filter: blur(0.45em);
  user-select: none;
}

.app-content {
  flex: 1;
  width: 100%;
  max-width: 90rem;
  padding: 1.25rem max(1rem, env(safe-area-inset-right, 0px)) calc(5.5rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
}

@media (min-width: 992px) {
  .app-content {
    padding: 1.5rem;
  }
}

/* Dolny pasek nawigacji – tylko telefon i tablet. Pola dotykowe min. 48 px. */
.app-tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  padding: .25rem max(.25rem, env(safe-area-inset-right, 0px)) calc(.25rem + env(safe-area-inset-bottom, 0px)) max(.25rem, env(safe-area-inset-left, 0px));
  background-color: var(--boszka-surface);
  border-top: 1px solid var(--boszka-line);
}

.app-tabbar a {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .125rem;
  min-height: 3.25rem;
  font-size: .6875rem;
  color: var(--boszka-muted);
  text-decoration: none;
  border-radius: .5rem;
}

.app-tabbar a .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.app-tabbar a.active {
  color: var(--boszka-accent);
  font-weight: 600;
}

@media (min-width: 992px) {
  .app-tabbar {
    display: none;
  }
}

/* ---------- Strony publiczne (logowanie, rejestracja) ---------- */
.app-topbar-public .app-brand {
  padding: 0;
}

/* Logo (białe na przezroczystym tle) – pasek stron publicznych jest zawsze granatowy, w obu motywach. */
.app-brand-logo {
  display: block;
  width: auto;
  height: 1.75rem;
  /* Na wąskim ekranie pasek może zwęzić logo – bez zniekształcenia proporcji. */
  object-fit: contain;
  object-position: left center;
}

/* Logo na stronie startowej: wariant zależny od motywu (granatowe litery na jasnym tle, białe na ciemnym). */
.home-logo {
  margin: 0 0 1.25rem;
}

.home-logo img {
  width: auto;
  max-width: 100%;
  height: 4.5rem;
  object-fit: contain;
}

[data-bs-theme=light] .logo-for-dark,
[data-bs-theme=dark] .logo-for-light {
  display: none;
}

.app-public-content {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.app-footer {
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
  color: var(--boszka-muted);
  font-size: .875rem;
  border-top: 1px solid var(--boszka-line);
}

/* ---------- Komponent tabel (Tabulator, wwwroot/js/boszka-table.js) ---------- */
.boszka-table-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: .5rem;
}

.boszka-table-card {
  overflow: hidden;
}

.table-columns-menu {
  min-width: 16rem;
  padding: .5rem;
}

.table-columns-list {
  display: grid;
  gap: .375rem;
  padding: .25rem .5rem;
}

.table-columns-hint {
  margin: 0 .5rem .25rem;
  font-size: .8125rem;
  color: var(--boszka-muted);
}

.table-columns-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table-columns-help {
  padding: .125rem .375rem;
  color: var(--boszka-muted);
}

.table-columns-help:hover {
  color: var(--boszka-accent);
}

.boszka-table.tabulator {
  border: 0;
  background-color: var(--boszka-surface);
  font-size: .875rem;
}

.boszka-table.tabulator .tabulator-header {
  border-bottom: 1px solid var(--boszka-line);
  background-color: var(--boszka-surface);
  color: var(--boszka-muted);
  font-weight: 600;
}

.boszka-table.tabulator .tabulator-header .tabulator-col {
  border-right: 0;
  background-color: var(--boszka-surface);
}

.boszka-table.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: .625rem .75rem;
}

.boszka-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
  background-color: var(--boszka-surface-2);
}

.boszka-table.tabulator .tabulator-header .tabulator-col.tabulator-moving {
  border: 1px solid var(--boszka-accent);
  background-color: var(--boszka-accent-soft);
}

.boszka-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-bottom-color: var(--boszka-line);
}

.boszka-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-bottom-color: var(--boszka-accent);
}

.boszka-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
  border-top-color: var(--boszka-accent);
}

.boszka-table.tabulator .tabulator-tableholder .tabulator-table {
  background-color: var(--boszka-surface);
  color: var(--boszka-fg);
}

.boszka-table .tabulator-row,
.boszka-table .tabulator-row.tabulator-row-even {
  border-bottom: 1px solid var(--boszka-line);
  background-color: var(--boszka-surface);
}

.boszka-table .tabulator-row.tabulator-selectable:hover {
  background-color: rgba(var(--boszka-accent-rgb), .06);
  cursor: default;
}

.boszka-table .tabulator-row.row-warning {
  background-color: rgba(var(--bs-warning-rgb), .14);
}

.boszka-table .tabulator-row .tabulator-cell {
  padding: .5rem .75rem;
  border-right: 0;
}

.boszka-table.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {
  color: var(--boszka-muted);
  font-size: .9375rem;
  font-weight: 400;
}

.boszka-table.tabulator .tabulator-footer {
  border-top: 1px solid var(--boszka-line);
  background-color: var(--boszka-surface);
  color: var(--boszka-muted);
  font-weight: 400;
}

.boszka-table.tabulator .tabulator-footer .tabulator-footer-contents {
  flex-wrap: wrap;
  gap: .5rem;
  padding: .5rem .75rem;
}

.boszka-table.tabulator .tabulator-footer {
  white-space: normal;
}

.boszka-table.tabulator .tabulator-footer .tabulator-paginator {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .375rem;
}

.boszka-table.tabulator .tabulator-footer .tabulator-pages {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0;
}

.boszka-table.tabulator .tabulator-footer .tabulator-page {
  margin: 0;
}

/* Telefon: bez przycisków „Pierwsza/Ostatnia” – zostają poprzednia, numery stron i następna. */
.boszka-table--mobile .tabulator-footer .tabulator-page[data-page="first"],
.boszka-table--mobile .tabulator-footer .tabulator-page[data-page="last"] {
  display: none;
}

.boszka-table.tabulator .tabulator-footer .tabulator-page,
.boszka-table.tabulator .tabulator-footer .tabulator-page-size {
  min-height: 2rem;
  padding: .125rem .5rem;
  border: 1px solid var(--boszka-line);
  border-radius: .375rem;
  background-color: var(--boszka-surface);
  color: var(--boszka-fg);
}

.boszka-table.tabulator .tabulator-footer .tabulator-page:not(:disabled):hover {
  background-color: var(--boszka-surface-2);
  color: var(--boszka-fg);
}

.boszka-table.tabulator .tabulator-footer .tabulator-page.active {
  border-color: var(--boszka-accent);
  background-color: var(--boszka-accent);
  color: var(--boszka-accent-fg);
}

.boszka-table.tabulator .tabulator-footer .tabulator-page:disabled {
  opacity: .45;
}

.table-secondary-text {
  font-size: .8125rem;
  color: var(--boszka-muted);
}

/* Telefon: data nad godziną (zasada tabel – mniej miejsca w poziomie). */
.boszka-table--mobile .tabulator-cell .dt-date,
.boszka-table--mobile .tabulator-cell .dt-time {
  display: block;
}

/* ---------- Kwoty ---------- */
.amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.amount-positive {
  color: var(--boszka-positive);
}

.amount-negative {
  color: var(--boszka-negative);
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ---------- Wykresy ---------- */
.chart {
  width: 100%;
  height: 300px;
}

.chart-sm {
  height: 240px;
}

.chart-lg {
  height: 340px;
}

/* Wykres majątku w czasie (etap 8) – wiele linii i legenda pod spodem. */
.chart-xl {
  height: 440px;
}

@media (max-width: 575.98px) {
  .chart {
    height: 260px;
  }

  .chart-xl {
    height: 380px;
  }
}

/* Przyciski kolejności sekcji pulpitu (etap 8). */
.dashboard-section-move {
  display: inline-flex;
  gap: .125rem;
}

.dashboard-section-move .btn:disabled {
  visibility: hidden;
}

.chart-error {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-danger);
}

.card-title-muted {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--boszka-muted);
}

/* Pole-pułapka dla botów – poza ekranem (nie display:none, które część botów rozpoznaje) */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Kod odzyskiwania */
.recovery-code-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: 0.5rem;
  background-color: var(--bs-tertiary-bg);
}

.recovery-code {
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--bs-body-color);
  /* Zawijanie tylko po myślnikach – grupy kodu nie są dzielone. */
  word-break: normal;
  overflow-wrap: normal;
}

/* Logowanie dwuskładnikowe: kod QR na białym tle (czytelny dla aparatu także w trybie ciemnym), kody zapasowe w dwóch kolumnach */
.two-factor-qr {
  padding: 8px;
  background-color: #fff;
  border-radius: 0.5rem;
  image-rendering: pixelated;
}

.backup-codes {
  padding: 1rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: 0.5rem;
  background-color: var(--bs-tertiary-bg);
  column-count: 2;
  white-space: pre;
}

/* Pulpit: kafelki wskaźników i listy kont */
.dashboard-tile .dashboard-tile-value {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}

.dashboard-tile .dashboard-tile-line {
  font-size: 1.05rem;
  font-weight: 600;
  text-align: left;
}

.dashboard-account-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .3rem 0;
  border-top: 1px solid var(--boszka-line);
  font-size: .9rem;
}

.dashboard-account-list a {
  min-width: 0;
  color: var(--boszka-fg);
  text-decoration: none;
}

.dashboard-account-list a:hover {
  color: var(--boszka-accent);
  text-decoration: underline;
}

/* Pulpit: najbliższe planowane płatności (etap 4) */
.dashboard-upcoming li {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .3rem 0;
  border-top: 1px solid var(--boszka-line);
  font-size: .9rem;
  min-width: 0;
}

.dashboard-upcoming-date {
  flex: 0 0 auto;
  min-width: 5.5rem;
  color: var(--boszka-muted);
}

.dashboard-upcoming a {
  min-width: 0;
  color: var(--boszka-fg);
  text-decoration: none;
}

.dashboard-upcoming a:hover {
  color: var(--boszka-accent);
  text-decoration: underline;
}

.dashboard-upcoming .amount {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Planowane płatności: kalendarz i okno potwierdzeń. Na telefonie kwota i przyciski schodzą pod nazwę. */
.planned-day {
  font-size: .9rem;
  font-weight: 600;
  margin: 1rem 0 .25rem;
}

.planned-day:first-of-type {
  margin-top: 0;
}

.planned-item,
.due-payments-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  padding: .5rem 0;
  border-top: 1px solid var(--boszka-line);
}

.planned-item-main,
.due-payments-main {
  flex: 1 1 12rem;
  min-width: 0;
}

.planned-item-amount {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 600;
}

.due-payments-amount {
  flex: 0 0 11rem;
}

.due-payments-amount.amount {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

.planned-item-actions,
.due-payments-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  flex: 0 0 auto;
}

.planned-item-actions form,
.due-payments-actions form {
  margin: 0;
}

@media (max-width: 575.98px) {
  .due-payments-amount {
    flex: 1 1 8rem;
  }
}

/* Regularne oszczędzanie: składniki reguły w formularzu konta, zamknięcie miesiąca w „Wymaga uwagi” */
.savings-component {
  border-top: 1px solid var(--boszka-line);
  padding-top: .75rem;
  margin-top: .75rem;
}

.dashboard-month-close {
  margin-top: .25rem;
}

.dashboard-month-close form {
  margin-top: .25rem;
}

/* Pulpit: zwijane sekcje („Mój okres”, „Podsumowanie majątku”) */
.dashboard-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--boszka-line);
}

.dashboard-section-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.dashboard-section-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .25rem .25rem 0;
  border: 0;
  background: none;
  color: var(--boszka-fg);
  font: inherit;
  text-align: left;
}

.dashboard-section-toggle:hover {
  color: var(--boszka-accent);
}

.dashboard-section-toggle:focus-visible {
  outline: 2px solid var(--boszka-accent);
  outline-offset: 2px;
  border-radius: .25rem;
}

.dashboard-section-chevron {
  flex-shrink: 0;
  transition: transform .2s ease;
}

.dashboard-section-toggle[aria-expanded="false"] .dashboard-section-chevron {
  transform: rotate(-90deg);
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-section-chevron {
    transition: none;
  }
}

.dashboard-period-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .375rem;
  margin-left: auto;
}

.dashboard-period-nav .btn-link {
  white-space: nowrap;
}

/* „‹ okres ›” zawsze razem – przy braku miejsca link „Bieżący/Domyślny okres” przechodzi nad strzałki. */
.dashboard-period-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .375rem;
}

/* Miejsce na etykietę okresu – ta sama szerokość w obu sekcjach pulpitu, więc wybory okresu stoją równo jeden pod drugim. */
.dashboard-period-slot {
  display: inline-flex;
  justify-content: center;
  min-width: 12.75rem;
}

@media (min-width: 576px) {
  .dashboard-period-slot {
    min-width: 15.5rem;
  }
}

.dashboard-period-label {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: 0 .25rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Etykieta okresu majątku – przycisk otwierający wybór dat (wygląda jak etykieta okresu „Mój okres”) */
.dashboard-period-picker {
  border: 0;
  border-radius: .375rem;
  background: none;
  color: var(--boszka-fg);
  font: inherit;
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: .25em;
}

.dashboard-period-picker:hover,
.dashboard-period-picker[aria-expanded="true"] {
  color: var(--boszka-accent);
}

.dashboard-period-picker:focus-visible {
  outline: 2px solid var(--boszka-accent);
  outline-offset: 2px;
}

.dashboard-range-form {
  width: min(20rem, calc(100vw - 2rem));
  padding: .75rem;
}

/* Pasek środków wolnych i zamrożonych */
.dashboard-funds-bar {
  display: flex;
  height: .875rem;
  overflow: hidden;
  border-radius: 999px;
  background-color: var(--bs-tertiary-bg);
}

.dashboard-funds-bar-free {
  background-color: var(--boszka-positive);
}

.dashboard-funds-bar-frozen {
  background-color: var(--boszka-chart-2);
}

.dashboard-legend::before {
  content: "";
  display: inline-block;
  width: .65rem;
  height: .65rem;
  margin-right: .375rem;
  border-radius: 50%;
  vertical-align: baseline;
}

.dashboard-legend-free::before {
  background-color: var(--boszka-positive);
}

.dashboard-legend-frozen::before {
  background-color: var(--boszka-chart-2);
}

.dashboard-tile-free .icon {
  color: var(--boszka-positive);
}

.dashboard-tile-frozen .icon {
  color: var(--boszka-chart-2);
}

.dashboard-empty-icon {
  width: 3rem;
  height: 3rem;
  color: var(--boszka-accent);
}

@media (max-width: 575.98px) {
  .dashboard-tile .dashboard-tile-value {
    font-size: 1.2rem;
  }
}

/* Konta: wybór kategorii, paleta kolorów, kolor przy nazwie na liście */
.account-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .75rem;
}

.account-category-option {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .625rem;
  row-gap: .125rem;
  align-items: center;
  padding: .75rem .875rem;
  border: 1px solid var(--boszka-line);
  border-radius: .5rem;
  background-color: var(--boszka-surface);
  cursor: pointer;
}

.account-category-option .icon {
  grid-row: span 2;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--boszka-accent);
}

.account-category-option:hover {
  background-color: var(--boszka-surface-2);
}

.btn-check:checked + .account-category-option {
  border-color: var(--boszka-accent);
  background-color: var(--boszka-accent-soft);
  box-shadow: inset 0 0 0 1px var(--boszka-accent);
}

.btn-check:focus-visible + .account-category-option,
.btn-check:focus-visible + .account-color-swatch {
  outline: 2px solid var(--boszka-accent);
  outline-offset: 2px;
}

.account-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.account-color-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--boszka-surface);
  box-shadow: 0 0 0 1px var(--boszka-line);
  background-color: var(--account-color);
  cursor: pointer;
}

.btn-check:checked + .account-color-swatch {
  box-shadow: 0 0 0 2px var(--boszka-accent);
}

.account-color-none {
  background: linear-gradient(135deg, transparent 45%, var(--boszka-muted) 45%, var(--boszka-muted) 55%, transparent 55%), var(--boszka-surface);
}

/* Filtry list działające od razu (auto-filter.js): wiersz z samym ukrytym przyciskiem „Filtruj” nie zajmuje miejsca */
[data-auto-filter-actions]:not(:has(> :not([hidden]))) {
  display: none !important;
}

/* Warunki kont (cele) */
.goal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
}

.goal-card {
  border-left: 4px solid var(--boszka-line);
}

.goal-card.goal-met {
  border-left-color: var(--boszka-positive);
}

.goal-card.goal-unmet {
  border-left-color: var(--boszka-negative);
}

.goal-conditions li {
  padding: .375rem 0;
  border-top: 1px solid var(--boszka-line);
  font-size: .9rem;
}

.goal-progress {
  height: .375rem;
  margin-top: .375rem;
}

.goal-history {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
}

.goal-history-dot {
  display: inline-block;
  width: .75rem;
  height: .75rem;
  border-radius: .2rem;
}

.goal-history-met {
  background-color: var(--boszka-positive);
}

.goal-history-unmet {
  background-color: var(--boszka-negative);
}

.goal-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: .5rem;
}

.goal-template {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .625rem .75rem;
  border: 1px solid var(--boszka-line);
  border-radius: .5rem;
  color: var(--boszka-fg);
  text-decoration: none;
}

.goal-template:hover,
.goal-template.active {
  border-color: var(--boszka-accent);
  color: var(--boszka-fg);
}

.goal-template.active {
  box-shadow: 0 0 0 1px var(--boszka-accent);
}

/* Słownik kategorii wydatków */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
}

.category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 2.25rem;
}

.category-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-children {
  margin-top: .25rem;
  padding-left: .25rem;
}

.category-children .category-row {
  border-top: 1px solid var(--boszka-line);
  font-size: .925rem;
}

.category-children .icon {
  margin-right: .25rem;
}

.category-color-empty {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--boszka-muted);
}

.account-color-dot {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  margin-right: .5rem;
  border-radius: 50%;
  background-color: var(--account-color);
  vertical-align: baseline;
}

.account-color-blue { --account-color: #2f6fb3; }
.account-color-teal { --account-color: #1f8a8a; }
.account-color-green { --account-color: #3c8d4f; }
.account-color-gold { --account-color: #c49a2c; }
.account-color-orange { --account-color: #d9732b; }
.account-color-red { --account-color: #c0392b; }
.account-color-purple { --account-color: #7b52ab; }
.account-color-gray { --account-color: #7d8896; }

[data-bs-theme=dark] .account-color-blue { --account-color: #6ea8de; }
[data-bs-theme=dark] .account-color-teal { --account-color: #4fbdbd; }
[data-bs-theme=dark] .account-color-green { --account-color: #6cc283; }
[data-bs-theme=dark] .account-color-gold { --account-color: #d9b462; }
[data-bs-theme=dark] .account-color-orange { --account-color: #f0975a; }
[data-bs-theme=dark] .account-color-red { --account-color: #f07a6c; }
[data-bs-theme=dark] .account-color-purple { --account-color: #a98bd6; }
[data-bs-theme=dark] .account-color-gray { --account-color: #9aa5b4; }

.table-link {
  color: var(--boszka-fg);
  font-weight: 600;
  text-decoration: none;
}

.table-link:hover {
  color: var(--boszka-accent);
  text-decoration: underline;
}

.account-balance {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: inherit;
}

.accounts-filter .nav-link {
  padding: .375rem .875rem;
}

/* Pomoc kontekstowa (panel „?”) i instrukcja użytkownika */
.help-panel {
  --bs-offcanvas-width: 26rem;
  --bs-offcanvas-bg: var(--boszka-surface);
  --bs-offcanvas-color: var(--boszka-fg);
  border-left: 1px solid var(--boszka-line);
  box-shadow: -4px 0 16px rgba(16, 32, 52, .12);
}

.help-panel .offcanvas-header {
  gap: .5rem;
  border-bottom: 1px solid var(--boszka-line);
}

.help-panel .offcanvas-title {
  margin-right: auto;
}

.help-panel-icon {
  color: var(--boszka-accent);
}

.help-panel-footer {
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--boszka-line);
  font-size: .875rem;
}

.help-content {
  line-height: 1.6;
}

.help-content h3 {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.help-content h4 {
  margin-top: 1rem;
  font-size: .95rem;
  font-weight: 600;
}

.help-content ul,
.help-content ol {
  padding-left: 1.25rem;
}

.help-content li + li {
  margin-top: .25rem;
}

.help-content table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
  font-size: .875rem;
}

.help-content th,
.help-content td {
  padding: .375rem .5rem;
  border-bottom: 1px solid var(--boszka-line);
  text-align: left;
  vertical-align: top;
}

.help-content th {
  background-color: var(--boszka-surface-2);
  font-weight: 600;
}

.help-content blockquote {
  margin: 0 0 1rem;
  padding: .5rem .75rem;
  border-left: 3px solid var(--boszka-accent);
  background-color: var(--boszka-accent-soft);
  border-radius: 0 .375rem .375rem 0;
}

.help-content blockquote p:last-child {
  margin-bottom: 0;
}

.help-content code {
  color: inherit;
  background-color: var(--boszka-surface-2);
  padding: .05rem .3rem;
  border-radius: .25rem;
}

.help-manual {
  max-width: 52rem;
}

.help-article {
  scroll-margin-top: 5rem;
}

@media print {
  .app-sidebar,
  .app-topbar,
  .app-tabbar,
  .app-footer,
  .skip-link {
    display: none !important;
  }

  .app-main,
  .app-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  .help-manual {
    max-width: none;
  }

  .help-manual .card {
    border: 0;
    box-shadow: none;
  }

  .help-manual .card-body {
    padding: 0;
  }

  .help-content h2,
  .help-content h3 {
    break-after: avoid;
  }

  .help-content table,
  .help-content blockquote {
    break-inside: avoid;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}