/*
* ONYX — design system (Etap 4, Task 1)
* Jeden plik zmiennych + komponentów. Zero hardkodowanych kolorów w regułach
* komponentów — wszystko przez var(--...). Kolory/typografia/promienie żyją
* wyłącznie w :root poniżej. Odwzorowuje MOCKUP.html (kontrakt wizualny).
*/
:root{
/* Sidebar (ciemny) */
--side-bg:#141414; --side-active:#252525; --side-border:#2a2a2a;
--side-logo:#ffffff; --side-item:#c9c9c9; --side-group:#5c5c5c;
--side-caption:#6f6f6f; --side-brand-sub:#7a7a7a; --side-user-name:#e8e8e8;
--side-avatar-bg:#3a3a3a;
/* Treść */
--page-bg:#f7f7f6; --card-bg:#ffffff; --tile-bg:#efeee9;
--hairline:#e3e3e0; --border-input:#cfcfca;
/* Tekst */
--ink:#1a1a1a; --ink-2:#6b6b68; --muted:#9a9a96;
/* Akcent (niebieski) — avatar aktywny, pill salonu */
--accent-ink:#0c447c; --accent-bg:#e6f1fb;
/* Sukces/próg (zielony) — badge stawki */
--ok-ink:#0f6e56; --ok-bg:#e1f5ee;
/* Fuksja — komórki PRACA salonu JER w „Mój grafik" (kontrast biały/magenta AA 5.14:1) */
--jer-ink:#ffffff; --jer-bg:#d6006e;
/* Neutralny (byli pracownicy / puste) */
--neutral-ink:#5f5e5a; --neutral-bg:#f1efe8;
/* Promienie / typografia / odstępy */
--r-sm:8px; --r-md:12px; --r-pill:20px;
--fs-page-title:20px; --fs-metric:22px; --fs-body:13px; --fs-small:11px; --fs-label:12px;
--font: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--sidebar-w:210px; --bp-mobile:900px;
/* KALIBRACJA PILLI (§3 — jedyne odchylenie od mockupu: WYŻSZY KONTRAST).
Mockup pastelowy: salon #0c447c/#e6f1fb, stawka #0f6e56/#e1f5ee.
Wersja mocniejsza, do akceptacji na bramce, sterowana jednym miejscem: */
--pill-salon-ink:#0a3a6b; --pill-salon-bg:#cfe4f7; --pill-weight:600;
--pill-stawka-ink:#0b5a46; --pill-stawka-bg:#c9ecdf;
/* --- Rozszerzenia poza brief §3 — potrzebne dla istniejących ekranów
(logowanie/2FA/ustawienia konta/alerty), nazwane konsekwentnie z resztą,
nadal wyłącznie jako zmienne, żeby nic w komponentach nie było hardkodowane. --- */
--white:#ffffff;
--shadow-card:0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
--ring:0 0 0 3px rgba(12,68,124,.22);
--accent-ink-hover:#083257;
--ok-border:#bfe6d7;
--danger-ink:#b3261e; --danger-bg:#fdecea; --danger-border:#f6c6c2;
--warn-ink:#7c4a12; --warn-bg:#fdf3e3; --warn-border:#f3dca9;
--fs-h1:22px; --fs-h2:15px;
--row-hover:#faf9f7;
/* Panel pracownika (Etap 4, Task 4) — hero mobile-first, duże liczby */
--fs-hero:34px; --fs-prowizja:26px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
margin:0; color:var(--ink); background:var(--page-bg);
font-family:var(--font); font-size:var(--fs-body); line-height:1.55;
-webkit-font-smoothing:antialiased;
}
p{ margin:.5rem 0; }
a{ color:var(--accent-ink); }
.muted{ color:var(--ink-2); }
hr.sep{ border:0; border-top:.5px solid var(--hairline); margin:1.6rem 0; }
h1{ font-size:var(--fs-h1); margin:0 0 1rem; letter-spacing:-.01em; color:var(--ink); font-weight:500; }
h2{ font-size:var(--fs-h2); margin:1.6rem 0 .8rem; letter-spacing:-.005em; color:var(--ink); font-weight:500; }
.card > h1:first-child, .card > h2:first-child{ margin-top:0; }
/* ============ APP SHELL (sidebar + main + hamburger) ============ */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
width:var(--sidebar-w); flex-shrink:0; background:var(--side-bg);
color:var(--side-item); display:flex; flex-direction:column;
position:sticky; top:0; height:100vh; overflow-y:auto; z-index:40;
}
.sidebar__brand{ padding:18px 20px 20px; border-bottom:.5px solid var(--side-border); }
.sidebar__logo{ color:var(--side-logo); font-size:21px; font-weight:600; letter-spacing:4px; }
/* „eccelent" jako część brandingu, nie drobny szary podpis (#1). */
.sidebar__brand-sub{ color:var(--side-item); font-size:12px; margin-top:5px;
text-transform:uppercase; letter-spacing:3px; font-weight:500; }
.sidebar__nav{ padding:8px 10px 12px; flex:1; }
/* Nagłówek grupy = klikalny przełącznik (collapse §2) + tło/kontrast (§3). */
.nav-group{ margin-bottom:2px; }
.nav-group__toggle{
width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
background:rgba(255,255,255,.05); border:none; cursor:pointer;
padding:7px 12px; margin:10px 0 4px; border-radius:var(--r-sm); text-align:left;
color:var(--side-item);
}
.nav-group__toggle:hover{ background:rgba(255,255,255,.09); }
.nav-group__label{ font-size:var(--fs-small); text-transform:uppercase; letter-spacing:1.2px; font-weight:600; }
.nav-group__chev{ display:inline-flex; opacity:.75; transition:transform .22s ease; }
.nav-group.is-collapsed .nav-group__chev{ transform:rotate(-90deg); }
/* Płynne zwijanie bez mierzenia wysokości (grid 1fr↔0fr). */
.nav-group__items{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .22s ease; }
.nav-group.is-collapsed .nav-group__items{ grid-template-rows:0fr; }
.nav-group__inner{ overflow:hidden; min-height:0; }
.nav-item{
display:flex; align-items:center; gap:10px; color:var(--side-item);
font-size:var(--fs-body); padding:8px 12px; border-radius:var(--r-sm);
text-decoration:none; margin:1px 0;
}
.nav-item:hover{ background:var(--side-active); color:var(--side-logo); }
.nav-item.is-active{ background:var(--side-active); color:var(--side-logo); }
.nav-item--disabled, .nav-item--disabled:hover{
color:var(--side-group); background:transparent; cursor:default; opacity:.75;
}
.sidebar__note{ color:var(--side-caption); font-size:var(--fs-small); padding:10px 12px; }
/* Stopka = PRZYCISK menu konta (dawna grupa „Konto" w nawigacji). Menu otwiera się
w GÓRĘ, bo stopka siedzi przy dolnej krawędzi sidebaru. */
.sidebar__account{ position:relative; }
.sidebar__footer{
width:100%; padding:12px 16px; border:none; border-top:.5px solid var(--side-border);
display:flex; align-items:center; gap:10px; text-align:left;
background:none; color:inherit; font:inherit; cursor:pointer;
}
.sidebar__footer:hover{ background:var(--side-active); }
.sidebar__footer:focus-visible{ outline:2px solid var(--side-logo); outline-offset:-2px; }
.sidebar__footer.is-active{ background:var(--side-active); }
.sidebar__user{ display:flex; flex-direction:column; min-width:0; }
.sidebar__caret{ margin-left:auto; display:inline-flex; opacity:.75; transition:transform .22s ease; }
.sidebar__footer[aria-expanded="true"] .sidebar__caret{ transform:rotate(180deg); }
.sidebar__menu{
position:absolute; bottom:100%; left:8px; right:8px; z-index:50; margin-bottom:6px;
padding:6px; background:var(--side-bg); border:.5px solid var(--side-border);
border-radius:var(--r-sm); box-shadow:0 -6px 20px rgba(0,0,0,.35);
}
.sidebar__avatar{
width:30px; height:30px; border-radius:50%; flex-shrink:0;
background:var(--side-avatar-bg); color:var(--side-logo);
display:inline-flex; align-items:center; justify-content:center;
font-size:var(--fs-label);
}
.sidebar__user-name{ color:var(--side-user-name); font-size:var(--fs-label); line-height:1.3;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar__user-role{ color:var(--side-caption); font-size:var(--fs-small); line-height:1.3; }
.hamburger{
display:none; align-items:center; justify-content:center;
width:34px; height:34px; background:none; border:none; border-radius:var(--r-sm);
color:var(--ink); cursor:pointer; padding:0;
}
.hamburger:hover{ background:var(--tile-bg); }
.main{ flex:1; min-width:0; background:var(--page-bg); padding:24px 28px; }
.main__topbar{ display:none; align-items:center; gap:10px; margin-bottom:14px; }
@media (max-width:900px){
.hamburger{ display:inline-flex; }
.main__topbar{ display:flex; }
.sidebar{
position:fixed; left:0; top:0; height:100vh;
transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow-card);
}
.app-shell.nav-open .sidebar{ transform:translateX(0); }
.app-shell.nav-open::after{
content:""; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:39;
}
.main{ width:100%; padding:16px; }
}
/* ============ Karty ============ */
.card{
background:var(--card-bg); border:.5px solid var(--hairline); border-radius:var(--r-md);
padding:1.75rem; box-shadow:var(--shadow-card); margin-bottom:1.4rem;
}
.card.narrow{ max-width:420px; margin-left:auto; margin-right:auto; }
/* ============ Nagłówek strony ============ */
.page-title{ font-size:var(--fs-page-title); font-weight:500; color:var(--ink); }
.page-sub{ font-size:var(--fs-body); color:var(--ink-2); margin-top:2px; }
.page-header{
display:flex; align-items:center; justify-content:space-between;
gap:12px; flex-wrap:wrap; margin-bottom:20px;
}
.page-header__actions{ display:flex; gap:8px; flex-wrap:wrap; }
/* ============ Kafle-metryki ============ */
.metric-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; }
/* Wariant dla siatek o ZMIENNEJ liczbie kafelków (raporty sprzedaży: 4 albo 5 zależnie
od wymiaru). Baza ma sztywne 4 kolumny i piąty kafelek spadałby jako sierota do
drugiego rzędu. auto-fit zwija puste tory, więc cztery kafelki wyglądają tak samo
jak dotąd. Modyfikator, a nie zmiana bazy — .metric-grid dzielą „Moja sprzedaż"
i inne moduły, którym nic do liczby kafelków raportu. */
.metric-grid--auto{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.metric-tile{ background:var(--tile-bg); border-radius:var(--r-sm); padding:14px 16px; }
.metric-tile__label{ font-size:var(--fs-label); color:var(--ink-2); }
.metric-tile__value{ font-size:var(--fs-metric); font-weight:500; color:var(--ink); margin-top:3px; }
@media (max-width:900px){
.metric-grid{ grid-template-columns:repeat(2,1fr); }
}
/* ============ Tabela danych ============ */
.data-table{
width:100%; border-collapse:collapse; font-size:var(--fs-body);
background:var(--card-bg); border:.5px solid var(--hairline); border-radius:var(--r-md);
overflow:hidden;
}
.data-table thead tr{ background:var(--tile-bg); }
/* Wykaz pozycji pod nazwą powierzenia (odzież, Etap 21). Kwoty zostają na protokole
PDF — w tabeli tylko „co i ile", żeby wiersz nie puchł. */
.lista-pozycji{ margin:.35rem 0 0; padding-left:1.1rem; color:var(--ink-2);
font-size:var(--fs-label); }
.lista-pozycji li{ margin:.1rem 0; }
.data-table th{ text-align:left; padding:11px 16px; color:var(--ink-2); font-weight:500; }
/* Nagłówek kolumny liczbowej wyrównany jak wartości (A1) — bez tego `.data-table th`
(wyższa specyficzność) wygrywa z `.num` i nazwa nie stoi nad danymi. */
.data-table th.num{ text-align:right; }
.data-table td{ padding:11px 16px; }
.data-table tbody tr{ border-top:.5px solid var(--hairline); }
.data-table tbody tr:hover{ background:var(--row-hover); }
.row--muted td{ color:var(--muted); }
.data-table .ta-center{ text-align:center; }
/* ============ Komórka „Sprzedawca” (avatar + nazwa + email) ============ */
.seller-cell{ display:flex; align-items:center; gap:10px; }
.seller-cell__email{ color:var(--muted); font-size:var(--fs-small); }
.seller-cell__tag{ color:var(--muted); font-size:10px; }
/* ============ Pill / badge (kalibracja kontrastu §3) ============ */
.pill-salon{
display:inline-block; font-size:var(--fs-small); font-weight:var(--pill-weight);
color:var(--pill-salon-ink); background:var(--pill-salon-bg);
padding:2px 7px; border-radius:var(--r-pill);
}
.badge-stawka{
display:inline-block; font-size:var(--fs-label); font-weight:var(--pill-weight);
color:var(--pill-stawka-ink); background:var(--pill-stawka-bg);
padding:2px 8px; border-radius:var(--r-pill);
}
/* Neutralna pigułka — marker „bez siatki" (admin signal §6), stany puste */
.pill-muted{
display:inline-block; font-size:var(--fs-small); font-weight:var(--pill-weight);
color:var(--neutral-ink); background:var(--neutral-bg);
padding:2px 8px; border-radius:var(--r-pill);
}
/* Pigułka „aktywny" (status konta — Etap 5) */
.pill-ok{
display:inline-block; font-size:var(--fs-small); font-weight:var(--pill-weight);
color:var(--ok-ink); background:var(--ok-bg);
padding:2px 8px; border-radius:var(--r-pill);
}
/* Modyfikator „Mój grafik": PRACA na JER = fuksja (nie rusza bazowej .pill-ok współdzielonej z premią) */
.pill-ok--jer{ color:var(--jer-ink); background:var(--jer-bg); }
/* Pigułka „kara" (ewidencja — Etap 10). Premia używa .pill-ok */
.pill-danger{
display:inline-block; font-size:var(--fs-small); font-weight:var(--pill-weight);
color:var(--danger-ink); background:var(--danger-bg);
padding:2px 8px; border-radius:var(--r-pill);
}
.table-wrap{ overflow-x:auto; }
/* ============ Avatar ============ */
.avatar{
width:28px; height:28px; border-radius:50%; flex-shrink:0;
background:var(--accent-bg); color:var(--accent-ink);
display:inline-flex; align-items:center; justify-content:center;
font-size:var(--fs-small);
}
.avatar--muted{ background:var(--neutral-bg); color:var(--neutral-ink); }
/* ============ Liczby ============ */
.num{ text-align:right; font-variant-numeric:tabular-nums; }
.num--strong{ font-weight:500; }
/* ============ Przyciski ============ */
button, .btn{
display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
padding:.62rem 1.15rem; font-size:.95rem; font-weight:600; font-family:inherit;
border:1px solid transparent; border-radius:var(--r-sm); cursor:pointer;
background:var(--accent-ink); color:var(--white); transition:background .15s, box-shadow .15s;
text-decoration:none;
}
button:hover, .btn:hover{ background:var(--accent-ink-hover); }
button:focus-visible, .btn:focus-visible{ outline:none; box-shadow:var(--ring); }
a.btn{ text-decoration:none; }
.btn--primary{ background:var(--accent-ink); color:var(--white); }
.btn--primary:hover{ background:var(--accent-ink-hover); }
.btn--secondary{
background:var(--card-bg); color:var(--ink); border-color:var(--border-input);
font-weight:500; padding:7px 12px; font-size:var(--fs-body);
}
.btn--secondary:hover{ background:var(--page-bg); }
.btn-danger{ background:var(--card-bg); color:var(--danger-ink); border-color:var(--danger-border); }
.btn-danger:hover{ background:var(--danger-bg); }
.btn-ghost{ background:var(--card-bg); color:var(--ink); border-color:var(--border-input); }
.btn-ghost:hover{ background:var(--page-bg); }
/* ============ Formularze ============ */
.field{ margin-bottom:1.15rem; }
.field label, form p label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:.4rem; color:var(--ink); }
/* `textarea` DOSZŁA do selektora przy Etapie D. Nie była tu od początku, więc KAŻDE
pole tekstowe w ONYX-ie (powód w ewidencji, uwagi przy sprzęcie, uzasadnienie urlopu,
kryterium KPI) renderowało się w domyślnych rozmiarach przeglądarki: wąskie, bez ramki
pasującej do reszty i bez obramowania na focusie. Przy dwóch-trzech wierszach dawało
się z tym żyć; przy regulaminie na 7000 znaków przestało. Jedna linijka naprawia
wszystkie naraz. */
input:not([type=checkbox]):not([type=radio]), select, textarea{
width:100%; padding:.62rem .8rem; font-size:1rem; color:var(--ink);
background:var(--card-bg); border:1px solid var(--border-input); border-radius:var(--r-sm);
transition:border-color .15s, box-shadow .15s; font-family:inherit;
}
input:focus, select:focus, textarea:focus{
outline:none; border-color:var(--accent-ink); box-shadow:var(--ring);
}
/* Pole na długi tekst: treść dokumentu, regulaminu, dłuższego opisu. Monospace, bo przy
tekście prawnym z numeracją („§ 2 ust. 3", „a)", „1.") stała szerokość znaku pomaga
utrzymać wcięcia i od razu widać, gdzie numeracja się rozjeżdża.
`resize:vertical` — poziomo i tak jest pełna szerokość karty, a swobodny resize
potrafi rozwalić układ. */
textarea.pole-dlugie{
min-height:32rem; line-height:1.5; font-size:.9rem; resize:vertical;
font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Licznik znaków pod polem — wyrównany do prawej, w tonacji podpowiedzi. */
.licznik-znakow{ display:block; text-align:right; color:var(--ink-2); font-size:.82rem;
margin-top:.35rem; font-variant-numeric:tabular-nums; }
.help, .helptext{ color:var(--ink-2); font-size:.82rem; margin-top:.4rem; }
.help ul, ul.helptext{ margin:.3rem 0 0; padding-left:1.1rem; }
.field-errors, ul.errorlist{
list-style:none; margin:.45rem 0 0; padding:0;
color:var(--danger-ink); font-size:.85rem; font-weight:500;
}
.field-errors li, ul.errorlist li{
background:var(--danger-bg); border:1px solid var(--danger-border);
border-radius:var(--r-sm); padding:.4rem .6rem; margin-top:.35rem;
}
/* Formularz w SEKCJACH + dwukolumnowy grid pól (FIX wizualny profilu grafiku): skraca
długą płaską listę pól, ogranicza scroll. Responsywny — 1 kolumna na wąskim ekranie.
Pola „szerokie" (listy checkboxów: salony, dni tygodnia) rozciągają się na 2 kolumny. */
.form-section{ margin-bottom:1.5rem; }
.form-section + .form-section{ border-top:.5px solid var(--hairline); padding-top:1.4rem; }
.form-section__title{ font-size:.95rem; font-weight:700; color:var(--ink); margin:0 0 1rem; }
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.5rem; }
.form-grid .field--wide{ grid-column:1 / -1; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
/* ============ Komunikaty (messages framework) ============ */
.alerts{ margin-bottom:1.3rem; display:flex; flex-direction:column; gap:.6rem; }
.alert{
display:flex; align-items:flex-start; gap:.55rem;
padding:.8rem 1rem; border-radius:var(--r-sm); border:1px solid;
font-size:.93rem; font-weight:500;
/* Ten sam rytm pionowy co .card — alert stojący nad kartą sklejał się z nią.
1.4rem, a nie mniej, żeby .card.alert (panel prowizji, siatka, mój grafik)
zachował dotychczasowy odstęp: obie reguły trafiają w ten sam element. */
margin-bottom:1.4rem;
}
/* Kontener komunikatów sam rozdziela wpisy (gap) i ma własny margines dolny —
tutaj margines pojedynczego alertu tylko dublowałby odstęp. */
.alerts .alert{ margin-bottom:0; }
.alert::before{ font-weight:700; line-height:1.4; }
.alert-success{ background:var(--ok-bg); color:var(--ok-ink); border-color:var(--ok-border); }
.alert-success::before{ content:"\2713"; color:var(--ok-ink); }
.alert-error, .alert-danger{ background:var(--danger-bg); color:var(--danger-ink); border-color:var(--danger-border); }
.alert-error::before, .alert-danger::before{ content:"!"; color:var(--danger-ink); }
.alert-info, .alert-warning{ background:var(--warn-bg); color:var(--warn-ink); border-color:var(--warn-border); }
.status-pill{
display:inline-block; padding:.15rem .6rem; border-radius:var(--r-pill);
font-size:.8rem; font-weight:600;
}
.status-on{ background:var(--ok-bg); color:var(--ok-ink); }
.status-off{ background:var(--neutral-bg); color:var(--neutral-ink); }
@media (max-width:520px){
.card{ padding:1.25rem; }
}
/* ============ Panel pracownika (mobile-first hero, Etap 4 Task 4) ============ */
.panel-hero__label{ font-size:var(--fs-label); color:var(--ink-2); }
.panel-hero__netto{
font-size:var(--fs-hero); font-weight:600; color:var(--ink);
text-align:left; margin:.15rem 0 .3rem;
}
.panel-hero__sub{ font-size:var(--fs-body); color:var(--ink-2); }
.panel-hero__salons{ margin-top:.7rem; display:flex; gap:8px; flex-wrap:wrap; }
.panel-hero__row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:.7rem; }
.panel-hero__prowizja{
font-size:var(--fs-prowizja); font-weight:600; color:var(--ink);
text-align:left; margin:.1rem 0 .8rem;
}
.threshold-block{
background:var(--tile-bg); border-radius:var(--r-sm); padding:14px 16px;
font-size:var(--fs-body); color:var(--ink);
}
.threshold-block__amount{ font-size:var(--fs-metric); font-weight:600; }
/* ============ Skróty pulpitu — dashboard (Etap 4, Task 5) ============ */
.shortcut-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; }
.shortcut-card{
display:flex; align-items:center; gap:12px; background:var(--card-bg);
border:.5px solid var(--hairline); border-radius:var(--r-md); padding:16px;
color:var(--ink); text-decoration:none; box-shadow:var(--shadow-card);
transition:background .15s, border-color .15s;
}
.shortcut-card:hover{ background:var(--row-hover); border-color:var(--border-input); }
.shortcut-card__icon{
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px; border-radius:var(--r-sm);
background:var(--accent-bg); color:var(--accent-ink); flex-shrink:0;
}
.shortcut-card__label{ font-size:var(--fs-body); font-weight:500; color:var(--ink); }
.shortcut-card--disabled{
cursor:default; color:var(--muted); box-shadow:none;
background:var(--tile-bg); border-style:dashed;
}
.shortcut-card--disabled .shortcut-card__icon{ background:var(--neutral-bg); color:var(--neutral-ink); }
.shortcut-card--disabled .shortcut-card__label{ color:var(--muted); font-weight:500; }
.shortcut-grid--compact{ grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:0; }
@media (max-width:900px){
.shortcut-grid{ grid-template-columns:repeat(2,1fr); }
.shortcut-grid--compact{ grid-template-columns:repeat(2,1fr); }
}
/* ============ QR 2FA (enable_2fa) ============ */
.qr-enroll{ text-align:center; margin:1.2rem 0; }
.qr-code{
max-width:220px; width:100%; padding:.5rem; background:var(--white);
border:1px solid var(--hairline); border-radius:var(--r-sm);
}
/* --- Raporty: pasek kontroli (Etap 7) --- */
.report-tabs{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
.report-tab{
padding:.4rem .9rem; border-radius:var(--r-pill); text-decoration:none;
font-size:var(--fs-small); color:var(--ink); background:var(--page-bg);
border:.5px solid var(--hairline);
}
.report-tab.is-active{ background:var(--accent-bg); color:var(--accent-ink); border-color:var(--accent-bg); }
.report-filters{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-end; }
.report-filters .field{ margin:0; }
.report-filters input{ width:auto; min-width:6rem; }
.report-filters button{ height:2.4rem; }
/* Grafik (§FIX): filtry + akcje toolbara w JEDNEJ linii poziomej (odzysk pionu — cały
miesiąc na ekran). Oba kontenery (form filtrów + div akcji) to flex-itemy; flex-wrap
łamie się DOPIERO awaryjnie na wąskim ekranie. align-items:flex-end wyrównuje akcje
do dołu — w linii z polami i „Pokaż" (labele filtrów są nad polami). */
.grafik-controls{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem 1rem; }
.grafik-controls .report-filters{ flex:0 1 auto; }
/* Grafik (§FIX): blokady per-salon + status generowania w JEDNEJ linii (odzysk pionu) —
status dochodzi ZA blokadami. align-items:center wyrównuje pill-e i tekst statusu;
inner divy tracą własny margin-top (nosi go .grafik-status-row). flex-wrap awaryjnie. */
.grafik-status-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem 1rem; margin-top:.5rem; }
.grafik-status-row > div{ margin:0; }
/* --- Raporty: wykresy SVG (Etap 7) --- */
.chart-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1rem; margin:1rem 0; }
.chart{ background:var(--card-bg); border:.5px solid var(--hairline); border-radius:var(--r-md); padding:1rem; }
.chart__title{ font-size:var(--fs-small); color:var(--muted); margin-bottom:.5rem; font-weight:600; }
/* --- Grafik (Etap 8) --- */
/* Pionowe nagłówki pracowników. Imię i nazwisko łamane na dwie równoległe kolumny
(człony w szablonie przez
), więc najwyższy człon = najdłuższy pojedynczy wyraz
(~10 zn.) — mieści się bez obcinania. Bez max-height (to ono + overflow:hidden tabeli
obcinały długie nazwiska); wysokość i tak MNIEJSZA niż wcześniejsze 90px. */
/* Wyrównanie nagłówek↔treść: te same padding + wyśrodkowanie dla th i td (nadpisuje
.data-table th 11px/16px/left, które rozjeżdżało kolumny). Cienkie pionowe linie
siatki (border-left, --hairline — istniejący kolor) dla czytelności; pierwszy
słupek bez linii (nie dubluje ramki tabeli). box-sizing:border-box jest globalny. */
.grafik-siatka th, .grafik-siatka td{ text-align:center; padding:.25rem .4rem;
border-left:.5px solid var(--hairline); }
.grafik-siatka th:first-child, .grafik-siatka td:first-child{ border-left:none; }
/* Wyraźna granica między siatką dni a wierszem podsumowania (Σ/norma) — bez tego
tfoot zlewa się z ostatnim dniem miesiąca. Dotyczy obu widoków (per-salon i „Wszystko",
ta sama .grafik-siatka). Kolor --ink-2 (średnia szarość, ten sam co nagłówki tabeli),
NIE --hairline: linia ma być wyraźnie mocniejsza niż zwykłe linie wierszy (.5px
--hairline). Tabela ma border-collapse:collapse, więc border na renderuje się
(tak jak istniejące .data-table tbody tr) i wygrywa z sąsiednimi 0-szerokości. */
.grafik-siatka tfoot tr{ border-top:1.5px solid var(--ink-2); }
/* FIX 1: większa (czytelniejsza) czcionka pionowych nazwisk (--fs-small 11px → --fs-body
13px, +~18%). Tekst PIONOWY → rośnie w PIONIE (wyższy nagłówek), NIE poszerza kolumn
(grafik-cell min-width bez zmian), więc tabela nie rozjeżdża się w poziomie. */
/* FIX 3: mocniejszy kontrast nazwisk — własny czarny --ink zamiast dziedziczonego
szarawego koloru komórek tabeli. */
.grafik-siatka th.grafik-emp{ writing-mode:vertical-rl; transform:rotate(180deg); white-space:normal; font-weight:600; font-size:var(--fs-body); color:var(--ink); line-height:1.2; padding:.35rem .15rem; vertical-align:middle; }
.grafik-cell{ min-width:2.2rem; }
/* Tabela grafiku scrolluje się z całą stroną (bez wewnętrznego scrollera — wygodniej).
overflow:visible nadpisuje .data-table overflow:hidden, żeby długa siatka nie była
obcinana. Poziomy scroll szerokiej tabeli zapewnia .table-wrap (overflow-x:auto). */
.grafik-siatka{ overflow:visible; }
.grafik-edit{ cursor:pointer; }
.grafik-edit:hover{ background:var(--accent-bg); }
/* Ręczna edycja (§6): subtelny znacznik — kropka w rogu (tło zajęte przez urlop/dni). */
.grafik-manual{ position:relative; }
.grafik-manual::after{ content:""; position:absolute; top:1px; right:1px; width:5px; height:5px;
border-radius:50%; background:var(--accent-ink); opacity:.65; }
/* KONFLIKT (§3 pkt 3): PRACA w >1 salonie tego dnia — czerwona ramka, do rozstrzygnięcia. */
.grafik-konflikt{ outline:2px solid #c0392b; outline-offset:-2px; }
/* Salon zablokowany (§7, widok „Wszystko"): komórka wygaszona, edycja wyłączona
(front-end gate; serwer i tak odrzuca zapis). */
.grafik-locked{ background:repeating-linear-gradient(45deg,#f4f4f2,#f4f4f2 4px,#ececec 4px,#ececec 8px);
color:var(--muted); cursor:not-allowed; opacity:.7; }
/* Lista przeciągalna — osobista kolejność kolumn grafiku (drag + ↑/↓ fallback). */
.reorder-list{ list-style:none; margin:0; padding:0; }
.reorder-item{ display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem;
border:.5px solid var(--hairline); border-radius:var(--r-md); margin-bottom:.4rem;
background:var(--surface,#fff); cursor:grab; }
.reorder-item:hover{ background:var(--accent-bg); }
.reorder-item.reorder-dragging{ opacity:.5; cursor:grabbing; }
.reorder-grip{ color:var(--muted); font-size:1.1rem; line-height:1; }
.reorder-name{ flex:1; font-weight:600; }
.reorder-item .row-actions .btn{ padding:.1rem .5rem; }
/* Badge diagnostyki generowania (raport w tooltipie): wyraźny trigger — ikona,
kolor, obramowanie i podkreślenie, żeby od razu było widać że coś tam jest.
Wspólny layout; kolor + ikonę daje modyfikator (--ok / --blad) — nie polegamy
wyłącznie na barwie (dostępność: różne ikony). */
.diag-badge{ display:inline-flex; align-items:center; gap:.28em; margin-left:.15rem;
border:1px solid currentColor; border-radius:999px;
padding:.02rem .5rem; font-size:.8rem; font-weight:600; line-height:1.4;
text-decoration:underline; text-underline-offset:2px; cursor:help; white-space:nowrap; }
.diag-badge::before{ text-decoration:none; font-size:.95em; }
.diag-badge:hover, .diag-badge:focus{ text-decoration:none; }
/* OK / szczegóły: informacyjny, kolor akcentowy, ikona (i) — bez zmian. */
.diag-badge--ok{ color:var(--accent-ink); }
.diag-badge--ok::before{ content:"ⓘ"; }
.diag-badge--ok:hover, .diag-badge--ok:focus{ background:var(--accent-bg); }
/* Błąd: ten sam czerwony co .grafik-konflikt (#c0392b) + trójkąt ostrzegawczy. */
.diag-badge--blad{ color:#c0392b; }
.diag-badge--blad::before{ content:"⚠"; }
.diag-badge--blad:hover, .diag-badge--blad:focus{ background:#fbe3e3; }
/* Rozwijany pełny raport diagnostyki (FIX: klik , nie tooltip). Summary = badge
(klikalny), panel pod spodem: każde ostrzeżenie w osobnej linii (white-space:pre-wrap
zachowuje \n z workera), monospace, delikatne tło, scroll gdy długie. Zero JS. */
.diag-details{ display:inline-block; }
.diag-details > summary{ cursor:pointer; list-style:none; }
.diag-details > summary::-webkit-details-marker{ display:none; }
.diag-details > summary::marker{ content:""; }
.diag-panel{ display:block; margin-top:.4rem; padding:.6rem .75rem;
white-space:pre-wrap; word-break:break-word;
font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.8rem;
line-height:1.5; color:var(--ink); background:var(--surface,#f6f6f4);
border:1px solid var(--hairline); border-radius:var(--r-sm);
max-height:16rem; overflow:auto; max-width:min(680px,90vw); cursor:auto; }
.grafik-sobota{ background:#fdf6e3; }
.grafik-nh{ background:#eaf3fb; }
.grafik-zamkniety{ background:#f4f4f2; color:var(--muted); }
.grafik-swieto{ background:#fbeaea; }
.grafik-praca{ font-weight:600; color:var(--accent-ink); }
.grafik-urlop{ color:#0c447c; font-weight:600; }
.grafik-l4{ color:#a15; font-weight:600; }
.grafik-wolne{ color:var(--muted); }
/* Uwaga do grafiku (FIX uwagi §5): wolne z PROŚBY pracownika — MIĘKKIE, odrzucalne przez
Anię (w odróżnieniu od TWARDEGO urlopu). Fioletowy akcent + romb ◇, nie żółte tło urlopu
— Ania od razu widzi „to mogę odrzucić jeśli trzeba". Działa w obu widokach (per salon
i „Wszystko"). */
.grafik-uwaga{ background:#efe7fb; }
.grafik-uwaga-mark{ color:#6b3fa0; font-weight:700; }
/* Otwierający (H10, prezentacja): dyskretny kluczyk przy PRACA — Ania widzi kto otwiera
salon danego dnia. Mały, ciepły akcent (bursztyn), nie zaśmieca; szczegół w tooltipie. */
.grafik-otwieracz{ display:inline-flex; align-items:center; margin-left:3px; color:#b7791f;
vertical-align:middle; }
.grafik-otwieracz .ti{ width:13px; height:13px; }
/* Widok „Wszystko" (scalony, jak Excel): lokacja+godziny w komórce, żółty urlop,
czerwony wiersz niedzieli niehandlowej. Scoped — nie rusza widoków per salon. */
.grafik-wszystko td.grafik-loc{ white-space:nowrap; font-size:.72rem; }
.grafik-wszystko td.cell-urlop{ background:#fff3b0; }
.grafik-wszystko tr.dzien-niehandlowa{ background:#fbe3e3; color:var(--muted); }
.grafik-moj__row{ display:flex; align-items:center; gap:1rem; padding:.5rem .75rem; border-bottom:.5px solid var(--hairline); }
.grafik-moj__row.is-zamkniety{ background:#f4f4f2; }
.grafik-moj__row.is-nh{ background:#eaf3fb; }
.grafik-moj__row.is-sobota{ background:#fdf6e3; }
.grafik-moj__day{ display:flex; gap:.4rem; align-items:baseline; min-width:3.5rem; }
.grafik-moj__num{ font-weight:700; font-size:1.1rem; }
.grafik-moj__wd{ color:var(--muted); font-size:var(--fs-small); }
.grafik-moj__closed{ color:var(--muted); }
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal-backdrop .card{ max-width:340px; width:90%; }
/* --- Karta motywacyjna „Szacowana wypłata" (Etap 18) --- */
/* Średni akcent: czytelne paski, stonowana paleta z tokenów, bez ciężkiego JS. */
.progress{ height:.55rem; border-radius:999px; background:var(--hairline); overflow:hidden; margin:.4rem 0; }
.progress__bar{ height:100%; border-radius:999px; background:var(--accent-ink); transition:width .3s ease; }
.progress__bar--ok{ background:var(--ok-ink); }
.progress--hero{ height:.8rem; margin:.75rem 0 .5rem; background:rgba(255,255,255,.45); }
.progress--hero .progress__bar{ background:var(--accent-ink); }
.hero-card{ background:var(--accent-bg); border:1px solid var(--accent-bg); border-left:4px solid var(--accent-ink);
border-radius:var(--radius); padding:1rem 1.15rem; margin-bottom:1rem; }
.hero-card__label{ font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.05em; color:var(--accent-ink); font-weight:700; }
.hero-card__headline{ font-size:1.25rem; font-weight:700; color:var(--ink); margin-top:.2rem; }
.hero-card__gain{ font-size:1.05rem; font-weight:700; color:var(--ok-ink); margin-top:.15rem; }
.hero-card__cheer{ color:var(--accent-ink); font-size:var(--fs-small); }
/* Kwoty karty wypłaty (Etap 6 §3B). WŁASNE klasy, nie .metric-tile — tamte są
współdzielone z sekcją „Moja sprzedaż" niżej na tej samej stronie i z innymi modułami,
więc powiększenie ich globalnie rozjechałoby cudze widoki.
auto-fit: przy jednym kafelku kolumna wypełnia szerokość — żaden stan nie zostawia
dziury po prognozie, której nie ma. */
.kwoty-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.kwota-tile{ background:var(--tile-bg); border:1px solid transparent;
border-radius:var(--r-sm); padding:18px 20px; }
/* Prognoza jest szacunkiem, więc lżejsza — ale NIE szara-na-szarym i nie drobnym drukiem:
ta sama wielkość liczby, co „na dziś". */
.kwota-tile--prognoza{ background:var(--card-bg); border-color:var(--hairline); }
.kwota-tile__label{ font-size:var(--fs-label); color:var(--ink-2); }
.kwota-tile__value{ font-size:2rem; font-weight:600; color:var(--ink);
margin-top:.15rem; line-height:1.15; }
.kwota-tile--prognoza .kwota-tile__value{ color:var(--accent-ink); font-weight:500; }
.kwota-tile__gwiazdka{ font-size:1rem; font-weight:400; color:var(--ink-2);
vertical-align:super; margin-left:.1rem; }
/* Porównanie z poprzednim miesiącem WZMACNIA prognozę od środka kafelka — wcześniej
konkurowało z nią osobną zieloną ramką obok. */
.kwota-badge{ display:inline-block; margin-top:.6rem; padding:.22rem .6rem;
border-radius:var(--r-pill); font-size:var(--fs-small); font-weight:600; }
.kwota-badge--lepiej{ background:var(--ok-bg); color:var(--ok-ink); }
.kwota-badge--podobnie{ background:var(--accent-bg); color:var(--accent-ink); }
.kwota-badge--nadrobic{ background:var(--warn-bg); color:var(--warn-ink); }
/* Próg prowizji (Etap 6B) — WEWNĄTRZ kafelka kwoty, oddzielony włosową kreską, a nie
doklejony pod nim jako kolejna ramka: karta przestała być zlepkiem ramek i ma taka
zostać. Bez paska postępu — w tak wąskim kafelku byłby ciasny, a spec woli bez. */
.kwota-skok{ margin-top:.75rem; padding-top:.65rem; border-top:.5px solid var(--hairline);
font-size:.88rem; line-height:1.45; color:var(--accent-ink); font-weight:500; }
.kwota-skok--najwyzszy{ color:var(--ok-ink); }
.kwoty-detal{ margin-top:.9rem; font-size:.92rem; color:var(--ink); }
.kwoty-przypis{ margin-top:.9rem; padding-top:.7rem; border-top:.5px solid var(--hairline);
font-size:var(--fs-small); color:var(--ink-2); line-height:1.5; }
.kpi-goal{ padding:.7rem 0; border-bottom:.5px solid var(--hairline); }
.kpi-goal:last-child{ border-bottom:none; }
.kpi-goal__head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.kpi-goal__name{ font-weight:600; }
.kpi-goal__prize{ color:var(--ok-ink); font-weight:600; font-size:var(--fs-small); white-space:nowrap; }
.kpi-goal__msg{ font-size:var(--fs-small); color:var(--muted); }
.kpi-goal--done .kpi-goal__msg{ color:var(--ok-ink); }
/* Pasek filtrów „Kary i premie": realny flex-row (dawniej .inline-form NIE był
flexem, więc inline gap/margin nie działały — A3 popr.). Pola nie rozciągane na
100%, akcje (Filtruj/Wyczyść) odsunięte na prawo → odstęp od pola „Miesiąc". */
.filter-bar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem; }
.filter-bar > label{ display:flex; flex-direction:column; gap:.3rem; margin:0; font-weight:600; font-size:.9rem; color:var(--ink); }
.filter-bar select, .filter-bar input{ width:auto; min-width:8rem; }
.filter-actions{ display:inline-flex; gap:.5rem; align-items:flex-end; margin-left:auto; }
/* Akcje w wierszach tabeli (Edytuj/Usuń) — para równych przycisków z odstępem. */
.row-actions{ display:flex; gap:.5rem; align-items:center; }
.row-actions form{ margin:0; }
/* Chipy przypisań (zespoły C2c-0) — pigułka „imię + ×(odepnij)", estetyka jak pill-muted;
układają się w wierszu i zawijają. Sam „×" to bare-button (nadpisuje domyślny .btn). */
.chip-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.35rem 0 0; padding:0; list-style:none; }
.chip{ display:inline-flex; align-items:center; gap:.4rem; font-size:var(--fs-body);
color:var(--ink); background:var(--neutral-bg); padding:3px 5px 3px 12px;
border-radius:var(--r-pill); }
.chip form{ margin:0; display:inline-flex; }
.chip__x{ background:transparent; border:0; border-radius:0; box-shadow:none; padding:0 .2rem;
color:var(--muted); font-size:1.05rem; line-height:1; cursor:pointer; }
.chip__x:hover{ background:transparent; color:var(--danger-ink); }
/* Bloki managerów (zespoły) — stałe 3 kolumny, zawijają do kolejnych rzędów; węższe
ekrany → mniej kolumn (panel admina desktop, ale bez łamania na mobile). */
.zespoly-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; margin-top:.75rem; }
.zespol-blok{ border:.5px solid var(--hairline); border-radius:var(--r-md); padding:1rem;
background:var(--card-bg); box-shadow:var(--shadow-card); }
@media (max-width:1000px){ .zespoly-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .zespoly-grid{ grid-template-columns:1fr; } }
/* Wiersz akcji pod treścią karty — odstęp od tekstu nad nim + równe odstępy (A4). */
.card-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
/* Pasek narzędzi grafiku (A5): trzy akcje w jednym wierszu, powiększone, równe odstępy.
Wcześniej