/* ===========================================================================
   vakblok.css - opmaak van de CMR-vakken.

   Los bestand en niet bijgeschreven in app.css: dit hoort bij een handvol
   componenten (Vakblok, Vakregel, Vakmemo) en zo is in een oogopslag te zien
   wat erbij hoort. Wordt ingeladen in Components/App.razor, na app.css.

   Uitgangspunt is het oude scherm: een vak is een kadertje met een kop en
   daaronder regels die tegen elkaar aan staan. Een adresvak wordt daarmee
   ongeveer 130 bij 280 pixels, tegen ruim 200 pixels hoogte plus een
   labelkolom van 170 breed in de gewone veldopmaak.
   =========================================================================== */

:root {
    /* Op een plek, want de hoogte van een regel bepaalt ook het lijnenpatroon
       van een memovak; lopen die twee uiteen, dan zie je dat meteen. */
    --vakregel-hoogte: 22px;
    --vakblok-breedte: 280px;
    --vakblok-rand: #b9c2cd;
    --vakblok-kop: #eef2f6;
    --vakblok-focus: #fffbe0;
    --vakblok-fout: #c0392b;
}

/* --------------------------------------------------------------- het blok */

.vakblok {
    width: var(--vakblok-breedte);
    min-width: var(--vakblok-breedte);
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid var(--vakblok-rand);
    border-radius: 3px;
    /* De rand van de regels loopt tot aan het kader; zonder dit steken de
       hoeken van de bovenste en onderste regel er net buiten. */
    overflow: hidden;
}

.vakblok-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 24px;
    padding: 3px 6px;
    background: var(--vakblok-kop);
    border-bottom: 1px solid var(--vakblok-rand);
}

.vakblok-titel {
    font-size: 12px;
    font-weight: 600;
    color: #2c3a4b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Het zoekveld in de kop kleiner dan elders: het staat in een balkje van 24
   pixels hoog en mag dat niet uit elkaar duwen. */
.vakblok-kopknop .zoekveld-kode {
    height: 20px;
    width: 90px;
    padding: 0 4px;
    font-size: 12px;
}

.vakblok-kopknop .rz-button {
    min-width: 22px;
    height: 20px;
    padding: 0 4px;
}

/* Verplicht vak: rode streep onder de kop, zoals in het oude scherm. */
.vakblok-verplicht .vakblok-kop {
    border-bottom: 2px solid var(--vakblok-fout);
}

/* Alleen lezen: de achtergrond van een infoblok, zodat je aan de kleur ziet
   dat er niets in te typen valt. */
.vakblok-lezen {
    background: #f7f9fb;
}

.vakblok-regels {
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------- de regels */

.vakregel {
    width: 100%;
    height: var(--vakregel-hoogte);
    padding: 0 5px;
    font-family: inherit;
    font-size: 12.5px;
    color: #1f2a37;
    background: transparent;
    /* Geen eigen rand, alleen een lijn onder: zo staan de regels tegen elkaar
       aan in plaats van dat elke regel een eigen hokje wordt. */
    border: 0;
    border-bottom: 1px solid #e2e7ec;
    border-radius: 0;
    outline: 0;
    box-sizing: border-box;
}

.vakblok-regels > .vakregel:last-child,
.vakblok-regels > .vakregel-duo:last-child .vakregel {
    border-bottom: 0;
}

/* Focus als achtergrondkleur en NIET als rand: een rand van een pixel laat
   alle regels eronder een pixel opschuiven, en dan staat het blok te
   trillen bij het doorlopen met Enter. */
.vakregel:focus {
    background: var(--vakblok-focus);
}

.vakregel[readonly] {
    color: #45505f;
    cursor: default;
}

.vakregel::placeholder {
    color: #9aa6b2;
    font-style: italic;
}

.vakregel.fout {
    background: #fdecea;
    box-shadow: inset 2px 0 0 var(--vakblok-fout);
}

/* Twee regels naast elkaar: postcode en plaats. */
.vakregel-duo {
    display: flex;
    border-bottom: 1px solid #e2e7ec;
}

.vakregel-duo .vakregel {
    border-bottom: 0;
}

.vakregel-duo .vakregel + .vakregel {
    border-left: 1px solid #e2e7ec;
}

/* ------------------------------------------------------------ memovakken */

.vakmemo {
    width: 100%;
    padding: 0 5px;
    font-family: inherit;
    font-size: 12.5px;
    line-height: var(--vakregel-hoogte);
    color: #1f2a37;
    border: 0;
    outline: 0;
    resize: vertical;
    box-sizing: border-box;

    /* Lijnenpatroon op dezelfde regelhoogte als een Vakregel, zodat een
       memovak naast een adresvak niet uit de toon valt. */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--vakregel-hoogte) - 1px),
        #e2e7ec calc(var(--vakregel-hoogte) - 1px),
        #e2e7ec var(--vakregel-hoogte));
    background-attachment: local;
}

.vakmemo:focus {
    background-color: var(--vakblok-focus);
}

.vakmemo.fout {
    background-color: #fdecea;
}

.vakmemo::placeholder {
    color: #9aa6b2;
    font-style: italic;
}

