/* Panel admin.tabellio.pl - warstwa wizualna w duchu macOS (Sonoma/Ventura).
   ZASADY (dyktat wlasciciela 2026-08-04): JEDEN krój - systemowy stack Apple, zero
   web-fontow i zero CDN (panel dziala bez internetu). Tekst bazowy 16px, drobny
   nigdy ponizej 14px. Wysoki kontrast: #F5F5F7 na #0B0B0F (18:1), drugorzedny
   #C7C7CC (11:1), najsłabszy dopuszczalny #A1A1AA (7,6:1) - wyblakle szarosci
   znikaja. Warstwy rozdziela JASNOSC tla, nie ramka; hairline rgba(255,255,255,.08)
   tylko tam, gdzie krawedz musi byc czytelna. Promienie 12-16px, odstepy w siatce 8/4.
   Dark-only. Bez gradientow, bez glow, bez emoji-ikon. tabular-nums w kazdej liczbie.
   MONO wylacznie dla ciagow maszynowych (hash, token) - reszta jednym krojem. */

:root {
    --tlo: #0B0B0F;
    --powierzchnia: #16161C;
    --powierzchnia-2: #20212A;
    --powierzchnia-3: #2A2B36;
    --powierzchnia-hover: rgba(255, 255, 255, .045);
    --linia: rgba(255, 255, 255, .08);
    --linia-slaba: rgba(255, 255, 255, .05);

    --tekst: #F5F5F7;       /* 18:1 na tle - tekst glowny */
    --tekst-2: #C7C7CC;     /* 11:1 - dane drugoplanowe */
    --tekst-3: #A1A1AA;     /* 7,6:1 - podpisy; CIEMNIEJ NIE WOLNO */

    --akcent: #6E79D6;
    --akcent-jasny: #A5ADF5;   /* akcent jako TEKST na ciemnym tle (9:1) */
    --akcent-tlo: #5C67CE;     /* akcent pod BIALYM tekstem (4,9:1) */
    --ok: #30D158;
    --warn: #FF9F0A;
    --err: #FF453A;
    --info: #64D2FF;

    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;
    --s8: 64px;

    --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
            Inter, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --promien: 16px;      /* karty */
    --promien-m: 12px;    /* przyciski, pola, kafle wewnetrzne */
    --promien-s: 8px;     /* plakietki */
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
    margin: 0;
    background: var(--tlo);
    color: var(--tekst);
    font: 400 16px/1.5 var(--sans);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }

/* --- gorny pasek --------------------------------------------------------- */

.pasek {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--s5);
    padding: 0 var(--s6);
    height: 60px;
    background: rgba(11, 11, 15, .72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--linia);
}

.marka {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--tekst);
}

.marka svg { color: var(--akcent-jasny); }

.pasek nav { display: flex; gap: var(--s1); margin-left: var(--s3); }

.pasek nav a {
    padding: var(--s2) var(--s3);
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--tekst-2);
}

.pasek nav a:hover { background: rgba(255, 255, 255, .06); color: var(--tekst); }

.pasek nav a.aktywny {
    background: rgba(255, 255, 255, .10);
    color: var(--tekst);
    font-weight: 600;
}

.pasek .prawa { margin-left: auto; display: flex; align-items: center; gap: var(--s4); }

.pasek .cennik { font-size: 15px; color: var(--tekst-3); }

/* --- uklad --------------------------------------------------------------- */

main { max-width: 1280px; margin: 0 auto; padding: var(--s7) var(--s6) var(--s8); }

h1 {
    margin: 0 0 var(--s2);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.02em;
}

h2 {
    margin: var(--s7) 0 var(--s4);
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--tekst);
}

.podtytul {
    margin: 0 0 var(--s6);
    color: var(--tekst-3);
    font-size: 17px;
    line-height: 1.45;
}

.karta {
    background: var(--powierzchnia);
    border: 1px solid var(--linia-slaba);
    border-radius: var(--promien);
    padding: var(--s5);
}

.karta + .karta { margin-top: var(--s4); }

/* --- kafle liczbowe ------------------------------------------------------ */

.kafle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s3);
    margin-bottom: var(--s6);
}

.kafel {
    background: var(--powierzchnia);
    border: 1px solid var(--linia-slaba);
    border-radius: var(--promien);
    padding: var(--s5);
}

.kafel .etykieta {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--tekst-3);
}

.kafel .wartosc {
    margin-top: var(--s3);
    font-size: 32px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.02em;
}

/* Kafel ze slowem zamiast liczby (status, stan lancucha) - krotszy oddech. */
.kafel .wartosc.slowna { font-size: 24px; letter-spacing: -.01em; }

.kafel .dopisek {
    margin-top: var(--s2);
    font-size: 15px;
    line-height: 1.4;
    color: var(--tekst-3);
}

/* --- tabele -------------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

th {
    padding: 0 var(--s4) var(--s3);
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tekst-3);
    border-bottom: 1px solid var(--linia);
    white-space: nowrap;
}

td {
    padding: var(--s4);
    border-bottom: 1px solid var(--linia-slaba);
    font-size: 16px;
    line-height: 1.45;
    vertical-align: top;
}

thead + tbody tr:first-child td { padding-top: var(--s4); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--powierzchnia-hover); }

th:first-child, td:first-child { padding-left: var(--s2); }
th:last-child, td:last-child { padding-right: var(--s2); }

/* Liczba nigdy sie nie lamie - zlamane "120 960 / 8 260" czyta sie jak dwie dane. */
td.num, th.num { text-align: right; white-space: nowrap; }

