/* =====================================================================
   Responsive laag voor het hele beheer (telefoon, tablet, klein laptopscherm)
   Wordt in index.php als láátste stylesheet geladen. Veel pagina's hebben hun layout in inline
   styles (vaste rasters, flex zonder afbreken, brede tabellen); die worden hier in één keer
   rechtgezet, zonder elke pagina apart aan te passen.
   De mobiele monteurspagina's (inmeten/montage: .im2, .ms2) hebben hun eigen opmaak en blijven buiten schot.
   Breekpunten: telefoon ≤ 767px · tablet ≤ 1024px · klein laptopscherm 1025–1280px
   ===================================================================== */

/* ---------- Altijd ---------- */
img, video, canvas { max-width: 100%; }
img { height: auto; }
pre { white-space: pre-wrap; word-break: break-word; }
.kt-portlet__head { flex-wrap: wrap; gap: 8px; min-height: 56px; }
.kt-portlet__head-toolbar { flex-wrap: wrap; gap: 6px; }
.dataTables_wrapper { overflow-x: auto; }

/* Scrollvak om elke tabel (js/responsive.js): een te brede tabel scrolt zelf, niet de hele pagina */
.lhb-tabel-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lhb-tabel-scroll > table { margin-bottom: 0; }
.lhb-tabel-scroll { margin-bottom: 1rem; }

/* Invoertabellen (veel regels tegelijk bewerken, één keer opslaan): velden klappen niet in,
   eerste kolom blijft staan bij horizontaal scrollen, Opslaan blijft onderin in beeld */
.lhb-invoertabel input[type=text], .so-tabel input[type=text] { min-width: 150px; }
.lhb-invoertabel input[type=number], .so-tabel input[type=number] { min-width: 70px; }
.lhb-invoertabel select, .so-tabel select.so-klein { min-width: 120px; }
.lhb-vaste-eerste td:first-child, .lhb-vaste-eerste th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 #e8e2d6; }
.lhb-vaste-eerste thead th:first-child { background: #f7f2ea; }
.lhb-opslaanbalk { position: sticky; bottom: 0; z-index: 5; background: rgba(255,255,255,.96); padding: 10px 0; border-top: 1px solid #e8e2d6; text-align: right; }

/* Lange woorden (e-mailadressen, links, referenties) niet buiten de kaart laten lopen */
.kt-portlet__body, .alert, .lhb-tab-pane { overflow-wrap: break-word; }

/* ---------- Klein laptopscherm: menu past net niet ---------- */
@media (min-width: 1025px) and (max-width: 1280px) {
  .kt-header-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link { padding-left: 10px !important; padding-right: 10px !important; }
  .kt-header__brand-logo img { max-height: 30px !important; }
  .kt-container { padding-left: 15px !important; padding-right: 15px !important; }
}

/* ---------- Tablet en kleiner ---------- */
@media (max-width: 1024px) {
  /* Dashboards: tegels in 3 kolommen (eigen regel bestond al vanaf 1100px) */
  .db-grid, .db-ads-kpis { grid-template-columns: repeat(3, 1fr) !important; }

  /* Subkop: titel en knop onder elkaar als het niet past */
  .kt-subheader .kt-container { flex-wrap: wrap; gap: 8px; height: auto !important; padding-top: 10px; padding-bottom: 10px; }
  .kt-subheader__toolbar { margin-left: auto; }

  /* Zelfgemaakte popups (position:fixed): nooit breder of hoger dan het scherm.
     Alleen op position letten: als JavaScript de popup opent, herschrijft de browser het style-attribuut ("display: flex"). */
  [style*="position:fixed"] > div,
  [style*="position: fixed"] > div {
    max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 32px); overflow-y: auto;
  }
}

/* ---------- Telefoon ---------- */
@media (max-width: 767px) {
  body { font-size: 15px; }
  .kt-container { padding-left: 10px !important; padding-right: 10px !important; }
  .kt-portlet { margin-bottom: 14px; }
  .kt-portlet .kt-portlet__body { padding: 14px !important; }
  .kt-portlet .kt-portlet__head { padding: 0 14px !important; }
  .kt-subheader__title { font-size: 15px !important; }

  /* Invoervelden 16px: anders zoomt iOS in bij het aantikken */
  input:not([type=checkbox]):not([type=radio]), select, textarea, .form-control { font-size: 16px !important; }

  /* Knoppen en links groot genoeg om met een duim te raken */
  .btn { min-height: 38px; }
  .btn-sm { min-height: 34px; }

  /* Formulieren met vaste kolommen (col-4 label + col-8 veld): onder elkaar */
  .row > .col-1, .row > .col-2, .row > .col-3, .row > .col-4, .row > .col-5, .row > .col-6,
  .row > .col-7, .row > .col-8, .row > .col-9, .row > .col-10, .row > .col-11 {
    flex: 0 0 100%; max-width: 100%;
  }
  .form-group.row > .col-form-label { text-align: left !important; padding-bottom: 4px; }
  .offset-1, .offset-2, .offset-3, .offset-4, [class*="offset-md-"] { margin-left: 0 !important; }
  .col-12[style*="padding-left:16.66%"] { padding-left: 15px !important; }   /* extra velden bij onderdelen bestellen */

  /* Inline rasters met vaste kolommen: één kolom (tegels: twee) */
  :not(.ms2 *):not(.im2 *)[style*="grid-template-columns:1fr 1fr"],
  :not(.ms2 *):not(.im2 *)[style*="grid-template-columns: 1fr 1fr"],
  :not(.ms2 *):not(.im2 *)[style*="grid-template-columns:repeat(2,1fr)"],
  :not(.ms2 *):not(.im2 *)[style*="grid-template-columns:repeat(3,1fr)"],
  :not(.ms2 *):not(.im2 *)[style*="grid-template-columns:2fr 1fr"],
  :not(.ms2 *):not(.im2 *)[style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }
  .db-grid, .db-ads-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .ac-row { grid-template-columns: 1fr !important; row-gap: 4px; }

  /* Inline flex-rijen zonder afbreken: laten afbreken in plaats van uit beeld lopen */
  :not(.ms2 *):not(.im2 *)[style*="display:flex"]:not([style*="flex-wrap"]):not([style*="flex-direction:column"]),
  :not(.ms2 *):not(.im2 *)[style*="display: flex"]:not([style*="flex-wrap"]):not([style*="flex-direction: column"]) {
    flex-wrap: wrap;
  }

  /* Tabbladen (order, voorraad, instellingen): één rij die horizontaal scrolt in plaats van drie rijen */
  .lhb-tabs, .nav-tabs { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .lhb-tabs::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar { display: none; }
  .lhb-tab-btn, .nav-tabs .nav-item, .nav-tabs .nav-link { flex: 0 0 auto; white-space: nowrap; }

  /* Bootstrap-modals op volle breedte */
  .modal-dialog { margin: 10px; max-width: none; }

  /* Paginering niet buiten beeld */
  .paginanummers2 { float: none; height: auto; display: flex; flex-wrap: wrap; gap: 4px; }
  .paginanummers2 a { margin-right: 0; }
}

/* ---------- Heel smalle telefoons ---------- */
@media (max-width: 400px) {
  .db-grid, .db-ads-kpis { grid-template-columns: 1fr !important; }
  .btn { white-space: normal; }
}