/* =====================================================================
   faktury.bialeta.pl — style
   Motywy: [data-theme="jasny" | "ciemny" | "granat"]
   ===================================================================== */

:root,
[data-theme="jasny"] {
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --text: #19212f;
  --text-2: #4a5568;
  --muted: #6b7686;
  --border: #e2e6ee;
  --primary: #2f6fd6;
  --primary-ink: #ffffff;
  --primary-soft: #e7effc;
  --accent: #2f6fd6;
  --side-bg: #ffffff;
  --side-text: #3b4556;
  --side-muted: #8a94a5;
  --side-active-bg: #e7effc;
  --side-active-text: #1d4fa6;
  --side-border: #e2e6ee;
  --danger: #c4372f;
  --danger-soft: #fbeceb;
  --ok: #1f8a4c;
  --ok-soft: #e6f4ec;
  --warn: #a56a00;
  --warn-soft: #fbf1dc;
  --grid: #e9ecf2;
  --s1: #2f6fd6; --s2: #b8860b; --s3: #7a4fb5;
  --prev: #7f8a9c;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.06);
  --chart-surface: #ffffff;
  color-scheme: light;
}

[data-theme="ciemny"] {
  --bg: #0f1319;
  --surface: #171c24;
  --surface-2: #1d232d;
  --text: #e7eaf0;
  --text-2: #b9c1ce;
  --muted: #8b95a6;
  --border: #29313d;
  --primary: #4a86e8;
  --primary-ink: #ffffff;
  --primary-soft: #1d2b44;
  --accent: #6aa0f5;
  --side-bg: #12161d;
  --side-text: #c9d0db;
  --side-muted: #7d8798;
  --side-active-bg: #1d2b44;
  --side-active-text: #9cc0ff;
  --side-border: #232a35;
  --danger: #f07167;
  --danger-soft: #3a1e1d;
  --ok: #4cc17f;
  --ok-soft: #173326;
  --warn: #e0a33b;
  --warn-soft: #382c15;
  --grid: #252c37;
  --s1: #4a86e8; --s2: #b58a2a; --s3: #9070d0;
  --prev: #667185;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  --chart-surface: #171c24;
  color-scheme: dark;
}

