/*
 * De portal op een klein aanraakscherm.
 *
 * Het thema onder deze portal (SB Admin 2, vastgeplakt achter bootstrap.min.css)
 * gaat uit van een muis en een breed scherm: het menu is een strook die altijd
 * ruimte inneemt, de tabellen staan er kaal in en een knop is zo groot als zijn
 * tekst. Dit bestand zet dat om naar iets wat met een duim te bedienen is,
 * zonder aan het thema zelf te komen - dat is een minified build die we niet
 * onderhouden.
 *
 * Twee soorten grenzen, met opzet verschillend:
 *
 *   - "compact" (max-width: 1024px OF staand) gaat over de *navigatie*. Diezelfde
 *     grens gebruikt de portal al voor het dichtklappen van het menu
 *     (global_scripts.html) en voor het logo (header.html), dus hij blijft hier
 *     gelijk. Een staande tablet hoort het menu ook als uitschuifpaneel te
 *     krijgen.
 *   - gewone breedtegrenzen (767.98px / 575.98px) gaan over de *inhoud*: tabellen,
 *     lettergroottes, aanraakvlakken. Die mogen niet aan de stand van het scherm
 *     hangen - een breed liggend scherm in portretstand bestaat niet, maar een
 *     breed staand scherm wel.
 */

/* ------------------------------------------------------------------ *
 * 1. Het menu als uitschuifpaneel
 *
 * Het thema laat de zijbalk altijd ruimte innemen: 6.5rem met pictogrammen en
 * tekst van 0.65rem, of 0 als hij is dichtgeklapt. Op een telefoon van 390px is
 * die 6.5rem een kwart van het scherm en die 0.65rem niet te lezen, en tussen
 * 768px en 1024px was hij helemaal niet meer open te krijgen: het knopje stond
 * op `d-md-none` terwijl het script hem daar al dicht deed.
 *
 * Daarom schuift hij hier over de inhoud heen, op volle leesbare breedte, met
 * een donkere laag erachter. `.toggled` van het thema doet in deze stand niets
 * meer - `body.sidebar-open` bepaalt of hij zichtbaar is.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px), (orientation: portrait) {
    /* Het knopje dat het paneel opent. Het thema verstopt het boven de md-grens
       (`d-md-none`), maar het dichtklappen begint al bij 1024px */
    #sidebarToggleTop.d-md-none {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* `.toggled` erbij, anders wint de `width: 0 !important` van het thema */
    #wrapper .sidebar,
    #wrapper .sidebar.toggled {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 16rem !important;
        max-width: 84vw;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 1045;
        transform: translateX(-100%);
        transition: transform 0.2s ease-out;
        box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.35);
        /* De inhoud mag er niet onderuit vallen zodra hij smaller wordt dan
           16rem (`max-width: 84vw` op een klein toestel) */
        display: block;
    }

    body.sidebar-open #wrapper .sidebar,
    body.sidebar-open #wrapper .sidebar.toggled {
        transform: translateX(0);
    }

    /* Zolang hij eroverheen schuift heeft de inhoud de volle breedte */
    #wrapper .sidebar + #content-wrapper {
        width: 100%;
        min-width: 0;
    }

    /* De regels zelf: leesbaar en groot genoeg om te raken. Het thema zet ze op
       6.5rem breed, gecentreerd, 0.65rem - dat is een pictogrammenstrook, geen
       menu */
    #wrapper .sidebar .nav-item .nav-link {
        display: flex !important;
        align-items: center;
        width: auto !important;
        text-align: left;
        font-size: 1rem;
        padding: 0.85rem 1.25rem;
        min-height: 3rem;
    }

    #wrapper .sidebar .nav-item .nav-link span {
        display: inline !important;
    }

    #wrapper .sidebar .nav-item .nav-link i {
        display: inline-block;
        font-size: 1.1rem;
        width: 1.75rem;
        margin-right: 0.5rem;
        flex: 0 0 auto;
        text-align: center;
    }

    /* Het getal achter een menuregel hoort rechts te staan en niet direct achter
       de tekst aan te plakken */
    #wrapper .sidebar .nav-item .nav-link .badge {
        margin-left: auto !important;
    }

    /* Het logo van de reseller staat bovenin het paneel */
    #wrapper .sidebar > .container-fluid > img {
        max-height: 5rem;
    }

    /* Het kruisje rechtsboven in het paneel. De knop waarmee het openging ligt
       eronder, dus zonder dit is een tik náást het paneel de enige weg terug */
    #wrapper .sidebar .sidebar-close {
        display: flex !important;
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        width: 2.75rem;
        height: 2.75rem;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: var(--bs-emphasis-color);
        z-index: 1;
    }

    /* De donkere laag erachter. Hij zit in de DOM zodra global_scripts.html
       geladen is, en vangt de tik waarmee het paneel weer dichtgaat */
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease-out, visibility 0.2s;
    }

    body.sidebar-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    /* Achtergrond niet meescrollen zolang het paneel openstaat */
    body.sidebar-open {
        overflow: hidden;
    }
}

