/* ============================================================
   Bitblad - app-specifieke CSS van de PHP-kant
   Geladen NA fonts.css, css-framework core.min.css en themes/bitblad.css.
   Uitsluitend framework-tokens (var(--color-*), var(--space-*), ...)
   zodat light/dark mode automatisch mee flipt. De klassen die de werkplek
   zelf zet (bb-*, en de cm-* van CodeMirror) horen ook hier, niet in de
   skin van het thema; ze komen mee zodra de werkplek (resources/lab/) haar
   skelet heeft en dev/harness.css het zaad levert, zoals bij bitkring.
   ============================================================ */

/* ─── Woordmerk (templates/partials/logo.php) ─── */
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); }
.brand-mark { height: 1.5em; width: auto; flex-shrink: 0; }
.brand-name { font-weight: 700; letter-spacing: -0.01em; }

/* ─── Navigatie ─── */
.nav-user { padding: 0 var(--space-sm); white-space: nowrap; }
.btn-as-link { background: none; border: 0; cursor: pointer; font: inherit; }
/* Formulier dat alleen een knop draagt (uitloggen, acties in tabelrijen). */
.form-inline { display: inline; }
.form-inline-contents { display: contents; }

/* ─── Inlogpagina's ─── */
.login-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-sunken);
    padding: var(--space-lg);
}
.login-card-wrap { width: 100%; max-width: 420px; }
.login-title { font-size: var(--text-2xl); color: var(--color-primary-dark); }
.login-card-brand {
    border: 2px solid transparent;
    background: linear-gradient(var(--color-surface-raised), var(--color-surface-raised)) padding-box,
                var(--gradient-brand) border-box;
}
.code-input {
    font-family: var(--font-mono);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: var(--text-xl);
}

/* ─── Tabellen: uitgeschakelde of ingetrokken rijen ─── */
tr.dimmed { opacity: 0.55; }

/* ─── Codeblad (printbaar) ─── */
.code-sheet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}
.code-card {
    border: 2px dashed var(--color-border-strong);   /* kniplijn */
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
    break-inside: avoid;
    background: var(--color-surface-raised);
}
.code-card-school { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-sm); }
.code-card-name { font-weight: 700; margin-bottom: var(--space-sm); }
.code-card-code {
    font-family: var(--font-mono);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-primary-dark);
    margin-bottom: var(--space-sm);
}
.code-card-url { font-size: var(--text-xs); color: var(--color-text-secondary); }
@media print {
    .print-hidden { display: none !important; }
    .code-sheet { grid-template-columns: repeat(2, 1fr); gap: 8mm; }
    .code-card { border-color: var(--color-border-strong); print-color-adjust: exact; }
}

/* ─── Werkplekpagina's ─── */
/* Volle breedte met een smalle kop; de werkplek vult de rest van het scherm.
   De pagina wordt een kolom (nav, main) en de host krijgt alle resterende
   hoogte, zodat code en voorbeeld naast elkaar de hoogte van het venster
   krijgen in plaats van een vaste maat. :has() vermijdt een hardgecodeerde
   navigatiehoogte. */
body:has(> main.lab-main) { min-height: 100dvh; display: flex; flex-direction: column; }
.lab-main {
    flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
    padding: var(--space-md) var(--space-lg) var(--space-xl);
}
.lab-page-head {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: var(--space-md); margin-bottom: var(--space-md);
}
.lab-page-head h1 { font-size: var(--text-xl); margin: 0; }
/* De host van één werkplek: neemt de resterende hoogte, met een bodem zodat
   een tweede werkplek op de nakijkpagina (in <details>) nog bruikbaar is. */
.lab-host-wrap { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 28rem; }
.lab-host-wrap > * { flex: 1 1 auto; min-height: 0; }
/* Een host die niet kon openen (data-bb-error, nomodule.js) toont zijn melding als tekst. */
.lab-host-wrap[data-bb-error] {
    align-items: center; justify-content: center; text-align: center;
    padding: var(--space-xl); color: var(--color-text-secondary);
    border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md);
}
/* Projectie: kale pagina, de werkplek zo groot mogelijk. */
body.lab-demo { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-surface-sunken); }
body.lab-demo .lab-main { padding: var(--space-md); }
body.lab-demo .lab-demo-close {
    position: fixed; top: var(--space-sm); right: var(--space-md); z-index: var(--z-sticky);
    font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none;
}
body.lab-demo .lab-demo-close:hover { color: var(--color-text); }

/* ─── De code-editor (CodeMirror, luie brok van de werkplek) ─── */
/* Het codefont is de enige reden dat bitblad een font meelevert: eenduidige
   0/O en 1/l/I op het projectiescherm. De brok zet zijn eigen stijlen; alleen
   wat het thema aangaat staat hier. */
.cm-editor { font-family: var(--font-mono); }
.cm-editor .cm-scroller { font-family: var(--font-mono); }

