/* app.css — basis, layout, print. Kleuren via tokens.css (SxBlue/Superp). */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--surface-page); color: var(--text-body);
  font-family: 'Raleway', system-ui, -apple-system, Segoe UI, sans-serif; }
/* margin:0 onderdrukt de browser-kop/voet (URL, datum, paginanummer); eigen marges via padding op het vel. */
@page { size: A4; margin: 0; }

button { font-family: inherit; }
input, textarea { font-family: inherit; }

[data-ph]:empty:before { content: attr(data-ph); color: var(--text-subtle); font-style: italic; }
/* Leeg invoerveld (bv. jaartal) toch een fatsoenlijk klikvlak geven i.p.v. een minuscuul vakje. */
[data-ph]:empty { display: inline-block; min-width: 3ch; padding: 0 2px; }
[contenteditable]:focus { outline: 2px solid var(--cyan-300); outline-offset: 2px; border-radius: 3px; }

.rmbtn { opacity: 0; transition: opacity .12s ease; }
.row-hover:hover .rmbtn { opacity: 1; }

.panel-scroll::-webkit-scrollbar, .cv-scroll::-webkit-scrollbar { width: 10px; }
.panel-scroll::-webkit-scrollbar-thumb, .cv-scroll::-webkit-scrollbar-thumb { background: var(--mist-400); border-radius: 8px; }

/* Login-overlay */
.login-wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--surface-page); z-index: 50; padding: 20px; }
.login-card { width: 100%; max-width: 380px; background: #fff; border: 1px solid var(--border-subtle);
  border-radius: 18px; padding: 30px 28px; box-shadow: 0 10px 40px rgba(0,52,60,.12); }
.login-card input { width: 100%; padding: 11px 13px; border: 1px solid var(--border-strong);
  border-radius: 10px; font-size: 14px; margin-bottom: 12px; }
.login-card button { width: 100%; padding: 12px; border: none; border-radius: 999px;
  background: var(--cyan-500); color: var(--teal-800); font-weight: 800; font-size: 14px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(57,194,221,.35); }

.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--teal-800); color: var(--linen-400); padding: 9px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; z-index: 60; opacity: 0; transition: opacity .25s; pointer-events: none; }
.toast.show { opacity: 1; }

/* Modal-dialogen — gecentreerd in het venster, in de huisstijl (vervangt native prompt/confirm) */
/* z-index 100: een uiModal (bevestigen/bewerken/prompt) is altijd de bovenste, meest
   recente dialoog en moet boven élke andere overlay staan — óók boven het
   repository-beheer-modal (inline z-index 90), van waaruit hij geopend wordt. */
.ui-modal-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,52,60,.42); z-index: 100; padding: 20px; opacity: 0; transition: opacity .18s ease; }
.ui-modal-overlay.show { opacity: 1; }
.ui-modal-card { width: 100%; max-width: 420px; background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: 18px; padding: 24px 24px 20px; box-shadow: 0 18px 50px rgba(0,52,60,.28);
  transform: translateY(8px) scale(.98); transition: transform .18s ease; }
.ui-modal-overlay.show .ui-modal-card { transform: none; }
.ui-modal-title { font-size: 16px; font-weight: 800; color: var(--text-strong); margin-bottom: 6px; }
.ui-modal-msg { font-size: 13.5px; color: var(--text-body); line-height: 1.5; margin-bottom: 18px; }
.ui-modal-input { width: 100%; padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: 10px;
  font-size: 14px; color: var(--text-body); margin-bottom: 18px; }
.ui-modal-input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--border-accent); }
.ui-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.ui-modal-btn { padding: 10px 20px; border-radius: 999px; font-size: 13px; font-weight: 800; cursor: pointer;
  border: 1px solid transparent; font-family: inherit; }
