/*------------------------------------------------------------------
[Child Stylesheet]

Project:        Fret - Mobile
Version:        0.1
Last change:    2019-07-09
Customer:       BIJ12
Assigned to:    Pieter de Vries / NIO Communicatie
------------------------------------------------------------------*/

/* De margin-top van 51px op de titel is vervallen: logo en titel staan nu in een
   flexregel en worden verticaal gecentreerd. Zie de kop van de signin-sectie in
   app.css. */

@media only screen and (max-width: 1199px) {
/*    body.portal .sub-menu ul {
        list-style: none;
    }

    body.portal .sub-menu li {
        display: block;
    }

    body.portal .sub-menu li:first-child a {
        border-bottom-left-radius: 0px;
    }

    body.portal .sub-menu li a {
        padding: 10px 107.8px 10px 75px;
        border-right: 0px;
        font-weight: bold;
        margin-left: 0px!important;
        cursor: pointer;
        color: #ffffff;
        font-size: 14px;
        line-height: 38px;
    }

    body.portal .sub-menu {
        padding: 0px 0 0px 0;
        list-style: none;
        margin-bottom: 0px;
        background-color: #025ea5;
        color: #ffffff;
    }

    body.portal .sub-menu li:last-child a {
        border-right: 0px;
        border-bottom-right-radius: 25px;
        border-bottom-left-radius: 25px;
        border-top-right-radius: 25px;
    }

    body.portal .sub-menu li:last-child a {
        border-right: 0px;
        border-bottom-right-radius: 25px;
        border-top-right-radius: 25px;
    }*/

    /* De stappenbalk stond hier op display: block, waardoor de acht stappen acht
       volle regels werden: 400px hoog, 47% van een telefoonscherm, voordat je iets
       van de stap zelf zag. Hij blijft nu een rij, zie het blok "Stappenbalk op
       smalle schermen" verderop in dit bestand. */

    body.portal .request-steps li:first-child a {
        padding-left: 20px;
    }

    .background-linear {
        background: #ffffff!important;
    }

    table .color-white,table .color-white a {
        color: #000000;
    }

    table .color-blue-mobile,table .color-blue-mobile a {
        color: #005ea5!important;
    }

    .table-responsive {
        border: none;
    }

    /* Bootstrap laat deze houder alleen onder 768px schuiven. Daarboven loopt een brede
       tabel dus gewoon buiten zijn houder, en op een pagina die zijwaarts scrollen afknipt
       kun je er helemaal niet meer bij. Op tablet en smalle vensters hoort hij te schuiven. */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media only screen and (max-width: 767px) {
    footer .footer-links,.signin-footer .footer-links {
        font-size: 12px;
        margin-left: 0px!important;
        text-align: center!important;
    }

    .padding-left-75 {
        padding-left: 0px!important;
    }

    .background-linear .btn.margin-left-25:last-child {
        margin: 25px!important;
    }


    /* De hamburger en het uitklapmenu stonden hier en nog een keer in het blok voor
       768 tot 991px, met andere selectors. Ze staan nu één keer onderaan dit bestand,
       buiten elke mediaquery, want het paneel hoort er altijd hetzelfde uit te zien. */

    body.portal header {
        padding: 20px 0;
    }

    /* De maten van de kop op een telefoon staan nu bij de rest van de kopregels
       in app.css, zodat ze niet over twee bestanden verdeeld zijn. */

    .signin-errors {
        height: 65px!important;
    }

    .mobile-padding-left-15{
        padding-left: 15px!important;
    }

    .mobile-padding-right-15{
        padding-right: 15px!important;
    }

    .btn-block-mobile {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 15px;
    }
}

/*------------------------------------------------------------------
Registratiewizard op een telefoon

Een kaart van bijna 600px past hier niet boven de vouw, hoe je de inhoud ook
schikt. Bij stap 2 stond de Verder-knop op y=844 op een scherm van 844px hoog,
dus precies erbuiten, en dan lijkt het alsof de wizard vastloopt.

Daarom blijft de knoppenrij aan de onderkant van het beeld plakken zolang de
kaart in beeld is, en komt hij op zijn eigen plek terug zodra je het einde van
de kaart bereikt. Naast elkaar in plaats van gestapeld, anders eet een
vastgezette rij een derde van het scherm op.
------------------------------------------------------------------*/

@media only screen and (max-width: 767px) {
    /* Met body ervoor, anders houdt app.css zijn padding-top van 40px vast en is de
       vastgezette rij 28px hoger dan bedoeld. Zie de uitleg bij de spacers verderop. */
    body .wizard-knoppen {
        position: sticky;
        bottom: 0;
        z-index: 2;
        display: flex;
        gap: 10px;
        padding: 12px 0;
        background-color: #ffffff;
        box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, .25);
    }

    .wizard-knoppen .btn-block-mobile {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        margin-bottom: 0;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 14px;
        white-space: nowrap;
    }

}

