/* ══════════════════════════════════════════════════════════════════════════
   FAKAP — TOKENY WSPÓLNE (E296)
   
   JEDNO ŹRÓDŁO PRAWDY dla wyglądu wszystkich czterech interfejsów:
   index.html (CRM), kalkulator.html, oferta.html i proof.html.
   
   Powód: do tej pory każdy plik miał własną kopię palety i rozjechały się
   naprawdę — kalkulator jechał na #F5F4F0 i promieniu 10px, oferta na
   #f2f3f1 i 14px, akcent w ofercie był #2E7D0F, gdzie indziej #3F7A00.
   Zmiana koloru marki wymagała edycji w czterech miejscach.
   
   PODŁĄCZENIE — w <head> KAŻDEGO pliku, PRZED jego własnym <style>:
       <link rel="stylesheet" href="fakap-tokens.css">
   Kolejność ma znaczenie: własne reguły pliku mają wygrywać z tokenami,
   a nie odwrotnie.
   
   ZASADA: ten plik zawiera WYŁĄCZNIE zmienne i podłogę dostępności.
   Żadnych reguł dla konkretnych komponentów — te zostają w plikach.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── WARSTWY ────────────────────────────────────────────────────────────
     Strona → panel → element w panelu. Trzy poziomy; przy większej liczbie
     interfejs zaczyna wyglądać na sklejony z kawałków. */
  --bg:#f6f7f5;
  --surface:#ffffff;
  --surface2:#f1f3ef;
  --border:#e4e7e0;
  --border2:#d3d8cb;

  /* ── TEKST ──────────────────────────────────────────────────────────────
     Trzy stopnie i ani jednego więcej. Kontrasty na białym panelu:
     18,6:1 / 7,0:1 / 3,3:1 — wszystkie ponad progiem dla swojej roli. */
  --text:#12140e;
  --text2:#565b4e;
  --text3:#8b9082;

  /* ── AKCENT: DWIE ROLE, KTÓRYCH NIE WOLNO MYLIĆ ────────────────────────
     Marka FAKAP to limonka #8CFF00 (fakap.pl). Na białym tle jako TEKST ma
     kontrast 1,7:1 — nieczytelna. Dlatego:
       --accent / --accent2  → TEKST na jasnym tle (ciemna zieleń)
       --fill / --fill-plaski → WYPEŁNIENIA, zawsze z ciemnym napisem
     Wszystkie warianty trzymają ten sam odcień (~100°) i różnią się tylko
     jasnością — dobierane „na oko" rozjeżdżały się o 20° i wyglądały jak
     dwie różne zielenie obok siebie. */
  --accent:#2E7D0F;            /* drobny tekst, linki — 5,2:1 */
  --accent2:#3C9E14;           /* duże napisy, sumy — 3,5:1  */
  --accent-bg:#eef8e3;
  --brand:#8CFF00;             /* czysty kolor marki — logo, materiały */
  --fill:linear-gradient(100deg,#3FBF12,#7FE52B);
  --fill-plaski:#5FD117;       /* krawędzie, paski, akcent liniowy */
  --na-fill:#0d0d0d;           /* napis NA wypełnieniu */
  --on-accent:#fff;            /* zgodność wstecz ze starym kodem */

  /* ── STATUSY ────────────────────────────────────────────────────────────
     Kolor niesie znaczenie, nie dekorację: te trzy mówią „dobrze / uwaga /
     źle" i nic w interfejsie z nimi nie konkuruje. */
  --green:#1D7A4F;
  --orange:#D4740A;
  --red:#C0392B;
  --soft-green:#eafaf1;  --soft-orange:#fef5e7;  --soft-yellow:#fef3c7;
  --soft-red:#fef2f2;    --soft-warm:#fff8ee;    --soft-warm-border:#f0c67a;
  --soft-purple:#f4ecf7; --soft-purple-border:#c8a2d8; --soft-purple-text:#6C3483;

  /* ── KSZTAŁT I GŁĘBIA ───────────────────────────────────────────────────*/
  --radius:14px;
  --radius-sm:9px;
  --radius-xs:6px;
  --cien-1:0 1px 2px rgba(18,20,14,.04);
  --cien-2:0 4px 16px rgba(18,20,14,.07);
  --cien-3:0 18px 48px rgba(18,20,14,.14);

  --input-bg:#fff;

  /* ── FONT LICZB ─────────────────────────────────────────────────────────
     W kodzie jest ~130 miejsc z `font-family:'DM Mono'`, a ten krój NIGDY
     nie został wgrany — każdy komputer podstawiał swój monospace i ta sama
     kwota wyglądała inaczej u handlowca, na hali i u księgowej.
     Lista dobrana pod CYFRY: te kroje wyraźnie różnicują zero od O
     i jedynkę od siódemki.
     PODMIANA NA WŁASNY KRÓJ: wklej @font-face na końcu tego pliku
     i dopisz jego nazwę na POCZĄTKU listy poniżej. Nic więcej. */
  --font-liczby:'DM Mono','SF Mono','JetBrains Mono','Cascadia Mono',
                'Roboto Mono',ui-monospace,'Menlo','Consolas',monospace;
  --font-tekst:'Outfit',-apple-system,'Segoe UI',system-ui,sans-serif;
}

