/* Aanvullingen op de Command-huisstijl, alleen wat het portaal extra nodig heeft.
   Alle kleuren, fonts en basisklassen komen uit command-stijl.css. */

/* sidebar: geen tellers, wel actieve tab-knoppen */
.zij .nav button[data-id]{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 11px;border-radius:9px;font-weight:500;font-size:14px;transition:.15s;color:var(--zij-tekst)}
.zij .nav button[data-id]:hover{background:rgba(255,255,255,.07);color:#fff}
.zij .nav button[data-id][aria-current="true"]{background:var(--oranje);color:#fff;font-weight:600}
.zij .nav button svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* tegels: vier op een rij in plaats van vijf, niet klikbaar */
.tiles.portaal{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.portaal .tile{cursor:default}
.tiles.portaal .tile:hover{border-color:var(--lijn);box-shadow:0 1px 2px rgba(20,23,28,.04)}
.tile .hint b{font-weight:600}
.tile .hint b.op{color:var(--groen-diep)}
.tile .hint b.neer{color:var(--rood-diep)}

/* dagstaafjes */
.staafjes{display:flex;align-items:flex-end;gap:2px;height:190px;padding:18px 20px 6px}
.staafjes div{flex:1;background:var(--goud);border-radius:2px 2px 0 0;min-height:2px;transition:.15s}
.staafjes div:hover{background:var(--goud-diep)}
.staafjes-voet{padding:0 20px 16px;font:400 12px 'IBM Plex Mono';color:var(--stil)}

.tabelwrap{overflow-x:auto}
table.rt{width:100%;border-collapse:collapse;min-width:420px}
table.rt th{text-align:left;font:600 11px 'IBM Plex Mono';letter-spacing:.05em;text-transform:uppercase;
  color:var(--stil);padding:11px 14px;border-bottom:1px solid var(--lijn);background:var(--panel-2)}
table.rt th.r,table.rt td.r{text-align:right}
table.rt td.num{font-family:'IBM Plex Mono';font-size:12.5px}
.leegmelding{padding:18px 20px;color:var(--stil);font-size:13px}

/* inloggen en activeren: zelfde tweedeling als het dashboard,
   donkere kolom links (als de sidebar), formulier rechts op creme */
.poort{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.poort-zij{background:var(--zij);color:var(--zij-tekst);padding:44px 46px;display:flex;flex-direction:column;
  justify-content:center;position:relative}
.poort-zij .logo{display:flex;align-items:center;gap:9px;color:#fff;font:700 15px 'Sora';
  position:absolute;top:44px;left:46px}
.poort-zij .logo em{font-style:normal;color:var(--oranje)}
.poort-zij .logo svg{width:29px;height:27px;flex-shrink:0}
.poort-zij h2{font:600 30px/1.25 'Sora';color:#fff;letter-spacing:-.01em;max-width:15ch}
.poort-zij p{margin-top:14px;font-size:14.5px;color:rgba(255,255,255,.62);max-width:38ch;line-height:1.6}
.poort-zij ul{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:11px}
.poort-zij li{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.78)}
.poort-zij li svg{width:16px;height:16px;stroke:var(--oranje);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.poort-zij .onderaan{position:absolute;bottom:40px;left:46px;font:400 11.5px 'IBM Plex Mono';color:rgba(255,255,255,.4)}
.poort-zij .onderaan b{color:var(--oranje);font-weight:600}

.poort-vak{background:var(--vlak);display:grid;place-items:center;padding:40px 28px}
.poort .kaartje{width:100%;max-width:372px}
.poort h1{font:600 24px 'Sora';margin-bottom:6px}
.poort p.uitleg{color:var(--dim);font-size:14px;margin-bottom:22px}
.poort label{display:block;font-size:13px;color:var(--dim);margin:15px 0 6px;font-weight:500}
.poort input{width:100%;padding:11px 13px;border:1px solid var(--lijn);border-radius:10px;
  background:var(--kaart);font:14.5px 'Inter';color:var(--text)}
.poort input:focus{outline:2px solid var(--oranje);outline-offset:-1px;border-color:transparent}
.poort .btn{width:100%;margin-top:22px;padding:11px 12px}
.poort .melding{margin-top:16px;background:var(--rood-zacht);border:1px solid var(--rood-fel);
  border-radius:10px;padding:10px 12px;font-size:13px;color:var(--rood-diep)}
.poort .hulp{margin-top:20px;font-size:12.5px;color:var(--stil);line-height:1.6}
.voetnoot{color:var(--stil);font:400 12px 'IBM Plex Mono';text-align:center;padding:22px 0 6px}

@media (max-width:820px){
  .poort{grid-template-columns:minmax(0,1fr);min-height:100vh}
  .poort-zij{padding:26px 22px 30px}
  .poort-zij h2{font-size:23px;margin-top:22px}
  .poort-zij ul,.poort-zij .onderaan{display:none}
  .poort-zij{justify-content:flex-start;position:static}
  .poort-zij .logo{position:static}
  .poort-vak{padding:28px 22px 44px}
}

@media (max-width:1000px){ .tiles.portaal{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .staafjes{height:150px;padding:14px 14px 6px} }