/* ======================================================================
   De werkplek (bb-*): gekopieerd uit resources/lab/dev/harness.css,
   sectie "werkplek" tot het einde. Beide bijhouden bij een nieuwe klasse;
   het harnas is het zaad, dit bestand is wat de site laadt. Alles op
   framework-tokens; de enige vaste kleur is het wit van het voorbeeld,
   want een echte pagina zonder opmaak is wit (materiaal, geen thema).
   ====================================================================== */

/* --- werkplek: skelet --------------------------------------------------- */

.bb-host {
  display: flex; flex-direction: column; min-height: 0;
  color: var(--color-text); background: var(--color-surface); font-family: var(--font-body);
}
.bb-host *:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.bb-toolbar {
  display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap;
  padding: var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised);
}
.bb-toolbar-group { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.bb-notice { flex: 1 1 auto; min-width: 0; font-size: var(--text-xs); color: var(--color-error); }
.bb-notice:empty { display: none; }
.bb-save-state { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.bb-save-state[data-state="failed"], .bb-save-state[data-state="expired"] { color: var(--color-error); }
.bb-save-state[data-state="saved"] { color: var(--color-success-dark); }

.bb-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  padding: 0.28rem 0.6rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface-raised); color: inherit; cursor: pointer; font-size: var(--text-sm);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.bb-button:hover:not([disabled]) { border-color: var(--color-primary); }
.bb-button[disabled] { opacity: 0.4; cursor: default; }
.bb-button.is-active, .bb-button[aria-pressed="true"], .bb-button[aria-expanded="true"] {
  background: var(--color-primary); border-color: var(--color-primary-dark); color: var(--color-text-inverse);
}
.bb-button-icon { padding: 0.28rem 0.45rem; min-width: 2rem; }

/* Weergavewissel, alleen op een smal scherm. */
.bb-viewswitch { display: none; background: var(--color-surface-raised); }
.bb-instructions { padding: var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised); }
.bb-instructions[hidden] { display: none; }
.bb-instructions-text { display: block; width: 100%; min-height: 3.5rem; margin-top: var(--space-xs); resize: vertical; font-family: inherit; }
.bb-instructions-view summary { cursor: pointer; }
.bb-instructions-body { margin: var(--space-xs) 0 0; white-space: pre-wrap; font-size: var(--text-sm); }

.bb-body { display: flex; align-items: stretch; height: 70vh; min-height: 24rem; background: var(--color-surface-raised); }
.bb-code { flex: var(--bb-split, 0.5) 1 0; min-width: 0; display: flex; flex-direction: column; }
.bb-preview { flex: calc(1 - var(--bb-split, 0.5)) 1 0; min-width: 0; display: flex; flex-direction: column; border-left: 1px solid var(--color-border); }
.bb-splitter {
  flex: 0 0 8px; cursor: col-resize; background: var(--color-surface-sunken); border-left: 1px solid var(--color-border);
  touch-action: none; user-select: none;
}
.bb-splitter:hover, .bb-splitter.is-dragging, .bb-splitter:focus-visible { background: var(--color-primary-100); outline-offset: -2px; }

.bb-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--color-border); background: var(--color-surface-raised); }
.bb-bottom > section + section { border-left: 1px solid var(--color-border); }

.bb-panel-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); border-bottom: 1px solid var(--color-border); min-height: 2.25rem; }
.bb-panel-title { flex: 1 1 auto; margin: 0; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); font-weight: 600; }
.bb-panel-actions { display: flex; gap: var(--space-xs); }
.bb-badge { font-size: var(--text-xs); padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--color-primary-50); color: var(--color-error); }
.bb-badge.is-clear { background: var(--color-surface-sunken); color: var(--color-text-muted); }

/* Smal scherm: code of voorbeeld, niet naast elkaar. */
@media (max-width: 899px) {
  .bb-viewswitch { display: flex; }
  .bb-splitter { display: none; }
  .bb-body { height: 60vh; }
  .bb-host[data-bb-view="code"] .bb-preview { display: none; }
  .bb-host[data-bb-view="preview"] .bb-code,
  .bb-host[data-bb-view="preview"] .bb-palette { display: none; }
  .bb-host[data-bb-view="preview"] .bb-preview { border-left: 0; }
  .bb-code, .bb-preview { flex: 1 1 0; }
  .bb-bottom { grid-template-columns: 1fr; }
  .bb-bottom > section + section { border-left: 0; border-top: 1px solid var(--color-border); }
}

/* --- palet -------------------------------------------------------------- */

