/* Hartmann-Tech — panel mechanika. Samodzielny arkusz (panel jest poza buildem Astro). */

:root {
  --ink: #14181d;
  --ink-2: #1c232b;
  --ink-3: #27303a;
  --paper: #f4f6f8;
  --blue: #1e5fd6;
  --blue-deep: #1747a3;
  --txt-inv: #eef1f4;
  --txt-inv-2: #9aa6b2;
  --ok: #2e8b57;
  --amber: #e8a33d;
  --err: #c4452e;
  --r: 5px;

  --font: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
/* Atrybut hidden musi chować element też wtedy, gdy klasa ustawia display (np. .btn-ghost = inline-flex). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--txt-inv);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 .6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { color: #6ea0ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Płynne przejścia między stronami panelu (cross-document view transitions) — czysty CSS.
   Chrome/Edge/Android robią delikatny crossfade przy nawigacji (też między dolnymi zakładkami);
   przeglądarki bez wsparcia po prostu ignorują. Pasek górny i dolny mają własną nazwę, więc
   nie migają — pozostają na miejscu. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: 130ms ease both pvt-out; }
  ::view-transition-new(root) { animation: 190ms ease 30ms both pvt-in; }
}
@keyframes pvt-out { to { opacity: 0; } }
@keyframes pvt-in { from { opacity: 0; transform: translateY(6px); } }
.topbar { view-transition-name: panel-topbar; }
.botnav { view-transition-name: panel-botnav; }

/* ---------- Mono „proto” etykieta ---------- */
.proto {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-inv-2);
  margin: 0 0 .5rem;
}

/* ---------- Notki ---------- */
.note {
  margin: 0 0 1rem;
  padding: .65rem .8rem;
  border-radius: var(--r);
  font-size: .92rem;
  border: 1px solid transparent;
}
.note.ok  { background: rgba(46,139,87,.14);  border-color: rgba(46,139,87,.5);  color: #b7e9cd; }
.note.err { background: rgba(196,69,46,.14);  border-color: rgba(196,69,46,.5);  color: #f2b6aa; }

.hint {
  color: var(--txt-inv-2);
  font-size: .82rem;
  margin: .55rem 0 0;
}

/* ============================================================
   Strony logowania / konfiguracji  (body.panel-auth)
   ============================================================ */
body.panel-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.25rem;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(30,95,214,.10), transparent 60%),
    var(--ink);
  color-scheme: dark;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.auth-card h1 { margin-bottom: 1.1rem; }

.auth-card label {
  display: block;
  font-size: .85rem;
  color: var(--txt-inv-2);
  margin-bottom: .9rem;
}
.auth-card label input {
  display: block;
  width: 100%;
  margin-top: .35rem;
  min-height: 44px;
  padding: .55rem .7rem;
  font-size: 1rem;
  color: var(--txt-inv);
  background: var(--ink);
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
}
.auth-card label input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,95,214,.35);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-blue,
.btn-ghost,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .55rem 1.1rem;
  font-size: .95rem;
  font-weight: 600;
  font-family: var(--font);
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.btn-blue {
  width: 100%;
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn-blue:hover { background: var(--blue-deep); border-color: var(--blue-deep); }

.btn-ghost {
  background: transparent;
  color: var(--txt-inv);
  border-color: var(--ink-3);
}
.btn-ghost:hover { background: var(--ink-3); }

.btn-danger {
  background: transparent;
  color: #f2b6aa;
  border-color: rgba(196,69,46,.7);
}
.btn-danger:hover { background: var(--err); color: #fff; border-color: var(--err); }

.btn-blue:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30,95,214,.45);
}

/* ============================================================
   Panel — pasek górny + układ
   ============================================================ */
body.panel { background: var(--ink); touch-action: manipulation; color-scheme: dark; } /* kasuje ~300 ms tap-delay (feel jak apka) */

/* Press-feedback dotyku (mirror Pressable opacity .7 z apki) — własny, więc gasimy poświatę systemową */
.btn-blue, .btn-ghost, .btn-danger, .btn-sm, .chip, .detail-link, .dash-action, .dash-row,
.botnav-item, .row-chevron, .navlink, tr[data-href] { -webkit-tap-highlight-color: transparent; }
.btn-blue, .btn-ghost, .btn-danger, .btn-sm, .chip, .detail-link, .dash-action, .dash-row, .botnav-item {
  transition: opacity 80ms ease, background-color 80ms ease, border-color 80ms ease,
              color .15s ease, transform 90ms ease;
}
/* press: lekkie wciśnięcie zamiast samej zmiany przezroczystości (spójnie z frontem) */
.btn-blue:active, .btn-ghost:active, .btn-danger:active, .btn-sm:active, .chip:active,
.detail-link:active, .dash-action:active { opacity: .85; transform: translateY(1px); }
/* wiersze/zakładki: delikatne ściśnięcie */
.dash-row:active, .botnav-item:active { transform: scale(.985); }

/* Spójny focus: pierścień TYLKO przy nawigacji klawiaturą (:focus-visible) — koniec brzydkiego
   niebieskiego outline po kliknięciu myszą/dotykiem na linkach, wierszach i zakładkach. */
a:focus, button:focus, [tabindex]:focus, summary:focus, tr[data-href]:focus { outline: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible, tr[data-href]:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r);
}

.topbar {
  background: var(--ink-2);
  border-bottom: 1px solid var(--ink-3);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-in {
  max-width: 1100px;
  margin: 0 auto;
  padding: .8rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--txt-inv);
}
.brand:hover { color: #fff; text-decoration: none; }
.topbar-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .9rem;
}
.who {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--txt-inv-2);
}
.logout { color: #6ea0ff; font-size: .9rem; }
.navlink { color: var(--txt-inv-2); font-size: .9rem; padding: .4rem .25rem; display: inline-flex; align-items: center; transition: color .15s ease; }
.navlink:hover { color: #fff; text-decoration: none; }
.navlink.is-active { color: #fff; }
.nav-badge {
  display: inline-block; min-width: 1.25rem; padding: 0 .35rem;
  font-size: .72rem; font-weight: 700; line-height: 1.25rem; text-align: center;
  color: #fff; background: var(--blue); border-radius: 999px; vertical-align: text-top;
}

/* baner konta awaryjnego (break-the-glass) */
.btg-banner {
  background: var(--err); color: #fff; text-align: center;
  font-size: .9rem; font-weight: 600; padding: .55rem .9rem;
}

/* zarządzanie kontami */
.acc-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.acc-name { font-size: 1.05rem; }
.acc-actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.acc-actions .inline-form { margin-top: 0; }
.acc-actions select,
.card .inline-form input[type="password"],
.card .inline-form input.pw-field {
  min-height: 38px; padding: .35rem .55rem; font-size: .9rem; font-family: var(--font);
  color: var(--txt-inv); background: var(--ink); border: 1px solid var(--ink-3); border-radius: var(--r);
}
.card .inline-form input[type="password"],
.card .inline-form input.pw-field { width: 16rem; max-width: 100%; }
.acc-actions select:focus,
.card .inline-form input[type="password"]:focus,
.card .inline-form input.pw-field:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,95,214,.35);
}

/* „Pokaż/ukryj hasło" — oczko w polu hasła (JS: password-toggle.js) */
.pw-wrap { position: relative; display: block; }
.card .inline-form .pw-wrap { display: inline-block; max-width: 100%; }
.pw-wrap input.pw-field { padding-right: 2.9rem; }
.pw-toggle {
  position: absolute; right: 0; bottom: 0; height: 2.75rem; width: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--txt-inv-2); -webkit-tap-highlight-color: transparent; transition: color .15s ease;
}
.pw-toggle:hover { color: var(--txt-inv); }
.pw-toggle:active { transform: scale(.92); }
.pw-toggle svg { width: 20px; height: 20px; display: block; }
.pw-toggle .pw-ic-off { display: none; }
.pw-toggle.is-on .pw-ic-on { display: none; }
.pw-toggle.is-on .pw-ic-off { display: block; }

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.back { font-size: .9rem; }

/* ---------- Filtry ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.5rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .4rem .75rem;
  font-size: .85rem;
  color: var(--txt-inv);
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 999px;
  text-decoration: none;
}
.chip:hover { background: var(--ink-3); text-decoration: none; }
.chip.is-active {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.chip-c {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--txt-inv-2);
  background: rgba(0,0,0,.25);
  padding: .05rem .4rem;
  border-radius: 999px;
}
/* ---------- .chip-select — grupa wyboru chipami (radio/checkbox ukryte, jak apka) ---------- */
.chip-select { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-select .chip { cursor: pointer; }
.chip-select .chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* ---------- Empty state ---------- */
.empty {
  background: var(--ink-2);
  border: 1px dashed var(--ink-3);
  border-radius: var(--r);
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--txt-inv-2);
}
.empty-icon { display: block; width: 40px; height: 40px; margin: 0 auto .7rem; color: var(--txt-inv-2); opacity: .5; }
.empty-title { margin: 0; color: var(--txt-inv); font-weight: 600; }
.empty-sub { margin: .35rem 0 0; font-size: .9rem; color: var(--txt-inv-2); }