.ui-modal-ok { background: var(--cyan-500); color: var(--teal-800); box-shadow: 0 4px 14px rgba(57,194,221,.35); }
.ui-modal-ok:hover { background: var(--cyan-400); }
.ui-modal-ok.danger { background: var(--danger-500); color: var(--white); box-shadow: 0 4px 14px rgba(209,80,63,.32); }
.ui-modal-ok.danger:hover { background: #bd4636; }
.ui-modal-cancel { background: var(--white); color: var(--text-muted); border-color: var(--border-strong); }
.ui-modal-cancel:hover { background: var(--surface-raised); color: var(--text-body); }
.ui-modal-textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
/* Waarschuwingsblok bovenin een modal (bevinding #272): de kernboodschap staat in een
   gevuld rood vlak, de toelichting eronder als gewone tekst. Stond eerder als vetgedrukte
   zin middenin een lopend verhaal — dan leest het oog het risico als "nog een alinea".
   Achtergrond is --danger-600 en niet --danger-500: wit op -500 haalt met 4,5:1 nét geen
   WCAG AA, op -600 wel (5,9:1). */
.ui-modal-alert { display: flex; gap: 10px; align-items: flex-start; background: var(--danger-600);
  color: var(--white); border-radius: 12px; padding: 13px 15px; margin-bottom: 14px; }
.ui-modal-alert .ico { font-size: 18px; line-height: 1.25; }
.ui-modal-alert .kop { font-size: 15px; font-weight: 800; line-height: 1.3; margin-bottom: 3px; }
.ui-modal-alert .sub { font-size: 13.5px; line-height: 1.45; }

/* Oud → nieuw-matrix (wat de AI aanpast) */
.ui-matrix-scroll { max-height: 52vh; overflow: auto; margin-bottom: 18px; border: 1px solid var(--border-subtle); border-radius: 10px; }
.ui-matrix { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ui-matrix th { position: sticky; top: 0; background: var(--surface-raised); text-align: left; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; padding: 9px 12px; border-bottom: 1px solid var(--border-subtle); }
.ui-matrix td { vertical-align: top; padding: 11px 12px; border-bottom: 1px solid var(--border-subtle); line-height: 1.55; color: var(--text-body); white-space: pre-wrap; }
.ui-matrix tr:last-child td { border-bottom: none; }
.ui-matrix td.lbl { font-weight: 800; color: var(--text-strong); white-space: nowrap; width: 1%; }
.ui-matrix td.was { color: var(--text-muted); }
.ui-matrix td.wordt { color: var(--teal-800); background: var(--cyan-100); }

/* Bezig-overlay met live timer — voor AI-acties die even duren (afstemmen, analyse) */
.cvc-busy-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,52,60,.42); z-index: 110; padding: 20px; opacity: 0; transition: opacity .18s ease; }
.cvc-busy-overlay.show { opacity: 1; }
.cvc-busy-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 18px;
  padding: 30px 34px; box-shadow: 0 18px 50px rgba(0,52,60,.28); display: flex; flex-direction: column;
  align-items: center; gap: 10px; text-align: center; max-width: 360px; }
.cvc-spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--mist-400);
  border-top-color: var(--cyan-500); animation: cvc-spin .8s linear infinite; }
@keyframes cvc-spin { to { transform: rotate(360deg); } }
/* Kleine inline variant — voor laadstatus binnen een paneel (geen overlay), bv. live zoekresultaten */
.cvc-spinner-sm { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--mist-400);
  border-top-color: var(--cyan-500); animation: cvc-spin .8s linear infinite; flex: 0 0 auto; }
.cvc-busy-timer { font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 800;
  color: var(--teal-800); letter-spacing: .02em; }
/* Sessie-voortgangsbalk in de bezig-overlay (bevinding #114) — toont hoeveel van de
   AI-deel-sessies (skelet/skills/werkervaring-batches) al klaar zijn. */
.cvc-busy-progress { width: 100%; }
.cvc-busy-progress-track { height: 6px; border-radius: 4px; background: var(--mist-400); overflow: hidden; }
.cvc-busy-progress-fill { height: 100%; background: var(--cyan-500); border-radius: 4px; transition: width .25s ease; }
.cvc-busy-progress-txt { font-size: 11.5px; font-weight: 700; color: var(--text-muted); margin-top: 6px; }

/* Analyse — opdracht vs. CV (gap-analyse) */
.cvc-analyze-scroll { max-height: 58vh; overflow: auto; margin-bottom: 18px; }
.cvc-analyze-sum { font-size: 13px; color: var(--text-body); line-height: 1.55; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.cvc-analyze-head { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 800;
  margin: 4px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border-subtle); }
.cvc-analyze-head.gap { color: var(--danger-500); }
.cvc-analyze-head.ok { color: var(--success-500); margin-top: 18px; }
.cvc-analyze-empty { font-size: 12.5px; color: var(--text-muted); font-style: italic; padding: 4px 0 8px; }
.cvc-gap-item { padding: 9px 12px; border-radius: 10px; background: var(--surface-raised); margin-bottom: 8px;
  border-left: 3px solid var(--warning-500); }
