/* ════════════════════════════════════════════════════════════════════════
   app-theme-v2.css — PROTOTYPE thema-overlay voor de app-pagina.
   Laadt NA app.css en herstyleert enkel de "chrome" (nav, knoppen, het
   onboarding-keuzescherm) naar de nieuwe "Warm Paper"-taal van de homepage.
   Raakt de canvas-logica niet aan. Alleen op app-v2.html (branch-preview).
   ════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap');

:root {
  --o1: #e2540e;
  --o2: #f47a2e;
  --o3: #c8430a;
  --rose: #e8516b;
  --amber: #f0a03c;
  --t-bg: #fbf7f1;
  --t-bg2: #f4eee4;
  --t-card: #ffffff;
  --t-line: rgba(26, 23, 20, 0.09);
  --t-ink: #1a1714;
  --t-muted: #6b6258;
  --t-grad: linear-gradient(100deg, var(--o2), var(--o1) 45%, var(--rose));
  --t-sans: 'Instrument Sans', system-ui, sans-serif;
  --t-serif: 'DM Serif Display', Georgia, serif;
}

body {
  font-family: var(--t-sans);
  background: var(--t-bg);
}
/* zacht blueprint-raster onder het keuzescherm */
.choose-screen {
  position: relative;
  background:
    linear-gradient(rgba(120, 90, 60, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 90, 60, 0.05) 1px, transparent 1px), var(--t-bg);
  background-size:
    42px 42px,
    42px 42px,
    auto;
}

/* ── top-nav: solide warm paper (geen glas — dat is de SaaS-default) ── */
.app-nav {
  background: var(--t-card);
  border-bottom: 1px solid var(--t-line);
}
.app-nav-logo {
  font-family: var(--t-serif);
  font-weight: 400;
  font-size: 18px;
}
.app-nav-logo span {
  color: var(--o1);
}

/* ── zichtbare focus voor toetsenbord (chrome erft niet van app.css) ── */
.app-tab:focus-visible,
.app-nav-right .nav-pdf-btn:focus-visible,
.wiz-type:focus-visible,
.choose-screen button:focus-visible {
  outline: 2px solid var(--o1);
  outline-offset: 3px;
}
.app-tab {
  font-family: var(--t-sans);
  font-weight: 600;
  border-radius: 9px 9px 0 0;
}
.app-tab:hover {
  background: var(--t-bg2);
}
.app-tab.active {
  color: var(--o3) !important;
  border-bottom-color: transparent !important;
  position: relative;
}
.app-tab.active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2.5px;
  border-radius: 2px;
  background: var(--t-grad);
}

/* ── knoppen ── */
.app-nav-right .nav-pdf-btn {
  background: var(--t-grad);
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 4px 16px -6px rgba(226, 84, 14, 0.5);
  transition:
    transform 0.18s,
    box-shadow 0.2s;
}
.app-nav-right .nav-pdf-btn:hover {
  background: var(--t-grad);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(226, 84, 14, 0.6);
}

/* ── onboarding-keuzescherm ── */
.choose-screen > .wiz-step > h1 {
  font-family: var(--t-serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.choose-screen > .wiz-step > p {
  font-size: 15.5px;
}

.wiz-types {
  gap: 18px;
}
.wiz-type {
  width: 210px;
  border: 1px solid var(--t-line) !important;
  border-radius: 18px;
  background: var(--t-card) !important;
  padding: 22px 18px 20px;
  box-shadow: 0 16px 40px -28px rgba(40, 30, 20, 0.5);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s,
    border-color 0.3s;
}
.wiz-type:hover {
  transform: translateY(-6px);
  border-color: rgba(244, 122, 46, 0.55) !important;
  box-shadow: 0 26px 56px -28px rgba(226, 84, 14, 0.4);
}
/* de "Makkelijkst"-kaart krijgt een warme gradient-rand i.p.v. harde border */
.wiz-type[onclick*='upload'] {
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(var(--t-card), var(--t-card)) padding-box,
    var(--t-grad) border-box !important;
  box-shadow: 0 22px 50px -26px rgba(226, 84, 14, 0.45);
}
.wiz-type h3 {
  font-family: var(--t-serif);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.2px;
  margin-top: 6px;
}
.wiz-type p {
  font-size: 12.5px;
  color: var(--t-muted);
}

/* "Bekijk een voorbeeld" + secundaire links erven de warme look via inline
   styles in de HTML; we tillen enkel de radius/representatie subtiel op. */
.choose-screen button {
  font-family: var(--t-sans);
}

/* ── context-hygiëne (run-through fixes) ───────────────────────────────── */
/* "Vergeten toestellen"-hints horen alleen bij het situatieplan — niet
   blijven zweven boven Zekeringkast/Materiaallijst/… */
body[data-pe-tab]:not([data-pe-tab='plan']) .appliance-hint {
  display: none !important;
}
/* cookie-melding compact linksonder i.p.v. een groot blok over de werk-UI */
.cc-banner {
  left: 14px;
  right: auto;
  bottom: 14px;
  max-width: 320px;
  border-radius: 14px;
  box-shadow: 0 14px 40px -18px rgba(40, 30, 20, 0.45);
}

/* ════════════════════════════════════════════════════════════════════════
   Tab-panelen → één warm-paper taal (de-blue + AA-contrast).
   app.css is GEDEELD met de live app.html → niet bewerken; we overschrijven
   enkel hier. Bewust ongemoeid: de fase-kleuren (.fase-*, elektrische norm)
   en de groene succes-states (done/ok/route) — die dragen betekenis.
   ════════════════════════════════════════════════════════════════════════ */

/* slate badges & paneel-headers → warme houtskool i.p.v. blauwgrijs */
.ov-kring-badge,
.ov-kr-badge,
.slot-kring,
.kp-letter,
.kp-header,
.kast-header {
  background: #3a322b;
}
.slot.hoofdschakelaar {
  background: #3a322b;
  border-color: #241f1a;
}
.kast-stat strong {
  color: #3a322b;
}
.eendr-badge {
  background: var(--t-bg2);
  border-color: #d8d2c6;
  color: #3a322b;
}

/* primaire "blauwe" knoppen → accent-oranje */
.lp-ok,
.vp-save-btn,
.zp-apply,
.kp-merge-ok,
.sm-copy-btn,
.zp-header {
  background: var(--o1);
}
.lp-ok:hover,
.vp-save-btn:hover,
.zp-apply:hover,
.kp-merge-ok:hover,
.sm-copy-btn:hover {
  background: var(--o3);
}

/* lichtblauwe chips/hints/badges (o.a. de "+ label"-pill) → warm */
.slot.mcb-extra,
.vp-badge-man,
.kp-item-count.has,
.zp-hint,
.vp-restore-btn,
.kp-btn-merge,
.ov-edit-btn,
.sm-option.primary {
  background: #fff1e9;
  border-color: #f3d3c2;
  color: var(--o3);
}
.sm-option.primary .sm-option-text strong {
  color: var(--o3);
}
.sm-option:hover {
  border-color: var(--o2);
  background: #fff6f0;
}
.kp-btn-merge:hover {
  background: var(--o1);
  color: #fff;
}
.vp-restore-btn:hover {
  background: #fff1e9;
}
.kp-merge-select {
  border-color: #f3d3c2;
}
.ov-table tr.ov-clickable:hover td {
  background: #fff6f0 !important;
}

/* focus-randen & status blauw → accent */
.lp-row input:focus,
.lp-row select:focus,
.zp-room-name input:focus,
.zp-coord input:focus,
.kp-desc-input:focus {
  border-color: var(--o1);
}
#saveStatus.saving {
  color: var(--o3);
}

/* zone-overlay in het plan: blauw → oranje */
.zone-rect {
  fill: rgba(226, 84, 14, 0.07);
  stroke: var(--o1);
}
.zone-lbl {
  fill: var(--o3);
}
#bdGhost {
  background: #fff1e9;
  border-color: var(--o1);
  color: var(--o3);
}
body.place-mode svg {
  outline-color: var(--o1);
}
.sym.ai-pending rect:first-child {
  stroke: var(--o1) !important;
}

