/* ============================================================
   Mobiele laag voor klantpaneel en beheerpanel.
   Beheertabellen hebben 7 tot 12 kolommen; horizontaal scrollen
   daardoorheen is op een telefoon onwerkbaar. Onder 760px wordt
   elke rij daarom een kaart met labels, gevoed door data-label
   op de cellen. Tabellen zonder tbl-cards blijven gewoon scrollen.
   ============================================================ */

@media (max-width: 760px) {

  /* ---- Tabel wordt kaartenlijst ---- */
  .tbl.tbl-cards,
  .tbl.tbl-cards thead,
  .tbl.tbl-cards tbody,
  .tbl.tbl-cards tr,
  .tbl.tbl-cards td { display: block; width: 100%; }

  .tbl.tbl-cards thead { position: absolute; left: -9999px; }

  .tbl.tbl-cards tr {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 4px 14px 8px;
    margin-bottom: 12px;
  }
  .tbl.tbl-cards tr:hover td { background: transparent; }

  .tbl.tbl-cards td {
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: 9px 0;
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    text-align: right;
    /* break-word knipte ook gewone woorden doormidden zodra het krap werd
       ("Anouar" → "Anou / ar"). anywhere breekt alleen als een los woord écht
       niet past, zoals een lang e-mailadres. */
    overflow-wrap: anywhere;
    word-break: normal;
    /* Past de waarde niet naast het label, dan zakt hij naar de regel eronder
       en krijgt hij de volle breedte, in plaats van in een smalle kolom te
       worden geperst. */
    flex-wrap: wrap;
  }
  .tbl.tbl-cards td:last-child { border-bottom: 0; }

  /* Veel cellen hebben een tweede regel: een URL onder de bronnaam, de parser
     onder het type. Omdat de cel een flexbox is, belandde die <div> náást de
     hoofdwaarde in plaats van eronder — waardoor beide in een smalle kolom
     werden geperst en "072Wonen" als "072Won / en" brak. Met basis 100%
     zakt zo'n regel netjes onder de hoofdwaarde en krijgt hij de volle breedte. */
  .tbl.tbl-cards td > div,
  .tbl.tbl-cards td > p { flex: 1 0 100%; text-align: right; margin: 2px 0 0; }

  /* label links (uit data-label), waarde rechts */
  .tbl.tbl-cards td::before {
    content: attr(data-label);
    /* Kort label = smalle kolom. Vast op 40% reserveerde ook voor "PLAN" een
       ruime kolom, terwijl de waarde ernaast in de knel kwam. */
    flex: 0 1 auto;
    max-width: 40%;
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    font-weight: 600;
    line-height: 1.35;
  }
  .tbl.tbl-cards td:not([data-label])::before { content: ""; flex: 0; }

  /* lege cellen niet als loze regel tonen */
  .tbl.tbl-cards td:empty { display: none; }

  /* actiecel: volle breedte zodat knoppen aanraakbaar blijven */
  .tbl.tbl-cards td.cell-actions { display: block; text-align: left; padding-top: 12px; }
  .tbl.tbl-cards td.cell-actions::before { display: block; margin-bottom: 8px; }
  .tbl.tbl-cards td.cell-actions .btn,
  .tbl.tbl-cards td.cell-actions form { display: inline-block; margin: 0 6px 6px 0; vertical-align: top; }

  .table-wrap { -webkit-overflow-scrolling: touch; }

  /* ---- Aanraakvlakken minimaal 44px (Apple/Google richtlijn) ---- */
  .btn, button, input[type="submit"], select, .side-switch { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  /* 16px voorkomt dat iOS Safari inzoomt bij focus */
  input, select, textarea { font-size: 16px; }

  /* ---- Grids stapelen ---- */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stat-card { text-align: left; }

  /* ---- Formulieren ---- */
  .form-row { margin-bottom: 14px; }
  .form-row label { display: block; margin-bottom: 5px; }
  .flex-form { flex-direction: column; align-items: stretch; }

  /* ---- Zijbalk als chips i.p.v. lange lijst ---- */
  .dash-side { padding: 10px !important; }
  .dash-side nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .dash-side nav a { flex: 1 1 auto; text-align: center; font-size: .86rem; padding: 11px 12px; }
  .dash-side .side-title { width: 100%; margin: 8px 4px 2px; }
  .dash-side .side-switch { width: 100%; }

  /* ---- Compactere koppen en marges ---- */
  .container { padding-left: 14px; padding-right: 14px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  .page-sub { font-size: .93rem; }

  /* ---- Niets mag buiten het scherm vallen ---- */
  body { overflow-x: hidden; }
  img, canvas, svg, iframe { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* Zeer smalle toestellen: label boven de waarde */
@media (max-width: 380px) {
  .tbl.tbl-cards td { flex-direction: column; align-items: flex-start; text-align: left; gap: 3px; }
  .tbl.tbl-cards td::before { flex: none; }
  .dash-side nav a { flex: 1 1 100%; }
}

/* ── Beheernavigatie op de telefoon ──────────────────────────────────────
   De zijbalk stapelde op mobiel uit tot een scherm vol knoppen: je scrolde
   eerst langs de hele navigatie voordat je iets van de pagina zag. Op smalle
   schermen vervangen we hem daarom door een vaste balk onderaan, binnen
   duimbereik, met de vier dagelijkse bestemmingen en een Meer-vel. */
.admin-tabbar { display: none; }

@media (max-width: 760px) {
  .dash-side { display: none !important; }

  /* De layout is een grid met een kolom voor de zijbalk; die valt nu weg. */
  .dash-layout { grid-template-columns: 1fr; gap: 0; }

  .admin-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--primary);
    /* iOS: ruimte vrijhouden voor de home-indicator onderaan het scherm */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 14px rgba(15, 42, 67, .22);
  }
  .admin-tabbar .tab {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    padding: 9px 2px 8px;
    color: #9db4cc;
    text-decoration: none;
    font-size: .68rem; font-weight: 600;
    line-height: 1.1;
    text-align: center;
    /* eigen tikdoel van minstens 48px hoog, zodat mistikken niet loont */
    min-height: 48px;
    border-top: 3px solid transparent;
    list-style: none;                 /* summary rendert anders een driehoekje */
    cursor: pointer;
  }
  .admin-tabbar .tab::-webkit-details-marker { display: none; }
  .admin-tabbar .tab .tab-ic { font-size: 1.15rem; line-height: 1; }
  .admin-tabbar .tab.active { color: #fff; border-top-color: var(--accent); }
  .admin-tabbar .tab:hover { text-decoration: none; color: #fff; }

  /* Meer-vel: schuift op vanaf de balk, met een scherm-vullende achtergrond
     zodat een tik ernaast het vel sluit (label-loos, puur CSS + de summary). */
  .tab-more { flex: 1 1 0; display: flex; }
  .tab-more > summary { width: 100%; }
  .tab-more[open] > summary { color: #fff; border-top-color: var(--accent); }
  .tab-more[open]::before {
    content: ''; position: fixed; inset: 0 0 0 0;
    background: rgba(15, 42, 67, .45);
    z-index: -1;
  }
  .tab-sheet {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    max-height: 62vh; overflow-y: auto;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 30px rgba(15, 42, 67, .28);
  }
  .tab-sheet a {
    display: block;
    padding: 13px 14px;
    border-radius: 10px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
  }
  .tab-sheet a:active { background: #eef1f5; }
  .tab-sheet a.active { background: var(--primary); color: #fff; }
  .tab-sheet-kop {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); margin: 12px 14px 4px;
  }
  .tab-sheet-kop:first-child { margin-top: 4px; }

  /* Ruimte onder de pagina, anders verdwijnt de laatste knop onder de balk. */
  body.heeft-tabbar { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Panelen: compacter op de telefoon ───────────────────────────────────
   Acht stat-kaarten onder elkaar op volle breedte kostten acht schermen aan
   scrollen voor acht getallen. Afgebakend op .dash-layout, dus het beheer- én
   het klantpaneel — de publieke marketingpagina's houden hun ruimere opmaak,
   want daar is die lucht een keuze en geen verspilling. */
@media (max-width: 760px) {

  /* Getallen naast elkaar in plaats van onder elkaar. :has() selecteert de grid
     op zijn inhoud, dus dit raakt alleen roosters mét stat-kaarten en niet de
     roosters met brede inhoud (tabellen, formulieren) die wél één kolom nodig
     hebben. Een browser zonder :has() valt terug op één kolom: minder mooi,
     niet stuk. */
  .dash-layout .grid:has(> .stat-card) { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .dash-layout .stat-card { padding: 13px 14px; }
  .dash-layout .stat-card .stat-value { font-size: 1.5rem; line-height: 1.15; }
  .dash-layout .stat-card .stat-label { font-size: .74rem; line-height: 1.3; display: block; margin-top: 2px; }

  /* Kaarten in het algemeen strakker: 22px rondom is royaal op een breed scherm,
     maar eet op een telefoon de helft van de regelbreedte op. */
  .dash-layout .card { padding: 15px; }
  .dash-layout .card + .card { margin-top: 12px; }
  .dash-layout .card h2 { font-size: 1.05rem; margin-bottom: 10px; }
  .dash-layout .grid { gap: 12px; }

  /* Kop en ondertitel: minder lucht, zodat de eerste cijfers meteen in beeld staan. */
  .dash-layout h1 { font-size: 1.45rem; margin-bottom: 2px; }
  .dash-layout .page-sub { font-size: .85rem; margin-bottom: 14px; }

  /* De kaartweergave van tabellen mag ook dichter op elkaar. */
  .dash-layout .tbl.tbl-cards tr { padding: 2px 12px 6px; margin-bottom: 9px; }
  .dash-layout .tbl.tbl-cards td { padding: 7px 0; font-size: .88rem; }
}