/* ================================================================ Huisstijl van Lenselink voor de werkschermen
   Eén stijl voor productie, toelevering en account (body.hs; pages.ts zet de klasse en dit bestand bij elk werkscherm en
   inlogscherm). Komt na toelevering.css en vóór de eigen stijl van een omgeving (productie.css).
   - Hoekig en vlak: geen ronde hoeken en geen schaduwen (stijl.css, voor alle omgevingen); alleen echte rondjes blijven rond.
   - Kleuren: navy #0D1E27 voor tekst en de zijbalk, oranje alleen voor de hoofdactie en de plek waar u bent.
   - Eén oranje hoofdknop per scherm (btn btn-primary), gewone acties met een lijn (btn-outline), kleine acties als
     onderstreepte tekst (btn-ghost small), tabs als onderstreepte tekst.
   - Donkere zijbalk met het merk: het oranje blok met de L, een streep en de naam van de omgeving. */
body.hs {
  --hs-ink: var(--lz-navy); --hs-grijs: #586973; --hs-rand: var(--lz-rand); --hs-lijn: var(--lz-lijn-sterk); --hs-vlak: var(--lz-vlak);
  --hs-oranje: var(--lz-oranje); --hs-oranje-2: var(--lz-oranje-2); --hs-oranje-licht: var(--lz-oranje-licht); --hs-groen: var(--lz-groen); --hs-groen-licht: var(--lz-groen-licht);
  --hs-side: var(--lz-navy); --hs-side-hover: var(--lz-navy-2); --hs-side-on: var(--lz-navy-3); --hs-side-txt: var(--lz-navy-tekst); --hs-side-soft: var(--lz-navy-zacht); --hs-side-lijn: var(--lz-navy-3);
  /* dezelfde kleuren onder de namen die productie.css al gebruikt */
  --pr-ink: var(--hs-ink); --pr-side: var(--hs-side); --pr-side-hover: var(--hs-side-hover); --pr-side-on: var(--hs-side-on);
  --pr-side-txt: var(--hs-side-txt); --pr-side-soft: var(--hs-side-soft); --pr-lijn: var(--hs-lijn); --pr-oranje: var(--hs-oranje); --pr-oranje-2: var(--hs-oranje-2);
}
body.hs .card, body.hs .tl-sec, body.hs .ws-search, body.hs .btn, body.hs .chip-light, body.hs .notice, body.hs .alert { box-shadow: none; }

/* ---------------------------------------------------------------- zijbalk: donker, met het merk */
body.hs .ws-side { background: var(--hs-side); border-right: 0; color: var(--hs-side-txt); }
body.hs .ws-brand { padding: 12px 10px 26px; }
body.hs .ws-brand .pr-logo { width: 214px; }
body.hs .ws-new { background: var(--hs-oranje); }
body.hs .ws-new:hover { background: var(--hs-oranje-2); }
body.hs .ws-new.is-on { box-shadow: inset 0 0 0 2px var(--lz-wit); }
body.hs .ws-group { margin: 20px 10px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--hs-side-soft); }
body.hs .ws-link { color: var(--hs-side-txt); font-weight: 500; }
body.hs .ws-link svg { color: var(--hs-side-soft); }
body.hs .ws-link:hover { background: var(--hs-side-hover); color: var(--lz-wit); }
body.hs .ws-link.is-on { background: var(--hs-side-on); color: var(--lz-wit); font-weight: 600; }
body.hs .ws-link.is-on::before { background: var(--hs-oranje); }
body.hs .ws-link.is-on svg { color: var(--lz-wit); }
body.hs .ws-link.ws-ext { color: var(--hs-side-soft); }
body.hs .ws-link.ws-ext:hover { color: var(--lz-wit); }
body.hs .ws-link:focus-visible, body.hs .ws-new:focus-visible, body.hs .ws-side .ws-iconbtn:focus-visible { outline-color: var(--lz-wit); }
body.hs .ws-help { background: var(--hs-side-hover); }
body.hs .ws-help span { color: var(--hs-side-soft); }
body.hs .ws-help a { color: var(--lz-wit); }
body.hs .ws-acc { border-top-color: var(--hs-side-lijn); }
body.hs .ws-acc-t strong { color: var(--lz-wit); }
body.hs .ws-acc-t small { color: var(--hs-side-soft); }
body.hs .ws-avatar { background: var(--hs-side-on); }
body.hs .ws-side .ws-iconbtn { color: var(--hs-side-soft); }
body.hs .ws-side .ws-iconbtn:hover { background: var(--hs-side-hover); color: var(--lz-wit); }
/* bovenbalk op een smal scherm: het merk op donker */
body.hs :is(.pr-top-brand, .hs-top-brand) { background: var(--hs-side); padding: 7px 10px; }
body.hs :is(.pr-top-brand, .hs-top-brand) img { width: 150px; }
@media (max-width: 960px) { body.hs.ws-open .ws-side { box-shadow: 0 0 40px rgba(13, 30, 39, .4); } }

