/* ---- Manrope hostowany lokalnie ------------------------------------------
   Wczesniej kazdy szablon ciagnal font z fonts.googleapis.com (3 zapytania
   zewnetrzne + zaleznosc od sieci w aplikacji, ktora chodzi na localhost).
   Manrope jest fontem ZMIENNYM: Google podaje ten sam plik dla wag 400-800,
   wiec deklarujemy zakres, a nie piec osobnych krojow.
   latin-ext jest OBOWIAZKOWY — bez niego polskie znaki spadaja na font
   systemowy i tekst rozjezdza sie w polowie wyrazu.                        */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/static/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/static/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ===== FirmZen — system designu =====================================
   Warstwa 1 — prymitywy: skale odstępów, typografii i promieni.
   Warstwa 2 — semantyka: kolory nazwane rolą (--txt, --prz, --kos…).
   Warstwa 3 — komponenty: składane wyłącznie z warstw wyżej, zero hexów.

   Skale powstały po audycie designu (docs/audyt-designu-2026-09-12.md), który
   zmierzył na żywej stronie 14 różnych odstępów, 10 stopni pisma i 10 promieni.
   Nowa wartość ma pochodzić ze skali — jeśli żadna nie pasuje, to znak, że
   projekt idzie w bok, a nie że skala jest za krótka.                       */
:root{
  /* --- warstwa 1: odstępy (2 jest potrzebne na plakietki, inaczej rosną wiersze tabeli) --- */
  --s0:2px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  /* --- warstwa 1: typografia --- */
  --fs-xs:11px;   /* etykiety, plakietki, opisy osi */
  --fs-sm:13px;   /* tekst podstawowy, komórki tabel */
  --fs-md:15px;   /* nagłówki sekcji, przyciski */
  --fs-lg:22px;   /* liczby w kartach, tytuł strony */
  /* --- warstwa 1: promienie --- */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-full:999px;

  /* --- warstwa 2: kolory (rola, nie odcień) ---
     txt2/muted/prz/kos/warn przechodzą 4.5:1 na każdym tle, na którym stoją:
     białym, --bg i własnym tincie. Wyliczone, nie dobrane na oko. */
  --bg:#eef2f7; --card:#ffffff; --line:#e4eaf2; --shadow:0 1px 3px rgba(16,42,76,.04);
  --txt:#0f1f3a; --txt2:#4a5a6a; --muted:#5d6f89;
  --prz:#0b7c70; --kos:#cb2d49; --warn:#926516; --granat:#102a4c;
  --prz-bg:#e7f7f4; --kos-bg:#fdeaee; --warn-bg:#fbf2e0;
  /* --akcent do dekoracji (obrysy, aktywna zakładka); wypełnione przyciski biorą
     ciemniejszy wariant, bo biały tekst na #11b5a4 dawał 2.57:1 */
  --akcent:#11b5a4; --akcent-btn:#0c8478;
  --tlo-2:#f3f6fa;        /* drugie tło: nagłówki tabel, chipy, hover nawigacji */
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);
     color:var(--txt);-webkit-font-smoothing:antialiased;font-size:var(--fs-sm)}
     /* bez tego elementy bez wlasnego stopnia (np. <strong> w dropzone) brały 16px z przeglądarki */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
a{color:inherit}

/* ---- Topbar ---- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--s5);height:60px;
        padding:0 var(--s5);background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:var(--s3)}
.brand .logo-img{width:34px;height:34px;object-fit:contain;display:block}   /* ikona #WszystkokolwiekWSpółce */
.brand .name{font-weight:800;font-size:var(--fs-md);letter-spacing:-.2px;white-space:nowrap}
.brand .name span{color:var(--muted);font-weight:600}
.brand .nazwy{display:flex;flex-direction:column;gap:1px;line-height:1.15}
.brand .linia{font-size:var(--fs-xs);font-weight:600;color:#1a6fb8;white-space:nowrap}   /* podpis linii marki; przyciemniony niebieski z logo — 5.2:1 na bialym (#47abff dawal 2.4:1) */
/* stopka marki: "od" + logo Wszystkokolwiek w prawym dolnym rogu tresci */
.marka{display:flex;justify-content:flex-end;align-items:center;gap:var(--s2);margin-top:var(--s6);
       font-size:var(--fs-xs);color:var(--muted)}
.marka img{height:24px;width:auto;display:block}   /* SVG przyciety do rysunku — 24 px to realna wysokosc logo */
.topnav{display:flex;align-items:center;gap:var(--s1)}
.topnav a{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-md);
        color:var(--txt2);font-weight:600;font-size:var(--fs-sm);text-decoration:none;white-space:nowrap}
