/* ================= MOTYWY ================= Nosnikiem jest atrybut data-theme na : "dark" (domyslny) albo "light". Ustawia go mikro-skrypt w KAZDEJ strony, jeszcze przed wczytaniem tego pliku - inaczej strona mrugnelaby ciemnym zanim przelacznik zdazy zadzialac. Przelacznik obok Wyloguj rysuje menu.js. ZASADA: zaden plik strony nie ma prawa zapisac koloru na sztywno. Wszystko idzie przez zmienne ponizej, bo inaczej jasny motyw rozjezdza sie ekran po ekranie - dokladnie ta klasa bledu, ktora meczyla bloby w n8n. KANALY RGB (--ok-rgb i reszta) sa po to, zeby ten sam kolor dalo sie uzyc na dowolnej przezroczystosci: rgb(var(--ok-rgb)/.16). Bez tego trzeba by osobnego tokenu na kazdy poziom alfa, a bylo ich w uzyciu ponad czterdziesci. */ :root{ color-scheme: dark; --plane:#121110; --rail:#171614; --surface:#1c1b19; --surface-2:#222120; --ink:#ffffff; --ink-2:#c3c2b7; --ink-muted:#8b897f; --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.12); --s1:#3987e5; --s2:#d95926; --s3:#199e70; --good:#0ca30c; --bad:#d03b3b; --accent:#d95926; --accent-2:#e8834f; --r:14px; /* kanaly RGB akcentow */ --ok-rgb:12 163 12; --bad-rgb:208 59 59; --acc-rgb:217 89 38; --info-rgb:57 135 229; --amber-rgb:250 178 25; --viol-rgb:150 152 250; --teal-rgb:25 158 112; --wash-rgb:255 255 255; /* nakladka rozjasniajaca: hover, paski, subtelne tla */ --shade-rgb:0 0 0; /* cien */ /* akcenty jako TEKST - w ciemnym jasne, zeby swiecily na tle */ --ok-ink:#3fca3f; --ok-ink-2:#8fd08f; --bad-ink:#ef7676; --bad-ink-2:#ef9b9b; --warn-ink:#f0a37e; --warn-ink-2:#e8946a; --info-ink:#7fb2f0; --info-ink-2:#9dc4f2; --amber-ink:#f5c451; --viol-ink:#c584fc; /* SYGNALY (ikony) - wpis 584: mocniejsze od tekstowych, czytelne z jednego spojrzenia. Tekst zostaje na --ok-ink / --bad-ink. */ --sig-ok:#3fca3f; --sig-bad:#ef7676; --sig-na:#8b897f; /* Dwa stopnie ponizej --ink-muted. FAINT to naglowki grup i etykiety, ktore maja byc czytelne dopiero gdy sie ich szuka; GHOST to zera i puste komorki, ktore maja tylko zaznaczyc, ze pole istnieje. */ --ink-faint:#6e6c64; --ink-ghost:#4a483f; --surface-3:#24221e; /* o stopien glebiej niz --surface-2: naglowki weekendow */ --ok-solid:#2f7d43; /* NASYCONE zielone tlo (przyciski akcji), nie przezroczyste */ --on-acc:#fff; /* tekst na nasyconym tle - bialy w OBU motywach */ --cien:0 8px 28px rgb(var(--shade-rgb)/.5); } /* Jasny motyw. Paleta wg wpisu 584 (standard dashboardow SUBLIX od 22.07.2026), z akcentem SUBLIX-a przyciemnionym do #c2410c, bo pomaranczowy #d95926 na bieli nie ma kontrastu na tekst. Akcenty tekstowe schodza w ciemniejsze odcienie (#15803d, #b91c1c, #b45309, #0369a1) - jasne swiecace odcienie z motywu ciemnego na bialym tle sa nieczytelne. */ :root[data-theme="light"]{ color-scheme: light; /* BIEL JEST ZLAMANA, nie czysta. Czysty #fff na karcie przy #f1f5f9 tle dawal ekran chlodny i wyprany - te odcienie sa o ton ciemniejsze i lekko cieplejsze, zeby jasny motyw mial ten sam charakter co ciepla czern motywu ciemnego (#121110, nie #000). Polecenie Marka 16.08.2026. */ --plane:#ebe9e4; --rail:#f7f5f1; --surface:#f7f5f1; --surface-2:#f1efea; /* Napisy: czern razy 1,3 - nowa skladowa to 255 minus 1,3 razy odleglosc od bieli. Polecenie Marka 16.08.2026. Akcenty kolorowe zostaja - tam czern zabralaby barwe, a one i tak trzymaja kontrast powyzej 4,7. */ --ink:#000000; --ink-2:#10223c; --ink-muted:#364a68; --line:#ddd9d2; --line-2:#c7c2b9; --s1:#2563eb; --s2:#c2410c; --s3:#0f766e; --good:#16a34a; --bad:#dc2626; --accent:#c2410c; --accent-2:#ea7a4a; --ok-rgb:21 128 61; --bad-rgb:185 28 28; --acc-rgb:194 65 12; --info-rgb:3 105 161; --amber-rgb:180 83 9; --viol-rgb:109 40 217; --teal-rgb:15 118 110; --wash-rgb:15 23 42; /* nakladka PRZYCIEMNIAJACA - odwrotnie niz w ciemnym */ --shade-rgb:15 23 42; --ok-ink:#15803d; --ok-ink-2:#166534; --bad-ink:#b91c1c; --bad-ink-2:#991b1b; --warn-ink:#b45309; --warn-ink-2:#9a3412; --info-ink:#0369a1; --info-ink-2:#075985; --amber-ink:#b45309; --viol-ink:#6d28d9; --sig-ok:#16a34a; --sig-bad:#dc2626; --sig-na:#94a3b8; /* Te dwa tez przeszly przez czern x 1,3, wiec naglowki grup i zera sa dzis wyraznie mocniejsze niz ich odpowiedniki w motywie ciemnym. To swiadome: wczesniejsza wersja rownala kontrast do ciemnego i wychodzila blada. */ --ink-faint:#566881; --ink-ghost:#a3aebb; --surface-3:#e4e1da; --ok-solid:#15803d; --cien:0 6px 20px rgb(var(--shade-rgb)/.10); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0;background:var(--plane);color:var(--ink); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased; } .app{display:grid;grid-template-columns:216px 1fr;min-height:100%} /* ---------- panel boczny ---------- */ .rail{background:var(--rail);border-right:1px solid var(--line);padding:18px 0 26px;position:sticky;top:0;height:100vh;overflow-y:auto} .brand{display:flex;align-items:center;gap:9px;padding:0 18px 20px;font-weight:640;font-size:16.5px;letter-spacing:-.01em} .brand i{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;font-size:12px;font-style:normal;color:var(--on-acc);font-weight:700} .grp{padding:16px 18px 6px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);font-weight:600} .nav a{ display:flex;align-items:center;gap:10px;padding:8px 18px;color:var(--ink-2); text-decoration:none;font-size:13.5px;border-left:2px solid transparent;transition:background .12s,color .12s } .nav a:hover{background:rgb(var(--wash-rgb)/.04);color:var(--ink)} .nav a.on{background:rgb(var(--acc-rgb)/.13);color:var(--warn-ink);border-left-color:var(--accent)} .nav a svg{width:15px;height:15px;flex:none;opacity:.85} .nav a.soon{opacity:.42;pointer-events:none} /* ---------- górny pasek ---------- */ .bar{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 26px;border-bottom:1px solid var(--line);position:sticky;top:0; background:color-mix(in srgb,var(--plane) 88%,transparent);backdrop-filter:blur(9px);z-index:20 } .bar h1{font-size:15.5px;margin:0;font-weight:600;letter-spacing:-.01em} .bar .rt{display:flex;align-items:center;gap:9px} .chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1px solid var(--line-2);border-radius:999px;font-size:12.5px;color:var(--ink-2);background:var(--surface)} .who{background:var(--surface-2)} /* Przelacznik motywu - wstrzykuje go menu.js przed Wyloguj. Ikona rysowana kreska, wiec bierze kolor z currentColor razem z reszta pastylki. */ #motyw-przel{cursor:pointer;font-family:inherit;font-size:12.5px} #motyw-przel svg{width:14px;height:14px;flex:none} #motyw-przel:hover{color:var(--ink);border-color:var(--line-2)} /* Chip "Zgłoś" - wstrzykuje go menu.js na kazdej stronie poza samymi Zgloszeniami. Ikona rysowana kreska, wiec bierze kolor z pastylki. */ #zglos-chip{cursor:pointer;text-decoration:none;font-size:12.5px} #zglos-chip svg{width:14px;height:14px;flex:none} #zglos-chip:hover{color:var(--ink);border-color:var(--line-2)} .who b{color:var(--ink);font-weight:560} .av{width:20px;height:20px;border-radius:50%;background:var(--s1);display:grid;place-items:center;font-size:9.5px;font-weight:700;color:var(--on-acc)} .main{padding:22px 26px 60px;max-width:1240px} /* ---------- pastylki ---------- */ .pills{display:inline-flex;gap:3px;padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:999px} .pill{padding:6px 14px;border-radius:999px;font-size:12.5px;color:var(--ink-2);cursor:pointer;border:1px solid transparent;background:none;font-family:inherit;transition:.12s} .pill:hover{color:var(--ink)} .pill.on{background:var(--surface-2);border-color:var(--line-2);color:var(--ink)} .head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;margin-bottom:16px} .head .lbl{display:flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-muted);font-weight:600} .note{ display:flex;gap:10px;padding:11px 14px;margin-bottom:18px;border-radius:11px;font-size:13px;line-height:1.5; background:rgb(var(--acc-rgb)/.09);border:1px solid rgb(var(--acc-rgb)/.3);color:var(--ink-2) } .note b{color:var(--ink)} /* ---------- kafelki KPI ---------- */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:13px;margin-bottom:18px} .kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px} .kpi .r1{display:flex;align-items:flex-start;gap:11px;margin-bottom:11px} .kpi .ic{width:31px;height:31px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;flex:none;border:1px solid var(--line)} .kpi .ic svg{width:15px;height:15px;opacity:.8} .kpi .v{font-size:25px;font-weight:640;letter-spacing:-.025em;line-height:1.12} .kpi .n{font-size:12.5px;color:var(--ink-muted);margin-top:1px} .kpi .r2{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .d{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:620;padding:3px 8px;border-radius:7px;font-variant-numeric:tabular-nums} .d.up{background:rgb(var(--ok-rgb)/.15);color:var(--ok-ink)} .d.dn{background:rgb(var(--bad-rgb)/.15);color:var(--bad-ink)} .d.na{background:rgb(var(--wash-rgb)/.06);color:var(--ink-muted);font-weight:500} .prev{font-size:11.5px;color:var(--ink-muted);font-variant-numeric:tabular-nums} /* ---------- karty ---------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:18px} .card h2{font-size:14.5px;margin:0 0 3px;font-weight:600;display:flex;align-items:center;gap:8px} .card .hint{font-size:12.5px;color:var(--ink-muted);margin:0 0 16px} .legend{display:flex;flex-wrap:wrap;gap:15px;margin-top:15px;padding-top:13px;border-top:1px solid var(--line)} .lg{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2)} .sw{width:10px;height:10px;border-radius:3px;flex:none} /* ---------- słupki poziome (koszt) ---------- */ .rows{display:flex;flex-direction:column;gap:2px} .row{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;padding:8px 0} .rl{font-size:13.5px;font-weight:560} .rl small{display:block;font-weight:400;color:var(--ink-muted);font-size:11.5px;margin-top:1px} .track{position:relative;height:32px;display:flex;align-items:center} .bar2{height:20px;border-radius:0 4px 4px 0;min-width:3px;position:relative;transition:filter .12s} .bar2:hover{filter:brightness(1.14)} .val{position:absolute;left:calc(100% + 11px);top:50%;transform:translateY(-50%);white-space:nowrap;font-size:13px;font-variant-numeric:tabular-nums} .val em{font-style:normal;color:var(--ink-muted);font-size:11.5px;margin-left:6px} /* ---------- male panele trendu ---------- */ .facets{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .facet h3{font-size:12.5px;text-align:center;margin:0 0 12px;color:var(--ink-2);font-weight:560} .plot{display:grid;grid-template-columns:34px 1fr;gap:7px;height:172px} .yax{display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--ink-muted);text-align:right;font-variant-numeric:tabular-nums;padding-bottom:19px} .cols{position:relative;display:flex;align-items:flex-end;justify-content:space-around;gap:8px;border-left:1px solid var(--line-2);padding:0 4px} .grid{position:absolute;inset:0 0 19px 0;pointer-events:none} .grid i{position:absolute;left:0;right:0;height:1px;background:var(--line)} .col{flex:1;max-width:44px;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;position:relative;z-index:1} .col .b{width:100%;border-radius:4px 4px 0 0;transition:filter .12s;min-height:3px} .col:hover .b{filter:brightness(1.16)} .col .x{font-size:10px;color:var(--ink-muted);margin-top:6px;height:13px;white-space:nowrap} .col.now .x{color:var(--ink);font-weight:620} /* ---------- podpowiedz ---------- */ .tip{position:fixed;z-index:50;pointer-events:none;opacity:0;transition:opacity .1s; background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:9px 12px; box-shadow:0 8px 28px rgb(var(--shade-rgb)/.5);font-size:12.5px;min-width:150px} .tip.on{opacity:1} .tip .t{font-weight:620;margin-bottom:6px;display:flex;align-items:center;gap:7px} .tip dl{margin:0;display:grid;grid-template-columns:auto auto;gap:2px 15px} .tip dt{color:var(--ink-2)} .tip dd{margin:0;text-align:right;font-variant-numeric:tabular-nums} table{border-collapse:collapse;width:100%;font-size:13px;min-width:520px} .tw{overflow-x:auto} th,td{text-align:right;padding:8px 11px;border-bottom:1px solid var(--line);white-space:nowrap} th:first-child,td:first-child{text-align:left} thead th{color:var(--ink-muted);font-weight:560;font-size:11px;text-transform:uppercase;letter-spacing:.06em} tbody td{font-variant-numeric:tabular-nums} tbody tr:last-child td{border-bottom:none} .nm{display:inline-flex;align-items:center;gap:8px;font-weight:560} .best{font-size:10.5px;background:rgb(var(--ok-rgb)/.16);color:var(--ok-ink);border-radius:5px;padding:2px 7px;font-weight:620} details summary{cursor:pointer;font-size:12.5px;color:var(--ink-muted);margin-top:14px;padding-top:13px;border-top:1px solid var(--line);user-select:none} details summary:hover{color:var(--ink)} details[open] summary{margin-bottom:12px} footer{color:var(--ink-muted);font-size:11.5px;line-height:1.65;margin-top:6px} @media (max-width:1000px){ .facets{grid-template-columns:1fr;gap:26px} } @media (max-width:820px){ .app{grid-template-columns:1fr} .rail{display:none} .main{padding:18px 16px 50px} .bar{padding:12px 16px} .row{grid-template-columns:80px 1fr} .track{height:auto;flex-direction:column;align-items:flex-start;gap:3px} .val{position:static;transform:none} }