/* Styl TailAdmin przeniesiony 1:1 z panelu WOSK (wosk/narzedzia/serwer/szablony/baza.html,
   zasady w wosk/narzedzia/serwer/DESIGN.md). Dodatki MOST są w szablony/baza.html. */
/* Wygląd według DESIGN.md (styl TailAdmin): font Outfit, marka #465FFF, szarości
     z palety TailAdmin, karty 16 px z cienką ramką. Jasny motyw domyślny, ciemny
     pod przełącznikiem (data-theme="dark"). Stare nazwy zmiennych (--tlo, --karta,
     --akcent...) zostają, bo używają ich szablony stron. */
  @font-face { font-family:"Outfit"; font-style:normal; font-weight:100 900; font-display:swap;
    src:url("fonty/outfit-latin-ext.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:"Outfit"; font-style:normal; font-weight:100 900; font-display:swap;
    src:url("fonty/outfit-latin.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; }

  :root { color-scheme:light;
    /* powierzchnie i tekst (kontrasty w DESIGN.md §3) */
    --tlo:#f9fafb; --karta:#fff; --tekst:#1d2939; --tekst-mocny:#101828; --tekst-menu:#344054; --szary:#667085;
    --linia:#e4e7ec; --linia-slaba:#f2f4f7; --linia-mocna:#d0d5dd; --pole-ramka:#858fa0; --naglowek-tabeli:#f9fafb;
    --wyroznienie:#f2f7ff; --weekend:#f9fafb; --poza:#fcfcfd;
    /* marka i stany: tekst na tle z tej samej rodziny ma co najmniej 5:1 */
    --akcent:#465fff; --akcent-mocny:#3641f5; --akcent-tekst:#3641f5; --akcent-tlo:#ecf3ff;
    --uwaga:#b54708; --uwaga-tlo:#fffaeb; --uwaga-ramka:#fedf89;
    --zle:#b42318; --zle-tlo:#fef3f2; --zle-ramka:#fecdca;
    --dobrze:#027a48; --dobrze-tlo:#ecfdf3; --dobrze-ramka:#a6f4c5;
    --plakietka:#d92d20;
    /* dane: sprawdzone walidatorem palet (DESIGN.md §4) */
    --seria:#465fff; --lejek:#7592ff; --koszt:#fb6514;
    --k-kurs:#465fff; --k-telefon:#fb6514; --k-kontakt:#ee46bc; --k-inne:#98a2b3;
    /* kształt i skala tekstu (DESIGN.md §5) */
    --r:16px; --r-m:12px; --r-s:8px;
    --cien-xs:0 1px 2px rgba(16,24,40,.05); --cien-lg:0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
    --pierscien:0 0 0 4px rgba(70,95,255,.12);
    --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:18px; --t-xl:20px; --t-kpi:24px; }
  @media (min-width:700px) { :root { --t-kpi:30px; } }
  :root[data-theme="dark"] { color-scheme:dark;
    --tlo:#101828; --karta:#171f2e; --tekst:#e4e7ec; --tekst-mocny:#f9fafb; --tekst-menu:#d0d5dd; --szary:#98a2b3;
    --linia:#1d2939; --linia-slaba:#1d2939; --linia-mocna:#344054; --pole-ramka:#667085; --naglowek-tabeli:#1a2231;
    --wyroznienie:#1b243f; --weekend:#141c2a; --poza:#131a27;
    --akcent-tekst:#7592ff; --akcent-tlo:#162142;
    /* tła stanów: 12% koloru na karcie (przy 15% link w alercie miał 4,49:1) */
    --uwaga:#fdb022; --uwaga-tlo:#322d2a; --uwaga-ramka:#5a4123;
    --zle:#f97066; --zle-tlo:#31232f; --zle-ramka:#582a31;
    --dobrze:#32d583; --dobrze-tlo:#163135; --dobrze-ramka:#164d40;
    --seria:#5b78ff; --lejek:#3641f5; --koszt:#ec4a0a;
    --k-kurs:#5b78ff; --k-telefon:#ec4a0a; --k-kontakt:#d63fa8; --k-inne:#667085;
    --cien-xs:none; --cien-lg:0 12px 24px rgba(0,0,0,.45); }

  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  body { margin:0; font:400 var(--t-sm)/1.5 "Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--tlo); color:var(--tekst); }
  a { color:var(--akcent-tekst); }
  small { font-size:var(--t-xs); }
  b, strong { font-weight:600; }
  h1, h2, h3, h4 { color:var(--tekst-mocny); font-weight:600; }

  /* --- marka --- */
  .marka { display:inline-flex; align-items:center; gap:.625rem; color:var(--tekst-mocny); text-decoration:none; font-weight:700; font-size:var(--t-lg); }
  .marka .logo { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none;
                 border-radius:var(--r-s); background:var(--akcent); color:#fff; font-size:var(--t-md); font-weight:700; }
  .marka small { color:var(--szary); font-weight:500; font-size:var(--t-sm); margin-left:.2rem; }

  /* --- boczne menu (od 1024 px): 76 px same ikony, od 1280 px pełne 260 px z grupami --- */
  .bok { display:none; }
  @media (min-width:1024px) {
    .bok { display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; width:76px; z-index:40; overflow-y:auto;
           background:var(--karta); border-right:1px solid var(--linia); padding:1rem .75rem; }
    .z-bokiem { padding-left:76px; }
    .bok .marka { justify-content:center; min-height:40px; margin:0 0 1.5rem; }
    .bok .marka .napis, .bok .bok-grupa, .bok .nazwa { display:none; }
    .bok nav { display:grid; gap:4px; margin-bottom:1.25rem; }
    .bok nav a { position:relative; display:flex; align-items:center; justify-content:center; gap:.75rem; min-height:44px; padding:.5rem .75rem;
                 border-radius:var(--r-s); color:var(--tekst-menu); font-size:var(--t-sm); font-weight:500; text-decoration:none; }
    .bok nav a svg { width:22px; height:22px; flex:none; color:var(--szary); }
    .bok nav a:hover { background:var(--linia-slaba); }
    .bok nav a.on { background:var(--akcent-tlo); color:var(--akcent-tekst); }
    .bok nav a.on svg { color:var(--akcent-tekst); }
    .bok nav .plakietka { position:absolute; top:3px; right:4px; margin:0; }
  }
  @media (min-width:1280px) {
    .bok { width:260px; padding:1.25rem 1.25rem; }
    .z-bokiem { padding-left:260px; }
    .bok .marka { justify-content:flex-start; padding-left:.75rem; }
    .bok .marka .napis, .bok .nazwa { display:inline; }
    .bok .bok-grupa { display:block; margin:0 0 .5rem; padding:0 .75rem; font-size:var(--t-xs); font-weight:500;
                      text-transform:uppercase; letter-spacing:.06em; color:var(--szary); }
    .bok nav a { justify-content:flex-start; }
    .bok nav .plakietka { position:static; margin-left:auto; }
  }

  /* --- nagłówek: przyklejony u góry; od 1024 px tylko przełącznik motywu i Wyloguj,
         na tablecie pod marką rząd zakładek, na telefonie zakładki są w dolnym pasku --- */
  .gora { position:sticky; top:0; z-index:30; background:var(--karta); border-bottom:1px solid var(--linia); }
  .gora-w { max-width:1240px; margin:0 auto; padding:.625rem 1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; min-height:60px; }
  .gora-prawo { margin-left:auto; display:flex; align-items:center; gap:.25rem; }
  .motyw { width:40px; height:40px; min-height:0; padding:0; border-radius:50%; background:var(--karta); color:var(--szary);
           border:1px solid var(--linia); box-shadow:none; }
  .motyw:hover { background:var(--linia-slaba); border-color:var(--linia); color:var(--tekst); }
  .motyw svg { width:20px; height:20px; }
  .motyw svg:last-child, :root[data-theme="dark"] .motyw svg:first-child { display:none; }
  :root[data-theme="dark"] .motyw svg:last-child { display:block; }
  .wyloguj, .gora-zadania { color:var(--szary); font-size:var(--t-sm); font-weight:500; text-decoration:none; padding:.5rem .75rem; border-radius:var(--r-s); }
  .wyloguj:hover, .gora-zadania:hover { background:var(--linia-slaba); color:var(--tekst); }
  .gora-zadania.on { color:var(--akcent-tekst); }
  .menu { flex-basis:100%; display:flex; gap:.25rem; overflow-x:auto; scrollbar-width:none; margin:0 -1rem -.625rem; padding:.125rem 1rem .625rem; }
  .menu::-webkit-scrollbar { display:none; }
  .menu a { flex:none; color:var(--tekst-menu); text-decoration:none; padding:.5rem .8rem; border-radius:var(--r-s); font-size:var(--t-sm); font-weight:500; white-space:nowrap; }
  .menu a:hover { background:var(--linia-slaba); }
  .menu a.on { background:var(--akcent-tlo); color:var(--akcent-tekst); }
  .plakietka { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
               background:var(--plakietka); color:#fff; font-size:var(--t-xs); font-weight:600; line-height:1; margin-left:.35rem; }
  @media (min-width:1024px) {
    /* .gora-prawo w selektorze, żeby wygrać z display:inline-flex z bloku dotykowego niżej */
    .gora .marka, .menu, .gora-prawo .gora-zadania { display:none; }
    .gora-w { padding:.625rem 1.5rem; }
  }

  main { max-width:1240px; margin:0 auto; padding:1.25rem 1rem 3rem; }
  @media (min-width:700px) { main { padding:1.5rem 1.5rem 3rem; } }
  .naglowek { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin:0 0 1.25rem; }
  .naglowek h1 { font-size:var(--t-xl); margin:0 auto 0 0; line-height:1.3; }
  .naglowek .meta { display:flex; align-items:center; gap:.75rem; color:var(--szary); font-size:var(--t-xs); }
  .opis { color:var(--szary); font-size:var(--t-sm); max-width:780px; margin:-.5rem 0 1.25rem; }
  h2 { font-size:var(--t-lg); margin:2rem 0 .75rem; line-height:1.4; scroll-margin-top:5rem; }
  section { scroll-margin-top:5rem; }
  .skok { display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; margin:-.25rem -1rem 1.25rem; padding:0 1rem; }
  .skok::-webkit-scrollbar { display:none; }
  .skok a { flex:none; font-size:var(--t-sm); font-weight:500; text-decoration:none; color:var(--tekst-menu); background:var(--karta);
            border:1px solid var(--linia); border-radius:var(--r-s); padding:.4rem .875rem; box-shadow:var(--cien-xs); }
  .skok a:hover { background:var(--linia-slaba); }

  /* --- kafle i karty --- */
  .kafle { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap:.75rem; }
  @media (min-width:700px) { .kafle { grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; } }
  .kafel, .karta { background:var(--karta); border:1px solid var(--linia); border-radius:var(--r); padding:1rem; min-width:0; box-shadow:var(--cien-xs); }
  @media (min-width:700px) { .kafel, .karta { padding:1.25rem; } }
  .kafel .l { color:var(--szary); font-size:var(--t-sm); line-height:1.4; }
  .kafel .w { font-size:var(--t-kpi); font-weight:700; color:var(--tekst-mocny); font-variant-numeric:tabular-nums; margin:.375rem 0 .25rem; line-height:1.2; }
  .kafel .p { color:var(--szary); font-size:var(--t-xs); line-height:1.5; }
  .siatka { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap:1rem; }
  .odstep { margin-top:1rem; }

  /* --- tabele: szerokie przewijają się w poziomie w swojej ramce; klasa
         "karty" zamienia na telefonie każdy wiersz w kartę, "przyklej"
         trzyma pierwszą kolumnę w miejscu przy przewijaniu --- */
  .tabela { overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--karta); border:1px solid var(--linia); border-radius:var(--r); box-shadow:var(--cien-xs); }
  table { border-collapse:collapse; width:100%; }
  th, td { padding:.75rem 1rem; text-align:left; border-bottom:1px solid var(--linia-slaba); white-space:nowrap; vertical-align:top; font-size:var(--t-sm); }
  th { font-size:var(--t-xs); color:var(--szary); font-weight:500; background:var(--naglowek-tabeli); border-bottom-color:var(--linia); }
  tr:last-child td { border-bottom:0; }
  td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; }
  td.zawijaj { white-space:normal; }
  .przyklej th:first-child, .przyklej td:first-child { position:sticky; left:0; z-index:1; background:var(--karta); box-shadow:1px 0 0 var(--linia); }
  .przyklej th:first-child { background:var(--naglowek-tabeli); }
  @media (max-width:699px) {
    table.karty, table.karty tbody, table.karty tr, table.karty td { display:block; width:auto; }
    table.karty tr.nag { display:none; }
    table.karty tr { padding:.875rem 1rem; border-bottom:1px solid var(--linia-slaba); }
    table.karty tr:last-child { border-bottom:0; }
    table.karty td { border:0; padding:.125rem 0; white-space:normal; text-align:left; }
    table.karty td:empty, table.karty td.bez-tel { display:none; }
    table.karty td.obok { display:inline-block; margin-right:1rem; }
    table.karty td[data-l]::before { content:attr(data-l) " "; color:var(--szary); font-size:var(--t-xs); }
    table.karty td.glowna { font-weight:600; color:var(--tekst-mocny); }
  }

  /* --- przyciski i pola --- */
  button, .przycisk { background:var(--akcent); color:#fff; border:1px solid var(--akcent); border-radius:var(--r-s); padding:.625rem 1rem;
                      min-height:40px; font:inherit; font-size:var(--t-sm); font-weight:500; line-height:1.25; cursor:pointer; text-decoration:none;
                      box-shadow:var(--cien-xs); display:inline-flex; align-items:center; justify-content:center; gap:.5rem; }
  button:hover, .przycisk:hover { background:var(--akcent-mocny); border-color:var(--akcent-mocny); }
  button.jasny, .przycisk.jasny { background:var(--karta); color:var(--tekst-menu); border-color:var(--linia-mocna); }
  button.jasny:hover, .przycisk.jasny:hover { background:var(--linia-slaba); border-color:var(--linia-mocna); }
  .maly-p { min-height:32px; padding:.375rem .75rem; font-size:var(--t-sm); }
  input, select, textarea { font:inherit; font-size:var(--t-sm); color:var(--tekst); background:var(--karta); border:1px solid var(--pole-ramka);
                            border-radius:var(--r-s); padding:.625rem 1rem; min-height:44px; width:100%; box-shadow:var(--cien-xs); }
  input[type=checkbox] { width:auto; min-height:0; padding:0; box-shadow:none; accent-color:var(--akcent); }
  input::placeholder, textarea::placeholder { color:var(--szary); }
  input:focus, select:focus, textarea:focus { outline:none; border-color:var(--akcent); box-shadow:var(--pierscien); }
  button:focus-visible, a:focus-visible, summary:focus-visible { outline:2px solid var(--akcent); outline-offset:2px; }
  label > .l { display:block; font-size:var(--t-sm); font-weight:500; color:var(--tekst-menu); margin-bottom:.375rem; }

  /* --- komunikaty, plakietki, drobne --- */
  .alert { border:1px solid var(--uwaga-ramka); background:var(--uwaga-tlo); color:var(--tekst); padding:.75rem 1rem; margin:.5rem 0;
           border-radius:var(--r-m); overflow-wrap:anywhere; }
  .alert.dobrze { border-color:var(--dobrze-ramka); background:var(--dobrze-tlo); }
  .ok { color:var(--dobrze); } .zle { color:var(--zle); } .maly { color:var(--szary); font-size:var(--t-sm); }
  .znak { display:inline-flex; align-items:center; font-size:var(--t-xs); font-weight:500; line-height:1.5; color:var(--akcent-tekst);
          background:var(--akcent-tlo); border-radius:999px; padding:.0625rem .625rem; white-space:nowrap; }
  .stopka { color:var(--szary); font-size:var(--t-xs); margin-top:2rem; }
  pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--t-xs); background:var(--linia-slaba); padding:.75rem; border-radius:var(--r-s); }
  code { font-size:var(--t-xs); background:var(--linia-slaba); padding:.0625rem .375rem; border-radius:4px; overflow-wrap:anywhere; }
  details > summary { cursor:pointer; }
  details.sekcja { margin-top:1rem; }
  details.sekcja > summary { color:var(--akcent-tekst); font-size:var(--t-sm); font-weight:500; }
  @media (min-width:700px) { .tylko-tel { display:none !important; } }
  @media (max-width:699px) { .tylko-duzy { display:none !important; } }

  /* --- wykresy (HTML, bez bibliotek): jedna oś na wykres, wartości podpisane
         przy słupkach, podpowiedź po najechaniu w atrybucie title --- */
  .wykres { background:var(--karta); border:1px solid var(--linia); border-radius:var(--r); padding:1rem; min-width:0; box-shadow:var(--cien-xs); }
  @media (min-width:700px) { .wykres { padding:1.25rem 1.5rem 1.5rem; } }
  .wykres h3 { font-size:var(--t-lg); margin:0; }
  .wykres .pod { color:var(--szary); font-size:var(--t-sm); margin:.25rem 0 1rem; }
  .legenda { display:flex; flex-wrap:wrap; gap:.25rem 1rem; font-size:var(--t-xs); color:var(--szary); margin:-.25rem 0 .75rem; }
  .legenda i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:.375rem; vertical-align:-1px; }
  .slupek { display:grid; grid-template-columns:minmax(110px, 38%) 1fr auto; align-items:center; gap:.25rem .75rem;
            padding:5px 8px; margin:0 -8px; border-radius:var(--r-s); }
  .slupek:hover { background:var(--linia-slaba); }
  .slupek .nazwa { font-size:var(--t-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .slupek .nazwa small { color:var(--szary); margin-left:.375rem; }
  .slupek .wart { font-size:var(--t-sm); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
  .slupek .wart small { color:var(--szary); }
  @media (max-width:559px) {
    .slupek { grid-template-columns:minmax(0, 1fr) auto; padding:6px 8px; }
    .slupek .obszar { grid-column:1 / -1; grid-row:2; }
  }
  .obszar { display:flex; gap:2px; min-width:0; height:14px; }
  .bar { height:14px; background:var(--seria); flex:0 1 auto; }
  .obszar .bar:last-child { border-radius:0 4px 4px 0; }
  .bar.lejek, .bar.won { background:var(--lejek); }
  .bar.koszt { background:var(--koszt); }
  .slupek:hover .bar { filter:brightness(1.1); }

  /* --- telefon: zakładki w dolnym pasku, pod kciukiem. Cztery codzienne, reszta
         pod „Więcej” (arkusz nad paskiem); u góry marka, motyw i Wyloguj. --- */
  .dol { display:none; }
  @media (max-width:699px) {
    .menu, .gora-prawo .gora-zadania { display:none; }
    .gora-w { min-height:56px; }
    body { padding-bottom:calc(58px + env(safe-area-inset-bottom)); }
    .dol { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); position:fixed; left:0; right:0; bottom:0; z-index:20;
           background:var(--karta); border-top:1px solid var(--linia); padding-bottom:env(safe-area-inset-bottom); }
    .dol > a, .dol summary { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
                             min-height:58px; color:var(--szary); text-decoration:none; font-size:var(--t-xs); font-weight:500; cursor:pointer; list-style:none; }
    .dol summary::-webkit-details-marker { display:none; }
    .dol svg { width:22px; height:22px; }
    .dol a.on, .wiecej.on > summary, .wiecej[open] > summary { color:var(--akcent-tekst); font-weight:600; }
    .dol summary .plakietka { position:absolute; top:6px; left:calc(50% + 5px); margin:0; }
    .arkusz { position:fixed; left:.75rem; right:.75rem; bottom:calc(66px + env(safe-area-inset-bottom)); display:grid; padding:.375rem;
              background:var(--karta); border:1px solid var(--linia); border-radius:var(--r); box-shadow:var(--cien-lg); }
    .arkusz a { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 1rem; border-radius:var(--r-s);
                color:var(--tekst-menu); font-weight:500; text-decoration:none; }
    .arkusz a.on { background:var(--akcent-tlo); color:var(--akcent-tekst); }
  }

  /* --- ekrany dotykowe: każdy cel do stuknięcia co najmniej 44 px (WCAG 2.5.5),
         pola 16 px, bo przy mniejszym iOS powiększa stronę przy wpisywaniu.
         Po rodzaju wskaźnika, a nie szerokości, bo tablet w poziomie też jest dotykowy. --- */
  @media (pointer:coarse) {
    .menu a, .skok a, .wyloguj, .gora-zadania { min-height:44px; display:inline-flex; align-items:center; }
    button, .przycisk, .maly-p, input, select { min-height:44px; }
    input[type=checkbox] { min-height:0; }
    .motyw { width:44px; height:44px; }
    input, select, textarea { font-size:var(--t-md); }
  }