/* Boven de compacte grens is er geen paneel en dus ook geen laag */
@media (min-width: 1025px) and (orientation: landscape) {
    .sidebar-backdrop {
        display: none;
    }
}

/* ------------------------------------------------------------------ *
 * 2. Niets mag breder zijn dan het scherm
 *
 * `body { overflow-x: clip }` in header.html geeft die waarde door aan het
 * venster zelf (zo werkt overflow op <body>), dus wat te breed is wordt niet
 * afkapbaar maar onbereikbaar: het staat er wel, maar er valt niet naartoe te
 * scrollen. Op een telefoon rekt zo'n element bovendien het hele opmaakvenster
 * op, waardoor *elke* pagina naar links verschuift. Wat te breed is moet dus
 * zijn eigen schuifbalk krijgen of smaller worden.
 * ------------------------------------------------------------------ */

/* Het lint van de ontwikkelomgeving stak een halve lintbreedte buiten de
   rechterbovenhoek uit; nu zit het in een vakje dat zelf afkapt.
   Het hangt bovendien linksonder in plaats van rechtsboven: rechtsboven staan
   de bel en het profielmenu, en op een telefoon lag het lint daar bovenop.
   Linksonder is de enige hoek die leeg blijft - de knop voor het thema staat
   rechtsonder. `fixed`, zodat duidelijk blijft waar je zit ook als de pagina
   lang is */
.dev-ribbon {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 9rem;
    height: 9rem;
    overflow: hidden;
    pointer-events: none;
    z-index: 1030;
}

.dev-ribbon > span {
    position: absolute;
    bottom: 1.9rem;
    left: -3.2rem;
    width: 12rem;
    transform: rotate(45deg);
    background: #eb8c00;
    color: #fff;
    text-align: center;
    padding: 0.25rem 0;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0.9;
    box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.25);
}

@media (max-width: 767.98px) {
    .dev-ribbon {
        width: 7rem;
        height: 7rem;
    }

    .dev-ribbon > span {
        bottom: 1.4rem;
        left: -2.6rem;
        width: 10rem;
        font-size: 0.7rem;
        padding: 0.15rem 0;
    }
}

