/* =====================================================================
   Tablejar – ciepła paleta v3 (2026-10-19)
   Baza: produkcyjny palette-warm.css (v2 + poprawki zespołu: color-scheme wg motywu, accent-color, a:not([class]), select w #feedback).
   Nowe w v3: sekcja „Natywne kontrolki” i opcjonalny wariant data-accent-style="ink" (odporny na wymuszone przyciemnianie). Opis: tablejar-odpowiedz-v3.md
   Przełączalna: <html data-palette="warm">. Bez atrybutu działa obecna paleta.
   Kontrasty (WCAG 2.x) w _docs/archiwum/tablejar-odpowiedz-v2.md. Plik ladowany tylko przy wlaczonej palecie (bs_palette() w common/_bs_helpers.php).
   Nazwy zmiennych zgodne z app.css + nowe: --border-strong, --accent-border,
   --link, --ok, --ok-bg, --ok-text, --warn-border, --focus, --chip, --seen-bg,
   --seen-text, --over, --disabled-bg, --disabled-text.
   ===================================================================== */

/* Skala miodu (do dobierania kolejnych odcieni, nie „na oko”) */
:root {
  --honey-50: #fdf8ec; --honey-100: #fdf0d5; --honey-200: #fbe0a6; --honey-300: #f7cb6e;
  --honey-400: #f5b942; --honey-500: #f0ad2e; --honey-600: #c98a12; --honey-700: #8f5b00;
  --honey-800: #6b4400; --honey-900: #3a2c12;
}

/* ---------- JASNY ---------- */
:root[data-palette="warm"] {
  /* color-scheme zalezy od wybranego motywu (ponizej): auto = light dark (telefon decyduje), reczny jasny/ciemny = bez zmiany; patrz uwaga w tablejar-odpowiedz-v2.md pkt 2.4 */
  --bg: #faf7f2; --card: #ffffff; --text: #1f1a14; --muted: #6b6257;
  --line: #ebe4d9;            /* tylko separator */
  --border-strong: #948876;   /* granice kontrolek: kratki, pola, ghost */
  --accent: #f0ad2e; --accent-text: #1f1a14;
  --accent-border: #8f5b00;   /* obwódka zaznaczonej kratki / „moja pozycja” (miód na białym ma tylko 1,96:1) */
  --link: #8f5b00;
  --ok: #0f766e; --ok-bg: #e3f3f0; --ok-text: #0b5c55;
  --warn-bg: #fdebe1; --warn-text: #9a3412; --warn-border: #c2410c;
  --amber: #c2410c;           /* zgodność wsteczna: --amber = obwódka ostrzeżenia (niezapisane, nieopłacone) */
  --err: #b42318;
  --owe: #6d28d9;
  --tag: #fdf0d5; --tag-text: #7a4d00;
  --focus: #8f5b00;
  --chip: #f1ebe1;
  --seen-bg: #e7e0d5; --seen-text: #1f1a14;
  --over: #8f5b00;
  --disabled-bg: #ebe4d9; --disabled-text: #8a8174;
}

:root[data-palette="warm"]:not([data-theme]) { color-scheme: light dark; }
:root[data-palette="warm"][data-theme="light"] { color-scheme: light; }
:root[data-palette="warm"][data-theme="dark"] { color-scheme: dark; }

/* ---------- CIEMNY (ręcznie wybrany) ---------- */
:root[data-palette="warm"][data-theme="dark"] {
  --bg: #14110d; --card: #1e1a15; --text: #f3eee6; --muted: #a89f92;
  --line: #342c22; --border-strong: #7a6d5c;
  --accent: #f5b942; --accent-text: #201605; --accent-border: #f5b942;
  --link: #f5b942;
  --ok: #2dd4bf; --ok-bg: #12302b; --ok-text: #7ee6d8;
  --warn-bg: #3d1f12; --warn-text: #fdba8c; --warn-border: #fb8a4e; --amber: #fb8a4e;
  --err: #f97066;
  --owe: #c4b5fd;
  --tag: #3a2c12; --tag-text: #ffd88a;
  --focus: #f5b942;
  --chip: #2c261e;
  --seen-bg: #3a3329; --seen-text: #f3eee6;
  --over: #f5b942;
  --disabled-bg: #2c261e; --disabled-text: #7a7064;
}

