/* LuzeX Platform — design system. Rustige, Apple-achtige uitstraling (zie docs/enterprise-platform/09-backend-en-frontend-architectuur.md §10.4/§10.6). */

:root {
  color-scheme: light dark;

  /* Histor Intuitive (PPG1022-2, #cfc6bc): een warme greige met roze ondertoon, LRV 57.
     Vervangt het koele #f5f5f7. Bijkomend voordeel: witte panelen staken hier duidelijk
     tegen af (1,69:1) waar dat op het oude bijna-wit nauwelijks zichtbaar was (1,09:1). */
  --bg: #cfc6bc;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-translucent: rgba(255, 255, 255, 0.72);
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.12);
  --text: #1d1d1f;
  /* Warmer én donkerder dan de vorige koele grijzen. Noodzakelijk, niet cosmetisch: op de
     greige achtergrond haalde #6e6e73 nog maar 3,01:1 en #86868b zelfs 2,15:1. Nu 4,58:1 en
     3,30:1 op de achtergrond, en 7,73:1 / 5,57:1 op de witte panelen. */
  --text-secondary: #585249;
  --text-tertiary: #6e6760;

  /* Het logo is strikt monochroom, dus het accent is dat ook: grafiet in plaats van het
     Apple-blauw waarmee dit begon. --accent-contrast is de kleur die op een accentvlak leesbaar
     is; die draait mee in donkere modus, waar het accent juist licht wordt. */
  --accent: #1d1d1f;
  --accent-hover: #3a3a3c;
  --accent-active: #000000;
  --accent-contrast: #ffffff;
  --accent-tint: rgba(29, 29, 31, 0.07);
  --accent-ring: rgba(29, 29, 31, 0.3);

  --success: #248a3d;
  --success-tint: rgba(52, 199, 89, 0.14);
  --warning: #b25000;
  --warning-tint: rgba(255, 149, 0, 0.16);
  --danger: #d70015;
  --danger-tint: rgba(255, 59, 48, 0.12);
  /* Voor een status die klaar is maar nog geen geld heeft opgeleverd: definitief. Groen is
     bewaard voor betaald — dan pas is de cyclus rond. */
  --info: #0a63ad;
  --info-tint: rgba(10, 99, 173, 0.13);
  --neutral-tint: rgba(0, 0, 0, 0.06);
  --purple: #6e40c9;
  --purple-tint: rgba(139, 92, 246, 0.14);

  /* ---------- Liquid Glass ----------
     Het effect komt niet van het glas maar van de kleur eronder: zonder gekleurd licht
     achter het paneel is glas alleen maar grijs. Vandaar --glas-licht-*: de vlekken die
     achter de inhoud staan. De waarden hieronder staan bewust als token, zodat het
     materiaal op één plek te verstellen is en niet op veertig.

     Het dunste punt van de gradient staat hier op 0,26 en niet op de 0,20 uit het ontwerp.
     Gemeten: met 0,20 haalt --text-secondary (#585249) op glas boven een terracotta vlek
     nog 4,58:1 — net boven de norm, zonder marge. Met 0,26 is dat 4,78:1. De regel is dat
     glas dekkender wordt, niet dat tekst lichter wordt; dit is die afweging.

     Het licht zit als witte lijn BINNENIN de bovenrand (de eerste inset-schaduw), niet als
     kader eromheen. Een border-highlight zou het paneel laten zweven als een sticker. */
  --glas-bg: linear-gradient(142deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.26) 46%, rgba(255, 255, 255, 0.40));
  --glas-rand: rgba(255, 255, 255, 0.58);
  --glas-schaduw:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -18px 34px rgba(255, 255, 255, 0.20),
    /* Het ontwerp geeft 0 26px 64px. Zo'n schaduw reikt 38px bóven het paneel uit, en daar
       staan de kale labels van het periodefilter. Gemeten kost dat "Periode" 0,09 en komt het
       op 4,49:1 — net onder de norm, want --text-secondary haalt op de kale achtergrond zelf
       maar 4,58:1 en er is dus niets weg te geven. Met 30px verschuiving en 54px vervaging
       reikt de schaduw nog 24px omhoog: onder de tekst, en even zwaar onder het paneel. */
    0 30px 54px rgba(29, 29, 31, 0.20);
  --glas-blur: blur(30px) saturate(190%);

  /* Dunner glas voor kleine onderdelen (knoppen, velden, chips). Vier lagen
     backdrop-filter tegelijk in beeld is het maximum dat vloeiend blijft; kleine
     onderdelen krijgen daarom minder vervaging, niet minder glas. */
  --glas-dun-bg: linear-gradient(142deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.34));
  --glas-dun-blur: blur(18px) saturate(170%);
  --glas-dun-schaduw: inset 0 1px 0 rgba(255, 255, 255, 0.80), 0 10px 26px rgba(29, 29, 31, 0.12);

  /* De dekkende tegenhanger: terugval zonder backdrop-filter, en de ondergrond onder
     cijfers die iemand moet lezen. Dit is de kleur die het glas gemiddeld oplevert boven
     de kale achtergrond, nagerekend en niet geschat — zo verspringt er niets. */
  --glas-vast: #e4d8cb;

  /* De glans die er in negen seconden één keer overheen loopt. Meer dan één is een casino. */
  --glas-glans: linear-gradient(112deg, transparent 26%, rgba(255, 255, 255, 0.62) 44%, transparent 62%);

  /* Het licht achter het glas. De opaciteiten zijn begrensd door de contrastmeting, niet
     door smaak: boven glas houdt --text-secondary 4,5:1 zolang terracotta onder 0,48 en
     olijf onder 0,40 blijft. Diep bruin haalt die grens al bij 0,15 en hoort daarom niet
     achter tekst — dat is de vlek voor de randen van de pagina. */
  --glas-licht-terracotta: #c98a63;
  --glas-licht-olijf: #8d9472;
  --glas-licht-zand: #e8dccc;
  --glas-licht-diep: #3b2e24;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 980px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06);

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --sidebar-width: 260px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-elevated: #1c1c1e;
    --surface: #1c1c1e;
    --surface-translucent: rgba(28, 28, 30, 0.72);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.14);
    --text: #f5f5f7;
    --text-secondary: #98989d;
    --text-tertiary: #6e6e73;

    /* Omgekeerd in donkere modus: op zwart is grafiet onzichtbaar, dus wordt het accent licht
       en de tekst erop donker — dezelfde omkering die het logo zelf maakt (zwarte en witte
       variant van hetzelfde merk). */
    --accent: #f5f5f7;
    --accent-hover: #ffffff;
    --accent-active: #d1d1d6;
    --accent-contrast: #1d1d1f;
    --accent-tint: rgba(245, 245, 247, 0.12);
    --accent-ring: rgba(245, 245, 247, 0.4);

    --success: #32d74b;
    --success-tint: rgba(50, 215, 75, 0.16);
    --warning: #ff9f0a;
    --warning-tint: rgba(255, 159, 10, 0.18);
    --danger: #ff453a;
    --danger-tint: rgba(255, 69, 58, 0.16);
    --info: #64b5f6;
    --info-tint: rgba(100, 181, 246, 0.18);
    --neutral-tint: rgba(255, 255, 255, 0.08);
    --purple: #bf5af2;
    --purple-tint: rgba(191, 90, 242, 0.18);

    /* Glas op zwart is een ander materiaal: het licht komt van boven in plaats van overal
       vandaan, dus veel minder wit en een zachtere vervaging. De lichte waarden werken hier
       niet — die maken een melkwitte vlek waar niets meer doorheen komt.
       Gemeten op #000 met een terracotta vlek van 0,22: --text-secondary 4,81:1. */
    --glas-bg: linear-gradient(142deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 48%, rgba(255, 255, 255, 0.11));
    --glas-rand: rgba(255, 255, 255, 0.20);
    --glas-schaduw:
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      0 22px 50px rgba(0, 0, 0, 0.30);
    --glas-blur: blur(26px) saturate(150%);

    --glas-dun-bg: linear-gradient(142deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.09));
    --glas-dun-blur: blur(16px) saturate(140%);
    --glas-dun-schaduw: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 10px 26px rgba(0, 0, 0, 0.34);

    --glas-vast: #1b1b1b;
    --glas-glans: linear-gradient(112deg, transparent 26%, rgba(255, 255, 255, 0.22) 44%, transparent 62%);

    /* Op zwart telt elke vlek zwaarder door: dezelfde meting geeft hier 0,25 voor
       terracotta en 0,27 voor olijf als bovengrens. Zand is de gevaarlijkste (0,17),
       omdat licht op licht het contrast van --text-secondary het snelst opeet. */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  }
}