/* ------------------------------------------------------------------ *
 * 3. Tabellen
 *
 * Een tabel met meer dan twee kolommen past niet op 390px. `.table-responsive`
 * geeft hem een eigen horizontale schuifbalk; dat staat in de sjablonen zelf.
 * Hier gaat het om wat daarna nog knelt.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* De randen van een kaart eten op een telefoon een derde van de breedte op
       voordat de inhoud begint */
    .card-body {
        padding: 1rem 0.75rem;
    }

    .card-header {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Een tabel in een kaart mag tot aan de rand van die kaart lopen, zodat de
       schuifbalk niet nog eens 1.5rem inlevert */
    .card-body > .table-responsive {
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Een kolom met een label ("Serienummer", "Softwareversie") brak af op elke
       lettergreep zodra de tabel kromp. Liever iets breder en niet afgebroken;
       schuiven doet `.table-responsive` */
    .table-responsive > .table > :not(caption) > * > * {
        padding: 0.55rem 0.5rem;
    }

    .table-responsive > .table th,
    .table-responsive > .table td {
        white-space: nowrap;
    }

    /* ... behalve waar het juist om lopende tekst gaat */
    .table-responsive > .table td.text-wrap,
    .table-responsive > .table th.text-wrap,
    .table-responsive > .table td[data-wrap],
    .table-responsive > .table .text-wrap {
        white-space: normal;
    }

    /* Tabellen waarin je invult (de web proxy doelen, de modbus registers, de
       firmware) hebben een `.table` en dus `width: 100%`: de kolommen persen zich
       dan in de schermbreedte en er blijft een veld van drie tekens over waar
       "192.168.1.0/24" in moet. Met een ondergrens per veld wordt de tabel breder
       dan het scherm en schuift `.table-responsive` hem opzij - dat is wat je
       wilt, want invullen kan alleen in een leesbaar veld */
    .table-responsive .table .form-control,
    .table-responsive .table .form-select {
        min-width: 7rem;
    }

    .table-responsive .table .input-group .form-control {
        min-width: 4rem;
    }
}

/* De naam/waarde tabellen op de apparaatpagina zijn geen tabel maar een lijstje;
   twee kolommen naast elkaar passen prima, mits de labelkolom niet meegroeit met
   de langste waarde */
@media (max-width: 767.98px) {
    .table-keyvalue > tbody > tr > td:first-child {
        width: 45%;
        white-space: normal;
        color: var(--bs-secondary-color);
    }

    .table-keyvalue > tbody > tr > td:last-child {
        white-space: normal;
        word-break: break-word;
    }
}

/* ------------------------------------------------------------------ *
 * 4. bootstrap-table
 *
 * De knoppenbalk boven zo'n tabel is een `float: right` blok van vaste breedte.
 * Paste hij niet, dan schoof hij het scherm uit naar *links* - de knoppen
 * "Reseller wijzigen" en "Kolommen" waren daar niet meer te raken. Hij mag hier
 * gewoon afbreken over meerdere regels.
 * ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .fixed-table-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    .fixed-table-toolbar .bs-bars,
    .fixed-table-toolbar .columns,
    .fixed-table-toolbar .search {
        float: none !important;
        margin: 0 !important;
        max-width: 100%;
    }

    .fixed-table-toolbar .search {
        width: 100%;
        order: -1;
    }

    .fixed-table-toolbar .search input {
        width: 100% !important;
    }

    /* De knoppen staan in een `.btn-group`: die plakt ze tegen elkaar met een
       negatieve marge en ronde hoeken alleen aan de uiteinden. Zodra ze over
       meerdere regels afbreken klopt daar niets meer van, dus hier worden het
       losse knoppen */
    .fixed-table-toolbar .columns.btn-group,
    .fixed-table-toolbar .columns .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .fixed-table-toolbar .columns .btn i {
        margin-right: 0.35rem;
    }

    .fixed-table-toolbar .columns .btn {
        padding: 0.5rem 0.75rem;
        min-height: 2.75rem;
        border-radius: var(--bs-border-radius) !important;
        margin-left: 0 !important;
        flex: 1 1 auto;
    }
}

