/* 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:#E6E8F0; --line2:#EEF0F5;
  --accent:#08876E; --accent-soft:#E3F7F2; --accent2:#08876E; --violet:#7C5CF6; --violet-soft:#EFEBFE;
  --radius:20px; --radius-sm:12px; --shadow:none;
  --primary:#0B1F3F; --surface2:#F2F3F8; --head:#F7F8FB; --hover:#F5F6FA; --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;
}
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] .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:none}
html.nowy[data-theme=strona] .sw-navy{background:#0B1F3F}
html.nowy[data-theme=strona] th{background:var(--head)}
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:transparent;border-radius:999px;background:var(--surface2);transition:background-color .2s}
html.nowy[data-theme=strona] .btn:hover{border-color:transparent;background:#E6E8F0}
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:transparent;border-radius:12px;background-color:var(--input)}
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}
}