/* ---------- Liquid Glass: het materiaal ----------
   Eén plek waar het glas gemaakt wordt; alles wat glas is, leent hiervan. De klassen
   staan los van de onderdelen zelf, zodat een paneel glas kan worden door het token te
   gebruiken en niet door zijn eigen kopie van vijf schaduwregels. */

.glas {
  position: relative;
  background: var(--glas-bg);
  backdrop-filter: var(--glas-blur);
  -webkit-backdrop-filter: var(--glas-blur);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-schaduw);
}

.glas-dun {
  position: relative;
  background: var(--glas-dun-bg);
  backdrop-filter: var(--glas-dun-blur);
  -webkit-backdrop-filter: var(--glas-dun-blur);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-dun-schaduw);
}

/* De glans loopt er één keer per negen seconden overheen. Alleen op marketingpagina's:
   in het ingelogde platform beweegt niets terwijl iemand aan het werk is. */
.glas-glans::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--glas-glans);
  background-size: 280% 100%;
  opacity: 0.55;
  animation: glas-glans 9s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

@keyframes glas-glans {
  0%, 62% { background-position: 150% 0; }
  100% { background-position: -60% 0; }
}

/* Het licht achter het glas. Zonder deze vlekken is glas grijs; met een vlek in de weg
   van lopende tekst is het onleesbaar. Daarom staan ze achter panelen en langs de randen
   van de pagina, nooit achter een alinea die zelf geen glas heeft. */
.glas-licht {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
}