/*------------------------------------------------------------------
Het KVK-veld met de knop ernaast

Bootstrap maakt van .input-group een tabel en van de knopcel een cel met
width: 1%, wat "krimp tot de inhoud" betekent. De knop "Ververs gegevens" is
278px breed en krijgt daarmee voorrang, zodat er voor het KVK-nummer 50px
overblijft. Er valt niets buiten beeld, de verhouding is alleen omgekeerd aan
wat je wilt: je ziet je eigen KVK-nummer niet meer.

Op telefoonbreedte dus onder elkaar, allebei over de volle breedte, net als in
het registratieformulier. Dat scherm regelt dit al met een eigen blok onderaan
views/registration/_form.php, gericht op #check-kvk, en daarom gold het niet
voor deze knop met id kvk-update.

Gericht op deze ene veldcontainer en niet generiek op .input-group, want
datumvelden en de knop bij het wachtwoordveld gebruiken hetzelfde blok met een
kleine icoonknop, en die horen juist naast het veld te blijven staan.
------------------------------------------------------------------*/

@media only screen and (max-width: 767px) {
    .field-company-kvk_number .input-group,
    .field-registration-kvk_number .input-group {
        width: 100%;
    }

    .field-company-kvk_number .input-group-btn,
    .field-company-kvk_number .input-group-btn .btn,
    .field-registration-kvk_number .input-group-btn,
    .field-registration-kvk_number .input-group-btn .btn {
        display: block;
        width: 100%;
        clear: both;
    }
}


@media only screen and (max-width: 992px) and (min-width: 767px){
    .header-signin h1 {
        font-size: 30px!important;
    }
}


@media only screen and (max-width: 991px) {

    body.portal .form-detail {
        padding-left: 0px;
        padding-right: 0px;
    }

    body.portal .sub-menu li a {
        padding: 10px 107.8px 10px 15px;
    }

    body.portal .sub-menu li:first-child a {
        padding-left: 15px;
    }

    body.portal table.grid-table {
        width: 100%;
        margin-left: 0px;
    }

    .text-right {
        text-align: unset!important;
    }

    form .btn {
        margin-top: 20px;
    }

    /* Bootstrap zet .btn op white-space: nowrap. Bij een knop op volle breedte met een lange
       tekst, zoals "Meer informatie leest u in de FaunaschadePreventiekit.", loopt die tekst
       dan over zijn eigen rand heen, en een pijl erachter valt zelfs helemaal buiten de knop.
       Op volle breedte is er geen reden om niet af te breken. De twee uitzonderingen hieronder
       houden nowrap, want die knoppen horen naast elkaar op een regel. */
    .btn {
        width: 100%!important;
        white-space: normal;
    }

    /* Knoppen in een tabel vallen buiten de regel hierboven. Een actiekolom heeft er zes
       naast elkaar, en op volle breedte werd dat een kolom van zes regels onder elkaar.
       Ze krijgen hier ook een wat groter raakvlak, want btn-xs is met de vinger niet te
       doen. De kolom wordt daardoor breder, maar de tabel schuift toch al opzij. */
    body.portal table .btn {
        width: auto!important;
        white-space: nowrap;
        min-height: 30px;
        min-width: 30px;
        padding: 4px 8px;
    }

    /* Hetzelfde voor een knoppengroep, zoals de kolomkiezer en Export boven een grid. Die
       horen naast elkaar en ze mogen wat groter, want als icoon alleen zijn ze nauwelijks
       te raken. */
    body.portal .btn-group > .btn {
        width: auto!important;
        white-space: nowrap;
        min-height: 38px;
        padding: 8px 12px;
    }

    /* En voor Wissel Omgeving, die naast zijn keuzelijst hoort zolang die ruimte er is.
       Onder 768px valt hij alsnog onder de regel hierboven en gaat hij op volle breedte
       eronder staan. */
    @media (min-width: 768px) {
        body.portal .omgeving-wisselen .btn {
            width: auto!important;
            white-space: nowrap;
            /* form .btn hierboven zet 20px erboven, waardoor hij 10px lager stond dan de
               keuzelijst ernaast. */
            margin-top: 0;
        }
    }

    /*header a img {*/
    /*    width: 75px;*/
    /*    height: 75px;*/
    /*}*/


    table thead tr th:not(:first-child),table tbody tr td:not(:first-child),table thead tr th:not(:last-child),table tbody tr td:not(:last-child) {
        padding-right: 25px!important;
    }

    body.portal .block-box-portal h2, body.portal .block-box-portal p {
        padding-left: 0px!important;
        padding-right: 0px!important;
    }

    .margin-left-25 {
        margin-left: 0px!important;
    }

    .background-linear .btn.margin-left-25:last-child {
        margin: 0px !important;
    }

    .portal .text-page  .margin-right-70,.portal .document-page .margin-right-70{
        margin-right: 0px;
        margin-bottom: 20px;
    }

    .portal .text-page  .block-box .block-title,.portal .document-page  .block-box .block-title {
        margin: 0px 0px 10px 0px
    }

    .margin-right-200 {
        margin-right: 0px!important;
    }

    .block-box {
        padding: 25px!important;
    }
}
/*------------------------------------------------------------------
Tablets en kleinere laptops

De stappenbalk is een flexrij met flex-wrap: nowrap en width: 100%. Bij acht
stappen is de inhoud breder dan het scherm, waardoor de flexrij buiten zijn
ouder liep en de hele pagina horizontaal ging schuiven. De koptekstbalk staat
daardoor half buiten beeld, met Beheer en Uitloggen aan de rechterkant.
Hieronder laten we de balk afbreken in plaats van uitlopen, en schakelen we
het hoofdmenu op tablets over naar het uitklapmenu.
------------------------------------------------------------------*/

