/* ============================================================
   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;
  }

  /* De kopbalk mag afbreken. Stond hij op één regel, dan schoven de
     knoppen Importeren en Exporteren over de titel heen en werd de
     pagina breder dan het scherm - waardoor alles naar links
     verschoof. */
  .kopbalk {
    flex-wrap: wrap;
    padding: var(--ruimte-3) var(--ruimte-4);
    gap: var(--ruimte-2) var(--ruimte-3);
  }
  .kopbalk > * { min-width: 0; }
  .kopbalk h1 {
    font-size: var(--tekst-lg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .kopbalk-onder { display: none; }
  .kopbalk-acties { flex-wrap: wrap; justify-content: flex-end; }

  /* Vangnet: niets maakt de pagina breder dan het scherm. Gebeurt dat
     toch, dan schuift ALLES naar links - inclusief de menuknop, die
     dan half buiten beeld staat. */
  .hoofd { max-width: 100vw; }
  .kaart, .kaart-inhoud, .tabel-kaarten { max-width: 100%; }
  .kopbalk-acties .knop { padding: 0 var(--ruimte-4); }

  /* Ook de kop van een kaart: titel links, knoppen rechts, en als dat
     niet past eronder in plaats van eroverheen. */
  .kaart-kop { flex-wrap: wrap; }
  .kaart-kop > * { min-width: 0; }

  .inhoud {
    padding: var(--ruimte-4);
    /* De onderbalk zelf schuift omhoog voor de systeemknoppen van
       Android (env(safe-area-inset-bottom)), maar de ruimte eronder
       in de inhoud deed dat niet. Daardoor viel de laatste regel
       achter de balk. */
    padding-bottom: calc(var(--mobiele-balk-hoogte) + var(--ruimte-6) +
                         env(safe-area-inset-bottom));
  }

  /* 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

     De selectors noemen table.tabel tbody er met opzet bij. Ze moeten
     het winnen van de tabelopmaak in components.css, klanten.css en
     projecten.css (table.tabel tbody td = drie elementen plus een
     klasse). Deden ze dat niet, dan hield een cel zijn vaste hoogte
     van 52 px en zijn desktop-opvulling, en liep de tekst over de
     kaarten eronder heen. Precies dat gebeurde in elke lijst. */
  .tabel-kaarten .tabel-omhulsel,
  .tabel-kaarten.tabel-omhulsel { border: 0; background: transparent; overflow-x: visible; }
  .tabel-kaarten table.tabel, .tabel-kaarten thead,
  .tabel-kaarten table.tabel tbody,
  .tabel-kaarten table.tabel tbody tr,
  .tabel-kaarten table.tabel tbody td { display: block; width: 100%; }
  .tabel-kaarten thead { display: none; }
  .tabel-kaarten table.tabel tbody tr {
    height: auto;
    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 table.tabel tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--ruimte-3);
    height: auto;
    min-height: 0;
    border: 0;
    padding: 6px var(--ruimte-3);
    text-align: right;
    line-height: 1.4;
    /* Een lange naam of e-mailadres breekt af in plaats van de kaart
       breder te maken; op desktop staan daar puntjes voor in de plaats. */
    white-space: normal;
    max-width: none;
    overflow-wrap: anywhere;
  }
  .tabel-kaarten table.tabel tbody td .naam,
  .tabel-kaarten table.tabel tbody td .projectcel-naam {
    max-width: none;
    white-space: normal;
    overflow: visible;
  }
  .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;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .tabel-kaarten table.tabel tbody td.volle-breedte { justify-content: flex-start; text-align: left; }
  .tabel-kaarten td.volle-breedte::before { display: none; }
  /* Een cel zonder label (bijvoorbeeld de actieknoppen) houdt geen
     lege kolom vrij. */
  .tabel-kaarten table.tabel tbody td:not([data-label]) { justify-content: flex-end; }
}

@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; }
}