/* Terugval. Zonder deze regel wordt een paneel op oudere Android een grijze mist waar de
   tekst in verdwijnt: daar bestaat backdrop-filter niet en blijft alleen de halftransparante
   gradient over. Dekkend vlak in dezelfde kleur, dus dezelfde contrastmeting blijft gelden. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas,
  .glas-dun {
    background: var(--glas-vast);
  }

  .glas-licht {
    display: none;
  }
}

/* Beweging is een aanbod, geen gegeven. Wie er last van heeft, krijgt hetzelfde beeld stil. */
@media (prefers-reduced-motion: reduce) {
  .glas-glans::after,
  .glas-licht {
    animation: none !important;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.006em;
}

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}

/* ---------- Login ---------- */

body.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Twee zachte lichtplekken in de achtergrondkleur zelf, in plaats van de blauwe en paarse
     gloed die hier stond. Wit i.p.v. een kleur: het merk is monochroom. */
  /* Vlak, geen gradiënt. Hier stonden twee grote zachte radial-gradients (blauw en paars);
     die zijn niet alleen van het oude kleurenschema, ze lieten op deze achtergrond ook
     zichtbare rechthoekige tegelranden achter bij het renderen. Een verfkleur hoort sowieso
     vlak te zijn. */
  background: var(--bg);
}

.login-card {
  position: relative;
  background: var(--glas-bg);
  backdrop-filter: var(--glas-blur);
  -webkit-backdrop-filter: var(--glas-blur);
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--glas-schaduw);
  animation: rise 0.5s var(--ease);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Het merk staat als afbeelding in de pagina, niet als letters in een gekleurd tegeltje.
   Twee varianten (zwart en wit) in plaats van een CSS-filter: het logo is als beide kleuren
   aangeleverd, en een omgekeerd zwart logo is niet hetzelfde bestand als het witte.
   De verhoudingen komen uit de bronbestanden, opgemeten en niet geschat:
   volledig lockup 605,5 × 120 (= 5,046) en het beeldmerk 700 × 491 (= 1,426). Het is het
   ACCRD-lockup: drie even hoge torens met "A C C R D", niet meer het LuzeX-lockup — elk
   product heeft zijn eigen beeldmerk in dezelfde tekentaal, zie de hub. */
.brand-logo,
/* Het merkteken in de zijbalk is een link geworden, net als elk ander LuzeX-logo.
   Een <a> is inline, dus zonder display: block heeft het vlak geen hoogte. De maat
   blijft wel die van een pictogram: dit is het merkteken naast een productnaam,
   niet het lockup dat op de buitenkant staat. */
