/* System TUKAN: wygląd
   Kolory i font z księgi znaku TUKAN. Spokojna baza (biel, jasny szary, czerń), czerwień Tukan Red
   tylko jako akcent: tam, gdzie jesteś (menu, etap zamówienia). Reakcja od razu przy wciśnięciu. */

@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonty/montserrat-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonty/montserrat-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Kolory z księgi znaku TUKAN: Tukan Red #BE1E2D (tylko akcenty), Tukan Black #1A1A1A,
   biały, jasny szary #F5F5F5 (tło), ciemny szary #666666 (teksty uzupełniające). Font: Montserrat. */
:root {
  --papier: #f5f5f5;
  --powierzchnia: #ffffff;
  --grafit: #1a1a1a;          /* Tukan Black */
  --grafit-2: #666666;        /* ciemny szary z księgi znaku */
  --grafit-3: #8c8c8c;
  --linia: #e4e4e4;
  --linia-mocna: #cfcfcf;
  --czern: #1a1a1a;           /* menu */
  --czerwien: #be1e2d;        /* Tukan Red: wyłącznie akcenty */
  --granat-tekst: #1f4f86;    /* linki i "zamówione" */
  --pomarancz: #c2410c;
  --pomarancz-tlo: #fff1e8;
  --zielen: #23704a;
  --zielen-tlo: #e9f5ee;
  --granat-tlo: #eaf0f7;
  --fiolet: #6b3fa0;
  --fiolet-tlo: #f2ecf9;

  --promien-maly: 6px;
  --promien: 10px;
  --menu: 240px;
  --gora: 56px;
  font: 100%/1.5 "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-feature-settings: "tnum" 0;
  color: var(--grafit);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #141414; --powierzchnia: #1e1e1e; --grafit: #f0f0f0; --grafit-2: #a6a6a6; --grafit-3: #7a7a7a;
    --linia: #2c2c2c; --linia-mocna: #3a3a3a; --czern: #0d0d0d; --granat-tekst: #8fb6e3; --czerwien: #e0414f;
    --pomarancz: #ff9a62; --pomarancz-tlo: #3a2216; --zielen: #6fcf97; --zielen-tlo: #16301f;
    --granat-tlo: #1a2a3c; --fiolet: #c6a4f0; --fiolet-tlo: #2b2138;
  }
}

* { box-sizing: border-box; }
.ramka > div, .naglowek > * { min-width: 0; }
body { margin: 0; min-height: 100vh; }
a { color: var(--granat-tekst); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--granat-tekst); outline-offset: 2px; border-radius: 4px; }
.liczba, td.kw, .kw, .liczby dd, .metka .ile, .macierz td { font-variant-numeric: tabular-nums; }

/* ---------- typografia ---------- */
h1, h2, h3 { margin: 0; color: var(--grafit); }
h1 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
h2 { font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.01em; font-weight: 650; }
h3 { font-size: 0.9375rem; line-height: 1.3; font-weight: 600; }
.drobny { font-size: 0.8125rem; color: var(--grafit-2); letter-spacing: 0.005em; }
.cichy { color: var(--grafit-2); }

/* ---------- układ ---------- */
.ramka { display: grid; grid-template-columns: var(--menu) 1fr; min-height: 100vh;
  background: linear-gradient(to right, var(--czern) var(--menu), transparent var(--menu)); }

.menu {
  position: sticky; top: 0; height: 100vh; background: var(--czern); color: #d9d9d9;
  display: flex; flex-direction: column; padding: 18px 12px; gap: 4px;
}
.znak { display: block; padding: 4px 10px 22px; }
.znak img { width: 150px; height: auto; display: block; margin-left: -10px; }
.menu a {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 16px;
  border-radius: var(--promien-maly); color: #bdbdbd; font-size: 0.9375rem; font-weight: 500;
  transition: background-color 120ms ease-out;
}
.menu a:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; color: #fff; }
.menu a:active { background: rgba(255, 255, 255, 0.1); }
.menu a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.08); font-weight: 600; }
.menu a[aria-current="page"]::before {        /* pasek odblaskowy: tu jesteś */
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 5px; border-radius: 2px; background: var(--czerwien);
}
.menu a.wkrotce { opacity: 0.5; pointer-events: none; }
.menu svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; }
.menu .dol { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 10px; }