/* ══ MOTYW CIEMNY ════════════════════════════════════════════════════════
   NIE jest odwróconym jasnym: tło ma ciepły odcień, żeby biel tekstu nie
   wibrowała, a warstwy różnią się mocniej — w ciemności oko gorzej
   rozróżnia bliskie tony. */
html[data-theme="dark"]{
  --bg:#0c0d0b;
  --surface:#171916;
  --surface2:#212420;
  --border:#2e322b;
  --border2:#3d423a;

  --text:#eef0ea;
  --text2:#b0b5a9;
  --text3:#7d8377;

  --accent:#8CFF00;
  --accent2:#8CFF00;
  --accent-bg:#1c2a10;
  --fill:linear-gradient(100deg,#6BE800,#A6FF4D);
  --fill-plaski:#8CFF00;
  --na-fill:#0d0d0d;
  --on-accent:#0d0d0d;

  --green:#3fb67f;  --orange:#eb9950;  --red:#e05d50;
  --soft-green:#16311f;  --soft-orange:#3a2a18;  --soft-yellow:#3a3416;
  --soft-red:#3a1f1d;    --soft-warm:#2e2a17;    --soft-warm-border:#5c4a1e;
  --soft-purple:#2a2038; --soft-purple-border:#5a3f6e; --soft-purple-text:#c9a3e0;

  --input-bg:#242424;
  --cien-1:0 1px 2px rgba(0,0,0,.4);
  --cien-2:0 4px 18px rgba(0,0,0,.5);
  --cien-3:0 20px 56px rgba(0,0,0,.62);

  color-scheme:dark;
}

/* ══ PODŁOGA DOSTĘPNOŚCI ═════════════════════════════════════════════════
   Te trzy rzeczy muszą działać wszędzie, także na stronach, które widzi
   klient (oferta, proof) — dotąd miał je tylko CRM. */

/* Widoczny fokus. Bez niego nie da się pracować klawiaturą, a przy
   wpisywaniu rozmiarówek to najszybsza droga. */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--fill-plaski);
  outline-offset:2px;
  border-radius:var(--radius-xs);
}
:where(input,select,textarea):focus{
  outline:none;
  border-color:var(--fill-plaski);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--fill-plaski) 22%, transparent);
}

/* Wszystkie liczby jednym krojem — patrz --font-liczby wyżej */
:where(.mono,.card-value,.tg-total,.tg-src,.kb-num,.kb-meta,.sub-desc,.kb-count),
[style*="DM Mono"]{
  font-family:var(--font-liczby);
  font-variant-numeric:tabular-nums;
  font-feature-settings:'zero' 1,'ss01' 1;
}

/* Pola wyboru i suwaki w kolorze marki */
input[type="checkbox"],input[type="radio"],input[type="range"]{
  accent-color:var(--fill-plaski);
}

/* Ikony kalendarza i zegara przeglądarka rysuje na czarno — w ciemnym
   motywie znikały i pole wyglądało, jakby nie dało się go otworzyć. */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(1.5);
  cursor:pointer;
}

