/* =====================================================================
   DVFlow – telefoon (< 768 px). Menu als uitschuifpaneel (MainLayout zet .app--collapsed = dicht), compacte bovenbalk,
   lijsten horizontaal scrollbaar met compacte tekst, grafieken op volle breedte, grote knoppen op login en /ack.
   ===================================================================== */

/* achtergrond achter het open menu: alleen op de telefoon zichtbaar */
.sidebar-backdrop { display: none; }

@media (max-width: 767px) {
    :root { --topbar-h: 52px; }

    /* ---------- menu als uitschuifpaneel */
    .app, .app--collapsed { grid-template-columns: 1fr; }
    .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: min(86vw, var(--sidebar-w)) !important;
        transform: translateX(0); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
    .app--collapsed .sidebar { transform: translateX(-105%); box-shadow: none; }
    /* in het paneel altijd de volledige weergave (ook als de desktop-stand "ingeklapt" was) */
    .app--collapsed .sidebar__brand-text, .app--collapsed .sidebar__search, .app--collapsed .navgroup__title,
    .app--collapsed .navgroup__chev, .app--collapsed .navgroup__items, .app--collapsed .sidebar__footer { display: revert; }
    .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(8, 12, 15, .45); }

    /* ---------- bovenbalk compact */
    .topbar { gap: 6px; padding: 0 8px; }
    .topbar__title { min-width: 0; overflow: hidden; }
    .topbar__h1 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .topbar__subtitle, .topbar__actions { display: none; }
    .branchpick__name { display: none; }
    .branchpick__btn { padding: 6px 8px; }
    .statuspills { margin-right: 2px; gap: 3px; }
    .statuspills .spill { min-width: 22px; height: 20px; padding: 0 5px; font-size: 11px; }
    .statuspills .spill.st-up, .statuspills .spill.st-paused { display: none; } /* op de telefoon alleen de problemen */
    .usermenu__name { display: none; }
    .usermenu__panel { right: 0; left: auto; min-width: 240px; }

    /* ---------- pagina's */
    .page { padding: 12px; }
    .page--full { height: auto; min-height: calc(100vh - var(--topbar-h)); }
    .filterbar { flex-wrap: wrap; gap: 8px; padding: 10px; }
    .filterbar__item, .filterbar__item--grow { flex: 1 1 100%; max-width: none !important; min-width: 0; }
    .filterbar__actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
    .card { padding: 14px; }
    .kv { grid-template-columns: 1fr; }

    /* lijsten (DataList/DxGrid): horizontaal scrollen, compacter, eerste kolom blijft staan */
    .gridcard, .datalist { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .dxbl-grid { font-size: 12.5px; }
    .dxbl-grid .dxbl-grid-table > tbody > tr > td:first-child,
    .dxbl-grid .dxbl-grid-table > thead > tr > th:first-child { position: sticky; left: 0; z-index: 1; background: var(--white); }
    .page--full > .datalist--fill, .page--full > .fill { min-height: 60vh; }

    /* Sensor Tree en tegels */
    .stree { padding: 8px; }
    .stree__tiles { margin-left: 18px; }
    .stree--s .stile { --tile-w: calc(50vw - 40px); }

    /* sensordetail: tabbladen scrollbaar, grafieken op volle breedte */
    .dxbl-tabs .dxbl-tabs-tablist, .dxbl-tabs-tablist { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .dxbl-tabs-tablist::-webkit-scrollbar { display: none; }
    .chart-grid { grid-template-columns: 1fr; }
    .donut-row { grid-template-columns: 1fr; }
    .donut-card { flex-direction: column; align-items: flex-start; }

    /* dialogen bijna schermvullend */
    .dxbl-popup, .dxbl-modal-content { max-width: calc(100vw - 16px) !important; }

    /* ---------- login en bevestigen vanuit de mail: grote, makkelijk te raken knoppen */
    .auth__panel { padding: 24px 20px; }
    .auth__title { font-size: 30px; }
    .auth__submit, .auth .field input { min-height: 48px; font-size: 16px; }
    .ackpage .card { max-width: none !important; padding: 18px !important; }
    .ackpage__actions { flex-direction: column; align-items: stretch !important; }
    .ackpage__actions .dxbl-btn { width: 100%; min-height: 48px; font-size: 16px; justify-content: center; }
    .ackpage__actions a { text-align: center; margin-left: 0 !important; padding: 10px; }
    .ackpage .dxbl-text-edit input { min-height: 44px; font-size: 16px; } /* 16px: iOS zoomt dan niet in */

    /* lege schermen */
    .empty { padding: 28px 12px; }
    .empty__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
    .empty-btn { justify-content: center; min-height: 44px; }

    /* maps: kijken mag, ontwerpen is voor een groot scherm */
    .md { grid-template-columns: 1fr; }
    .md-palette, .md-props { max-height: 40vh; }
}