@media (max-width: 767.98px) {
    /* De kaartweergave (`data-mobile-responsive`): elke regel is een `.card-view`
       met een label en een waarde naast elkaar. bootstrap-table geeft het label
       `min-width: 30%`, en dat is op 390px net te weinig - "Serienummer" brak af
       tot "Serienumm / er". Een vaste maat in rem hangt aan de tekst en niet aan
       de schermbreedte */
    .bootstrap-table .fixed-table-container .table tbody tr .card-view {
        padding: 0.15rem 0;
    }

    .bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-title {
        flex: 0 0 8.5rem;
        min-width: 8.5rem;
        padding-right: 0.5rem;
        overflow-wrap: break-word;
    }

    /* bootstrap-table zet de waarde op `width: 100% !important`; samen met een
       label ernaast wordt de regel dan breder dan de kaart en schuift een lang
       e-mailadres onder de rand door. Hij moet juist de rest opvullen en zelf
       mogen afbreken */
    .bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-value {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* Een verborgen kolom levert een lege regel op; die hoort geen ruimte te
       kosten */
    .bootstrap-table .fixed-table-container .table tbody tr .card-view:empty {
        display: none;
    }

    /* In de kaartweergave is elke regel één cel over de volle breedte, maar de
       tabel meet zich nog steeds aan zijn (verborgen) kolomkoppen af en werd zo
       breder dan de kaart. `table-layout: fixed` laat hem de opgegeven breedte
       aanhouden in plaats van die van zijn inhoud */
    .bootstrap-table .fixed-table-container.has-card-view .table {
        table-layout: fixed;
        width: 100%;
    }

    /* De paginakiezer onder een tabel */
    .fixed-table-pagination {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .fixed-table-pagination > .pull-left,
    .fixed-table-pagination > .pull-right,
    .fixed-table-pagination > div {
        float: none !important;
        width: 100%;
        text-align: left;
    }

    .fixed-table-pagination .pagination {
        flex-wrap: wrap;
    }

    .fixed-table-pagination .pagination .page-link {
        min-width: 2.5rem;
        min-height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ *
 * 5. Tabbladen
 *
 * De apparaatpagina heeft er acht. Onder elkaar gestapeld duwen ze de inhoud een
 * halve schermhoogte naar beneden; als één rij die opzij schuift blijven ze
 * herkenbaar en kost het niets.
 * ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .nav.nav-scroll-sm {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .nav.nav-scroll-sm .nav-item {
        flex: 0 0 auto;
    }

    .nav.nav-scroll-sm .nav-link {
        white-space: nowrap;
        min-height: 2.75rem;
    }
}

/* ------------------------------------------------------------------ *
 * 6. Aanraakvlakken en formulieren
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* Een knop van 24px hoog is met een duim niet te raken. 2.75rem (44px) is
       wat zowel Apple als Google als ondergrens aanhouden */
    .btn:not(.btn-sm):not(.btn-close):not(.page-link) {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Iets kleiner dan 2.75rem, want `btn-sm` staat vooral in tabelrijen; groot
       genoeg om te raken blijft het wel */
    .btn-sm {
        min-height: 2.5rem;
    }

    /* Safari op iOS zoomt in zodra een invoerveld kleiner is dan 16px. Bootstrap
       zelf zit op 1rem, maar `.form-select-sm`/`.form-control-sm` niet */
    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm,
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 1rem;
    }

    .form-control:not(.form-control-sm),
    .form-select:not(.form-select-sm) {
        min-height: 2.75rem;
    }

    /* Een vinkje van 1em is te klein om te raken. Een schuifje (`form-switch`)
       heeft zijn eigen maten - die alleen even mee laten groeien, niet
       overschrijven, anders wordt het een uitgerekt blokje */
    .form-check-input {
        width: 1.35rem;
        height: 1.35rem;
        margin-top: 0.1rem;
    }

    .form-switch .form-check-input {
        width: 2.4rem;
        height: 1.35rem;
    }

    .form-check:not(.form-switch) {
        padding-left: 2rem;
        min-height: 2rem;
    }

    .form-check:not(.form-switch) .form-check-input {
        margin-left: -2rem;
    }

    /* Knoppen die in het sjabloon naast elkaar staan (`d-inline-flex gap-1`)
       liepen het scherm uit; ze mogen afbreken en de volle breedte pakken.
       Het omhulsel om een grafiek draagt dezelfde klassen maar is geen rij
       knoppen - daar zou afbreken de laadmelding onder de grafiek schuiven */
    .d-inline-flex.gap-1:not(.chart-container) {
        flex-wrap: wrap;
    }

    /* Een rij knoppen onder een formulier of in een kaart */
    .btn-toolbar,
    .btn-group-responsive {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* De kop van een kaart met een titel links en gereedschap rechts
       (`d-flex justify-content-between`): zonder afbreken duwt het zoekvakje of
       de knop de titel het scherm uit */
    .card-header.d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-start !important;
    }

    .card-header.d-flex > .d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
    }

    /* Een zoekvakje in zo'n kop staat op `w-auto` en wordt daardoor een streepje
       breed zodra de rij afbreekt */
    .card-header .form-control.w-auto,
    .card-header .form-select.w-auto {
        width: auto !important;
        flex: 1 1 10rem;
        min-width: 0;
    }
}

/* ------------------------------------------------------------------ *
 * 7. De menubalk bovenin
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* Het thema zet de balk op 4.375rem met `padding: 0 .75rem` per regel. Op een
       telefoon staan daar alleen nog het menuknopje, de bel en het profiel in */
    .topbar .nav-item .nav-link {
        padding: 0 0.6rem;
    }

    /* De meldingen: het thema geeft de lijst 20rem, wat op een telefoon breder is
       dan het scherm. Op een wat groter scherm past die 20rem prima en hoort hij
       niet uitgerekt te worden - vandaar `min()` en niet de schermbreedte */
    #notifications .dropdown-menu {
        width: min(20rem, calc(100vw - 1rem)) !important;
        max-width: calc(100vw - 1rem);
    }

    /* De banners onder de balk (meekijken, adres niet bevestigd) hebben een knop
       die naast de tekst stond en daar niet paste */
    .alert .btn {
        white-space: normal;
    }
}

