/* ===== Podstawy ===== */
:root {
  --tlo: #f1f5f9; --karta: #ffffff; --tekst: #0f172a; --przygaszony: #56657a; --ramka: #e2e8f0; --ramka-pola: #cbd5e1;
  --akcent: #0369a1; --akcent-ciemny: #075985; --akcent-jasny: #e0f2fe;
  --ok: #15803d; --ok-jasny: #dcfce7; --ostrzez: #92400e; --ostrzez-jasny: #fef3c7;
  --zle: #b91c1c; --zle-jasny: #fee2e2; --promien: 6px; --cien: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--tlo); color: var(--tekst); }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
a { color: var(--akcent); text-decoration: none; }
a:hover { color: var(--akcent-ciemny); }
small, .drobne { color: var(--przygaszony); font-size: .85rem; }
code { background: #eef1f6; padding: 1px 6px; border-radius: 6px; }
.akcent { color: var(--akcent); }

/* ===== Nawigacja ===== */
.nawigacja { position: sticky; top: 0; z-index: 20; background: var(--karta); border-bottom: 1px solid var(--ramka); }
.nawigacja-wnetrze { max-width: 1140px; margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.marka { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--tekst); }
.marka span { color: var(--akcent); }
.menu { display: flex; flex-wrap: wrap; gap: 2px; }
.menu a { text-decoration: none; color: var(--przygaszony); font-weight: 600; padding: 8px 8px; border-radius: 8px; }
.menu a:hover { background: var(--tlo); color: var(--tekst); }
.menu a.aktywna { background: var(--akcent-jasny); color: var(--akcent-ciemny); }
.wyloguj { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.kto { display: grid; text-align: right; line-height: 1.2; color: inherit; text-decoration: none; padding: 4px 8px; border-radius: 8px; }
.kto:hover, .kto[aria-current] { background: var(--tlo); }
.kto small { font-size: .78rem; }
.strona { max-width: 1140px; margin: 0 auto; padding: 18px 16px 96px; }
.naglowek-strony { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 4px 0 16px; }
.powrot { margin: 0 0 4px; } .powrot a { text-decoration: none; font-weight: 600; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 8px 0 0; color: var(--przygaszony); font-size: .92rem; }

/* ===== Panel administracyjny ===== */
.panel { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.panel-menu { position: sticky; top: 76px; display: grid; gap: 2px; background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--promien); padding: 10px; box-shadow: var(--cien); }
.panel-tytul { margin: 2px 8px 6px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--przygaszony); }
.panel-menu a { text-decoration: none; color: var(--tekst); font-weight: 600; padding: 9px 12px; border-radius: 8px; }
.panel-menu a:hover { background: var(--tlo); }
.panel-menu a.aktywna { background: var(--akcent-jasny); color: var(--akcent-ciemny); }
@media (max-width: 760px) {
  .panel { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .panel-menu { position: static; display: flex; overflow-x: auto; padding: 6px; gap: 4px; }
  .panel-tytul { display: none; }
  .panel-menu a { white-space: nowrap; }
}

/* ===== Przyciski ===== */
.przycisk, button.przycisk { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; padding: 10px 18px; min-height: 44px; border: 1px solid var(--akcent); background: var(--akcent); color: #fff; border-radius: 10px; cursor: pointer; text-decoration: none; transition: background .15s, box-shadow .15s; }
.przycisk:hover { background: var(--akcent-ciemny); }
.przycisk:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid rgba(3, 105, 161, .35); outline-offset: 1px; }
.przycisk.drugi { background: var(--karta); color: var(--akcent); }
.przycisk.drugi:hover { background: var(--akcent-jasny); }
.przycisk.niebezp { background: var(--karta); color: var(--zle); border-color: var(--zle); }
.przycisk.niebezp:hover { background: var(--zle-jasny); }
.przycisk.niebezp-pelny { background: var(--zle); border-color: var(--zle); }
.przycisk.niebezp-pelny:hover { background: #8f1d17; }
.przycisk.maly { min-height: 36px; padding: 5px 12px; font-size: .9rem; border-radius: 8px; }
.przycisk.gotowy { background: var(--ok); border-color: var(--ok); width: 100%; }
.przycisk:disabled { opacity: .6; cursor: progress; }

/* ===== Pola ===== */
input, select, textarea { font: inherit; padding: 10px 12px; min-height: 44px; width: 100%; border: 1px solid var(--ramka); border-radius: 10px; background: #fff; color: var(--tekst); }
input.duze { font-size: 1.2rem; padding: 14px; font-weight: 600; letter-spacing: .03em; }
select.mala { min-height: 36px; padding: 4px 8px; width: auto; }
.formularz { display: grid; gap: 14px; }
.formularz label, .w-wierszu label { display: grid; gap: 5px; font-size: .9rem; font-weight: 600; color: #2d3a50; }
.formularz label small { font-weight: 400; }
.siatka-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.siatka-4 { grid-template-columns: repeat(4, 1fr); } .siatka-4 .szeroka { grid-column: span 2; }
input.niepoprawne, select.niepoprawne { border-color: var(--zle); background: var(--zle-jasny); box-shadow: 0 0 0 3px rgba(179, 38, 30, .15); }
.blad-pola { color: var(--zle); font-size: .85rem; font-weight: 600; }
.blad-ogolny, .alert.blad { background: var(--zle-jasny); color: var(--zle); border: 1px solid #f3c6c3; border-radius: 10px; padding: 10px 12px; font-weight: 600; font-size: .92rem; }
.alert { margin: 8px 0; }
.pole-haslo { position: relative; display: block; }
.pole-haslo input { padding-right: 76px; }
.pole-haslo .pokaz { position: absolute; right: 6px; top: 6px; min-height: 32px; padding: 0 10px; border: 0; background: transparent; color: var(--akcent); font-weight: 600; cursor: pointer; border-radius: 8px; }
.w-wierszu { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 10px; }
.w-wierszu label { flex: 1 1 180px; }
.w-wierszu select, .w-wierszu input { min-height: 38px; padding: 6px 10px; }

/* ===== Karty i listy ===== */
.karta { background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--promien); padding: 16px; margin: 0 0 16px; box-shadow: var(--cien); }
.pusto { color: var(--przygaszony); text-align: center; padding: 22px 8px; }
.opis { margin: -6px 0 14px; max-width: 720px; }
.siatka-kart { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.czlonkowie { list-style: none; margin: 0 0 6px; padding: 0; }
.czlonkowie li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--ramka); }
.czlonkowie li:first-child { border-top: 0; }
.chip { display: inline-block; background: var(--akcent-jasny); color: var(--akcent-ciemny); border-radius: 999px; padding: 1px 10px; font-size: .82rem; font-weight: 600; }
.znaczek { background: var(--tlo); border-radius: 999px; padding: 0 8px; font-size: .75rem; color: var(--przygaszony); }
.kat { display: inline-block; background: #1b2433; color: #fff; border-radius: 8px; padding: 1px 10px; font-size: .85rem; font-weight: 700; letter-spacing: .02em; }
.status { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.status.gotowy { background: var(--ok-jasny); color: var(--ok); }
.status.trwa { background: var(--ostrzez-jasny); color: var(--ostrzez); }
.status.przekazany { background: #e9e6fb; color: #4b3aa8; }
.status.neutralny { background: var(--tlo); color: var(--przygaszony); }
.plakietka { display: inline-block; margin-left: 4px; padding: 0 8px; border-radius: 6px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.plakietka.nowy { background: var(--akcent); color: #fff; }
.plakietka.poprawka { background: var(--zle-jasny); color: var(--zle); }

.pasek-filtrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.pasek-filtrow input[type="search"] { flex: 1 1 240px; width: auto; }
.pasek-filtrow select { width: auto; }
.licznik { color: var(--przygaszony); font-size: .88rem; margin-left: auto; }
.segmenty { display: inline-flex; border: 1px solid var(--ramka); border-radius: 10px; overflow: hidden; background: #fff; }
.segmenty button { font: inherit; border: 0; background: transparent; padding: 10px 14px; min-height: 44px; cursor: pointer; color: var(--przygaszony); font-weight: 600; }
.segmenty button.aktywny { background: var(--akcent-jasny); color: var(--akcent-ciemny); }

.lista-protokolow { background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--promien); box-shadow: var(--cien); overflow: hidden; }
.wiersz { display: grid; grid-template-columns: 22px 74px minmax(0, 1.4fr) 60px 26px 46px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 84px 124px; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--ramka); color: inherit; text-decoration: none; }
.wiersz > span { display: grid; gap: 1px; min-width: 0; }
.wiersz small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.naglowek-listy { border-top: 0; background: #f8f9fc; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--przygaszony); padding-top: 9px; padding-bottom: 9px; }
.protokol { cursor: pointer; }
.protokol:hover { background: #f8fbff; }
.protokol.zaznaczony { background: var(--akcent-jasny); }
.kolumna-obiekt a { color: inherit; text-decoration: none; }
.kolumna-wybor input { width: 18px; height: 18px; min-height: 0; margin: 0; }
.naglowek-listy a { color: inherit; text-decoration: none; }
.naglowek-listy a:hover, .naglowek-listy a.sort-aktywny { color: var(--akcent-ciemny); }
.tylko-telefon { display: none; }
.wyczysc { font-size: .88rem; font-weight: 600; }
.pasek-zaznaczenia { position: sticky; top: 64px; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; padding: 8px 12px; background: var(--karta); border: 1px solid var(--akcent); border-radius: var(--promien); box-shadow: var(--cien); }
.stronicowanie { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 16px 0 0; }
.stronicowanie a, .stronicowanie span { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; padding: 0 8px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.stronicowanie a { background: var(--karta); border: 1px solid var(--ramka); }
.stronicowanie a:hover { border-color: var(--akcent); }
.stronicowanie .aktywna { background: var(--akcent); color: #fff; }
.stronicowanie .nieaktywna { color: var(--przygaszony); }
.kolumna-data { color: var(--przygaszony); font-size: .88rem; white-space: nowrap; }
.wiersz > .kolumna-gps { display: flex; align-items: center; gap: 6px; }
.kolumna-gps .pinezka { width: 27px; height: 27px; }

.lista-wynikow { display: grid; gap: 10px; }
.wynik { display: grid; gap: 2px; background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--promien); padding: 12px 14px; color: inherit; text-decoration: none; box-shadow: var(--cien); }
.wynik:hover { border-color: var(--akcent); }
.sn-wartosc { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 600; letter-spacing: .02em; }
.lokalizacja { display: grid; gap: 2px; }

/* ===== Tabele ===== */
.tabela-wrap { overflow-x: auto; }
.tabela { border-collapse: collapse; width: 100%; }
.tabela th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--przygaszony); padding: 8px 10px; border-bottom: 2px solid var(--ramka); white-space: nowrap; }
.tabela td { padding: 10px; border-bottom: 1px solid var(--ramka); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr:hover td { background: #fafbfe; }
tr.nieaktywny td { opacity: .6; }
.sn-komorka { white-space: nowrap; }
.kopiuj { font: inherit; font-size: .78rem; margin-left: 6px; padding: 2px 8px; border: 1px solid var(--ramka); border-radius: 999px; background: #fff; color: var(--akcent); cursor: pointer; }
.kopiuj:hover { background: var(--akcent-jasny); }
details.haslo summary { cursor: pointer; color: var(--akcent); font-weight: 600; font-size: .9rem; }

/* ===== Edycja ===== */
.pasek-edycji { position: sticky; top: 53px; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: rgba(255, 255, 255, .96); border: 1px solid var(--ramka); border-radius: var(--promien); padding: 8px 12px; margin: 0 0 14px; box-shadow: var(--cien); backdrop-filter: blur(6px); }
.powrot-link { text-decoration: none; font-weight: 600; }
.postep-blok { display: grid; gap: 3px; flex: 1 1 160px; min-width: 150px; }
.postep-tekst { font-size: .82rem; font-weight: 600; color: var(--przygaszony); }
.postep { height: 8px; background: #e6eaf2; border-radius: 999px; overflow: hidden; }
.postep-wypelnienie { height: 100%; width: 0; background: var(--akcent); border-radius: 999px; transition: width .25s; }
.postep-wypelnienie.komplet { background: var(--ok); }
.stan { font-size: .88rem; font-weight: 600; color: var(--przygaszony); }
.stan.ok { color: var(--ok); } .stan.blad { color: var(--zle); } .stan.ukryty { display: none; }
.sekcja { margin: 0 0 20px; }
.sekcja > h2 { margin: 6px 0 10px; font-size: 1.1rem; }
.siatka-pozycji { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.poz { background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--promien); padding: 10px 12px; box-shadow: var(--cien); }
.poz { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.poz-naglowek { grid-column: 1 / -1; display: flex; gap: 10px; align-items: baseline; padding: 2px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pole-szczegol { display: none; gap: 5px; font-size: .9rem; font-weight: 600; color: #2d3a50; order: 1; margin-top: 10px; }
.poz.otwarta label.pole-szczegol { display: grid; }
.poz.otwarta .przyciski.pole-szczegol { display: flex; gap: 8px; grid-column: 1 / -1; margin-bottom: 4px; }
.poz .sn-wiersz { grid-column: 1 / -1; order: 2; }
.poz .miejsce-ostrzezenia { grid-column: 1 / -1; order: 3; }
.pozycje-naglowek { display: none; }
.poz .lp { flex: 0 0 auto; min-width: 26px; height: 26px; line-height: 26px; text-align: center; background: var(--tlo); border-radius: 999px; font-size: .8rem; font-weight: 700; color: var(--przygaszony); }
.poz .opis-pozycji, .poz summary .opis { min-width: 0; }
.poz .t-model { color: var(--przygaszony); } .poz .t-uwagi { color: var(--przygaszony); font-style: normal; }
.sn { font-size: 1.15rem; font-weight: 600; letter-spacing: .03em; margin-top: 8px; border-width: 2px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.sn:focus { border-color: var(--akcent); outline: none; box-shadow: 0 0 0 3px rgba(3, 105, 161, .18); }
.dodaj { width: 100%; margin-top: 10px; border-style: dashed; }
.dolny-pasek { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(to top, var(--tlo) 70%, transparent); }

/* ===== Logowanie ===== */
.logowanie { min-height: 80vh; display: grid; place-items: center; }
.logowanie .karta { width: min(420px, 100%); padding: 28px; }
.logowanie h1 { margin-bottom: 4px; }

/* ===== Okna dialogowe ===== */
dialog.okno { border: 0; border-radius: 16px; padding: 22px; width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; box-shadow: 0 20px 60px rgba(10, 20, 40, .35); color: var(--tekst); }
dialog.okno::backdrop { background: rgba(15, 25, 45, .45); }
dialog.okno h2 { font-size: 1.2rem; margin-bottom: 4px; }
.przyciski-okna { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.okno-potwierdzenie p { margin: 8px 0 18px; color: #2d3a50; }

/* ===== Powiadomienia ===== */
#toasty { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: grid; gap: 8px; max-width: calc(100vw - 32px); }
.toast { background: #1b2433; color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); font-weight: 600; font-size: .92rem; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.toast.widoczny { opacity: 1; transform: none; }
.toast.ok { background: #17603a; } .toast.blad { background: #9c241c; }

/* ===== Telefon ===== */
@media (max-width: 760px) {
  .strona { padding: 12px 12px 96px; }
  h1 { font-size: 1.3rem; }
  .nawigacja-wnetrze { padding: 8px 12px; gap: 6px 12px; }
  .wyloguj { margin-left: 0; width: 100%; justify-content: space-between; }
  .kto { text-align: left; }
  .siatka-4 { grid-template-columns: 1fr 1fr; }
  .naglowek-listy { display: none; }
  .tylko-telefon { display: block; }
  .wiersz { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 12px 14px; }
  .wiersz .kolumna-kat { grid-column: 1; grid-row: 1; }
  .wiersz .kolumna-wybor { grid-column: 1; grid-row: 2; justify-self: center; }
  .wiersz .kolumna-gps { grid-column: 1; grid-row: 3; justify-self: center; }
  .wiersz .kolumna-gps:empty, .wiersz .kolumna-zam:empty { display: none; }
  .wiersz .kolumna-wazna { grid-column: 1; grid-row: 4; justify-self: center; }
  .wiersz .kolumna-notatki { grid-column: 1; grid-row: 5; justify-self: center; }
  .wiersz .kolumna-wazna:empty, .wiersz .kolumna-notatki:empty { display: none; }
  .wiersz > span:not(.kolumna-kat):not(.kolumna-wybor):not(.kolumna-gps):not(.kolumna-wazna):not(.kolumna-notatki) { grid-column: 2; }
  .wiersz .kolumna-status, .wiersz .kolumna-zam, .wiersz .kolumna-osoby { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
  .wiersz .kolumna-data { display: inline; }
  .pasek-zaznaczenia { top: 0; }
  .pasek-edycji { top: 0; }
  .siatka-pozycji { grid-template-columns: 1fr; }
  .tabela th:nth-child(5), .tabela td:nth-child(5) { display: none; }
}
@media (max-width: 480px) {
  .siatka-2, .poz { grid-template-columns: 1fr; }
  .siatka-4 { grid-template-columns: 1fr; } .siatka-4 .szeroka { grid-column: auto; }
  dialog.okno { padding: 16px; }
}

/* ===== v5: telefon w terenie, skaner ===== */
.sn-wiersz { display: flex; gap: 8px; margin-top: 8px; }
.sn-wiersz .sn { margin-top: 0; flex: 1 1 auto; min-width: 0; font-size: 1.3rem; min-height: 56px; }
.skan-przycisk { flex: 0 0 auto; min-width: 56px; min-height: 56px; padding: 0 14px; font-size: 1.4rem; }
.bez-skanu [data-skan], .bez-skanu [data-skanuj-kolejny] { display: none; }
dialog.okno-skan { width: min(640px, 100vw); max-width: 100vw; padding: 12px; border-radius: 14px; }
.okno-skan video { display: block; width: 100%; max-height: 52vh; background: #000; border-radius: 10px; object-fit: cover; }
.skan-cel { margin: 4px 0 8px; font-weight: 600; }
.skan-stan { min-height: 1.5em; margin: 8px 0; font-weight: 700; color: var(--przygaszony); }
.skan-stan.ok { color: var(--ok); } .skan-stan.blad { color: var(--zle); }
.okno-skan .przycisk.aktywny { background: var(--akcent-jasny); }
@media (max-width: 600px) {
  .pasek-edycji .przycisk.maly { min-height: 48px; }
}
.ukryta-etykieta { font-size: 0; gap: 0; }
.ukryta-etykieta input, .ukryta-etykieta select { font-size: 1rem; }
td .w-wierszu { margin: 0; }
.pelna { grid-column: 1 / -1; }
.pole-z-linkiem { display: flex; gap: 8px; align-items: center; }
.pole-z-linkiem .przycisk { flex: none; }
.pinezka { color: var(--akcent); display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 1.15rem; cursor: pointer; }
.pinezka:hover { background: var(--akcent-jasny); }
.pinezka:focus-visible { outline: 3px solid rgba(3, 105, 161, .35); }
.chipy { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.chip-usun { border: 0; background: none; color: var(--zle); font: inherit; font-weight: 700; cursor: pointer; padding: 0 2px; }
.zakladki { margin-bottom: 12px; }
.zakladki a { text-decoration: none; }
.lista-sekcja-gora { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lista-sekcja-nazwa { flex: 1 1 260px; }
.lista-sekcja-nazwa input { font-weight: 700; }
.przyciski-male { display: flex; gap: 4px; white-space: nowrap; }
.lista-edytor input, .lista-edytor select { min-height: 36px; padding: 4px 8px; }
.lista-edytor .kol-urzadzenie { min-width: 170px; } .lista-edytor .kol-model { min-width: 140px; }
.lista-edytor .kol-ilosc { width: 70px; } .lista-edytor .kol-jm { width: 80px; }
.segmenty a { display: inline-flex; align-items: center; gap: 5px; padding: 10px 14px; min-height: 44px; color: var(--przygaszony); font-weight: 600; }
.segmenty a.aktywny { background: var(--akcent-jasny); color: var(--akcent-ciemny); }
.formularz.waski { max-width: 420px; }
.alert.ostrzez { background: var(--ostrzez-jasny); color: var(--ostrzez); border: 1px solid #f1d39c; border-radius: 10px; padding: 10px 12px; font-weight: 600; font-size: .92rem; }
.ostrzezenie-sn { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--ostrzez-jasny); color: var(--ostrzez); font-size: .86rem; font-weight: 600; }
.ostrzezenie-sn a { color: inherit; }
.wybor-wiersz { display: flex !important; align-items: center; gap: 8px; font-weight: 600; }
.wybor-wiersz input { width: 18px; height: 18px; min-height: 0; flex: none; }
.odbiorcy { border: 1px solid var(--ramka); border-radius: 10px; padding: 8px 12px; display: grid; gap: 6px; }
.odbiorcy legend { font-size: .9rem; font-weight: 600; padding: 0 4px; }
.certyfikat { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ramka); display: grid; gap: 8px; justify-items: start; }
.karta-wewn { border: 1px solid var(--ramka); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; justify-items: start; }
.karta-wewn p { margin: 0; }
.odcisk { word-break: break-all; font-size: .78rem; }
.historia summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; }
.historia summary::-webkit-details-marker { display: none; }
.historia summary h2 { margin: 0; }
.historia summary::before { content: '▸'; color: var(--przygaszony); }
.historia[open] summary::before { content: '▾'; }
.historia[open] summary { margin-bottom: 10px; }
.historia-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; }
.historia-lista li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 10px; padding: 7px 0; border-top: 1px solid var(--ramka); font-size: .9rem; }
.historia-lista li.wazne span { font-weight: 700; }
.historia-lista time { color: var(--przygaszony); font-variant-numeric: tabular-nums; }
.historia.tylko-statusy li.zwykle { display: none; }
@media (max-width: 600px) { .historia-lista li { grid-template-columns: 1fr; gap: 0; } }
.pasek-jako { position: sticky; top: 0; z-index: 25; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; padding: 8px 16px; background: #4b3aa8; color: #fff; font-size: .92rem; }
.pasek-jako .przycisk { background: #fff; color: #4b3aa8; border-color: #fff; }
.profil-dane { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.profil-dane dt { color: var(--przygaszony); font-size: .9rem; }
.profil-dane dd { margin: 0; font-weight: 600; }
.notatka { border-top: 1px solid var(--ramka); padding: 10px 0; display: grid; gap: 6px; }
.notatka header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .9rem; }
.notatka header time { color: var(--przygaszony); }
.notatka-tresc { white-space: normal; overflow-wrap: anywhere; }
.notatka.wazna { border-left: 4px solid var(--zle); padding-left: 10px; background: var(--zle-jasny); }
.plakietka.uwaga { background: var(--zle); color: #fff; }
.uwaga-notatki { color: var(--zle); font-weight: 700; text-decoration: none; }
.formularz label.pole-zaznacz { display: flex; align-items: center; gap: 8px; color: var(--zle); font-weight: 700; }
.formularz label.pole-zaznacz input { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; accent-color: var(--zle); }
.pole-data { position: relative; display: block; }
.data-podpowiedz { display: block; }
.data-podpowiedz:empty { display: none; }
.kalendarz { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: 280px; max-width: 86vw; padding: 8px; background: var(--karta); color: var(--tekst); border: 1px solid var(--ramka); border-radius: 10px; box-shadow: var(--cien); font-weight: 400; }
.kalendarz button { min-height: 32px; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
.kalendarz button:hover { background: var(--akcent-jasny); }
.kalendarz-naglowek { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; }
.kalendarz-naglowek button { width: 30px; flex: none; font-weight: 700; }
.kalendarz-naglowek strong { flex: 1; text-align: center; font-size: .92rem; }
.kalendarz-dni { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: .88rem; }
.kalendarz-dni span { color: var(--przygaszony); font-size: .75rem; }
.kalendarz-dni .dzis { box-shadow: inset 0 0 0 1px var(--akcent); }
.kalendarz-dni .wybrany, .kalendarz-dni .wybrany:hover { background: var(--akcent); color: #fff; font-weight: 700; }
.kalendarz-pomoc { margin: 6px 0 0; color: var(--przygaszony); font-size: .72rem; }
@media (hover: none) { .kalendarz-pomoc { display: none; } }
.ikona { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.22em; stroke-width: 1.75; }
.ikona-szara { color: #475569; } .pasek-jako .ikona-szara { color: inherit; }
.ikona-maska { background: currentColor; -webkit-mask: var(--maska) center / contain no-repeat; mask: var(--maska) center / contain no-repeat; }
.ikona-26a0 { --maska: url(/assets/vendor/tabler-3.34.1/alert-triangle.svg); color: var(--zle); }
.ikona-1f465 { --maska: url(/assets/vendor/tabler-3.34.1/users.svg); color: #475569; }
.ikona-1f526 { --maska: url(/assets/vendor/tabler-3.34.1/bulb.svg); color: #475569; }
.suwak { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 4px; border: 0; background: none; color: var(--przygaszony); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.suwak i { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: #a9b3c2; transition: background .15s; }
.suwak i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.suwak[aria-checked="true"] { color: var(--zle); }
.suwak[aria-checked="true"] i { background: var(--zle); }
.suwak[aria-checked="true"] i::after { left: 16px; }
.suwak:focus-visible { outline: 3px solid rgba(3, 105, 161, .35); border-radius: 6px; }
.tabela-konta .chip, .tabela-konta .znaczek, .konto-nazwa strong { white-space: nowrap; }
.konto-role { min-width: 150px; }
.konto-role select, .konto-rola { display: block; width: 100%; max-width: 170px; }
.konto-role select + select, .konto-rola + select { margin-top: 4px; }
.konto-rola { padding: 4px 8px; }
.konto-akcje { display: flex; justify-content: flex-end; gap: 6px; }
.konto-akcje .przycisk { white-space: nowrap; }
.okno-sekcja { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ramka); }
@media (max-width: 760px) { .tabela-konta th:nth-child(5), .tabela-konta td:nth-child(5) { display: table-cell; } }
.log-czas { white-space: nowrap; }
.log-czas small { display: block; }
.log-grupa summary { cursor: pointer; font-weight: 600; }
.log-grupa ul { margin: 6px 0 0; padding-left: 18px; font-size: .88rem; }
.formularz label.pole-zaznacz.zwykle { color: inherit; font-weight: 600; }
.formularz label.pole-zaznacz.zwykle input { accent-color: var(--akcent); }
.tabela-przejazdy th a { color: inherit; text-decoration: none; }
.tabela-przejazdy th a.sort-aktywny { color: var(--akcent-ciemny); }
.powiazanie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 6px 0; }
.powiaz { display: grid; gap: 8px; margin-top: 10px; max-width: 640px; }
.podpowiadacz { position: relative; }
.podpowiadacz .chipy:empty { display: none; }
.podpowiedzi { position: absolute; z-index: 40; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--karta); border: 1px solid var(--ramka); border-radius: 8px; box-shadow: var(--cien); }
.podpowiedzi li { padding: 6px 10px; border-radius: 6px; font-size: .92rem; cursor: pointer; }
.podpowiedzi li:hover, .podpowiedzi li.aktywna { background: var(--akcent-jasny); }
.podpowiedzi li.pusta { color: var(--przygaszony); cursor: default; background: none; }
.artykul-wiersz { padding: 10px 0; border-top: 1px solid var(--ramka); }
.artykul-wiersz:first-child { border-top: 0; }
.artykul-wiersz p { margin: 2px 0; }
.artykul-tresc { overflow-wrap: anywhere; }
.notatka-grafiki { display: flex; flex-wrap: wrap; gap: 8px; }
.notatka-grafika { position: relative; display: inline-flex; align-items: flex-start; }
.notatka-grafika img { display: block; max-width: 180px; max-height: 140px; border-radius: 8px; border: 1px solid var(--ramka); }
.tabela-przejazdy .wasko { width: 40px; padding-left: 2px; padding-right: 2px; text-align: center; white-space: nowrap; }
.tabela-przejazdy td:first-child, .tabela-przejazdy td:last-child { white-space: nowrap; }
@media (max-width: 760px) { .tabela-przejazdy th:nth-child(5), .tabela-przejazdy td:nth-child(5) { display: table-cell; } }
.dane-przejazdu { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.dane-przejazdu dt { color: var(--przygaszony); }
.dane-przejazdu dd { margin: 0; }
.stopka { margin: 24px 0 16px; text-align: center; font-size: .8rem; }
.stopka a { color: var(--przygaszony); }
.kolumna-wazna, .kolumna-notatki { justify-items: center; }
.notatka-akcje { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.notatka-akcje details { flex: 1 1 100%; }
.notatka-akcje details:not([open]) { flex: 0 0 auto; }
.notatka-akcje summary, .nowa-notatka summary { list-style: none; display: inline-flex; }
.notatka-akcje summary::-webkit-details-marker, .nowa-notatka summary::-webkit-details-marker { display: none; }
.notatka-akcje form, .nowa-notatka form { margin-top: 8px; }
.nowa-notatka { margin-bottom: 8px; }
.notatka.usunieta { opacity: .75; }
.usuniete-notatki { margin-top: 10px; }
.usuniete-notatki > summary { cursor: pointer; color: var(--przygaszony); font-weight: 600; }
.historia-notatki ol { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.plakietka.zespol { background: var(--tlo); color: var(--przygaszony); }
.plakietka.publiczna { background: var(--ok-jasny); color: var(--ok); }
.licznik-notatek { font-size: .82rem; text-decoration: none; justify-self: start; }
dialog.szerokie { width: min(760px, calc(100vw - 24px)); }
.okno-gora { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.przelacznik-widoku { margin-left: auto; }
.bez-sortowania select[name="sort"] { display: none !important; }
.mapa { height: max(420px, calc(100vh - 300px)); border-radius: var(--promien); border: 1px solid var(--ramka); box-shadow: var(--cien); z-index: 1; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; font-size: .88rem; font-weight: 600; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.kropka { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.pinezka-mapy b, .pinezka-mapy img { transform: rotate(45deg); }
.pinezka-mapy b { color: #fff; font-size: 13px; line-height: 1; }
.pinezka-mapy img { box-sizing: border-box; width: 22px; height: 22px; padding: 2px; border-radius: 50%; background: #fff; }
.pinezka-mapy span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.kat-kat-A, .pinezka-mapy.kat-kat-A span { background: #1f5fbf; }
.kat-kat-B, .pinezka-mapy.kat-kat-B span { background: #17803d; }
.kat-kat-E, .pinezka-mapy.kat-kat-E span { background: #b05c00; }
.kat-SKP, .pinezka-mapy.kat-SKP span { background: #6a3fb5; }
.kat-bez, .pinezka-mapy.kat-bez span { background: #6b7585; }
.kat-nastawnia, .pinezka-mapy.kat-nastawnia span { background: #0f6e6e; }
.pinezka-mapy { background: none; }   /* kolor ma tylko kształt pinezki, nie kwadrat Leafleta */
.dymek { display: grid; gap: 3px; min-width: 190px; font: 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.dymek-linki { display: flex; gap: 12px; margin-top: 6px; font-weight: 600; }
.pole-daty { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; }
.pole-daty input { width: auto; }
.presety { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; }
.presety a { padding: 4px 10px; border: 1px solid var(--ramka); border-radius: 999px; background: var(--karta); text-decoration: none; font-size: .86rem; font-weight: 600; color: var(--przygaszony); }
.presety a.aktywny, .presety a:hover { border-color: var(--akcent); color: var(--akcent-ciemny); background: var(--akcent-jasny); }
.kafelki { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kafelek { background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--promien); padding: 12px 16px; box-shadow: var(--cien); display: grid; gap: 2px; }
.kafelek span { color: var(--przygaszony); font-size: .88rem; }
.kafelek strong { font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wykres { width: 100%; height: auto; display: block; }
.wykres .siatka { stroke: #e6eaf1; stroke-width: 1; }
.wykres .os-linia { stroke: #b9c2d0; stroke-width: 1; }
.wykres .os { fill: var(--przygaszony); font-size: 11px; }
.wykres .wartosc { fill: var(--akcent); }
.wykres .trafienie { fill: transparent; }
.wykres .slupek:hover .trafienie { fill: rgba(3, 105, 161, .06); }
.wykres .slupek:hover .wartosc { fill: var(--akcent-ciemny); }
.wykres .etykieta-wartosci { fill: var(--tekst); font-size: 12px; font-weight: 700; }
.tabela-wykresu { margin-top: 8px; } .tabela-wykresu summary { cursor: pointer; color: var(--przygaszony); font-weight: 600; font-size: .9rem; }
.tabela .liczba { text-align: right; font-variant-numeric: tabular-nums; }
.pasek-udzialu { display: flex; align-items: center; gap: 8px; }
.pasek-udzialu meter { width: 120px; height: 10px; }
.pasek-udzialu span { color: var(--przygaszony); font-size: .85rem; min-width: 3ch; }

/* ===== Wygląd: gęsty układ na komputerze, wygodne pola na telefonie ===== */
.marka { color: var(--akcent); }
.kat { justify-self: start; }
.pole-filtru { display: grid; gap: 2px; font-size: .78rem; color: var(--przygaszony); }
.pole-filtru.szukaj { flex: 1 1 260px; }
.pole-filtru input, .pole-filtru select { color: var(--tekst); }
.pasek-filtrow { align-items: flex-end; }
.pasek-filtrow input[type="search"] { width: 100%; }
.wyloguj-przycisk { border: 0; background: none; padding: 4px; font: inherit; color: var(--przygaszony); cursor: pointer; }
.wyloguj-przycisk:hover { color: var(--tekst); }
.karta-uklad { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.karta-boczna, .karta-glowna { display: grid; gap: 12px; min-width: 0; }
.karta-boczna .karta, .karta-glowna .karta { margin: 0; }
.karta-uklad > .karta { margin: 0; }
.karta-uklad { margin-bottom: 12px; }
.dane-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; margin: 0; }
.dane-siatka dt { font-size: .78rem; color: var(--przygaszony); }
.dane-siatka dd { margin: 0; }
.dane-siatka .pelna { grid-column: 1 / -1; }
.reszta-notatek summary { cursor: pointer; color: var(--akcent); font-weight: 600; padding: 6px 0; }
.tytul-z-etapem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.przyciski-gora { display: flex; flex-wrap: wrap; gap: 6px; }

@media (min-width: 761px) {
  body { font-size: 14px; }
  h1 { font-size: 18px; }
  h2 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--przygaszony); }
  h2 .drobne { text-transform: none; letter-spacing: 0; }
  small, .drobne { font-size: 12px; }
  .nawigacja-wnetrze, .strona { max-width: 1536px; }
  .nawigacja-wnetrze { padding: 6px 16px; gap: 6px 22px; }
  .strona { padding: 14px 16px 40px; }
  .marka { font-size: 16px; }
  .menu a { color: var(--tekst); font-weight: 400; padding: 4px 8px; border-radius: 4px; }
  .menu a.aktywna { background: var(--tlo); color: var(--tekst); font-weight: 600; }
  .wyloguj { gap: 12px; }
  .kto { display: flex; align-items: baseline; gap: 10px; padding: 2px 6px; border-radius: 4px; }
  .kto strong { font-weight: 500; }
  .naglowek-strony { margin: 0 0 10px; align-items: center; }
  .przycisk, button.przycisk { min-height: 30px; padding: 3px 12px; font-weight: 500; border-radius: 4px; }
  .przycisk.drugi { color: var(--tekst); border-color: var(--ramka-pola); }
  .przycisk.drugi:hover { background: var(--tlo); }
  .przycisk.maly { min-height: 26px; padding: 1px 8px; font-size: 13px; border-radius: 4px; }
  input, select, textarea { min-height: 30px; padding: 3px 8px; border-color: var(--ramka-pola); border-radius: 4px; }
  select.mala, .w-wierszu select, .w-wierszu input { min-height: 28px; padding: 2px 6px; }
  .formularz { gap: 10px; }
  .formularz label, .w-wierszu label { gap: 2px; font-size: 12px; font-weight: 500; color: #475569; }
  .siatka-2 { gap: 10px; }
  .pole-filtru { font-size: 12px; }
  .pasek-filtrow { gap: 8px; margin-bottom: 10px; }
  .karta { padding: 12px 14px; margin-bottom: 12px; border-radius: 4px; }
  .panel { grid-template-columns: 190px minmax(0, 1fr); gap: 16px; }
  .panel-menu { padding: 0; border: 0; background: none; top: 56px; }
  .panel-tytul { display: none; }
  .panel-menu a { font-weight: 400; padding: 5px 8px; border-radius: 4px; }
  .panel-menu a.aktywna { background: var(--karta); color: var(--tekst); font-weight: 600; }
  .panel-menu a:hover { background: var(--karta); }
  .tabela th { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 4px 8px; border-bottom: 1px solid var(--ramka); }
  .tabela td { padding: 4px 8px; border-bottom-color: var(--tlo); }
  .tabela tr:hover td { background: #f8fafc; }
  .lista-protokolow { border-radius: 4px; }
  .wiersz { gap: 8px; padding: 4px 8px; border-top-color: var(--tlo); }
  .naglowek-listy { background: none; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; padding-top: 4px; padding-bottom: 4px; }
  .status { padding: 0 6px; border-radius: 3px; font-size: 12px; font-weight: 500; }
  .kat { padding: 0 6px; border-radius: 3px; font-size: 12px; }
  .plakietka { padding: 0 5px; border-radius: 3px; font-size: 11px; }
  .chip { padding: 0 6px; border-radius: 3px; font-size: 12px; }
  .segmenty { border-radius: 4px; }
  .segmenty a { min-height: 28px; padding: 2px 10px; font-weight: 500; }
  .stronicowanie a, .stronicowanie span { min-width: 30px; min-height: 30px; border-radius: 4px; }
  .pinezka { width: 26px; height: 26px; font-size: 1rem; }
  .notatka { padding: 6px 0; gap: 3px; }
  .notatka-grafika img { max-width: 110px; max-height: 80px; border-radius: 4px; }
  .poz { border-radius: 4px; padding: 6px 10px; }
  .siatka-pozycji { gap: 6px; }
  .sekcja > h2 { font-size: 12px; }
  dialog.okno { border-radius: 6px; padding: 16px; }
  dialog.okno h2 { font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--tekst); }
  .alert.ostrzez, .blad-ogolny, .alert.blad { border-radius: 4px; padding: 6px 10px; font-size: 13px; }
  .historia-lista li { padding: 4px 0; font-size: 13px; }
  .tabela-wrap .tabela-przejazdy td { vertical-align: middle; }
}

/* formularz protokołu na komputerze: tabela z polami zamiast kart */
@media (min-width: 761px) {
  .sekcja { background: var(--karta); border: 1px solid var(--ramka); border-radius: 4px; padding: 12px 14px; margin-bottom: 12px; }
  .sekcja > h2 { margin: 0 0 6px; }
  .siatka-pozycji { display: block; border: 1px solid var(--ramka-pola); border-bottom: 0; }
  .pozycje-naglowek, .poz { display: grid; grid-template-columns: 40px minmax(130px, 1.3fr) minmax(130px, 1fr) minmax(170px, 1.3fr) 64px 64px minmax(110px, 1fr) 138px; gap: 0; }
  .pozycje-naglowek { background: var(--tlo); border-bottom: 1px solid var(--ramka-pola); font-size: 12px; font-weight: 600; color: #475569; }
  .pozycje-naglowek span { padding: 3px 6px; border-right: 1px solid var(--ramka-pola); }
  .pozycje-naglowek span:last-child { border-right: 0; }
  .poz { padding: 0; border: 0; border-bottom: 1px solid var(--ramka-pola); border-radius: 0; background: var(--karta); align-items: stretch; }
  .poz-naglowek { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; padding: 0; cursor: default; border-right: 1px solid var(--ramka-pola); }
  .poz .opis { display: none; }
  .poz .lp { min-width: 0; height: auto; line-height: 1; background: none; color: var(--przygaszony); font-weight: 400; font-size: 13px; }
  label.pole-szczegol, .poz.otwarta label.pole-szczegol { display: block; margin: 0; border-right: 1px solid var(--ramka-pola); }
  .pole-etykieta { display: none; }
  .pole-urzadzenie { grid-column: 2; grid-row: 1; } .pole-model { grid-column: 3; grid-row: 1; }
  .pole-ilosc { grid-column: 5; grid-row: 1; } .pole-jm { grid-column: 6; grid-row: 1; } .pole-uwagi { grid-column: 7; grid-row: 1; }
  .poz .sn-wiersz { grid-column: 4; grid-row: 1; margin: 0; border-right: 1px solid var(--ramka-pola); }
  .poz .przyciski.pole-szczegol, .poz.otwarta .przyciski.pole-szczegol { grid-column: 8; grid-row: 1; display: flex; gap: 4px; align-items: center; justify-content: center; margin: 0; }
  .poz .miejsce-ostrzezenia { grid-column: 1 / -1; grid-row: 2; }
  .poz .ostrzezenie-sn { margin: 0; border-radius: 0; font-size: 12px; padding: 2px 6px; }
  .poz input, .poz select { display: block; width: 100%; height: 100%; min-height: 28px; padding: 2px 6px; border: 0; border-radius: 0; background: transparent; }
  .poz input:focus, .poz select:focus { background: var(--akcent-jasny); outline: 0; box-shadow: inset 0 0 0 1px var(--akcent); }
  .sn-wiersz .sn { min-height: 28px; font-size: 13px; font-weight: 600; letter-spacing: 0; border: 0; }
  .sn-wiersz .sn:placeholder-shown { background: #fffbeb; }
  .skan-przycisk { display: none; }
  .poz .przycisk.maly { min-height: 22px; padding: 0 5px; font-size: 12px; }
  .dodaj { width: auto; margin-top: 6px; }
}

/* skróty klawiaturowe */
.klawisz { padding: 0 4px; border: 1px solid var(--ramka-pola); border-radius: 3px; background: #f8fafc; color: #475569; font: 11px ui-monospace, Menlo, Consolas, monospace; }
.przycisk:not(.drugi) .klawisz { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .5); color: #fff; }
.skroty-przycisk { border: 0; background: none; padding: 4px; font: inherit; color: var(--przygaszony); cursor: pointer; }
.podpowiedz-listy { margin: 6px 0 0; font-size: 12px; color: var(--przygaszony); }
.wiersz-wybrany td, .protokol.wiersz-wybrany { background: var(--akcent-jasny) !important; }
.tabela-przejazdy tbody tr { cursor: pointer; }
.menu u { text-decoration-thickness: 1px; text-underline-offset: 2px; }
@media (max-width: 760px) {
  .klawisz, .skroty-przycisk, .podpowiedz-listy { display: none; }
  .menu u { text-decoration: none; }
}

/* telefon: menu na dole, karty zamiast tabeli przejazdów */
@media (max-width: 760px) {
  .menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; flex-wrap: nowrap; justify-content: space-between; overflow-x: auto; background: var(--karta); border-top: 1px solid var(--ramka); }
  .menu a { flex: 1 0 auto; padding: 14px 10px; font-size: .82rem; text-align: center; border-radius: 0; white-space: nowrap; }
  .menu a.aktywna { background: none; color: var(--akcent); font-weight: 700; }
  .wyloguj { width: auto; margin-left: auto; }
  .kto strong { display: none; }
  .strona { padding-bottom: 110px; }
  #toasty { bottom: 70px; }
  .dolny-pasek { bottom: 50px; }
  .karta-uklad { grid-template-columns: minmax(0, 1fr); }
  .dane-siatka { grid-template-columns: 1fr 1fr; }
  .pole-filtru { flex: 1 1 45%; }
  .pole-filtru.szukaj { flex-basis: 100%; }
  .przyciski-gora .przycisk { flex: 1 1 auto; }
  .karta:has(.tabela-przejazdy) { padding: 0; border: 0; background: none; }
  .tabela-przejazdy thead { display: none; }
  .tabela-przejazdy, .tabela-przejazdy tbody { display: block; }
  .tabela-przejazdy tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; padding: 10px 12px; background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--promien); }
  .tabela-przejazdy td { display: block; padding: 0; border: 0; }
  .tabela-przejazdy td:empty { display: none; }
  .tabela-przejazdy td:nth-child(2) { flex: 1 1 60%; }
  .tabela-przejazdy .kolumna-liczba { display: none; }
  .tabela-przejazdy tr:hover td { background: none; }
}

/* Ustawienia → Wzory */
.wzor-instrukcja { margin: 8px 0 0; padding-left: 22px; }
.wzor-instrukcja li { margin-bottom: 4px; }
.wzor-naglowek { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; }
.wzor-naglowek h2 { margin: 0; }
.wzor-akcje { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.wzor-naglowek .wzor-akcje { margin-left: auto; }
.wzor-akcje form { display: inline; }
td.wzor-akcje { display: table-cell; white-space: nowrap; text-align: right; }
.wzor-wgraj { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.wzor-historia { margin-top: 10px; }
.wzor-historia summary { cursor: pointer; margin-bottom: 6px; }
@media (max-width: 760px) {
  .wzor-wgraj { grid-template-columns: minmax(0, 1fr); }
  .wzor-naglowek .wzor-akcje { margin-left: 0; }
  td.wzor-akcje { white-space: normal; text-align: left; }
}

/* Ustawienia → Import */
.import-tabela input, .import-tabela select { width: 100%; min-width: 72px; }
.import-tabela td { vertical-align: top; }
.import-tabela summary { cursor: pointer; }
.import-uwaga td { background: var(--ostrzez-jasny); }
.import-ostrzezenie { color: var(--ostrzez); font-size: .85rem; font-weight: 600; }

/* Baza wiedzy: artykuł i edytor */
.artykul-tresc img { display: inline-block; vertical-align: top; max-width: 100%; height: auto; margin: 8px 0; border: 1px solid var(--ramka); border-radius: 4px; }
.artykul-tresc h2, .artykul-tresc h3 { color: var(--tekst); text-transform: none; letter-spacing: 0; margin: 14px 0 6px; }
.artykul-tresc h2 { font-size: 1.25rem; font-weight: 700; }
.artykul-tresc h3 { font-size: 1.05rem; font-weight: 700; }
.artykul-tresc p { margin: 0 0 8px; }
.artykul-tresc blockquote { margin: 8px 0; padding: 6px 12px; border-left: 4px solid var(--akcent); background: var(--akcent-jasny); }
.artykul-tresc pre { padding: 8px 10px; background: var(--tlo); border-radius: 4px; overflow-x: auto; }
.pole-edytora > span { display: block; font-weight: 600; margin-bottom: 4px; }
/* Quill ma wysokość 100% i razem z paskiem przykrywał przyciski pod edytorem */
.pole-edytora .ql-container, .pole-edytora .ql-editor { height: auto; }
.formularz > .przyciski-okna { position: relative; z-index: 1; }
.pole-edytora .ql-editor { min-height: 280px; max-height: 60vh; font-size: 14px; }
.pole-edytora .ql-editor img { max-width: 100%; }
.edytor-stan { margin: 4px 0 0; min-height: 1.2em; }
.ql-snow .ql-tooltip::before { content: "Link:"; }
.ql-snow .ql-tooltip[data-mode="link"]::before { content: "Adres:"; }
.ql-snow .ql-tooltip a.ql-action::after { content: "Edytuj"; }
.ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: "Zapisz"; }
.ql-snow .ql-tooltip a.ql-remove::before { content: "Usuń"; }
.ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: "Zwykły tekst"; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: "Nagłówek"; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: "Podtytuł"; }
.ql-snow .ql-picker.ql-header { width: 118px; }

/* Baza wiedzy: wyrównanie, szkic, kategorie */
.artykul-tresc .ql-align-center { text-align: center; }
.artykul-tresc .ql-align-right { text-align: right; }
.artykul-tresc .ql-align-justify { text-align: justify; }
.plakietka.szkic { background: var(--ostrzez-jasny); color: var(--ostrzez); }
.plakietka.kategoria { background: var(--akcent-jasny); color: var(--akcent); text-transform: none; }
.kategoria-wiersz { align-items: end; margin-bottom: 6px; }

/* Statystyki: pulpit i wykresy */
.statystyki-sekcja { margin: 8px 0 8px; }
a.kafelek { color: inherit; text-decoration: none; }
a.kafelek:hover { border-color: var(--akcent); }
.siatka-statystyk { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 12px; }
.siatka-statystyk .karta { margin: 0; min-width: 0; }
.kolowy { display: flex; align-items: center; gap: 14px; }
.kolowy > svg { width: 130px; height: 130px; flex: none; }
.kolowy-suma { font-size: 20px; font-weight: 700; fill: var(--tekst); }
.legenda-wykresu { flex: 1; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; font-size: 13px; }
.poziomy { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) auto; gap: 7px 8px; align-items: center; font-size: 13px; }
.pasek { display: block; width: 100%; height: 12px; }
.pasek-tlo { fill: var(--tlo); }
.pasek-wartosc { fill: var(--akcent); }
.wielka-liczba { font-size: 26px; font-weight: 700; margin: 0; }
.tabele-szczegolowe { cursor: pointer; font-weight: 600; color: var(--przygaszony); }

/* Lista przejazdów: zaznaczanie */
.wybor-przejazdu, #zaznacz-przejazdy { width: 16px; height: 16px; min-height: 0; margin: 0 6px 0 0; vertical-align: middle; accent-color: var(--akcent); }
.tabela-przejazdy tr.zaznaczony td { background: var(--akcent-jasny); }
.pasek-zaznaczenia form { display: inline; }
#zdjecia-przycisk:empty { display: none; }
#zdjecia .powiazanie { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ql-snow .ql-editor a { text-decoration: none; }
.przyciski-powiazania { display: flex; flex-wrap: wrap; gap: 8px; }