:root {
  color-scheme: light;
  --bg: #f4f5f7; --panel: #fff; --tekst: #1d2330; --przyglusz: #6a7385; --linia: #dde1e8;
  --panel2: #fafbfc; --hover: #f3f7fd; --btn-hover: #eef1f6; --code: #eef0f4; --chip: #e4ecfa;
  --linia-slaba: #eceff4; --input-bg: #fff; --input-border: #b9c0cd; --link: var(--akcent);
  --ok-bg: #e8f5ec; --ok-br: #b7dfc4; --ok-tx: #14532d; --err-bg: #fdecea; --err-br: #f2b8b0; --err-tx: #7a1d12;
  --akcent: #1f5fbf; --akcent-ciemny: #174a96; --zle: #c0392b; --uwaga: #b9770e; --ok: #1e8449;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--tekst);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
main { max-width: 1250px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 1.5rem; margin: 0 0 12px; }
h2 { font-size: 1.12rem; margin: 0 0 10px; }
h3 { font-size: .95rem; margin: 18px 0 6px; color: var(--przyglusz); text-transform: uppercase; letter-spacing: .03em; }
code { background: var(--code); padding: 1px 5px; border-radius: 4px; word-break: break-all; font-size: .88em; }

.top { background: var(--naglowek, #18233a); color: #fff; display: flex; align-items: center; gap: 24px; padding: 0 20px; min-height: 52px; flex-wrap: wrap; }
.top a { color: #dbe5f7; }
.top .brand { font-weight: 700; font-size: 1.15rem; color: #fff; }
.top nav { display: flex; gap: 6px 18px; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.top nav a, .top .who > *, .top .who a { white-space: nowrap; }
.top .who { flex-shrink: 0; }
.top .who { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.top .who form { margin: 0; }
.rola { background: #2c3d5f; padding: 1px 8px; border-radius: 10px; font-size: .78rem; }
button.link { background: none; border: 0; color: #dbe5f7; cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }

.panel { background: var(--panel); border: 1px solid var(--linia); border-radius: 8px; padding: 18px 20px; margin-bottom: 18px; }
.panel.narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
.panel.bez-marginesu { padding: 0; overflow-x: auto; margin-bottom: 8px; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; border: 1px solid; }
.flash.ok { background: var(--ok-bg); border-color: var(--ok-br); color: var(--ok-tx); }
.flash.err { background: var(--err-bg); border-color: var(--err-br); color: var(--err-tx); }

label { display: block; margin-bottom: 12px; font-weight: 600; font-size: .9rem; }
label.inline { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; margin: 0; }
input:not([type=checkbox]):not([type=file]), select, textarea {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; font-weight: 400;
  border: 1px solid var(--input-border); border-radius: 6px; background: var(--input-bg); color: var(--tekst); }
input:focus, select:focus, textarea:focus { outline: 2px solid #9ec0f5; border-color: var(--akcent); }
textarea { resize: vertical; }
.siatka { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 18px; }
.siatka .szeroka { grid-column: 1 / -1; }

.btn { display: inline-block; padding: 7px 14px; border: 1px solid var(--input-border); border-radius: 6px; background: var(--panel);
  color: var(--tekst); font: inherit; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--btn-hover); text-decoration: none; }
.btn.primary { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.btn.primary:hover { background: var(--akcent-ciemny); }
.przyciski { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form { margin: 0; }
.prawo { margin-left: auto; }

.filtry { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.filtry input[type=search] { width: 280px; margin: 0; }
.filtry select { width: auto; margin: 0; }
.filtry input[type=date] { width: auto; display: inline-block; margin: 0; }
.chip { background: var(--chip); border-radius: 12px; padding: 2px 10px; font-size: .85rem; }

.karty { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.karta { background: var(--panel); border: 1px solid var(--linia); border-radius: 8px; padding: 10px 18px; min-width: 170px; color: var(--tekst); display: flex; align-items: baseline; gap: 10px; }
.karta b { font-size: 1.7rem; }
.karta span { color: var(--przyglusz); }
.karta.zle { border-color: var(--zle); } .karta.zle b { color: var(--zle); }
.karta.uwaga { border-color: var(--uwaga); } .karta.uwaga b { color: var(--uwaga); }
.karta:hover { text-decoration: none; background: var(--panel2); }

.tabela { width: 100%; border-collapse: collapse; }
.tabela th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--przyglusz); padding: 10px 12px; border-bottom: 1px solid var(--linia); background: var(--panel2); }
.tabela td { padding: 9px 12px; border-bottom: 1px solid var(--linia-slaba); vertical-align: top; }
.tabela.klik tbody tr { cursor: pointer; }
.tabela.klik tbody tr:hover { background: var(--hover); }
.tabela.male td, .tabela.male th { padding: 6px 8px; font-size: .88rem; }
.wyszarzone { color: var(--przyglusz); }
.pusto { color: var(--przyglusz); text-align: center; padding: 18px !important; }
.nowrap { white-space: nowrap; }
.maly { font-size: .8rem; color: var(--przyglusz); }

.po-terminie { color: var(--zle); font-weight: 700; }
.wkrotce { color: var(--uwaga); font-weight: 700; }
.status { display: inline-block; padding: 1px 10px; border-radius: 12px; font-size: .82rem; font-weight: 600; background: #e5e8ee; color: #3b4558; }
.s-nowe { background: #e1ecfb; color: #174a96; }
.s-w-toku { background: #fdf0d5; color: #8a5a00; }
.s-wstrzymane { background: #ece3f7; color: #5b3a8c; }
.s-zakończone { background: #dff3e6; color: #14532d; }
.s-anulowane { background: #eee; color: #666; text-decoration: line-through; }
.s-archiwum { background: #333; color: #fff; }

.naglowek { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.naglowek h1 { margin-bottom: 6px; }
.dwie-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .dwie-kolumny { grid-template-columns: 1fr; } }
dl.dane { display: grid; grid-template-columns: 170px 1fr; gap: 6px 12px; margin: 0; }
dl.dane dt { color: var(--przyglusz); } dl.dane dd { margin: 0; }
.tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.pomoc { color: var(--przyglusz); font-size: .88rem; }
.w-linii { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.w-linii select { width: auto; margin: 0; }
.wpis-uwagi { border-top: 1px solid var(--linia); padding: 10px 0 2px; margin-top: 12px; }
.wpis-uwagi .meta { color: var(--przyglusz); font-size: .85rem; margin-bottom: 2px; }
section.panel textarea + .btn { margin-top: 8px; }
.stronicowanie { display: flex; gap: 12px; align-items: center; color: var(--przyglusz); margin-bottom: 20px; }

/* ---- V4: lista produkcyjna, etapy, filtry w nagłówkach ---- */
main.szeroki { max-width: none; }
.podtytul { color: var(--przyglusz); font-weight: 400; font-size: 1.1rem; }
.chipy { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip-s { background: var(--panel); border: 1px solid var(--linia); border-radius: 16px; padding: 3px 12px; color: var(--tekst); font-size: .88rem; }
.chip-s b { margin-left: 4px; }
.chip-s:hover { text-decoration: none; background: var(--hover); }
.chip-s.aktywny { border-color: var(--akcent); background: var(--chip); }

.status.e0 { background: #e5e8ee; color: #3b4558; }
.status.e1 { background: #e1ecfb; color: #174a96; }
.status.e2 { background: #fdf0d5; color: #8a5a00; }
.status.e3 { background: #fbe3d0; color: #8a3d00; }
.status.e4 { background: #ece3f7; color: #5b3a8c; }
.status.e5 { background: #d8f0f2; color: #0e5a63; }
.status.e6 { background: #e3f1d6; color: #2d5a14; }
.status.e7 { background: #dff3e6; color: #14532d; }
.status.e8 { background: #14532d; color: #fff; }
.chip-s.e1 { border-left: 4px solid #174a96; } .chip-s.e2 { border-left: 4px solid #c58a00; }
.chip-s.e3 { border-left: 4px solid #c8590a; } .chip-s.e4 { border-left: 4px solid #7a4fb5; }
.chip-s.e5 { border-left: 4px solid #1b8a97; } .chip-s.e6 { border-left: 4px solid #4c8a24; }
.chip-s.e7 { border-left: 4px solid #1e8449; } .chip-s.e8 { border-left: 4px solid #14532d; }

.przewijana { overflow: auto; max-height: calc(100vh - 250px); }
.tabela.szeroka { min-width: var(--min-szer, 1700px); border-collapse: separate; border-spacing: 0; }
.tabela.szeroka thead { position: sticky; top: 0; z-index: 3; }
.tabela.szeroka thead th { background: var(--panel2); white-space: normal; overflow-wrap: break-word; vertical-align: top; }
.tabela.szeroka thead tr.sortuj th { padding-bottom: 4px; border-bottom: 0; }
.tabela.szeroka thead tr.sortuj a { color: var(--przyglusz); }
.tabela.szeroka thead tr.sortuj th.sort-aktywny a { color: var(--link); }
.tabela.szeroka thead tr.filtry-wiersz th { padding-top: 0; font-weight: 400; text-transform: none; letter-spacing: 0; }
.tabela.szeroka td.nr, .tabela.szeroka th:first-child { position: sticky; left: 0; background: var(--panel); z-index: 2; border-right: 1px solid var(--linia); }
.tabela.szeroka thead th:first-child { background: var(--panel2); z-index: 4; }
.tabela.szeroka tbody tr:hover td.nr { background: var(--hover); }
.filtry-wiersz input, .filtry-wiersz select { margin: 0; padding: 4px 6px; font-size: .82rem; min-width: 90px; }
.zakres-dat { display: flex; flex-direction: column; gap: 3px; }
.zakres-dat label { display: flex; align-items: center; gap: 4px; margin: 0; font-size: .75rem; font-weight: 400; color: var(--przyglusz); text-transform: none; }
.zakres-dat input { min-width: 118px; }
.opis-skrot { max-width: 340px; min-width: 200px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.strzalka { font-size: .7rem; }

.pole-daty { display: flex; gap: 6px; align-items: center; }
.pole-daty input[type=date] { margin: 0; width: auto; }
.maly-btn { padding: 3px 9px; font-size: .8rem; }
table.etapy { border-collapse: collapse; margin-bottom: 12px; }
table.etapy td { padding: 5px 10px 5px 0; }
table.etapy label { margin: 0; font-weight: 400; font-size: .95rem; }
table.etapy .znacznik { width: 26px; height: 26px; text-align: center; color: var(--przyglusz); font-size: .8rem; }
table.etapy tr.zrobione .znacznik { color: var(--ok); font-weight: 700; }
table.etapy tr.zrobione label { font-weight: 600; }

/* ---- V4: marka ---- */
.top .brand { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.top .brand:hover { text-decoration: none; }
.logo-plytka { background: #000; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; padding: 4px 12px; display: flex; align-items: center; }
.logo-plytka img { height: 36px; width: auto; display: block; }
.brand-tekst { display: flex; flex-direction: column; line-height: 1.15; }
.brand-tekst b { font-size: 1.2rem; letter-spacing: .02em; }
.brand-tekst small { font-size: .72rem; color: #b9c6df; font-weight: 400; }
.marka-login { text-align: center; margin-bottom: 18px; }
.logo-tlo { display: inline-block; background: #000; border-radius: 8px; padding: 14px 26px; margin-bottom: 12px; }
.marka-login img { max-height: 80px; max-width: 100%; display: block; }
.marka-login h1 { margin-bottom: 2px; }
.stopka { text-align: center; color: var(--przyglusz); font-size: .8rem; padding: 0 16px 24px; }

/* ---- V5: motyw jasny / ciemny ---- */
.motyw { background: transparent; color: #dbe5f7; border: 1px solid rgba(255,255,255,.35); border-radius: 14px; padding: 2px 11px;
  font: inherit; font-size: .82rem; cursor: pointer; }
.motyw:hover { background: rgba(255,255,255,.12); }
.motyw .m-jasny { display: none; }
html[data-theme="dark"] .motyw .m-jasny { display: inline; }
html[data-theme="dark"] .motyw .m-ciemny { display: none; }
.motyw-float { position: fixed; top: 12px; right: 14px; z-index: 20; }
.motyw-float .motyw { color: var(--tekst); border-color: var(--input-border); background: var(--panel); }

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1319; --panel: #181e27; --panel2: #1d2430; --tekst: #e4e8ee; --przyglusz: #9aa4b5; --linia: #2a3240;
  --hover: #212a37; --btn-hover: #232c3a; --code: #263041; --chip: #22324d; --linia-slaba: #232b37;
  --input-bg: #11161d; --input-border: #3a4455; --link: #7fb0ff;
  --ok-bg: #16301f; --ok-br: #2a5a3a; --ok-tx: #9fe0b5; --err-bg: #3a1a18; --err-br: #7a2f2a; --err-tx: #ffb4ab;
  --zle: #ff7b6b; --uwaga: #e0a040; --ok: #4cc380;
}
html[data-theme="dark"] code { color: #cfd6e4; }
html[data-theme="dark"] .status { background: #2a3342; color: #c4cbd8; }
html[data-theme="dark"] .status.e1 { background: #1d3354; color: #9cc2ff; }
html[data-theme="dark"] .status.e2 { background: #3d3015; color: #f0c36a; }
html[data-theme="dark"] .status.e3 { background: #442a17; color: #f2a46b; }
html[data-theme="dark"] .status.e4 { background: #33284d; color: #c9b0f0; }
html[data-theme="dark"] .status.e5 { background: #17393d; color: #7fd3dd; }
html[data-theme="dark"] .status.e6 { background: #25381a; color: #a9d98a; }
html[data-theme="dark"] .status.e7 { background: #17382a; color: #7fd9a8; }
html[data-theme="dark"] .status.e8 { background: #1f7a47; color: #fff; }
html[data-theme="dark"] .tabela.szeroka td.nr { background: var(--panel); }
html[data-theme="dark"] .tabela.szeroka tbody tr:hover td.nr { background: var(--hover); }
html[data-theme="dark"] .btn.primary { color: #fff; }
html[data-theme="dark"] .chip-s.aktywny { border-color: var(--link); }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6f7a8c; }

/* ---- V6: ukryte filtry, wybór kolumn ---- */
.btn.aktywny { border-color: var(--akcent); color: var(--link); font-weight: 600; }
.filtry-wiersz[hidden] { display: none; }
.aktywne-filtry { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 12px; }
a.chip { color: var(--tekst); border: 1px solid var(--linia); }
a.chip:hover { text-decoration: none; border-color: var(--akcent); }
a.chip.wyczysc { background: transparent; color: var(--link); }
.wybor-kolumn { position: relative; }
.wybor-kolumn > summary { list-style: none; cursor: pointer; user-select: none; }
.wybor-kolumn > summary::-webkit-details-marker { display: none; }
.panel-kol { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 360px; max-width: 90vw;
  background: var(--panel); border: 1px solid var(--linia); border-radius: 8px; padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.kol-siatka-stara { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 10px 0 14px; }
.kol-siatka label { font-size: .88rem; }


/* ---- V7: stała belka, przewijanie samej listy, szczegóły zlecenia ---- */
.top { position: sticky; top: 0; z-index: 40; }
body.strona-listy { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
body.strona-listy .top { flex: 0 0 auto; }
body.strona-listy main { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; padding-bottom: 8px; }
body.strona-listy main > * { flex: 0 0 auto; }
body.strona-listy main > .przewijana { flex: 1 1 auto; min-height: 120px; max-height: none; margin-bottom: 8px; }
body.strona-listy .stopka { display: none; }
body.strona-listy .stronicowanie { margin-bottom: 0; flex-wrap: wrap; }
dl.dane.dane-szerokie { grid-template-columns: 170px 1fr 170px 1fr; }
@media (max-width: 900px) { dl.dane.dane-szerokie { grid-template-columns: 150px 1fr; } }
.blok-naglowek { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.blok-naglowek h3 { margin: 16px 0 6px; }
.blok-tekstu .edycja textarea { min-height: 140px; }
.blok-tekstu .edycja[hidden], .blok-tekstu .widok[hidden], .blok-tekstu button[hidden] { display: none; }
.kto-zmienil { margin-top: 4px; }
.tabela.szeroka td .status { white-space: nowrap; }
.blok-tekstu .edycja .przyciski { margin-top: 8px; }

/* ---- V8: próbki kolorów, blokada edycji, historia przy polach, sekcje, widok mobilny ---- */
.probka-kolor { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-size: .82rem; color: var(--przyglusz); white-space: nowrap; }
.probka-kolor i { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(128,128,128,.7); }
.probki-na-zywo { display: block; min-height: 20px; margin-top: 4px; font-weight: 400; }
.baner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; margin-bottom: 14px; border-radius: 6px;
  background: #fff4d6; border: 1px solid #e3c36a; color: #5c4300; }
html[data-theme="dark"] .baner { background: #3a3015; border-color: #7a6320; color: #f2d98a; }
.baner[hidden] { display: none; }
.nakladka { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.nakladka[hidden] { display: none; }
.okienko { background: var(--panel); color: var(--tekst); border: 1px solid var(--linia); border-radius: 10px; padding: 20px 22px; max-width: 460px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.okienko h2 { margin-top: 0; }
details.hist { margin-top: 8px; font-size: .88rem; }
details.hist > summary { cursor: pointer; color: var(--link); user-select: none; }
.hist-lista { list-style: none; margin: 8px 0 0; padding: 0; border-left: 3px solid var(--linia); }
.hist-lista li { padding: 4px 0 6px 10px; }
.hist-pole { color: var(--przyglusz); } .hist-stara { text-decoration: line-through; color: var(--przyglusz); overflow-wrap: anywhere; white-space: pre-wrap; } .hist-nowa { overflow-wrap: anywhere; white-space: pre-wrap; }
details.hist-pelna > summary { font-size: 1rem; }
.siatka-sekcji { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sekcja { border: 1px solid var(--linia); border-radius: 8px; padding: 4px 16px 12px; background: var(--panel2); }
.sekcja-tytul { font-size: 1rem; margin: 12px 0 0; color: var(--akcent); text-transform: uppercase; letter-spacing: .04em; }
html[data-theme="dark"] .sekcja-tytul { color: var(--link); }
.blok-tekstu .edycja input[type=text] { margin-bottom: 4px; }
.przewijana-pozioma { overflow-x: auto; }
.baner-edycja { background: #e8f1ff; border-color: #9dbbea; color: #123a73; }
html[data-theme="dark"] .baner-edycja { background: #182a47; border-color: #34578f; color: #b9d3ff; }
.tabela.klik a { font-weight: 600; }

@media (max-width: 900px) { .siatka-sekcji { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  body { font-size: 16px; }
  main { padding: 12px 10px 40px; }
  h1 { font-size: 1.3rem; }
  .top { gap: 6px 12px; padding: 6px 10px; }
  .top .brand { padding: 2px 0; }
  .logo-plytka { padding: 3px 8px; } .logo-plytka img { height: 26px; }
  .brand-tekst small { display: none; }
  .top nav { order: 3; flex: 1 0 100%; gap: 6px 14px; padding-bottom: 2px; }
  .top .who { margin-left: auto; flex-wrap: wrap; gap: 6px 10px; font-size: .82rem; }
  .top .who .rola { display: none; }
  .panel { padding: 12px; }
  dl.dane, dl.dane.dane-szerokie { grid-template-columns: 110px 1fr; }
  .filtry { gap: 8px; }
  .filtry input[type=search] { width: 100%; flex: 1 0 100%; }
  .btn { padding: 9px 14px; }
  .maly-btn { padding: 6px 11px; }
  .naglowek { flex-direction: column; }
  .przyciski { width: 100%; }
  input:not([type=checkbox]):not([type=file]), select, textarea { font-size: 16px; }
  .pole-daty { flex-wrap: wrap; }
  table.etapy td { padding: 6px 8px 6px 0; }
  .chipy { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .chip-s { white-space: nowrap; }
  body.strona-listy { height: auto; overflow: visible; display: block; }
  body.strona-listy main { display: block; }
  body.strona-listy main > .przewijana { overflow: visible; min-height: 0; }
  body.strona-listy .stopka { display: block; }
  body.strona-listy main { padding-bottom: 4px; }
  .stronicowanie .pomoc { display: none; }
  .panel-kol { position: fixed; left: 10px; right: 10px; top: 80px; width: auto; max-width: none; max-height: 75dvh; overflow: auto; }
  .kol-siatka { grid-template-columns: 1fr; }
  .okienko .przyciski .btn { flex: 1 0 100%; text-align: center; }
}

/* ---- V8: lista jako karty na telefonie ---- */
.tylko-mobile { display: none; }
@media (max-width: 700px) {
  .tylko-mobile { display: block; width: 100%; margin: 0; }
  .przewijana { border: 0; background: transparent; }
  .tabela.szeroka { min-width: 0 !important; width: 100%; display: block; }
  .tabela.szeroka thead { display: none; }
  .tabela.szeroka tbody { display: block; }
  .tabela.szeroka tbody tr { display: block; background: var(--panel); border: 1px solid var(--linia); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
  .tabela.szeroka tbody td, .tabela.szeroka td.nr { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; position: static; border: 0; padding: 3px 0; background: transparent; }
  .tabela.szeroka td::before { content: attr(data-label); color: var(--przyglusz); font-size: .78rem; text-transform: uppercase; flex: 0 0 38%; }
  .tabela.szeroka td.nr { font-size: 1.15rem; padding-bottom: 6px; border-bottom: 1px solid var(--linia-slaba); margin-bottom: 4px; }
  .tabela.szeroka td.pusta { display: none; }
  .tabela.szeroka td > * { text-align: right; }
  .opis-skrot { max-width: none; min-width: 0; }
  .tabela.szeroka tbody tr.pusto-wiersz, .tabela.szeroka td.pusto { display: block; }
  .tabela.szeroka td.pusto::before { content: none; }
}

/* ---- V11: panel kolumn (kolejność + szerokość), wiadomości, pole koloru ---- */
.panel-kol { width: 470px; }
.kol-lista { margin: 10px 0 14px; max-height: 55vh; overflow-y: auto; border: 1px solid var(--linia); border-radius: 6px; }
.kol-wiersz { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--linia); background: var(--panel); }
.kol-wiersz:last-child { border-bottom: 0; }
.kol-wiersz[draggable=true] { cursor: grab; }
.kol-nazwa { flex: 1 1 auto; font-size: .88rem; }
.kol-stala { color: var(--przygaszony, #777); }
.kol-ruch { display: inline-flex; gap: 2px; }
.kol-ruch .btn { padding: 1px 7px; }
.kol-szer { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; }
.kol-szer input[type=number] { width: 70px; padding: 3px 5px; }
.kol-szer input[type=number]:disabled { opacity: .45; }

.kto-menu { position: relative; }
button.uzytkownik-nazwa { background: none; border: 1px solid transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; padding: 3px 8px; border-radius: 6px; }
button.uzytkownik-nazwa:hover { border-color: currentColor; }
.kto-licznik { display: inline-block; min-width: 1.4em; padding: 0 5px; margin-left: 3px; border-radius: 9px; background: #2e9e4f; color: #fff; font-size: .75rem; text-align: center; }
.kto-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 320px; max-width: 92vw; max-height: 70vh; overflow-y: auto;
  background: var(--panel); color: var(--tekst, inherit); border: 1px solid var(--linia); border-radius: 8px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.kto-lista[hidden] { display: none; }
.kto-tytul { font-weight: 700; margin-bottom: 8px; }
.kto-osoba { padding: 7px 0; border-top: 1px solid var(--linia); }
.kto-osoba:first-of-type { border-top: 0; }
.kto-imie { font-weight: 600; margin-bottom: 4px; }
.kto-imie::first-letter { color: #2e9e4f; }
.kto-form { display: flex; gap: 6px; margin: 0; }
.kto-form input { flex: 1 1 auto; min-width: 0; }
.kto-status { font-size: .78rem; min-height: 1em; opacity: .8; }
.wiad-okna { position: fixed; right: 14px; bottom: 14px; z-index: 120; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 28px)); }
.wiad-karta { background: var(--panel); color: var(--tekst, inherit); border: 2px solid var(--akcent); border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.4); }
.wiad-od { font-size: .8rem; opacity: .8; margin-bottom: 4px; }
.wiad-tresc { font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; overflow-wrap: anywhere; white-space: pre-wrap; }

.kolor-pole { display: flex; flex-direction: column; gap: 6px; }
.kolor-rodzaje { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.kolor-wpis { display: flex; align-items: center; gap: 6px; }
.kolor-przedrostek { font-weight: 700; white-space: nowrap; }
.kolor-przedrostek[hidden] { display: none; }
.kolor-numer { flex: 1 1 auto; min-width: 0; }
@media (max-width: 700px) {
  .kol-wiersz { flex-wrap: wrap; }
  .panel-kol { width: 92vw; }
  .kto-lista { position: fixed; left: 8px; right: 8px; top: 56px; width: auto; max-width: none; }
}

/* V11: szerokości kolumn */
.szerokosci-panel .kol-szer { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.szerokosci-panel .kol-szer input[type=number] { width: 78px; margin: 0; padding: 4px 6px; text-align: right; }
.szerokosci-panel .kol-nazwa { flex: 1 1 auto; font-size: .9rem; }
.tabela thead th .rozm { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; touch-action: none; z-index: 5; }
.tabela thead th .rozm::after { content: ""; position: absolute; top: 20%; bottom: 20%; left: 4px; width: 1px; background: var(--linia); }
.tabela thead th .rozm:hover::after, body.zmiana-szer .tabela thead th .rozm::after { background: #4a82dc; width: 3px; left: 3px; top: 0; bottom: 0; }
.tabela thead tr.sortuj th[draggable=true] { cursor: grab; }
.tabela thead th.ciagnieta { opacity: .45; }
.tabela thead th.cel-lewo { box-shadow: inset 3px 0 0 #4a82dc; }
.tabela thead th.cel-prawo { box-shadow: inset -3px 0 0 #4a82dc; }
body.zmiana-szer { cursor: col-resize; user-select: none; }
@media (max-width: 700px) { .tabela thead th .rozm { display: none; } }
.tabela thead th:not(:first-child) { position: relative; }
.szerokosci-panel .panel-kol { left: auto; right: 0; width: 440px; max-height: 70vh; overflow-y: auto; }
@media (max-width: 700px) { .szerokosci-panel { display: none; } }

/* V11: zakładka „Kolumny” – pasek wyboru + wiersz sterowania nad kolumnami */
.pasek-kolumn { background: var(--panel); border: 1px solid var(--linia); border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.pasek-kolumn[hidden], .ster-wiersz[hidden] { display: none; }
.kopia-ukladu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kopia-ukladu select { min-width: 12em; }
.kopia-ukladu label.inline { white-space: nowrap; }
.kopia-ukladu .rozdziel { margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--linia); font-weight: 600; }
.kol-checki { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 10px; }
.pasek-kolumn .przyciski { display: flex; flex-wrap: wrap; gap: 8px; }
.tabela.szeroka thead tr.ster-wiersz th { padding: 4px 6px; background: var(--panel2); font-weight: 400; text-transform: none; border-bottom: 0; }
.ster { display: flex; flex-wrap: nowrap; gap: 2px; }
.ster .maly-btn { padding: 1px 5px; font-size: .74rem; line-height: 1.3; min-width: 22px; }
.ster .maly-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 700px) { .ster-wiersz, #przycisk-kolumn, .pasek-kolumn { display: none !important; } }

/* V11: rozmowa */
.wiad-okna { align-items: flex-end; }
.wiad-karta { position: relative; cursor: pointer; width: 340px; max-width: 100%; padding-right: 34px; }
.wiad-podp { font-size: .75rem; opacity: .7; }
.wiad-tresc { margin-bottom: 4px; }
.rozm-x { background: none; border: 0; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 6px; opacity: .7; }
.rozm-x:hover { opacity: 1; }
.wiad-x { position: absolute; top: 6px; right: 6px; }
.rozm-okno { width: 340px; max-width: 100%; background: var(--panel); color: var(--tekst, inherit); border: 1px solid var(--linia); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.4); display: flex; flex-direction: column; overflow: hidden; }
.rozm-gora { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 8px 14px; background: var(--panel2); border-bottom: 1px solid var(--linia); }
.rozm-tresc { height: 260px; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.rozm-bab { max-width: 82%; padding: 6px 10px; border-radius: 12px; overflow-wrap: anywhere; }
.rozm-bab.moja { align-self: flex-end; background: var(--akcent); color: #fff; border-bottom-right-radius: 3px; }
.rozm-bab.obca { align-self: flex-start; background: var(--panel2); border: 1px solid var(--linia); border-bottom-left-radius: 3px; }
.rozm-txt { white-space: pre-wrap; }
.rozm-czas { font-size: .68rem; opacity: .7; text-align: right; margin-top: 2px; }
.rozm-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--linia); margin: 0; }
.rozm-form input { flex: 1 1 auto; min-width: 0; margin: 0; }
.rozm-blad { color: #c0392b; font-size: .8rem; padding: 0 10px; }
.rozm-blad:empty { display: none; }
.kto-osoba-btn { display: flex; width: 100%; justify-content: space-between; align-items: center; background: none; border: 0; border-top: 1px solid var(--linia); color: inherit; font: inherit; padding: 9px 4px; cursor: pointer; text-align: left; }
.kto-osoba-btn:first-child { border-top: 0; }
.kto-osoba-btn:hover { background: var(--panel2); }
.kto-napisz { font-size: .8rem; opacity: .7; }
@media (max-width: 700px) { .wiad-okna { right: 8px; left: 8px; max-width: none; } .rozm-okno, .wiad-karta { width: 100%; } .rozm-tresc { height: 40vh; } }

/* V11: O programie, Pomoc */
.o-programie { max-width: 640px; margin-left: auto; margin-right: auto; }
.o-logo { margin-bottom: 14px; }
.o-logo .logo-tlo { display: inline-block; padding: 10px 18px; border-radius: 8px; background: #000; }
.o-logo img { height: 64px; display: block; }
.stopka a { color: inherit; text-decoration: underline; }
.samouczek { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.samouczek nav.spis { position: sticky; top: 70px; background: var(--panel); border: 1px solid var(--linia); border-radius: 8px; padding: 12px 14px; }
.samouczek nav.spis a { display: block; padding: 4px 0; font-size: .92rem; }
.samouczek section { background: var(--panel); border: 1px solid var(--linia); border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; scroll-margin-top: 70px; }
.samouczek section h2 { margin-top: 0; }
.samouczek ol, .samouczek ul { padding-left: 22px; margin: 6px 0 10px; }
.samouczek li { margin-bottom: 4px; }
.samouczek .wskazowka { background: var(--panel2); border-left: 4px solid var(--akcent); padding: 8px 12px; border-radius: 4px; margin: 10px 0; }
.samouczek table { border-collapse: collapse; margin: 8px 0; width: 100%; }
.samouczek th, .samouczek td { border: 1px solid var(--linia); padding: 5px 9px; text-align: left; font-size: .92rem; vertical-align: top; }
.samouczek kbd { background: var(--code); border: 1px solid var(--linia); border-radius: 4px; padding: 0 5px; font-size: .85em; }
@media (max-width: 800px) { .samouczek { grid-template-columns: 1fr; } .samouczek nav.spis { position: static; } }

/* V13: kopiowanie zlecenia (dwa ekrany obok siebie) */
.kopia { max-width: 1250px; }
.kopia-wiersz { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); gap: 0 12px; align-items: stretch; padding: 8px 10px; border-bottom: 1px solid var(--linia); background: var(--panel); }
.kopia-wiersz:nth-of-type(even) { background: var(--panel2); }
.kopia-glowa { border: 1px solid var(--linia); border-radius: 8px 8px 0 0; background: var(--panel2) !important; align-items: center; }
.kopia-etykieta { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--przyglusz); margin-bottom: 3px; }
.kopia-wartosc { padding: 7px 9px; border: 1px dashed var(--linia); border-radius: 6px; min-height: 36px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel); }
.kopia-wartosc.dluga { max-height: 180px; overflow-y: auto; }
.kopia-srodek { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.kopia-prawo input:not([type=checkbox]):not([type=radio]), .kopia-prawo select, .kopia-prawo textarea { margin-top: 0; }
.kopia-strzalka { min-width: 60px; font-size: 1.1rem; }
.kopia-x { min-width: 60px; color: #c0392b; }
.kopia-duza { font-size: 1.7rem; line-height: 1; padding: 8px 16px; display: flex; flex-direction: column; align-items: center; width: 100%; }
.kopia-duza span, .kopia-glowa .kopia-x span { font-size: .68rem; font-weight: 400; display: block; }
.kopia-glowa .kopia-x { width: 100%; padding: 4px 8px; display: flex; flex-direction: column; align-items: center; font-size: 1.1rem; }
.kopia-numery .kopia-pola-gora { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 12px; }
.kopia-numery label { margin-bottom: 4px; }
.kopia-brak { color: var(--przyglusz); font-size: .88rem; align-self: center; }
.kopia-plik .kopia-nazwa { overflow-wrap: anywhere; font-weight: 600; }
.kopia-status { color: #2e9e4f; font-weight: 600; }
.kopia-dol { margin-top: 16px; }
@media (max-width: 800px) {
  .kopia-wiersz { grid-template-columns: 1fr; gap: 6px 0; }
  .kopia-srodek { flex-direction: row; justify-content: flex-start; }
  .kopia-glowa { position: static; }
  .kopia-duza { width: auto; flex-direction: row; gap: 8px; }
  .kopia-glowa .kopia-x { width: auto; }
}

/* V14: zamknięte zlecenie, uwagi poprodukcyjne, serwis */
.baner-zamkniete { background: var(--panel2); border: 1px solid var(--linia); border-left: 4px solid #8a6d00; border-radius: 6px; padding: 10px 14px; margin-bottom: 14px; }
.serwis-tabela td.znacznik { text-align: right; font-weight: 600; width: 3em; }
.serwis-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.serwis-form .szeroka { grid-column: 1 / -1; }
.serwis-form button[type=submit] { justify-self: start; }