/* ------------------------------------------------------------------ *
 * 8. Kaarten (Leaflet)
 *
 * Vaste hoogtes uit de sjablonen (800px op het overzicht, 300px op een apparaat)
 * vullen een telefoonscherm helemaal.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    #map,
    #contact_map,
    #areaMap {
        height: 17rem !important;
    }
}

/* ------------------------------------------------------------------ *
 * 9. Losse hoeken
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* De knop om van thema te wisselen hangt rechtsonder over de inhoud heen.
       Op een telefoon dekt hij daar de laatste regel van een tabel af */
    .bd-mode-toggle {
        margin-bottom: 0.5rem !important;
        margin-right: 0.5rem !important;
    }

    .bd-mode-toggle .btn {
        padding: 0.35rem 0.5rem;
        opacity: 0.9;
    }

    /* Een lange hostnaam of e-mailadres als kop rekte de pagina op */
    h1, h2, h3, h4, h5 {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    h3 {
        font-size: 1.4rem;
    }

    /* Vensters (modals) mogen de volle breedte gebruiken */
    .modal-dialog {
        margin: 0.5rem;
    }

    .modal-footer {
        flex-wrap: wrap;
    }

    .modal-footer > .btn {
        flex: 1 1 auto;
    }

    /* Definitielijsten / naast elkaar gezette labels in formulieren */
    .row > [class*="col-"] > .form-label {
        margin-bottom: 0.25rem;
    }
}

/* ------------------------------------------------------------------ *
 * 10. Formulierkolommen zonder grens
 *
 * De sjablonen zetten velden naast elkaar met een kale `<div class="col">`. Dat
 * is `flex: 1 0 0%`: ze blijven naast elkaar staan, hoe smal het scherm ook
 * wordt. Op het instellingen-tabblad van een apparaat staan er vijf in één rij -
 * op 390px is dat ruim 60px per veld, met een label van drie woorden erboven.
 *
 * Onder de sm-grens gaan ze daarom onder elkaar. Een rij met maar één `.col`
 * verandert er niets van, want die was al zo breed.
 * ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .row > .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}