/* Gedeelde opmaak voor de startbundel (webpagina + printversie).
   De kleuren hieronder zijn die van de website (Eduport-thema: primary #066ac9,
   success #0cbc87, warning #f7c32e, danger #d6293e). De printversie/pdf
   (gip/startbundel.php) overschrijft ze met het palet van de startbundels. */
:root {
	--gip-kleur: #066ac9;
	--gip-titel: #1d3b53;
	--gip-accent: #066ac9;
	--gip-accent-bg: rgba(6, 106, 201, .1);
	--gip-th-bg: rgba(6, 106, 201, .1);
	--gip-th-kleur: #1d3b53;
	--gip-rand: #dde0e3;
	--gip-vlak: #f5f7f9;
	--gip-zacht: #747579;
	--gip-n3-kop: rgba(6, 106, 201, .15);   --gip-n3-tekst: #054f97; --gip-n3-cel: rgba(6, 106, 201, .04);
	--gip-n2-kop: rgba(12, 188, 135, .18);  --gip-n2-tekst: #087f5c; --gip-n2-cel: rgba(12, 188, 135, .05);
	--gip-n1-kop: rgba(247, 195, 46, .3);   --gip-n1-tekst: #8a6a0e; --gip-n1-cel: rgba(247, 195, 46, .08);
	--gip-n0-kop: rgba(214, 41, 62, .15);   --gip-n0-tekst: #a81f30; --gip-n0-cel: rgba(214, 41, 62, .05);
}

.gip-tabel th { background: var(--gip-th-bg); color: var(--gip-th-kleur); font-weight: 600; }
.gip-doelen td:last-child { width: 9rem; white-space: nowrap; color: var(--gip-zacht); }

.gip-h4 { margin-top: 2.2rem; padding-bottom: .4rem; border-bottom: 2px solid var(--gip-kleur); color: var(--gip-titel); }
.gip-h4 small { float: right; font-size: .8em; color: var(--gip-accent); background: var(--gip-accent-bg); border-radius: 50rem; padding: .1rem .6rem; font-weight: 700; }
.gip-rubric-kop { display: flex; justify-content: space-between; align-items: baseline; margin: 1.4rem 0 .4rem; }
.gip-rubric-kop h5 { margin: 0; color: var(--gip-titel); }
.gip-rubric-kop span { color: var(--gip-accent); background: var(--gip-accent-bg); border-radius: 50rem; padding: .05rem .55rem; font-weight: 700; white-space: nowrap; }
.gip-sub { font-weight: 700; color: var(--gip-kleur); margin: 1rem 0 .3rem; }

