/* ============================================================
   VKRNL - css/mobile.css
   Tablet- en telefoonweergave. Laad dit bestand als laatste.
   ============================================================ */

/* --- Tablet ---------------------------------------------- */
@media (max-width: 1100px) {
  .twee-koloms { grid-template-columns: 1fr; }
  .dagweergave { grid-template-columns: 1fr; }
  .beschikbaarheid { position: static; }
  .inhoud { padding: var(--ruimte-5); }
}

/* --- Telefoon -------------------------------------------- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }

  /* Zijbalk wordt een uitschuifpaneel */
  .zijbalk {
    position: fixed;
    top: 0; left: 0;
    width: 280px;
    max-width: 84vw;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: var(--schaduw-lg);
  }
  .zijbalk.open { transform: none; }

  .zijbalk-scherm {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 33, .5);
    z-index: 290;
  }

  .menuknop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    padding: 0;
    border: 1px solid var(--lijn);
    border-radius: var(--rond-sm);
    background: var(--vlak);
    cursor: pointer;
  }

  .kopbalk {
    padding: var(--ruimte-3) var(--ruimte-4);
    gap: var(--ruimte-3);
  }
  .kopbalk h1 { font-size: var(--tekst-lg); }
  .kopbalk-onder { display: none; }

  .inhoud {
    padding: var(--ruimte-4);
    padding-bottom: calc(var(--mobiele-balk-hoogte) + var(--ruimte-6));
  }

  /* Grotere raakvlakken */
  .knop { min-height: var(--raak-hoogte); padding: 0 var(--ruimte-5); }
  .knop-klein { min-height: 40px; }
  .knop-rij .knop { flex: 1 1 auto; }
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="date"],
  input[type="time"], input[type="search"], select, textarea {
    min-height: var(--raak-hoogte);
    font-size: 16px; /* voorkomt inzoomen op iPhone */
  }

  /* Formulierkolommen onder elkaar */
  .kolom-2, .kolom-3, .kolom-4, .kolom-6, .kolom-8, .kolom-9 { grid-column: span 12; }

  .kaart-inhoud, .kaart-kop, .kaart-voet { padding: var(--ruimte-4); }
  .kengetallen { grid-template-columns: repeat(2, 1fr); gap: var(--ruimte-3); }
  .kengetal-waarde { font-size: var(--tekst-xl); }

  /* Planning: week en maand horizontaal scrollen */
  .weekraster, .maandraster {
    grid-template-columns: repeat(7, minmax(128px, 1fr));
    overflow-x: auto;
  }
  .planning-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .datumnavigatie .periode { min-width: 130px; font-size: var(--tekst-sm); }
  .weergavekiezer { width: 100%; }
  .weergavekiezer button { flex: 1; padding: 10px var(--ruimte-2); }

  /* Inlogscherm onder elkaar */
  .inlogpagina { grid-template-columns: 1fr; }
  .inlog-zijkant {
    padding: var(--ruimte-6) var(--ruimte-5);
    text-align: center;
    align-items: center;
  }
  .inlog-zijkant p { display: none; }
  .inlog-zijkant .merk-naam { font-size: 2.25rem; }
  .inlog-zijkant .merk-streep { margin-left: auto; margin-right: auto; }

  /* Mobiele onderbalk */
  .mobiele-balk {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    display: flex;
    height: var(--mobiele-balk-hoogte);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--vlak);
    border-top: 1px solid var(--lijn);
    box-shadow: 0 -2px 10px rgba(16, 28, 46, .06);
  }
  .mobiele-balk a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--tekst-zacht);
    text-decoration: none;
  }
  .mobiele-balk a.actief { color: var(--blauw-500); }
  .mobiele-balk a .pictogram { width: 22px; height: 22px; }

  .meldingen-hoek { bottom: calc(var(--mobiele-balk-hoogte) + var(--ruimte-3)); }


  /* --- Stap 2: module Projecten --- */
  .alleen-mobiel { display: block; }

  .filterbalk .veldgroep { flex: 1 1 100% !important; }

  /* Kolomkoppen zijn verborgen in kaartweergave; sorteren gaat via de keuzelijst */
  table.tabel th.sorteerbaar { padding-right: var(--ruimte-4); }

  .tabel-kaarten td.rechts { justify-content: flex-end; }
  .tabel-acties { gap: var(--ruimte-2); }
  .knop-actie { width: 44px; height: 44px; }
  .knop-actie svg { width: 20px; height: 20px; }

  .paginering {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ruimte-3);
    padding: var(--ruimte-4);
    text-align: center;
  }
  .paginering-knoppen { justify-content: space-between; }
  .paginering-knoppen .knop { flex: 1 1 auto; }

  /* Dialoog schermvullend op de telefoon */
  .dialoog-achtergrond { padding: 0; align-items: flex-end; }
  .dialoog {
    max-width: 100%;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .dialoog-kop { padding: var(--ruimte-4) var(--ruimte-4) 0; }
  .dialoog-inhoud { flex: 1; overflow-y: auto; padding: var(--ruimte-4); }
  .dialoog-voet {
    padding: var(--ruimte-4);
    padding-bottom: calc(var(--ruimte-4) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--lijn);
    background: var(--vlak);
  }
  .dialoog-voet .knop { flex: 1 1 auto; }

  .detailrij { grid-template-columns: 1fr; gap: 2px; }

  /* Tabellen als kaarten */
  .tabel-kaarten .tabel-omhulsel { border: 0; background: transparent; }
  .tabel-kaarten table.tabel, .tabel-kaarten thead,
  .tabel-kaarten tbody, .tabel-kaarten tr, .tabel-kaarten td { display: block; width: 100%; }
  .tabel-kaarten thead { display: none; }
  .tabel-kaarten tr {
    background: var(--vlak);
    border: 1px solid var(--lijn);
    border-radius: var(--rond);
    margin-bottom: var(--ruimte-3);
    padding: var(--ruimte-2);
    box-shadow: var(--schaduw-sm);
  }
  .tabel-kaarten td {
    display: flex;
    justify-content: space-between;
    gap: var(--ruimte-3);
    border: 0;
    padding: 6px var(--ruimte-3);
    text-align: right;
  }
  .tabel-kaarten td::before {
    content: attr(data-label);
    font-size: var(--tekst-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tekst-licht);
    text-align: left;
  }
  .tabel-kaarten td.volle-breedte { justify-content: flex-start; text-align: left; }
  .tabel-kaarten td.volle-breedte::before { display: none; }
}