/* Kto wyłączył animacje w systemie, dostaje interfejs bez animacji.
   To wymóg dostępności, nie preferencja użytkownika. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TELEFON (E199) — 390 px bez poziomego przewijania
   
   Diagnoza na kodzie: 54 tabele, 56 sztywnych `min-width` (do 760 px!),
   17 siatek `minmax(200–340px)` i 30 miejsc z `white-space:nowrap`. Każda
   z tych rzeczy z osobna jest niewinna, razem rozpychają stronę tak, że na
   telefonie trzeba przewijać w bok, żeby zobaczyć kwotę.
   
   ZASADA: nic nie ukrywamy. Na telefonie ta sama treść, tylko ułożona
   w pionie — CRM w kieszeni ma pokazywać komplet, nie okrojoną wersję.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px){

  /* ── ŹRÓDŁO POZIOMEGO PRZEWIJANIA ────────────────────────────────────
     Sztywne `min-width` wpisane w atrybut style rozpychają stronę bardziej
     niż cokolwiek innego. Zdejmujemy je hurtem — układ i tak jest w pionie. */
  [style*="min-width:340px"],[style*="min-width:320px"],[style*="min-width:300px"],
  [style*="min-width:280px"],[style*="min-width:260px"],[style*="min-width:520px"],
  [style*="min-width:560px"],[style*="min-width:600px"],[style*="min-width:640px"],
  [style*="min-width:760px"],[style*="min-width: 340px"],[style*="min-width: 320px"]{
    min-width:0!important;
  }

  /* Siatki wielokolumnowe schodzą do jednej kolumny. `minmax(200px,1fr)`
     przy 390 px potrafi zrobić dwie kolumny po 180 px — nieczytelne. */
  [style*="grid-template-columns"]{ grid-template-columns:1fr!important; }
  .cards{ grid-template-columns:1fr 1fr; gap:9px; }
  .kanban{ grid-template-columns:1fr; }

  /* ── TABELE ──────────────────────────────────────────────────────────
     Przewijamy w poziomie SAMĄ tabelę, nie całą stronę. Pierwsza kolumna
     przykleja się do lewej, żeby przy przewijaniu wiadomo było, czyj to
     wiersz — bez tego kolumna z kwotą traci kontekst. */
  .panel,.card,.modal-body{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table{ min-width:max-content; }
  table.tbl tbody td:first-child,
  .prod-list-table tbody td:first-child{
    position:sticky; left:0; z-index:1; background:var(--surface);
  }

  /* ── CELE DOTYKOWE ───────────────────────────────────────────────────
     Apple i Google zgodnie podają 44 px jako minimum. Przyciski 2×9 px
     w tabelach są nie do trafienia kciukiem w ruchu. */
  .btn,button:not(.modal-x):not(.kb-dots),
  .nav-btn,.crm-subtab,.seg-btn,.chip-f{ min-height:44px; }
  input,select,textarea{
    min-height:44px;
    font-size:16px;   /* poniżej 16 px iOS sam przybliża stronę przy dotknięciu */
  }
  .sub-cb,input[type="checkbox"],input[type="radio"]{ width:22px; height:22px; }

  /* ── NAGŁÓWEK ────────────────────────────────────────────────────────
     Menu jedzie poziomo pod paskiem zamiast łamać go na trzy rzędy. */
  .topbar{ height:auto; padding:9px 12px; gap:8px; flex-wrap:wrap; }
  .nav{ order:3; width:100%; overflow-x:auto; gap:2px; padding-bottom:2px;
        scrollbar-width:none; }
  .nav::-webkit-scrollbar{ display:none; }
  .nav-btn{ white-space:nowrap; padding:9px 13px; }
  .user-box{ font-size:12px; gap:7px; }

  /* ── MODALE ──────────────────────────────────────────────────────────
     Na telefonie okno zajmuje cały ekran — margines po bokach zabierał
     miejsce, a i tak nie było widać, co jest pod spodem. */
  .modal-back{ padding:0; align-items:stretch; }
  .modal{ max-width:100%; width:100%; min-height:100vh; border-radius:0; }
  .modal-head{ position:sticky; top:0; background:var(--surface); z-index:5; }
  .modal-foot{ position:sticky; bottom:0; background:var(--surface); z-index:5;
               padding-bottom:max(14px, env(safe-area-inset-bottom)); }
  #job-modal .modal{ max-width:100%; width:100%; }

  /* ── TREŚĆ ───────────────────────────────────────────────────────────*/
  .page{ padding:14px 11px; }
  .page-title{ font-size:19px; }
  .card-value{ font-size:22px; }
  .filters{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px;
            scrollbar-width:none; }
  .filters::-webkit-scrollbar{ display:none; }

  /* Długie nazwy produktów i klientów łamiemy zamiast rozpychać wiersz */
  .kb-client,.tg-name,.sub-title,.card-label{ overflow-wrap:anywhere; }

  /* Kafelek kanbana: akcje zawsze widoczne — hover na dotyku nie istnieje */
  .kb-dots{ opacity:.6; }
}

/* Bardzo wąskie telefony (iPhone SE, 360 px i mniej) */
@media (max-width: 400px){
  .cards{ grid-template-columns:1fr; }
  .page{ padding:12px 9px; }
  .modal-body{ padding:14px 12px; }
}

