/* ============================================================================
   Mobiele aanpassingen — materieel monitor
   ----------------------------------------------------------------------------
   Deze stylesheet wordt ná app.css geladen en staat volledig in media queries
   voor kleine schermen. Op de pc verandert er dus niets: elke regel hieronder
   is uitgeschakeld vanaf 1024px breed.

   Waarom een los bestand en geen Tailwind-klassen? De assets van deze app
   worden hier niet gebouwd (geen werkende npm-build), dus een nieuwe
   Tailwind-klasse zou in de gecompileerde CSS ontbreken en niets doen. Plain
   CSS werkt altijd.

   Haakjes die in de Blade-bestanden zijn toegevoegd:
     .mm-vol-mobiel   — kolom die op een deel van de breedte staat, mag mobiel
                        de volle breedte pakken
     .mm-filterbalk   — rij met filters die mobiel onder elkaar komt
     .mm-spacer       — opvulling die alleen op de pc zin heeft
     .mm-1kol         — raster dat mobiel naar één kolom gaat
     .mm-tabel-scroll — tabel die mobiel zijwaarts scrollt met compacte cellen
     .mm-tegelvlak /
     .mm-tegels     — tegelpagina's (home en beheer)
     .mm-materieel-tabel — materieellijst naast de kaart
   ========================================================================== */


/* ============================================================================
   1. Tot 1024px — telefoon én tablet
   ========================================================================== */
@media (max-width: 1023.98px) {

    /* Een enkel te breed element mag nooit de hele pagina laten schuiven. */
    body {
        overflow-x: hidden;
    }

    /* Kolommen die op de pc een derde/kwart van het scherm pakken, staan
       mobiel onder elkaar en mogen dus de volle breedte hebben. */
    .mm-vol-mobiel {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Opvulling die de knoppen op de pc uit elkaar duwt; mobiel weggelaten. */
    .mm-spacer {
        display: none !important;
    }

    /* iOS zoomt in zodra een veld kleiner dan 16px tekst heeft. Dat springen
       van het beeld is precies wat het invullen op een telefoon vervelend
       maakt, dus zetten we alle invoervelden op 16px. */
    input:not([type="checkbox"]):not([type="radio"]):not(.highcharts-range-selector),
    select,
    textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    /* De datumvelden van de grafiek zelf worden door Highcharts ingemeten;
       die laten we met rust. */
    .highcharts-container input,
    .highcharts-container select {
        font-size: inherit !important;
    }

    /* Aanraakvriendelijke bediening: een vinger is grover dan een muis. */
    button,
    [role="button"],
    input[type="submit"],
    input[type="checkbox"],
    input[type="radio"] {
        touch-action: manipulation;
    }

    input[type="checkbox"],
    input[type="radio"] {
        min-width: 18px;
        min-height: 18px;
    }

    /* Tabellen: liever de tabel zelf laten schuiven dan de hele pagina. */
    .mm-tabel-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* De zwevende vensters (Y-assen configuratie en seriedetail) staan met een
       vaste breedte van 420/900px op een vaste plek — buiten beeld dus. Mobiel
       worden het schermvullende panelen. Bewust géén display-regel: die staat
       op .hidden en moet blijven werken. */
    #yAxisConfigWindow,
    #seriesDetailWindow {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 8px;
        overflow-y: auto;
    }

    #yAxisConfigWindow > div,
    #seriesDetailWindow > div {
        max-height: none !important;
        min-height: 100%;
    }

    /* Een kaart van 1000px hoog vult op een tablet het hele scherm en meer. */
    #map {
        height: 70vh !important;
        min-height: 420px;
    }

    /* Slepen werkt alleen met de muis; de handjes-cursor is hier misleidend. */
    #yAxisHeader,
    #seriesDetailHeader {
        cursor: default !important;
    }
}


/* ============================================================================
   2. Tot 768px — telefoon en kleine tablet
   ========================================================================== */
