/* =========================================================================
   Responsive-laag voor de hele inleverbon-app.
   Plaats: /oudijzer/css/responsive.css
   Wordt door elke pagina ingeladen NA de eigen styling, zodat deze regels
   waar nodig de bestaande styling overschrijven op smalle schermen.
   ========================================================================= */

/* Foto's, video's en logo's nooit breder dan hun container. */
img, svg, video, canvas, iframe {
    max-width: 100%;
    height: auto;
}

/* Tabellen die te breed zijn voor het scherm krijgen een horizontale
   scroll-wrapper. We zetten elke `<table>` in een blok-container met
   `overflow-x:auto`. Op brede schermen is er niets te zien; op smalle
   schermen kun je horizontaal vegen i.p.v. dat de pagina-layout breekt. */
table {
    max-width: 100%;
}

/* ======================================================================
   Mobiel (≤ 720px): formulieren stapelen, knoppen ruim, tabellen scrollen.
   ====================================================================== */
@media (max-width: 720px) {

    /* Standaard paginamarges wat krapper, want elke pixel telt. */
    body {
        padding: 14px 10px !important;
    }

    /* Containers die op desktop een vaste max-breedte hebben, op mobiel
       de volle breedte laten gebruiken (geen losse marges erbij). */
    .wrap, .balk, .melding {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Pagina-koppen iets kleiner. */
    h1 { font-size: 20px !important; }
    h2 { font-size: 15px !important; }

    /* Invoervelden, dropdowns en textareas: full-width en groot genoeg
       zodat iOS geen automatische zoom toepast (16px minimum). Een
       fractie van paginabreedte i.p.v. een vaste pixelbreedte. */
    input[type=text],
    input[type=email],
    input[type=password],
    input[type=number],
    input[type=date],
    input[type=tel],
    input[type=search],
    input[type=url],
    select,
    textarea {
        width: 100%;
        max-width: 100% !important;
        min-width: 0 !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
        box-sizing: border-box;
    }

    /* In de bon-invoer staan kg/prijs-velden in een tabel; daar willen we
       de cel-inputs juist klein houden (kolombreedte volgen). Dat patroon
       herkennen we aan inputs binnen tabellen met klasse .mat of .bon-tabel. */
    .mat input,
    .bon-tabel input,
    table.invoer input {
        width: 100% !important;
        max-width: 110px !important;
        font-size: 15px !important;
        padding: 6px 8px !important;
    }

    /* Code-invoerveld (XXXX-XXXX) blijft centraal en groot. */
    input.code {
        max-width: 100% !important;
        font-size: 20px !important;
        letter-spacing: 4px !important;
    }

    /* Knoppen ruim genoeg om met een vinger te tikken (minimaal 40px hoog
       — bekende Apple/Google richtlijn voor tap-targets). */
    button, .knop, input[type=submit], input[type=button], a.knop {
        min-height: 40px;
        padding: 9px 14px !important;
        font-size: 15px !important;
    }
    /* Kleine inline-knopjes in actie-cellen mogen wel klein blijven. */
    .acties button, .acties .knop, td .knop, td button {
        min-height: 32px;
        padding: 6px 10px !important;
        font-size: 13px !important;
    }

    /* Flex-rijen (b.v. admin-formulieren met meerdere velden naast elkaar)
       op mobiel onder elkaar stapelen. */
    .rij {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .rij .veld {
        flex: 1 1 auto !important;
    }

    /* Knoppenbalk netjes verticaal als de set niet meer past. */
    .knoppen {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .knoppen button, .knoppen .knop {
        width: 100%;
    }

    /* Kaarten op het dashboard (index.php) onder elkaar, vol breed. */
    .dashboard, .kaarten {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* ----------------------------------------------------------------
       Tabellen op smal scherm
       ----------------------------------------------------------------
       Twee aanpakken naast elkaar:

       1) Tabellen met class "data-cards" — elke <td> heeft een
          data-label="..." attribuut. Op telefoon wordt de tabel een
          stapel "kaartjes" (rij = kaartje, cel = "label: waarde"-regel).
          Lekker leesbaar zonder zijwaarts vegen.

       2) Andere tabellen — krijgen een horizontale scrollbar als ze
          niet passen. Geen layout-breuk.
       ---------------------------------------------------------------- */

    /* (1) Kaartjes-modus voor tabellen met class data-cards */
    table.data-cards { display: block; max-width: 100%; }
    table.data-cards thead { display: none; }     /* kolomkoppen overbodig: staan al in data-label */
    table.data-cards tbody { display: block; }
    table.data-cards tr {
        display: block;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        margin-bottom: 10px;
        padding: 6px 4px;
        box-shadow: 0 1px 2px rgba(0,0,0,.03);
    }
    table.data-cards td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 7px 10px;
        border-bottom: 1px solid #f3f4f6;
        white-space: normal;
        text-align: left;
    }
    table.data-cards td:last-child { border-bottom: none; }
    table.data-cards td::before {
        content: attr(data-label);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: #6b7280;
        font-weight: bold;
        flex: 0 0 90px;
        padding-top: 2px;
    }
    table.data-cards td.num { justify-content: space-between; text-align: right; }
    /* Lege cellen (zoals lege privacy) verbergen op telefoon */
    table.data-cards td:empty { display: none; }

    /* (2) Andere tabellen: horizontaal scrollen */
    table:not(.data-cards) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    table:not(.data-cards) td, table:not(.data-cards) th {
        white-space: nowrap;
    }
    table:not(.data-cards) td.oms,
    table:not(.data-cards) td.lang,
    table:not(.data-cards) td.omschrijving {
        white-space: normal;
        min-width: 180px;
    }

    /* Bon-weergave (bon.php): logo + adres op desktop naast elkaar, op
       mobiel onder elkaar. */
    .bon-header, .bon-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    .bon-header .adres, .bon-top .adres {
        text-align: left !important;
    }

    /* "Veld | input"-rijen in de bon: label boven het veld. */
    .bon-veld {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .bon-veld label, .bon-veld .label {
        margin-bottom: 4px;
    }

    /* Filters/zoekbalken die op desktop op één regel staan, op mobiel
       onder elkaar (en de zoekknop full-width). */
    .zoekbalk, .filter-rij {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .zoekbalk input, .zoekbalk button { width: 100% !important; }

    /* De rechte filter-druppels (bv. Boekhouding periode-keuze) wat
       compacter en wrappen netjes. */
    .periode-keuze {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Inlogkaart wat ruimer en zonder horizontale margin. */
    .kaart {
        padding: 16px !important;
    }
}

/* ======================================================================
   Heel smal (≤ 380px): nog wat extra inperken.
   ====================================================================== */
@media (max-width: 380px) {
    body { padding: 10px 8px !important; }
    h1 { font-size: 18px !important; }
    .kaart { padding: 12px !important; }
    /* Tabel-cellen iets minder padding zodat alles meer op het scherm past. */
    table th, table td {
        padding: 6px 6px !important;
        font-size: 13px !important;
    }
}

/* ======================================================================
   Print: tabellen niet scrollen, geen "block"-truc.
   ====================================================================== */
@media print {
    table { display: table !important; overflow: visible !important; white-space: normal !important; }
    table td, table th { white-space: normal !important; }
}