/* ============================================================================
   demo-extra.css bevat alles wat de demo toevoegt aan het gekopieerde dashboard.

   Twee soorten regels:
   1. Utility-classes die de inline style="…"-attributen uit de originele
      index.html vervangen. De site draait op style-src 'self' zonder
      'unsafe-inline', dus inline styles worden hard geblokkeerd.
   2. De demo-laag zelf: disclaimerbalk, CTA's, terug-naar-site.

   Zie docs/superpowers/specs/2026-08-06-demo-omgeving-design.md §3.2 en §5.
   ========================================================================== */

/* --- 1. Utility-classes i.p.v. inline styles --------------------------- */

.dm-fs-78      { font-size: 0.78rem; }
.dm-mono-78    { font-family: var(--font-mono); font-size: 0.78rem; }
.dm-h-280      { height: 280px; }
.dm-mt-xl      { margin-top: var(--space-xl); }
.dm-mb-2xl     { margin-bottom: var(--space-2xl); }
.dm-flex-2     { flex: 2; }
.dm-maxw-340   { max-width: 340px; }
.dm-w-0        { width: 0%; }
.dm-w-32       { width: 32px; }
.dm-ml-auto-82 { margin-left: auto; font-size: 0.82rem; }
.dm-note       { font-size: 0.8rem; margin: 0 0 var(--space-sm); }
.dm-link       { color: var(--brand-primary); }
.dm-autoprov   { display: none; align-items: center; gap: 10px; }

/* Beginstaat: JS zet deze via CSSOM zodra de app klaar is om te tonen.
   In het origineel stond dit als style="display:none" in de HTML. */
#login-page  { display: none; }
.app-layout  { display: none; }

/* --- 2. Paginaframe ---------------------------------------------------- */

/* Het dashboard is 100vh hoog. Met een balk erboven zou de pagina gaan
   scrollen, dus body wordt een kolom en het dashboard vult de rest. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

.app-layout { flex: 1 1 auto; min-height: 0; height: auto; }
.sidebar    { height: auto; }

/* --- 3. De demo-balk ----------------------------------------------------
   Eén strip van 44px bovenaan die alle drie de taken draagt: zeggen dat dit
   een demo is, de uitgang bieden, en de enige actie op de pagina zijn. Dat
   scheelt een tweede balk onderaan, en dus 61 pixels chrome en één beslissing
   voor de bezoeker.

   Drie kolommen (1fr auto 1fr) in plaats van space-between, zodat het midden
   ook echt gecentreerd staat en niet verschuift met de breedte van de
   terug-link. De derde kolom blijft leeg en dient alleen als tegenwicht. */

.demo-bar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-lg, 16px);
  height: 44px;
  padding: 0 20px;
  box-sizing: border-box;
  background: var(--brand-primary, #2C5EEA);
  color: #DCE6FC;
}

.demo-bar-back {
  justify-self: start;
  font-size: 0.78rem;
  color: #C9D8FC;
  text-decoration: none;
  white-space: nowrap;
}

.demo-bar-back:hover { color: #fff; }
.demo-bar-back:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

.demo-bar-mid {
  display: flex;
  align-items: center;
  gap: var(--space-lg, 16px);
  min-width: 0;
}

.demo-bar-txt {
  margin: 0;
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-bar-txt strong { color: #fff; font-weight: 700; }

/* Wit pilletje: op een vol blauw vlak kan de knop niet ook blauw zijn, want
   dan verdwijnt hij. Wit is hier de enige kleur die nog opvalt. */
.demo-bar-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-md, 8px);
  background: #fff;
  color: var(--brand-secondary, #1E46C2);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease;
}

.demo-bar-cta:hover { background: #F0F4FF; }
.demo-bar-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.demo-bar-arr { display: inline-block; transition: transform 200ms ease; }
.demo-bar-cta:hover .demo-bar-arr { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .demo-bar-cta, .demo-bar-arr { transition: none; }
  .demo-bar-cta:hover .demo-bar-arr { transform: none; }
}

/* --- 7. Smalle schermen ------------------------------------------------ */

/* Het dashboard is een desktop-beheertool met een vaste sidebar van 272px.
   Onder 900px zou die het hele scherm opeten, dus daar draaien we de betekenis
   van .sidebar-hidden om: standaard dicht, en de hamburger in de topbalk
   schuift hem als overlay open. Bewust in CSS en niet in JS, omdat een
   breedtecheck op DOMContentLoaded afhankelijk is van timing. */
@media (max-width: 900px) {
  .demo-bar { padding: 0 14px; gap: var(--space-md, 12px); }

  .app-layout .sidebar {
    width: 0;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    border-right: none;
  }

  /* Zelfde ID-specificiteit als de collapse-regel in groepen.css, anders wint
     die met zijn `width: 0 !important`. */
  #app-layout.sidebar-hidden .sidebar,
  .app-layout.sidebar-hidden .sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    border-right: 1px solid var(--border-subtle);
    background: var(--bg-sidebar);
    box-shadow: 0 8px 30px rgba(15, 18, 32, 0.18);
  }
}

/* Rasters die op smalle schermen over hun container heen lopen.
   Het dashboard is voor desktop gebouwd: `1fr` gedraagt zich als
   minmax(auto, 1fr), dus lange labels als "GEDETECTEERD" duwen de kolom
   breder dan de container. `.main-content` heeft overflow-x: hidden, dus je
   ziet het niet overlopen maar afgesneden. Vandaar minmax(0, 1fr). */
@media (max-width: 900px) {
  .kpi-grid,
  .kpi-grid.kpi-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-row            { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .kpi-grid,
  .kpi-grid.kpi-grid-5 { grid-template-columns: minmax(0, 1fr); }

  /* De chatbot-ranking is rank + naam + balk + percentage + aantal. Dat past
     hier niet naast elkaar. De balk gaat eruit; percentage en aantal vertellen
     hetzelfde. `flex: 1` zonder min-width: 0 laat lange namen als
     "Microsoft Copilot voor M365" de rij breder duwen dan de kaart. */
  .chatbot-bar-wrap { display: none; }
  .chatbot-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* De belofte heeft ruim 360 pixels nodig en krijgt die pas rond 640px breed.
   Daaronder valt de zin weg in plaats van dat de balk gaat stapelen: het label
   plus de knop zeggen samen genoeg, en het dashboard begint weer op 44 pixels.
   De grens ligt op 680 en niet op 640, zodat een net iets bredere letter de zin
   niet alsnog afkapt. */
@media (max-width: 680px) {
  .demo-bar-claim { display: none; }
  .demo-bar-back  { font-size: 0.74rem; }
  .demo-bar-cta   { padding: 0 12px; }
  /* De domeinnaam kost ruim tachtig pixels die het label harder nodig heeft.
     De pijl blijft staan en het aria-label benoemt de link. */
  .demo-bar-home  { display: none; }
}

/* Op 320px is "Demo environment (Dutch):" langer dan het Nederlandse label en
   loopt het tegen de knop aan. Dat is precies het stuk dat de bezoeker moet
   lezen, dus hier gaat de ruimte eromheen eraf in plaats van de tekst. */
@media (max-width: 400px) {
  .demo-bar     { padding: 0 10px; gap: 8px; }
  .demo-bar-mid { gap: 8px; }
  .demo-bar-cta { padding: 0 10px; }
}