/* granat + złoto + żółć + błękit */
[data-theme="granat"] {
  --bg: #f5efdf;
  --surface: #fffcf3;
  --surface-2: #faf4e4;
  --text: #13203b;
  --text-2: #364466;
  --muted: #69718a;
  --border: #e6d9b5;
  --primary: #1f4fa3;
  --primary-ink: #ffffff;
  --primary-soft: #e3eaf7;
  --accent: #c9a227;
  --side-bg: #13203b;
  --side-text: #e9dcb4;
  --side-muted: #9aa6c2;
  --side-active-bg: #c9a227;
  --side-active-text: #13203b;
  --side-border: #22325a;
  --danger: #b3261e;
  --danger-soft: #f9e5e2;
  --ok: #2c7a3f;
  --ok-soft: #e7f2e3;
  --warn: #8a6100;
  --warn-soft: #fbefcc;
  --grid: #ece2c6;
  --s1: #1f4fa3; --s2: #b8860b; --s3: #7a4fb5;
  --prev: #828a98;
  --shadow: 0 1px 2px rgba(19,32,59,.06), 0 6px 18px rgba(19,32,59,.08);
  --chart-surface: #fffcf3;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "DejaVu Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.num, td.num, .kwota { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden { display: none !important; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h1 { font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; color: var(--text-2); }
svg.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ */
/* Logowanie                                                           */
/* ------------------------------------------------------------------ */
.login-wrap { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 32px 28px; box-shadow: var(--shadow);
}
.login-card .brand { margin-bottom: 24px; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 8px; }
.login-link { text-align: center; font-size: 14px; color: var(--primary); text-decoration: none; }
.login-link:hover { text-decoration: underline; }
.login-themes { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }

/* ------------------------------------------------------------------ */
/* Układ aplikacji                                                     */
/* ------------------------------------------------------------------ */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100%; }
.side {
  background: var(--side-bg); color: var(--side-text); border-right: 1px solid var(--side-border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 18px 14px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--primary); color: var(--primary-ink); font-weight: 800; font-size: 15px;
}
[data-theme="granat"] .brand .logo { background: var(--accent); color: #13203b; }
.side .brand { padding: 4px 8px 18px; color: var(--side-text); }
.side .brand small { display: block; font-weight: 500; font-size: 12px; color: var(--side-muted); }

.pod-switch { margin: 0 4px 16px; }
.pod-switch label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--side-muted); margin: 0 0 6px 4px; }
.pod-switch select {
  width: 100%; background: transparent; color: var(--side-text); border: 1px solid var(--side-border);
}
[data-theme="granat"] .pod-switch select { background: #1a2a4c; }
.pod-switch select option { color: #19212f; background: #fff; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px;
  color: var(--side-text); font-weight: 500; text-decoration: none;
}
.nav a:hover { background: color-mix(in srgb, var(--side-active-bg) 55%, transparent); }
.nav a.active { background: var(--side-active-bg); color: var(--side-active-text); font-weight: 600; }
.nav a .tag { margin-left: auto; font-size: 10px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--side-border); color: var(--side-muted); }
.nav .sep { height: 1px; background: var(--side-border); margin: 10px 8px; }
.side .foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--side-border); font-size: 13px; color: var(--side-muted); }
.side .foot .who { color: var(--side-text); font-weight: 600; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top {
  display: flex; align-items: center; gap: 12px; padding: 16px 28px; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 20;
}
.top h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .actions { display: flex; gap: 8px; align-items: center; }
.content { padding: 24px 28px 48px; max-width: 1280px; width: 100%; }

.theme-dots { display: flex; gap: 6px; }
.theme-dot {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0;
}
.theme-dot[data-t="jasny"]  { background: linear-gradient(135deg, #ffffff 50%, #2f6fd6 50%); }
.theme-dot[data-t="ciemny"] { background: linear-gradient(135deg, #171c24 50%, #4a86e8 50%); }
.theme-dot[data-t="granat"] { background: linear-gradient(135deg, #13203b 50%, #c9a227 50%); }
.theme-dot.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }

/* dolny pasek — tylko mobile */
.tabbar { display: none; }

/* ------------------------------------------------------------------ */
/* Komponenty                                                          */
/* ------------------------------------------------------------------ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.card-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.card-h h2 { flex: 1; }
.card-b { padding: 18px 20px; }
.grid { display: grid; gap: 18px; }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-32 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

.stat { padding: 18px 20px; }
.stat .l { font-size: 13px; color: var(--muted); }
.stat .v { font-size: 26px; font-weight: 650; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat .s { font-size: 13px; color: var(--text-2); margin-top: 2px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); padding: 8px 14px; border-radius: 9px; font: inherit; font-weight: 550; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { filter: brightness(1.07); }
[data-theme="granat"] .btn.primary { box-shadow: inset 0 -2px 0 var(--accent); }
.btn.danger { color: var(--danger); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: .55; cursor: default; }
.icon-btn { padding: 7px; }

input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; padding: 8px 11px; width: 100%; min-height: 38px;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, .nav a:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary);
}
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: 13px; color: var(--text-2); font-weight: 550; }
.field .hint { font-size: 12px; color: var(--muted); }
.form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 16px; }
.form .c2 { grid-column: span 2; } .form .c3 { grid-column: span 3; } .form .c4 { grid-column: span 4; } .form .c6 { grid-column: span 6; }
.form .c1 { grid-column: span 1; }
.form h3 { grid-column: span 6; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.form h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.check input { width: 18px; height: 18px; min-height: 0; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar .grow { flex: 1; min-width: 180px; }
.toolbar select, .toolbar input { width: auto; }
.toolbar input[type="search"] { width: 100%; }

table.t { width: 100%; border-collapse: collapse; }
.t th, .t td { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.t th { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); position: sticky; top: 0; }
.t tbody tr:hover { background: var(--surface-2); }
.t tbody tr.click { cursor: pointer; }
.t tfoot td { font-weight: 650; border-bottom: 0; }
.t th.num, .t td.num { text-align: right; }
.side .foot .btn { color: var(--side-text); }
.t-wrap { overflow-x: auto; }
.t tr.off td { color: var(--muted); }

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap;
}
.badge.ok   { background: var(--ok-soft);   color: var(--ok);   border-color: transparent; }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.err  { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge.info { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }

.pod-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; }

.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.soon { padding: 32px; text-align: center; }
.soon .big { font-size: 40px; margin-bottom: 8px; }

/* modal */
.modal-bg {
  position: fixed; inset: 0; background: rgba(10,15,25,.45); display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 16px; z-index: 100; overflow-y: auto;
}
.modal { background: var(--surface); border-radius: 14px; width: 100%; max-width: 760px; box-shadow: 0 20px 60px rgba(0,0,0,.3); border: 1px solid var(--border); }
.modal.wide { max-width: 980px; }
.modal-h { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-h h2 { flex: 1; font-size: 18px; }
.modal-b { padding: 20px 22px; }
.modal-f { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 14px 14px; }
.modal-f .left { margin-right: auto; }

/* toast */
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast { background: var(--text); color: var(--surface); padding: 11px 16px; border-radius: 10px; box-shadow: var(--shadow); max-width: 380px; font-weight: 500; }
.toast.err { background: var(--danger); color: #fff; }

/* wykres */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid-l { stroke: var(--grid); stroke-width: 1; }
.chart .axis-t { fill: var(--muted); font-size: 12px; }
.chart .bar { transition: opacity .12s; }
.chart .hit { fill: transparent; cursor: default; }
.chart .col:hover .bar { opacity: .85; }
.chart .col:hover .hit { fill: color-mix(in srgb, var(--text) 5%, transparent); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.tip {
  position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  border-radius: 9px; padding: 9px 12px; font-size: 13px; min-width: 170px; z-index: 5; color: var(--text);
}
.tip b { display: block; margin-bottom: 4px; }
.tip .r { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.tip .r span:first-child { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }

.hbar { display: grid; grid-template-columns: minmax(90px, 140px) 1fr auto; gap: 6px 12px; align-items: center; font-size: 14px; }
.hbar .track { height: 10px; background: var(--surface-2); border-radius: 0 5px 5px 0; overflow: hidden; }
.hbar .fill { height: 100%; border-radius: 0 4px 4px 0; }
.hbar .lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

details.tbl { margin-top: 12px; }
details.tbl summary { cursor: pointer; color: var(--muted); font-size: 13px; }

.inv-head { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.inv-head .box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.inv-head .box h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 14px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-32 { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  body { font-size: 15px; }
  .app { grid-template-columns: 1fr; padding-bottom: 64px; }
  .side { display: none; }
  .side.open { display: flex; position: fixed; inset: 0 auto 0 0; width: 82%; max-width: 320px; z-index: 150; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 140; }
  .top { padding: 12px 16px; gap: 8px; }
  .top h1 { font-size: 18px; }
  .top .theme-dots { display: none; }
  .content { padding: 16px 14px 32px; }
  .g-2 { grid-template-columns: 1fr; }
  .stat .v { font-size: 18px; }
  .stat { padding: 14px 14px; }
  .hide-m { display: none !important; }
  table.t.cards td.main-cell { margin-bottom: 2px; }
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form .c3, .form .c4, .form .c6, .form h3 { grid-column: span 2; }
  .form .c2, .form .c1 { grid-column: span 1; }
  .inv-head { grid-template-columns: 1fr; }
  .modal-bg { padding: 0; align-items: stretch; }
  .modal { border-radius: 0; max-width: none; min-height: 100%; }
  .modal-f { border-radius: 0; position: sticky; bottom: 0; }
  .toolbar select { flex: 1; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: var(--side-bg); border-top: 1px solid var(--side-border); padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: 11px;
    color: var(--side-muted); text-decoration: none; border-radius: 8px;
  }
  .tabbar a.active { color: var(--side-active-text); background: var(--side-active-bg); }
  [data-theme="granat"] .tabbar a { color: var(--side-text); }
  [data-theme="granat"] .tabbar a.active { color: var(--side-active-text); }

  /* tabele -> karty */
  table.t.cards thead { display: none; }
  table.t.cards, table.t.cards tbody, table.t.cards tr, table.t.cards td { display: block; width: 100%; }
  table.t.cards tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  table.t.cards td { border: 0; padding: 2px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  table.t.cards td::before { content: attr(data-l); color: var(--muted); font-size: 13px; text-align: left; }
  table.t.cards td.main-cell { font-weight: 650; font-size: 16px; }
  table.t.cards td.main-cell::before { content: none; }
  table.t.cards tfoot { display: block; }
  table.t.cards tfoot tr { display: flex; justify-content: space-between; }
  table.t.cards tfoot td { width: auto; }
}

@media (min-width: 861px) { .only-mobile { display: none !important; } }

@media print {
  .side, .top, .tabbar, .toolbar { display: none !important; }
  .app { display: block; }
  .card { box-shadow: none; }
}

/* ------------------------------------------------------------------ */
/* Edytor faktury                                                      */
/* ------------------------------------------------------------------ */
.ed-bar .badge { font-size: 13px; padding: 4px 10px; }
.note { background: var(--primary-soft); color: var(--text); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
.note.warn { background: var(--warn-soft); }
.poz { display: flex; flex-direction: column; }
.poz-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px 72px 130px 140px 40px; gap: 10px; align-items: start;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
}
.poz.kor .poz-row { grid-template-columns: minmax(0, 1fr) 110px 130px 140px 140px; }
.poz.kor .poz-row .pn { grid-column: 1 / -1; }
.poz.kor .poz-row .pk { grid-column: 1 / 2; align-self: center; font-size: 14px; }
.poz-row label, .poz-row .pw { display: flex; flex-direction: column; gap: 4px; }
.poz-row label span, .poz-row .pw span { font-size: 12px; color: var(--muted); }
.poz-row .pn .hint { font-size: 12px; color: var(--muted); font-style: normal; display: block; margin-top: 0; }
.poz-row .pw b { font-variant-numeric: tabular-nums; text-align: right; padding: 8px 0; white-space: nowrap; }
.poz-row .pw span { text-align: right; }
.poz-row .pq input, .poz-row .pc input { text-align: right; font-variant-numeric: tabular-nums; }
.poz-row .px { align-self: start; margin-top: 22px; }
.neg { color: var(--danger); }
.poz-sum { display: flex; justify-content: flex-end; align-items: baseline; gap: 18px; padding: 16px 20px; font-size: 15px; }
.poz-sum b { font-size: 22px; font-variant-numeric: tabular-nums; }
fieldset[disabled] input, fieldset[disabled] select, fieldset[disabled] textarea { background: var(--surface-2); color: var(--text); opacity: 1; }
.field .hint a { color: var(--primary); }

@media (max-width: 860px) {
  .ed-bar { gap: 6px; }
  .ed-bar .grow { flex-basis: 100%; min-width: 0; height: 0; }
  .poz-row, .poz.kor .poz-row { grid-template-columns: 1fr 1fr; padding: 12px 14px; }
  .poz-row .pn, .poz.kor .poz-row .pk { grid-column: 1 / -1; }
  .poz-row .pj { display: none; }
  .poz-row .px { position: absolute; right: 8px; top: 12px; margin: 0; }
  .poz-row { position: relative; }
  .poz-row .pn input { padding-right: 40px; }
  .poz-sum b { font-size: 19px; }
}
@media (max-width: 860px) {
  .poz-row .pw { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; }
  .poz-row .pw b { padding: 0; }
}

.note.err { background: var(--danger-soft); }
.note.ok { background: var(--ok-soft); }
.pre { white-space: pre-wrap; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 6px 0; max-height: 220px; overflow: auto; }

/* ------------------------------------------------------------------ */
/* Sprawozdania                                                        */
/* ------------------------------------------------------------------ */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.seg a { padding: 7px 14px; color: var(--text-2); font-weight: 550; text-decoration: none; }
.seg a.on { background: var(--primary); color: var(--primary-ink); }
.spr-card { overflow: hidden; }
.spr-wrap { overflow: auto; max-height: calc(100vh - 230px); }
table.spr { border-collapse: separate; border-spacing: 0; width: auto; min-width: 360px; font-size: 14px; }
.spr th, .spr td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0; text-align: center; }
.spr thead { position: sticky; top: 0; z-index: 6; }
.spr thead th { background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-2); padding: 6px 4px; }
.spr th.sub { font-weight: 500; }
.spr th.h, .spr td.hh { background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.spr .sd { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 64px; text-align: left; padding: 0 8px; white-space: nowrap; }
.spr thead .sd { z-index: 7; background: var(--surface-2); }
.spr .sd span { color: var(--muted); font-size: 12px; }
.spr tr.wolny td { background: color-mix(in srgb, var(--warn-soft) 70%, transparent); }
.spr tr.wolny .sd { background: color-mix(in srgb, var(--warn-soft) 100%, var(--surface)); }
.spr input { border: 0; border-radius: 0; background: transparent; min-height: 30px; padding: 4px 6px; width: 62px; text-align: center; font-variant-numeric: tabular-nums; }
.spr td.hh input { width: 56px; font-weight: 650; }
.spr input:focus { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--surface); }
.spr input.reczne { color: var(--warn); text-decoration: underline dotted; }
.spr input:disabled { color: var(--text); }
.spr tfoot td { position: sticky; bottom: 0; background: var(--surface-2); font-weight: 700; padding: 8px 6px; z-index: 4; }
.spr tfoot .sd { z-index: 5; }
.spr td.tm input:not(:focus):placeholder-shown { background: transparent; }
table.t.mini th, table.t.mini td { padding: 5px 6px; }
table.t.mini input, table.t.mini select { min-height: 32px; padding: 4px 8px; }

.dni-tyg { display: flex; gap: 4px; flex-wrap: wrap; }
.dni-tyg label { position: relative; }
.dni-tyg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dni-tyg span { display: inline-block; min-width: 38px; text-align: center; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--text-2); user-select: none; }
.dni-tyg input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.dni-tyg input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }
.harm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.harm .dni-tyg span { min-width: 30px; padding: 4px 6px; font-size: 12px; }
table.t.mini tr.kol-a td { border-bottom: 0; }
/* przyklejone nagłówek i suma muszą być nieprzezroczyste */
.spr thead th.h, .spr tfoot td, .spr tfoot td.hh { background: color-mix(in srgb, var(--primary-soft) 40%, var(--surface-2)); }
.spr thead th:not(.h), .spr tfoot td:not(.hh) { background: var(--surface-2); }

/* ------------------------------------------------------------------ */
/* Raporty                                                             */
/* ------------------------------------------------------------------ */
.r-bar { margin-bottom: 10px; }
.r-eksport { display: flex; gap: 8px; }
.r-hbar { grid-template-columns: minmax(110px, 300px) 1fr auto; }
.r-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.r-tabs a { white-space: nowrap; }
.r-f { display: inline-flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.r-f select { min-width: 120px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-2); align-self: flex-end; min-height: 38px; }
.chk input { width: auto; min-height: 0; }
.r-filtry { align-items: flex-end; }
.neg { color: var(--danger); font-weight: 600; }
.poz { color: var(--ok); font-weight: 600; }
.r-t tfoot td { background: var(--surface-2); border-top: 1px solid var(--border); white-space: nowrap; }
.r-t td.num { white-space: nowrap; }
.r-t tr.r-po td { background: color-mix(in srgb, var(--danger-soft) 70%, transparent); }
.r-hbar .track { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 22px; background: none; }
.r-hbar .fill { height: 9px; background: var(--s1); min-width: 2px; }
.r-hbar .num { text-align: right; line-height: 1.2; }
@media (max-width: 860px) {
  .r-filtry .r-f { flex: 1 1 45%; }
  .r-filtry .r-f select { width: 100%; min-width: 0; }
  .r-filtry .grow { display: none; }
  .r-eksport { width: 100%; }
  .r-eksport .btn { flex: 1; justify-content: center; }
  .r-bar .grow { display: none; }
  table.t.cards.r-t tfoot tr { display: block; padding: 12px 14px; background: var(--surface-2); }
  table.t.cards.r-t tfoot td { display: flex; width: 100%; justify-content: space-between; background: none; border: 0; padding: 2px 0; }
  table.t.cards.r-t tfoot td::before { content: attr(data-l); color: var(--muted); font-size: 13px; font-weight: 400; }
  table.t.cards.r-t tfoot td:empty, table.t.cards.r-t tbody td:empty { display: none; }
  .r-hbar { grid-template-columns: minmax(80px, 110px) 1fr auto; font-size: 13px; }
}
@media (max-width: 860px) {
  table.t.cards.r-t td.main-cell { justify-content: flex-start; text-align: left; }
}

/* Gabinety (administrator) */
.btn.danger-fill { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger-fill:disabled { opacity: .45; }
.gab-sep td { background: var(--surface-2); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 14px; }
tr.gab-usun td { color: var(--muted); }
@media (max-width: 860px) { table.t.cards tr.gab-sep td { display: block; } table.t.cards tr.gab-sep td::before { content: none; } }

/* Bloki ustawień — nagłówek jako kolorowy pasek, naprzemienne tło, skróty */
.sekcja { grid-column: 1 / -1; padding: 0 18px 18px; border-radius: 12px; overflow: hidden;
  background: var(--sek-a); border: 1px solid var(--sek-border); }
.sekcja.alt { background: var(--sek-b); }
.form .sekcja > h3, .form .sekcja > h3:first-child {
  margin: 0 -18px 4px; padding: 10px 18px; border: 0; border-bottom: 1px solid var(--sek-border);
  font-size: 15px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  background: var(--sek-head); color: var(--sek-head-ink); }
.sekcja.alt > h3 { background: var(--sek-head-b) !important; }
.sekcja.blysk { animation: sek-blysk 1.2s ease-out; }
@keyframes sek-blysk { 0% { box-shadow: 0 0 0 3px var(--sek-akcent); } 100% { box-shadow: 0 0 0 3px transparent; } }
.sek-nav { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2);
  position: sticky; top: var(--top-h, 72px); z-index: 3; }
.sek-nav:empty { display: none; }
.sek-nav a { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: var(--text-2); text-decoration: none; border: 1px solid var(--border); background: var(--surface); }
.sek-nav a:hover { color: var(--primary); border-color: var(--primary); }
#pForm { gap: 16px; }
[data-theme="jasny"]  { --sek-a: #ffffff; --sek-b: #e9f0fb; --sek-border: #cfd9ea; --sek-akcent: #2f6fd6;
  --sek-head: #2f6fd6; --sek-head-b: #1d4fa6; --sek-head-ink: #ffffff; }
[data-theme="ciemny"] { --sek-a: #1a2029; --sek-b: #232f42; --sek-border: #334157; --sek-akcent: #4a86e8;
  --sek-head: #2d5cab; --sek-head-b: #3a4a63; --sek-head-ink: #ffffff; }
[data-theme="granat"] { --sek-a: #fffcf3; --sek-b: #f1e6c8; --sek-border: #dccfa8; --sek-akcent: #b8860b;
  --sek-head: #13203b; --sek-head-b: #1f4fa3; --sek-head-ink: #f3d27a; }
@media (max-width: 860px) {
  .sekcja { padding: 0 12px 14px; }
  .form .sekcja > h3, .form .sekcja > h3:first-child { margin: 0 -12px 4px; padding: 10px 12px; }
  .sek-nav { padding: 8px 12px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .sek-nav a { white-space: nowrap; }
}
td[data-l="NIP"] { white-space: nowrap; }

/* Usługi: wszystkie grupy z tymi samymi szerokościami kolumn */
@media (min-width: 861px) {
  table.t-uslugi { table-layout: fixed; width: 100%; }
  table.t-uslugi col.c-typ { width: 26%; }
  table.t-uslugi col.c-cena { width: 14%; }
  table.t-uslugi col.c-jm { width: 9%; }
  table.t-uslugi col.c-uz { width: 9%; }
  table.t-uslugi td.main-cell { overflow-wrap: anywhere; }
}

/* Weryfikacja dwuetapowa */
.kod-2fa { font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.kroki-2fa { margin: 0; padding-left: 20px; display: grid; gap: 14px; }
.qr-2fa { background: #fff; padding: 10px; border-radius: 10px; width: 184px; margin: 10px 0 6px; border: 1px solid var(--border); }
.qr-2fa svg { width: 164px; height: 164px; display: block; }
.klucz-2fa { font-size: 14px; letter-spacing: .06em; user-select: all; }
.kody-zap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kody-zap code { font-size: 17px; letter-spacing: .08em; text-align: center; padding: 8px; border: 1px dashed var(--border); border-radius: 8px; background: var(--surface-2); user-select: all; }

/* Płatności / wpłaty częściowe */
.pl-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pl-sum > div { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--surface-2); }
.pl-sum span { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pl-sum b { font-size: 19px; font-variant-numeric: tabular-nums; }
.pl-sum em { display: block; font-size: 11px; color: var(--muted); font-style: normal; }
.pl-sum .ok b { color: var(--ok); } .pl-sum .warn b { color: var(--warn); }
.pl-bar { height: 10px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin-top: 12px; }
.pl-bar i { display: block; height: 100%; background: var(--ok); border-radius: 0 4px 4px 0; }
.btn.ok-btn { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.btn.warn-btn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
@media (max-width: 860px) { .pl-sum { grid-template-columns: 1fr; } }

/* Pasek faktury: przyciski akcji zawsze razem, wyrównane do prawej */
.ed-akcje { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-left: auto; }
.ed-bar .ksef-nr { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .ed-akcje { justify-content: flex-start; margin-left: 0; width: 100%; } }