.brand-mark {
  display: block;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

/* Volledig lockup mét tagline — alleen waar het groot genoeg staat om leesbaar te zijn
   (inlogscherm, factuur). In de sidebar zou de tagline op ~10px onleesbare pap worden. */
/* Eén maat voor het hele lockup, overal: 47px hoog (bij het ACCRD-lockup 237px breed). Dat was de maat
   in de balk van de landingspagina, en die is nu de norm — op de inlogpagina's stond hij
   op 232px en in de voettekst als los merkteken van 22px, wat drie verschillende LuzeX-en
   op drie schermen opleverde. Het is ook een link: elk LuzeX-logo brengt je naar luzex.nl. */
.brand-logo {
  display: block;
  width: 237px;
  aspect-ratio: 5.046;
  background-image: url("/assets/accrd-logo-zwart.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  margin-bottom: 26px;
}

/* Alleen het beeldmerk, voor krappe plekken zoals de sidebar. */
.brand-mark {
  width: 34px;
  aspect-ratio: 1.428;
  background-image: url("/assets/accrd-merk-zwart.svg");
  margin-bottom: 20px;
  /* De "Lx"-tekst die hier vroeger in stond, mag niet meer meelezen. */
  font-size: 0;
  color: transparent;
}

@media (prefers-color-scheme: dark) {
  .brand-logo {
    background-image: url("/assets/accrd-logo-wit.svg");
  }

  .brand-mark {
    background-image: url("/assets/accrd-merk-wit.svg");
  }
}

.login-card h1 {
  font-size: 22px;
  margin-bottom: 4px;
}

.login-card .subtitle {
  margin-bottom: 28px;
}

.subtitle {
  color: var(--text-secondary);
  font-size: 13px;
}

label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 16px 0 6px;
}

label:first-of-type {
  margin-top: 0;
}

/* Let op de body-klassen: de afdrukpagina's en het zelfstandigheidsdossier delen deze
   stylesheet en horen geen glas te krijgen. Zie de uitzonderingen onderaan. */
.dashboard-body input, .dashboard-body select, .dashboard-body textarea,
.login-body input, .login-body select, .login-body textarea,
.welkom-body input, .welkom-body select, .welkom-body textarea {
  background: var(--glas-dun-bg);
  backdrop-filter: var(--glas-dun-blur);
  -webkit-backdrop-filter: var(--glas-dun-blur);
  border-color: var(--glas-rand);
  box-shadow: var(--glas-dun-schaduw);
}

input, select, textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

input::placeholder {
  color: var(--text-tertiary);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

button {
  cursor: pointer;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  background: var(--accent);
  color: var(--accent-contrast);
  transition: background 0.15s var(--ease), transform 0.1s var(--ease), box-shadow 0.15s var(--ease);
}

button:hover {
  background: var(--accent-hover);
}

button:active {
  background: var(--accent-active);
  transform: scale(0.98);
}

button.secondary {
  background: var(--neutral-tint);
  color: var(--text);
}

.dashboard-body button.secondary,
.login-body button.secondary,
.welkom-body button.secondary {
  background: var(--glas-dun-bg);
  backdrop-filter: var(--glas-dun-blur);
  -webkit-backdrop-filter: var(--glas-dun-blur);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-dun-schaduw);
}

button.secondary:hover {
  background: var(--border-strong);
}

button.secondary:active {
  transform: scale(0.98);
}

.primary-action {
  width: 100%;
  margin-top: 26px;
  padding: 12px;
  font-size: 14.5px;
  /* Neutrale schaduw: een blauwe gloed onder een zwarte knop verraadt het oude accent. */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

/* Er was geen algemene linkstijl, waardoor losse links het browser-standaardblauw kregen
   (rgb(0,0,238)). Dat viel niet op naast een blauw accent, maar wel naast een monochroom merk.
   Links binnen navigatie en knoppen zetten hun eigen kleur en blijven ongemoeid. */
a {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-color: currentColor;
}

.error {
  color: var(--danger);
  font-size: 12.5px;
  margin-top: 12px;
  min-height: 1em;
}

.success {
  color: var(--success);
  font-size: 12.5px;
  margin-top: 12px;
  min-height: 1em;
}

/* Geen fout, maar wel iets dat een beslissing vraagt — bijv. uren die zijn ingeladen maar
   geparkeerd wegens een overschreden budget. Bewust een eigen kleur: rood zou suggereren dat er
   iets misging, en dat is hier niet zo. */
.waarschuwing {
  color: var(--warning);
  background: var(--warning-tint);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  margin-top: 12px;
}

.waarschuwing a {
  color: inherit;
  font-weight: 600;
}

.text-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none;
}

.text-link:hover {
  background: none;
  text-decoration: underline;
}

/* ---------- App shell (dashboards) ---------- */

body.dashboard-body {
  display: flex;
  align-items: stretch;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  /* Stond hier al halftransparant met een eigen blur-waarde. Nu hetzelfde materiaal als
     de panelen, zodat de zijbalk en de inhoud in hetzelfde licht staan. */
  background: var(--glas-bg);
  backdrop-filter: var(--glas-blur);
  -webkit-backdrop-filter: var(--glas-blur);
  border-right: 1px solid var(--glas-rand);
  box-shadow: var(--glas-schaduw);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 22px;
}

.sidebar .brand-mark {
  width: 30px;
  margin: 0;
  flex: 0 0 auto;
}

.sidebar .brand-name {
  font-weight: 600;
  font-size: 13.5px;
  /* Het woordmerk staat wijd uit elkaar; die maat nemen we hier over zodat de naam naast het
     beeldmerk hetzelfde ritme heeft in plaats van er strak tegenaan te staan. */
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sidebar .brand-role {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: -1px;
}

/* Alleen zichtbaar op mobiel (zie @media hieronder) — op desktop staat de volledige
   navigatie al open, dus is er niets om open/dicht te klappen. Het element zelf wordt door
   common.js toegevoegd (initMobielMenu), niet in de HTML. */
.sidebar-toggle {
  display: none;
}

.sidebar-org {
  padding: 10px 12px;
  margin: 0 0 14px;
  border-radius: 10px;
  background: var(--surface-secondary, rgba(0, 0, 0, 0.03));
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.nav-item[hidden] {
  display: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.12s var(--ease);
}

.nav-item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: 0.75;
}

.nav-item:hover {
  background: var(--neutral-tint);
}

.nav-item.active {
  background: var(--accent);
  color: var(--accent-contrast);
}

.nav-item.active svg {
  opacity: 1;
}

/* ---------- Inklapbare navigatiegroepen (Samenwerking/Uren/Facturatie/Instellingen) ---------- */

.nav-groep[hidden] {
  display: none;
}

.nav-groep-rij {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-groep-rij .nav-item {
  flex: 1;
  min-width: 0;
}

/* Instellingen heeft geen eigen pagina — het kopje is dan een <button>, geen <a>, maar moet er
   verder identiek uitzien als de andere kopjes. */
.nav-groep-kop-toggle-only {
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.nav-groep-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
}

.nav-groep-toggle:hover {
  background: var(--neutral-tint);
}

.nav-groep-toggle .chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.15s var(--ease);
}

.nav-groep-toggle.open .chevron {
  transform: rotate(90deg);
}

.nav-subitems {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 34px;
  margin: 2px 0 4px;
}

.nav-subitems[hidden] {
  display: none;
}

.nav-subitem {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  transition: background 0.12s var(--ease);
}

.nav-subitem[hidden] {
  display: none;
}

.nav-subitem:hover {
  background: var(--neutral-tint);
  color: var(--text);
}

.nav-subitem.active {
  background: var(--accent);
  color: var(--accent-contrast);
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 14px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 12px;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.user-info {
  min-width: 0;
}

.user-email {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: capitalize;
}

#uitloggen-knop {
  width: 100%;
}

.content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  padding: 40px 48px 80px;
  max-width: 980px;
}

.content-header {
  margin-bottom: 28px;
}

.content-header-rij {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.content-header h1 {
  font-size: 26px;
}

.content-header .subtitle {
  margin-top: 4px;
}

/* ---------- Cards / panels ---------- */

.panel {
  position: relative;
  background: var(--glas-bg);
  backdrop-filter: var(--glas-blur);
  -webkit-backdrop-filter: var(--glas-blur);
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 24px;
  box-shadow: var(--glas-schaduw);
  scroll-margin-top: 24px;
  transition: box-shadow 0.2s var(--ease);
}

.panel h2 {
  font-size: 16px;
  margin-bottom: 4px;
}

.panel > .subtitle {
  margin-bottom: 18px;
}

.panel h2 + .subtitle {
  margin-top: 2px;
}

.schijf-rij {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

/* ---------- Paywall / abonnement ---------- */

.paywall {
  text-align: center;
  padding: 40px 24px;
  max-width: 460px;
  margin: 0 auto;
}

.paywall-icoon {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 14px;
  background: var(--accent-tint);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.paywall-icoon svg {
  width: 26px;
  height: 26px;
}

.paywall h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.paywall p {
  color: var(--text-secondary);
  font-size: 13.5px;
  margin: 0 0 8px;
}

.paywall-knop {
  width: auto;
  padding: 11px 22px;
}

.plan-kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.plan-kaart {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--bg-elevated);
}

.plan-kaart.plan-huidig {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.plan-kaart h3 {
  font-size: 15px;
  margin-bottom: 4px;
}

.plan-kaart .plan-huidig-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  margin-bottom: 10px;
}

.plan-kaart .plan-prijs {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 2px 0 6px;
}

.plan-kaart .plan-prijs small {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

.plan-kaart ul {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.verbruik-balk {
  height: 6px;
  border-radius: 3px;
  background: var(--neutral-tint);
  overflow: hidden;
  margin-top: 8px;
}

.verbruik-balk span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.verbruik-balk.vol span {
  background: var(--danger);
}

.nav-item .slot {
  margin-left: auto;
  width: 13px;
  height: 13px;
  opacity: 0.55;
  flex-shrink: 0;
}

.panel-header-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 4px;
}

.panel-header-row h2 {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 220px;
}

.panel-header-row .primary-action {
  flex: 0 0 auto;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.checkbox-groep {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 4px 0 2px;
}

.checkbox-groep label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.checkbox-groep input[type="checkbox"] {
  width: auto;
}

.tarief-rij {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 12px;
}

.tarief-rij .tarief-productcode,
.tarief-rij .tarief-bedrag {
  flex: 1;
}

.tarief-rij button {
  flex-shrink: 0;
}

/* ---------- Tables ---------- */

/* Brede tabellen mogen binnen hun eigen kader schuiven; de pagina zelf hoort nooit
   horizontaal te scrollen. Wikkel zo'n tabel in <div class="tabel-scroll">. */
.tabel-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

th, td {
  text-align: left;
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tbody tr {
  transition: background 0.1s var(--ease);
}

tbody tr:hover {
  background: var(--neutral-tint);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- Status badges ---------- */

.status-badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--neutral-tint);
  color: var(--text-secondary);
  white-space: nowrap;
}

.status-badge.status-actief,
.status-badge.status-goedgekeurd,
.status-badge.status-betaald,
.status-badge.status-verwerkt {
  background: var(--success-tint);
  color: var(--success);
}

/* Definitief is af, maar er is nog geen geld overgemaakt. Groen zou suggereren dat de cyclus
   rond is en dat je er niets meer mee hoeft; blauw zegt "klaar, wacht op betaling". */
.status-badge.status-definitief {
  background: var(--info-tint);
  color: var(--info);
}

.status-badge.status-wacht_op_controle,
.status-badge.status-ingediend,
.status-badge.status-betaalbaar {
  background: var(--warning-tint);
  color: var(--warning);
}

.status-badge.status-afgekeurd,
.status-badge.status-geannuleerd,
.status-badge.status-geblokkeerd,
.status-badge.status-verwerkt_met_fouten {
  background: var(--danger-tint);
  color: var(--danger);
}

.status-badge.status-concept,
.status-badge.status-vervangen {
  background: var(--neutral-tint);
  color: var(--text-secondary);
}

.status-badge.status-gefactureerd {
  background: var(--purple-tint);
  color: var(--purple);
}

/* ---------- Rows / lists (uren, facturen) ---------- */

.item-row {
  border-top: 1px solid var(--border);
  padding: 16px 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.item-row:first-child {
  border-top: none;
}

.item-row .item-main {
  font-size: 13.5px;
  line-height: 1.6;
}

.item-row .item-main strong {
  font-weight: 600;
}

.item-row .item-actions {
  white-space: nowrap;
  display: flex;
  gap: 8px;
}

.correctie-form {
  border-top: 1px solid var(--border);
  padding: 20px 2px;
}

.correctie-form:first-child {
  border-top: none;
}

.correctie-form p {
  margin: 0 0 12px;
  font-size: 13.5px;
}

.correctie-form button {
  margin-top: 14px;
}

/* ---------- Empty / loading states ---------- */

.empty-state {
  color: var(--text-tertiary);
  font-size: 13.5px;
  text-align: center;
  padding: 32px 0;
}

/* ---------- Dashboard (KPI-kaarten, periodefilter, trend) ---------- */

.periode-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.periode-filter label {
  margin: 0;
}

.periode-filter select,
.periode-filter input {
  width: auto;
  min-width: 160px;
}

/* Zelfde vorm als .periode-filter, maar semantisch een andere filter (opdrachtgever i.p.v.
   tijdvak). Bewust een eigen naam zodat ze los van elkaar kunnen bewegen. */
.filterbalk {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.filterbalk label {
  margin: 0;
}

.filterbalk select {
  width: auto;
  min-width: 200px;
}

.tabbladen {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.tabblad {
  width: auto;
  margin: 0;
  padding: 9px 14px;
  background: none;
  color: var(--text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 500;
}

.tabblad:hover {
  background: none;
  color: var(--text);
}

.tabblad.actief {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* Berichten: gesprekkenlijst links, gesprek rechts. Klapt op smalle schermen onder elkaar. */
.gesprek-indeling {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px) {
  .gesprek-indeling {
    grid-template-columns: 1fr;
  }
}

.gesprek-knop {
  width: 100%;
  display: block;
  text-align: left;
  background: none;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0 0 4px;
  box-shadow: none;
}

.gesprek-knop:hover {
  background: var(--neutral-tint);
}

.gesprek-knop.actief {
  background: var(--accent-tint);
  border-color: var(--accent-ring);
}

.gesprek-naam {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13.5px;
}

.gesprek-laatste {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ongelezen-teller {
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
}

.berichtenlijst {
  max-height: 420px;
  overflow-y: auto;
  padding: 4px 2px;
}

.bericht {
  max-width: 78%;
  margin-bottom: 10px;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 13.5px;
}

.bericht.van-mij {
  margin-left: auto;
  background: var(--accent);
  color: var(--accent-contrast);
}

.bericht.van-ander {
  background: var(--neutral-tint);
  color: var(--text);
}

.bericht-tekst {
  white-space: pre-wrap;
  word-break: break-word;
}

.bericht-meta {
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.7;
}

.bericht.van-mij .bericht-meta a {
  color: inherit;
}

/* Markering achter een labeltekst. Nodig omdat vrijwel elk veld in deze formulieren verplicht
   is: zonder markering leest een gebruiker een optioneel veld als verplicht en vult hij iets
   verzonnens in. */
.veld-optioneel {
  margin-left: 6px;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}

/* Actiebalk boven een tabel met selectievakjes (bulkexport van facturen). */
.bulk-balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.bulk-balk button {
  width: auto;
  margin: 0;
}

.kpi-groep {
  margin-bottom: 28px;
}

.kpi-groep h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

/* Dun glas en geen vol glas: deze kaarten staan al óp een glazen paneel, en twee volle
   lagen over elkaar geeft een melkwitte vlek in plaats van diepte. */
.kpi-card {
  background: var(--glas-dun-bg);
  backdrop-filter: var(--glas-dun-blur);
  -webkit-backdrop-filter: var(--glas-dun-blur);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-dun-schaduw);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.kpi-waarde {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.kpi-label {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.kpi-card.kpi-accent .kpi-waarde {
  color: var(--accent);
}

.kpi-card.kpi-warning .kpi-waarde {
  color: var(--warning);
}

.trend-chart {
  width: 100%;
  height: 120px;
  display: block;
}

.dashboard-tabellen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  /* De panelen erin verliezen hieronder hun eigen margin-bottom (nodig zodat ze naast elkaar
     gelijk uitlijnen, anders bepaalt de langste kolom de ruimte eronder voor allebei). Zonder
     compensatie hier plakt het gridblok daardoor direct tegen wat erna komt — precies het gat
     dat .panel normaal zelf regelt. Gebruikt op drie pagina's (hoofdaannemer- en
     onderaannemer-dashboard, rapportages); één keer hier gefixt, overal gefixt. */
  margin-bottom: 24px;
}

.dashboard-tabellen .panel {
  margin-bottom: 0;
}

/* ---------- Misc ---------- */

.import-summary {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--neutral-tint);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.import-summary ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--danger);
}

@media (max-width: 860px) {
  /* Sidebar is standaard ingeklapt tot alleen logo + menuknop; organisatie, navigatie en
     uitloggen klappen daaronder verticaal open — "alles mobiel bruikbaar" (zie
     docs/enterprise-platform/09-backend-en-frontend-architectuur.md §10.6) betekent ook dat je
     niet eerst door een scherm vol menu-items hoeft te scrollen voordat de pagina-inhoud
     begint. De knop zelf (drie streepjes) wordt door common.js in de sidebar gezet, niet in de
     HTML — dezelfde sidebar-markup staat ongewijzigd in dertig losse pagina's, zie
     initMobielMenu() in beheerder/hoofdaannemer/onderaannemer se common.js.
     .mobiel-open op .sidebar is de open/dicht-status; flex-wrap zorgt dat .sidebar-org,
     .sidebar-nav en .sidebar-footer (elk flex-basis: 100%) vanzelf onder de brand-rij
     doorlopen zodra ze zichtbaar zijn. */
  body.dashboard-body {
    flex-direction: column;
  }
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .sidebar .brand {
    padding: 4px 0;
  }
  .nav-item svg {
    width: 15px;
    height: 15px;
  }

  .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: auto;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    cursor: pointer;
  }
  .sidebar-toggle:hover {
    background: var(--neutral-tint);
  }
  .sidebar-toggle svg {
    width: 20px;
    height: 20px;
  }

  .sidebar-org,
  .sidebar-nav,
  .sidebar-footer {
    display: none;
    flex-basis: 100%;
  }
  .sidebar.mobiel-open .sidebar-org {
    display: block;
    margin-top: 12px;
  }
  .sidebar.mobiel-open .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
  }
  .sidebar.mobiel-open .sidebar-footer {
    display: block;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
  }
  .content {
    margin-left: 0;
    padding: 24px 20px 60px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .item-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
  .dashboard-tabellen {
    grid-template-columns: 1fr;
  }
}

/* ---------- Liquid Glass: het licht, en waar het niet komt ----------

   De vlekken staan als pseudo-elementen op de body en niet als losse <div>'s in
   achtendertig pagina's: het is achtergrond, geen inhoud, en zo hoeft geen enkele pagina
   een leeg element te krijgen dat alleen maar decor is.

   Ze staan langs de randen, niet achter de tekstkolom. Dat is een contrasteis, geen smaak:
   gemeten valt --text-secondary rechtstreeks op een terracotta vlek al bij opaciteit 0,04
   onder 4,5:1. Onder glas mag die vlek juist ver doorschieten (0,48), omdat het glas het
   licht temt. Vandaar: kleur achter panelen en langs de rand, nooit onder een kale alinea. */

.dashboard-body::before,
.dashboard-body::after,
.login-body::before,
.login-body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
}

.dashboard-body::before {
  /* Breedte en plek zijn geen smaak: de vlek moet binnen de zijbalk blijven (260px), want
     onder een kale alinea drukt terracotta van 0,30 --text-secondary naar 3,94:1. Achter
     glas mag dezelfde vlek juist tot 0,48 doorschieten. */
  width: 520px;
  height: 520px;
  left: -430px;
  top: -180px;
  background: var(--glas-licht-terracotta);
  opacity: 0.44;
}

.dashboard-body::after {
  width: 640px;
  height: 640px;
  right: -380px;
  bottom: -260px;
  background: var(--glas-licht-olijf);
  opacity: 0.34;
}

.login-body::before {
  width: 560px;
  height: 560px;
  left: -160px;
  top: -140px;
  background: var(--glas-licht-terracotta);
  opacity: 0.34;
}

.login-body::after {
  width: 600px;
  height: 600px;
  right: -200px;
  bottom: -200px;
  background: var(--glas-licht-zand);
  opacity: 0.40;
}

/* Op zwart telt elke vlek zwaarder door. Gemeten bovengrens voor --text-secondary op glas:
   terracotta 0,25, olijf 0,27, zand 0,17. Hieronder blijft alles daar ruim binnen. */
/* Gemeten op het scherm, niet vooraf berekend: op zwart tilt een vlek van 0,20 achter de
   zijbalk --text-secondary van 6,8:1 naar 3,8:1. Donkere modus krijgt daarom een derde van
   het licht van de lichte modus — genoeg om het glas te kleuren, te weinig om tekst te
   raken. Zand ontbreekt hier helemaal: licht op zwart eet contrast het snelst op. */
@media (prefers-color-scheme: dark) {
  .dashboard-body::before { opacity: 0.11; }
  .dashboard-body::after { opacity: 0.10; }
  .login-body::before { opacity: 0.12; }
  .login-body::after { background: var(--glas-licht-olijf); opacity: 0.08; }
}

/* ---------- Wat géén glas krijgt ----------

   1. Cijfers. Glas hoort op de omlijsting, niet onder een bedrag dat iemand moet aflezen.
      Een tabel of urenlijst binnen een glazen paneel staat daarom op een dekt vlak.
   2. Alles wat afgedrukt of gemaild wordt. Vervaging en transparantie drukken niet af;
      wat op het scherm diepte geeft, wordt bij de klant van de klant een grijze vlek.
      factuur.css blijft daarom volledig ongemoeid, en de pagina's die hem laden krijgen
      hier hun glas weer afgenomen — ook .panel, die factuur.html op het scherm gebruikt.
   3. Het zelfstandigheidsdossier. Dat is een verantwoordingsdocument; saai en duidelijk
      is daar precies goed. */

.panel .tabel-scroll,
.panel table,
.dashboard-body .item-row {
  background: var(--glas-vast);
}

.panel .tabel-scroll {
  border-radius: var(--radius);
}

.panel .tabel-scroll table {
  background: none;
}

.factuur-body::before,
.factuur-body::after {
  content: none;
}

.factuur-body .panel,
.factuur-body input,
.factuur-body select,
.factuur-body textarea,
.factuur-body button.secondary {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

@media print {
  .panel,
  .login-card,
  .kpi-card,
  .sidebar {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
}

/* ---------- Tekst op glas ----------
   Glas verlaagt het effectieve contrast, en --text-tertiary had op een wit paneel al maar
   net genoeg (5,6:1). Op glas zakt dat naar 3,86:1 — gemeten, niet geschat. De kleur zelf
   veranderen zou SCRNN meetrekken en een token herdefiniëren; in plaats daarvan stapt tekst
   die op glas belandt één trede op, naar --text-secondary. Dat is donkerder maken, niet
   lichter, en dus de kant op die mag. */
.panel .empty-state,
.panel .kpi-label,
.sidebar .brand-role,
.sidebar .user-role {
  color: var(--text-secondary);
}

/* Twee glaslagen over elkaar tellen op: in donkere modus maakt wit-op-wit-op-zwart een
   grijze plaat waar --text-secondary op zakt naar 3,24:1 (gemeten). Een kaart óp een
   paneel krijgt daarom geen wit maar een donkere tint — hetzelfde materiaal, andere kant
   op. In lichte modus speelt dit niet: daar telt wit op wit juist richting het papier. */
@media (prefers-color-scheme: dark) {
  .kpi-card {
    background: linear-gradient(142deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.16) 50%, rgba(0, 0, 0, 0.28));
    border-color: rgba(255, 255, 255, 0.10);
  }
}

/* Handmatige-uren-tabel op /hoofdaannemer/uren.html#inladen: een rij per gewerkte dag,
   losse inputs per kolom i.p.v. één groot csv-tekstveld — dat laatste is voor de bulk-import
   (CSV-upload), dit is voor losse correcties of een enkele medewerker. */
.handmatig-tabel {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}
.handmatig-tabel th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0 8px 6px 0;
}
.handmatig-tabel td {
  padding: 3px 8px 3px 0;
  vertical-align: top;
}
.handmatig-tabel input {
  width: 100%;
  min-height: 34px;
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.handmatig-tabel .handmatig-rij-verwijderen {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  font-size: 16px;
  line-height: 1;
}
.handmatig-tabel .handmatig-rij-verwijderen:hover {
  color: var(--danger);
}

/* Taalwissel NL/EN, overgenomen uit hetzelfde patroon als luzex.nl (zie site.html daar):
   tekstknopen omwisselen via een woordenlijst i.p.v. een tweede paginaversie onderhouden. */
.taal,
.pil-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.taal button,
.pil-tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  transition: background .2s ease, color .2s ease;
}
.taal button:hover,
.pil-tabs button:hover {
  color: var(--text);
}
.taal .taal-aan,
.pil-tabs .taal-aan {
  background: var(--text);
  color: var(--bg);
}

/* ---------- Verkoop (hoofdaannemer): invulpagina, tabellen en formulierrijen ---------- */

/* Zonder min-width: 0 rekt een brede tabel de hele pagina op: een flex-/grid-kind neemt anders de
   minimale inhoudsbreedte van zijn kinderen aan, ook als die zelf horizontaal kunnen scrollen. */
main.content {
  min-width: 0;
}

.vk-tabel-wrap {
  overflow-x: auto;
}

.vk-uren-tabel {
  width: 100%;
}

.vk-uren-tabel th:nth-child(n + 2),
.vk-uren-tabel td:nth-child(n + 2) {
  text-align: right;
  white-space: nowrap;
}

.vk-uren-tabel .vk-uren-invoer {
  width: 96px;
  text-align: right;
}

.vk-uren-invoer.vk-ongeldig {
  border-color: var(--danger);
}

.vk-totalen {
  margin-top: 16px;
  margin-left: auto;
  max-width: 320px;
}

.vk-knoppenrij,
.vk-rij-acties,
.actie-rij {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.vk-rij-acties {
  margin-top: 0;
  justify-content: flex-end;
}

.vk-tarief-rij {
  grid-template-columns: 2fr 1fr 1fr auto auto;
  align-items: center;
  margin-bottom: 8px;
}

.vk-checkrij {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}

.vk-tarief-rij .vk-checkrij {
  white-space: nowrap;
}

.vk-checkrij input {
  width: auto;
}

.secondary-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  margin-right: 12px;
}

.secondary-link:hover {
  color: var(--text);
}

@media (max-width: 700px) {
  .vk-tarief-rij {
    grid-template-columns: 1fr;
  }
}

input[type="color"] {
  height: 42px;
  padding: 4px;
  cursor: pointer;
}

/* Een select met lange optietekst mag zijn kolom niet oprekken: grid-kinderen nemen anders hun
   minimale inhoudsbreedte aan en duwen de pagina op mobiel breder dan het scherm. */
.form-grid > * {
  min-width: 0;
}