/* huisstijl.css -- één lettertype voor het hele portaal (Bas, 16-09).

   > "ik vind het lettertype van de balk bovenin wel mooi, dus zoals het blok met beheer. Deze
   > mag je overal wel toepassen."

   Tot 16-09 hing het van de pagina af: het overzicht, de kaart en het gezondheidsbord zetten
   Segoe UI, maar beheer, lijst, financieel en het logboek laden Bootstrap en dat kiest het
   systeemlettertype -- op Windows toevallig óók Segoe UI, op een iPad San Francisco. Bij het
   schuiven tussen de pagina's zag je de letters verspringen.

   Dit bestand staat in de kop van élke pagina (tests/test_vloeiend.py bewaakt dat) en wint van
   Bootstrap: die zet zijn lettertype via --bs-body-font-family, dus die variabele gaat hier om,
   en de formuliervelden erven van body. Op een apparaat zonder Segoe UI valt hij terug op het
   systeemlettertype -- maar dan wel op elke pagina hetzelfde. */
:root {
  --lisa-letter: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  /* De grijstinten (Bas, 18-09 21:40): "meer richting space gray van Apple, een soort gebroken
     wit". Dezelfde tinten als Apple's eigen pagina's: gebroken wit als grond, lichte
     scheidingslijnen, warmgrijze bijtekst. Tot 18-09 stonden er zeven verschillende grijzen
     letterlijk in de pagina's; nu wijzen ze allemaal hierheen. */
  --lisa-grond: #f5f5f7;   /* de grond van elke pagina */
  --lisa-zacht: #f2f2f4;   /* een lichte vulling óp wit: knoppen, hover, kopregels */
  --lisa-kolom: #ebebed;   /* een vlak dat zich van de grond moet onderscheiden (Plutus) */
  --lisa-lijn:  #e5e5ea;   /* randen en scheidingslijnen */
  --lisa-stil:  #6e6e73;   /* bijtekst */
  --lisa-kolom2: #e3e3e6;  /* de tweede tint voor om-en-om vlakken (Plutus) */
  --lisa-donker: #2c2c2e;  /* space gray: de donkere balk van de schadepagina, donkere blokken */
  --bs-body-font-family: var(--lisa-letter);
  --bs-font-sans-serif: var(--lisa-letter);
}
html, body { font-family: var(--lisa-letter); }
button, input, select, textarea, .btn, .form-control, .form-select { font-family: inherit; }

/* ── De wachtwoordpagina's (Bas 06-10: "de wachtwoord pagina mag je mooier maken") ──────────
   Vergeten, instellen (waar de link uit de mail landt) en wijzigen delen deze kaart, zodat ze
   niet elk een eigen variant krijgen. Zelfde grond, kaart en logo als het inlogscherm, met het
   oranje accent erbij. Alleen klassen met `vd-`: dit bestand staat op elke pagina. */
