/* ------------------------------------------------------------------
   scherm-indeling.css  (ZwMpalServer)

   Toolbar, tabstrook en de knoppenbalk onderaan staan vast; alleen het
   middenblok van een onderhoudsscherm schuift.

   Plaats:   wwwroot/css/scherm-indeling.css
   Koppelen: in App.razor, NA de eigen stylesheets - anders winnen de
             bestaande regels voor .scherm van deze.

                 <link rel="stylesheet" href="css/scherm-indeling.css" />

   De klassen scherm-kop / scherm-midden / scherm-voet staan in
   Onderhoudsraamwerk.razor, dus elk onderhoudsscherm erft dit in een keer.
   De tabstrook heeft zijn eigen regels; die staan in het style-blok van
   Onderhoudsraamwerk zelf, omdat ze alleen in de tabmodus gelden.
   ------------------------------------------------------------------ */


/* === 1. De hoogteketen ============================================
   Elke schakel van html tot aan .scherm moet een hoogte hebben. Ontbreekt
   er een, dan valt .scherm terug op de hoogte van zijn eigen inhoud en
   scrollt de hele pagina alsnog - het meest voorkomende geval waarin
   "het doet niets".

   DE HOOGTE VAN .beheer STAAT HIER NIET, en dat is met opzet. Die staat
   in app.css bij de schermschaal, als calc(100vh / var(--schaal)). Zet je
   hier ook een hoogte neer, dan wint dit bestand (het wordt later
   gekoppeld) en vervalt de deling door de schaal: op compact vult de
   applicatie dan 90% van de hoogte met een strook eronder.
   ------------------------------------------------------------------ */

html {
    height: 100%;
    margin: 0;
    /* De pagina zelf schuift nooit; dat doet alleen .scherm-midden.
       Knippen gebeurt HIER en niet op body: body draagt de zoom van de
       schermschaal, en .beheer is met opzet 1/schaal keer zo hoog om die
       zoom te compenseren. Met overflow: hidden op body wordt precies die
       overhoogte weggeknipt - en daarmee de knoppenbalk onderaan. */
    overflow: hidden;
}

body {
    height: 100%;
    margin: 0;
}

/* De buitenste div van HoofdLayout, met de navigatiebalk links en de
   inhoud rechts. Alleen de regels die de keten sluitend maken; de hoogte
   komt uit app.css, zie de toelichting hierboven. */
.beheer {
    min-height: 0;
    overflow: hidden;
}

/* Het inhoudsvlak rechts van de navigatiebalk. Hier komt @Body binnen,
   en daarmee het scherm.

   LET OP: is .beheer een css-grid, dan heeft de rij waar .beheer-inhoud
   in zit ook min-height: 0 nodig. Een grid-rij groeit standaard mee met
   zijn inhoud, precies zoals een flex-kind dat doet. (In ZwMpalServer is
   .beheer een flexrij, dus daar speelt dit niet.) */
.beheer-inhoud {
    min-height: 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* De foutgrens uit HoofdLayout tekent zijn kind zonder eigen omhulsel,
   dus daar hoeft niets. Wel de melding zelf: die mag wel schuiven. */
.beheer-fout {
    overflow: auto;
}


/* === 2. Het scherm ================================================
   min-height: 0 is geen overbodige regel. Flex-kinderen staan standaard
   op min-height: auto en weigeren te krimpen onder hun inhoud; zonder
   deze regel groeit het middenblok door en zakt de knoppenbalk onder de
   onderrand van het beeld.
   ------------------------------------------------------------------ */

.scherm {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* Onder 900 pixels zet app.css .scherm op flex: none en geeft het raster
   een vaste hoogte van 320. Die regel is ouder dan de indeling met een
   vaste kop en voet en spreekt die tegen: het scherm krimpt dan niet meer
   mee met het venster. Hier weer rechtgezet, in dezelfde media-vraag,
   zodat er in app.css niets weg hoeft. */
@media (max-width: 900px) {
    .scherm {
        flex: 1 1 auto;
    }
}

/* Balk met bladerknoppen en, in de tabmodus, de tabstrook. */
.scherm-kop {
    flex: 0 0 auto;
    z-index: 2;
}

.scherm-midden {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

/* In de tabmodus schuift niet dit blok maar het tabpaneel erbinnen; anders
   krijg je twee schuifbalken naast elkaar. Zie het style-blok in
   Onderhoudsraamwerk.razor. */
.scherm-tabs > .scherm-midden {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Alleen vastzetten. De opmaak van de knoppenbalk (kleuren, ruimte,
   uitlijning) blijft van .scherm-knoppen; die klasse staat er nog naast. */
.scherm-voet {
    flex: 0 0 auto;
    z-index: 2;
}


/* === 3. Diagnose ==================================================
   Zet tijdelijk class="scherm scherm-diagnose" op het scherm, of typ in
   de console:

       document.querySelector('.scherm').classList.add('scherm-diagnose')

   Elk deel krijgt dan een gekleurde rand met zijn naam erbij, zodat in
   een oogopslag zichtbaar is welk blok de hoogte opeet.

   Klopt de hoogte van het geheel niet, kijk dan een laag hoger:

       getComputedStyle(document.querySelector('.beheer')).height

   Dat hoort de vensterhoogte gedeeld door de schaal te zijn. Staat er de
   kale vensterhoogte, dan overschrijft er iets de regel uit app.css.
   ------------------------------------------------------------------ */

.scherm-diagnose > * {
    position: relative;
}

.scherm-diagnose > .scherm-kop    { outline: 2px dashed #1f6feb; }
.scherm-diagnose > .scherm-midden { outline: 2px dashed #1a7f37; }
.scherm-diagnose > .scherm-voet   { outline: 2px dashed #bf3989; }

.scherm-diagnose > .scherm-kop::after,
.scherm-diagnose > .scherm-midden::after,
.scherm-diagnose > .scherm-voet::after {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    padding: 1px 4px;
    font: 11px/1.4 monospace;
    color: #fff;
    background: #333;
    pointer-events: none;
}

.scherm-diagnose > .scherm-kop::after    { content: "scherm-kop (vast)"; }
.scherm-diagnose > .scherm-midden::after { content: "scherm-midden (schuift)"; }
.scherm-diagnose > .scherm-voet::after   { content: "scherm-voet (vast)"; }