/*------------------------------------------------------------------
Stappenbalk op smalle schermen

Gemeten op een aanvraag met acht stappen: de balk was 400px hoog op een telefoon
(47% van het scherm) en net zo hoog op een tablet, want elke stap kreeg een eigen
volle regel. Op een laptop van 1440 was hij 62px.

Hier tonen de stappen waar je niet staat alleen hun nummer, als tegels naast
elkaar. De stap waar je wel staat houdt zijn naam en krijgt de rest van de regel.
De namen van de andere stappen blijven in de pagina staan voor een schermlezer,
ze nemen alleen geen ruimte meer in, dus "3. Diersoorten" wordt nog gewoon
voorgelezen terwijl er "3" staat.

De links blijven dus allemaal bestaan. Dat telt, want ze zijn het snelste pad
terug naar een eerdere stap. De knoppen onderaan elke stap bieden alleen de vorige
stap en het overzicht.
------------------------------------------------------------------*/

@media only screen and (max-width: 1199px) {
    body.portal .request-steps {
        flex-wrap: wrap;
        /* houdt de afgeronde hoeken netjes als de balk over twee rijen loopt */
        overflow: hidden;
    }

    body.portal .request-steps li {
        flex: 0 0 auto;
        min-width: 0;
    }

    body.portal .request-steps li a {
        padding: 16px 15px;
        white-space: nowrap;
    }

    /* Onzichtbaar maar wel voorgelezen, dezelfde aanpak als .sr-only. */
    body.portal .request-steps li:not(.active) .stap-naam {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* De stap waar je staat vult de regel, zodat de balk een rechte rand houdt. */
    body.portal .request-steps li.active {
        flex: 1 1 auto;
    }

    body.portal .request-steps li:last-child {
        flex: 1 1 auto;
    }
}

/* De balk is binnen de kaart ongeveer 315px breed, niet 390, want er zit 25px
   padding aan weerszijden. De naam van de stap waar je staat is in zijn eentje al
   zo'n 150px, dus met die naam erbij valt er altijd iets naar een tweede regel.

   Dat hoeft ook niet: de naam staat al als kop direct onder de balk ("3. Diersoorten"),
   dus in de balk zou hij er twee keer staan. Hier dus alleen de nummers, op één
   regel, en welke stap het is zie je aan de accentkleur.

   De tegels zijn even breed en vullen samen de regel, zodat elk aantal stappen past:
   zeven, of zes als Voorkomen wegvalt voor een provincie, of vier bij een aanvraag
   zonder tegemoetkoming. Overzicht is een woord en geen nummer en houdt daarom zijn
   eigen breedte, ook als je er staat.

   Dit blok staat na het blok hierboven, anders wint li:last-child met flex-grow
   en wordt de laatste tegel alsnog over de volle regel uitgerekt. */
@media only screen and (max-width: 767px) {
    body.portal .request-steps li,
    body.portal .request-steps li.active {
        flex: 1 1 0;
        min-width: 0;
    }

    body.portal .request-steps li a,
    body.portal .request-steps li:first-child a {
        padding: 16px 4px;
        text-align: center;
    }

    body.portal .request-steps li.active .stap-naam {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Staat na li.active, zodat Overzicht zijn woordbreedte ook houdt als je er staat. */
    body.portal .request-steps li:last-child {
        flex: 0 0 auto;
    }

    body.portal .request-steps li:last-child a {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/*------------------------------------------------------------------
Uitklapmenu

Eén werking, ongeacht de schermbreedte. Zie je de hamburger en klik je erop, dan
krijg je dit paneel met de items onder elkaar. De enige vraag die wel aan een
breedte hangt is of de hamburger er überhaupt is, en dat regelt de markup met
visible-xs visible-sm.

Dit stond eerder twee keer: in het blok onder 767px met selectors op
body.portal .main-menu, en in een blok voor 768 tot 991px met selectors op
.mobile-menu .main-menu. Die tweede set woog lichter dan
body.portal .main-menu li uit portal.css en verloor het daarvan, waardoor de
items tussen 768 en 991px op één regel met streepjes stonden.
------------------------------------------------------------------*/

.hamburger-mobile {
    float: right;
    background-color: #005ea5;
    padding: 15px;
    cursor: pointer;
    border-radius: 5px;
}

.hamburger-mobile:hover,
.hamburger-mobile.active {
    background-color: #014275;
}

.hamburger-mobile img {
    width: 25px;
}

.mobile-menu {
    width: 100%;
    float: left;
    height: 100%;
    position: fixed;
    /* Stond op scroll, en dan toont het paneel altijd een schuifbalk, ook met zes
       menu-items die ruim passen. */
    overflow-y: auto;
    z-index: 100;
    top: 0;
    background-color: #ffffff;
    padding-top: 20px;
}

.mobile-menu .menu-logo img {
    width: 75px;
}

.mobile-menu .menu-close {
    float: right;
    cursor: pointer;
    font-size: 22px;
    font-weight: 500;
    color: #b44c3b;
}

.mobile-menu .menu-close:hover {
    color: #b2482e;
}

/* body.portal ervoor, anders weegt dit lichter dan body.portal .main-menu li uit
   portal.css en blijven de items op een regel staan. */
body.portal .mobile-menu .main-menu {
    padding-left: 0;
    list-style: none;
    float: left;
    width: 100%;
    margin-top: 0;
}

body.portal .mobile-menu .main-menu li {
    display: list-item;
    margin-left: unset !important;
    padding: 10px 0;
    text-align: center;
}

body.portal .mobile-menu .main-menu li::after {
    content: '';
}

body.portal .mobile-menu .main-menu li a {
    margin-right: 0;
    font-size: 18px;
}

/* Boven deze grens is er geen hamburger, dus mag het paneel er ook niet zijn.
   jQuery opent het met fadeIn(), en dat zet een inline display: block. Alleen
   !important wint daarvan. Zonder deze regel bleef het paneel het hele scherm
   afdekken zodra je het venster groter trok terwijl het open stond. */
@media only screen and (min-width: 992px) {
    body.portal .mobile-menu {
        display: none !important;
    }
}

/*------------------------------------------------------------------
Ritme op telefoonbreedte

Drie dingen die op een laptop kloppen en op een telefoon niet.

1. Knoppen plakken aan elkaar. Op deze breedte is elke knop volle breedte, dus
   ze stapelen altijd, maar alleen knoppen in een formulier kregen marge
   (form .btn). De vier knoppen op het overzicht van een aanvraag zijn gewone
   links en stonden daardoor tegen elkaar aan.

2. De verticale ruimte komt uit vaste spacers, 258 stuks in de views, met
   hoogtes die voor een scherm van 900px zijn gekozen. Op een telefoon van 844px
   waarvan de kop al 180px pakt, kost dezelfde 25px verhoudingsgewijs veel meer.
   Hier schalen ze mee naar ongeveer 55 procent.

3. Het foutblok is massief. Bootstrap geeft .alert 15px padding rondom en de
   meldingen staan in een <ul> met 40px inspringing. Elke stap toont dat blok
   bewust twee keer, boven en onder het formulier, zodat je de fouten ziet waar
   je ook staat op een lange pagina. Die twee blijven allebei staan, ze worden
   alleen compacter.
------------------------------------------------------------------*/

@media only screen and (max-width: 767px) {
    .btn {
        margin-bottom: 10px;
    }

    /* Stond op 20px in het blok tot 991px, samen met de marge hierboven werd dat
       30px tussen twee knoppen. Gelijk ritme is rustiger. */
    form .btn {
        margin-top: 10px;
    }

    /* Met body ervoor, anders wint app.css. Dit bestand staat in AppAsset voor app.css,
       dus de regels hier komen eerder in de cascade. De spacers staan daar op regel 318
       en verder met dezelfde zwaarte, dus zonder dit extra element veranderde hier niets.
       Een media-query telt niet mee in de zwaarte. */
    body .spacer-75 { height: 36px; }
    body .spacer-50 { height: 26px; }
    body .spacer-40 { height: 22px; }
    body .spacer-35 { height: 20px; }
    body .spacer-30 { height: 18px; }
    body .spacer-25 { height: 15px; }
    body .spacer-20 { height: 12px; }
    body .spacer-15 { height: 10px; }

    .alert {
        padding: 10px 12px;
        margin-bottom: 14px;
    }

    .alert ul {
        padding-left: 18px;
        margin-bottom: 0;
    }
}

/*------------------------------------------------------------------
Het kaartvenster op een telefoon

body.portal .modal-content heeft 40px padding rondom, en voor vensters stond er
geen enkele mobiele uitzondering. Op 390px blijft er daardoor zo'n 290px over
voor de kaart zelf, en bij die breedte klapt de viewer van WebGIS Publisher zijn
werkbalk in tot een hamburger. De presentatie klopt dan wel, maar je kunt er
niets mee.

Hier krijgt het kaartvenster het hele scherm. Alleen dit venster, want de andere
vensters in het portaal zijn tekst en daar is die ruimte juist prettig.
------------------------------------------------------------------*/

@media only screen and (max-width: 767px) {
    body.portal #map-modal .modal-dialog,
    body.portal .map-modal-dialog {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    body.portal #map-modal .modal-content {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        padding: 0;
        border-radius: 0;
    }

    body.portal #map-modal .modal-header {
        flex: 0 0 auto;
        padding: 10px 12px;
    }

    body.portal #map-modal .modal-header h2 {
        font-size: 16px;
        line-height: 1.3;
    }

    body.portal #map-modal .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        padding: 0;
    }

    body.portal #map-modal .modal-footer {
        flex: 0 0 auto;
        padding: 8px 12px;
    }
}