@media(max-width:1100px){ .wyloguj a{display:none} }   /* 7 zakladek + wyloguj w jednym wierszu */
@media(max-width:1100px){ .topnav a{padding:var(--s2)} .topbar{gap:var(--s3)} }
.topnav a:hover{background:var(--tlo-2)}
.topnav a.active{background:var(--prz-bg);color:#0a6d62;font-weight:700}  /* 5.63:1 na --prz-bg */
.wyloguj{display:flex;align-items:center;gap:var(--s2);margin:0 0 0 auto}   /* dosuniete do prawej */
.wyloguj span,.wyloguj a{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.wyloguj a{text-decoration:none} .wyloguj a:hover{color:var(--txt);text-decoration:underline}
.wyloguj .btn{padding:var(--s1) var(--s3);font-size:var(--fs-xs)}

/* ---- Layout ---- */
.wrap{max-width:1240px;margin:0 auto;padding:var(--s5) var(--s5) var(--s6)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
        margin-bottom:var(--s5)}
h1.title{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.4px}
.subtitle{font-size:var(--fs-sm);color:var(--txt2);margin-top:var(--s0);font-weight:500}

/* ---- Karta (kontener sekcji) ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);
      box-shadow:var(--shadow);margin-bottom:var(--s4)}
.card h2{font-size:var(--fs-md);font-weight:800;letter-spacing:-.2px}
.card .sub{font-size:var(--fs-sm);color:var(--muted);font-weight:600;margin-top:var(--s0)}

/* ---- Segment / chip ---- */
.controls{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.monthchip{display:flex;align-items:center;gap:var(--s2);background:var(--card);border:1px solid var(--line);
        border-radius:var(--r-md);padding:var(--s1) var(--s3)}
.monthchip .l{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.monthchip select{border:none;background:transparent;font-family:inherit;font-size:var(--fs-sm);font-weight:700;
        color:var(--txt);cursor:pointer}

/* ---- Karta statystyki — JEDEN komponent =================================
   Zastępuje .kpi, .statcard, .stcard i .chkcard, czyli cztery warianty tego
   samego: etykieta + wyróżniona wartość (+ opcjonalnie kontekst, ikona, znak).
   .panel w index.html świadomie zostaje osobno — to kontener na kontrolki,
   nie karta z wartością.
   Kontener na siatce auto-fit, więc ostatnia karta nie zostaje sierotą
   rozciągniętą na całą szerokość (tak było przy flex:1 + wrap).            */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s3);
       margin-bottom:var(--s4)}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
      padding:var(--s3) var(--s4);box-shadow:var(--shadow);min-width:0}
.stat .lbl{font-size:var(--fs-xs);font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.stat .val{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.4px;white-space:nowrap;
        overflow:hidden;text-overflow:ellipsis;margin-top:var(--s0)}
.stat .ctx{font-size:var(--fs-sm);color:var(--txt2);font-weight:600;margin-top:var(--s1)}
.stat .top{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.stat .ic{width:30px;height:30px;border-radius:var(--r-md);display:flex;align-items:center;
        justify-content:center;flex-shrink:0}
.stat .mark{float:right;font-size:var(--fs-md);margin-left:var(--s2)}
/* wariant tekstowy — gdy „wartością" jest krótkie zdanie, nie liczba */
.stat.txt .val{font-size:var(--fs-md);letter-spacing:0;white-space:normal}
/* warianty stanu — pasek po lewej i kolor wartości */
.stat.ok{border-left:4px solid var(--prz)}       .stat.ok .val{color:var(--prz)}
.stat.bad{border-left:4px solid var(--kos)}      .stat.bad .val{color:var(--kos)}
.stat.warn{border-left:4px solid var(--warn)}    .stat.warn .val{color:var(--warn)}
.stat.neutral{border-left:4px solid var(--muted)}
.stat .val.plus{color:var(--prz)} .stat .val.minus{color:var(--kos)} .stat .val.dark{color:var(--txt)}
.badge{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fs-xs);margin-top:var(--s1);
        font-weight:700;padding:var(--s0) var(--s2);border-radius:var(--r-sm)}
.badge.green{color:var(--prz);background:var(--prz-bg)} .badge.warn{color:var(--warn);background:var(--warn-bg)}
.badge.gray{color:var(--txt2);background:var(--tlo-2)}

/* ---- Legenda / wykres ---- */
.legend{display:flex;align-items:center;gap:var(--s4)}
.legend .it{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm);color:var(--txt2);font-weight:600}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.chart{position:relative;height:290px;margin-top:var(--s4)}
.grid{position:absolute;left:0;right:0;top:20px;bottom:28px}
.grid .line{position:absolute;left:0;right:0;border-top:1px dashed #eaeef4}
.grid .line.zero{border-top:1px solid #dfe5ee}
.grid .line span{position:absolute;left:0;top:-8px;font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.bars{position:absolute;left:44px;right:0;top:20px;bottom:28px;display:flex;align-items:flex-end}
.colb{flex:1;position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;
        gap:var(--s1);cursor:pointer}
.colb .bar{border-radius:var(--r-sm) var(--r-sm) 0 0}
.colb .bar.p{background:linear-gradient(180deg,#1ecbb8,#0fa595);box-shadow:0 2px 6px rgba(17,181,164,.25)}
.colb .bar.k{background:linear-gradient(180deg,#f47e93,#e85772);box-shadow:0 2px 6px rgba(232,87,114,.22)}
.colb .net{position:absolute;font-size:var(--fs-xs);font-weight:800;white-space:nowrap}
.colb:hover{background:#f6f9fc;border-radius:var(--r-sm)}
.colb.sel{background:#eef4fb;border-radius:var(--r-sm)}
.xlabels{position:absolute;left:44px;right:0;bottom:0;height:24px;display:flex}
.xlabels .xl{flex:1;text-align:center;font-size:var(--fs-xs);font-weight:700;color:var(--txt2);overflow:hidden}

/* ---- Dolny rząd ---- */
.bottom{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s4)}
.donut-wrap{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.donut{position:relative;width:148px;height:148px;flex-shrink:0;border-radius:50%;background:var(--tlo-2)}
.donut .hole{position:absolute;inset:30px;background:#fff;border-radius:50%;display:flex;flex-direction:column;
        align-items:center;justify-content:center}
.donut .hole .s{font-size:var(--fs-md);font-weight:800;color:var(--txt)}
.donut .hole .sl{font-size:var(--fs-xs);color:var(--muted);font-weight:700}
.dlegend{flex:1;min-width:170px;display:flex;flex-direction:column;gap:var(--s2)}
.dlegend .row{display:flex;align-items:center;gap:var(--s2)}
.dlegend i{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.dlegend .nm{font-size:var(--fs-sm);color:var(--txt2);font-weight:600;flex:1;white-space:nowrap;
        overflow:hidden;text-overflow:ellipsis}
.dlegend .pc{font-size:var(--fs-sm);color:var(--txt);font-weight:700}

.catlist{display:flex;flex-direction:column;gap:var(--s3)}
.catrow .head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--s1);gap:var(--s3)}
.catrow .nm{font-size:var(--fs-sm);color:var(--txt);font-weight:600;white-space:nowrap;overflow:hidden;
        text-overflow:ellipsis}
.catrow .amtwrap{display:flex;align-items:baseline;gap:var(--s2);flex-shrink:0}
.catrow .amtwrap .a{font-size:var(--fs-sm);color:var(--txt);font-weight:700}
.catrow .amtwrap .p{font-size:var(--fs-xs);color:var(--muted);font-weight:600;width:46px;text-align:right}
.catrow .track{height:8px;background:#f0f3f8;border-radius:var(--r-full);overflow:hidden}
.catrow .fill{height:100%;border-radius:var(--r-full)}
.catrow .fill.kos{background:linear-gradient(90deg,#ec6a82,#e85772)}
.catrow .fill.prz{background:linear-gradient(90deg,#1ecbb8,#0fa595)}

/* ---- Filtry ---- */
.filters{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;background:var(--card);
        border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3) var(--s4);
        margin-bottom:var(--s3);box-shadow:var(--shadow)}
.filters label{font-size:var(--fs-xs);color:var(--txt2);display:flex;align-items:center;gap:var(--s1)}
.filters select,.filters input{font-size:var(--fs-sm);padding:var(--s1) var(--s2);border:1px solid var(--line);
        border-radius:var(--r-sm);font-family:inherit;background:#fff;color:var(--txt)}
.filters input[type=search]{min-width:220px}

/* ---- Tabela ---- */
.tablecard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
        box-shadow:var(--shadow);overflow:hidden}
.tbl-scroll{max-height:68vh;overflow:auto}   /* poszerzone kolumny -> pasek poziomy na dole ramki */
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-sm);table-layout:fixed}
table.data th{background:var(--tlo-2);color:var(--txt2);font-weight:700;text-align:left;
        padding:var(--s2) var(--s3);position:sticky;top:0;cursor:pointer;font-size:var(--fs-sm);
        border-bottom:1px solid var(--line);z-index:1}
table.data td{padding:var(--s2) var(--s3);border-bottom:1px solid #eef1f5;white-space:nowrap;overflow:hidden;
        text-overflow:ellipsis;color:var(--txt)}
table.data tbody tr:nth-child(even) td{background:#f8fafc}
table.data td.kw{text-align:right;font-variant-numeric:tabular-nums}
table.data td.kw.plus{color:var(--prz)} table.data td.kw.minus{color:var(--kos)}
table.data tr.weryfik td{background:#fff7e8 !important}
.col-resizer{position:absolute;top:0;right:-1px;width:8px;height:100%;cursor:col-resize;user-select:none;z-index:3}
table.data th:last-child .col-resizer{right:0}   /* nie wystawac poza ramke — inaczej pasek poziomy bez powodu */
.col-resizer:hover,.col-resizer.active{background:#cbd6e6}
.catbadge{display:inline-block;max-width:100%;font-size:var(--fs-xs);padding:var(--s0) var(--s2);
        border-radius:var(--r-sm);background:var(--bg);color:var(--txt);font-weight:600;cursor:pointer;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.catbadge:hover{background:#e2e9f3}
.catbadge.w{background:var(--warn-bg);color:var(--warn)}
.catsel{font-size:var(--fs-xs);padding:var(--s0) var(--s1);border:1px solid var(--akcent);
        border-radius:var(--r-sm);font-family:inherit;width:100%;background:#fff}
.pill{font-size:var(--fs-xs);padding:var(--s0) var(--s2);border-radius:var(--r-md);background:var(--tlo-2);
        color:var(--txt2);font-weight:600}
.pill.w{background:var(--warn-bg);color:var(--warn)}

/* ---- Import / eksport ---- */
.row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.btn{background:var(--akcent-btn);color:#fff;border:0;padding:var(--s2) var(--s4);border-radius:var(--r-md);
     font-size:var(--fs-sm);cursor:pointer;font-weight:700;font-family:inherit;text-decoration:none;
     display:inline-block}
.btn:hover{filter:brightness(.95)}
.btn.sec{background:#fff;color:var(--granat);border:1px solid var(--line)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.drop{border:2px dashed var(--akcent);border-radius:var(--r-md);padding:var(--s5);text-align:center;
      cursor:pointer;background:var(--prz-bg);transition:.15s}
.drop.hover{background:#d8efeb}
.drop p{margin:var(--s1) 0}
.stepno{display:inline-flex;width:22px;height:22px;border-radius:var(--r-sm);background:var(--prz-bg);
        color:var(--prz);font-size:var(--fs-xs);font-weight:800;align-items:center;justify-content:center;
        margin-right:var(--s2);vertical-align:middle}
.muted{color:var(--txt2);font-size:var(--fs-sm)}
.hidden{display:none}
.filechip{font-size:var(--fs-xs);padding:var(--s1) var(--s3);border-radius:var(--r-md);background:var(--prz-bg);
        border:1px solid #cfe9e4}
.filechip b{color:var(--granat)} .filechip.vat{background:#fff0f3;border-color:#f3cdd5}

/* focus: wcześniej nie było ani jednej reguły :focus w całym pliku (WCAG 2.4.7).
   :focus-visible, żeby obrys pokazywał się przy klawiaturze, a nie po kliknięciu myszką. */
:focus-visible{outline:2px solid var(--akcent-btn);outline-offset:2px;border-radius:var(--s1)}
.topnav a:focus-visible,.btn:focus-visible,.minibtn:focus-visible{outline-offset:3px}
table.data td[class*="cell"]:focus-visible{outline-offset:-2px}

#toast{position:fixed;bottom:var(--s5);right:var(--s5);background:var(--granat);color:#fff;
       padding:var(--s3) var(--s4);border-radius:var(--r-md);opacity:0;transition:.3s;z-index:50}
#toast.show{opacity:1}
#toast.blad{background:var(--kos)}   /* błąd zostaje dłużej i ma inny kolor niż potwierdzenie */
.hint{font-size:var(--fs-sm);color:var(--txt2);margin:var(--s0) var(--s0) var(--s3)}
.count{font-size:var(--fs-sm);color:var(--txt2);margin:0 var(--s0) var(--s2)}

/* ---- Responsywność ---- */
@media(max-width:980px){ .bottom{grid-template-columns:1fr} }
@media(max-width:620px){ .topnav{display:none} .wyloguj a{display:none} }

/* pasek abonamentu (okres probny / termin platnosci) — tresc wstawia static/abonament.js */
.abon{padding:var(--s2) var(--s4);font-size:var(--fs-sm);font-weight:600;
  background:var(--tlo-2);color:var(--txt2);border-bottom:1px solid var(--line);text-align:center}
.abon.uwaga{background:var(--kos-bg);color:var(--kos)}
.abon a{color:inherit}