/* ============================================================================
   platform.css — Huisstijl van het beveiligde TenderTrust-platform
   (dashboard, gebruikersbeheer, account en alle latere apps)
   Mobile-first, met volledig uitgewerkte lichte én donkere modus.
   ============================================================================ */

:root{
  --tt-blauw:        #001fd0;
  --tt-blauw-donker: #0016a0;
  --tt-inkt:         #0A2241;
  --tt-link:         #001fd0;
  --tt-achtergrond:  #F4F6FB;
  --tt-kaart:        #FFFFFF;
  --tt-rand:         #D9E1EB;
  --tt-tekst:        #0A2241;
  --tt-tekst-zacht:  #5A6B85;
  --tt-groen:        #08713C;
  --tt-rood:         #C0392B;
  --tt-oranje:       #895707;
  --tt-schaduw:      0 2px 14px rgba(10,34,65,.08);
  --tt-invoer-bg:    #FFFFFF;
}

html[data-modus="donker"]{
  --tt-blauw:        #4a63ff;
  --tt-link:         #a8b5ff;
  --tt-blauw-donker: #3a50e0;
  --tt-achtergrond:  #0d1524;
  --tt-kaart:        #16203a;
  --tt-rand:         #2a3854;
  --tt-tekst:        #e8edf6;
  --tt-tekst-zacht:  #93a3bd;
  --tt-groen:        #35c47c;
  --tt-rood:         #ff7a6b;
  --tt-oranje:       #f0b35b;
  --tt-schaduw:      0 2px 14px rgba(0,0,0,.45);
  --tt-invoer-bg:    #0f1930;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  font-family:'Manrope','Segoe UI',system-ui,sans-serif;
  background:var(--tt-achtergrond);
  color:var(--tt-tekst);
  min-height:100vh;
  transition:background-color .3s ease,color .3s ease;
  -webkit-text-size-adjust:100%;
}
a{color:var(--tt-link);text-decoration:none}
a:hover{text-decoration:underline}
/* Links in lopende tekst blijven herkenbaar zonder kleurwaarneming. */
p a:not([class]),.tt-subtitel a,.tt-melding a{
  text-decoration:underline;text-underline-offset:.18em;
}