.gora {
  position: sticky; top: 0; z-index: 10; height: var(--gora); display: flex; align-items: center; gap: 16px;
  padding: 0 28px; background: rgba(245, 245, 245, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
@media (prefers-color-scheme: dark) { .gora { background: rgba(21, 25, 28, 0.72); border-bottom-color: rgba(255,255,255,.05); } }
.szukaj { flex: 1; max-width: 520px; position: relative; }
.szukaj input {
  width: 100%; height: 36px; border: 1px solid var(--linia); border-radius: 18px; padding: 0 14px 0 36px;
  font: inherit; font-size: 0.9375rem; background: var(--powierzchnia); color: var(--grafit);
}
.szukaj svg { position: absolute; left: 12px; top: 10px; width: 16px; height: 16px; stroke: var(--grafit-3); fill: none; stroke-width: 2; }
.ja { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--grafit-2); }
.awatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--czern); color: #fff; display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
}

.tresc { padding: 28px 28px 64px; max-width: 1240px; }

/* ---------- przyciski ---------- */
.przycisk {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--promien-maly);
  border: 1px solid var(--linia-mocna); background: var(--powierzchnia); color: var(--grafit); font: inherit;
  font-size: 0.9375rem; font-weight: 550; cursor: pointer; transition: transform 100ms ease-out, background-color 120ms;
}
.przycisk:hover { background: var(--papier); text-decoration: none; }
.przycisk:active { transform: scale(0.97); }
.przycisk.glowny { background: var(--grafit); color: var(--powierzchnia); border-color: var(--grafit); }
.przycisk.glowny:hover { background: #333; }

/* ---------- zakładki widoków ---------- */
.naglowek { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.widoki { display: flex; gap: 4px; padding: 3px; background: #e8e8e8; border-radius: 9px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
@media (prefers-color-scheme: dark) { .widoki { background: #252b2f; } }
.widoki a {
  white-space: nowrap; padding: 6px 12px; border-radius: 7px; font-size: 0.875rem; color: var(--grafit-2); font-weight: 500;
  transition: background-color 120ms, transform 100ms;
}
.widoki a:hover { text-decoration: none; color: var(--grafit); }
.widoki a:active { transform: scale(0.97); }
.widoki a[aria-current="true"] { background: var(--powierzchnia); color: var(--grafit); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---------- statusy ---------- */
.status {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap; background: #eef0ec; color: var(--grafit-2);
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s-brak { background: var(--pomarancz-tlo); color: var(--pomarancz); }
.s-zamowione { background: var(--granat-tlo); color: var(--granat-tekst); }
.s-znakowanie { background: var(--fiolet-tlo); color: var(--fiolet); }
.s-gotowe { background: var(--zielen-tlo); color: var(--zielen); }
.s-wyl { background: transparent; color: var(--grafit-3); text-decoration: line-through; }

/* ---------- lista zamówień ---------- */
.lista { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--powierzchnia);
  border: 1px solid var(--linia); border-radius: var(--promien); overflow: hidden; }
.lista th { text-align: left; font-size: 0.8125rem; font-weight: 600; color: var(--grafit-2); padding: 10px 14px;
  border-bottom: 1px solid var(--linia); background: var(--powierzchnia); }
.lista td { padding: 12px 14px; border-bottom: 1px solid var(--linia); vertical-align: middle; font-size: 0.9375rem; }
.lista tr:last-child td { border-bottom: 0; }
.lista tbody tr { cursor: pointer; transition: background-color 100ms; }
.lista tbody tr:hover { background: #fafbf9; }
.lista tbody tr:active { background: #f1f3ef; }
@media (prefers-color-scheme: dark) { .lista tbody tr:hover { background: #222830; } }
.lista .kw, .lista th.kw { text-align: right; white-space: nowrap; }
.lista .numer { font-weight: 600; white-space: nowrap; }
.lista .klient { font-weight: 500; }
.lista .klient small { display: block; color: var(--grafit-2); font-weight: 400; font-size: 0.8125rem; }
.lista tfoot tr { background: var(--papier); }
.lista tfoot td { font-weight: 600; }
.narzut-niski { color: var(--pomarancz); font-weight: 650; }
.pusto { padding: 48px 20px; text-align: center; color: var(--grafit-2); }

/* ---------- zamówienie ---------- */
.zam-glowa { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 20px; }
.zam-glowa .klient-nazwa { font-size: 1.0625rem; margin-top: 6px; }
.zam-glowa .akcje { display: flex; gap: 8px; flex-wrap: wrap; }

.droga { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; }
.droga li { font-size: 0.8125rem; color: var(--grafit-3); padding-top: 12px; position: relative; }
.droga li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 3px; background: var(--linia); }
.droga li.zrobione { color: var(--grafit-2); }
.droga li.zrobione::before { background: var(--grafit-3); }
.droga li.teraz { color: var(--grafit); font-weight: 650; }
.droga li.teraz::before { background: var(--czerwien); }   /* czerwony akcent: tu jest zamówienie */

.liczby { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--powierzchnia);
  border: 1px solid var(--linia); border-radius: var(--promien); margin-bottom: 22px; }
.liczby div { padding: 14px 18px; border-left: 1px solid var(--linia); }
.liczby div:first-child { border-left: 0; }
.liczby dt { font-size: 0.8125rem; color: var(--grafit-2); }
.liczby dd { margin: 2px 0 0; font-size: 1.375rem; font-weight: 650; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.liczby .ostrzezenie dd { color: var(--pomarancz); }
.liczby .ostrzezenie small { display: block; font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--pomarancz); }

.uklad { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.sekcja { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); }
.sekcja > h2 { padding: 14px 18px; border-bottom: 1px solid var(--linia); }
.sekcja + .sekcja { margin-top: 16px; }

.model { padding: 16px 18px; border-bottom: 1px solid var(--linia); }
.model:last-child { border-bottom: 0; }
.model-glowa { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.model-glowa .nazwa { font-weight: 600; }
.model-glowa .kolor { color: var(--grafit-2); }
.model-glowa .wartosc { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.model-glowa .wartosc small { display: block; color: var(--grafit-2); font-size: 0.8125rem; }

/* metki rozmiarów: jak wszywka w odzieży */
.metki { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.metka {
  min-width: 92px; border: 1px solid var(--linia-mocna); border-radius: var(--promien-maly); background: var(--powierzchnia);
  padding: 8px 10px 7px; position: relative; overflow: hidden;
}
.metka::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--linia); }
.metka.s-brak::after { background: var(--pomarancz); }
.metka.s-zamowione::after { background: var(--granat-tekst); }
.metka.s-znakowanie::after { background: var(--fiolet); }
.metka.s-gotowe::after { background: var(--zielen); }
.metka.s-brak, .metka.s-zamowione, .metka.s-znakowanie, .metka.s-gotowe { background: var(--powierzchnia); color: inherit; }
.metka .rozmiar { font-size: 1.0625rem; font-weight: 750; letter-spacing: -0.01em; }
.metka .ile { font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.metka .gdzie { font-size: 0.75rem; color: var(--grafit-2); margin-top: 3px; line-height: 1.3; }
.metka .gdzie.brakuje { color: var(--pomarancz); font-weight: 600; }
.metka .gdzie .zamow { color: var(--granat-tekst); }

.znakowania { margin-top: 12px; display: grid; gap: 6px; }
.znakowanie { display: flex; gap: 10px; align-items: baseline; font-size: 0.875rem; padding: 8px 10px;
  background: var(--fiolet-tlo); border-radius: var(--promien-maly); }
.znakowanie b { color: var(--fiolet); font-weight: 650; white-space: nowrap; }

.boczne dl { margin: 0; padding: 6px 18px 14px; }
.boczne dt { font-size: 0.8125rem; color: var(--grafit-2); margin-top: 10px; }
.boczne dd { margin: 1px 0 0; font-size: 0.9375rem; }
.boczne .tak { color: var(--zielen); font-weight: 600; }

.braki-lista { list-style: none; margin: 0; padding: 4px 18px 14px; }
.braki-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linia); font-size: 0.875rem; }
.braki-lista li:last-child { border-bottom: 0; }

/* ---------- logowanie ---------- */
.logowanie { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--czern); }
.logowanie form { width: min(380px, 100%); background: var(--powierzchnia); border-radius: 14px; padding: 28px 28px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); position: relative; overflow: hidden; }
.logowanie form::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--czerwien); }
.logowanie .logo { width: 170px; height: auto; display: block; margin: 0 0 18px -12px; }
.logowanie h1 { font-size: 1.5rem; margin: 6px 0 4px; }
.logowanie label { display: block; font-size: 0.875rem; font-weight: 550; margin: 16px 0 6px; }
.logowanie input { width: 100%; height: 42px; border: 1px solid var(--linia-mocna); border-radius: var(--promien-maly);
  padding: 0 12px; font: inherit; background: var(--powierzchnia); color: var(--grafit); }
.logowanie .przycisk { width: 100%; justify-content: center; height: 42px; margin-top: 22px; }
.blad { background: var(--pomarancz-tlo); color: var(--pomarancz); padding: 10px 12px; border-radius: var(--promien-maly); font-size: 0.875rem; margin-top: 14px; }

/* ---------- telefon ---------- */
.dolne-menu { display: none; }
@media (max-width: 860px) {
  .ramka { grid-template-columns: 1fr; background: none; }
  .menu { display: none; }
  .gora { padding: 0 16px; }
  .tresc { padding: 18px 16px 96px; }
  h1 { font-size: 1.5rem; }
  .dolne-menu {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(26, 26, 26, 0.88);
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  }
  .dolne-menu a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; color: #bdbdbd; font-size: 0.6875rem; position: relative; }
  .dolne-menu a:hover { text-decoration: none; }
  .dolne-menu a[aria-current="page"] { color: #fff; font-weight: 600; }
  .dolne-menu a[aria-current="page"]::before { content: ""; position: absolute; top: -6px; left: 30%; right: 30%; height: 4px; border-radius: 2px; background: var(--czerwien); }
  .dolne-menu svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }

  .lista thead { display: none; }
  .lista, .lista tbody, .lista tfoot, .lista tr, .lista td { display: block; }
  .lista tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; border-bottom: 1px solid var(--linia); }
  .lista td { padding: 0; border: 0; }
  .lista td.numer { grid-column: 1; font-size: 0.875rem; }
  .lista td.st { grid-column: 2; grid-row: 1; justify-self: end; }
  .lista td.klient { grid-column: 1 / -1; }
  .lista td.netto { grid-column: 1; text-align: left; }
  .lista td.narzut { grid-column: 2; }
  .lista td.zysk, .lista td.data, .lista td.opiekun { display: none; }
  .lista tfoot tr { display: flex; justify-content: space-between; }
  .lista tfoot td.ukryj-tel { display: none; }

  .liczby { grid-template-columns: repeat(2, 1fr); }
  .liczby div:nth-child(3) { border-left: 0; }
  .liczby div:nth-child(n+3) { border-top: 1px solid var(--linia); }
  .uklad { grid-template-columns: 1fr; }
  .droga li { font-size: 0.8125rem; color: transparent; }
  .droga li.teraz { color: var(--grafit); grid-column: span 1; white-space: nowrap; }
  .ja > a:first-child { display: none; }
}

/* ---------- dostępność ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .przycisk:active, .widoki a:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .gora { background: var(--papier); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dolne-menu { background: var(--czern); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --linia: #9aa29c; --grafit-2: #2f373c; }
  .gora { background: var(--papier); border-bottom: 1px solid var(--grafit); }
}

/* ---------- produkty: lista ---------- */
.kafelki { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.kafelek { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); overflow: hidden;
  color: inherit; display: flex; flex-direction: column; transition: transform 100ms ease-out, border-color 120ms; }
.kafelek:hover { text-decoration: none; border-color: var(--linia-mocna); }
.kafelek:active { transform: scale(0.985); }
.kafelek .foto { aspect-ratio: 1 / 1; background: #fafafa; display: grid; place-items: center; border-bottom: 1px solid var(--linia); }
.kafelek .foto img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.kafelek .opis { padding: 12px 14px 14px; display: grid; gap: 4px; flex: 1; }
.kafelek .nazwa { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.kafelek .dol { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 8px; font-size: 0.875rem; }
.kafelek .cena { font-weight: 650; }
.brak-zdjecia { color: var(--grafit-3); font-size: 0.8125rem; display: grid; justify-items: center; gap: 8px; }
.brak-zdjecia img { width: 48px !important; height: auto !important; opacity: 0.18; padding: 0 !important; }
.stan-ok { color: var(--zielen); }
.stan-zero { color: var(--grafit-3); }

.normy { display: flex; flex-wrap: wrap; gap: 6px; }
.norma { font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: #efefef; color: var(--grafit); white-space: nowrap; }
@media (prefers-color-scheme: dark) { .norma { background: #2a2a2a; } }

/* ---------- produkty: karta ---------- */
.karta-glowa { display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 24px; }
.galeria .duze { aspect-ratio: 1 / 1; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien);
  display: grid; place-items: center; overflow: hidden; }
.galeria .duze img { width: 100%; height: 100%; object-fit: contain; padding: 22px; }
.miniatury { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.miniatury button { width: 64px; height: 64px; padding: 4px; border: 1px solid var(--linia); border-radius: var(--promien-maly);
  background: var(--powierzchnia); cursor: pointer; transition: transform 100ms ease-out; }
.miniatury button:active { transform: scale(0.95); }
.miniatury button[aria-pressed="true"] { border-color: var(--grafit); box-shadow: inset 0 -3px 0 var(--czerwien); }
.miniatury img { width: 100%; height: 100%; object-fit: contain; }

.info h1 { font-size: 1.625rem; }
.info .producent { color: var(--grafit-2); margin: 6px 0 12px; font-size: 0.9375rem; }
.info .krotki { margin: 14px 0 0; max-width: 62ch; }
.info .kolory { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.info .kolor-chip { font-size: 0.8125rem; padding: 3px 10px; border: 1px solid var(--linia-mocna); border-radius: 999px; }

.ceny { margin-top: 20px; background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); }
.ceny table { width: 100%; border-collapse: collapse; }
.ceny td:not(:first-child) { white-space: nowrap; }
.karta-glowa > * { min-width: 0; }
.ceny th, .ceny td { padding: 9px 16px; border-bottom: 1px solid var(--linia); font-size: 0.9375rem; text-align: right; }
.ceny th:first-child, .ceny td:first-child { text-align: left; }
.ceny th { font-size: 0.8125rem; font-weight: 600; color: var(--grafit-2); }
.ceny tr:last-child td { border-bottom: 0; }
.ceny .zakup td { background: #fafafa; }
.ceny .glowna td:first-child { font-weight: 650; }
.ceny .waluta { display: block; font-size: 0.75rem; color: var(--grafit-2); }

.macierz-wrap { overflow-x: auto; }
.macierz { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.macierz th { font-size: 0.8125rem; font-weight: 650; color: var(--grafit-2); padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--linia); }
.macierz th:first-child { text-align: left; }
.macierz td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--linia); font-size: 0.9375rem; }
.macierz td:first-child { text-align: left; font-weight: 600; white-space: nowrap; }
.macierz tr:last-child td { border-bottom: 0; }
.macierz .pole { display: inline-grid; min-width: 52px; padding: 6px 8px; border-radius: var(--promien-maly); background: var(--zielen-tlo); color: var(--zielen); font-weight: 650; }
.macierz .pole.zero { background: transparent; color: var(--grafit-3); font-weight: 500; }
.macierz .pole.nisko { background: var(--pomarancz-tlo); color: var(--pomarancz); }
.macierz .brak-war { color: var(--linia-mocna); }
.macierz .suma { font-weight: 650; }

.zakladki { display: flex; gap: 2px; border-bottom: 1px solid var(--linia); padding: 0 10px; overflow-x: auto; }
.zakladki button { font: inherit; font-size: 0.9375rem; font-weight: 550; color: var(--grafit-2); background: none; border: 0;
  padding: 12px 10px 11px; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.zakladki button[aria-selected="true"] { color: var(--grafit); border-bottom-color: var(--czerwien); }
.zakladki button .ile { color: var(--grafit-3); font-weight: 500; margin-left: 4px; }
.panel-z { padding: 18px 20px 22px; }
.panel-z[hidden] { display: none; }
.opis-tekst { max-width: 72ch; }
.opis-tekst h3 { margin: 18px 0 6px; font-size: 1rem; }
.opis-tekst h3:first-child { margin-top: 0; }
.opis-tekst ul { margin: 6px 0 10px; padding-left: 20px; }
.opis-tekst li { margin: 3px 0; }

.dokumenty { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dokumenty li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--linia); border-radius: var(--promien-maly); }
.dokumenty .ikona { width: 36px; height: 44px; border-radius: 4px; background: #f0f0f0; display: grid; place-items: center;
  font-size: 0.625rem; font-weight: 750; color: var(--grafit-2); position: relative; }
.dokumenty .ikona::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--czerwien); border-radius: 0 0 4px 4px; }
.dokumenty .wygasl { color: var(--pomarancz); font-weight: 600; }
.tabela-prosta { width: 100%; border-collapse: collapse; }
.tabela-prosta th, .tabela-prosta td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linia); font-size: 0.9375rem; }
.tabela-prosta th { font-size: 0.8125rem; color: var(--grafit-2); font-weight: 600; }
.tabela-prosta .kw { text-align: right; }
.nieaktualna td { color: var(--grafit-3); }

@media (max-width: 860px) {
  .karta-glowa { grid-template-columns: 1fr; gap: 18px; }
  .kafelki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ceny th, .ceny td { padding: 8px 8px; font-size: 0.8125rem; }
  .ceny th:first-child, .ceny td:first-child { padding-left: 12px; }
  .ceny .waluta { font-size: 0.6875rem; }
}

/* ---------- komunikaty ---------- */
.komunikaty { margin-bottom: 14px; display: grid; gap: 6px; }
.komunikat { margin: 0; padding: 10px 14px; border-radius: var(--promien-maly); background: var(--zielen-tlo); color: var(--zielen); font-weight: 550; font-size: 0.9375rem; }
.komunikat.error { background: var(--pomarancz-tlo); color: var(--pomarancz); }

/* ---------- pulpit ---------- */
.powitanie { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.powitanie p { margin: 6px 0 0; }
.seria { display: grid; justify-items: center; padding: 8px 16px; border-radius: var(--promien); background: var(--powierzchnia);
  border: 1px solid var(--linia); min-width: 96px; }
.seria b { font-size: 1.75rem; line-height: 1; color: var(--czerwien); font-variant-numeric: tabular-nums; }
.seria span { font-size: 0.75rem; color: var(--grafit-2); }
.wyniki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.wynik { background: var(--powierzchnia); border: 1px solid var(--linia); border-radius: var(--promien); padding: 16px 18px; }
.wynik h2 { font-size: 0.875rem; font-weight: 600; color: var(--grafit-2); }
.wynik .duza { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.wynik p { margin: 4px 0 0; }
.plus { color: var(--zielen); font-weight: 600; }
.pasek { display: block; height: 8px; background: #ececec; border-radius: 4px; overflow: hidden; margin-top: 10px; }
.pasek > span { display: block; height: 100%; background: var(--czerwien); border-radius: 4px; transition: width 400ms ease-out; }
.pasek.maly { height: 4px; margin-top: 6px; width: 100%; }
@media (prefers-color-scheme: dark) { .pasek { background: #2c2c2c; } }

.wykres-sekcja { margin-bottom: 16px; }
.wykres { display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; align-items: end; height: 190px; padding: 12px 18px 10px; }
.slupek { display: grid; grid-template-rows: auto 1fr auto; height: 100%; justify-items: center; gap: 4px; }
.slupek .slup { align-self: end; width: 100%; max-width: 56px; min-height: 2px; background: #d9d9d9; border-radius: 4px 4px 0 0; }
.slupek.biezacy .slup { background: var(--grafit); box-shadow: inset 0 3px 0 var(--czerwien); }
.slupek .wartosc { font-size: 0.6875rem; color: var(--grafit-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.slupek .etykieta { font-size: 0.75rem; color: var(--grafit-2); }
.slupek.biezacy .etykieta { color: var(--grafit); font-weight: 650; }

.pulpit-uklad { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pulpit-uklad > div > .sekcja + .sekcja { margin-top: 16px; }
.lista-zadan { list-style: none; margin: 0; padding: 4px 0; }
.lista-zadan li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--linia);
  font-size: 0.9375rem; align-items: baseline; position: relative; }
.lista-zadan li:last-child { border-bottom: 0; }
.lista-zadan li a { font-weight: 600; color: var(--grafit); }
.lista-zadan li span:nth-child(2) { color: var(--grafit-2); }
.lista-zadan .kiedy { font-size: 0.8125rem; color: var(--grafit-2); white-space: nowrap; }
.lista-zadan .zalegle::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--pomarancz); border-radius: 2px; }
.lista-zadan .zalegle .kiedy { color: var(--pomarancz); font-weight: 600; }
.lista-zadan .bez-planu .kiedy { color: var(--granat-tekst); }
.lista-zadan .pusto-lista { display: block; color: var(--grafit-2); }
.stopka-sekcji { padding: 8px 18px 14px; margin: 0; }
.misja-tresc { padding: 12px 18px 16px; }
.misja-tresc p { margin: 0 0 4px; }
.szanse { list-style: none; margin: 0; padding: 4px 0; }
.szanse li { padding: 10px 18px; border-bottom: 1px solid var(--linia); display: grid; gap: 2px; }
.szanse li:last-child { border-bottom: 0; }
.szanse a { font-weight: 600; color: var(--grafit); }

.punkty { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px 18px; }
.punkty-suma { display: grid; justify-items: center; }
.punkty-suma b { font-size: 2.25rem; line-height: 1; font-variant-numeric: tabular-nums; }
.punkty-suma span { font-size: 0.75rem; color: var(--grafit-2); }
.punkty ul { margin: 0; padding-left: 16px; }
.ranking { list-style: none; margin: 0; padding: 0 18px; border-top: 1px solid var(--linia); }
.ranking li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--linia); font-size: 0.9375rem; }
.ranking li.ja { font-weight: 650; }
.ranking li.ja .miejsce { background: var(--czerwien); color: #fff; }
.ranking .miejsce { width: 24px; height: 24px; border-radius: 50%; background: #efefef; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; }
.ranking .przerwa { display: block; text-align: center; color: var(--grafit-3); padding: 2px 0; }
.ranking b { font-variant-numeric: tabular-nums; }
.odznaki { list-style: none; margin: 0; padding: 14px 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.odznaki li { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto auto; column-gap: 10px; align-items: center;
  padding: 10px; border: 1px solid var(--linia); border-radius: var(--promien-maly); }
.odznaki .medal { grid-row: 1 / span 3; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #f0f0f0; }
.odznaki .medal svg { width: 18px; height: 18px; fill: none; stroke: var(--grafit-3); stroke-width: 1.8; }
.odznaki li.zdobyta .medal { background: var(--czern); }
.odznaki li.zdobyta .medal svg { fill: var(--czerwien); stroke: var(--czerwien); }
.odznaki .nazwa { font-weight: 600; font-size: 0.875rem; line-height: 1.2; }
.odznaki li:not(.zdobyta) .nazwa { color: var(--grafit-2); }

/* ---------- klienci ---------- */
.stan-klienta { font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.stan-klienta.aktywny { background: var(--zielen-tlo); color: var(--zielen); }
.stan-klienta.uspiony { background: var(--pomarancz-tlo); color: var(--pomarancz); }
.stan-klienta.nowy { background: var(--granat-tlo); color: var(--granat-tekst); }
.klient-glowa { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.klient-glowa h1 { margin-bottom: 4px; }
.os-czasu { list-style: none; margin: 0; padding: 6px 18px 14px; }
.os-czasu li { position: relative; padding: 10px 0 10px 22px; border-left: 2px solid var(--linia); margin-left: 6px; }
.os-czasu li::before { content: ""; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--powierzchnia); border: 2px solid var(--grafit-3); }
.os-czasu .meta { font-size: 0.8125rem; color: var(--grafit-2); }
.os-czasu .tresc-wpisu { margin: 4px 0 0; white-space: pre-line; }
.os-czasu .dalej { margin-top: 4px; font-size: 0.875rem; color: var(--granat-tekst); }
.dzialanie-glowa { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linia); flex-wrap: wrap; }
.dzialanie-glowa h3 { font-size: 1rem; }
.formularz { padding: 16px 18px; display: grid; gap: 12px; }
.formularz .rzad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.formularz label { display: grid; gap: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--grafit-2); }
.formularz input, .formularz select, .formularz textarea { font: inherit; font-size: 0.9375rem; color: var(--grafit); background: var(--powierzchnia);
  border: 1px solid var(--linia-mocna); border-radius: var(--promien-maly); padding: 8px 10px; }
.formularz textarea { min-height: 84px; resize: vertical; }
.formularz .wybor { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--grafit); }
.formularz .wybor input { width: auto; }
.szybkie { display: flex; gap: 6px; flex-wrap: wrap; }
.szybkie button { font: inherit; font-size: 0.8125rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linia-mocna); background: var(--powierzchnia); cursor: pointer; transition: transform 100ms; }
.szybkie button:active { transform: scale(0.95); }

@media (max-width: 860px) {
  .wyniki { grid-template-columns: 1fr; gap: 10px; }
  .pulpit-uklad { grid-template-columns: 1fr; }
  .wykres { gap: 4px; padding: 10px; height: 150px; }
  .slupek .wartosc { display: none; }
  .lista-zadan li { grid-template-columns: 1fr auto; }
  .lista-zadan li span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .odznaki { grid-template-columns: 1fr; }
  .formularz .rzad { grid-template-columns: 1fr; }
}

.starsze summary { cursor: pointer; padding: 4px 18px 14px; color: var(--granat-tekst); font-size: 0.875rem; font-weight: 550; }
.starsze[open] summary { padding-bottom: 4px; }

/* Plan dostaw */
.przystanki, .kierowca-lista { list-style: none; margin: 12px 0 0; padding: 0; }
.przystanki li { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--linia, #e5e5e5); }
.przystanki li.doreczony, .kierowca-lista li.doreczony { opacity: .6; }
.przystanki li.nieudany, .kierowca-lista li.nieudany { border-left: 3px solid var(--czerwien); padding-left: 8px; }
.eta { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; }
.male-akcje { display: flex; gap: 4px; }
.male-akcje button { min-width: 32px; min-height: 32px; border: 1px solid var(--linia, #ddd); background: transparent; border-radius: 8px; cursor: pointer; color: inherit; }
.wybor { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; }
.kierowca-akcje { display: grid; gap: 8px; margin: 12px 0 20px; }
.przycisk.duzy { min-height: 52px; font-size: 1.05rem; justify-content: center; }
.kierowca-lista li { display: grid; gap: 6px; padding: 16px; margin-bottom: 12px; border-radius: 14px; background: var(--karta, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.kierowca-lista .kg { display: flex; gap: 10px; align-items: baseline; }
.kierowca-przyciski { display: grid; gap: 8px; margin-top: 6px; }
.kierowca-przyciski form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.kierowca-przyciski > .przycisk { justify-content: center; }
.kierowca-przyciski input { flex: 1; min-width: 0; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--linia, #ccc); font: inherit; }
.kierowca-przyciski .przycisk { min-height: 44px; }

/* Realizacja: zakupy i magazyn */
.lista.zwarta td, .lista.zwarta th { padding-top: 8px; padding-bottom: 8px; }
.formularz.poziomo { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.pole-ilosc { width: 80px; text-align: right; min-height: 36px; border: 1px solid var(--linia, #ccc); border-radius: 8px; font: inherit; padding: 0 8px; }
.pole-miejsce { width: 90px; min-height: 36px; border: 1px solid var(--linia, #ccc); border-radius: 8px; font: inherit; padding: 0 8px; text-transform: uppercase; }
.kafelki { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kafel { padding: 14px 16px; border-radius: 14px; background: var(--karta, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.kafel .liczba { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.wiersz-akcji { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--linia, #e5e5e5); }
.kratka { display: inline-block; width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 4px; }
@media print { .ukryj-druk, .gora, .menu, .dolne-menu { display: none !important; } .kompletacja td { font-size: 12pt; } }

/* Raport tygodnia */
.nagrody { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nagroda { padding: 14px 16px; border-radius: 14px; }
.nagroda.zloty { background: linear-gradient(135deg, #f6e7b4, #e8c96a); color: #1a1a1a; }
.nagroda.srebrny { background: linear-gradient(135deg, #eeeeee, #c9c9c9); color: #1a1a1a; }
.nagroda b { display: block; font-size: 1.2rem; margin-top: 4px; }
.cel-wiersz { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(80px, 1fr) 48px; gap: 12px; align-items: center; padding: 8px 0; }
.cel-wiersz .pasek { margin-top: 0; }
.pasek.duzy { position: relative; height: 14px; margin: 10px 0 6px; overflow: visible; }
.pasek.duzy > span { border-radius: 7px; }
.pasek > i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--czern); }
.proc { text-align: right; font-variant-numeric: tabular-nums; }
.top { margin: 0 0 12px; padding-left: 20px; }
.top li { display: list-item; padding: 6px 0; }
.top li > span { display: inline; }
.top li > b { float: right; font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { .pasek > i { background: #f5f5f5; } }
@media (max-width: 640px) { .nagrody { grid-template-columns: 1fr; } .cel-wiersz { grid-template-columns: 1fr 48px; } .cel-wiersz .pasek { grid-column: 1 / -1; grid-row: 2; } }

/* Sekcje z wewnętrznym marginesem (nowe ekrany) */
.sekcja.p { padding: 0 18px 16px; }
.sekcja.p > h2 { margin: 0 -18px 12px; }
.sekcja.p > .dzialanie-glowa:first-child { padding-top: 16px; }
.nagrody + .sekcja, .kafelki + .uklad { margin-top: 16px; }
.nagrody { margin-bottom: 16px; }

/* Oś czasu klienta */
.filtr-osi button { border: 0; background: transparent; font: inherit; color: inherit; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.filtr-osi button[aria-current] { background: var(--powierzchnia, #fff); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 600; }
.os-pelna li.r-mail { border-left-color: #3b6ea5; }
.os-pelna li.r-zamowienie, .os-pelna li.r-oferta { border-left-color: var(--czerwien); }

/* Mapa dostaw */
.mapa-sekcja { overflow: hidden; margin-bottom: 16px; }
.mapa { height: 340px; width: 100%; }
.mapa-opis { padding: 8px 18px 12px; margin: 0; }
@media (max-width: 640px) { .mapa { height: 260px; } }
.ja a { color: inherit; text-decoration: none; }
.ja a:hover { text-decoration: underline; }
.ja form { margin: 0; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--grafit-2); cursor: pointer; text-decoration: underline; }
.raport-importu { white-space: pre-wrap; font-size: 0.8125rem; background: var(--tlo, #f5f5f5); padding: 12px; border-radius: 6px; max-height: 70vh; overflow: auto; }