/*------------------------------------------------------------------
Stap 1: eerst de percelen, dan de knoppen

Stap 1 heeft twee kolommen. Links staan de titel, het aanvraagnummer, de
waarschuwingen en onderaan Annuleren en Opslaan. Rechts staan de percelen.
Naast elkaar klopt dat, maar op een telefoon vallen de kolommen onder elkaar
en komt de hele linkerkolom eerst. Je leest dan Opslaan voordat je het blok
ziet waar je de percelen kiest.

De knoppen en de percelen zitten in verschillende kolommen, en order werkt
niet over twee ouders heen. Met display: contents verdwijnt het kolomvakje
zelf en worden zijn drie onderdelen rechtstreeks onderdeel van de rij, zodat
ze samen met de perceelkolom op volgorde gezet kunnen worden. Er beweegt niets
in de HTML, dus de knop blijft gewoon bij zijn formulier horen en op een
laptop verandert er niets. Kent een browser display: contents niet, dan blijft
de kolom staan en is de volgorde zoals hij was.

Het kolomvakje droeg ook de marge van 15px. Die zit nu op de onderdelen zelf,
anders steken de rijen er aan beide kanten uit.
------------------------------------------------------------------*/

@media only screen and (max-width: 767px) {
    .stap-percelen {
        display: flex;
        flex-direction: column;
    }

    /* De clearfix van .row wordt hier een leeg vak vooraan, dat is niet nodig. */
    .stap-percelen::before,
    .stap-percelen::after {
        display: none;
    }

    .stap-percelen > .col-sm-7 {
        display: contents;
    }

    .stap-percelen > .step-container {
        order: 1;
    }

    .stap-percelen .stap-inhoud {
        order: 2;
        padding-left: 15px;
        padding-right: 15px;
    }

    .stap-percelen > .col-sm-5 {
        order: 3;
    }

    .stap-percelen .stap-knoppen {
        order: 4;
    }

    .stap-percelen .stap-uitleg {
        order: 5;
    }

    .stap-percelen .stap-knoppen,
    .stap-percelen .stap-uitleg {
        margin-left: 0;
        margin-right: 0;
    }
}