@media (max-width: 420px) {
  .kengetallen { grid-template-columns: 1fr; }
}

/* --- Afdrukken ------------------------------------------- */
@media print {
  .zijbalk, .mobiele-balk, .kopbalk-acties, .menuknop, .meldingen-hoek { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .inhoud { padding: 0; }
  body { background: #fff; }
}


/* ============================================================
   SCHAALBAARHEID: TABLET EN ALLES ERTUSSENIN

   Het project schakelde om op twaalf verschillende breedtes. De
   indeling ging mobiel bij 860px, maar losse onderdelen bij 900px -
   en precies daartussen zit een tablet. Dan was de helft van het
   scherm mobiel en de andere helft niet.

   Alles wat over de INDELING gaat, schakelt nu op 860px. De
   breekpunten die overblijven (980px voor een formulier met
   zijbalk, 720px voor smalle kaarten) gaan over één onderdeel en
   horen ergens anders te liggen; die zijn met opzet blijven staan.
   ============================================================ */

/* --- Tablet: zijbalk smaller, inhoud krijgt de ruimte --- */
@media (min-width: 861px) and (max-width: 1100px) {
  .app { grid-template-columns: 208px 1fr; }

  .zijbalk .menu-link { padding: var(--ruimte-2) var(--ruimte-3); }
  .merk { padding: var(--ruimte-4); }
  .merk-logo { max-height: 60px; }

  .kopbalk { padding: var(--ruimte-4) var(--ruimte-5); }
  .kopbalk h1 { font-size: var(--tekst-xl); }
}

/* --- Brede tabellen die geen kaartweergave hebben ---------

   Tabellen met de klasse tabel-kaarten worden op een telefoon
   kaartjes. De rest - de nieuwere schermen: communicatie,
   integraties, boekhouding, het klantenportaal - heeft die klasse
   niet en liep van het scherm af.

   Die schuiven nu horizontaal, met de omhulsel als het scrollvenster.
   Niet de tabel zelf op display:block zetten: dan verliest hij zijn
   kolombreedtes en wordt hij juist onleesbaar.
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .kaart-inhoud > table.tabel:not(.tabel-kaarten),
  .kaart-inhoud > .tabel-omhulsel > table.tabel:not(.tabel-kaarten) {
    min-width: 640px;
  }

  .kaart-inhoud:has(> table.tabel:not(.tabel-kaarten)) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Tabbladen: schuiven in plaats van afkappen ------------
   Een rij van tien tabbladen past op geen enkele telefoon. Ze
   schuiven horizontaal; de scrollbalk zelf is verborgen omdat hij
   op een telefoon toch niet zichtbaar is en op een tablet alleen
   ruimte kost. ------------------------------------------------ */
@media (max-width: 1100px) {
  .tabbladen {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }
  .tabbladen .tabblad { white-space: nowrap; flex: 0 0 auto; }
}

/* --- Heel smal: onder de 380px ------------------------------
   Oudere telefoons en een gesplitst scherm. Hier gaat het er alleen
   om dat niets van het scherm af loopt. ---------------------- */
@media (max-width: 380px) {
  .cijferrij { grid-template-columns: 1fr 1fr; }
  .kopbalk-acties { width: 100%; }
  .kopbalk-acties .knop { flex: 1 1 auto; }
}