/* merk: het oranje blok met de L, een streep en de naam van de omgeving */
body.hs .ws-brand a { gap: 0; }
body.hs :is(.pr-merk, .hs-merk) { display: flex; align-items: center; gap: 18px; text-decoration: none; }
body.hs :is(.pr-merk, .hs-merk) img { width: auto; height: 23px; display: block; flex: none; }
body.hs :is(.pr-merk, .hs-merk) > span { font-weight: 700; font-size: 15px; line-height: 22px; color: var(--lz-wit); padding-left: 18px; border-left: 1px solid #3A4A53; white-space: nowrap; }
body.hs .ws-brand :is(.pr-merk, .hs-merk) { border-left: 0; padding-left: 0; }
/* in de zijbalk: woordmerk iets kleiner, zodat merk en naam ruim binnen de balk blijven en niet tegen de rand staan */
body.hs .ws-brand :is(.pr-merk, .hs-merk) { gap: 14px; }
body.hs .ws-brand .hs-merk img { height: 19px; }
/* productie: het L-blok zonder woordmerk (Beau, 14-10) */
body.hs .pr-merk img { width: 32px; height: 32px; }
body.hs .ws-brand :is(.pr-merk, .hs-merk) > span { padding-left: 14px; font-size: 14px; }
body.hs :is(.pr-top-brand, .hs-top-brand) :is(.pr-merk, .hs-merk) { gap: 12px; border-left: 0; padding-left: 0; }
body.hs :is(.pr-top-brand, .hs-top-brand) .hs-merk img { width: auto; height: 20px; }
body.hs .pr-top-brand .pr-merk img { width: 26px; height: 26px; }
body.hs :is(.pr-top-brand, .hs-top-brand) :is(.pr-merk, .hs-merk) > span { padding-left: 12px; font-size: 14px; }
/* smalle zijbalk (veel kolommen): groepsnamen worden een dunne lijn, het merk alleen het blok */
body.hs.tl-dense .ws-group { height: 1px; margin: 12px 4px; padding: 0; font-size: 0; letter-spacing: 0; background: var(--hs-side-lijn); overflow: hidden; }
@media (min-width: 961px) and (max-width: 1679px) { body.hs.tl-dense .ws-brand :is(.pr-merk, .hs-merk) { display: none; } }

/* ---------------------------------------------------------------- knoppen
   oranje = de hoofdactie, met lijn = gewone actie, onderstreept = kleine actie */
body.hs .btn-outline, body.hs .btn-ghost { border-color: var(--hs-lijn); background: var(--lz-wit); }
body.hs .btn-outline:hover, body.hs .btn-ghost:hover { border-color: var(--hs-ink); }
body.hs .btn-primary { background: var(--hs-oranje); border-color: var(--hs-oranje); }
body.hs .btn-primary:hover { background: var(--hs-oranje-2); border-color: var(--hs-oranje-2); }
body.hs .btn-ghost.small, body.hs .hs-link { height: auto; padding: 2px 4px; border: 1px solid transparent; background: transparent; color: var(--hs-ink); text-decoration: underline; text-underline-offset: 3px; font: inherit; font-weight: 600; cursor: pointer; }
body.hs .btn-ghost.small:hover, body.hs .hs-link:hover { border-color: transparent; color: var(--hs-oranje-2); }

/* ---------------------------------------------------------------- tabs: onderstreepte tekst op één lijn */
body.hs .tl-tabs { gap: 0; border-bottom: 1px solid var(--hs-rand); }
body.hs .tl-tabs .chip-light { height: auto; padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--hs-grijs); font-weight: 600; }
body.hs .tl-tabs .chip-light:hover { color: var(--hs-ink); }
body.hs .tl-tabs .chip-light.is-on { background: none; color: var(--hs-ink); border-bottom-color: var(--hs-oranje); }
body.hs .tabs-line .tab.is-on { border-bottom-color: var(--hs-oranje); }

