/*
 * NEVV AD — arkusz panelu.
 *
 * Bez frameworka i bez preprocessingu: plik wchodzi na serwer tak, jak leży. Zmienne
 * trzymają się jednej pary, bo ciemny motyw to rzecz, którą dołożymy później, a nie
 * dzisiaj o trzeciej nad ranem.
 */

:root {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --ink: #16181d;
    --muted: #6b7280;
    --line: #e2e5ea;
    --brand: #1f4ed8;
    --brand-ink: #ffffff;
    --ok: #1c7c46;
    --warn: #a5680a;
    --bad: #b3261e;
    --radius: 10px;
    --gap: 16px;
    --max: 1120px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--brand); }

h1 { font-size: 26px; margin: 0 0 var(--gap); }
h2 { font-size: 17px; margin: 0 0 12px; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px; }

.wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 24px 20px 48px;
    flex: 1;
}

.page-auth .wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8vh;
}

/* ---------- Pasek górny ---------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand a { font-weight: 700; letter-spacing: .02em; text-decoration: none; color: var(--ink); }

.nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }

.nav a {
    padding: 6px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--muted);
}

.nav a:hover { background: var(--bg); color: var(--ink); }
.nav a.on { background: var(--brand); color: var(--brand-ink); }

.logout { margin: 0; }

button.link {
    background: none;
    border: 0;
    color: var(--muted);
    font: inherit;
    cursor: pointer;
    padding: 6px 8px;
}

button.link:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Karty i siatki ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    margin: 0 0 var(--gap);
}

.card.narrow { max-width: 460px; }

.card.warn-box { border-color: #e7c98a; background: #fffaf0; }

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

.tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
}

.tile .value { font-size: 28px; font-weight: 700; }
.tile .label { color: var(--muted); font-size: 13px; }

/* ---------- Formularze ---------- */

.stack { display: grid; gap: 14px; }

.auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    width: 100%;
    max-width: 400px;
}

.auth-card.wide { max-width: 520px; }
.auth-card h1 { font-size: 22px; margin-bottom: 4px; }

/* Wiersze pola trzymają się swojej treści. Bez „align-content: start" komórka
   rozciągnięta do wysokości najwyższej w wierszu rozciąga też wiersz etykiety i
   wiersz kontrolki: pole robi się za wysokie i zjeżdża w dół, a jego etykieta
   zostaje wysoko. To była główna przyczyna „skaczących pól" w formularzach. */
.field { display: grid; gap: 6px; align-content: start; }

.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field .req { color: var(--bad); }

/* Pole z akcją obok: kontrolka bierze wolne miejsce, przycisk trzyma się swojej
   treści. Bez tego bazowe „width: 100%" przycisku rozepchałoby cały wiersz. */
.with-button { display: flex; gap: 8px; align-items: flex-start; }
.with-button input { flex: 1 1 auto; min-width: 0; }
.with-button button { flex: 0 0 auto; width: auto; white-space: nowrap; }
.card > .field + .grid-2 { margin-top: 14px; }

input, textarea, select, button {
    font: inherit;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
}

/* Chrome liczy własne kontrolki (pole wyboru, pole daty) kilka pikseli niżej niż
   pola tekstowe, więc w jednym wierszu odstają o te 2-3 px. Wyrównujemy je do
   wspólnej wysokości 45 px, którą naturalnie dają pola tekstowe. */
select, input[type="date"], input[type="datetime-local"], input[type="month"] {
    min-height: 45px;
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid color-mix(in srgb, var(--brand) 35%, transparent);
    border-color: var(--brand);
}

/* Edytor treści listu: monotypicznie, żeby {{zmienna}} nie udawała zwykłego słowa. */
.field.mono textarea {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 13px;
    line-height: 1.55;
}

button[type="submit"], .button {
    width: auto;
    display: inline-block;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 10px 16px;
    cursor: pointer;
    text-decoration: none;
    color: var(--ink);
    border-radius: 8px;
}

button.primary, .button.primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-ink);
    font-weight: 600;
}

button:hover, .button:hover { filter: brightness(.98); }

.hint { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; }

/* ---------- Komunikaty i statusy ---------- */

.flash {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #eef2f8;
    margin: 0 0 var(--gap);
}

