/* Ordo — productieplanning Axiom B.V.
   Visuele taal ontleend aan de bestaande productieplanning-PDF:
   zwarte balken, dichte regels, kleur als betekenis en niet als versiering.

   Rubik is het huisletter van Axiom en staat op onze eigen server. Voor tijden
   en tellingen gebruiken we dezelfde letter met tabelcijfers (tnum), zodat de
   kolommen uitlijnen zonder een tweede lettertype te hoeven laden. */

@font-face{font-family:Rubik; font-style:normal; font-weight:300;
  src:url("fonts/Rubik-Light.a38c0942c077.woff2") format("woff2"); font-display:swap;}
@font-face{font-family:Rubik; font-style:normal; font-weight:400;
  src:url("fonts/Rubik-Regular.ed50e96ec4b1.woff2") format("woff2"); font-display:swap;}
@font-face{font-family:Rubik; font-style:normal; font-weight:500;
  src:url("fonts/Rubik-Medium.7e7a7c064cc7.woff2") format("woff2"); font-display:swap;}
@font-face{font-family:Rubik; font-style:normal; font-weight:700;
  src:url("fonts/Rubik-Bold.ae1f470f539e.woff2") format("woff2"); font-display:swap;}
@font-face{font-family:Rubik; font-style:italic; font-weight:400;
  src:url("fonts/Rubik-Italic.d30821158a55.woff2") format("woff2"); font-display:swap;}
@font-face{font-family:Rubik; font-style:italic; font-weight:500;
  src:url("fonts/Rubik-MediumItalic.0774597d7bd8.woff2") format("woff2"); font-display:swap;}

:root{
  --papier:#FBFAF8;
  --vlak:#F1EFEA;
  --band:#E8E5DF;
  --lijn:#D8D4CB;
  --inkt:#191813;
  --inkt-2:#4A483F;
  --inkt-3:#7B786D;
  --balk:#15140F;
  --balk-inkt:#FBFAF8;
  --signaal:#B7302A;
  --signaal-zacht:#F6E2E0;
  --mijlpaal:#1F5FA8;
  --mijlpaal-zacht:#E2ECF7;
  --gereed:#4A7C59;
  --radius:2px;
  --cijfers:"Rubik",ui-monospace,monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--papier);
  color:var(--inkt);
  font:15px/1.45 "Rubik","Segoe UI",Helvetica,Arial,sans-serif;
  font-feature-settings:"tnum" 0;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}

/* ---------- kop ---------- */
.kop{
  background:var(--balk); color:var(--balk-inkt);
  display:flex; align-items:center; gap:20px;
  padding:10px 22px;
}
.merk{display:flex; align-items:center; gap:11px; text-decoration:none;}
.merk .logo{
  /* Het bronbestand is zwarte inkt op transparant; op de zwarte balk keren we
     het om in plaats van een tweede bestand bij te houden. */
  height:19px; width:auto; display:block; filter:invert(1); opacity:.95;
}
.merk .woordmerk{
  font-weight:500; font-size:15px; letter-spacing:.16em; text-transform:uppercase;
  padding-left:11px; border-left:1px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.9);
}
.kop .project{font-size:14px; opacity:.85;}
.kop .project b{font-weight:600; opacity:1;}
.kop .rechts{margin-left:auto; display:flex; gap:6px; align-items:center;}

.schakel{display:flex; border:1px solid rgba(255,255,255,.25); border-radius:var(--radius); overflow:hidden;}
.schakel a{
  padding:5px 14px; font-size:13px; text-decoration:none;
  color:rgba(255,255,255,.7); background:transparent;
}
.schakel a.actief{background:var(--balk-inkt); color:var(--balk); font-weight:600;}
.knop{
  padding:5px 12px; font-size:13px; text-decoration:none;
  border:1px solid rgba(255,255,255,.25); border-radius:var(--radius);
  color:rgba(255,255,255,.8);
}
.knop:hover{background:rgba(255,255,255,.1);}

