/* ============================================================
   FlowVisionOne — de backoffice op een telefoon

   Het uitgangspunt: je hoeft nooit naar links of rechts te vegen. Alles past
   in de breedte van het scherm, en de tabellen worden kaartjes onder elkaar in
   plaats van een brede tabel die je moet wegschuiven.

   De grote boosdoener zat in de flexbox: body is een flex-rij met de zijbalk
   en .main ernaast, en een flex-item krimpt standaard niet verder dan zijn
   inhoud (min-width:auto). Daardoor werd .main net zo breed als de breedste
   tabel en schoof de hele pagina mee.

   De labels boven de kolommen komen bij het stapelen voor de waarde te staan;
   die zet fvo-mobiel.js als data-label op elke cel.
   ============================================================ */

/* --- tablet en kleiner ---------------------------------------------- */
@media (max-width: 900px) {
  /* Hierdoor mag .main wél smaller worden dan zijn inhoud. */
  .main { min-width: 0; }
  .content, .view, .card, .table-wrap { min-width: 0; max-width: 100%; }
}

/* --- telefoon -------------------------------------------------------- */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }

  /* Onder 16px zoomt iOS bij het aantikken van een veld in, en dán sta je
     ineens scheef op de pagina. */
  .form-input, input, select, textarea { font-size: 16px; }

  .content { padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); }
  .card { border-radius: 12px; }
  .card-body { padding: 12px 14px; }

  /* Kengetallen: twee naast elkaar in plaats van vier geperst. Sommige
     schermen zetten het aantal kolommen in een style-attribuut, dus die moeten
     we overschrijven; min-width:0 is het vangnet voor de rest. */
  .kpi-card { min-width: 0; }
  .kpi-label, .kpi-value { overflow-wrap: anywhere; }
  .kpi-grid,
  .view div[style*="grid-template-columns"]:has(> .kpi-card) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Kop van een kaart: titel op een eigen regel, zoekveld en filter daaronder
     over de volle breedte in plaats van naast elkaar geperst. */
  .card-header { flex-wrap: wrap; gap: 8px; align-items: stretch; }
  .card-header > * { min-width: 0; }
  .card-header .card-title { flex: 1 1 100%; }
  .card-header > div { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
  .card-header input[type="text"],
  .card-header input[type="search"],
  .card-header .search-input,
  .card-header select,
  .card-header .form-input { width: auto !important; max-width: none; flex: 1 1 150px; min-width: 0; }

  /* Knoppen zijn met een duim te raken. */
  .btn { min-height: 38px; }
  .btn-sm { min-height: 34px; }

  /* ---- tabellen worden kaartjes ----
     fvo-mobiel.js hangt .fvo-stapel aan de lijsttabellen (en .fvo-stapel-houder
     aan het blok eromheen) en zet op elke cel het kolomlabel. Zonder dat script
     blijft alles een gewone tabel — dan schuif je, maar je mist niets. */
  .fvo-stapel-houder { overflow-x: visible !important; }
  .fvo-stapel,
  .fvo-stapel tbody,
  .fvo-stapel tr,
  .fvo-stapel td { display: block; width: auto; }
  .fvo-stapel thead { display: none; }

  .fvo-stapel tr {
    border: 0.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--surface, #fff);
  }
  .fvo-stapel tr:last-child { margin-bottom: 0; }
  .fvo-stapel tr.clickable:active { background: var(--accent-bg, rgba(30, 41, 57, .06)); }

  .fvo-stapel td {
    border: 0 !important;
    padding: 3px 0 !important;
    text-align: left !important;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
  }
  /* Het kolomlabel ervoor, zodat je weet wat je ziet. */
  .fvo-stapel td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 500;
    text-transform: none;
  }
  .fvo-stapel td[data-label=""]::before { content: none; }
  .fvo-stapel td > * { min-width: 0; }

  /* De eerste cel is de kop van het kaartje. */
  .fvo-stapel td:first-child {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
  }
  .fvo-stapel td:first-child::before { content: none; }

  /* Een cel met alleen knoppen hoort onderaan het kaartje, over de volle
     breedte — niet als label-met-waarde. */
  .fvo-stapel td[data-knoppen] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    margin-top: 8px;
    padding-top: 8px !important;
    border-top: 0.5px solid var(--border) !important;
  }
  .fvo-stapel td[data-knoppen]::before { content: none; }
  .fvo-stapel td[data-knoppen] .btn { flex: 0 1 auto; min-width: 42px; }

  /* Lege cellen laten we weg, anders staat er een rij labels zonder inhoud. */
  .fvo-stapel td[data-leeg] { display: none; }

  /* ---- vensters ---- */
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 14px 14px 0 0;
    margin: 0;
  }
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal-body { padding: 14px; }
  .modal-footer { flex-wrap: wrap; gap: 8px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .modal-footer .btn { flex: 1 1 auto; }

  /* ---- het tekenscherm voor de klant (fvo-bezorging.js) ----
     Op een telefoon een blad over de volle hoogte: het tekenvlak zo groot
     mogelijk, en Opslaan altijd onderin in beeld — je staat tenslotte bij de
     klant op de stoep. */
  #fvo-teken-laag { padding: 0 !important; align-items: stretch !important; }
  #fvo-teken-kaart {
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }
  #fvo-teken-inhoud { flex: 1 1 auto; overflow: auto; }
  #fvo-teken-canvas { height: 44vh !important; }
  #fvo-teken-voet {
    flex: 0 0 auto;
    border-top: 0.5px solid var(--border);
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  #fvo-teken-voet .btn { flex: 1 1 auto; justify-content: center; }

  /* ---- logistiek: de bezorgorders ---- */
  .fvo-log-rij { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
  .fvo-log-knoppen {
    align-items: stretch !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .fvo-log-knoppen .btn { flex: 1 1 calc(50% - 4px); justify-content: center; text-align: center; }
  /* De bezorging afmelden is waar je voor kwam: die staat eronder, volle breedte. */
  .fvo-log-knoppen .btn-primary { flex: 1 1 100%; }
}

/* Heel smalle toestellen. */
@media (max-width: 380px) {
  .content { padding-left: 10px; padding-right: 10px; }
  .kpi-value { font-size: 18px; }
}