/* Zijwaarts schuiven zichtbaar maken
   ----------------------------------
   Een tabel die breder is dan het scherm schuift opzij, maar op een telefoon ziet
   niemand dat: de schuifbalk van iOS verschijnt pas terwijl je schuift en verdwijnt
   daarna weer. Daarom hier twee dingen die wel blijven staan, een dunne balk die
   altijd zichtbaar is en een regel tekst erboven. De regel wordt door app.js
   neergezet en alleen bij een tabel die echt niet past. Buiten een mediaquery,
   want ook op een smal venster op de laptop klopt dit. */

.table-responsive::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 7px;
}

.table-responsive::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 94, 165, 0.45);
}

.table-responsive::-webkit-scrollbar-track {
    background-color: #ecf6f8;
    border-radius: 4px;
}

.tabel-schuifwenk {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    color: #005ea5;
    font-size: 13px;
}

.tabel-schuifwenk .pijl {
    font-size: 15px;
    line-height: 1;
}


/* Overzicht van de aanvraag als documentvoorbeeld
   ----------------------------------------------
   Het grijze blok op het afrondingsscherm toont dezelfde gegevens als het document dat
   achter Print dit overzicht zit. Dat is een echte PDF, opgebouwd uit views/request/pdf.php
   en door Dompdf op A4 gezet. Daarin staan label en waarde naast elkaar in twee kolommen,
   met een klein briefhoofd rechtsboven en de gegevens eronder.

   Op het scherm is het een DetailView met col-sm-5 en col-sm-7. Die staan dus alleen vanaf
   768px naast elkaar en vallen daaronder onder elkaar, waardoor het een lange lijst losse
   regels wordt. Het briefhoofd uit portal.css blijft ondertussen op 200px staan, en daar
   loopt de regel Aanvraagnummer dwars doorheen.

   Hieronder krijgt het blok op een telefoon weer de vorm van het document. Alles staat
   achter max-width: 767px, dus op een tablet, laptop en monitor verandert er niets. De
   view zelf blijft ongemoeid, zodat ook de schermdelen die niet in de PDF zitten blijven
   staan zoals ze zijn.

   De rijen gelden voor beide overzichten die deze opbouw gebruiken, het aanvraagoverzicht
   op het afrondingsscherm en het bezwaarformulier in views/form/view.php. Allebei hebben
   ze een eigen Print dit overzicht met een echte PDF erachter, en portal.css behandelt ze
   al als één ding. Het briefhoofd hoort alleen bij het aanvraagoverzicht, dus die regel
   blijft op .request-finalize staan. */