/* --------------------------------------- Radzen-veld binnen een vakblok */

/* Voor de vakken met een datum of een bedrag (vak 15, 20, 21) past geen kale
   regel. Zet zo'n veld in een .vakregel-veld, dan houdt het dezelfde hoogte
   aan als de regels eromheen. */
.vakregel-veld {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 1px 4px;
    border-bottom: 1px solid #e2e7ec;
}

.vakregel-veld > label {
    width: 88px;
    flex: none;
    font-size: 11.5px;
    color: #6b7784;
}

.vakregel-veld .rz-textbox,
.vakregel-veld .rz-numeric,
.vakregel-veld .rz-calendar,
.vakregel-veld input {
    height: var(--vakregel-hoogte);
    font-size: 12.5px;
}

.vakblok-regels > .vakregel-veld:last-child {
    border-bottom: 0;
}

/* Een waarde die alleen getoond wordt (CMR-nummer, ordernummer, volgnummer):
   zelfde regelhoogte als de rest, maar niet aanklikbaar. */
.vaknummer {
    font-size: 12.5px;
    font-weight: 600;
    color: #1f2a37;
}

/* Het blad van de CMR. Een beetje lucht tussen de stroken en het regelraster,
   anders plakken de blokken aan de tabbladrand. */
.cmrblad > .vakstrook {
    margin-bottom: 6px;
}

/* ----------------------------------------------- de blokken op het blad */

/* De stroken vakken boven en onder het regelraster. auto-fit verdeelt zichzelf:
   op het kantoorscherm vier of vijf blokken naast elkaar, op de laptop twee of
   drie, zonder dat er iets ingesteld hoeft te worden. Dat is meteen het
   antwoord op de indeling die niet klopte bij het wisselen van scherm. */
.vakstrook {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--vakblok-breedte), 1fr));
    gap: 0 14px;
    align-items: start;
    padding-top: 8px;
}

/* De lijst met bevindingen boven het formulier na een mislukte akkoordpoging. */
.vakfouten {
    margin: 8px 0 12px;
    padding: 8px 12px;
    background: #fdecea;
    border-left: 3px solid var(--vakblok-fout);
    border-radius: 3px;
}

.vakfouten ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

.vakfouten li {
    font-size: 13px;
    color: #7d2418;
}

/* ===========================================================================
   Het CMR-blad: drie kolommen met een kader, sleepbaar
   ===========================================================================

   .vakstrook verdeelt zichzelf met auto-fit: op een breed scherm worden dat
   vier of vijf blokken naast elkaar. Voor het CMR-blad is dat niet wat we
   willen - daar horen de vakken in drie kolommen te staan, met per kolom een
   paar blokken onder elkaar (vak 1/2a/3/4 boven elkaar in kolom 1). Vandaar
   deze variant NAAST .vakstrook: de andere schermen veranderen niet mee.

   De breedte van kolom 1 en 2 staat als variabele op .cmrblad, zodat de strook
   boven en de strook onder het regelraster dezelfde indeling aanhouden. Js
   /vakblok.js zet die variabelen bij het slepen; het scherm bewaart ze per
   gebruiker via de Indelingdienst. Kolom 3 krijgt wat overblijft.

   Onder 1100 pixels vervalt het slepen en gaan de kolommen onder elkaar. Dat
   is geen tekortkoming maar de bedoeling: op een laptopscherm passen drie
   kolommen van een vakblok niet, en een indeling die je daar zelf instelt zou
   op kantoor toch weer niet kloppen. */

.cmrblad {
    /* Breedte van kolom 1 en 2 als percentage van de strook; kolom 3 krijgt
       wat overblijft. */
    --kol1: 33%;
    --kol2: 33%;

    /* Breedte van de zoekkolom binnen elk van die drie kolommen. In pixels en
       niet in procenten: een zoekveld is een kode van een paar tekens plus een
       loepje, en dat wordt niet breder omdat het venster breder wordt. Samen
       met de drie kolommen erboven zijn dit de zes kolommen van het blad. */
    --zoek1: 118px;
    --zoek2: 118px;
    --zoek3: 118px;
}

.vakstrook-drie {
    display: grid;
    grid-template-columns: var(--kol1) 9px var(--kol2) 9px minmax(0, 1fr);
    align-items: start;
    padding-top: 8px;
}

/* Welke zoekbreedte er in deze kolom geldt. De vakken binnen een kolom pakken
   hem allemaal op via var(--zoek), zodat de zoekvelden van vak 1, 2a, 3 en 4
   precies onder elkaar staan - dat is wat het tot een kolom maakt. */
.vakkolom[data-kol="1"] { --zoek: var(--zoek1); }
.vakkolom[data-kol="2"] { --zoek: var(--zoek2); }
.vakkolom[data-kol="3"] { --zoek: var(--zoek3); }