/* Dawniej mono na kazdej danej - dzis JEDEN kroj, a kolumny trzyma tabular-nums. */
.mono { font-variant-numeric: tabular-nums; }

/* Ciagi maszynowe (hash, token) - jedyne miejsce na mono. */
.hex { font-family: var(--mono); font-size: 15px; letter-spacing: -.01em; }

/* Kod urzadzenia = nazwa wiersza, wiec czyta sie jak tytul, nie jak dana. */
.kod { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }

.przygasle { color: var(--tekst-3); }

/* Podpis pod wartoscia w komorce tabeli (kancelaria, wiek heartbeatu, model). */
.pod { margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--tekst-3); }

.zawijaj { max-width: 340px; }

/* --- znaczniki stanu ----------------------------------------------------- */

.znacznik {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
}

.kropka { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

.ton-ok { color: var(--ok); }
.ton-warn { color: var(--warn); }
.ton-err { color: var(--err); }
.ton-info { color: var(--info); }

.plakietka {
    display: inline-block;
    min-width: 28px;
    padding: 3px var(--s2);
    border-radius: var(--promien-s);
    background: var(--powierzchnia-2);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: var(--tekst-2);
}

.plakietka.klasa-A { color: var(--tekst-2); }
.plakietka.klasa-B { color: var(--info); }
.plakietka.klasa-C { color: var(--warn); }
.plakietka.klasa-D { color: var(--akcent-jasny); }

/* --- formularze i przyciski ---------------------------------------------- */

label {
    display: block;
    margin-bottom: var(--s2);
    font-size: 15px;
    font-weight: 500;
    color: var(--tekst-2);
}

input[type="text"], input[type="password"] {
    width: 100%;
    padding: var(--s3) var(--s4);
    background: var(--powierzchnia-2);
    border: 1px solid var(--linia);
    border-radius: var(--promien-m);
    color: var(--tekst);
    font: 400 17px/1.4 var(--sans);
    outline: none;
}

input::placeholder { color: var(--tekst-3); }
input:focus { border-color: var(--akcent-jasny); box-shadow: 0 0 0 3px rgba(110, 121, 214, .28); }

.pole + .pole { margin-top: var(--s5); }

.przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s3) var(--s5);
    background: var(--akcent-tlo);
    border: none;
    border-radius: var(--promien-m);
    color: #fff;
    font: 600 17px/1.25 var(--sans);
    cursor: pointer;
}

.przycisk:hover { background: var(--akcent); color: #fff; }

.przycisk.wtorny {
    background: var(--powierzchnia-2);
    color: var(--tekst);
    border: 1px solid var(--linia);
}

.przycisk.wtorny:hover { background: var(--powierzchnia-3); color: #fff; }

/* --- komunikaty ---------------------------------------------------------- */

.komunikat {
    padding: var(--s4) var(--s5);
    border-radius: var(--promien-m);
    background: var(--powierzchnia-2);
    border-left: 3px solid var(--tekst-3);
    font-size: 16px;
    line-height: 1.5;
    color: var(--tekst-2);
}

.komunikat.blad {
    border-left-color: var(--err);
    background: rgba(255, 69, 58, .12);
    color: #FFC4C0;
}

.komunikat.uwaga {
    border-left-color: var(--warn);
    background: rgba(255, 159, 10, .12);
    color: #FFDCA8;
}

.pusto {
    padding: var(--s7) 0;
    text-align: center;
    color: var(--tekst-3);
    font-size: 16px;
}

.pusto a, .link { color: var(--akcent-jasny); }

/* --- logowanie ----------------------------------------------------------- */

.ekran-logowania {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s5);
}

.ekran-logowania .karta { width: 100%; max-width: 420px; padding: var(--s6); }

.ekran-logowania .marka { margin-bottom: var(--s5); }

/* --- sekcja z tokenem ---------------------------------------------------- */

.token {
    display: block;
    margin: var(--s4) 0;
    padding: var(--s5);
    background: var(--powierzchnia-3);
    border-radius: var(--promien-m);
    font: 400 16px/1.7 var(--mono);
    color: var(--tekst);
    word-break: break-all;
    user-select: all;
}

.para { display: grid; grid-template-columns: 220px 1fr; gap: var(--s4) var(--s5); }

/* Karta na calej szerokosci: pary ida DWIE w rzedzie, inaczej zostaje pas pustki. */
.para.szeroka { grid-template-columns: 220px minmax(0, 1fr) 220px minmax(0, 1fr); }

.para dt { font-size: 16px; color: var(--tekst-3); }

.para dd { margin: 0; font-size: 16px; color: var(--tekst); }

.kolumny {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: var(--s5);
    align-items: start;
}

/* Naglowek sekcji wewnatrz kolumny nie odpycha sie od gory tak jak samodzielny. */
.kolumny > div > h2:first-child { margin-top: 0; }

@media (max-width: 860px) {
    .pasek { padding: 0 var(--s4); gap: var(--s3); }
    .pasek nav { margin-left: 0; }
    .pasek .cennik { display: none; }
    main { padding: var(--s5) var(--s4) var(--s7); }
    h1 { font-size: 28px; }
    .para, .para.szeroka { grid-template-columns: 1fr; gap: var(--s1) 0; }
    .kolumny { grid-template-columns: 1fr; }
    table { display: block; overflow-x: auto; }
}