@media only screen and (max-width: 767px) {
    body.portal .form-detail.request-finalize {
        /* Briefhoofd zo klein als in het document, met de gegevens eronder in plaats van
           eroverheen. De svg is 500 bij 114, dus op 90px breed is hij 21px hoog. */
        padding-top: 55px;
        background-size: 90px;
        background-position: right 15px top 15px;
    }

    body.portal .form-detail .request-detail {
        display: flex;
        align-items: baseline;
    }

    /* De clearfix van .row wordt in een flexrij een leeg vak dat de kolommen opschuift. */
    body.portal .form-detail .request-detail::before,
    body.portal .form-detail .request-detail::after {
        display: none;
    }

    body.portal .form-detail .request-detail > .col-sm-5 {
        flex: 0 0 40%;
        padding-right: 10px;
    }

    body.portal .form-detail .request-detail > .col-sm-7 {
        flex: 1 1 auto;
        padding-left: 0;
        /* Zonder deze twee duwt een lange waarde zonder spaties, zoals een IBAN, de
           labelkolom weg. */
        min-width: 0;
        word-break: break-word;
    }

    /* Een rij met een eigen tabel erin, de diersoorten en de maatregelen, past niet in een
       halve kolom en houdt de volle breedte. Die twee zijn nr 9 en nr 10 van de werklijst
       en gaan hier niet over. Kent een browser :has() niet, dan blijft zo'n rij staan zoals
       hij nu al staat. */
    body.portal .form-detail .request-detail:has(table) {
        display: block;
    }

    /* Die rij is geen flexrij meer, dus de inspringing van de kolom moet terug. Zonder dit
       begint de tabel 15px links van het blok, want .row heeft een negatieve marge. */
    body.portal .form-detail .request-detail:has(table) > .col-sm-7 {
        padding-left: 15px;
    }
}


/* Het aanvraagoverzicht krimpt als geheel, in plaats van te herschikken
   ---------------------------------------------------------------------
   Een PDF-viewer verkleint de hele pagina tot hij past. Alles blijft op zijn plek, het
   wordt alleen kleiner. HTML doet het omgekeerde: die herschikt. Kolommen vallen om en
   tabellen worden samengeknepen, en zo wordt de derde kolom van de maatregelentabel tot
   twee tekens teruggebracht.

   Hieronder krijgt het blok de breedte van een document en krimpt het als geheel naar de
   schermbreedte, net als de viewer. Daarmee vallen de diersoortenrij en de maatregelen-
   tabel weer op hun eigen maat.

   Het gaat om zoom en niet om transform: scale(), omdat zoom ook de ruimte meeneemt die
   het blok inneemt. Met transform zou het blok visueel krimpen maar op papier 520px breed
   blijven, en dan krijgt de pagina een horizontale schuifbalk.

   DOCUMENTBREEDTE is de knop om aan te draaien. Hoger betekent dat er meer naast elkaar
   past en dat de tekst kleiner wordt, lager betekent grotere tekst en eerder gedoe bij
   veel diersoorten. Bij 520px past een rij van vier diersoortfoto's van 110px nog.
   Inzoomen met de vingers blijft gewoon werken, de viewport-regel staat dat toe.

   De krimpfactor wordt uitgerekend en niet geraden. De beschikbare breedte is precies
   100vw - 30px: .container geeft 15px aan beide kanten, en de negatieve marge van .row
   wordt opgeheven door de padding van de kolom erin. Elke vaste reeks stappen raadt de
   schermbreedte, en dan is het blok op het ene toestel te breed en op het andere te smal.

   De vaste waarde erboven is de terugval voor een browser die calc() in zoom niet slikt.
   Die is per stap op de smalste schermbreedte van zijn bereik berekend, dus hij valt eerder
   te klein uit dan te breed. Een te breed blok geeft een horizontale schuifbalk, te smal
   kost alleen wat witruimte. */