/* Telefon położony poziomo: ekran niski, więc nagłówek okna nie może zjadać
   połowy wysokości. */
@media (max-height: 480px) and (orientation: landscape){
  .modal-head{ padding:10px 14px; }
  .modal-head h2{ font-size:15px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   TELEFON — EKRANY PROWADZĄCE (E212)

   Ekrany krok po kroku powstały pod tablet w hali, ale otwiera się je też
   z telefonu. Sztywne `min-width` na przyciskach i wierszach rozpychały je
   poza szerokość ekranu, przez co przy 390 px trzeba było przewijać w bok,
   żeby dosięgnąć „Dalej”.

   Zasada ta sama co przy całej aplikacji: nic nie ukrywamy, wszystko schodzi
   do jednej kolumny i zachowuje dotykowe rozmiary.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px){

  /* Okno prowadzące zajmuje cały ekran — margines po bokach zabierał miejsce
     przy licznikach i przyciskach, a i tak nie było widać, co jest pod spodem. */
  .modal-back[data-ekran]{ padding:0; align-items:stretch; }
  .modal-back[data-ekran] > div{
    width:100%!important; max-width:100%!important;
    min-height:100vh; border-radius:0!important;
    padding:16px 13px!important;
  }

  /* Sztywne szerokości wewnątrz tych ekranów schodzą do zera — układ i tak
     jest pionowy, a to one wymuszały przewijanie w bok. */
  .modal-back[data-ekran] [style*="min-width:220px"],
  .modal-back[data-ekran] [style*="min-width:200px"],
  .modal-back[data-ekran] [style*="min-width:180px"],
  .modal-back[data-ekran] [style*="min-width:170px"],
  .modal-back[data-ekran] [style*="min-width:160px"],
  .modal-back[data-ekran] [style*="min-width:150px"],
  .modal-back[data-ekran] [style*="min-width:130px"],
  .modal-back[data-ekran] [style*="min-width:120px"],
  .modal-back[data-ekran] [style*="min-width:100px"]{ min-width:0!important; }

  /* Rzędy przycisków: pełna szerokość, jeden pod drugim. Przycisk 44 px
     wysokości nadal spełnia minimum dotykowe. */
  .modal-back[data-ekran] .btn{ min-height:46px; }

  /* Rysunek blatu i podgląd nie mogą wypychać kolumny z liczbami */
  .modal-back[data-ekran] svg{ max-width:100%; height:auto; }

  /* Pola liczbowe zostają duże — przy rozmiarówkach to główna czynność */
  .modal-back[data-ekran] input[type="number"]{ font-size:20px; min-height:48px; }
}

/* Bardzo wąskie telefony: liczniki plus/minus i tak muszą być trafialne */
@media (max-width: 400px){
  .modal-back[data-ekran] button[data-mm],
  .modal-back[data-ekran] button[data-kk]{ width:52px!important; height:52px!important; }
  .modal-back[data-ekran] [style*="font-size:38px"],
  .modal-back[data-ekran] [style*="font-size:34px"]{ font-size:28px!important; }
}


/* Numer zlecenia na hali jest klikalny — podkreślenie przy najechaniu mówi
   o tym bez dodatkowego opisu. Na tablecie hover nie działa, więc numer ma
   też powiększone pole dotyku. */
#hala-ekran [onclick^="openJob"]{
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:3px;
  transition:text-decoration-color .15s;
  padding:2px 0;
}
#hala-ekran [onclick^="openJob"]:hover{ text-decoration-color:var(--accent); }


/* ══════════════════════════════════════════════════════════════════════════
   WIDOK TV — ekran na ścianie hali

   Czytany z 3–4 metrów, nikt do niego nie podchodzi. Wszystko większe niż
   w aplikacji, zero elementów, które zapraszają do kliknięcia.
   ══════════════════════════════════════════════════════════════════════════ */
#tv-ekran{ font-size:17px; }
#tv-ekran *{ user-select:none; }
/* Kursor znika po chwili bezruchu — wskaźnik myszy na ekranie ściennym
   wygląda jak usterka */
#tv-ekran{ cursor:none; }

/* Duże telewizory: więcej miejsca, więc i większa czcionka */
@media (min-width: 1800px){
  #tv-ekran{ font-size:20px; }
  #tv-ekran [style*="font-size:26px"]{ font-size:32px!important; }
  #tv-ekran [style*="font-size:30px"]{ font-size:38px!important; }
}