/* ── Bovenbalk ── */
.tt-balk{
  background:var(--tt-kaart);
  border-bottom:1px solid var(--tt-rand);
  padding:12px 16px;
  display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:50;
  box-shadow:var(--tt-schaduw);
}
.tt-balk__logo{height:40px;width:auto;display:block}
.tt-balk__logo--donker{display:none}
html[data-modus="donker"] .tt-balk__logo--licht{display:none}
html[data-modus="donker"] .tt-balk__logo--donker{display:block}
.tt-balk__titel{font-size:17px;font-weight:700;margin:0;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Inhoud ── */
.tt-inhoud{max-width:1100px;margin:0 auto;padding:22px 16px 60px}
.tt-koptitel{font-size:22px;font-weight:700;margin:6px 0 4px}
.tt-subtitel{color:var(--tt-tekst-zacht);margin:0 0 22px;font-size:14px}
.tt-pagina-acties{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}

/* ── Meldingen ── */
.tt-melding{border-radius:10px;padding:12px 16px;margin:0 0 18px;font-size:14px;
  border:1px solid transparent}
.tt-melding--info {background:rgba(0,31,208,.08);border-color:rgba(0,31,208,.25);color:var(--tt-tekst)}
.tt-melding--ok   {background:rgba(14,138,74,.10);border-color:rgba(14,138,74,.35);color:var(--tt-tekst)}
.tt-melding--fout {background:rgba(192,57,43,.10);border-color:rgba(192,57,43,.35);color:var(--tt-tekst)}

/* ── Dashboardtegels ── */
.tt-tegels{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.tt-tegels{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.tt-tegels{grid-template-columns:repeat(3,1fr)}}
.tt-tegel{
  display:block;background:var(--tt-kaart);border:1px solid var(--tt-rand);
  border-radius:14px;padding:20px 18px;box-shadow:var(--tt-schaduw);
  color:var(--tt-tekst);transition:transform .18s,border-color .18s;
}
a.tt-tegel:hover{transform:translateY(-3px);border-color:var(--tt-blauw);text-decoration:none}
.tt-tegel__icoon{width:46px;height:46px;border-radius:11px;background:var(--tt-blauw);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.tt-tegel__icoon svg{width:24px;height:24px;stroke:#fff;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tt-tegel__naam{font-size:16px;font-weight:700;margin:0 0 4px}
.tt-tegel__uitleg{font-size:13px;color:var(--tt-tekst-zacht);margin:0;line-height:1.5}
.tt-tegel--stil{opacity:.55;cursor:default}
.tt-tegel--stil .tt-tegel__icoon{background:var(--tt-tekst-zacht)}
.tt-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;background:var(--tt-rand);color:var(--tt-tekst);
  border-radius:20px;padding:3px 10px;margin-top:10px}

/* ── Kaarten en formulieren ── */
.tt-kaart{background:var(--tt-kaart);border:1px solid var(--tt-rand);
  border-radius:14px;padding:22px;box-shadow:var(--tt-schaduw)}
.tt-veld{margin-bottom:16px}
.tt-veld label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.tt-veld input,.tt-veld select{
  width:100%;padding:11px 13px;font-size:15px;font-family:inherit;
  border:1px solid var(--tt-rand);border-radius:9px;
  background:var(--tt-invoer-bg);color:var(--tt-tekst);
}
.tt-veld input:focus,.tt-veld select:focus{outline:2px solid var(--tt-blauw);outline-offset:1px}
.tt-hulptekst{font-size:12px;color:var(--tt-tekst-zacht);margin-top:5px}

.tt-knop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;font-size:15px;font-weight:600;font-family:inherit;
  border:none;border-radius:9px;cursor:pointer;
  background:var(--tt-blauw);color:#fff;transition:background-color .2s;
  min-height:44px;
}
.tt-knop[hidden]{display:none}
.tt-knop:hover{background:var(--tt-blauw-donker)}
.tt-knop--stil{background:transparent;color:var(--tt-tekst);border:1px solid var(--tt-rand)}
.tt-knop--stil:hover{background:var(--tt-rand)}
.tt-knop--gevaar{background:var(--tt-rood)}
.tt-knop--gevaar:hover{background:#a03024}
.tt-knop:disabled{opacity:.5;cursor:not-allowed}

/* ── Tabellen ── */
.tt-tabelwerkbalk{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.tt-tabelwerkbalk input[type=search]{
  flex:1;min-width:180px;padding:10px 13px;font-size:14px;font-family:inherit;
  border:1px solid var(--tt-rand);border-radius:9px;
  background:var(--tt-invoer-bg);color:var(--tt-tekst);
}
.tt-tabelhoes{overflow-x:auto;border:1px solid var(--tt-rand);border-radius:12px;
  background:var(--tt-kaart)}
table.tt-tabel{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.tt-tabel th{
  text-align:left;padding:12px 14px;font-size:12px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--tt-tekst-zacht);
  border-bottom:2px solid var(--tt-rand);user-select:none;
  white-space:nowrap;
}
.tt-tabel th .pijl{opacity:.45;font-size:10px;margin-left:4px}
.tt-tabel td{padding:12px 14px;border-bottom:1px solid var(--tt-rand);vertical-align:middle}
.tt-tabel tbody tr:last-child td{border-bottom:none}
.tt-tabel tbody tr:hover{background:rgba(0,31,208,.045)}
html[data-modus="donker"] .tt-tabel tbody tr:hover{background:rgba(74,99,255,.10)}

.tt-rolbadge{display:inline-block;font-size:12px;font-weight:700;border-radius:20px;padding:3px 11px}
.tt-rolbadge--superadmin{background:rgba(0,31,208,.12);color:var(--tt-link)}
.tt-rolbadge--admin{background:rgba(14,138,74,.12);color:var(--tt-groen)}
.tt-rolbadge--user{background:rgba(185,119,14,.14);color:var(--tt-oranje)}
.tt-status--uit{color:var(--tt-rood);font-weight:600}
.tt-status--aan{color:var(--tt-groen);font-weight:600}

.tt-rijknop{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--tt-rand);border-radius:8px;
  background:transparent;color:var(--tt-tekst);cursor:pointer;margin-right:6px;
  transition:background-color .2s,color .2s,border-color .2s;
}
.tt-rijknop:hover{background:var(--tt-blauw);border-color:var(--tt-blauw);color:#fff}
.tt-rijknop--gevaar:hover{background:var(--tt-rood);border-color:var(--tt-rood)}
.tt-rijknop:disabled{opacity:.35;cursor:not-allowed}
.tt-rijknop:disabled:hover{background:none;border-color:var(--tt-rand);color:inherit}
.tt-rijknop svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── Modals ── */
.tt-modal-sluier{
  position:fixed;inset:0;background:rgba(10,34,65,.55);z-index:200;
  display:none;align-items:flex-start;justify-content:center;
  padding:24px 14px;overflow-y:auto;
}
.tt-modal-sluier.open{display:flex}
.tt-modal{
  background:var(--tt-kaart);border:1px solid var(--tt-rand);border-radius:16px;
  width:100%;max-width:460px;padding:24px;margin:auto 0;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}
.tt-modal__kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.tt-modal__titel{font-size:18px;font-weight:700;margin:0}
.tt-modal__sluit{
  width:44px;height:44px;border:none;border-radius:8px;background:transparent;
  color:var(--tt-tekst-zacht);font-size:22px;line-height:1;cursor:pointer;
}
.tt-modal__sluit:hover{background:var(--tt-rand);color:var(--tt-tekst)}
.tt-modal__voet{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--tt-blauw);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

@media(max-width:480px){
  .tt-inhoud{padding:16px 12px 50px}
  .tt-kaart{padding:16px}
  .tt-modal{padding:18px}
  .tt-modal__voet .tt-knop{flex:1}
}

/* Gedeelde samenvattingskaarten: facturatie en boekhouding. */
.tt-cijfers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}
.tt-cijfer{min-width:0;background:var(--tt-kaart);border:1px solid var(--tt-rand);border-radius:12px;padding:14px 16px;box-shadow:var(--tt-schaduw)}
.tt-cijfer__waarde{font-size:20px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.tt-cijfer__naam{font-size:12px;color:var(--tt-tekst-zacht);margin-top:4px;line-height:1.5}

@media(min-width:760px){.tt-cijfers{grid-template-columns:repeat(4,minmax(0,1fr))}.tt-cijfers--vijf{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Fase 5: één werkplek. Modules gebruiken dezelfde navigatie en bouwstenen. */
.tt-platform{line-height:1.5}
.tt-platform :is(button,input,select,textarea){font-family:inherit}
.tt-platform :is(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--tt-blauw);outline-offset:3px}
.tt-platform :is(.tt-inhoud,.wrap){min-width:0;scroll-margin-top:calc(var(--tt-balkhoogte,72px) + 12px)}
.tt-platform :is(.tt-koptitel,.page-title){letter-spacing:-.025em}
.tt-platform :is(.tt-kaart,.tt-tegel){box-shadow:0 3px 14px rgba(10,34,65,.035)}
.tt-platform .tt-veld :is(input,select,textarea){min-height:44px;font-family:inherit}
.tt-platform .tt-veld textarea{width:100%;border:1px solid var(--tt-rand);border-radius:9px;padding:11px 13px;background:var(--tt-invoer-bg);color:var(--tt-tekst);font-size:15px;resize:vertical}
.tt-platform :is(input,textarea)::placeholder{color:var(--tt-tekst-zacht);opacity:1}
.tt-platform .tt-veld label{color:var(--tt-tekst)}
.tt-platform .tt-modal__voet{position:sticky;bottom:-24px;background:var(--tt-kaart);padding-top:16px;padding-bottom:8px;z-index:2}
.tt-platform .tt-modal{max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain}
.tt-platform .tt-modal-sluier{overscroll-behavior:contain}
.tt-start-cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:22px 0}
.tt-start-cijfers .tt-kaart{min-width:0;padding:20px}
.tt-start-cijfers strong{display:block;font-size:27px;line-height:1.25;letter-spacing:-.025em;margin:8px 0;color:var(--tt-tekst)}
.tt-start-cijfers p{margin:0;font-size:13px;color:var(--tt-tekst-zacht)}
.tt-start-grid{margin:28px 0 30px}
.tt-start-groep{margin:24px 0}
.tt-start-groep h3{color:var(--tt-tekst-zacht);font-size:13px!important;letter-spacing:.06em;text-transform:uppercase}
.tt-start-cijfers small{display:block;color:var(--tt-tekst-zacht);font-size:12px;line-height:1.5}
.tt-start-grid h3{margin:0 0 14px;font-size:17px}
.tt-start-lijst{margin:22px 0;padding:22px}
.tt-start-lijst ul{list-style:none;padding:0;margin:0}
.tt-start-lijst h3{margin:0 0 12px;font-size:17px}
.tt-start-lijst li span{flex:none;color:var(--tt-tekst-zacht);font-size:13px}
.tt-start-lijst li{padding:13px 0;border-bottom:1px solid var(--tt-rand);display:flex;gap:12px;justify-content:space-between;align-items:flex-start}
.tt-start-lijst li:last-child{border-bottom:0}
.tt-start-lijst :is(p,small){margin:3px 0;font-size:13px;color:var(--tt-tekst-zacht)}
.tt-start-lijst a{font-weight:700}
.tt-start-sectie{margin:30px 0 12px;font-size:18px}
.tt-platform .tt-tegel{position:relative;display:flex;flex-direction:column;min-height:168px;padding:22px;transition:border-color .15s,box-shadow .15s}
.tt-platform .tt-tegel:hover{transform:none;box-shadow:0 4px 20px rgba(0,31,208,.09)}
.tt-platform .tt-tegel__icoon{width:38px;height:38px;border-radius:10px;margin-bottom:14px}
.tt-platform .tt-tegel__icoon svg{width:21px;height:21px}
.tt-platform .tt-tegel__naam{font-size:16px}
.tt-platform .tt-tegel__uitleg{font-size:13px;max-width:44ch}
@media(min-width:1100px){
 .tt-platform>.tt-inhoud{max-width:1480px;padding:28px 30px 64px}
}
@media(max-width:1099px){
 .tt-platform>.tt-inhoud{padding:22px 18px 54px}
}
@media(max-width:599px){
 .tt-platform>.tt-inhoud,.tt-platform>.wrap{padding:18px 12px 48px}
 .tt-platform :is(.tt-tabelwerkbalk,.tt-pagina-acties){gap:8px}
 .tt-platform .tt-tabelwerkbalk input[type=search]{min-width:0;flex-basis:100%}
 .tt-start-cijfers{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .tt-start-cijfers .tt-kaart{padding:14px}
 .tt-start-cijfers strong{font-size:22px;overflow-wrap:anywhere}
 .tt-platform .tt-kaart{padding:18px}
 .tt-platform .tt-modal-sluier{padding:12px 8px}
 .tt-platform .tt-modal{padding:18px 14px;max-height:calc(100dvh - 24px)}
 .tt-platform .tt-modal__voet{bottom:-18px}
 .tt-platform :is(input,select,textarea){font-size:16px}
}
@media(prefers-reduced-motion:reduce){.tt-platform *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.tt-investeringen .popup-close{width:44px;height:44px}
.tt-investeringen .popup{overscroll-behavior:contain}
@media(max-width:599px){.tt-start-lijst li{flex-wrap:wrap;gap:4px}}

@media(max-width:599px){.tt-start-cijfers>.tt-cijfer:last-child:nth-child(odd){grid-column:1/-1}}

.tt-platform .toast.show{display:flex;align-items:center;gap:12px;pointer-events:auto}
.tt-toastsluit{flex:none;width:44px;height:44px;padding:0;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;font-size:24px;line-height:1;cursor:pointer}
.tt-platform .toast:not(.show) .tt-toastsluit{display:none}

/* ── Alleen voor schermlezers ── */
.tt-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Tarieven (gedeeld: prestaties, facturatie) ──
   Eén beeldtaal voor "welk tarief geldt en waarom". */
.tt-tarief{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.tt-tariefbron{display:inline-block;font-size:11px;font-weight:600;border-radius:20px;
  padding:1px 8px;background:var(--tt-rand);color:var(--tt-tekst-zacht);white-space:nowrap}
.tt-tariefbron--dossier{background:rgba(0,31,208,.10);color:var(--tt-link)}
.tt-tariefbron--klant{background:rgba(8,113,60,.12);color:var(--tt-groen)}
.tt-tariefbron--prestatie{background:rgba(137,87,7,.14);color:var(--tt-oranje)}
html[data-modus="donker"] .tt-tariefbron--dossier{background:rgba(74,99,255,.18)}
html[data-modus="donker"] .tt-tariefbron--klant{background:rgba(53,196,124,.16)}
html[data-modus="donker"] .tt-tariefbron--prestatie{background:rgba(240,179,91,.16)}

/* Invoerveld met euroteken en eenheid, bv. € [135,00] /u */
.tt-invoer-eenheid{display:flex;align-items:center;border:1px solid var(--tt-rand);border-radius:9px;
  background:var(--tt-invoer-bg);color:var(--tt-tekst-zacht);padding:0 12px;gap:6px}
.tt-invoer-eenheid:focus-within{outline:2px solid var(--tt-blauw);outline-offset:1px}
.tt-invoer-eenheid input,.tt-veld .tt-invoer-eenheid input{flex:1;min-width:0;border:none;background:transparent;
  padding:11px 0;font:inherit;font-size:15px;color:var(--tt-tekst);outline:none;
  font-variant-numeric:tabular-nums;text-align:right}
.tt-invoer-eenheid input:focus,.tt-invoer-eenheid input:focus-visible,
.tt-veld .tt-invoer-eenheid input:focus{outline:none!important;box-shadow:none!important}
.tt-invoer-eenheid span{font-size:14px;white-space:nowrap}
.tt-invoer-eenheid--klein{min-width:118px}
.tt-invoer-eenheid--klein input{padding:8px 0;font-size:14px}

/* Tariefkeuze in het formulier van één prestatie */
.tt-tariefkeuze{border:1px solid var(--tt-rand);border-radius:12px;padding:12px 14px 4px;margin:0 0 16px}
.tt-tariefkeuze legend{font-size:13px;font-weight:600;padding:0 6px}
.tt-tariefkeuze .pr-keuze{margin-bottom:10px}
.tt-tariefkeuze__auto{margin:0 0 12px;font-size:14px}
.tt-tariefkeuze__let{display:inline-block;margin-top:4px;font-size:12px;color:var(--tt-oranje)}

/* Tarievenvenster */
.tt-tariefvolgorde{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.tt-tariefvolgorde li{flex:1 1 120px;display:flex;flex-direction:column;padding:8px 12px;
  border:1px solid var(--tt-rand);border-radius:10px;position:relative;font-size:13px}
.tt-tariefvolgorde li span{font-size:12px;color:var(--tt-tekst-zacht)}
.tt-tariefvolgorde li:first-child{border-color:var(--tt-blauw)}
.tt-tarieven__kop{font-size:14px;margin:22px 0 10px}
.tt-tarieven__standaard{grid-template-columns:repeat(2,minmax(0,1fr))}
.tt-tarieven__toevoegen{margin-bottom:10px}
.tt-tarieven__toevoegen label{display:block;margin:0 0 6px}
.tt-tarieven__tabel{min-width:520px;table-layout:fixed}
.tt-tarieven__tabel td{padding:8px 12px}
.tt-tarieven__tabel th:nth-child(2),.tt-tarieven__tabel th:nth-child(3){width:128px}
.tt-tarieven__tabel th:last-child{width:60px}
.tt-tarieven__tabel td:last-child{text-align:right}
.tt-tarieven__tabel .tt-invoer-eenheid--klein{min-width:0;padding:0 8px}
.tt-tarieven__rij--dossiers td:first-child{padding-left:28px}
.tt-tarieven__leeg{text-align:center;color:var(--tt-tekst-zacht);padding:22px!important;line-height:1.6}
.tt-tariefsoort{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  border-radius:20px;padding:2px 8px;margin-right:4px;vertical-align:1px}
.tt-tariefsoort--klanten{background:rgba(8,113,60,.12);color:var(--tt-groen)}
.tt-tariefsoort--dossiers{background:rgba(0,31,208,.10);color:var(--tt-link)}
.tt-tarieven__herbereken{display:flex;gap:10px;align-items:flex-start;margin:18px 0 6px;padding:12px 14px;
  border:1px solid var(--tt-rand);border-radius:12px;cursor:pointer;font-size:14px}
.tt-tarieven__herbereken input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--tt-blauw)}
@media(max-width:520px){
  .tt-tarieven__standaard{grid-template-columns:minmax(0,1fr)}
  .tt-tariefvolgorde li{flex-basis:calc(50% - 6px)}
}

/* ── Weergavetabs: klantenportaal én de onderdeelknoppen van elke app ──
   Eén vormgeving. .tt-weergaven (tt_weergaven() in PHP) wisselt tussen de
   onderdelen van een app; de knoppen blijven op elk onderdeel staan. */
.tt-portaaltabs,.tt-weergaven{display:flex;gap:4px;padding:4px;margin:0 0 20px;border:1px solid var(--tt-rand);
  border-radius:12px;background:var(--tt-kaart);box-shadow:var(--tt-schaduw);width:max-content;max-width:100%;overflow-x:auto}
:is(.tt-portaaltabs,.tt-weergaven) a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;min-height:42px;border-radius:9px;
  font-size:14px;font-weight:600;color:var(--tt-tekst-zacht);text-decoration:none;white-space:nowrap}
:is(.tt-portaaltabs,.tt-weergaven) a:hover{color:var(--tt-tekst);background:var(--tt-achtergrond);text-decoration:none}
:is(.tt-portaaltabs,.tt-weergaven) a[aria-current="page"]{background:var(--tt-blauw);color:#fff}
:is(.tt-portaaltabs,.tt-weergaven) a:focus-visible{outline:3px solid var(--tt-blauw);outline-offset:2px}
:is(.tt-portaaltabs,.tt-weergaven) svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:520px){.tt-portaaltabs{width:100%}.tt-portaaltabs a{flex:1;justify-content:center;padding:9px 8px}
  .tt-portaaltabs svg{display:none}}
.tt-weergavebalk{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 22px}
.tt-weergavebalk .tt-weergaven{margin:0}
.tt-weergavebalk__acties{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
[data-weergave-paneel][hidden]{display:none!important}
[data-weergave-paneel]>h2[tabindex="-1"]:focus,[data-weergave-paneel] h3[tabindex="-1"]:focus{outline:none}
@media(max-width:599px){
  .tt-weergaven{width:100%;flex-wrap:wrap}
  .tt-weergaven a{flex:1 1 calc(50% - 4px);justify-content:center;padding:9px 8px}
  .tt-weergavebalk__acties{margin-left:0;width:100%}
  .tt-weergavebalk__acties>*{flex:1 1 auto}
}

/* ── Bovenbalk: Apps links, persoonlijk menu rechts ──
   Eén bovenbalk voor elk scherm. Beide menu's klappen open als paneel onder
   de balk en sluiten met Escape, een klik ernaast of een gekozen link. */
.tt-platform .tt-balk{min-height:68px;padding:10px 20px;gap:14px}
.tt-balk__merk{flex:none;min-width:0;display:flex;align-items:center}
.tt-springlink{position:fixed;top:-100px;left:12px;z-index:10000;padding:12px 18px;background:var(--tt-kaart);color:var(--tt-tekst);border:2px solid var(--tt-blauw);border-radius:8px}
.tt-springlink:focus{top:10px}
.tt-navknop,.tt-wie__knop{display:inline-flex;align-items:center;gap:9px;min-height:44px;flex:none;
  border:1px solid var(--tt-rand);border-radius:11px;background:var(--tt-kaart);color:var(--tt-tekst);
  font-weight:700;font-size:14px;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.tt-navknop{padding:8px 14px 8px 12px}
.tt-navknop svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.tt-navknop:hover,.tt-wie__knop:hover{border-color:var(--tt-blauw);color:var(--tt-blauw)}
.tt-navknop[aria-expanded=true],.tt-wie__knop[aria-expanded=true]{background:var(--tt-blauw);border-color:var(--tt-blauw);color:#fff}
.tt-wie{position:relative;flex:none;margin-left:auto}
.tt-wie__knop{padding:5px 12px 5px 5px}
.tt-wie__naam{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-wie__pijl{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.tt-wie__knop[aria-expanded=true] .tt-wie__pijl{transform:rotate(180deg)}
.tt-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:50%;
  background:rgba(0,31,208,.12);color:var(--tt-blauw);font-size:13px;font-weight:800;letter-spacing:.02em}
html[data-modus="donker"] .tt-avatar{background:rgba(168,181,255,.18);color:var(--tt-link)}
.tt-wie__knop[aria-expanded=true] .tt-avatar{background:rgba(255,255,255,.22);color:#fff}
.tt-avatar--groot{width:48px;height:48px;font-size:17px}

.tt-uitklap{position:fixed;z-index:70;top:calc(var(--tt-balkhoogte,68px) + 8px);
  max-height:calc(100dvh - var(--tt-balkhoogte,68px) - 20px);overflow:auto;overscroll-behavior:contain;
  background:var(--tt-kaart);border:1px solid var(--tt-rand);border-radius:16px;
  box-shadow:0 18px 48px rgba(10,34,65,.18);animation:tt-uitklap .14s ease-out}
html[data-modus="donker"] .tt-uitklap{box-shadow:0 18px 48px rgba(0,0,0,.55)}
.tt-uitklap[hidden]{display:none}
@keyframes tt-uitklap{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Apps */
.tt-navigatie{left:12px;width:min(340px,calc(100vw - 24px));padding:10px}
.tt-navigatie a{display:flex;align-items:center;gap:13px;min-height:48px;padding:7px 10px;border-radius:11px;
  color:var(--tt-tekst);font-size:15px;font-weight:600;text-decoration:none}
.tt-navigatie a:hover{background:var(--tt-achtergrond);text-decoration:none}
.tt-navigatie a[aria-current=page]{background:rgba(0,31,208,.08);color:var(--tt-blauw)}
html[data-modus="donker"] .tt-navigatie a[aria-current=page]{background:rgba(168,181,255,.12);color:var(--tt-link)}
.tt-nav-icoon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,var(--tt-blauw),#5b7bff);color:#fff}
.tt-nav-icoon svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tt-nav-start{margin-bottom:2px}
.tt-navgroep h2{font:700 11px/1.5 'Manrope',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--tt-tekst-zacht);margin:14px 10px 4px}
.tt-navgroep ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}

/* Persoonlijk menu */
.tt-wiemenu{right:12px;width:min(330px,calc(100vw - 24px));padding:8px}
.tt-wiemenu__kop{display:flex;gap:14px;align-items:center;padding:12px 12px 14px;border-bottom:1px solid var(--tt-rand);margin-bottom:6px}
.tt-wiemenu__kop>div{min-width:0;display:flex;flex-direction:column;gap:2px}
.tt-wiemenu__kop strong{font-size:16px;overflow-wrap:anywhere}
.tt-wiemenu__mail{font-size:13px;color:var(--tt-tekst-zacht);overflow-wrap:anywhere}
.tt-wiemenu__rol{align-self:flex-start;margin-top:4px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tt-blauw);border-bottom:2px solid currentColor;padding-bottom:1px}
html[data-modus="donker"] .tt-wiemenu__rol{color:var(--tt-link)}
.tt-wiemenu__bedrijf{margin:0 0 6px;padding:2px 12px 10px;border-bottom:1px solid var(--tt-rand);font-size:13px;font-weight:600}
.tt-wiemenu__bedrijf span{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tt-tekst-zacht)}
.tt-wiemenu__lijst{list-style:none;margin:0;padding:0}
.tt-wiemenu__lijst form{margin:0}
.tt-wiemenu__item{display:flex;align-items:center;gap:13px;width:100%;min-height:46px;padding:8px 12px;border:0;border-radius:10px;
  background:none;color:var(--tt-tekst);font:inherit;font-size:15px;font-weight:500;text-align:left;text-decoration:none;cursor:pointer}
.tt-wiemenu__item:hover{background:var(--tt-achtergrond);text-decoration:none}
.tt-wiemenu__item>svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--tt-tekst-zacht);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tt-wiemenu__item>span:first-of-type{flex:1}
.tt-schakelaar{position:relative;flex:none;width:42px;height:24px;border-radius:12px;background:var(--tt-rand);transition:background-color .2s}
.tt-schakelaar::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
[aria-checked=true]>.tt-schakelaar{background:var(--tt-blauw)}
[aria-checked=true]>.tt-schakelaar::after{transform:translateX(18px)}

@media(max-width:899px){.tt-wie__naam{display:none}.tt-wie__knop{padding:5px 8px 5px 5px}}
@media(max-width:599px){
 .tt-platform .tt-balk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 10px;padding:8px 12px}
 .tt-navknop{grid-column:1;grid-row:1;padding:8px 11px}
 .tt-balk__merk{grid-column:2;grid-row:1;overflow:hidden}
 .tt-platform .tt-balk__logo{width:100%;max-width:150px;height:auto;max-height:34px;object-fit:contain;object-position:left}
 .tt-wie{grid-column:3;grid-row:1}
 .tt-platform .tt-balk__titel{grid-column:1/-1;grid-row:2;font-size:15px;line-height:1.4}
 .tt-navigatie{left:8px;width:calc(100vw - 16px)}
 .tt-wiemenu{right:8px;width:calc(100vw - 16px)}
}
.tt-portaaltabs--bedrijf{margin-bottom:12px}

/* ── Dashboards van de apps (Facturatie, Prestaties) ──
   Periodekiezer, kerncijfers en grafiekkaarten. Het gedrag staat in
   tt-dashboard.js. Reekskleuren: vaste volgorde, licht en donker apart
   gekozen en gecontroleerd op kleurenblindheid; statuskleuren alleen voor
   een toestand (betaald, open, vervallen) en altijd met een label erbij. */
:root{
  --tt-reeks-1:#2a78d6;--tt-reeks-2:#eb6834;--tt-reeks-3:#1baf7a;--tt-reeks-4:#eda100;
  --tt-reeks-5:#e87ba4;--tt-reeks-6:#008300;--tt-reeks-7:#6250d6;--tt-reeks-8:#e34948;
  --tt-status-goed:#0ca30c;--tt-status-letop:#fab219;--tt-status-ernstig:#ec835a;--tt-status-kritiek:#d03b3b;
  --tt-grafiek-raster:#e1e0d9;--tt-grafiek-as:#c3c2b7;--tt-grafiek-zacht:#898781;
  --tt-stijging:#006300;--tt-daling:#c0392b;
}
html[data-modus="donker"]{
  --tt-reeks-1:#3987e5;--tt-reeks-2:#d95926;--tt-reeks-3:#199e70;--tt-reeks-4:#c98500;
  --tt-reeks-5:#d55181;--tt-reeks-6:#008300;--tt-reeks-7:#9085e9;--tt-reeks-8:#e66767;
  --tt-grafiek-raster:#2c3a55;--tt-grafiek-as:#3a4a66;--tt-grafiek-zacht:#93a3bd;
  --tt-stijging:#35c47c;--tt-daling:#ff7a6b;
}
.tt-dash-periode{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 18px;padding:12px 14px;
  background:var(--tt-kaart);border:1px solid var(--tt-rand);border-radius:14px;box-shadow:var(--tt-schaduw)}
.tt-dash-soorten{display:flex;flex-wrap:wrap;gap:3px;padding:3px;border-radius:10px;background:var(--tt-achtergrond)}
.tt-dash-soorten button{min-height:36px;padding:6px 12px;border:0;border-radius:8px;background:none;color:var(--tt-tekst-zacht);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.tt-dash-soorten button:hover{color:var(--tt-tekst)}
.tt-dash-soorten button[aria-pressed=true]{background:var(--tt-kaart);color:var(--tt-blauw);box-shadow:0 1px 4px rgba(10,34,65,.14)}
html[data-modus="donker"] .tt-dash-soorten button[aria-pressed=true]{color:var(--tt-link)}
.tt-dash-stapper{display:flex;align-items:center;gap:6px}
.tt-dash-stapper button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--tt-rand);
  border-radius:9px;background:var(--tt-kaart);color:var(--tt-tekst);cursor:pointer;font-size:16px}
.tt-dash-stapper button:hover:not(:disabled){border-color:var(--tt-blauw);color:var(--tt-blauw)}
.tt-dash-stapper button:disabled{opacity:.35;cursor:default}
.tt-dash-label{min-width:12ch;text-align:center;font-weight:800;font-size:15px}
.tt-dash-nu{min-height:38px;padding:6px 12px;border:1px solid var(--tt-rand);border-radius:9px;background:none;color:var(--tt-tekst);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.tt-dash-nu:hover{border-color:var(--tt-blauw);color:var(--tt-blauw)}
.tt-dash-filters{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;align-items:center}
.tt-dash-filters select{min-height:38px;padding:6px 10px;border:1px solid var(--tt-rand);border-radius:9px;background:var(--tt-invoer-bg);color:var(--tt-tekst);font:inherit;font-size:14px}
.tt-dash-filters .tt-kies{min-width:200px}

.tt-dash-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 18px}
@media(min-width:760px){.tt-dash-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.tt-dash-kpis{grid-template-columns:repeat(var(--kolommen,6),minmax(0,1fr))}}
.tt-kpi{min-width:0;padding:14px 16px;background:var(--tt-kaart);border:1px solid var(--tt-rand);border-radius:14px;box-shadow:var(--tt-schaduw)}
.tt-kpi__naam{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tt-tekst-zacht);line-height:1.4}
.tt-kpi__waarde{font-size:22px;font-weight:800;line-height:1.25;margin-top:6px;overflow-wrap:anywhere}
.tt-kpi__sub{font-size:13px;color:var(--tt-tekst-zacht);margin-top:4px;line-height:1.45}
.tt-kpi__sub .tt-stijgt{color:var(--tt-stijging);font-weight:700}
.tt-kpi__sub .tt-daalt{color:var(--tt-daling);font-weight:700}
.tt-kpi--klik{cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}
.tt-kpi--klik:hover{border-color:var(--tt-blauw)}

.tt-dash-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:18px}
@media(min-width:1000px){.tt-dash-raster{grid-template-columns:repeat(12,minmax(0,1fr))}
  .tt-dash-kaart{grid-column:span 6}.tt-dash-kaart--breed{grid-column:span 8}.tt-dash-kaart--smal{grid-column:span 4}.tt-dash-kaart--vol{grid-column:1/-1}}
.tt-dash-kaart{min-width:0;padding:18px 18px 16px;background:var(--tt-kaart);border:1px solid var(--tt-rand);border-radius:16px;box-shadow:var(--tt-schaduw)}
.tt-dash-kaart__kop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.tt-dash-kaart__kop h3{margin:0;font-size:16px;font-weight:800;flex:1;min-width:12ch}
.tt-dash-kaart__kop select{min-height:34px;padding:4px 8px;border:1px solid var(--tt-rand);border-radius:8px;background:var(--tt-invoer-bg);color:var(--tt-tekst);font:inherit;font-size:13px}
.tt-dash-kaart__uitleg{margin:-6px 0 10px;font-size:13px;color:var(--tt-tekst-zacht);line-height:1.5}
.tt-dash-grafiek{position:relative;height:290px}
.tt-dash-grafiek--klein{height:240px}
.tt-dash-leeg{display:flex;align-items:center;justify-content:center;min-height:160px;padding:20px;text-align:center;color:var(--tt-tekst-zacht);font-size:14px;line-height:1.5}

/* Het centrale vak bovenaan een dashboard (inlezen, timer) */
.tt-dash-hero{display:grid;gap:16px;margin-bottom:18px;padding:22px;border-radius:18px;border:1px solid var(--tt-rand);
  background:linear-gradient(135deg,rgba(0,31,208,.07),rgba(91,123,255,.03));box-shadow:var(--tt-schaduw)}
html[data-modus="donker"] .tt-dash-hero{background:linear-gradient(135deg,rgba(74,99,255,.18),rgba(22,32,58,.6))}
@media(min-width:900px){.tt-dash-hero{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center}}
.tt-dash-hero h3{margin:0 0 6px;font-size:19px;font-weight:800}
.tt-dash-hero p{margin:0;color:var(--tt-tekst-zacht);line-height:1.55;font-size:14px}
.tt-dash-snel{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tt-sleepvak{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:150px;padding:20px;
  border:2px dashed var(--tt-blauw);border-radius:14px;background:var(--tt-kaart);text-align:center;cursor:pointer;color:var(--tt-tekst);
  transition:background-color .15s,border-color .15s}
.tt-sleepvak:hover,.tt-sleepvak:focus-visible,.tt-sleepvak.tt-sleepvak--erboven{background:rgba(0,31,208,.06);outline:none}
html[data-modus="donker"] .tt-sleepvak:hover,html[data-modus="donker"] .tt-sleepvak.tt-sleepvak--erboven{background:rgba(74,99,255,.14)}
.tt-sleepvak svg{width:34px;height:34px;fill:none;stroke:var(--tt-blauw);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html[data-modus="donker"] .tt-sleepvak svg{stroke:var(--tt-link)}
.tt-sleepvak strong{font-size:16px}
.tt-sleepvak span{font-size:13px;color:var(--tt-tekst-zacht)}

/* Op te volgen: korte lijst met een actie per regel */
.tt-opvolg{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tt-opvolg li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 12px;border:1px solid var(--tt-rand);border-radius:11px}
.tt-opvolg__tekst{flex:1;min-width:16ch;font-size:14px;line-height:1.5}
.tt-opvolg__tekst small{display:block;color:var(--tt-tekst-zacht);font-size:12.5px}
.tt-opvolg__bedrag{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.tt-opvolg__acties{display:flex;flex-wrap:wrap;gap:6px}
.tt-opvolg .tt-knop{min-height:36px;padding:6px 12px;font-size:13px}
.tt-statuslabel{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;white-space:nowrap}
.tt-statuslabel::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--kleur)}
.tt-terugrij{margin:0 0 14px}
.tt-terugrij .tt-knop{display:inline-flex;align-items:center;gap:6px}
.tt-terugrij svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}