.flash.ok   { background: #ecf7f0; border-color: #b9e0c8; color: #145c34; }
.flash.warn { background: #fff8e8; border-color: #e7c98a; color: #7a4d05; }
.flash.bad  { background: #fdeceb; border-color: #f0c0bd; color: #8c1d17; }

.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid var(--line);
    background: #f2f3f5;
    color: var(--muted);
}

.badge-ok   { background: #ecf7f0; border-color: #b9e0c8; color: #145c34; }
.badge-warn { background: #fff8e8; border-color: #e7c98a; color: #7a4d05; }
.badge-bad  { background: #fdeceb; border-color: #f0c0bd; color: #8c1d17; }

.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ---------- Tabele ---------- */

table.list { width: 100%; border-collapse: collapse; font-size: 14px; }

table.list th, table.list td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

table.list th { color: var(--muted); font-weight: 600; font-size: 12.5px; }
table.list tr:last-child td { border-bottom: 0; }

/* ---------- Reszta ---------- */

.secret-box {
    border: 1px dashed var(--brand);
    border-radius: var(--radius);
    padding: 14px 16px;
    background: #f4f7ff;
}

.secret {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 20px;
    letter-spacing: .06em;
    margin: 6px 0;
    user-select: all;
}

ul.ticks, ol.plan { margin: 0; padding-left: 22px; }
ul.ticks li, ol.plan li { margin-bottom: 6px; }

ul.ticks li { list-style: "✓  "; }

.foot {
    text-align: center;
    color: var(--muted);
    font-size: 12.5px;
    padding: 16px;
    border-top: 1px solid var(--line);
}

@media (max-width: 720px) {
    .topbar { flex-wrap: wrap; gap: 10px; }
    .nav { order: 3; width: 100%; }
    h1 { font-size: 22px; }
}

/* ---------- Ekrany z danymi (klienci i następne) ---------- */

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap);
    flex-wrap: wrap;
    margin-bottom: var(--gap);
}

.page-head h1 { margin: 0; }
.eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 13px; }

/* Grupę przycisków trzymamy w jednym koszyku, żeby nie rozjeżdżały się po
   siatkach i wierszach. Przycisk i tak liczy się treścią, nie szerokością kolumny. */
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }

/* Wiersz wyszukiwania i filtrów.

   Flexbox z dolnym wyrównaniem sprawiał, że pola skakały w pionie: pole z
   podpowiedzią pod spodem jest wyższe od sąsiadów, więc wszystkie pozostałe
   kontrolki zjeżdżały o wysokość tej podpowiedzi, a ich etykieta lądowała na
   wysokości środka cudzego pola. Siatka daje każdemu polu tę samą kolumnę i
   wysokość wiersza, etykiety nie łamią się do drugiej linii, a podpowiedź
   schodzi pod cały wiersz (.filters-hint). Efekt: jedna linia etykiet, jedna
   linia pól, przyciski na linii pól. */
.filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 12px 14px;
    align-items: end;
}

.filters .field label { white-space: nowrap; }

/* Wyszukiwanie jest najszersze, bo tu wpisuje się najdłuższe frazy. */
.filters .grow { grid-column: span 2; }

/* Koszyk z przyciskami też zajmuje dwie kolumny: w jednej nie zmieściłyby się
   „Szukaj" i „Wyczyść" obok siebie, a dwa rzędy guzików znowu podniosłyby
   pierwszy znad linii pól. */
.filters .actions { grid-column: span 2; }

/* Pole wyboru nie ma etykiety nad sobą, więc samo podpiera się do wysokości pola. */
.filters .check { min-height: 45px; }

/* Podpowiedź pod wierszem, a nie w środku pola — inaczej rozpychałaby jedną kolumnę. */
.filters-hint { grid-column: 1 / -1; margin: -4px 0 0; }

@media (max-width: 720px) {
    /* Na telefonie jedna kolumna. Bez wyzerowania „span 2" siatka dołożyłaby
       drugą, niejawną kolumnę i pola wróciłyby do dwóch obok siebie. */
    .filters { grid-template-columns: 1fr; }
    .filters .grow, .filters .actions { grid-column: auto; }
}

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }

/* Komórka bez etykiety — sam przycisk albo samo pole wyboru — dostaje miejsce po
   etykiecie sąsiadów. Bez tego jej kontrolka staje o jedną linię wyżej i cały
   wiersz wygląda na powyrywany. 26 px = linia etykiety (13 px × 1,55) + odstęp pola.
   align-self: start jest tu ważne: domyślnie komórka rozciąga się do wysokości
   najwyższej w wierszu (tej z podpowiedzią), a przycisk trzyma się dołu takiej
   komórki i zjeżdża dokładnie na wysokość cudzej podpowiedzi. */
.grid-2 > .actions { margin-top: 26px; align-self: start; }
.grid-2 > .check { margin-top: 26px; min-height: 45px; align-self: start; }

.card.tight { padding: 6px 12px; }

.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; }
.kv { display: grid; gap: 2px; }
.kv span { color: var(--muted); font-size: 12.5px; }
.kv strong { font-weight: 600; overflow-wrap: anywhere; }

.mt { margin-top: 20px; }
.prose { white-space: pre-wrap; margin: 0; }