@media only screen and (max-width: 767px) {
    body.portal .form-detail.request-finalize {
        width: 520px;
        /* De zijpadding die mobile.css hierboven van elk .form-detail afhaalt, want anders
           plakt de tekst tegen de rand van het grijze blok. */
        padding-left: 15px;
        padding-right: 15px;
        /* Het blok lijnt van zichzelf links uit. Blijft er ruimte over, door de speling
           hieronder of doordat een browser terugvalt op de vaste krimpstap, dan staat het
           zichtbaar uit het midden. Zo wordt die ruimte verdeeld. */
        margin-left: auto;
        margin-right: auto;
        zoom: 0.66;
        /* Twee pixels speling, zodat een afrondingsrestje op de krimpfactor nooit een
           horizontale schuifbalk op de pagina oplevert. */
        zoom: calc((100vw - 32px) / 520);
    }
}

@media only screen and (min-width: 415px) and (max-width: 499px) {
    body.portal .form-detail.request-finalize {
        zoom: 0.74;
        zoom: calc((100vw - 32px) / 520);
    }
}

@media only screen and (min-width: 500px) and (max-width: 767px) {
    body.portal .form-detail.request-finalize {
        zoom: 0.9;
        zoom: calc((100vw - 32px) / 520);
    }
}

@media only screen and (max-width: 375px) {
    body.portal .form-detail.request-finalize {
        zoom: 0.55;
        zoom: calc((100vw - 32px) / 520);
    }
}
/*------------------------------------------------------------------
Ruimte onderaan voor de meldingen die over de pagina heen liggen
------------------------------------------------------------------*/

/* Op dev, test en acceptatie staat linksonder de omgevingsmelding, en met YII_DEBUG aan
   rechtsonder de knop van de debugbalk. Allebei staan ze vast onderin het venster. Op een
   telefoon is de laatste knop van een pagina precies daar, dus die zit eronder en is niet
   aan te raken. Op een breed scherm valt dat niet op, want daar is links- en rechtsonder
   leeg.

   Twee dingen lossen dat op. De pagina krijgt onderaan ruimte, zodat je altijd net zo ver
   door kunt schuiven dat de knop boven de melding uitkomt. En de melding zelf laat een
   aanraking door, zodat hij ook in de tussenstand niets blokkeert. De link erin blijft wel
   aanraakbaar, anders kun je niet meer naar productie doorklikken.

   Productie heeft geen van beide, dus daar verandert dit niets. */
@media only screen and (max-width: 767px) {
    body.portal:has(.omgeving-melding),
    body.portal:has(#yii-debug-toolbar) {
        padding-bottom: 95px;
    }

    .omgeving-melding {
        pointer-events: none;
    }

    .omgeving-melding a {
        pointer-events: auto;
    }
}
/*------------------------------------------------------------------
Vensters en de tooltip erin op een telefoon
------------------------------------------------------------------*/

/* Stap 4 zet met registerCss een eigen breedte op .modal-dialog: 33 procent, hoogstens 600
   en minstens 300 pixels. Op een breed scherm klopt dat. Op een telefoon wint de ondergrens
   van 300, en dan staat een venster van 300 pixels links in een scherm van 440, met de helft
   van de pagina er nog naast. Die regel komt uit een view en heeft dus geen media query, dus
   hij moet hier terug naar de stand van bootstrap: zo breed als de ruimte, met 10 pixels rondom.

   Het kaartvenster houdt zijn eigen regel hierboven, die is specifieker.

   Het kruisje stond met een negatieve marge in de kop geduwd, elf pixels breed en daarmee
   vrijwel niet te raken. Het gaat naar de hoek van het venster zelf en wordt een echt
   raakvlak. Dat is nodig, want een venster beslaat op een telefoon bijna het hele scherm en
   het kruisje is de enige uitweg. */
@media only screen and (max-width: 767px) {
    body.portal .modal-dialog {
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 10px;
    }

    body.portal .modal-content {
        padding: 20px;
    }

    body.portal .modal-content > .close,
    body.portal .modal-header > .close {
        position: absolute;
        top: 4px;
        right: 4px;
        z-index: 2;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        font-size: 26px;
        line-height: 44px;
        text-align: center;
        opacity: 0.75;
    }

    /* Anders loopt de titel onder het kruisje door. */
    body.portal .modal-header {
        padding-right: 44px;
    }
}

/* De uitleg bij een knop staat van zichzelf rechts naast die knop, 300 pixels breed. Naast
   een knop op volle breedte is daar geen ruimte voor, dus valt hij buiten het scherm. Op een
   telefoon komt hij eronder, net zo breed als de knop zelf. */