.cvc-gap-item.must { border-left-color: var(--danger-500); background: var(--danger-100); }
.cvc-gap-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warning-500); flex: 0 0 auto; }
.cvc-gap-item.must .cvc-gap-dot { background: var(--danger-500); }
.cvc-gap-badge { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; background: var(--warning-100); color: var(--warning-700); }
.cvc-gap-badge.must { background: var(--danger-100); color: #a3372a; }
.cvc-ok-item { padding: 7px 4px; border-bottom: 1px solid var(--border-subtle); }
.cvc-ok-item:last-child { border-bottom: none; }

/* Technologie: pills bewerk je op het scherm; in print/PDF verschijnt de komma-tekst. */
.tech-print { display: none; }

@media print {
  .no-print { display: none !important; }
  /* Invulhulp bij een leeg veld ("Een spreuk die bij je past…") is editor-hulp, geen CV-tekst:
     op papier blijft een leeg veld leeg (bevinding #224). */
  [data-ph]:empty:before { content: none !important; }
  .tech-print { display: inline !important; }
  html, body { background: #fff !important; }
  .app-root { display: block !important; height: auto !important; }
  .cv-scroll { padding: 0 !important; background: #fff !important; overflow: visible !important;
    height: auto !important; display: block !important; }
  .cv-sheet { box-shadow: none !important; margin: 0 !important; width: auto !important;
    min-height: 0 !important; padding: 15mm !important; }
  .rmbtn { display: none !important; }
  /* Footer NIET meer fixed: een fixed positie herhaalde 'm ongereserveerd op élke
     afgedrukte pagina, waardoor CV-tekst er overheen liep (bevinding #107). De footer
     staat nu gewoon in de normale leesvolgorde — één keer, aan het eind, nooit gesplitst. */
  .cv-footer { break-inside: avoid; page-break-inside: avoid; background: #fff;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Full-bleed opmaak (CV Studio, #185): de voettekst loopt over de doorlopende donkere
     zijbalk heen. Een witte achtergrond zou die balk onderaan wegvlakken -- dus doorzichtig. */
  .cv-footer-bleed { background: transparent; }
  /* Houd secties en losse items netjes bij elkaar op één pagina waar mogelijk. */
  .cv-sec { break-inside: avoid; page-break-inside: avoid; }
  .cv-sechead { break-after: avoid; page-break-after: avoid; }
  .star-block, .exp-entry, .skills-cat, .row-hover { break-inside: avoid; page-break-inside: avoid; }
  /* Handmatige pagina-einden (WB-2026-0060) ook laten gelden bij kale browser-print:
     een actief pagina-einde forceert hier een echte paginascheiding; de bewerk-UI
     (dunne lijn + verwijderknop) drukt zelf niet mee af. */
  .cv-pagebreak { page-break-before: always; break-before: page; height: 0 !important;
    overflow: hidden !important; margin: 0 !important; border: 0 !important; }
  .cv-pagebreak * { display: none !important; }
}

/* "Bekijk als ..." (WB-2026-0215). De knop staat op een donker vlak met border:none, dus
   de standaard focus-ring van de browser is er nauwelijks zichtbaar; vandaar een eigen
   ring in de focus-kleur van het palet. */
.cvc-viewas-back:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* De zwevende rolwissel rechtsonder (bevinding #234) staat op een donkere cirkel: dezelfde
   eigen focus-ring, anders is met toetsenbord niet te zien waar je staat. */
.cvc-viewas-fab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* Zwevende hulpblokken (Vraagbaak, rolwissel): bewust GEEN half-doorzichtige stand meer
   (bevinding #270). Die is teruggedraaid op verzoek van de indiener -- de blokken bleven
   daardoor slecht leesbaar en de knoppen zagen er uitgegrijsd/uitgeschakeld uit. Ze zijn nu
   weer gewoon volledig dekkend, precies zoals vóór #270; uit die bevinding is alleen het
   zelf kunnen VERSLEPEN overgebleven (zie makeFloatDraggable in app.js). */

/* De app-kop past altijd op ÉÉN regel (bevinding #234). De menu-items breken niet meer af;
   wordt het toch krap, dan vallen eerst de onderdelen weg die gemist kunnen worden -- de
   ingelogde naam, daarna het versienummer -- in plaats van dat de balk op twee regels valt. */
.cvc-hdr-inner { flex-wrap: nowrap; }
.cvc-hdr-nav button { white-space: nowrap; }
@media (max-width: 1240px) { .cvc-hdr-user { display: none !important; } }
@media (max-width: 1060px) { .cvc-hdr-version { display: none !important; } }