/* ============================================================
   Tabela zleceń (desktop) / karty (mobile)
   ============================================================ */
.grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  overflow: hidden;
}
.grid thead th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--txt-inv-2);
  font-weight: 600;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--ink-3);
  background: var(--ink-3);
}
.grid tbody td {
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--ink-3);
  font-size: .9rem;
  vertical-align: middle;
}
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover { background: var(--ink-3); }
.cell-action { text-align: right; white-space: nowrap; }
.detail-link { font-weight: 600; white-space: nowrap; }
.detail-link:hover { color: #fff; }

/* cały wiersz klikalny (jak item listy w apce) — działa też dla karty mobilnej */
tr[data-href] { cursor: pointer; }
tr[data-href]:active { background: var(--ink-3); }
/* afordancja „otwórz” — chevron po prawej zamiast „Szczegóły →” */
.row-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 .2rem;
  font-size: 1.5rem; line-height: 1; color: var(--txt-inv-2); text-decoration: none;
}
.row-chevron:hover, tr[data-href]:hover .row-chevron { color: var(--txt-inv); text-decoration: none; }

/* E1: szybka zmiana statusu z listy — przycisk w kolumnie akcji (przy chevronie) */
.quick-status { display: inline-flex; margin: 0 .4rem 0 0; vertical-align: middle; }
.quick-status-btn { white-space: nowrap; }
@media (max-width: 720px) {
  .cell-action { justify-content: flex-end; gap: .5rem; }
  .quick-status { margin: 0; }
}

/* E4: akcje masowe (desktop) — pasek + kolumna checkboxów */
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; padding: .6rem .8rem;
  background: var(--ink-2); border: 1px solid var(--blue); border-radius: var(--r); }
.bulk-bar label { font-size: .9rem; color: var(--txt-inv-2); }
.bulk-bar select { min-height: 40px; padding: .3rem .5rem; font-size: .9rem; font-family: var(--font);
  color: var(--txt-inv); background: var(--ink); border: 1px solid var(--ink-3); border-radius: var(--r); }
.bulk-count strong { color: var(--txt-inv); }
.bulk-col { width: 1%; white-space: nowrap; text-align: center; }
.bulk-col input { width: 18px; height: 18px; cursor: pointer; }
.btn-blue.is-armed { background: var(--amber); border-color: var(--amber); color: var(--ink); } /* uzbrojony „Potwierdź" */
@media (max-width: 720px) { .bulk-col, .bulk-bar { display: none !important; } }

/* na telefonie filtry statusu = jeden przesuwany rząd (jak status-chips w apce) */
@media (max-width: 720px) {
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .3rem;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters .chip { flex: 0 0 auto; }
}