@media (max-width: 767.98px) {

    /* Rasters die vast op 2 of 3 kolommen staan, worden één kolom. */
    .mm-1kol {
        grid-template-columns: 1fr !important;
    }

    /* Filterrij onder elkaar, elk veld over de volle breedte. */
    .mm-filterbalk {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }

    .mm-filterbalk > *,
    .mm-filterbalk button {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* De Filter-knop staat op de pc met een marge uitgelijnd op de velden. */
    .mm-filterbalk #filterButton {
        margin-top: 0 !important;
    }

    /* Label + veld naast elkaar (GIS-filter): het veld vult de rest van de regel. */
    .mm-filterbalk .date-input,
    .mm-filterbalk input,
    .mm-filterbalk select {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Kopregel van de pagina wat compacter. */
    header .py-3 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}


/* ============================================================================
   3. Tot 640px — telefoon
   ========================================================================== */
@media (max-width: 639.98px) {

    /* ---- Home en de beheer-tegelpagina's ---- */
    /* De tegels stonden 6rem onder de menubalk; dat is een half telefoonscherm. */
    .mm-tegelvlak {
        margin-top: 1.5rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .mm-tegels {
        gap: 1rem !important;
    }

    .mm-tegels .name {
        font-size: 0.8rem;
        line-height: 1.1rem;
        text-align: center;
    }

    /* ---- Sensor dashboard ---- */
    /* 600px grafiek op een telefoon is een scherm vol; 380px leest prettiger
       en houdt de legenda eronder in beeld. */
    #sensorChart_be_sn_ko {
        height: 380px !important;
        padding: 0.5rem !important;
    }

    /* Geen vaste hoogte: die zet Highcharts zelf via zijn responsive-regel. */
    #sensorChart_statussen {
        padding: 0.5rem !important;
    }

    #customLegendContainer_be_sn_ko {
        max-height: 240px !important;
    }

    #customLegendContainer_statussen {
        max-height: 180px !important;
    }

    /* De kaarten met de totalen: minder lucht, kleinere cijfers. */
    .glass-card {
        padding: 1rem !important;
        min-height: 0 !important;
    }

    .glass-card .text-4xl {
        font-size: 1.75rem;
        line-height: 2rem;
    }

    /* ---- GIS dashboard ---- */
    /* Een kaart van 1000px hoog duwt alles onder beeld. Tweederde scherm laat
       de kaart zien én de tabel eronder bereikbaar. */
    #map {
        height: 65vh !important;
        min-height: 320px;
    }

    /* Overlays op de kaart compacter, anders bedekken ze de halve kaart. */
    #statusFilter {
        padding: 0.4rem !important;
        font-size: 0.7rem;
        max-width: 62%;
        max-height: 45%;
        overflow-y: auto;
    }

    #statusFilter .status-indicator {
        width: 8px !important;
        height: 8px !important;
    }

    #layerSwitcherControl {
        bottom: 8px !important;
        left: 8px !important;
        right: 8px !important;
        padding: 0.35rem !important;
    }

    #layerSelect {
        width: 100%;
    }

    /* Statistiekkaarten naast elkaar in plaats van een lange kolom. */
    .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem !important;
        margin-left: 0 !important;
        width: 100%;
    }

    .stat-card {
        min-width: 0 !important;
        padding: 0.6rem !important;
    }

    .stat-value {
        font-size: 1rem !important;
    }

    .main-filter-container {
        padding: 0.75rem !important;
        gap: 0.6rem !important;
    }

    /* Zijpanelen hebben een vaste hoogte van ~490px; mobiel meegroeien. */
    .side-panel {
        height: auto !important;
        max-height: 60vh;
    }

    /* De materieeltabel naast de kaart: minder celruimte, kleinere tekst. */
    .mm-materieel-tabel {
        padding: 0.75rem !important;
        height: auto !important;
        max-height: 55vh;
    }

    .mm-materieel-tabel th,
    .mm-materieel-tabel td {
        padding: 0.4rem !important;
        font-size: 0.8rem !important;
    }

    /* ---- Tabellen algemeen ---- */
    /* Ruime cellen (px-6 py-4) passen niet op een telefoonscherm. */
    .mm-tabel-scroll th,
    .mm-tabel-scroll td {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
        font-size: 0.8rem;
    }

    /* ---- Modals ---- */
    /* Vensters mogen het scherm vullen, maar niet erbuiten vallen. */
    [role="dialog"] .rounded-2xl,
    [role="dialog"] .rounded-xl {
        max-height: 92vh;
        overflow-y: auto;
    }
}