.vd-grond {
  min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: radial-gradient(120% 80% at 50% 0%, #3a3a3d 0%, var(--lisa-donker) 60%);
}
.vd-kaart {
  background: #fff; border-radius: 18px; width: 100%; max-width: 400px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
}
/* 18-10 (Bas: *"als ik op de ipad inlog, dan is de 2fa pagina niet gemaakt voor liggend beeld"*): centreren met
   `margin:auto` in plaats van alleen `align-items:center`. Is de kaart hoger dan wat er zichtbaar is (liggend, met
   het toetsenbord open), dan valt bij `center` de bovenkant buiten beeld en kun je er niet meer bij; met `margin:auto`
   begint hij bovenaan en scroll je. Op een laag scherm ook compacter, zodat code en knop samen in beeld passen. */
.vd-grond > .vd-kaart { margin: auto; }
.vd-kop { background: var(--lisa-donker); padding: 22px 28px 20px; text-align: center; border-bottom: 4px solid var(--accent, #e67e22); }
.vd-kop img { height: 34px; width: auto; display: inline-block; }
.vd-kop .vd-sub { color: rgba(255,255,255,.55); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 6px; }
.vd-inhoud { padding: 28px 28px 26px; }
.vd-pictogram {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; font-size: 1.45rem; background: #fdf0e4; color: var(--accent, #e67e22);
}
.vd-pictogram.goed { background: #e6f6ee; color: #198754; }
.vd-pictogram.fout { background: #fdecec; color: #dc3545; }
.vd-titel { font-size: 1.2rem; font-weight: 700; color: var(--lisa-donker); text-align: center; margin: 0 0 6px; }
.vd-uitleg { font-size: .88rem; color: var(--lisa-stil); text-align: center; margin: 0 0 22px; line-height: 1.5; }
.vd-label { font-size: .82rem; font-weight: 600; color: var(--lisa-donker); margin-bottom: 6px; display: block; }
.vd-veld { position: relative; }
.vd-veld .form-control { height: 46px; border-radius: 10px; border-color: var(--lisa-lijn); background: #fbfbfc; padding-right: 44px; }
.vd-veld .form-control:focus { background: #fff; border-color: var(--accent, #e67e22); box-shadow: 0 0 0 3px rgba(230,126,34,.18); }
.vd-oog {
  position: absolute; top: 0; right: 0; height: 100%; width: 44px; border: 0; background: none;
  color: var(--lisa-stil); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.vd-oog:hover { color: var(--lisa-donker); }
/* 13-10: het eigen oogje van Edge uit. Dat werkt alleen zolang je typt (niet na automatisch invullen) en stond
   op de wachtwoordpagina's naast het onze: twee oogjes, waarvan er één niets deed. */
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }
.vd-knop {
  height: 46px; border-radius: 10px; font-weight: 600; width: 100%; border: 0;
  background: var(--lisa-donker); color: #fff; transition: background .15s, transform .05s;
}
.vd-knop:hover { background: #000; color: #fff; }
.vd-knop:active { transform: translateY(1px); }
.vd-knop-licht {
  height: 44px; border-radius: 10px; font-weight: 600; width: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--lisa-zacht); color: var(--lisa-donker); text-decoration: none; border: 1px solid var(--lisa-lijn);
}
.vd-knop-licht:hover { background: var(--lisa-lijn); color: var(--lisa-donker); }
.vd-link { display: block; text-align: center; margin-top: 16px; font-size: .85rem; color: var(--lisa-stil); text-decoration: none; }
.vd-link:hover { color: var(--lisa-donker); text-decoration: underline; }
.vd-melding { border-radius: 10px; padding: 10px 12px; font-size: .85rem; margin-bottom: 18px; display: flex; gap: 8px; align-items: flex-start; }
.vd-melding.fout { background: #fdecec; color: #a4282f; }
.vd-melding.goed { background: #e6f6ee; color: #146c43; }
.vd-sterkte { display: flex; gap: 4px; margin-top: 8px; }
.vd-sterkte span { flex: 1; height: 4px; border-radius: 2px; background: var(--lisa-lijn); transition: background .25s; }
.vd-eisen { list-style: none; padding: 0; margin: 10px 0 0; font-size: .78rem; color: var(--lisa-stil); }
.vd-eisen li { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; transition: color .2s; }
.vd-eisen li i { font-size: .85rem; }
.vd-eisen li.ok { color: #198754; }

/* Liggend en laag (iPad met toetsenbord): compacter. Onderaan, zodat het van de gewone vd-regels wint. */
@media (orientation: landscape) and (max-height: 900px) {
  .vd-grond { padding: 12px 16px; }
  .vd-kop { padding: 12px 20px 10px; }
  .vd-kop img { height: 26px; }
  .vd-inhoud { padding: 18px 24px 16px; }
  .vd-pictogram { display: none; }
  .vd-uitleg { margin-bottom: 14px; }
}

/* ── Diepte en beweging (19-10, voorbeeld ter keuring) ────────────────────────────────────────
   Bas: "alles mag net iets scherper/cleaner. ik vind de website behoorlijk vlak. mogelijk iets met een subtiele 3d of
   schaduweffecten waardoor de verschillende lagen te zien zijn die over elkaar heen vallen. kleine bewegingen als je
   scrolled zodat het lijkt alsof ze op de gebruiker reageren. het moet klein en subtiel zijn".

   Vier lagen, elk met een eigen schaduw (zacht, uit twee delen: een korte donkere voor de rand en een lange lichte
   voor de hoogte): 1 kaarten op de grond, 2 iets dat je aanwijst, 3 zwevend (widget, zoekbalk, menu), 4 de balk
   bovenin zodra er iets onder doorschuift. De beweging staat in static/diepte.js; zonder dat script, of met
   "minder beweging" aan in het systeem, blijft alles gewoon staan. */
:root {
  --diepte-1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.07);
  --diepte-2: 0 2px 4px -1px rgba(16,24,40,.06), 0 8px 18px -4px rgba(16,24,40,.12);
  --diepte-3: 0 4px 8px -2px rgba(16,24,40,.08), 0 18px 36px -8px rgba(16,24,40,.20);
  --diepte-4: 0 1px 0 rgba(16,24,40,.04), 0 8px 24px -10px rgba(16,24,40,.22);
  --diepte-rand: rgba(16,24,40,.07);
  --diepte-zacht: cubic-bezier(.2,.8,.2,1);
}

/* Laag 1: kaarten op de grond -- een haarfijne rand en een korte schaduw in plaats van alleen een grijze lijn. */
.detail-kaart, .samenvat-kaart, .tabel-kaart, .tablewrap, .statcard, .stat-kaart, .schade-blok, .kaart {
  border-color: var(--diepte-rand) !important;
  box-shadow: var(--diepte-1);
  transition: box-shadow .22s var(--diepte-zacht), translate .22s var(--diepte-zacht);
}
/* Laag 2: wat je aanwijst komt een fractie naar je toe (alleen met een muis; op de iPad niet, dat geeft dubbeltikken). */
@media (hover: hover) {
  /* de statusblokken (.statcard, .stat-kaart) komen al omhoog met hun eigen regel */
  .detail-kaart:hover, .samenvat-kaart:hover, .schade-blok:hover {
    box-shadow: var(--diepte-2); translate: 0 -2px;
  }
}
/* Laag 3: zwevend boven de kaart. */
.widget-card, .overlay, .zoekmap input, .mstb-profiel-menu, .mstb-omgmenu, .leaflet-popup-content-wrapper { box-shadow: var(--diepte-3) !important; }

/* Laag 4: de balk bovenin. Tot 26-10 glas (de pagina schoof er vaag onderdoor) met een schaduw zodra er iets onder lag.
   Bas, 26-10: *"het deel achter de knoppen mag 100% wit zijn, daaronder mag hij uitfaden"*: de balk is wit, en de
   fade eronder staat bij de balk zelf (`.mstb-fade` in _topbar.html). Zet hier geen backdrop-filter op `.mstb`: dat
   maakt de balk de kooi van het `position:fixed` profielmenu, en de balk knipt (Bas 21-10, iPad). */
.mstb { transition: border-color .25s var(--diepte-zacht); }

/* Binnenkomen bij het scrollen: wat onder de vouw ligt, schuift 10 px omhoog en wordt zichtbaar als het in beeld komt.
   `translate` en niet `transform`, en daarna `none`: een transform maakt van een kaart het kader voor alles wat erin
   `position:fixed` staat (de zoekbalk, menu's), en dat mag na het binnenkomen niet blijven hangen. */
html.diepte-js .diepte-wacht { opacity: 0; translate: 0 10px; }
html.diepte-js .diepte-in { opacity: 1; translate: none; transition: opacity .5s var(--diepte-zacht), translate .5s var(--diepte-zacht); }

/* Knoppen die reageren (19-10, Bas: *"of je de knoppen iets levendiger kunt maken, dus iets meer een animatie"*):
   bij aanwijzen een fractie omhoog met een zachte schaduw, bij indrukken even kleiner -- alsof je hem echt indrukt --
   en met een vering terug. Alleen `translate`/`scale`, geen `transform` (zie hierboven). */
.btn, .mstb-omgknop, .mstb-upload, .mstb-nav a, .mstb .jaren a, .mstb-profiel-knop, .label-toevoegen, .stat-verberg, .zoek-wis {
  transition: translate .18s var(--diepte-zacht), scale .14s cubic-bezier(.34,1.56,.64,1), box-shadow .18s var(--diepte-zacht),
              background-color .18s, color .18s, border-color .18s;
}
@media (hover: hover) {
  .btn:hover, .mstb-omgknop:hover, .mstb-profiel-knop:hover { translate: 0 -1px; box-shadow: var(--diepte-2); }
  .mstb-upload:hover { translate: 0 -1px; }
}
/* 19-10: niet bij de tabbladen en jaren -- daar glijdt de pil al, en een krimpende tekst erboven oogde als haperen. */
.btn:active, .mstb-omgknop:active, .mstb-upload:active, .mstb-profiel-knop:active,
.label-toevoegen:active, .zoek-wis:active { scale: .96; translate: none; box-shadow: none; transition-duration: .06s; }

@media (prefers-reduced-motion: reduce) {
  .btn, .mstb-omgknop, .mstb-upload, .mstb-nav a, .mstb .jaren a, .mstb-profiel-knop, .label-toevoegen, .stat-verberg, .zoek-wis { transition: none; }
  .mstb-upload:hover { translate: none; }
  .btn:active, .mstb-omgknop:active, .mstb-upload:active, .mstb-nav a:active, .mstb .jaren a:active, .mstb-profiel-knop:active { scale: none; }
  html.diepte-js .diepte-wacht { opacity: 1; translate: none; }
  .detail-kaart, .samenvat-kaart, .statcard, .stat-kaart, .schade-blok { transition: none; }
  .detail-kaart:hover, .samenvat-kaart:hover, .schade-blok:hover { translate: none; }
}