/* priorytet zlecenia (lista) */
.prio {
  display: inline-block; padding: .15rem .5rem; font-size: .72rem; font-weight: 700;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.prio-hi  { background: rgba(196,69,46,.18);  color: #f2b6aa; border-color: rgba(196,69,46,.55); }
.prio-mid { background: rgba(232,163,61,.16); color: #f3cd8c; border-color: rgba(232,163,61,.5); }
.prio-lo  { background: rgba(154,166,178,.14); color: #c2ccd6; border-color: rgba(154,166,178,.35); }

/* kontrolka sortowania nad listą */
.list-sort { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; flex-wrap: wrap; }
.list-sort label { font-size: .85rem; color: var(--txt-inv-2); }
.list-sort select {
  min-height: 44px; padding: .3rem .5rem; font-size: .9rem; font-family: var(--font);
  color: var(--txt-inv); background: var(--ink); border: 1px solid var(--ink-3); border-radius: var(--r);
}

/* wyszukiwarka zleceń */
.list-search { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; flex-wrap: wrap; }
.list-search input[type="search"] {
  flex: 1 1 18rem; min-width: 12rem; min-height: 44px; padding: .45rem .7rem;
  font-size: .95rem; font-family: var(--font);
  color: var(--txt-inv); background: var(--ink); border: 1px solid var(--ink-3); border-radius: var(--r);
}
.list-search input[type="search"]::placeholder { color: var(--txt-inv-2); }
.list-search input[type="search"]:focus { outline: 2px solid var(--blue); outline-offset: 1px; }

/* licznik wyników nad tabelą */
.list-count { margin: 0 0 .6rem; font-size: .85rem; color: var(--txt-inv-2); }
.list-count strong { color: var(--txt-inv); }

/* paginacja pod tabelą */
.pager { display: flex; align-items: center; justify-content: center; gap: .35rem; flex-wrap: wrap; margin: 1.2rem 0 .5rem; }
.pager-nums { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.pager-nums a, .pager-cur, .pager-gap {
  min-width: 2.4rem; min-height: 44px; padding: .35rem .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .9rem; border-radius: var(--r); text-decoration: none;
}
.pager-nums a { color: var(--txt-inv); border: 1px solid var(--ink-3); }
.pager-nums a:hover { border-color: var(--blue); }
.pager-cur { background: var(--blue); color: #fff; font-weight: 700; }
.pager-gap { color: var(--txt-inv-2); }

/* podsumowanie zaległości nad listą */
.backlog-note {
  margin: 0 0 1.2rem; padding: .6rem .8rem; font-size: .92rem;
  background: var(--ink-2); border: 1px solid var(--ink-3); border-left: 3px solid var(--blue); border-radius: var(--r);
}

/* ============================================================
   Status badges
   ============================================================ */
.badge {
  display: inline-block;
  padding: .2rem .55rem;
  font-size: .75rem;
  font-weight: 600;
  border-radius: var(--r);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-nowe         { background: rgba(30,95,214,.18); color: #9cc0ff; border-color: rgba(30,95,214,.55); }
.badge-potwierdzone { background: rgba(46,139,87,.18); color: #a8e3c2; border-color: rgba(46,139,87,.55); }
.badge-w_realizacji { background: rgba(232,163,61,.18); color: #f3cd8c; border-color: rgba(232,163,61,.55); }
.badge-zakonczone   { background: rgba(154,166,178,.16); color: #c2ccd6; border-color: rgba(154,166,178,.4); }
.badge-odrzucone    { background: rgba(196,69,46,.18); color: #f2b6aa; border-color: rgba(196,69,46,.55); }
.badge-anulowane    { background: rgba(154,166,178,.12); color: #9aa6b2; border-color: rgba(154,166,178,.3); }

/* kolorowe kropki dla chipów-filtrów */
.chip.badge-nowe::before,
.chip.badge-potwierdzone::before,
.chip.badge-w_realizacji::before,
.chip.badge-zakonczone::before,
.chip.badge-odrzucone::before,
.chip.badge-anulowane::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.chip.badge-nowe         { background: var(--ink-2); color: var(--txt-inv); }
.chip.badge-nowe::before         { background: var(--blue); }
.chip.badge-potwierdzone::before { background: var(--ok); }
.chip.badge-w_realizacji::before { background: var(--amber); }
.chip.badge-zakonczone::before   { background: var(--txt-inv-2); }
.chip.badge-odrzucone::before    { background: var(--err); }
.chip.badge-anulowane::before    { background: var(--txt-inv-2); }

/* ============================================================
   Szczegóły zlecenia
   ============================================================ */
.detail-head {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.detail-head h1 { margin: 0; }

.card {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.1rem;
}
.card-danger { border-color: rgba(196,69,46,.4); }

.kv {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: .15rem .9rem;
  margin: 0 0 1rem;
}
.kv dt {
  color: var(--txt-inv-2);
  font-size: .82rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--ink-3);
}
.kv dd {
  margin: 0;
  padding: .35rem 0;
  border-bottom: 1px solid var(--ink-3);
  font-size: .92rem;
  word-break: break-word;
}

.message {
  background: var(--ink);
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  padding: .8rem .9rem;
  margin: 0;
  font-size: .92rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Baza pól — jednolity ciemny wygląd wszystkich ekranowych input/select/textarea (Zad.11) */
body.panel input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]):not([type=color]):not([type=range]),
body.panel select,
body.panel textarea {
  font-family: var(--font);
  color: var(--txt-inv);
  background: var(--ink);
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  min-height: 44px;
  padding: .55rem .7rem;
  accent-color: var(--blue);
}
body.panel input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]):not([type=color]):not([type=range]):focus,
body.panel select:focus,
body.panel textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,95,214,.35);
}

/* ---------- Formularze działań ---------- */
.action-form .field { margin-bottom: .85rem; }
.action-form label {
  display: block;
  font-size: .82rem;
  color: var(--txt-inv-2);
  margin-bottom: .35rem;
}
.action-form input,
.action-form select,
.action-form textarea {
  width: 100%;
  min-height: 44px;
  padding: .55rem .7rem;
  font-size: 1rem;
  font-family: var(--font);
  color: var(--txt-inv);
  background: var(--ink);
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
}
.action-form textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.45;
}
.action-form input:focus,
.action-form select:focus,
.action-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,95,214,.35);
}
.action-form .btn-blue { width: auto; }

/* ---------- Przełącznik (Ustawienia) ---------- */
.switch-row { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: .95rem; }
.switch-row input[type="checkbox"],
.switch-row input[type="radio"] {
  width: 20px; height: 20px; min-height: 0; margin: 0;
  accent-color: var(--blue); cursor: pointer; flex: none;
}
code {
  font-family: var(--mono); font-size: .85em;
  background: rgba(0,0,0,.3); padding: .08rem .35rem; border-radius: 4px;
}

/* ============================================================
   Mobile — tabela → karty
   ============================================================ */
@media (max-width: 720px) {
  .grid, .grid thead, .grid tbody, .grid th, .grid td, .grid tr {
    display: block;
  }
  .grid { border: 0; background: transparent; overflow: visible; }
  .grid thead { position: absolute; left: -9999px; top: -9999px; }
  .grid tbody tr {
    background: var(--ink-2);
    border: 1px solid var(--ink-3);
    border-radius: var(--r);
    margin-bottom: .8rem;
    padding: .3rem .2rem;
  }
  .grid tbody tr:hover { background: var(--ink-2); }
  .grid tbody td {
    border-bottom: 1px solid var(--ink-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .55rem .8rem;
  }
  .grid tbody tr td:last-child { border-bottom: 0; }
  .grid tbody td::before {
    content: attr(data-label);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--txt-inv-2);
    flex: 0 0 auto;
  }
  .cell-action { text-align: left; }

  .kv { grid-template-columns: 1fr; gap: 0; }
  .kv dt { border-bottom: 0; padding-bottom: 0; }
  .kv dd { padding-top: .1rem; margin-bottom: .45rem; }
}

@media (max-width: 420px) {
  .topbar-in { flex-direction: column; align-items: flex-start; gap: .4rem; }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================
   Nawigacja mobilna — dolny pasek zakładek + bottom-sheet „Więcej"
   ============================================================ */
.botnav { display: none; }
.moresheet[hidden] { display: none; }

@media (max-width: 720px) {
  /* górny pasek redukuje się do logo + badge; pełna nawigacja ląduje na dole */
  .topbar-right { display: none; }
  .topbar-in { padding: .6rem 1rem; }

  .botnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--ink-2); border-top: 1px solid var(--ink-3);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .botnav-item {
    position: relative;
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .15rem; min-height: 56px; padding: .35rem .2rem;
    color: var(--txt-inv-2); font-size: .68rem; text-decoration: none;
    background: none; border: 0; cursor: pointer; font-family: inherit;
  }
  /* animowany wskaźnik aktywnej zakładki (kreska u góry, wjeżdża skalą) */
  .botnav-item::before {
    content: ""; position: absolute; top: 0; left: 50%;
    width: 26px; height: 2px; border-radius: 0 0 2px 2px; background: #6ea0ff;
    transform: translateX(-50%) scaleX(0); transform-origin: center;
    transition: transform .18s ease;
  }
  .botnav-item.is-active::before { transform: translateX(-50%) scaleX(1); }
  .botnav-item.is-active { color: var(--txt-inv); }
  .botnav-item.is-active .botnav-ic { color: #6ea0ff; }
  .botnav-ic { position: relative; display: inline-flex; transition: color .15s ease; }
  .botnav-ic svg { width: 24px; height: 24px; display: block; }
  .botnav-lbl { line-height: 1; white-space: nowrap; }
  .botnav-badge {
    position: absolute; top: -6px; right: -10px;
    min-width: 16px; height: 16px; padding: 0 4px;
    font-size: .62rem; font-weight: 700; line-height: 16px; text-align: center;
    color: #fff; background: var(--blue); border-radius: 999px;
  }

  body.panel { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
  body.panel.moresheet-lock { overflow: hidden; }
}

/* bottom-sheet „Więcej" (otwierany tylko z dolnego paska, więc realnie ≤720px) */
.moresheet { position: fixed; inset: 0; z-index: 40; }
.moresheet-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .2s ease; }
.moresheet.is-open .moresheet-overlay { opacity: 1; }
.moresheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--ink-2); border-top: 1px solid var(--ink-3);
  border-radius: 12px 12px 0 0;
  padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom, 0));
  transform: translateY(100%); transition: transform .22s ease;
  max-height: 85vh; overflow-y: auto;
}
.moresheet.is-open .moresheet-panel { transform: translateY(0); }
.moresheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .4rem .6rem .6rem; border-bottom: 1px solid var(--ink-3); margin-bottom: .3rem;
}
.moresheet-head .who { font-size: .85rem; }
.moresheet-x { background: none; border: 0; color: var(--txt-inv-2); font-size: 1.1rem; line-height: 1; min-height: 44px; min-width: 44px; cursor: pointer; }
.moresheet-link { display: block; padding: .9rem .8rem; min-height: 48px; color: var(--txt-inv); text-decoration: none; border-radius: var(--r); transition: background-color .15s ease; }
.moresheet-link:hover { background: var(--ink-3); text-decoration: none; }
.moresheet-link.is-active { background: var(--ink-3); color: #fff; }
.moresheet-logout { color: #6ea0ff; }

/* ============================================================
   Rozbudowa panelu: status 'gotowe', przyciski sm, kalendarz, wątek
   ============================================================ */
.badge-gotowe { background: rgba(20,160,170,.18); color: #8fe3ea; border-color: rgba(20,160,170,.55); }
.chip.badge-gotowe { background: var(--ink-2); color: var(--txt-inv); }
.chip.badge-gotowe::before { background: #14a0aa; }

.btn-sm { min-height: 40px; padding: .4rem .8rem; font-size: .85rem; width: auto; }
.head-actions { margin-left: auto; }

/* szybki kontakt (klik-telefon / SMS / WhatsApp) */
.contact-quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.contact-quick a { text-decoration: none; }

/* E5: nawigacja dojazdu — linki do Google/Apple Maps */
.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.nav-links a { text-decoration: none; }

/* E2: „zapamiętaj wybór" w modalu powiadomień */
.notify-remember { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; font-size: .9rem; color: var(--txt-inv-2); cursor: pointer; }
.notify-remember input { width: 18px; height: 18px; }

/* „Co teraz?" — wyróżniony następny krok na górze zlecenia (prowadzenie za rękę) */
.next-step {
  margin: 1rem 0 1.4rem;
  padding: .85rem 1rem;
  background: rgba(30, 95, 214, .12);
  border: 1px solid var(--blue);
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
}
.next-step-eyebrow { display: block; margin-bottom: .3rem; color: #8fb4ff; }
.next-step-text { margin: 0 0 .75rem; color: var(--txt-inv); font-weight: 600; }
.next-step-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.next-step-actions a { text-decoration: none; }
/* kotwice akcji „Co teraz?" — nie chowaj pod sticky topbarem */
#act-term, #act-status, #act-rozliczenie { scroll-margin-top: 72px; }

.inline-form { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.inline-form .hint { margin: 0; }

/* odpowiedź klienta */
.resp { font-weight: 600; }
.resp-akceptuje   { color: #a8e3c2; }
.resp-inny_termin { color: #f3cd8c; }
.resp-kontakt     { color: #f3cd8c; }
.resp-brak        { color: var(--txt-inv-2); }

/* wątek korespondencji */
.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.msg { border: 1px solid var(--ink-3); border-radius: var(--r); padding: .55rem .7rem; background: var(--ink); }
.msg-warsztat { border-left: 3px solid var(--blue); }
.msg-klient   { border-left: 3px solid var(--ok); }
.msg-system   { border-left: 3px solid var(--ink-3); background: transparent; }
.msg-meta { display: block; font-family: var(--mono); font-size: .72rem; color: var(--txt-inv-2); margin-bottom: .25rem; }
.msg-body { display: block; font-size: .92rem; white-space: pre-wrap; word-break: break-word; }

/* ---------- Kalendarz (mobile-first) ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cal-nav { display: flex; align-items: center; gap: .5rem; }
.cal-title { font-size: 1.05rem; min-width: 8.5em; text-align: center; }
.cal-pick { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cal-pick select {
  min-height: 40px; padding: .3rem .5rem; font-size: .9rem; font-family: var(--font);
  color: var(--txt-inv); background: var(--ink); border: 1px solid var(--ink-3); border-radius: var(--r);
}

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-dow { text-align: center; font-size: .64rem; text-transform: uppercase; letter-spacing: .03em; color: var(--txt-inv-2); padding: .2rem 0; }
.cal-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 0; min-height: 46px;
  background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--r);
  padding: .25rem .15rem; text-decoration: none; color: var(--txt-inv); overflow: hidden;
}
.cal-cell:hover { border-color: var(--blue); text-decoration: none; }
.cal-cell--empty { background: transparent; border: 0; pointer-events: none; }
.cal-cell--today { box-shadow: inset 0 0 0 2px var(--blue); }
.cal-cell--sel { border-color: var(--amber); box-shadow: inset 0 0 0 2px var(--amber); }
.cal-day-num { font-size: .8rem; color: var(--txt-inv-2); align-self: flex-start; padding-left: .15rem; }

/* kropki statusów (telefon) */
.cal-dots { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--txt-inv-2); }
.cal-dot.badge-nowe         { background: var(--blue); }
.cal-dot.badge-potwierdzone { background: var(--ok); }
.cal-dot.badge-w_realizacji { background: var(--amber); }
.cal-dot.badge-gotowe       { background: #14a0aa; }
.cal-dot.badge-zakonczone   { background: var(--txt-inv-2); }
.cal-dot-more { font-size: .6rem; line-height: 6px; color: var(--txt-inv-2); }

/* etykiety wizyt — tylko desktop */
.cal-evs { display: none; }

@media (min-width: 760px) {
  .cal-grid { gap: 6px; }
  .cal-cell { min-height: 96px; align-items: stretch; padding: .35rem; gap: 2px; }
  .cal-dots { display: none; }
  .cal-evs { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .cal-ev {
    display: block; font-size: .7rem; line-height: 1.35; padding: .05rem .3rem; border-radius: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .cal-more { font-size: .66rem; color: var(--txt-inv-2); }
}

/* przełącznik Miesiąc / Tydzień + narzędzia w nagłówku kalendarza */
.cal-tools { display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap; }
.cal-switch { display: inline-flex; gap: .3rem; }
.cal-switch .is-active { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); color: #fff; }

/* widok tygodnia — agenda */
.agenda { display: flex; flex-direction: column; gap: .5rem; }
.agenda-day { display: grid; grid-template-columns: 4.25rem 1fr; gap: .8rem; align-items: start;
  border: 1px solid var(--ink-3); border-radius: var(--r); background: var(--ink-2); padding: .6rem .7rem; }
.agenda-day--today { box-shadow: inset 0 0 0 2px var(--blue); }
.agenda-date { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; color: var(--txt-inv-2); }
.agenda-dow { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.agenda-num { font-size: 1.2rem; font-weight: 700; color: var(--txt-inv); }
.agenda-items { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.agenda-ev { display: flex; align-items: center; gap: .5rem .8rem; flex-wrap: wrap;
  padding: .4rem .55rem; border: 1px solid var(--ink-3); border-radius: var(--r);
  background: var(--ink); color: var(--txt-inv); text-decoration: none; }
.agenda-ev:hover { border-color: var(--blue); text-decoration: none; }
.agenda-ev .badge { margin-left: auto; }

/* dni oznaczone jako wolne (bez koloru ostrzegawczego — neutralna kreska + szrafura) */
.cal-cell--blocked {
  background: repeating-linear-gradient(45deg, var(--ink-2), var(--ink-2) 6px, rgba(255,255,255,.035) 6px, rgba(255,255,255,.035) 12px);
}
.cal-off {
  align-self: flex-start;
  font-size: .6rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--txt-inv-2); border: 1px solid var(--ink-3); border-radius: 3px;
  padding: 0 .25rem; line-height: 1.4;
}
.cal-block { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.cal-block input[type="text"] {
  min-height: 40px; padding: .4rem .6rem; font-size: .9rem;
  color: var(--txt-inv); background: var(--ink); border: 1px solid var(--ink-3); border-radius: var(--r);
  width: 16rem; max-width: 100%;
}
.cal-block input[type="text"]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,95,214,.35); }

/* lista dnia (pod kalendarzem) */
.day-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.day-list a {
  display: flex; align-items: center; gap: .5rem .8rem; flex-wrap: wrap;
  padding: .6rem .7rem; border: 1px solid var(--ink-3); border-radius: var(--r);
  background: var(--ink); color: var(--txt-inv); text-decoration: none;
}
.day-list a:hover { border-color: var(--blue); }
.day-time { font-family: var(--mono); font-size: .85rem; color: var(--txt-inv-2); min-width: 3em; }
.day-car { font-weight: 600; }
.day-name { color: var(--txt-inv-2); }
.day-list .badge { margin-left: auto; }

/* ---------- Załączniki ---------- */
.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.file-list li {
  display: flex; align-items: center; gap: .4rem .8rem; flex-wrap: wrap;
  padding: .5rem .6rem; border: 1px solid var(--ink-3); border-radius: var(--r); background: var(--ink);
}
.file-name { font-weight: 600; word-break: break-word; }
.file-meta { font-size: .8rem; color: var(--txt-inv-2); }
.file-actions { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.file-actions .inline-form { margin: 0; }

/* ---------- Wydruk / PDF zlecenia (jasny dokument, niezależny od ciemnego panelu) ---------- */
body.print-doc { background: #fff; color: #14181d; }
.print-wrap { max-width: 800px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.print-actions { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.print-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 2px solid #14181d; padding-bottom: .8rem; margin-bottom: 1.2rem; }
.print-brand { font-size: 1.15rem; font-weight: 800; }
.print-sub { font-size: .85rem; color: #5a6672; }
.print-meta { font-size: .85rem; text-align: right; color: #2b333c; }
.print-title { font-size: 1.25rem; margin: 0 0 1rem; color: #14181d; }
.print-h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #5a6672; margin: 1.4rem 0 .5rem; border-bottom: 1px solid #d4dae0; padding-bottom: .2rem; }
.print-kv { width: 100%; border-collapse: collapse; }
.print-kv th { text-align: left; vertical-align: top; width: 9rem; padding: .3rem .8rem .3rem 0; color: #5a6672; font-weight: 600; font-size: .9rem; }
.print-kv td { padding: .3rem 0; font-size: .95rem; vertical-align: top; word-break: break-word; }
.print-box { border: 1px solid #d4dae0; border-radius: 5px; padding: .7rem .8rem; font-size: .95rem; white-space: pre-wrap; word-break: break-word; }
.print-files { margin: .3rem 0 0; padding-left: 1.2rem; font-size: .95rem; }
.print-sign { display: flex; gap: 2rem; margin-top: 3rem; }
.print-sign-box { flex: 1; border-top: 1px solid #14181d; padding-top: .4rem; font-size: .82rem; color: #5a6672; text-align: center; }
.print-warn { color: var(--err); font-weight: 600; margin: .4rem 0 0; }  /* alert przekroczenia limitu na jasnym wydruku */
.print-job-symptom { color: #5a6672; font-size: .9rem; }  /* objaw zgłoszony przez klienta w historii zleceń (wydruk) */

/* ---------- Karta przyjęcia pojazdu (pola do ręcznego wypełnienia) ---------- */
.card-label { font-size: .82rem; font-weight: 600; color: #5a6672; margin: 1.1rem 0 .35rem; }
.card-fill { display: inline-block; min-width: 9rem; border-bottom: 1px solid #14181d; }
.card-fill-sm { min-width: 3.5rem; }
.card-hint, .card-note { color: #5a6672; }
.card-hint { font-size: .82rem; }
.card-fuel { display: inline-flex; gap: .3rem; vertical-align: middle; }
.card-fuel-opt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.8rem; height: 1.6rem; border: 1px solid #14181d; border-radius: 4px; font-size: .85rem;
}
.card-box { border: 1px solid #d4dae0; border-radius: 5px; min-height: 4.5rem; margin: 0 0 .4rem; }
.card-check { display: flex; align-items: center; gap: .55rem; margin: .35rem 0; font-size: .95rem; }
.card-tick { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; border: 1.5px solid #14181d; border-radius: 3px; }
.card-note { font-size: .8rem; margin: .6rem 0 0; line-height: 1.4; }
@media print {
  .print-actions { display: none; }
  .print-wrap { max-width: none; padding: 0; }
  a[href]::after { content: none; }
  .card-box { min-height: 4rem; }
}

/* ---------- Modal: świadomy wybór powiadomienia (e-mail / kontakt osobisty) ---------- */
.notify-modal {
  width: min(440px, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  background: var(--ink-2);
  color: var(--txt-inv);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.notify-modal::backdrop { background: rgba(0,0,0,.55); }
.notify-in { padding: 1.2rem 1.25rem 1.25rem; }
.notify-title { font-size: 1.1rem; margin: 0 0 .9rem; }
.notify-summary { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; margin: 0 0 1rem; }
.notify-summary dt { color: var(--txt-inv-2); font-size: .82rem; padding: .2rem 0; }
.notify-summary dd { margin: 0; font-size: .9rem; padding: .2rem 0; word-break: break-word; }
.notify-noemail { margin: 0 0 1rem; }
.notify-nophone { margin: 0 0 1rem; }
.notify-nophone .note { margin-bottom: .5rem; }
.notify-phone { display: block; font-size: .82rem; color: var(--txt-inv-2); }
.notify-phone input {
  display: block; width: 100%; margin-top: .35rem; min-height: 44px;
  padding: .55rem .7rem; font-size: 1rem; color: var(--txt-inv);
  background: var(--ink); border: 1px solid var(--ink-3); border-radius: var(--r);
}
.notify-phone input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,95,214,.35); }
.notify-actions { display: flex; flex-direction: column; gap: .55rem; }
.notify-actions .btn-blue,
.notify-actions .btn-ghost { width: 100%; }
.notify-actions .btn-blue:disabled { opacity: .5; cursor: not-allowed; }
.notify-cancel { color: var(--txt-inv-2); }

/* ============================================================
   FAZA B (CRM) — klienci / pojazdy
   ============================================================ */
.crm-title { font-size: 1.4rem; margin: .2rem 0 1rem; }
.back-link { text-decoration: none; color: var(--txt-inv-2); }
.back-link:hover { color: var(--txt-inv); }

/* wyszukiwarka nad listą */
.crm-search { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.crm-search input[type="search"] {
  flex: 1 1 18rem; min-height: 42px; padding: .5rem .7rem; font-size: 1rem; font-family: var(--font);
  color: var(--txt-inv); background: var(--ink); border: 1px solid var(--ink-3); border-radius: var(--r);
}
.crm-search input[type="search"]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,95,214,.35); }

/* listy powiązań (pojazdy klienta, właściciele, historia, podpowiedzi) */
.crm-list { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.crm-list li {
  display: flex; align-items: center; gap: .5rem .8rem; flex-wrap: wrap;
  padding: .55rem .7rem; border: 1px solid var(--ink-3); border-radius: var(--r); background: var(--ink);
}
.crm-list .badge { margin-left: auto; }
.crm-list .inline-form { margin: 0; }
.crm-meta { font-size: .82rem; color: var(--txt-inv-2); }

/* historia napraw na karcie pojazdu — objaw / koszt / notatka mechanika per zlecenie (każde w nowym wierszu) */
.crm-list li .hist-symptom,
.crm-list li .hist-cost,
.crm-list li .hist-note { flex-basis: 100%; width: 100%; margin: .15rem 0 0; font-size: .85rem; line-height: 1.45; }
.hist-symptom { color: var(--txt-inv-2); }
.hist-cost { color: var(--txt-inv); font-weight: 600; }
.hist-note { color: var(--txt-inv-2); white-space: normal; word-break: break-word; }
.hist-note-label { color: var(--txt-inv); font-weight: 600; }

/* przyciski „utwórz ze zlecenia" w view.php */
.crm-fromsnapshot { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.crm-fromsnapshot .inline-form { margin: 0; }

/* ============================================================
   Kosztorys + limit kosztu („zasada uczciwego kosztu")
   ============================================================ */
.est-table { width: 100%; border-collapse: collapse; margin: .3rem 0 .2rem; }
.est-table thead th {
  text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--txt-inv-2); font-weight: 600; padding: .45rem .5rem; border-bottom: 1px solid var(--ink-3);
}
.est-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--ink-3); font-size: .9rem; vertical-align: top; }
.est-table .est-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.est-tag {
  display: inline-block; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
  color: #f3cd8c; background: rgba(232,163,61,.16); border: 1px solid rgba(232,163,61,.5);
  border-radius: 3px; padding: 0 .3rem; margin-left: .3rem; vertical-align: middle;
}
.est-sum {
  margin: .5rem 0 0; font-size: 1rem; display: flex; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--ink-3); padding-top: .5rem;
}
.est-sum strong { font-size: 1.05rem; }
.est-limit { margin: .5rem 0 0; font-size: .92rem; }
.note.est-warn { background: rgba(232,163,61,.14); border-color: rgba(232,163,61,.5); color: #f3cd8c; }

/* badge stanu kosztorysu (jak badge-<status>) */
.badge-est-szkic         { background: rgba(154,166,178,.16); color: #c7d0d9; border-color: rgba(154,166,178,.5); }
.badge-est-wyslany       { background: rgba(30,95,214,.18);  color: #9cc0ff; border-color: rgba(30,95,214,.55); }
.badge-est-zaakceptowany { background: rgba(46,139,87,.18);  color: #a8e3c2; border-color: rgba(46,139,87,.55); }
.badge-est-odrzucony     { background: rgba(196,69,46,.18);  color: #f2b6aa; border-color: rgba(196,69,46,.55); }
.badge-overlimit         { background: rgba(196,69,46,.18);  color: #f2b6aa; border-color: rgba(196,69,46,.55); }

/* formularz pozycji (edycja / dodawanie) */
.est-form { border: 1px solid var(--ink-3); border-radius: var(--r); padding: .7rem .8rem; margin: .5rem 0; background: var(--ink); }
.est-fields { display: flex; flex-wrap: wrap; gap: .6rem; }
.est-fields .field { margin: 0; flex: 1 1 7rem; }
.est-fields .est-grow { flex: 3 1 12rem; }
.est-fields .est-sm { flex: 1 1 5.5rem; }
.est-row-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.est-row-actions .btn-blue, .est-row-actions .btn-danger { width: auto; }
.est-linesum { font-weight: 600; margin-right: .6rem; color: var(--txt-inv, inherit); font-size: .9rem; }

/* tabela → wiersze etykietowane na wąskim ekranie */
@media (max-width: 560px) {
  .est-table thead { display: none; }
  .est-table, .est-table tbody, .est-table tr, .est-table td { display: block; width: 100%; }
  .est-table tr { border: 1px solid var(--ink-3); border-radius: var(--r); margin-bottom: .5rem; padding: .15rem .15rem; }
  .est-table td { border: 0; display: flex; justify-content: space-between; gap: 1rem; }
  .est-table td::before { content: attr(data-label); color: var(--txt-inv-2); font-size: .78rem; }
  .est-table .est-num { text-align: right; }
}

/* strona klienta (wizyta.php) — lista pozycji */
.est-client { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.est-client li {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .4rem .55rem; border: 1px solid var(--ink-3); border-radius: var(--r); background: var(--ink);
}
.est-client-val { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Eksport CSV / backup ---------- */
.export-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.export-grid .card { margin: 0; }
.export-form { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; }
.export-form label { display: block; font-size: .82rem; color: var(--txt-inv-2); margin-bottom: .3rem; }
.export-form select {
  min-height: 40px; padding: .4rem .6rem; font-size: .95rem; font-family: var(--font);
  color: var(--txt-inv); background: var(--ink); border: 1px solid var(--ink-3); border-radius: var(--r);
}
.export-grid a.btn-blue { width: auto; display: inline-block; }

/* ============================================================
   Serwisy okresowe (karta pojazdu + strona serwisy.php)
   ============================================================ */
.badge-svc-overdue { background: rgba(196,69,46,.18); color: #f2b6aa; border-color: rgba(196,69,46,.55); }
.badge-svc-soon    { background: rgba(232,163,61,.18); color: #f3cd8c; border-color: rgba(232,163,61,.55); }
.badge-svc-ok      { background: rgba(46,139,87,.18);  color: #a8e3c2; border-color: rgba(46,139,87,.55); }
.badge-svc-none    { background: var(--ink-3); color: var(--txt-inv-2); border-color: var(--ink-3); }  /* D6: brak kotwicy = brak terminu */
.svc-hint-none { margin: .4rem 0 0; font-size: .82rem; color: var(--txt-inv-2); }

.svc-list { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.svc-item { border: 1px solid var(--ink-3); border-radius: var(--r); padding: .7rem .8rem; background: var(--ink); }
.svc-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.svc-name { font-weight: 600; }
.svc-edit { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.svc-edit .field { margin: 0; flex: 1 1 9rem; }
.svc-edit .svc-grow { flex: 3 1 12rem; }
.svc-edit .svc-sm { flex: 1 1 6rem; }
.svc-actions { display: flex; align-items: end; }
.svc-meta { display: flex; flex-wrap: wrap; gap: 1rem; margin: .5rem 0 0; font-size: .82rem; color: var(--txt-inv-2); }
.svc-rowbtns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.svc-add { border-top: 1px solid var(--ink-3); margin-top: .9rem; padding-top: .6rem; }
.svc-quick { display: flex; flex-wrap: wrap; gap: .5rem; }

/* strona serwisy.php — grupowanie po aucie */
.svc-veh { margin: 0 0 1rem; }
.svc-veh-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: .2rem; }
.svc-veh-head h2 { font-size: 1.05rem; margin: 0; }
.svc-veh-contact { font-size: .85rem; color: var(--txt-inv-2); }
.svc-due-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--ink-3); }
.svc-due-row .svc-name { flex: 1 1 12rem; }
.svc-due-date { font-variant-numeric: tabular-nums; color: var(--txt-inv-2); font-size: .88rem; }
.svc-notify { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; align-items: center; }
.svc-filter { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .9rem; color: var(--txt-inv-2); }
.svc-filter .is-active { color: #fff; border-color: var(--blue); background: rgba(30,95,214,.18); }
.nav-badge.is-svc { background: var(--amber); color: #14181d; }

/* ============================================================
   Pulpit „Dziś" (pulpit.php) — kafelki KPI + listy + wykresy
   ============================================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem;
  margin: 0 0 1.5rem;
}
.kpi {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .8rem .9rem;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-left: 3px solid var(--blue); border-radius: var(--r);
  color: var(--txt-inv); text-decoration: none;
}
a.kpi:hover { border-color: var(--blue); background: var(--ink-3); text-decoration: none; }
a.kpi:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(30,95,214,.45); }
.kpi-num { font-size: 1.7rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: .82rem; color: var(--txt-inv-2); }
.kpi--warn { border-left-color: var(--err); }
.kpi--warn .kpi-num { color: #f2b6aa; }
.kpi--amber { border-left-color: var(--amber); }
.kpi--amber .kpi-num { color: #f3cd8c; } /* ten sam odcień co badge-w_realizacji / badge-svc-soon */
.kpi--ready { border-left-color: #14a0aa; }
.kpi--zero { border-left-color: var(--ink-3); opacity: .55; }
a.kpi--zero:hover { opacity: 1; }
/* G11: kafel kosztorysów — kwota bywa długa, nieco mniejszy font + zakaz zawijania */
.kpi-num--money { font-size: 1.4rem; white-space: nowrap; }

/* rząd szybkich przejść (pulpit zachęca do Zleceń/Kalendarza/Szukaj) */
.dash-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; margin: 0 0 1.6rem; }
.dash-action {
  display: flex; align-items: center; gap: .6rem; min-height: 52px;
  padding: .7rem .9rem; background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: var(--r); color: var(--txt-inv); text-decoration: none; font-weight: 600;
}
.dash-action:hover { border-color: var(--blue); background: var(--ink-3); text-decoration: none; }
.dash-action svg { width: 20px; height: 20px; flex: 0 0 auto; color: #6ea0ff; }
.dash-action--accent { border-color: var(--blue); background: rgba(30,95,214,.14); }
.dash-chart-link { font-size: .82rem; white-space: nowrap; }
.chart-card > .dash-chart-link { display: block; text-align: center; margin-top: .6rem; }

/* wykresy (Chart.js) */
.dash-charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin: 0 0 1.6rem; }
.chart-card { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--r); padding: .9rem 1rem 1rem; min-width: 0; }
.dash-chart-title { font-size: .9rem; margin: 0 0 .6rem; font-weight: 700; }
.chart-card canvas { max-width: 100%; }
.dash-chart-note { margin: .6rem 0 0; font-size: .82rem; color: var(--txt-inv-2); text-align: center; }
.dash-chart-note strong { color: var(--txt-inv); }

/* sekcje operacyjne */
.dash-section { margin: 0 0 1.5rem; scroll-margin-top: 72px; }
.dash-head { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .6rem; }
.dash-head h2 { font-size: 1.05rem; margin: 0; }
.dash-c { font-family: var(--mono); font-size: .8rem; color: var(--txt-inv-2); }
.dash-all { margin-left: auto; font-size: .85rem; white-space: nowrap; }
.dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.dash-row {
  display: flex; align-items: center; gap: .6rem .8rem;
  padding: .55rem .7rem; border: 1px solid var(--ink-3); border-radius: var(--r);
  background: var(--ink); color: var(--txt-inv); text-decoration: none;
}
.dash-row:hover { border-color: var(--blue); text-decoration: none; }
.dash-row .badge { flex: 0 0 auto; }
.dash-row-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.dash-row-car { font-weight: 600; }
.dash-row-sub { font-size: .82rem; color: var(--txt-inv-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row-meta { flex: 0 0 auto; font-family: var(--mono); font-size: .8rem; color: var(--txt-inv-2); white-space: nowrap; }
.dash-more { margin: .5rem 0 0; font-size: .82rem; color: var(--txt-inv-2); }
.dash-empty { margin: 0; font-size: .88rem; color: var(--txt-inv-2); }

@media (max-width: 720px) {
  .dash-charts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============================================================
   Rozliczenia / płatności (view.php „Rozliczenie" + lista + pokwitowanie)
   ============================================================ */
.pay-sum { margin: .2rem 0 .7rem; font-size: .95rem; }
.pay-sum strong { font-variant-numeric: tabular-nums; }
.pay-sum-sep { color: var(--txt-inv-2); margin: 0 .2rem; }

.pay-table { width: 100%; border-collapse: collapse; margin: .3rem 0 .2rem; }
.pay-table thead th {
  text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--txt-inv-2); font-weight: 600; padding: .45rem .5rem; border-bottom: 1px solid var(--ink-3);
}
.pay-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--ink-3); font-size: .9rem; vertical-align: middle; }
.pay-table .pay-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay-del { text-align: right; white-space: nowrap; }
.pay-del form { margin: 0; }

.pay-form { border: 1px solid var(--ink-3); border-radius: var(--r); padding: .7rem .8rem; margin: .5rem 0; background: var(--ink); }
.pay-fields { display: flex; flex-wrap: wrap; gap: .6rem; }
.pay-fields .field { margin: 0; }
.pay-fields .pay-sm { flex: 1 1 6rem; }
.pay-fields .pay-grow { flex: 3 1 12rem; }
.pay-row-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.pay-row-actions .btn-blue { width: auto; }

/* badge źródła zlecenia (sek. 22) — tylko 'www'; zlecenia panelowe bez znacznika */
.badge-www { background: rgba(60,120,180,.14); color: #8bb8d8; border-color: rgba(60,120,180,.38); font-size: .72rem; }

/* badge statusu opłacenia (jak badge-<status>) */
.badge-pay-brak        { background: rgba(154,166,178,.16); color: #c7d0d9; border-color: rgba(154,166,178,.5); }
.badge-pay-nieoplacone { background: rgba(196,69,46,.18);  color: #f2b6aa; border-color: rgba(196,69,46,.55); }
.badge-pay-czesciowo   { background: rgba(232,163,61,.18); color: #f3cd8c; border-color: rgba(232,163,61,.55); }
.badge-pay-oplacone    { background: rgba(46,139,87,.18);  color: #a8e3c2; border-color: rgba(46,139,87,.55); }
.badge-pay-nadplata    { background: rgba(30,95,214,.18);  color: #9cc0ff; border-color: rgba(30,95,214,.55); }

@media (max-width: 560px) {
  .pay-table thead { display: none; }
  .pay-table, .pay-table tbody, .pay-table tr, .pay-table td { display: block; width: 100%; }
  .pay-table tr { border: 1px solid var(--ink-3); border-radius: var(--r); margin-bottom: .5rem; padding: .15rem .15rem; }
  .pay-table td { border: 0; display: flex; justify-content: space-between; gap: 1rem; }
  .pay-table td::before { content: attr(data-label); color: var(--txt-inv-2); font-size: .78rem; }
  .pay-table .pay-num, .pay-del { text-align: right; }
}

/* ===== Wyszukiwarka na żywo (typeahead, G10/D8) ===== */
/* Bez JS: elementy .js-only są ukryte, działają zwykłe formularze/selecty.
   Z JS (html.js-ta): pokazujemy typeahead, chowamy select-fallback. */
.js-only { display: none; }
.js-ta .js-only { display: revert; }
.js-ta select.ta-fallback { display: none; }

/* ===== Akordeon edycji zlecenia (view.php) — grupy zwijane, płynne wejście/wyjście ===== */
/* Pozwala animować height:auto (Chrome/Edge/Android ≥129); starsze przeglądarki: zwykłe zwijanie. */
:root { interpolate-size: allow-keywords; }

.acc { margin: .7rem 0; }
.acc-sum {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--txt-inv);
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, transform .06s ease;
}
.acc[open] > .acc-sum { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.acc-sum::-webkit-details-marker { display: none; }
.acc-sum::marker { content: ""; }
.acc-sum::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--txt-inv-2);
  border-bottom: 2px solid var(--txt-inv-2);
  transform: rotate(-45deg);          /* ▸ zamknięte */
  transition: transform .2s ease;
  flex: none;
}
.acc[open] > .acc-sum::before { transform: rotate(45deg); }   /* ▾ otwarte */
.acc-sum:hover { background: var(--ink-3); }
.acc-sum:active { transform: translateY(1px); }
.acc-sum:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* zawartość grupy — animowane height + lekkie wcięcie pod nagłówkiem */
.acc::details-content {
  height: 0;
  overflow: clip;
  transition: height .28s ease, content-visibility .28s ease;
  transition-behavior: allow-discrete;
}
.acc[open]::details-content { height: auto; }
.acc > :not(.acc-sum) { margin-left: .6rem; margin-right: .6rem; }
.acc > .card:first-of-type { margin-top: .6rem; }

@media (prefers-reduced-motion: reduce) {
  .acc::details-content,
  .acc-sum,
  .acc-sum::before { transition: none; }
}

.ta-wrap { position: relative; display: block; }
.ta-results {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 320px;
  overflow-y: auto;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.ta-group {
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--txt-inv-2);
  padding: .4rem .6rem .2rem;
}
.ta-item {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .45rem .6rem;
  cursor: pointer;
  border-top: 1px solid rgba(255, 255, 255, .04);
}
.ta-item:first-child { border-top: 0; }
.ta-item.is-active,
.ta-item:hover { background: var(--blue); }
.ta-item.is-active .ta-item-sub,
.ta-item:hover .ta-item-sub { color: var(--txt-inv); }
.ta-item-title { color: var(--txt-inv); font-size: .92rem; }
.ta-item-sub { color: var(--txt-inv-2); font-size: .78rem; }
.ta-empty { padding: .5rem .6rem; color: var(--txt-inv-2); font-size: .85rem; }

/* Kaskada „nowe zlecenie": lista aut wybranego klienta (+ „Nowe auto") */
.cascade-box { margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cascade-head { flex-basis: 100%; font-size: .78rem; color: var(--txt-2, #8b97a6); margin-bottom: .15rem; }
.cascade-veh { padding: .35rem .6rem; border: 1px solid rgba(120,140,160,.35); border-radius: 5px; background: rgba(120,140,160,.10); color: inherit; font-size: .82rem; cursor: pointer; }
.cascade-veh:hover { border-color: var(--blue, #1e5fd6); }
.cascade-veh.is-active { border-color: var(--blue, #1e5fd6); background: rgba(30,95,214,.20); }
.cascade-veh.cascade-new { border-style: dashed; }

/* ===== Karta przyjęcia pojazdu — formularz w panelu (G1) ===== */
/* Podpis (canvas) widoczny tylko z JS — bez JS zostaje papierowa karta do druku. */
.field-cap { display: block; font-size: .82rem; color: var(--txt-inv-2); margin-bottom: .35rem; }

.fuel-radios { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.fuel-radio { display: inline-flex; align-items: center; gap: .35rem; font-size: .95rem; color: var(--txt-inv); }
/* reset: .action-form input wymusza width:100% i min-height:44px — dla radiów cofamy */
.fuel-radios input[type="radio"] { width: auto; min-height: 0; margin: 0; }

.sig-pad { display: none; }
.js-sig .sig-pad { display: block; }
.sig-canvas {
  display: block;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3 / 1;
  height: auto;
  background: #fff;
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  touch-action: none;
  cursor: crosshair;
}
.sig-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .5rem; }
.sig-actions .hint { margin: 0; }
.sig-svg { display: block; width: 100%; max-width: 600px; height: auto; }
.sig-preview {
  max-width: 280px;
  background: var(--ink);
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  margin: .2rem 0 .6rem;
}

.intake-photos { display: flex; flex-wrap: wrap; gap: .6rem; margin: .2rem 0 .4rem; }
.intake-photo-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.intake-photo { display: block; }
.intake-photo img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
}

/* Wydruk karty (?card=1): podświetlenie wybranego poziomu paliwa + podpis cyfrowy nad linią */
.card-fuel-opt.is-on { background: #14181d; color: #fff; }
.print-sign-box .sig-svg { width: 100%; max-width: 240px; height: 56px; margin: -3.4rem auto .25rem; }

/* ============================================================
   FAZA 2: podpis klienta — wyzwalacz / nakładka near-fullscreen
   ============================================================ */

/* Wyzwalacz / podgląd podpisu (zastępuje inline .sig-pad) */
.sig-trigger {
  display: none; /* schowany bez JS */
  width: 100%;
  max-width: 300px;
  padding: .4rem .6rem;
  background: var(--ink);
  border: 1px dashed var(--ink-3);
  border-radius: var(--r);
  cursor: pointer;
  color: var(--txt-inv-2);
  font-size: .85rem;
  text-align: left;
  transition: border-color .15s;
}
.js-sig .sig-trigger { display: block; }
.sig-trigger:hover,
.sig-trigger:focus-visible { border-color: var(--blue); outline: none; }
.sig-trigger-placeholder { display: block; padding: .8rem 0; text-align: center; }
.sig-trigger-svg { display: block; width: 100%; height: auto; }
.sig-trigger-change {
  display: block;
  font-size: .78rem;
  color: var(--txt-inv-2);
  text-align: center;
  margin-top: .25rem;
}

/* Nakładka — fixed, pokrywa cały viewport */
.sig-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vh 3vw;
  overflow-y: auto;
}
.sig-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  z-index: 0;
}
.sig-overlay-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 860px;
  background: var(--ink);
  border: 1px solid var(--ink-3);
  border-radius: calc(var(--r) * 2);
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sig-overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.sig-overlay-title { font-size: .9rem; color: var(--txt-inv-2); }
.sig-overlay-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--txt-inv-2);
  font-size: 1.25rem;
  line-height: 1;
  padding: .25rem .45rem;
  border-radius: var(--r);
  flex-shrink: 0;
  transition: color .12s;
}
.sig-overlay-close:hover { color: var(--txt-inv); }
.sig-overlay-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Duże pole podpisu — bufor 600×200, rozciągnięty przez CSS (3:1) */
.sig-overlay-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  height: auto;
  background: #fff;
  border-radius: var(--r);
  touch-action: none;
  cursor: crosshair;
}
.sig-overlay-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}

/* Animacja wejścia panelu — pomijana gdy użytkownik preferuje brak ruchu */
@media (prefers-reduced-motion: no-preference) {
  .sig-overlay-panel {
    transform: translateY(20px);
    opacity: 0;
    transition: transform .22s ease, opacity .22s ease;
  }
  .sig-overlay.is-open .sig-overlay-panel {
    transform: none;
    opacity: 1;
  }
}

/* ============================================================
   FAZA 0: fundament parytetu — ikony, kafelki, nagłówki, sheet
   ============================================================ */

/* ---------- .ico — inline MDI SVG (z icon() helpera) ---------- */
.ico {
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  /* width/height przychodzą jako atrybuty inline z icon() — tu fallback */
  width: 1em;
  height: 1em;
}

/* ---------- .brand — wyrównanie logo + tekstu w topbarze ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: .45rem;
}

/* ---------- .tile — szybki kafelek akcji (pulpit, skróty) ---------- */
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: .8rem;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  color: var(--txt-inv);
  text-decoration: none;
  text-align: center;
  transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.tile .ico { color: #6ea0ff; }   /* jak .dash-action svg */
.tile:hover { border-color: var(--blue); background: var(--ink-3); text-decoration: none; }
.tile:active { opacity: .85; transform: translateY(1px); }
.tile:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(30,95,214,.45); }

/* ---------- .tile-grid — 4-kafelkowy rząd szybkich akcji (pulpit FAZA1) ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
  margin: 0 0 1.3rem;
}
.tile-lbl {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-inv-2);
}
/* Przycisk „Nowe zlecenie" — margines + gap na ikonę */
.btn-new-appt { gap: .45rem; margin: 0 0 1.2rem; }
/* Kosztorysy — szeroka karta poniżej siatki KPI */
.kpi--wide { margin: 0 0 1.5rem; }
@media (max-width: 600px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- .pagehead — nagłówek strony (kicker + tytuł + podtytuł) ---------- */
.pagehead { margin: 0 0 1.5rem; }
.pagehead-title {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.15;
  margin: .2rem 0 .15rem;
  color: var(--txt-inv);
}
.pagehead-sub {
  font-size: .88rem;
  color: var(--txt-inv-2);
  margin: 0;
}

/* ---------- .sheet — generyczny bottom-sheet (parytet z apką) ---------- */
/* Poniżej z-index: 50 > .moresheet z-index: 40; moresheet pozostaje niezmienione. */
.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .2s ease;
}
.sheet.is-open .sheet-backdrop { opacity: 1; }
.sheet-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--ink-2);
  border-top: 1px solid var(--ink-3);
  border-radius: 12px 12px 0 0;
  max-height: 88vh;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform .22s ease;
}
.sheet.is-open .sheet-panel { transform: translateY(0); }
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .9rem .6rem;
  border-bottom: 1px solid var(--ink-3);
  margin-bottom: .3rem;
}
.sheet-head-title { font-weight: 700; font-size: 1rem; }
.sheet-close {
  background: none;
  border: 0;
  color: var(--txt-inv-2);
  font-size: 1.1rem;
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sheet-close:hover { color: var(--txt-inv); }
body.panel.sheet-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sheet-backdrop { transition: none; }
  .sheet-panel    { transition: none; }
}

/* ---------- Odznaki statusu kosztorysu (estimate_status) ---------- */
/* Konwencja: rgba bg + tinted text — identyczna z istniejącymi badge-* wyżej */
.badge-szkic       { background: rgba(154,166,178,.16); color: #c2ccd6; border-color: rgba(154,166,178,.4); }
.badge-wyslany     { background: rgba(30,95,214,.18);   color: #9cc0ff; border-color: rgba(30,95,214,.55); }
.badge-zaakceptowany { background: rgba(46,139,87,.18); color: #a8e3c2; border-color: rgba(46,139,87,.55); }
.badge-odrzucony   { background: rgba(196,69,46,.18);   color: #f2b6aa; border-color: rgba(196,69,46,.55); }

/* ============================================================
   Karta pojazdu (faza 4): nagłówki sekcji, kotwica, chipy źródła, sheet-body, wydruk
   ============================================================ */

/* --- Nagłówek sekcji z ikoną --- */
.sect-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.sect-ico { color: #6ea0ff; flex: 0 0 auto; }
.sect-title { font-weight: 700; font-size: 1rem; flex: 1 1 auto; }
.sect-btn { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; }

/* --- Informacja o interwale/terminie w svc-item --- */
.svc-interval-info { font-size: .85rem; color: var(--txt-inv-2); margin: .3rem 0 0; }

/* --- Sekcja kotwicy w formularzach serwisowych --- */
.svc-anchor {
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  padding: .7rem .8rem;
  margin: .4rem 0 .7rem;
  background: var(--ink);
}

/* --- Chipy źródła / segmented-control (radio pills) --- */
.anchor-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.anchor-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .35rem .75rem;
  border: 1px solid var(--ink-3);
  border-radius: 999px;
  font-size: .88rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .13s, background .13s;
  user-select: none;
}
.anchor-chip input[type="radio"] { display: none; } /* wygląd przez label */
/* :has() — Chrome/Safari/Firefox 121+; bez JS klasa .is-active dodawana przez JS */
.anchor-chip:has(input:checked),
.anchor-chip.is-active {
  border-color: var(--blue);
  background: rgba(30,95,214,.18);
  color: #9cc0ff;
}
.anchor-chip:hover { background: var(--ink-3); }
.anchor-chip.is-active:hover { background: rgba(30,95,214,.25); }

/* --- Sheet body (padding wewnątrz .sheet-panel poniżej headera) --- */
.sheet-body {
  padding: .8rem .9rem 1.2rem;
}
.sheet-body .action-form .btn-blue { margin-top: .3rem; }

/* --- Wydruk: logo + nazwa w nagłówku --- */
.print-brand-block {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.print-logo-img { display: block; height: 40px; width: auto; }
.print-logo-icon svg { display: block; }
.print-logo-icon svg path,
.print-logo-icon svg rect { } /* inherits color z body (czarny na białym tle druku) */
.print-svc-status { font-size: .82rem; color: #5a6672; font-style: italic; }

/* ============================================================
   Sterowanie KLAWIATURĄ (keyboard.js) — desktop-only.
   Plakietki skrótów (.kbd-badge) domyślnie ukryte; widoczne tylko
   w trybie peek (przytrzymany Alt). Pasek „Idź do" i ściągawka
   nieaktywne na telefonie. ============================================ */

/* wspólny wygląd „klawisza" (plakietka na elemencie + chipy w pasku/ściągawce) */
.kbd-badge, .kbd-key {
  font: 600 .66rem/1 var(--mono);
  letter-spacing: .02em;
  color: var(--txt-inv);
  background: var(--ink-3);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px;
  padding: .12em .34em;
  white-space: nowrap;
  text-transform: none;
}

/* plakietka doklejana do sterowalnego elementu — ukryta, aż user przytrzyma Alt */
.kbd-badge {
  display: none;
  margin-left: .38em;
  vertical-align: middle;
  pointer-events: none;
}
html.kbd-peek .kbd-badge { display: inline-flex; align-items: center; }

/* chipy w pasku „Idź do" i w ściągawce — zawsze widoczne w swoim kontenerze */
.kbd-key { display: inline-flex; align-items: center; }

/* kursor nawigacji po wierszach listy */
tr.is-kbd-cursor > td { background: rgba(30,95,214,.12); }
tr.is-kbd-cursor > td:first-child { box-shadow: inset 3px 0 0 0 var(--blue); }
.rozl-row.is-kbd-cursor { background: rgba(30,95,214,.12); box-shadow: inset 3px 0 0 0 var(--blue); }
/* sticky topbar (~72px) nie zasłania wiersza, do którego skacze kursor klawiaturą */
tr[data-href], .rozl-row { scroll-margin-top: 84px; }

/* pasek „Idź do" (which-key) — dół ekranu, pod sheetami */
.kbd-whichkey {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .7rem;
  max-width: min(92vw, 900px);
  padding: .55rem .8rem;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
}
.kbd-whichkey-lead {
  font: 700 .72rem/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--txt-inv-2);
  margin-right: .2rem;
}
.kbd-whichkey-item {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font-size: .82rem;
  color: var(--txt-inv);
}

/* ściągawka (#sheet-kbd reużywa .sheet) */
.kbd-cheat-head {
  font: 700 .72rem/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--txt-inv-2);
  margin: .9rem 0 .35rem;
}
.kbd-cheat-head:first-child { margin-top: 0; }
.kbd-cheat-row {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .2rem 0;
}
.kbd-cheat-keys {
  flex: 0 0 5.2rem;
  display: inline-flex;
  gap: .25rem;
  flex-wrap: wrap;
}
.kbd-cheat-desc { color: var(--txt-inv); font-size: .9rem; }

/* wstęp „jak się poruszać" na górze ściągawki */
.kbd-cheat-intro {
  margin: 0 0 .5rem;
  padding: 0 0 .7rem;
  border-bottom: 1px solid var(--ink-3);
  color: var(--txt-inv-2);
  font-size: .84rem;
  line-height: 1.55;
}
.kbd-cheat-intro strong { color: var(--txt-inv); font-family: var(--mono); }

/* rożek „⌨ ?" — stały, dyskretny wskaźnik, że są skróty (klik → ściągawka) */
.kbd-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 44;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font: 600 .82rem/1 var(--mono);
  color: var(--txt-inv);
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 999px;
  padding: .5rem .8rem;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.kbd-fab:hover { background: var(--ink-3); border-color: var(--blue); }

/* powitalny dymek (raz — potem localStorage) */
.kbd-toast {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 46;
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: min(92vw, 470px);
  padding: .7rem .8rem;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  font-size: .88rem;
  color: var(--txt-inv);
}
.kbd-toast-txt { flex: 1 1 auto; }
.kbd-toast-show {
  flex: 0 0 auto;
  font: 600 .8rem/1 var(--font);
  color: #cfe0ff;
  background: rgba(30,95,214,.18);
  border: 1px solid var(--blue);
  border-radius: 4px;
  padding: .4rem .6rem;
  cursor: pointer;
}
.kbd-toast-show:hover { background: rgba(30,95,214,.3); }
.kbd-toast-x {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--txt-inv-2);
  font-size: 1rem;
  line-height: 1;
  padding: .2rem;
}
.kbd-toast-x:hover { color: var(--txt-inv); }

/* info na pulpicie „dostępne sterowanie klawiaturą" (pokazywane tylko z JS na desktopie) */
.kbd-hint-pulpit { display: none; }
html.js-kbd .kbd-hint-pulpit {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: .55rem .8rem;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  color: var(--txt-inv-2);
  font-size: .86rem;
}
.kbd-hint-pulpit button {
  font: 600 .82rem/1 var(--font);
  color: #cfe0ff;
  background: rgba(30,95,214,.18);
  border: 1px solid var(--blue);
  border-radius: 4px;
  padding: .35rem .6rem;
  cursor: pointer;
}
.kbd-hint-pulpit button:hover { background: rgba(30,95,214,.3); }

/* twardy mobile-hide: żadnych plakietek/paska/ściągawki/rożka/dymka/info na telefonie */
@media (max-width: 720px) {
  .kbd-badge, .kbd-key, .kbd-whichkey,
  .kbd-fab, .kbd-toast,
  .kbd-hint-pulpit, html.js-kbd .kbd-hint-pulpit { display: none !important; }
}

/* ── Skan OCR (skan.php) ── */
.ocr-source-btns { display: flex; gap: .6rem; flex-wrap: wrap; margin: .6rem 0; }
.ocr-file-btn { cursor: pointer; }
#ocr-preview-wrap { margin-bottom: .8rem; }
#ocr-preview { max-width: 100%; max-height: 320px; border: 1px solid var(--ink-3); border-radius: var(--r); display: block; }
#ocr-progress { width: 100%; accent-color: var(--blue); height: 10px; border-radius: 5px; margin-bottom: .5rem; }

.ocr-item {
  display: flex; gap: .7rem; align-items: flex-start; flex-wrap: wrap;
  border: 1px solid var(--ink-3); border-radius: var(--r); padding: .7rem .8rem; margin: 0 0 .6rem;
  background: var(--ink);
}
.ocr-item-check { flex: 0 0 auto; padding-top: .55rem; }
.ocr-item-check input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--blue); }
.ocr-item-fields { flex: 1 1 16rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.ocr-item-fields .field { margin: 0; }
.ocr-item-fields label { display: block; font-size: .78rem; color: var(--txt-inv-2); margin-bottom: .3rem; }
.ocr-item-fields input, .ocr-item-fields select {
  width: 100%; min-height: 40px; padding: .45rem .6rem; font-size: .95rem; font-family: var(--font);
  color: var(--txt-inv); background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: var(--r);
}
.ocr-item-fields input:focus, .ocr-item-fields select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,95,214,.35);
}
.ocr-f-kind  { flex: 1 1 8rem; }
.ocr-f-name  { flex: 3 1 12rem; }
.ocr-f-qty   { flex: 1 1 5rem; }
.ocr-f-price { flex: 1 1 9rem; }
.ocr-item-markup-note { margin: .3rem 0 0; }
.ocr-item-badge { flex: 0 0 auto; align-self: flex-start; margin-top: .55rem; }
.ocr-item-raw {
  flex: 1 1 100%; margin: .3rem 0 0; font-family: var(--mono); font-size: .74rem; word-break: break-word;
}