.bb-palette { flex: 0 0 16rem; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--color-border); background: var(--color-surface); }
.bb-palette[hidden] { display: none; }
.bb-palette.is-open { animation: bb-slide-in var(--transition-base); }
@keyframes bb-slide-in { from { opacity: 0; translate: -0.5rem 0; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .bb-palette.is-open { animation: none; } }
.bb-palette-search { margin: var(--space-sm) var(--space-md) 0; width: auto; }
.bb-palette-list { flex: 1 1 auto; overflow: auto; padding: var(--space-sm) var(--space-md); }
.bb-palette-heading { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: var(--space-sm) 0 var(--space-xs); }
.bb-palette-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; width: 100%; text-align: left;
  padding: var(--space-xs) var(--space-sm); margin-bottom: var(--space-xs); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface-raised); color: inherit; cursor: pointer;
}
.bb-palette-item:hover { border-color: var(--color-primary); background: var(--color-primary-50); }
.bb-palette-name { font-size: var(--text-sm); }
.bb-palette-desc { font-size: var(--text-xs); color: var(--color-text-muted); }
.bb-palette-empty, .bb-palette-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin: var(--space-sm) var(--space-md); }

/* --- bestanden en code -------------------------------------------------- */

.bb-files { display: flex; align-items: center; gap: var(--space-xs); border-bottom: 1px solid var(--color-border); }
.bb-files .tabs { flex: 1 1 auto; border-bottom: 0; }
.bb-tab { padding: var(--space-xs) var(--space-md); font-family: var(--font-mono); }
.bb-tab.is-locked .bb-tab-name { color: var(--color-text-muted); }
.bb-files-actions { display: flex; gap: var(--space-xs); padding: 0 var(--space-xs); }
.bb-code-host { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; }

.bb-code-view {
  margin: 0; height: 100%; overflow: auto; font: var(--text-sm) / 1.55 var(--font-mono);
  background: var(--color-surface-raised); color: var(--color-text); tab-size: 2;
}
.bb-line { display: block; white-space: pre; padding-right: var(--space-sm); }
.bb-line::before {
  content: attr(data-line); display: inline-block; min-width: 3ch; margin-right: var(--space-md); padding: 0 var(--space-sm);
  text-align: right; color: var(--color-text-muted); background: var(--color-surface-sunken); border-right: 1px solid var(--color-border);
  user-select: none;
}
.bb-line.is-target { background: var(--color-primary-100); }
.bb-line.is-locked { background: repeating-linear-gradient(135deg, var(--color-surface-sunken), var(--color-surface-sunken) 6px, var(--color-neutral-100) 6px, var(--color-neutral-100) 12px); }
.bb-line.has-error { text-decoration: underline wavy var(--color-warning); text-underline-offset: 3px; }
.bb-line.is-fout { text-decoration-color: var(--color-error); }
.bb-line.is-tip { text-decoration-color: var(--color-info); }

/* --- voorbeeld ---------------------------------------------------------- */

.bb-preview-status { margin: 0; padding: var(--space-xs) var(--space-md); font-size: var(--text-xs); color: var(--color-error); background: var(--color-primary-50); }
.bb-preview-status[hidden] { display: none; }
.bb-preview-host { flex: 1 1 auto; min-height: 0; position: relative; background: #ffffff; }
.bb-preview-frame { display: block; width: 100%; height: 100%; border: 0; background: #ffffff; }
.bb-preview-host.is-dragging .bb-preview-frame { pointer-events: none; }
.bb-preview-host.is-inspecting .bb-preview-frame { cursor: crosshair; outline: 2px dashed var(--color-primary); outline-offset: -2px; }

/* --- meldingen en console ---------------------------------------------- */

.bb-message-list { list-style: none; margin: 0; padding: var(--space-sm) var(--space-md); max-height: 12rem; overflow: auto; }
.bb-message { display: flex; align-items: flex-start; gap: var(--space-sm); margin-bottom: var(--space-xs); border-left: 3px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.bb-message.is-fout { border-left-color: var(--color-error); }
.bb-message.is-waarschuwing { border-left-color: var(--color-warning); }
.bb-message.is-tip { border-left-color: var(--color-info); }
.bb-message-body { flex: 1 1 auto; text-align: left; padding: var(--space-xs) var(--space-sm); border: 0; background: none; color: inherit; cursor: pointer; font-size: var(--text-sm); }
.bb-message-body:hover { background: var(--color-surface-sunken); }
.bb-message-where { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.bb-message-detail { display: block; font-style: normal; font-size: var(--text-xs); color: var(--color-text-muted); }
.bb-quickfix { align-self: center; margin-right: var(--space-xs); font-size: var(--text-xs); white-space: nowrap; }

.bb-console-out { list-style: none; margin: 0; padding: var(--space-xs) var(--space-md); max-height: 12rem; overflow: auto; font: var(--text-xs) / 1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.bb-console-line { padding: 0.1rem 0; border-bottom: 1px solid var(--color-surface-sunken); }
.bb-console-line.is-warn { color: var(--color-warning); }
.bb-console-line.is-error { color: var(--color-error); }
.bb-console-line.is-debug, .bb-console-line.is-info { color: var(--color-text-muted); }

/* --- dialogen ----------------------------------------------------------- */

.bb-dialog-title { margin: 0; font-size: var(--text-lg); }
.bb-field-error { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--color-error); }
.bb-field-error[hidden] { display: none; }