table.list td.num, table.list th.num { text-align: right; }
table.list td.right { text-align: right; }
table.list form { display: inline; margin: 0; }

.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.check input { width: auto; }

.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--bad); }
.hint.err { color: var(--bad); font-weight: 600; }

.add-form { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.add-form summary { cursor: pointer; font-weight: 600; color: var(--brand); }
.add-form form { margin-top: 14px; }

.pager { display: flex; gap: 6px; justify-content: center; margin-top: var(--gap); }
.pager a {
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    text-decoration: none;
}
.pager a.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* ---------- Historia zmian na karcie ---------- */

ul.history { list-style: none; margin: 0; padding: 0; }

ul.history > li {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #fbfcfd;
}

ul.history .head { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
ul.history .head .muted { font-size: 12.5px; }

.change { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; gap: 4px 12px; margin-top: 8px; font-size: 14px; }
.change .label { color: var(--muted); font-size: 12.5px; }
.change ins, .change del { text-decoration: none; padding: 1px 4px; border-radius: 4px; display: inline-block; }
.change ins.new { background: #e9f6ee; color: #145c34; }
.change del.old { grid-column: 2; background: #fdeceb; color: #8c1d17; }

@media (max-width: 720px) {
    .change { grid-template-columns: 1fr; }
    .change del.old { grid-column: 1; }
}

/* --- Katalog usług i projektant pól (etap 2) --- */
details.card > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
form.inline { display: inline; }
.button.small { padding: 3px 10px; font-size: 12.5px; margin: 0 4px; }
fieldset.field { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; }
fieldset.field legend { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 6px; }
.hint-inline { color: var(--muted); font-style: normal; font-size: 12.5px; margin-left: 6px; }
.mt .check + .check { border-top: 1px dashed var(--line); padding-top: 8px; }

/* --- Usługi przypięte do klientów (etap 3) --- */
.chip {
    display: inline-block;
    padding: 1px 9px;
    border: 1px solid color-mix(in srgb, var(--chip, #556) 35%, #fff);
    border-radius: 999px;
    background: color-mix(in srgb, var(--chip, #556) 12%, #fff);
    color: color-mix(in srgb, var(--chip, #556) 80%, #000);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.chip:hover { border-color: var(--chip, #556); }
.bad-text { color: var(--bad); }
.warn-text { color: var(--warn); }
.bad-text, .warn-text { font-weight: 600; }
/* Podpis pod nazwą na liście — wartości, po których wyszukiwarka poznała usługę. */
.snippet {
    font-size: 12.5px;
    line-height: 1.3;
    margin-top: 2px;
    overflow-wrap: anywhere;
}
/* Czerwony przycisk na decyzjach: „nie przedłużamy” ma wyglądać jak decyzja, nie jak link. */
.button.danger, button.danger {
    border-color: var(--bad);
    color: var(--bad);
    background: #fff;
}
.button.danger:hover, button.danger:hover { background: #fdf2f1; }
/* Strona z linku do potwierdzenia: jedna karta na środku, nic więcej niepotrzebne. */
.confirm-card { max-width: 680px; margin: 24px auto; }
.confirm-card h1 { margin: 0 0 4px; }
.confirm-card h2 { font-size: 17px; margin: 20px 0 6px; }
.confirm-form { margin-top: 12px; }
.confirm-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.small { font-size: 12.5px; }
/* Sekcja przedłużenia na karcie usługi — progi w jednym rzędzie. */
ul.progi { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
ul.progi li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 13.5px; }
ul.progi .kto { min-width: 200px; }

/* ---------- Portal klienta (etap 5) ---------- */
.ok-text { color: var(--ok); font-weight: 600; }
/* Okruszki nad tytułem: z której listy przyszedłeś. */
.crumbs { margin: 0 0 6px; color: var(--muted); font-size: 13px; }
/* Guziki w wierszu tabeli — jeden obok drugiego, ale w razie czego łamią się na dwa rzędy. */
.row-btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Hasło startowe: duże, monotypiczne, do zaznaczenia jednym ruchem. */
code.big {
    font-size: 20px;
    letter-spacing: .5px;
    background: #fff8e6;
    border: 1px solid var(--line);
    padding: 6px 10px;
    display: inline-block;
    user-select: all;
}

/* Etap 6 — historia zmian */
pre.json {
    margin: 0;
    padding: 12px 14px;
    background: #f6f7f9;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 340px;
    overflow: auto;
}

/* Kody akcji i ścieżek w tabeli historii mają być ciche, nie krzykliwe. */
table.list code {
    font-size: 11.5px;
    color: var(--muted);
    background: none;
    padding: 0;
}

/* Hash jest długi i nie może rozjeżdżać siatki na kartach wpisu. */
.kv code { word-break: break-all; font-size: 12px; }