/* ---------- CIEMNY (zgodnie z telefonem) ---------- */
@media (prefers-color-scheme: dark) {
  :root[data-palette="warm"]:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #14110d; --card: #1e1a15; --text: #f3eee6; --muted: #a89f92;
    --line: #342c22; --border-strong: #7a6d5c;
    --accent: #f5b942; --accent-text: #201605; --accent-border: #f5b942;
    --link: #f5b942;
    --ok: #2dd4bf; --ok-bg: #12302b; --ok-text: #7ee6d8;
    --warn-bg: #3d1f12; --warn-text: #fdba8c; --warn-border: #fb8a4e; --amber: #fb8a4e;
    --err: #f97066;
    --owe: #c4b5fd;
    --tag: #3a2c12; --tag-text: #ffd88a;
    --focus: #f5b942;
    --chip: #2c261e;
    --seen-bg: #3a3329; --seen-text: #f3eee6;
    --over: #f5b942;
    --disabled-bg: #2c261e; --disabled-text: #7a7064;
  }
}

/* =====================================================================
   Zmiany reguł potrzebne, żeby nowe zmienne zadziałały.
   Wszystkie ograniczone do data-palette="warm", więc obecna paleta działa bez zmian.
   ===================================================================== */

/* Kontrolki: mocna granica zamiast --line (WCAG 1.4.11, min. 3:1) */
:root[data-palette="warm"] input[type=text], :root[data-palette="warm"] input[type=email], :root[data-palette="warm"] select, :root[data-palette="warm"] textarea,
:root[data-palette="warm"] .itemrow select, :root[data-palette="warm"] .closelist select, :root[data-palette="warm"] .actas select, :root[data-palette="warm"] .loginform input[type=email], :root[data-palette="warm"] .reportbar textarea {
  border-color: var(--border-strong, var(--line));
}
:root[data-palette="warm"] .claimbtn .tick { border-color: var(--border-strong, var(--line)); }
:root[data-palette="warm"] .claimitem.mine { border-color: var(--accent-border, var(--accent)); }
:root[data-palette="warm"] .claimitem.mine .tick { background: var(--accent); border-color: var(--accent-border, var(--accent)); color: var(--accent-text); }
:root[data-palette="warm"] .btn.ghost, :root[data-palette="warm"] .stepbtn { border-color: var(--border-strong, var(--line)); }

/* Fokus: jeden wspólny pierścień, widoczny na każdym tle */
:root[data-palette="warm"] :focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
:root[data-palette="warm"] input[type=text]:focus { outline-color: var(--focus, var(--accent)); }

/* Nieaktywne */
:root[data-palette="warm"] .btn:disabled, :root[data-palette="warm"] .btn[aria-disabled="true"] { background: var(--disabled-bg, var(--line)); color: var(--disabled-text, var(--muted)); cursor: default; }

/* Ostrzeżenia: inna barwa niż akcent + ikona (kolor nigdy nie jest jedynym sygnałem) */
:root[data-palette="warm"] .warn { border: 1px solid var(--warn-border, transparent); }
:root[data-palette="warm"] .warn::before { content: "⚠\FE0E  "; font-weight: 700; }
:root[data-palette="warm"] .itemrow.unsaved input[type=text] { border-color: var(--warn-border, var(--amber)); border-style: dashed; border-width: 2px; }
:root[data-palette="warm"] .claimsummary .unclaimed { color: var(--warn-text); }
:root[data-palette="warm"] .claimsummary .allclaimed { color: var(--ok, var(--accent)); }