.gip-rubric { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .82rem; line-height: 1.3; margin-bottom: 1rem; }
.gip-rubric th, .gip-rubric td { border: 1px solid var(--gip-rand); padding: .4rem .45rem; vertical-align: top; }
.gip-rubric th { text-align: center; font-weight: 700; }
.gip-rubric .gip-crit { width: 18%; background: var(--gip-vlak); text-align: left; color: var(--gip-titel); }
.gip-rubric .gip-klein { width: 6.5%; text-align: center; background: var(--gip-vlak); }
.gip-rubric th.gip-n3 { background: var(--gip-n3-kop); color: var(--gip-n3-tekst); }
.gip-rubric th.gip-n2 { background: var(--gip-n2-kop); color: var(--gip-n2-tekst); }
.gip-rubric th.gip-n1 { background: var(--gip-n1-kop); color: var(--gip-n1-tekst); }
.gip-rubric th.gip-n0 { background: var(--gip-n0-kop); color: var(--gip-n0-tekst); }
.gip-rubric td.gip-n3 { background: var(--gip-n3-cel); }
.gip-rubric td.gip-n2 { background: var(--gip-n2-cel); }
.gip-rubric td.gip-n1 { background: var(--gip-n1-cel); }
.gip-rubric td.gip-n0 { background: var(--gip-n0-cel); }
.gip-vak { display: inline-block; width: .8rem; height: .8rem; border: 1.5px solid var(--gip-zacht); border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.gip-doel { display: block; font-size: .72rem; color: var(--gip-zacht); font-weight: 400; margin-top: .25rem; }

.gip-score { width: 100%; border-collapse: collapse; text-align: center; font-size: .85rem; margin-bottom: 1rem; }
.gip-score th, .gip-score td { border: 1px solid var(--gip-rand); padding: .4rem .3rem; }
.gip-score thead th { background: var(--gip-th-bg); color: var(--gip-th-kleur); }
.gip-score-ll { text-align: left; font-weight: 700; }

.gip-projecten li { margin-bottom: .8rem; }
.gip-proj-tech { font-size: .85em; color: var(--gip-zacht); }

/* ---------- Mijn gip / punten (enkel op de website) ---------- */
.gip-blok { border-bottom: 1px solid var(--gip-rand); padding-bottom: 1.4rem; margin-bottom: 1.4rem; }
.gip-blok h5 { color: var(--gip-titel); }
.gip-blok h5 i { color: var(--gip-kleur); }
.gip-klaar > span { text-decoration: line-through; color: #9a9ea4; }
.gip-log { border-left: 3px solid var(--gip-kleur); background: var(--gip-vlak); border-radius: 0 8px 8px 0; padding: .55rem .8rem; margin-bottom: .55rem; }
.gip-logtekst { white-space: pre-wrap; }
.gip-logboek { max-height: 28rem; overflow-y: auto; }
.gip-ckgroep { border: 1px solid var(--gip-rand); border-radius: 8px; padding: .4rem .8rem; margin-bottom: .5rem; }
.gip-ckgroep summary { display: flex; justify-content: space-between; font-weight: 600; color: var(--gip-titel); cursor: pointer; list-style: none; }
.gip-ckgroep summary::-webkit-details-marker { display: none; }
.gip-ckgroep summary::before { content: "▸"; margin-right: .4rem; color: var(--gip-kleur); }
.gip-ckgroep[open] summary::before { content: "▾"; }
.gip-ckgroep summary span:first-child { flex-grow: 1; }
.gip-ckgroep ul { margin-top: .5rem; }
.gip-ckgroep li { padding: .15rem 0; }

.gip-punten .gip-deel { padding: .55rem 0; border-top: 1px solid var(--gip-rand); color: var(--gip-titel); }
.gip-punten .gip-deel li { font-size: .9rem; color: var(--gip-zacht); padding-left: .6rem; }
.gip-totaal { font-size: 2.4rem; font-weight: 800; color: var(--gip-kleur); line-height: 1; }
.gip-totaal small { font-size: 1rem; color: var(--gip-zacht); font-weight: 600; }
.gip-live { font-size: 1.6rem; font-weight: 800; color: var(--gip-kleur); line-height: 1.1; }
.gip-live small { font-size: .9rem; color: var(--gip-zacht); }

/* Klikbare rubric */
.gip-invul td[data-niveau] { cursor: pointer; transition: box-shadow .1s; }
.gip-alleen-lezen .gip-invul td[data-niveau] { cursor: default; }
#rm-rubric:not(.gip-alleen-lezen) .gip-invul td[data-niveau]:hover { box-shadow: inset 0 0 0 2px rgba(6, 106, 201, .35); }
.gip-invul td.gekozen { box-shadow: inset 0 0 0 3px var(--gip-kleur) !important; font-weight: 600; color: var(--gip-titel); }
.gip-invul td.gip-n3.gekozen { background: var(--gip-n3-kop); }
.gip-invul td.gip-n2.gekozen { background: var(--gip-n2-kop); }
.gip-invul td.gip-n1.gekozen { background: var(--gip-n1-kop); }
.gip-invul td.gip-n0.gekozen { background: var(--gip-n0-kop); }
.gip-invul td.gekozen .gip-vak { background: var(--gip-kleur); border-color: var(--gip-kleur); }
.gip-invul td.gip-klein.gekozen { background: var(--gip-rand); }

/* Voorbeeldportfolio's */
.gip-voorbeelden { background: var(--gip-vlak); border-radius: 10px; padding: 1rem; margin: .5rem 0 1rem; }
.gip-pf-kaart { display: flex; align-items: center; gap: .7rem; height: 100%; background: #fff; border: 1px solid var(--gip-rand); border-radius: 8px; padding: .6rem .8rem; color: var(--gip-titel); line-height: 1.3; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.gip-pf-kaart > .bi-globe2 { font-size: 1.3rem; color: var(--gip-kleur); }
.gip-pf-kaart small { color: var(--gip-zacht); }
a.gip-pf-kaart:hover { border-color: var(--gip-kleur); box-shadow: 0 2px 8px rgba(6, 106, 201, .15); color: var(--gip-titel); }
.gip-pf-eerst { border-color: var(--gip-kleur); }
.gip-pf-leeg { opacity: .7; }
.gip-leerlingen { max-width: 28rem; }
.gip-leerlingen td:first-child, .gip-leerlingen th:first-child { width: 3.5rem; text-align: center; }