/* mobiel.css — telefoonweergave voor het hele portaal.
   Alles staat in één media query: op tablet en desktop verandert er niets.
   Wordt als laatste ingeladen (vlak voor </head>), zodat deze regels winnen
   van de <style>-blokken in de pagina's zelf. */

@media (max-width: 760px) {

  /* ---------- Ruimte ---------- */
  .wrap        { padding: 16px 12px 48px; }
  h1           { font-size: 20px; }
  h2           { margin-top: 22px; }
  .logo        { height: 32px; }
  .kop         { align-items: flex-start; margin-bottom: 14px; }

  /* ---------- Tabellen ---------- */
  /* Een brede tabel mag nooit de héle pagina laten schuiven: hij krijgt
     zijn eigen horizontale schuifbalk. */
  table            { display: block; width: 100%; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabelkaart      { overflow-x: auto; }
  th, td           { white-space: normal; }
  td.bedrag, th.bedrag { white-space: nowrap; }

  /* ---------- Formulieren ---------- */
  /* 16px voorkomt dat iOS bij het aantikken van een veld inzoomt. */
  input, select, textarea { font-size: 16px; }
  .kaart input, .kaart select, .kaart textarea { width: 100%; margin-right: 0; }
  input.wwmini     { width: 100%; font-size: 16px; }
  .filters         { flex-direction: column; align-items: stretch; }
  .filters input, .filters select, .filters .knop { width: 100%; min-width: 0; font-size: 16px; }
  .filters .zoekveld { width: 100%; min-width: 0; }
  .twee            { grid-template-columns: 1fr; }

  /* ---------- Knoppen: groot genoeg voor een duim ---------- */
  .knop            { padding: 11px 16px; font-size: 14px; }
  .knop.mini       { padding: 9px 14px; font-size: 13px; }
  form.inline      { display: inline-block; }
  a.bewerk         { font-size: 19px; padding: 5px 7px; margin-right: 2px; }
  a.best           { display: inline-block; padding: 6px 0; }
  .tag             { padding: 7px 7px 7px 13px; }
  .tag button      { padding: 6px 9px; font-size: 15px; }

  /* ---------- Facturenlijst als kaartjes ---------- */
  /* Twaalf kolommen passen niet op een telefoon; elke factuur wordt een
     blokje met labels ervoor. Op desktop blijft het gewoon een tabel. */
  table.lijst, table.lijst tbody, table.lijst td { display: block; }
  table.lijst          { overflow: visible; }
  table.lijst thead    { display: none; }
  /* Linkerkolom voor de gegevens, rechterkolom hangt aan de rechterrand.
     Alles begint op dezelfde twee lijnen, dat leest een stuk rustiger. */
  table.lijst tr       { display: grid; grid-template-columns: 1fr auto; column-gap: 16px;
                         padding: 13px 14px 11px; border-bottom: 1px solid var(--line); }
  table.lijst tr:last-child { border-bottom: 0; }
  /* Label bóven de waarde in plaats van ernaast. */
  table.lijst td       { min-width: 0; border: 0; padding: 6px 0 0; text-align: left; }
  table.lijst td::before {
    content: attr(data-label);
    display: block; margin-bottom: 1px;
    font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--soft); font-weight: 600; white-space: nowrap;
  }

  /* Kopregel: leverancier links, bedrag er groot naast. */
  table.lijst td.mob-kop        { grid-column: 1; grid-row: 1; font-size: 15px; line-height: 1.3; padding: 0; }
  table.lijst td.mob-kop::before { content: none; }
  table.lijst td[data-label="Bedrag"] {
    grid-column: 2; grid-row: 1; padding: 0;
    font-size: 16px; font-weight: 700; text-align: right; white-space: nowrap;
  }
  table.lijst td[data-label="Bedrag"]::before { content: none; }

  table.lijst td.mob-verberg    { display: none; }
  /* Rechterkolom-waarden tegen de rand, zodat er één rechte lijn ontstaat. */
  table.lijst td[data-label="Datum"],
  table.lijst td[data-label="Btw"],
  table.lijst td[data-label="Bestand"] { text-align: right; }
  table.lijst td[data-label="Btw"]     { font-weight: 400; }
  table.lijst td.mob-acties     { grid-column: 1 / -1; display: flex; align-items: center;
                                  justify-content: flex-end; gap: 8px; padding-top: 12px; }
  table.lijst td.mob-acties::before { content: none; }
  table.lijst select.cat        { width: auto; max-width: 100%; font-size: 14px; padding: 6px 8px; margin-top: 1px; }
  /* Selectievakjes en bulkacties zijn bureaubladwerk. */
  .bulkbalk                     { display: none !important; }

  /* ---------- Kopregel ---------- */
  /* De knoppenrij naast de titel (maandkeuze, afdrukken, menu) past niet op
     één regel en duwde de hele pagina breder dan het scherm. */
  .kop > div   { flex-wrap: wrap; }

  /* ---------- Boekhoudmap: de inhoudsopgave ---------- */
  .sectie      { flex-wrap: wrap; }
  .sectie .info { flex: 1 1 100%; min-width: 0; }

  /* ---------- Maandafsluiting / rapportage ---------- */
  .paginering  { gap: 8px; }
  .stat        { padding: 10px 12px; }
  .stat .w     { font-size: 17px; }
}