@media only screen and (max-width: 767px) {
    .tooltip-container {
        display: block;
    }

    .tooltip-content {
        left: 0;
        right: 0;
        top: 100%;
        width: auto;
        margin-left: 0;
        margin-top: 8px;
        transform: none;
    }
}
/*------------------------------------------------------------------
De kop van een beheergrid op een telefoon
------------------------------------------------------------------*/

/* Een grid met filters heeft twee rijen in de kop: de kolomnamen en daaronder de
   filtervelden. Een filterveld is een .form-control van 35 pixels met 11 pixels padding
   boven en onder, en de cel eromheen heeft er zelf ook nog 8. Samen met de kolomnamen is
   de kop daardoor op een telefoon bijna twee keer zo hoog als een rij met gegevens, en dat
   terwijl er maar drie of vier rijen tegelijk in beeld passen.

   De filtervelden worden hier wat lager en de cellen krijgen minder lucht. De velden
   blijven even bruikbaar, alleen de kop neemt minder van het scherm in. Alleen voor een
   gridkop, dus de invoervelden in de rest van het portaal houden hun eigen maat. */
@media only screen and (max-width: 767px) {
    body.portal .kv-grid-table > thead > tr > th,
    body.portal .grid-view table > thead > tr > th {
        padding: 6px 8px;
        vertical-align: top;
    }

    body.portal .kv-grid-table > thead .filters > td,
    body.portal .grid-view table > thead .filters > td {
        padding: 4px 6px;
    }

    body.portal .kv-grid-table > thead .form-control,
    body.portal .grid-view table > thead .form-control {
        height: 32px;
        padding: 4px 8px;
        font-size: 13px;
    }

    body.portal .kv-grid-table > thead select.form-control,
    body.portal .grid-view table > thead select.form-control {
        height: 32px;
    }

    /* Een tabel perst zich standaard in de breedte van het scherm. Op een telefoon wordt
       elke kolom daardoor een smalle koker waarin "24 sep. 2020" over twee regels valt en
       een omschrijving over vijf, terwijl de tabel toch al opzij kan schuiven.

       Een kolomnaam en zijn inhoud blijven nu op één regel staan, zodat de kolom de breedte
       krijgt die hij nodig heeft en een datum of een naam leesbaar blijft. Voor de rest
       schuif je naar rechts, wat op dit kader toch al kon en waar de wenk erboven over gaat.

       Dit geldt voor elke tabel in een schuifkader, niet alleen voor de grids met de klasse
       grid-table. De blokken op de startpagina, Mijn aanvragen en Mijn acties en Mijn
       berichten, heten primary-table, en juist daar vielen de datum en de statuspil over
       twee regels. */
    body.portal .table-responsive table > * > tr > th,
    body.portal .table-responsive table > * > tr > td {
        white-space: nowrap;
    }

    /* Op een breed scherm staat de pil naast het logo. Op een telefoon vult het logo zijn
       halve kolom al, dus daar wordt hij uit die regel getild en gaat hij naar de
       rechterkant, net links van de hamburger. Die is 55px breed en staat 15px van de rand.
       Een kolom van bootstrap staat zelf op position relative. Zonder deze regel rekent de
       pil dus tegen die halve kolom en komt hij midden in het logo terecht. Static zetten
       laat hem tegen header > .container rekenen, die wel relative is. Push en pull van
       bootstrap worden in deze kopbalk niet gebruikt, dus dat kan hier. */
    body.portal .kop-logo {
        position: static;
    }

    body.portal .onderhoud {
        position: absolute;
        top: 50%;
        right: 85px;
        transform: translateY(-50%);
    }

    /* Het paneeltje hangt dan rechts uit in plaats van links, anders loopt het het scherm uit. */
    body.portal .onderhoud-inhoud {
        left: auto;
        right: 0;
        width: calc(100vw - 40px);
        max-width: 260px;
    }

    /* Een filter dat een Select2 is, toont niet de select zelf maar een eigen blokje
       ervoor. Zonder deze regel blijft dat op zijn eigen 34 pixels staan en steekt het
       boven de zoekvelden van 32 uit. */
    body.portal .kv-grid-table > thead .select2-container--krajee-bs3 .select2-selection--single,
    body.portal .grid-view table > thead .select2-container--krajee-bs3 .select2-selection--single {
        height: 32px;
    }

    body.portal .kv-grid-table > thead .select2-container--krajee-bs3 .select2-selection--single .select2-selection__rendered,
    body.portal .grid-view table > thead .select2-container--krajee-bs3 .select2-selection--single .select2-selection__rendered {
        line-height: 30px;
        font-size: 13px;
    }

    body.portal .kv-grid-table > thead .select2-container--krajee-bs3 .select2-selection--single .select2-selection__arrow,
    body.portal .grid-view table > thead .select2-container--krajee-bs3 .select2-selection--single .select2-selection__arrow {
        height: 30px;
    }
}