/* Linki i teksty akcentowe na tle */
:root[data-palette="warm"] .accountlink a, :root[data-palette="warm"] .why summary:hover { color: var(--link, var(--accent)); }

/* Sukces: opłacone / rozliczone / „dostajesz” */
:root[data-palette="warm"] .paystate.st-paid .paytitle { color: var(--ok, var(--accent)); }
:root[data-palette="warm"] .mybal.get, :root[data-palette="warm"] .mybal.ok { color: var(--ok, var(--accent)); }
:root[data-palette="warm"] .mybal.owe { color: var(--owe); }

/* Pasek płatności: tor = --line, wypełnienie wg stanu */
:root[data-palette="warm"] .paybar span { border-top-color: var(--ok, var(--accent)); }
:root[data-palette="warm"] .paystate.st-unpaid .paybar span, :root[data-palette="warm"] .paystate.st-partial .paybar span { border-top-color: var(--warn-border, var(--amber)); }
:root[data-palette="warm"] .paystate.st-overpaid .paybar span { border-top-color: var(--over, var(--accent)); }
:root[data-palette="warm"] .paystate.st-paid { border-color: var(--ok, var(--line)); }

/* Chipy uczestników */
:root[data-palette="warm"] .chip { background: var(--chip, var(--line)); color: var(--text); }
:root[data-palette="warm"] .chip.me { background: var(--accent); color: var(--accent-text); font-weight: 700; }
:root[data-palette="warm"] .chip.rdy { background: var(--ok-bg, var(--tag)); color: var(--ok-text, var(--tag-text)); font-weight: 700; }
:root[data-palette="warm"] .chip.notrdy { background: var(--bg); border: 1px solid var(--border-strong, var(--line)); }
:root[data-palette="warm"] .chip.byorg { border: 1px dashed var(--border-strong, var(--muted)); }
:root[data-palette="warm"] .chip.treat { background: var(--tag); color: var(--tag-text); font-weight: 600; }