/* Een kolom, zelf verdeeld in twee: links de zoekvelden, rechts de vakken.
   Dat zijn samen de zes kolommen van het blad. Het kader zit alleen om de
   rechterhelft; de zoekkolom staat er kaal naast.

   EEN RASTER EN GEEN TWEE LOSSE KOLOMMEN. Elk zoekveld hoort op dezelfde hoogte
   te staan als het vak waar het bij hoort, en die vakken zijn niet even hoog -
   vak 1 is vijf regels, vak 3 is er twee. In een raster vormt elk paar een
   eigen rij, dus de rijhoogte volgt vanzelf het vak. Met twee losse kolommen
   naast elkaar zouden ze na het eerste vak al uit de pas lopen. */
.vakkolom {
    position: relative;
    display: grid;
    grid-template-columns: var(--zoek, 118px) 5px minmax(0, 1fr);
    align-items: start;
    min-width: 0;
    padding-top: 8px;
}

.vakkolom > .vakzoek {
    grid-column: 1;
    /* Ruimte rechts, anders plakt het loepje tegen de kaderrand. */
    padding: 3px 10px 0 0;
    min-width: 0;
}

/* In een kolom bepaalt de kolom de breedte, niet het blok. Zonder dit houdt
   elk blok zijn vaste breedte en blijft er rechts in de kolom ruimte over.
   De bovengrens houdt een adresvak leesbaar op een breed scherm: een naamregel
   van 700 pixels leest niet prettiger, alleen leger. De marges houden de
   vakken los van de kaderrand. */
.vakkolom > .vakblok {
    grid-column: 3;
    width: auto;
    min-width: 0;
    max-width: 520px;
    margin: 0 8px 10px;
}

/* Het kader om de NAW-kolom.

   ABSOLUUT GEPOSITIONEERD en geen rand op een rastercel. Een cel die over alle
   rijen heen loopt vraagt om grid-row: 1 / -1, en dat werkt alleen bij rijen
   die vooraf vastliggen. Het aantal vakken verschilt per kolom (vier in kolom
   1, twee in kolom 2), dus die rijen ontstaan pas tijdens het tekenen. Zo loopt
   het kader altijd van boven tot onder door.

   Geen achtergrond en pointer-events uit: het ligt over de vakken heen, en die
   moeten gewoon aan te klikken blijven. */
.vakkolom-kader {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--zoek, 118px);
    right: 0;
    border: 1px solid var(--vakblok-rand);
    border-radius: 3px;
    pointer-events: none;
}

/* De linkerrand van dat kader is tegelijk de sleepgreep. Zelf geen kleur - de
   rand van het kader is al de lijn die je ziet; dit is alleen het gebied waar
   de muis hem kan pakken. */
.vakkolom-greep {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--zoek, 118px);
    width: 5px;
    margin-left: -2px;
    cursor: col-resize;
    background: transparent;
    touch-action: none;
    user-select: none;
}

.vakkolom-greep:hover {
    background: linear-gradient(to right, transparent 2px, #7f8c9b 2px, #7f8c9b 5px);
}

/* De greep tussen twee kolommen. Smal, maar met een aanwijzer en een lijntje
   zodat zichtbaar is dat er iets te pakken valt. */
.vaksleep {
    align-self: stretch;
    min-height: 40px;
    cursor: col-resize;
    background:
        linear-gradient(to bottom, transparent 8px, var(--vakblok-rand) 8px,
                        var(--vakblok-rand) calc(100% - 8px), transparent calc(100% - 8px))
        center / 1px 100% no-repeat;
    /* Tijdens het slepen mag de muis geen tekst gaan selecteren. */
    touch-action: none;
    user-select: none;
}

.vaksleep:hover {
    background:
        linear-gradient(to bottom, transparent 4px, #7f8c9b 4px,
                        #7f8c9b calc(100% - 4px), transparent calc(100% - 4px))
        center / 3px 100% no-repeat;
}

@media (max-width: 1100px) {
    .vakstrook-drie {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px 0;
    }

    .vaksleep {
        display: none;
    }
}

/* Het regelraster tussen de twee stroken in. */
.cmrregels {
    margin: 6px 0 10px;
}

/* --------------------------------------------- de zoekkolom naast een vak */

/* Het zoekveld staat kaal in zijn cel: geen eigen kadertje, want het kader om
   de kolom en de doorlopende lijn maken al duidelijk waar het bij hoort. Een
   vak zonder zoekveld heeft een lege cel - zonder die cel zou zijn kader over
   de zoekkolom heen schuiven en klopt de uitlijning niet meer. */
.vakzoek .zoekveld-regel {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.vakzoek .zoekveld-kode {
    flex: 1 1 auto;
    min-width: 0;
    height: 22px;
    font-size: 12.5px;
}

.vakzoek .rz-button {
    flex: none;
    min-width: 24px;
    height: 22px;
    padding: 0 4px;
}

/* Op een smal scherm staan de kolommen onder elkaar en vervalt het slepen; het
   zoekveld komt dan boven zijn vak te staan. */
@media (max-width: 1100px) {
    .vakkolom {
        grid-template-columns: minmax(0, 1fr);
    }

    .vakkolom > .vakzoek,
    .vakkolom > .vakblok {
        grid-column: 1;
    }

    .vakkolom-greep,
    .vakkolom-kader {
        display: none;
    }
}