/* Telefoon (iPhone) — het ontwerp zet alle stijl inline; hier alleen de
   aanpassingen voor smalle schermen, via de data-m-haakjes in index.html. */

[data-m="scrim"] { display: none; }

@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  [data-m="shell"] {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    gap: 10px !important;
  }

  /* Menu als uitschuiflade over de inhoud. */
  [data-m="scrim"] {
    display: block;
    position: fixed; inset: 0; z-index: 60;
    background: rgba(32,30,29,0.32);
    backdrop-filter: blur(2px);
  }
  [data-m="sidebar"] {
    position: fixed !important;
    z-index: 61;
    top: max(10px, env(safe-area-inset-top)) !important;
    left: max(10px, env(safe-area-inset-left));
    bottom: max(10px, env(safe-area-inset-bottom));
    width: min(280px, 82vw) !important;
    min-height: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hoofd + zijkolom onder elkaar. */
  [data-m="stack"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* iOS zoomt in op velden kleiner dan 16px. */
  input, select, textarea { font-size: 16px !important; }

  /* Zoekbalk: zoekveld en periode elk op een eigen regel. */
  [data-m="zoek"] { min-width: 0 !important; flex: 1 1 0 !important; }
  [data-m="periode"] {
    flex: 1 1 100% !important;
    min-width: 0;
    border-left: 0 !important; padding-left: 0 !important;
  }
  [data-m="periode"] input { flex: 1 1 0; min-width: 0; width: 0; }

  /* Tabbladen: één regel, horizontaal vegen. */
  [data-m="tabs"] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  [data-m="tabs"]::-webkit-scrollbar { display: none; }
  [data-m="tabs"] > * { flex: none; }

  /* Brede tabellen: horizontaal scrollen binnen hun kaart. */
  [style*="overflow-x: auto"], [style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }

  /* Pop-ups passend maken. */
  [style*="position: fixed"][style*="inset: 0"] { padding-left: 10px !important; padding-right: 10px !important; }
}

@media print {
  [data-m="scrim"] { display: none !important; }
}

/* ── Kaarten in plaats van brede tabellen (iPhone) ─────────────────────── */
@media (max-width: 760px) {
  /* Werkpagina: knoppen bovenaan netjes laten doorlopen. */
  [data-m="kopknoppen"] { flex-wrap: wrap !important; width: 100%; }
  [data-m="kopknoppen"] button { white-space: nowrap; }

  /* Nieuwe rit / rit bewerken: datum + soort naast elkaar, wagen/materiaal eronder. */
  [data-m="rij3"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  [data-m="rij3"] > :nth-child(3) { grid-column: 1 / -1; }

  /* Gemeenschappelijk: tabel → blokken. */
  table[data-m="werken"], table[data-m="werken"] > tbody,
  table[data-m="ritten"], table[data-m="ritten"] > tbody,
  table[data-m="werkritten"], table[data-m="werkritten"] > tbody { display: block; width: 100%; min-width: 0 !important; }
  table[data-m="werken"] > thead, table[data-m="ritten"] > thead, table[data-m="werkritten"] > thead { display: none; }
  [data-m="werken"] td[data-m], [data-m="ritten"] td[data-m], [data-m="werkritten"] td[data-m] {
    display: block; border-top: 0 !important; padding: 0 !important; min-width: 0 !important; max-width: none !important;
    width: auto !important; text-align: left !important; white-space: normal !important;
  }
  td[data-l]::before {
    content: attr(data-l); display: block;
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #9a9797; margin-bottom: 1px;
  }

  /* Werkoverzicht: één kaart per werk. */
  tr[data-m="werk"] {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 6px 18px; align-items: end;
    padding: 12px 12px 12px !important; border-top: 1px solid rgba(32,30,29,0.08);
  }
  tr[data-m="werk"] > [data-m="nr"] { grid-column: 1 / 3; font-weight: 700; align-self: center; }
  tr[data-m="werk"] > [data-m="st"] { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
  tr[data-m="werk"] > [data-m="wie"] { grid-column: 1 / -1; }
  tr[data-m="werk"] > [data-m="actie"] { grid-column: 1 / -1; font-size: 12px; color: #6f6c6c; }
  tr[data-m="werk"] > [data-m="actie"]:empty { display: none; }
  tr[data-m="werk"] > [data-m="open"], tr[data-m="werk"] > [data-m="kl"], tr[data-m="werk"] > [data-m="waarde"] { font-size: 12.5px; }
  tr[data-m="werk"] > [data-m="open"] { grid-column: 1 / -1; display: flex !important; gap: 8px; align-items: baseline; }
  tr[data-m="werk"] > [data-m="open"]::before { display: inline; margin: 0; }
  tr[data-m="werk"] > [data-m="open"] > div { display: inline; }
  tr[data-m="werk"] > [data-m="kl"] { display: inline-block; }
  tr[data-m="werk"] > [data-m="waarde"] { grid-column: 3; justify-self: end; font-weight: 700; font-size: 14px; }
  tr[data-m="werkopen"] { display: block; }
  tr[data-m="werkopen"] > td { display: block; padding: 0 8px 10px !important; }

  /* Ritten onder een werk in het overzicht. */
  table[data-m="werkritten"] > tbody > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px;
    padding: 9px 4px; border-top: 1px solid rgba(32,30,29,0.07);
  }
  table[data-m="werkritten"] [data-m="dat"] { font-weight: 700; }
  table[data-m="werkritten"] [data-m="ger"] { grid-column: 2; grid-row: 1; justify-self: end; }
  table[data-m="werkritten"] [data-m="wat"], table[data-m="werkritten"] [data-m="wie"], table[data-m="werkritten"] [data-m="bon"] { grid-column: 1 / -1; }

  /* Werkpagina: ritten als kaarten. */
  tr[data-m="groep"] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
  tr[data-m="groep"] > [data-m="gkop"] { flex: 1 1 auto; }
  tr[data-m="groep"] > [data-m="gsub"] { flex: none; font-weight: 700; }
  tr[data-m="groep"] > [data-m="gleeg"] { display: none !important; }
  tr[data-m="rit"] {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 12px;
    padding: 12px 12px 14px; border-top: 1px solid rgba(32,30,29,0.08);
  }
  tr[data-m="rit"] > [data-m="dat"] { order: 1; } tr[data-m="rit"] > [data-m="men"] { order: 2; }
  tr[data-m="rit"] > [data-m="oms"] { order: 3; } tr[data-m="rit"] > [data-m="aan"] { order: 4; }
  tr[data-m="rit"] > [data-m="tar"] { order: 5; } tr[data-m="rit"] > [data-m="wag"] { order: 6; }
  tr[data-m="rit"] > [data-m="ure"] { order: 7; } tr[data-m="rit"] > [data-m="bed"] { order: 8; align-self: end; }
  tr[data-m="rit"] > [data-m="dat"] { grid-column: 1 / 3; grid-row: 1; }
  tr[data-m="rit"] > [data-m="men"] { grid-column: 3; grid-row: 1; justify-self: end; }
  tr[data-m="rit"] > [data-m="oms"] { grid-column: 1 / -1; }
  tr[data-m="rit"] > [data-m="oms"] > div { max-width: none !important; white-space: normal !important; }
  tr[data-m="rit"] > [data-m="aan"] { grid-column: 1; }
  tr[data-m="rit"] > [data-m="tar"] { grid-column: 2 / -1; }
  tr[data-m="rit"] > [data-m="wag"] { grid-column: 1 / -1; }
  tr[data-m="rit"] > [data-m="ure"] { grid-column: 1; }
  tr[data-m="rit"] > [data-m="bed"] { grid-column: 2 / -1; justify-self: end; text-align: right !important; font-size: 15px; }
  table[data-m="ritten"] tr:not([data-m]) { display: block; }
  table[data-m="ritten"] tr:not([data-m]) > td { display: block; }
}

/* Wagen-/materiaalkiezer: nummer | naam | prijs met eenheid eronder. */
@media (max-width: 760px) {
  [data-m="mzkop"], [data-m="mzrij"] {
    grid-template-columns: 46px minmax(0, 1fr) auto !important; column-gap: 10px !important;
    padding-left: 14px !important; padding-right: 14px !important;
  }
  [data-m="mzkop"] > :nth-child(3) { display: none; }
  [data-m="mzrij"] > :nth-child(1) { grid-row: 1 / 3; }
  [data-m="mzrij"] > :nth-child(2) { grid-row: 1 / 3; }
  [data-m="mzrij"] > :nth-child(3) { grid-column: 3; grid-row: 2; text-align: right; font-size: 11px; }
  [data-m="mzrij"] > :nth-child(4) { grid-column: 3; grid-row: 1; }
}

/* Werkpagina: voortgangsstappen onder elkaar op de telefoon. */
@media (max-width: 760px) {
  [data-m="vg-stappen"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 10px; }
  [data-m="vg-lijn"] { display: none; }
}

/* Inlogscherm: op de telefoon één kolom, prent weg, klein logo boven het formulier. */
@media (max-width: 760px) {
  [data-m="login"] { align-items: flex-start !important; padding: max(48px, env(safe-area-inset-top)) 14px 24px !important; }
  [data-m="login-kaart"] { grid-template-columns: minmax(0, 1fr) !important; border-radius: 20px !important; }
  [data-m="login-merk"] { display: none !important; }
  [data-m="login-form"] { padding: 28px 22px !important; }
  [data-m="login-logo-klein"] { display: block !important; }
}