/* ---------------------------------------------------------------- meldingen: zoals in de productie (pr-melding), een
   streep links; de productie zelf houdt zijn eigen meldingen */
body.hs:not(.pr) .notice.ok { border: 0; border-left: 3px solid #3B6D11; background: var(--lz-vlak-2); color: #27500A; }
body.hs:not(.pr) .notice:not(.ok) { border: 0; border-left: 3px solid var(--hs-oranje); background: #FFF8F1; }
body.hs:not(.pr) .alert { border: 0; border-left: 3px solid var(--lz-rood); }

/* ---------------------------------------------------------------- inlogscherm (ook account.lenselink.nl) */
body.ws-login.hs { background: var(--hs-vlak); }
body.ws-login.hs .wsl-brand { gap: 0; }
body.ws-login.hs .wsl-brand .hs-merk { border-left: 0; padding-left: 0; }
body.ws-login.hs .wsl-brand .hs-merk img { width: auto; height: 30px; }
body.ws-login.hs .wsl-brand .hs-merk > span { color: var(--hs-ink); font-size: 18px; line-height: 26px; border-left-color: var(--hs-lijn); }
body.ws-login.hs .wsl-card { border: 1px solid var(--hs-rand); border-top: 3px solid var(--hs-ink); }
body.ws-login.hs .tabs-line { display: flex; gap: 0; margin: 0 0 4px; }
body.ws-login.hs .tabs-line .tab { padding: 8px 14px 8px 0; margin-right: 14px; margin-bottom: -1px; text-decoration: none; }
body.ws-login.hs .wsl-foot a { color: var(--hs-ink); }
body.ws-login.hs .wsl-stappen { width: 100%; max-width: 420px; box-sizing: border-box; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--hs-rand); display: grid; gap: 6px; font-size: 13px; color: var(--hs-grijs); list-style: none; }
body.ws-login.hs .wsl-stappen strong { color: var(--hs-ink); }
body.ws-login.hs.wsl-wide .wsl-stappen { max-width: 640px; }

/* ---------------------------------------------------------------- bouwstenen die elke omgeving kan gebruiken */
/* de volgende stap: één blok met wat er nu moet gebeuren en één knop */
.hs-stap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 18px; padding: 16px 18px; background: var(--lz-wit); border: 1px solid var(--hs-rand); border-left: 4px solid var(--hs-oranje); }
.hs-stap.is-wacht { border-left-color: var(--hs-ink); }
.hs-stap.is-klaar { border-left-color: var(--hs-groen); }
.hs-stap > div { display: grid; gap: 2px; min-width: 0; flex: 1 1 320px; }
.hs-stap small { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--hs-grijs); }
.hs-stap strong { font-size: 17px; }
.hs-stap p { margin: 2px 0 0; color: var(--hs-grijs); font-size: 14px; }
.hs-stap .btn { flex: none; }
/* een lijst met documenten of links, rustig onder elkaar */
.hs-lijst { list-style: none; margin: 0; padding: 0; display: grid; }
.hs-lijst li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--lz-vlak-2); }
.hs-lijst li:last-child { border-bottom: 0; }
.hs-lijst a { font-weight: 600; color: var(--hs-ink, var(--lz-navy)); }
.hs-lijst small { color: var(--hs-grijs, #586973); font-size: 12.5px; }
@media (max-width: 640px) { .hs-stap { padding: 14px; } .hs-stap .btn { width: 100%; justify-content: center; } }

/* ---------------------------------------------------------------- toelevering (klantkant en medewerkers in de toelevering) */
/* op een smal scherm staat de oranje knop van de zijbalk achter het menu: dan de knop in de kop, met een lijn */
@media (max-width: 960px) {
  body.hs.tl:not(.pr) .tl-head > .btn-primary[href="/projecten/nieuw"] { display: inline-flex; background: var(--lz-wit); color: var(--hs-ink); border-color: var(--hs-lijn); }
}
@media (max-width: 640px) {
  body.hs.tl:not(.pr) .tl-akkoord .btn-lg, body.hs.tl:not(.pr) .tl-actions .btn-lg { width: 100%; height: auto; min-height: 48px; white-space: normal; justify-content: center; text-align: center; }
  body.hs.tl:not(.pr) .tl-akkoord { padding: 14px; }
}
body.hs.tl:not(.pr) .tl-sec > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
body.hs.tl:not(.pr) .tl-sec > summary::-webkit-details-marker { display: none; }
body.hs.tl:not(.pr) .tl-sec > summary strong { font-size: 17px; }
body.hs.tl:not(.pr) .tl-sec > summary::after { content: '+'; margin-left: auto; font-weight: 600; color: var(--hs-grijs); }
body.hs.tl:not(.pr) .tl-sec[open] > summary::after { content: '−'; }
body.hs.tl:not(.pr) .tl-det-in { margin-top: 12px; }
body.hs.tl:not(.pr) #documenten .h4 { margin: 18px 0 8px; }
body.hs.tl:not(.pr) .tl-akkoord { background: #FFF8F1; border: 1px solid var(--lz-oranje-rand); border-left: 4px solid var(--hs-oranje); }
body.hs.tl:not(.pr) .tl-akkoord-done { background: var(--lz-vlak-2); border-left: 4px solid #3B6D11; color: #27500A; }
body.hs.tl:not(.pr) .tl-variant input:checked + span { border-color: var(--hs-oranje); box-shadow: inset 0 0 0 1px var(--hs-oranje); }
body.hs.tl:not(.pr) .tl-voor { border-left-color: var(--hs-oranje); }
body.hs.tl:not(.pr) .tl-kpi:hover { border-color: var(--hs-ink); }
body.hs.tl:not(.pr) .tl-chain-big li.is-now .tl-seg-l { color: var(--hs-oranje-2); }

/* ---------------------------------------------------------------- account (Mijn Lenselink) */
body.hs.acc .acc-sites-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
body.hs.acc .acc-sites-grid .tl-kpi strong { font-size: 20px; }
body.hs.acc .acc-orders td.actions { text-align: right; white-space: nowrap; }
body.hs.acc .account-grid { margin-top: 0; }
body.hs.acc .card.pad { border: 1px solid var(--hs-rand); background: var(--lz-wit); }
body.hs.acc .tl-dl { margin: 0; }
body.hs.acc #beveiliging { scroll-margin-top: 76px; }
@media (max-width: 860px) { body.hs.acc .acc-sites-grid { grid-template-columns: minmax(0, 1fr); } }
/* telefoon: de orders als kaartjes (tl-list), met de link Bekijken eronder */
@media (max-width: 640px) { body.hs.acc .acc-orders td.actions { display: block; text-align: left; padding-top: 6px; } body.hs.acc .acc-orders td.acc-leeg { display: none; } }
.wsl-zonder { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--lz-lijn); font-size: 13.5px; color: var(--lz-tekst-2); }