/* koel-grijs → warm */
.kast-stats {
  background: var(--t-bg2);
}
.kast-stat {
  color: #7c7468;
}
.slot.reserve {
  border-color: #d8d2c6;
  background: var(--t-bg2);
}

/* te-lichte muted greys → AA (≥4.5:1 op wit) */
.wiz-btn-back,
.tut-skip,
.ai-tab {
  color: #7c7468;
}

/* a11y (V3): jargon-tooltips ook via toetsenbord/touch (app.css toont ze enkel
   op :hover). Focusbaar gemaakt via JS in app-v2.html. */
.jargon:focus-within .jt,
.jargon:focus .jt {
  display: block;
}
.jargon:focus-visible {
  outline: 2px solid #e2540e;
  outline-offset: 2px;
  border-radius: 3px;
}

/* a11y: skip-link naar de hoofdinhoud (zichtbaar bij toetsenbordfocus) */
.pe-skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: #e2540e;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font:
    600 13px/1 'Instrument Sans',
    system-ui,
    sans-serif;
  text-decoration: none;
}
.pe-skip:focus {
  left: 8px;
}

/* ════════════════════════════════════════════════════════════════════════
   Mobiel (≤768px) — de V2-shell heeft hier geen eigen breakpoints; app.css
   regelt nav + tap-targets, dit blok dicht de gaten in de V3-tabbladen.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Zekeringkast-tab ── */
  /* de knoppenrij van de configurator mag wrappen i.p.v. horizontaal
     overflowen (was de oorzaak van 874px-brede scroll op telefoon) */
  .kast-config > div:first-child {
    flex-wrap: wrap;
    gap: 8px;
  }
  .kast-config > div:first-child > h2 {
    /* !important: de h2 heeft een inline flex:1 die anders wint */
    flex: 1 0 100% !important; /* titel op eigen regel, knoppen eronder */
  }
  .kast-config .ai-btn,
  .kast-config button {
    font-size: 11px;
  }
  /* telpaneel (260px) + kast naast elkaar → onder elkaar, niet sticky */
  .pe-kast-layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .pe-kast-tally {
    position: static !important;
    top: auto !important;
  }

  /* AI-fab niet over de mobiele bottom-content/cookiemelding */
  .ai-fab {
    bottom: 76px;
  }
}

/* ── activatie-nudge naar het eendraadschema ──────────────────────────────
   Subtiele, paper-flat accent-stip op de Eendraadschema-tab zodra er symbolen
   staan maar het schema (het "aha"-moment) nog niet bekeken is. Geen pop-up. */
.app-tab.pe-nudge {
  position: relative;
}
.app-tab.pe-nudge::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--o1);
  box-shadow: 0 0 0 0 rgba(226, 84, 14, 0.5);
  animation: pe-nudge-pulse 1.9s ease-out infinite;
}
@keyframes pe-nudge-pulse {
  70% {
    box-shadow: 0 0 0 7px rgba(226, 84, 14, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(226, 84, 14, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-tab.pe-nudge::after {
    animation: none;
  }
}