/* Odznaka „widziane”: koniec z twardymi kolorami (#cfd4da/#111827 psuły się w wymuszonym ciemnym trybie) */
:root[data-palette="warm"] .seen { background: var(--seen-bg, #cfd4da); color: var(--seen-text, #111827); }

/* Bramka logowania */
:root[data-palette="warm"] .gate { background: var(--tag); border-color: var(--border-strong, var(--line)); }

/* Kod QR: zawsze czarno-biały na białym podkładzie. UWAGA: przy wymuszonym ciemnym inline SVG z czarnymi modułami został „wymazany” w teście; canvas/obraz bezpieczniejszy – zostawić obecne rozwiązanie */
:root[data-palette="warm"] .qr canvas, :root[data-palette="warm"] .qr svg { background: #ffffff; color-scheme: light; }

/* Zwykle linki bez klasy (np. w komunikacie bramki) w kolorze palety zamiast domyslnego niebieskiego */
:root[data-palette="warm"] a:not([class]) { color: var(--link, var(--accent)); }
:root[data-palette="warm"] .spinner { border-top-color: var(--accent-border, var(--accent)); }

/* Natywne radio/checkbox: ciemny miod (accent-border) zamiast niebieskiego; sam miod na bialym ma tylko ok. 2:1 */
:root[data-palette="warm"] { accent-color: var(--accent-border, var(--accent)); }

:root[data-palette="warm"] #feedback select { border-color: var(--border-strong, var(--line)); }


/* =====================================================================
   v3: NATYWNE KONTROLKI (pkt 3.2 uwag v2)
   ===================================================================== */
/* accent-color obejmuje checkbox, radio, range i progress (Chrome, Firefox, Safari 15.4+) */
:root[data-palette="warm"] input[type=checkbox], :root[data-palette="warm"] input[type=radio],
:root[data-palette="warm"] input[type=range], :root[data-palette="warm"] progress { accent-color: var(--accent-border, var(--accent)); }
/* Pola tekstowe, select, textarea: to samo tło, tekst i mocna obwódka wszędzie */
:root[data-palette="warm"] select, :root[data-palette="warm"] textarea,
:root[data-palette="warm"] input[type=number], :root[data-palette="warm"] input[type=search], :root[data-palette="warm"] input[type=tel],
:root[data-palette="warm"] input[type=url], :root[data-palette="warm"] input[type=password], :root[data-palette="warm"] input[type=date] {
  background-color: var(--bg); color: var(--text); border: 1px solid var(--border-strong, var(--line));
}
:root[data-palette="warm"] ::placeholder { color: var(--muted); opacity: 1; }
:root[data-palette="warm"] select:focus-visible, :root[data-palette="warm"] textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* progress: tor i wypełnienie także w WebKit/Blink (Safari ignoruje accent-color dla progress) */
:root[data-palette="warm"] progress { -webkit-appearance: none; appearance: none; height: 10px; border: 0; border-radius: 999px; background: var(--line); overflow: hidden; }
:root[data-palette="warm"] progress::-webkit-progress-bar { background: var(--line); border-radius: 999px; }
:root[data-palette="warm"] progress::-webkit-progress-value { background: var(--accent-border, var(--accent)); border-radius: 999px; }
:root[data-palette="warm"] progress::-moz-progress-bar { background: var(--accent-border, var(--accent)); border-radius: 999px; }
/* Linki: bez klasy (już było) + odwiedzone i najechane */
:root[data-palette="warm"] a:not([class]):visited { color: var(--link); }
:root[data-palette="warm"] a:not([class]):hover { text-decoration-thickness: 2px; }
/* Zaznaczenie tekstu */
:root[data-palette="warm"] ::selection { background: var(--honey-200); color: #1f1a14; }

/* =====================================================================
   v3: WARIANT OPCJONALNY „ink” (pkt 3.1 uwag v2), tylko do porównania
   Włączany: <html data-palette="warm" data-accent-style="ink">.
   Idea: w JASNYM motywie główne akcenty to ciemne wypełnienie (#1f1a14) z miodowym tekstem i ramką.
   Ciemne kolory algorytmy przyciemniania zostawiają prawie bez zmian, więc przycisk wygląda tak samo
   z wymuszonym przyciemnianiem i bez. W ciemnym motywie strona nie jest przyciemniana przez przeglądarkę,
   więc zostaje miodowe wypełnienie (bez zmian).
   Kontrast: miód #f5b942 na #1f1a14 = 9,79:1; ramka miodowa vs tło #faf7f2 – dekoracyjna, granicę daje ciemne wypełnienie (16,16:1).
   ===================================================================== */
:root[data-palette="warm"][data-accent-style="ink"]:not([data-theme="dark"]) {
  --ink-fill: #1f1a14; --ink-text: #f5b942; --ink-ring: #f0ad2e;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="warm"][data-accent-style="ink"]:not([data-theme="light"]):not([data-theme="dark"]) { --ink-fill: initial; --ink-text: initial; --ink-ring: initial; }
}
:root[data-palette="warm"][data-accent-style="ink"] .btn:not(.ghost):not(:disabled),
:root[data-palette="warm"][data-accent-style="ink"] .chip.me,
:root[data-palette="warm"][data-accent-style="ink"] .tag:not(.soft),
:root[data-palette="warm"][data-accent-style="ink"] .acctico.on {
  background: var(--ink-fill, var(--accent)); color: var(--ink-text, var(--accent-text));
  box-shadow: inset 0 0 0 2px var(--ink-ring, transparent);
}
:root[data-palette="warm"][data-accent-style="ink"] .claimitem.mine .tick {
  background: var(--ink-fill, var(--accent)); color: var(--ink-text, var(--accent-text)); border-color: var(--ink-fill, var(--accent-border));
}