/* ---------- bedieningsbalk ---------- */
.balk{background:var(--vlak); border-bottom:1px solid var(--lijn); padding:9px 22px;}
.balk-rij{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.balk-rij + .balk-rij{margin-top:8px;}
.etiket{
  font:500 10.5px/1 var(--cijfers); font-variant-numeric:tabular-nums;
  letter-spacing:.14em; text-transform:uppercase; color:var(--inkt-3);
  white-space:nowrap;
}

.dagen{display:flex; gap:3px; flex-wrap:wrap;}
.dag{
  display:flex; flex-direction:column; align-items:center;
  min-width:40px; padding:3px 7px; text-decoration:none;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--papier); line-height:1.15;
}
.dag small{font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--inkt-3);}
.dag b{font-size:15px; font-weight:600;}
.dag.actief{background:var(--balk); border-color:var(--balk);}
.dag.actief small{color:rgba(255,255,255,.65);}
.dag.actief b{color:#fff;}

.chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; font-size:12.5px; text-decoration:none;
  border:1px solid var(--lijn); border-radius:999px; background:var(--papier);
  white-space:nowrap;
}
.chip.actief{background:var(--balk); color:#fff; border-color:var(--balk);}
.chip .stip{width:8px; height:8px; border-radius:50%; flex:none;}
.chip .nr{
  font:500 10px/1 var(--cijfers); opacity:.55;
}

select,input[type=search]{
  font:14px/1 inherit; padding:4px 8px;
  border:1px solid var(--lijn); border-radius:var(--radius); background:var(--papier);
  color:var(--inkt);
}
input[type=search]{min-width:220px;}

.telling{
  margin-left:auto;
  font:500 11px/1 var(--cijfers); letter-spacing:.1em;
  text-transform:uppercase; color:var(--inkt-3);
}

/* ---------- lijst ---------- */
.inhoud{padding:0 22px 60px;}
.groepkop{
  display:flex; align-items:baseline; gap:12px;
  background:var(--balk); color:var(--balk-inkt);
  padding:5px 12px; margin:18px 0 0;
  font-weight:600; font-size:14px; letter-spacing:.01em;
  position:sticky; top:0; z-index:3;
}
.groepkop .telling-klein{
  margin-left:auto; font:500 10.5px/1 var(--cijfers);
  letter-spacing:.12em; opacity:.6;
}

table.planning{width:100%; border-collapse:collapse; font-size:14px;}
table.planning thead th{
  position:sticky; top:29px; z-index:2;
  background:var(--vlak); text-align:left;
  font:500 10.5px/1 var(--cijfers);
  letter-spacing:.13em; text-transform:uppercase; color:var(--inkt-2);
  padding:7px 10px; border-bottom:1px solid var(--lijn); white-space:nowrap;
}
table.planning td{padding:6px 10px; border-bottom:1px solid var(--lijn); vertical-align:top;}
table.planning tbody tr:nth-child(even) td{background:var(--vlak);}
td.tijd{
  font:500 13.5px/1.4 var(--cijfers);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
td.tijd .eind{color:var(--inkt-3);}
td.smal{white-space:nowrap;}
td.werk{width:44%;}

.disc{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.disc i{width:9px; height:9px; border-radius:2px; flex:none; display:inline-block;}

tr.kritiek td{background:var(--signaal-zacht) !important; color:var(--signaal); font-weight:600;}
tr.mijlpaal td{background:var(--mijlpaal-zacht) !important; color:var(--mijlpaal); font-weight:600;}
tr.informatief td{color:var(--inkt-3); font-style:italic;}
.gedeeld-merk{
  font:500 9.5px/1 var(--cijfers); letter-spacing:.1em;
  border:1px solid currentColor; border-radius:2px; padding:2px 4px; opacity:.7;
}

.status{
  font:500 10px/1 var(--cijfers); letter-spacing:.08em;
  text-transform:uppercase; padding:3px 6px; border-radius:2px;
  border:1px solid var(--lijn); color:var(--inkt-3); background:var(--papier);
}
.status.gereed{color:var(--gereed); border-color:var(--gereed);}
.status.vertraagd{color:var(--signaal); border-color:var(--signaal);}

.leeg{padding:60px 0; text-align:center; color:var(--inkt-3);}

/* ---------- tijdlijn ---------- */
.tijdlijn{margin-top:14px; border:1px solid var(--lijn); background:var(--papier);}
.tl-kop{
  display:grid; grid-template-columns:260px 1fr;
  border-bottom:1px solid var(--lijn); background:var(--vlak);
  position:sticky; top:0; z-index:3;
}
.tl-kop .as{position:relative; height:26px;}
.tl-kop .as span{
  position:absolute; top:7px; transform:translateX(-50%);
  font:500 10.5px/1 var(--cijfers); color:var(--inkt-2);
}
.tl-kop .hoek{
  padding:7px 12px; border-right:1px solid var(--lijn);
  font:500 10.5px/1 var(--cijfers);
  letter-spacing:.13em; text-transform:uppercase; color:var(--inkt-2);
}
.tl-groep{
  background:var(--balk); color:var(--balk-inkt);
  padding:4px 12px; font-weight:600; font-size:13px;
}
.tl-rij{display:grid; grid-template-columns:260px 1fr; border-bottom:1px solid var(--lijn);}
.tl-rij:nth-child(even){background:var(--vlak);}
.tl-naam{
  padding:5px 12px; border-right:1px solid var(--lijn);
  font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tl-naam small{color:var(--inkt-3);}
.tl-spoor{position:relative; height:26px;}
.tl-raster{position:absolute; inset:0; pointer-events:none;}
.tl-raster span{position:absolute; top:0; bottom:0; width:1px; background:var(--band);}
.tl-balk{
  position:absolute; top:5px; height:16px; border-radius:2px;
  background:var(--inkt); color:#fff; overflow:hidden;
  font:500 11px/16px var(--cijfers); padding:0 6px; white-space:nowrap;
}
.tl-ruit{
  position:absolute; top:7px; width:12px; height:12px; margin-left:-6px;
  transform:rotate(45deg); background:var(--inkt); border-radius:1px;
}
.tl-ruit.kritiek,.tl-balk.kritiek{background:var(--signaal);}
.tl-ruit.mijlpaal,.tl-balk.mijlpaal{background:var(--mijlpaal);}
.tl-band{
  grid-column:1 / -1; padding:4px 12px;
  font-size:12.5px; font-weight:600;
  background:var(--signaal-zacht); color:var(--signaal);
  border-bottom:1px solid var(--lijn);
}
.tl-band.mijlpaal{background:var(--mijlpaal-zacht); color:var(--mijlpaal);}
.tl-legenda{
  display:flex; gap:16px; flex-wrap:wrap; margin-top:10px;
  font:500 10.5px/1 var(--cijfers);
  letter-spacing:.1em; text-transform:uppercase; color:var(--inkt-3);
}
.tl-legenda i{display:inline-block; width:14px; height:8px; border-radius:2px; margin-right:6px; vertical-align:middle;}
.tl-legenda i.ruit{width:9px; height:9px; transform:rotate(45deg); border-radius:1px;}

/* =====================================================================
   Bewerken
   ===================================================================== */

.kop .afmelden{margin:0;}
.knop.stil{opacity:.55; font-size:12px;}
.knop.stil:hover{opacity:1;}
button.knop{cursor:pointer; background:transparent; font-family:inherit;}
button.knop.aan{background:var(--balk-inkt); color:var(--balk); font-weight:600; border-color:var(--balk-inkt);}

/* ---------- meldingen ---------- */
.meldingen{
  position:fixed; top:12px; right:14px; z-index:60;
  display:flex; flex-direction:column; gap:6px; max-width:min(460px,calc(100vw - 28px));
}
.melding{
  background:var(--balk); color:var(--balk-inkt);
  padding:8px 13px; border-radius:var(--radius); font-size:13.5px;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  animation:melding-in .16s ease-out;
}
.melding.error{background:var(--signaal);}
.melding.success{background:var(--gereed);}
@keyframes melding-in{from{opacity:0; transform:translateY(-5px);}to{opacity:1;}}

/* ---------- werkbalk boven de lijst ---------- */
.werkbalk{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 0 2px; border-bottom:1px dashed var(--lijn); margin-bottom:2px;
}
.werkbalk .hint{font-size:12.5px; color:var(--inkt-3);}
.werkbalk .greep-uitleg{letter-spacing:-1px; color:var(--inkt-2);}

/* ---------- cellen die je kunt aanklikken ---------- */
.bewerkstand table.planning td[data-veld]{cursor:text;}
.bewerkstand table.planning td[data-veld]:hover{
  box-shadow:inset 0 0 0 1px var(--lijn); background:#fff;
}
td[data-veld].open{padding:2px 4px; box-shadow:inset 0 0 0 2px var(--balk) !important;}
td[data-veld].open input,
td[data-veld].open select,
td[data-veld].open textarea{
  width:100%; font:inherit; font-size:13.5px; border:0; outline:0;
  background:#fff; padding:3px 4px; resize:vertical;
}
tr.bezig{opacity:.45;}
tr.bewaard td{background:#EAF3EC !important; transition:background .5s;}
tr.mislukt td{background:var(--signaal-zacht) !important;}

/* ---------- volgorde slepen ---------- */
th.kol-greep,td.greep{width:22px; padding:6px 2px 6px 8px;}
td.greep{
  color:var(--lijn); cursor:grab; user-select:none;
  letter-spacing:-2px; font-size:15px; text-align:center;
}
.bewerkstand td.greep{color:var(--inkt-3);}
td.greep:active{cursor:grabbing;}
tr.sleept{opacity:.35;}
tbody.bezig{opacity:.5;}
th.kol-greep,td.greep,th.kol-acties,td.acties{display:none;}
.bewerkstand th.kol-greep,
.bewerkstand td.greep,
.bewerkstand th.kol-acties,
.bewerkstand td.acties{display:table-cell;}

/* ---------- kleine knoppen achter de regel ---------- */
th.kol-acties,td.acties{width:76px; white-space:nowrap; text-align:right;}
td.acties form{display:inline; margin:0;}
.mini{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-left:2px;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--papier); color:var(--inkt-2);
  font-size:13px; line-height:1; text-decoration:none; cursor:pointer;
}
.mini:hover{background:var(--balk); color:#fff; border-color:var(--balk);}
.mini.gevaar:hover{background:var(--signaal); border-color:var(--signaal);}

/* ---------- tijdlijn: slepen en rekken ---------- */
.tl-balk .tl-tekst{pointer-events:none;}
.bewerkstand .tl-balk{cursor:grab;}
.bewerkstand .tl-balk.sleept{cursor:grabbing; box-shadow:0 0 0 2px var(--papier),0 0 0 3px var(--balk);}
.tl-greep{display:none;}
.bewerkstand .tl-greep{
  display:block; position:absolute; top:0; bottom:0; width:7px;
  cursor:ew-resize; background:rgba(255,255,255,.32);
}
.bewerkstand .tl-greep.links{left:0;}
.bewerkstand .tl-greep.rechts{right:0;}
.bewerkstand .tl-balk:hover .tl-greep{background:rgba(255,255,255,.6);}
.tl-losse-tekst{
  position:absolute; top:5px; font-size:12px; white-space:nowrap; color:var(--inkt-2);
}

/* =====================================================================
   Formulieren
   ===================================================================== */

.blad{max-width:720px; margin:26px auto 70px; padding:0 22px;}
.blad.breed{max-width:1000px;}
.blad h1{font-size:23px; font-weight:500; letter-spacing:-.01em; margin:0 0 4px;}
.blad .toelichting{color:var(--inkt-2); margin:0 0 22px; max-width:56ch;}

.veldenrij{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px;}
.veld{margin-bottom:15px;}
.veld > label{
  display:block; margin-bottom:4px;
  font:500 10.5px/1 var(--cijfers); letter-spacing:.13em;
  text-transform:uppercase; color:var(--inkt-2);
}
.veld input[type=text],.veld input[type=date],.veld input[type=time],
.veld input[type=number],.veld input[type=email],.veld select,.veld textarea{
  width:100%; font:15px/1.4 inherit; padding:7px 9px;
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:#fff; color:var(--inkt);
}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:0; border-color:var(--balk); box-shadow:0 0 0 3px rgba(21,20,15,.09);
}
.veld input[type=color]{width:52px; height:34px; padding:2px; cursor:pointer;}
.veld .uitleg{font-size:12.5px; color:var(--inkt-3); margin-top:4px;}
.veld .fout{font-size:12.5px; color:var(--signaal); margin-top:4px; font-weight:500;}
.veld.heeft-fout input,.veld.heeft-fout select,.veld.heeft-fout textarea{border-color:var(--signaal);}
.veld.aankruis{display:flex; align-items:flex-start; gap:9px;}
.veld.aankruis > label{text-transform:none; letter-spacing:0; font:inherit; margin:0;}

.formulierfouten{
  background:var(--signaal-zacht); border-left:3px solid var(--signaal);
  padding:10px 14px; margin-bottom:18px; color:var(--signaal); font-weight:500;
}

.knoppen{display:flex; align-items:center; gap:10px; margin-top:26px;
  padding-top:18px; border-top:1px solid var(--lijn);}
.hoofdknop{
  background:var(--balk); color:var(--balk-inkt); border:1px solid var(--balk);
  padding:9px 20px; font:500 15px/1 inherit; border-radius:var(--radius); cursor:pointer;
}
.hoofdknop:hover{background:#000;}
.tweedeknop{
  padding:9px 16px; font:15px/1 inherit; text-decoration:none;
  border:1px solid var(--lijn); border-radius:var(--radius); color:var(--inkt-2);
  background:var(--papier); display:inline-flex; align-items:center;
}
.tweedeknop:hover{border-color:var(--inkt-3);}
.wegknop{margin-left:auto; color:var(--signaal); border-color:transparent; background:transparent;
  padding:9px 12px; text-decoration:none; border-radius:var(--radius);}
.wegknop:hover{background:var(--signaal-zacht);}

/* =====================================================================
   Opzetscherm
   ===================================================================== */

.opzet{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px; margin-top:22px;}
.paneel{border:1px solid var(--lijn); background:#fff;}
.paneel > h2{
  margin:0; padding:9px 14px; background:var(--balk); color:var(--balk-inkt);
  font-size:13.5px; font-weight:600; display:flex; align-items:baseline; gap:9px;
}
.paneel > h2 .telling-klein{margin-left:auto; font:500 10.5px/1 var(--cijfers); opacity:.6; letter-spacing:.12em;}
.paneel .uitleg{padding:10px 14px 0; color:var(--inkt-3); font-size:13px; margin:0;}
.paneel ul{list-style:none; margin:8px 0 0; padding:0;}
.paneel li{
  display:flex; align-items:center; gap:9px;
  padding:7px 14px; border-top:1px solid var(--band); font-size:14px;
}
.paneel li:first-child{border-top:0;}
.paneel li .stip{width:10px; height:10px; border-radius:2px; flex:none; border:1px solid rgba(0,0,0,.12);}
.paneel li .bij{color:var(--inkt-3); font-size:12.5px;}
.paneel li .rechts{margin-left:auto; display:flex; gap:3px;}
.paneel .toevoegen{display:block; padding:10px 14px; border-top:1px solid var(--band);
  font-size:13.5px; text-decoration:none; color:var(--inkt-2); background:var(--vlak);}
.paneel .toevoegen:hover{background:var(--band); color:var(--inkt);}
.paneel .leegje{padding:14px; color:var(--inkt-3); font-size:13.5px; font-style:italic;}

.stappen{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 0; padding:0; list-style:none;}
.stap{
  flex:1 1 200px; border:1px solid var(--lijn); background:#fff; padding:12px 14px;
}
.stap b{display:block; font-size:14px; margin-bottom:3px;}
.stap span{font-size:13px; color:var(--inkt-3);}
.stap.klaar{border-color:var(--gereed); background:#F2F7F3;}
.stap.klaar b::before{content:"✓ "; color:var(--gereed);}

/* ---------- snel invoeren ---------- */
.snelrij{display:grid; gap:10px; align-items:end;
  grid-template-columns:130px 90px 90px 1fr 1fr 1.4fr 1fr 120px auto;}
.snelrij .veld{margin:0;}
@media (max-width:1100px){.snelrij{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}}
table.recent{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:24px;}
table.recent td{padding:5px 9px; border-bottom:1px solid var(--band);}
table.recent td.tijd{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--inkt-2);}

/* =====================================================================
   Aanmelden
   ===================================================================== */

.aanmeldscherm{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--vlak);
}
.aanmeldkaart{
  width:100%; max-width:352px; background:var(--papier);
  border:1px solid var(--lijn); padding:34px 30px 30px;
}
.aanmeldlogo{width:132px; height:auto; display:block; margin-bottom:26px;}
.aanmeldkaart h1{
  margin:0; font-size:20px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
}
.aanmeldkaart .onder{margin:2px 0 24px; color:var(--inkt-3); font-size:13.5px;}
.aanmeldkaart .veld input{width:100%;}
.bewerkstand .tl-ruit{cursor:grab;}
.bewerkstand .tl-ruit.sleept{cursor:grabbing; box-shadow:0 0 0 2px var(--papier),0 0 0 3px var(--balk);}