/* tools.css — gedeelde toolschil voor de gereedschapskist
   Laden ná tokens.css en nav.css. Compact-schaal (13px), rustig beeld:
   één kop, één regel uitleg, direct het werkvlak. Geen lokale core-tokens. */

.tool-wrap { max-width: 1100px; margin: 0 auto; padding: 28px 24px 64px; }

/* ── Kop ── */
.tool-kop { margin-bottom: 22px; }
.tool-kop .terug {
  font-size: 12px; color: var(--muted); text-decoration: none; font-weight: 600;
}
.tool-kop .terug:hover { color: var(--navy); }
.tool-kop h1 {
  font-size: 24px; font-weight: 800; letter-spacing: -.4px;
  color: var(--navy); margin: 6px 0 4px;
}
.tool-kop .doel { font-size: 13px; color: var(--muted); max-width: 640px; }

/* ── Kaarten ── */
.tkaart {
  background: var(--white); border: 1px solid var(--light);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 20px; margin-bottom: 16px;
}
.tkaart h2 {
  font-size: 14px; font-weight: 700; color: var(--navy);
  margin: 0 0 12px; letter-spacing: -.2px;
}
.tkaart .hint { font-size: 12px; color: var(--hint); }

/* ── Formulier ── */
.tveld { display: flex; flex-direction: column; gap: 4px; }
.tveld label { font-size: 11px; font-weight: 600; color: var(--muted); }
.tveld input, .tveld select, .tveld textarea, .tinput {
  font-family: var(--font); font-size: 13px; color: var(--navy);
  border: 1px solid var(--light); border-radius: var(--radius-sm);
  padding: 8px 10px; background: var(--white); outline: none; min-width: 0;
}
.tveld input:focus, .tveld select:focus, .tveld textarea:focus, .tinput:focus {
  border-color: var(--blue);
}
.trij { display: grid; gap: 12px; margin-bottom: 12px; }
.trij.k2 { grid-template-columns: repeat(2, 1fr); }
.trij.k3 { grid-template-columns: repeat(3, 1fr); }
.trij.k4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .trij.k2, .trij.k3, .trij.k4 { grid-template-columns: 1fr; } }

/* ── Knoppen ── */
.tknop {
  font-family: var(--font); font-size: 12px; font-weight: 700;
  border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--light); background: var(--white); color: var(--navy);
}
.tknop:hover { border-color: var(--silver); }
.tknop.primair { background: var(--lime); border-color: var(--lime); color: var(--white); }
.tknop.primair:hover { background: var(--lime-dark); border-color: var(--lime-dark); }
.tknop.stil { border: none; background: none; color: var(--muted); padding: 8px 6px; }
.tknop.stil:hover { color: var(--score-red); }

/* ── Tabellen ── */
.ttabel-scroll { overflow-x: auto; }
.ttabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.ttabel th {
  text-align: left; font-size: 11px; font-weight: 700; color: var(--muted);
  border-bottom: 1px solid var(--light); padding: 8px 10px; white-space: nowrap;
}
.ttabel td { border-bottom: 1px solid var(--navy-05); padding: 8px 10px; vertical-align: middle; }
.ttabel td.r, .ttabel th.r { text-align: right; }
.ttabel tr:hover td { background: var(--bg); }
.ttabel input, .ttabel select {
  font-family: var(--font); font-size: 13px; color: var(--navy);
  border: 1px solid transparent; border-radius: var(--radius-xs);
  padding: 5px 7px; background: transparent; width: 100%; min-width: 70px; outline: none;
}
.ttabel input:hover, .ttabel select:hover { border-color: var(--light); background: var(--white); }
.ttabel input:focus, .ttabel select:focus { border-color: var(--blue); background: var(--white); }

/* ── Signalering & status ── */
.stip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.stip.rood { background: var(--score-red); }
.stip.oranje { background: var(--score-orange); }
.stip.groen { background: var(--score-green); }
.stip.geen { background: var(--light); }
.tbadge {
  display: inline-block; font-size: 11px; font-weight: 700;
  border-radius: 20px; padding: 2px 10px; white-space: nowrap;
}
.tbadge.navy { background: var(--navy-10); color: var(--navy); }
.tbadge.lime { background: var(--lime-tint); color: var(--lime-dark); }
.tbadge.rood { background: rgba(226,75,74,.12); color: var(--score-red); }
.tbadge.oranje { background: rgba(239,159,39,.14); color: #B26F0E; }

/* ── Kerncijfers (rustige samenvatting bovenaan) ── */
.tcijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 760px) { .tcijfers { grid-template-columns: repeat(2, 1fr); } }
.tcijfer {
  background: var(--white); border: 1px solid var(--light);
  border-radius: var(--radius); padding: 14px 16px;
}
.tcijfer .waarde { font-size: 22px; font-weight: 800; color: var(--navy); letter-spacing: -.5px; }
.tcijfer .label { font-size: 11px; color: var(--muted); margin-top: 2px; font-weight: 600; }

/* ── Leeg & uitleg ── */
.tleeg {
  text-align: center; color: var(--muted); font-size: 13px;
  padding: 36px 16px;
}
.tmotorkap { font-size: 12px; color: var(--hint); margin-top: 10px; }
.tmotorkap summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.tmotorkap[open] summary { margin-bottom: 6px; }

/* ── Lab-experiment (validatiefase) ── */
.lab-lint {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 11px; font-weight: 700; color: var(--blue);
  background: rgba(46,125,184,.08); border: 1px solid rgba(46,125,184,.2);
  border-radius: 20px; padding: 3px 12px;
}
.lab-lint a { color: var(--blue); text-decoration: none; }
.lab-lint .st-gevalideerd { color: var(--lime-dark); }
.lab-lint .st-doorontwikkelen { color: var(--navy); }
.lab-lint .st-afgekeurd { color: var(--score-red); }
.tegel.afgekeurd { opacity: .45; }
.tegel .oordeel-chip { margin-top: 8px; }
.oordeel-regel { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.oordeel-regel select {
  font-family: var(--font); font-size: 12px; color: var(--navy);
  border: 1px solid var(--light); border-radius: var(--radius-sm); padding: 5px 8px;
}
.oordeel-regel input {
  font-family: var(--font); font-size: 12px; color: var(--navy); flex: 1; min-width: 140px;
  border: 1px solid var(--light); border-radius: var(--radius-sm); padding: 5px 8px;
}

/* ── Toast ── */
.ttoast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--navy); color: var(--white); font-size: 12px; font-weight: 600;
  padding: 9px 18px; border-radius: 20px; opacity: 0; pointer-events: none;
  transition: all .25s ease; z-index: 400; box-shadow: var(--shadow-lg);
}
.ttoast.zichtbaar { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Print: alleen het werkvlak ── */
@media print {
  nav, .tool-kop .terug, .tknop, .ttoast { display: none !important; }
  body { background: var(--white); }
  .tkaart { box-shadow: none; border-color: #ccc; }
}