/* ============================================================
   RESPONSIVE
   Desktop is de basis. Hieronder de aanpassingen voor
   laptop, tablet en mobiel.
   ============================================================ */

/* ---------- Kleine laptop ---------- */
@media (max-width: 1280px) {
  :root { --zij-b: 214px; }

  .detail { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* ---------- Tablet liggend ---------- */
@media (max-width: 1080px) {
  .detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-zij { position: static; }

  .raster-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Tablet en mobiel: zijbalk wordt uitschuifmenu ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }

  .zijbalk {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 84vw);
    transform: translateX(-102%);
    transition: transform var(--traag);
    box-shadow: var(--schaduw-3);
    height: 100dvh;
  }

  .zijbalk.open { transform: translateX(0); }

  /* Donkere laag achter het uitgeschoven menu. */
  .menu-waas {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-zijbalk) - 1);
    background: rgba(22, 22, 26, .5);
    backdrop-filter: blur(2px);
    animation: waas-in var(--snel);
  }

  .menu-knop { display: grid; }

  .inhoud { padding: var(--sp-5) var(--pad-x) var(--sp-7); }

  .form-raster { grid-template-columns: minmax(0, 1fr); }

  .raster-stats { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ---------- Mobiel ---------- */
@media (max-width: 640px) {
  :root {
    --pad-x: 16px;
    --vspr-s: 5px;
    --t-cijfer: 1.7rem;
  }

  .kopbalk { gap: var(--sp-3); }
  .kopbalk-titel { font-size: .92rem; }

  /* Op mobiel alleen het icoon of de korte tekst van een actieknop. */
  .kopbalk-acties .btn-tekst { display: none; }

  .pagina-kop { align-items: flex-start; }
  .pagina-acties { width: 100%; }
  .pagina-acties .btn { flex: 1 1 auto; }

  .raster-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-kaarten { grid-template-columns: minmax(0, 1fr); }

  .stat { padding: var(--sp-3); }
  .stat-label { font-size: .62rem; }

  .kaart { padding: var(--sp-4); }

  .modaal {
    max-height: 100dvh;
    height: 100dvh;
    max-width: 100%;
    border: none;
    border-radius: 0;
  }

  .waas { padding: 0; place-items: stretch; }

  .modaal-kop, .modaal-body, .modaal-voet { padding-left: var(--sp-4); padding-right: var(--sp-4); }

  .modaal-voet { flex-direction: column-reverse; align-items: stretch; }
  .modaal-voet .btn { width: 100%; }
  .modaal-voet .links { margin-right: 0; }

  .gegeven { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  .meldingen { right: var(--sp-3); left: var(--sp-3); bottom: var(--sp-3); width: auto; }

  .filterbalk { padding: var(--sp-2); gap: var(--sp-2); }
  .filterbalk select { flex: 1 1 calc(50% - var(--sp-2)); }
  .filter-telling { width: 100%; margin-left: 0; text-align: right; }

  .tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .tab { flex-shrink: 0; }

  /* ---------- De kalender op een telefoon ----------

     Zeven kolommen naast elkaar zijn op een telefoon zeven streepjes. De week
     wordt daarom een stapel dagen onder elkaar: alles blijft leesbaar en het
     plusje blijft aantikbaar. De maand houdt wél zijn raster, want daar lees
     je alleen getallen — zo werkt elke telefoonkalender. */
  .weekraster { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .weekdag { min-height: 0; }
  .weekdag-lijst { padding: var(--sp-3); }
  .weekdag-erbij { min-height: 44px; }

  .maandraster { gap: 3px; }
  .maanddag { min-height: 58px; padding: 4px; gap: 3px; }
  .maanddag-nr { font-size: .8rem; }
  .maanddag-tellingen b { min-width: 16px; height: 16px; font-size: .55rem; padding: 0 4px; }
  .maand-kop { font-size: .55rem; letter-spacing: .06em; }

  .kalender-balk { gap: var(--sp-2); padding: var(--sp-2); }
  .kalender-balk .btn { flex: 1 1 auto; }
  .kalender-titel { flex: 1 1 100%; order: -1; text-align: center; }

  .dagplan { padding: var(--sp-3); }
  .dagplan-regel { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--sp-2); }
}

/* ---------- Zeer smal ---------- */
@media (max-width: 380px) {
  .raster-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Afdrukken ---------- */
@media print {
  .zijbalk, .kopbalk, .pagina-acties, .filterbalk, .meldingen, .menu-waas { display: none !important; }
  .app { grid-template-columns: 1fr; }
  body { background: #fff; }
  .kaart, .stat { break-inside: avoid; }
}