/* Opmaak van BezoekPlanningPaneel.razor. Alle classes beginnen met pbp- en gelden alleen binnen .pbp-accordeon,
   zodat andere accordeons en schermen niet geraakt worden. */

/* Geen ronding en geen schaduw rond het accordeon; de lijn tussen de blokken blijft die van het Radzen-thema
   (--rz-accordion-item-border). Opvulling van rz-accordion-content: 0, onder 0.25rem. Deze variabelen staan op het
   accordeon en niet op een item, omdat de inhoud naast de kop staat en niet erin. */
.pbp-accordeon {
    width: 100%;
    --rz-accordion-border-radius: 0;
    --rz-accordion-shadow: none;
    --rz-accordion-content-padding-inline: 0;
    --rz-accordion-content-padding-block: 0 0.25rem;
}

/* Kop van een blok. De kleur komt via de variabelen van het Radzen-accordeon, zodat tekst en chevron (ook bij hover)
   dezelfde kleur krijgen. Achtergrond: vaste waarde van --rz-primary in het lichte thema van J1mmy (app-material.css),
   zodat de kop in licht en donker thema gelijk is. De chevron staat links, vóór de naam (themastandaard is rechts). */
.pbp-accordeon .rz-accordion-header {
    --rz-accordion-item-background-color: #0C2C65;
    --rz-accordion-item-color: var(--rz-primary-lighter);
    --rz-accordion-hover-color: var(--rz-primary-lighter);
    --rz-accordion-toggle-icon-order: 0;
    --rz-accordion-item-padding-block: 0.625rem;
    --rz-accordion-item-padding-inline: 0.25rem;
}

/* Zoals PItemView (app.css, .p-accordion-main): de knop in de kop vult de volle breedte, zodat de inhoud van de kop
   met justify-content: space-between de plus helemaal rechts kan zetten. */
.pbp-accordeon .rz-accordion-header > button {
    width: 100%;
    padding: 0.25rem;
}

.pbp-accordeon .pbp-kop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.pbp-accordeon .pbp-kop-naam {
    margin: 0;
    color: inherit;
}

.pbp-accordeon .pbp-kop-plus {
   flex-grow: 0 !important;
}

.pbp-accordeon .pbp-regels {
    margin-left: 0.375rem;
}

.pbp-accordeon .pbp-regel {
    padding: 0.125rem 0.25rem;
}

/* Eén rij: vinkje, drie even brede velden en een knoppenkolom met altijd ruimte voor twee knoppen. */
.pbp-accordeon .pbp-regel-rij {
    display: grid;
    align-items: end;
    gap: 0.5rem;
    grid-template-columns: max-content repeat(3, minmax(0, 1fr)) max-content;
}

.pbp-accordeon .pbp-regel-rij.pbp-verwijderd {
    text-decoration: line-through;
}

/* Cel voor het vinkje en de knoppen: onderrand gelijk aan de onderrand van het veld, hoogte gelijk aan het invoervak
   (--rz-input-height uit het thema), inhoud daarin gecentreerd. Het veld heeft onder het invoervak geen hulptekst. */
.pbp-accordeon .pbp-cel {
    align-self: end;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: var(--rz-input-height, auto);
}

.pbp-accordeon .pbp-datum {
    width: 100%;
}

/* Reserveert de plek van een knop of vinkje dat er niet staat, zodat niets verschuift. */
.pbp-accordeon .pbp-onzichtbaar {
    visibility: hidden;
}

.pbp-accordeon .pbp-fout {
    margin: 0;
}

/* Uren per datum, onder het datumveld: dezelfde eerste kolom (onzichtbaar vinkje) en tussenruimte als de regel. */
.pbp-accordeon .pbp-uren {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0 0.25rem 0.125rem 0.25rem;
    font-size: 0.75rem;
}

.pbp-accordeon .pbp-uren.pbp-uren-overschreden {
    color: var(--rz-on-warning-lighter, var(--rz-warning));
}

/* Velden van de modal Bezoekdetails (BezoekPlanningBezoekdetailsVelden.razor). Een rij is het veld met rechts de herstelknop. */
.pbp-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pbp-details .pbp-detail-rij {
    display: flex;
    align-items: flex-end;
    gap: 0;
}

/* Bijzonderheden: alleen verticaal te vergroten. */
.pbp-details .pbp-detail-memo {
    resize: vertical;
}

/* Plek van de herstelknop: altijd aanwezig, zo hoog als het invoervak (--rz-input-height) en de knop daarin verticaal gecentreerd,
   zodat hij naast het invoerveld staat en niet naast label of melding. */
.pbp-details .pbp-detail-herstel {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: var(--rz-input-height, auto);
    color: var(--rz-text-secondary-color);
}

.pbp-details .pbp-detail-herstel .rz-button,
.pbp-details .pbp-detail-herstel .rzi {
    color: var(--rz-text-secondary-color);
}

.pbp-details .pbp-detail-herstel-verborgen {
    visibility: hidden;
}

/* Als de wrapper van PFormItem: relatief, zodat de melding eronder kan staan zonder de indeling te verschuiven. */
.pbp-details .pbp-detail-veld {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.pbp-details .pbp-detail-veld .rz-textbox,
.pbp-details .pbp-detail-veld .rz-textarea {
    width: 100%;
}

/* Rode rand en label bij een leeg verplicht veld, zoals p-validation-border en p-validation-color (app.css). */
.pbp-details .pbp-detail-fout .rz-form-field-content {
    border-color: var(--rz-danger) !important;
}

.pbp-details .pbp-detail-fout .rz-form-field-label {
    color: var(--rz-danger) !important;
}

/* De melding zoals PFormItemValidate: onder het veld, links ingesprongen. */
.pbp-details .pbp-detail-melding {
    position: absolute;
    left: 0;
    bottom: -0.6rem;
    margin: 0;
    padding: 0 0 1rem 1rem;
    line-height: 1px;
}

/* Melding dat een bezoek al begonnen of geweest is: rood, dezelfde kleur als de prullenbak (ButtonStyle.Danger). */
.pbp-accordeon .pbp-uren.pbp-uren-fout {
    color: var(--rz-danger);
}