/* WORKVEO – motyw „Jak strona WORKVEO” (html.nowy[data-theme=strona], v1.119.0): program wygląda jak nowa strona workveo.pl
   i ekran logowania „Jak strona WORKVEO”. Białe tło, granat, szare pola, przyciski-pigułki, nagłówki krojem
   Schibsted Grotesk (czcionka zadeklarowana w logowanie.css), gradient fiolet–błękit–turkus. Na komputerze menu
   z boku (THEME_LAYOUT w podstawy.js), na tablecie u góry, na telefonie dolny pasek zakładek. Reszta wyglądu bierze się ze zmiennych z wyglad.css. */
html[data-theme=strona]{
  --bg:#fff; --card:#fff; --ink:#0B1F3F; --ink2:#46566E; --line:#E1E5ED; --line2:#E9ECF2;
  --accent:#08876E; --accent-soft:#E3F7F2; --accent2:#08876E; --violet:#7C5CF6; --violet-soft:#EFEBFE;
  --radius:20px; --radius-sm:12px; --shadow:0 1px 2px rgba(11,31,63,.04),0 10px 28px -18px rgba(11,31,63,.22);
  --primary:#0B1F3F; --surface2:#F2F3F8; --head:#EFF1F6; --hover:#F6F7FB; --input:#F2F3F8;
  --side-ink:#46566E; --side-on:#0B1F3F; --side-on-ink:#fff;
  --grad:linear-gradient(120deg,#7C5CF6 0%,#5E8BF0 48%,#12C9A4 100%);
  --tytul:"Schibsted Grotesk",Inter,system-ui,sans-serif;
  --wvs-przycisk:var(--surface2); --wvs-przycisk-ramka:transparent; --wvs-przycisk-hover:#E6E8F0;
  --wvs-pole:var(--input); --wvs-pole-ramka:transparent;
}
/* po zalogowaniu (v1.126.0): jasnoszare tło jak szare sekcje strony, żeby białe karty, kafelki i tabele odcinały się od tła,
   a menu z boku zostaje białe. Na tle przyciski i pola są białe z cienką ramką, w kartach i oknach szare jak na stronie.
   Ekran logowania zostaje biały */
html[data-theme=strona]:has(> body > .top:not(.hidden)){--bg:#EFF2F7; --wvs-przycisk:#fff; --wvs-przycisk-ramka:#DCE1EA; --wvs-przycisk-hover:#F6F7FB; --wvs-pole:#fff; --wvs-pole-ramka:#DCE1EA}
html.nowy[data-theme=strona] :is(.card,.modal-box,.sw){--wvs-przycisk:var(--surface2); --wvs-przycisk-ramka:transparent; --wvs-przycisk-hover:#E6E8F0; --wvs-pole:var(--input); --wvs-pole-ramka:transparent}
html.nowy[data-theme=strona] h1{font-family:var(--tytul);font-size:34px;font-weight:700;letter-spacing:-.035em;line-height:1.08}
html.nowy[data-theme=strona] .card h2,html.nowy[data-theme=strona] .modal-box h2{font-family:var(--tytul);font-size:20px;font-weight:700;letter-spacing:-.02em}
html.nowy[data-theme=strona] .sw-big,html.nowy[data-theme=strona] .tile .v,html.nowy[data-theme=strona] .kpi-v,html.nowy[data-theme=strona] .reg-big,html.nowy[data-theme=strona] .wk-big{font-family:var(--tytul);font-weight:700;letter-spacing:-.04em;font-variant-numeric:normal}
html.nowy[data-theme=strona] :focus-visible{outline-color:#7C5CF6}

/* karty, kafelki, tabele */
html.nowy[data-theme=strona] .card{border-color:var(--line);border-radius:24px;padding:24px}
html.nowy[data-theme=strona] .card > h2:first-child{margin-bottom:16px}
/* Ustawienia: nazwy grup kafelków jak nagłówki sekcji na stronie */
html.nowy[data-theme=strona] .set-g{margin:0 0 12px;font-family:var(--tytul);font-size:20px;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
html.nowy[data-theme=strona] .tile{border-radius:20px}
html.nowy[data-theme=strona] .tile.acc{border-color:transparent}
html.nowy[data-theme=strona] .sw{border-radius:24px;box-shadow:var(--shadow)}
html.nowy[data-theme=strona] .sw-navy{background:#0B1F3F}
/* nagłówek tabeli jako wyraźny szary pas z ciemniejszą kreską pod spodem, wiersze rozdzielone kreską */
html.nowy[data-theme=strona] th{background:var(--head);border-bottom-color:var(--line)}
html.nowy[data-theme=strona] thead th{font-weight:700}
html.nowy[data-theme=strona] td{border-bottom-color:var(--line2)}
/* szerokie tabele (Pracownicy, Stawki i procenty, Lista płac): bez wewnętrznego marginesu karty, pas grupy (np. „Biuro”) jasnoszary */
@media(min-width:761px){
  html.nowy[data-theme=strona] .card.table-wrap.freeze{padding:0}
  html.nowy[data-theme=strona] .freeze :is(td,th):first-child{padding-left:20px}
  html.nowy[data-theme=strona] .freeze :is(td,th):last-child{padding-right:20px}
}
html.nowy[data-theme=strona] .freeze tbody th[colspan]{background:#F7F8FB;color:var(--ink)}
html.nowy[data-theme=strona] .chip{border-radius:999px}
html.nowy[data-theme=strona] .banner{border-radius:14px}

/* przyciski jak na stronie: pigułki, granatowy główny, szare pozostałe */
html.nowy[data-theme=strona] .btn{padding:9px 18px;border-color:var(--wvs-przycisk-ramka);border-radius:999px;background:var(--wvs-przycisk);transition:background-color .2s}
html.nowy[data-theme=strona] .btn:hover{border-color:var(--wvs-przycisk-ramka);background:var(--wvs-przycisk-hover)}
html.nowy[data-theme=strona] .btn.small{padding:6px 13px}
html.nowy[data-theme=strona] .btn.primary,html.nowy[data-theme=strona] .btn.dark{background:var(--primary);border-color:var(--primary);color:#fff}
html.nowy[data-theme=strona] .btn.primary:hover,html.nowy[data-theme=strona] .btn.dark:hover{background:#163563;border-color:#163563;filter:none}
html.nowy[data-theme=strona] .btn.ghost{background:transparent;border-color:var(--line)}
html.nowy[data-theme=strona] .btn.ghost:hover{background:var(--surface2)}
html.nowy[data-theme=strona] .btn.danger{background:var(--bad-soft);border-color:transparent}
html.nowy[data-theme=strona] .btn.gold{background:var(--accent);border-color:var(--accent)}
html.nowy[data-theme=strona] .btn.danger.big{background:var(--bad);border-color:var(--bad);color:#fff}
html.nowy[data-theme=strona] .btn.sw-cust{padding:10px 18px;border-color:transparent;background:var(--grad);color:#fff;box-shadow:0 10px 24px -14px rgba(124,92,246,.9)}

/* pola jak na stronie: szare, bez ramki, przy pisaniu gradientowa kreska u dołu */
html.nowy[data-theme=strona] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),html.nowy[data-theme=strona] select,html.nowy[data-theme=strona] textarea{border-color:var(--wvs-pole-ramka);border-radius:12px;background-color:var(--wvs-pole)}
html.nowy[data-theme=strona] input:not([type=checkbox]):not([type=radio]):focus,html.nowy[data-theme=strona] select:focus,html.nowy[data-theme=strona] textarea:focus{outline:0;border-color:transparent;background-color:#EAECF4;box-shadow:inset 0 -3px 0 #12C9A4}

/* okna */
html.nowy[data-theme=strona] .modal{background:rgba(11,31,63,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.nowy[data-theme=strona] .modal-box{padding:28px;border:0;border-radius:24px;box-shadow:0 40px 70px -30px rgba(7,20,38,.55)}

/* menu: na komputerze z boku (napisy z piktogramami, wybrana zakładka granatowa jak przyciski na stronie),
   na tablecie i telefonie jak w innych wyglądach z menu z boku. „Wyloguj” granatowy z gradientową obwódką */
html[data-theme=strona]{--side-bg:#fff; --side-line:#EEF0F5; --side-ink:#46566E; --side-on:#0B1F3F; --side-on-ink:#0B1F3F; --side-w:264px}
html.nowy[data-theme=strona] .company-name{font-size:17px}
html.nowy[data-theme=strona] .who-ini{background:var(--surface2);color:var(--ink)}
@property --wvs-kat{syntax:"<angle>";initial-value:0deg;inherits:false}
html.nowy[data-theme=strona] .who .btn{--wvs-tlo:#0B1F3F;padding:8px 18px;border:2px solid transparent;color:#fff;font-size:14px;
  background:linear-gradient(var(--wvs-tlo),var(--wvs-tlo)) padding-box,conic-gradient(from var(--wvs-kat),#7C5CF6,#5E8BF0,#12C9A4,#5E8BF0,#7C5CF6) border-box;
  box-shadow:0 10px 24px -14px rgba(124,92,246,.9);animation:wvs-obrot 6s linear infinite}
html.nowy[data-theme=strona] .who .btn:hover{--wvs-tlo:#163563}
@keyframes wvs-obrot{to{--wvs-kat:360deg}}
@media (prefers-reduced-motion:reduce){html.nowy[data-theme=strona] .who .btn{animation:none}}
html.nowy[data-theme=strona] #nav a,html.nowy[data-theme=strona] .nav-more-btn{border-radius:999px;color:var(--ink)}
html.nowy[data-theme=strona] #nav a .nav-ic{color:var(--ink2)}
html.nowy[data-theme=strona] #nav a.on,html.nowy[data-theme=strona] .nav-more-btn.on{background:#0B1F3F;color:#fff;box-shadow:none}
html.nowy[data-theme=strona] #nav a.on .nav-ic{color:#12C9A4}
html.nowy[data-theme=strona] #nav a.on .nav-b{background:#12C9A4;color:#0B1F3F}
html.nowy[data-theme=strona] .nav-drop{border-radius:18px;padding:8px;box-shadow:0 30px 60px -30px rgba(7,20,38,.45)}
html.nowy[data-theme=strona] .nav-drop a{border-radius:12px!important}
@media(min-width:1024px){
  html.nowy[data-theme=strona] .top{padding:26px 16px 16px}
  html.nowy[data-theme=strona] .brand{gap:16px;padding:0 6px 10px}
  html.nowy[data-theme=strona] .brand-logo{height:30px}
  html.nowy[data-theme=strona] .company-name{border:0;border-radius:14px;padding:11px 14px;background:var(--surface2);font-family:var(--tytul);font-size:17px;letter-spacing:-.01em}
  html.nowy[data-theme=strona] .nav-g{padding:18px 14px 6px;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:#8A98AC}
  html.nowy[data-theme=strona] #nav a{gap:12px;padding:11px 14px;font-size:15px}
  html.nowy[data-theme=strona] #nav a:hover{background:var(--surface2)}
  html.nowy[data-theme=strona] #nav a.on:hover{background:#0B1F3F}
  html.nowy[data-theme=strona] .nav-grp{gap:3px}
  html.nowy[data-theme=strona] .who{align-items:center;padding:16px 6px 0}
  html.nowy[data-theme=strona] .who .btn{flex-basis:100%;justify-content:center}
  html.nowy[data-theme=strona] .top:not(.hidden) ~ main{padding:40px 44px 72px}
}
/* tablet: logo, firma i „Wyloguj” w pierwszym rzędzie, pod nimi przewijany rząd zakładek-pigułek */
@media(min-width:761px) and (max-width:1023px){
  html.nowy[data-theme=strona] .top{flex-wrap:wrap;row-gap:10px;padding:12px 20px 10px}
  html.nowy[data-theme=strona] .who{margin-left:auto}
  html.nowy[data-theme=strona] #nav{order:5;flex:1 1 100%;flex-wrap:nowrap;justify-content:flex-start;gap:4px;margin:0 -20px;padding:0 20px 2px;overflow-x:auto;scrollbar-width:none}
  html.nowy[data-theme=strona] #nav::-webkit-scrollbar{display:none}
  html.nowy[data-theme=strona] #nav a{flex:none;padding:8px 14px}
  html.nowy[data-theme=strona] #nav a .nav-t{display:none}
  html.nowy[data-theme=strona] #nav a .nav-s{display:inline}
}

/* Start: duże powitanie jak nagłówek strony (właściciel i pracownik) */
html.nowy[data-theme=strona] .sw-head h1,html.nowy[data-theme=strona] .st-head h1{font-size:52px;letter-spacing:-.045em;line-height:1}
html.nowy[data-theme=strona] .sw-head .st-date,html.nowy[data-theme=strona] .st-head .st-date{margin-bottom:6px;font-size:16px}

/* telefon: biały nagłówek, dolny pasek z gradientową kreską nad wybraną zakładką */
@media(max-width:760px){
  html.nowy[data-theme=strona] .top{border-bottom:1px solid var(--line2)}
  html.nowy[data-theme=strona] h1{font-size:28px}
  html.nowy[data-theme=strona] .sw-head h1,html.nowy[data-theme=strona] .st-head h1{font-size:38px}
  html.nowy[data-theme=strona] .card{padding:18px;border-radius:20px}
  html.nowy[data-theme=strona] .tabbar:not(.hidden){border-top-color:var(--line2)}
  html.nowy[data-theme=strona] .tabbar .on{color:var(--ink)}
  html.nowy[data-theme=strona] .tabbar .on::before{content:"";position:absolute;top:-6px;left:50%;width:28px;height:3px;margin-left:-14px;border-radius:0 0 3px 3px;background:var(--grad)}
  html.nowy[data-theme=strona] .tabbar .tab-more.on::before{content:none}
}

/* wydruk (karta rozliczenia, lista płac): białe tło i bez cieni */
@media print{html[data-theme=strona],html[data-theme=strona]:has(> body > .top:not(.hidden)){--bg:#fff; --shadow:none}}