/********************************Property values******************************/
.pvr-row {
    display: grid;
    align-items: center;
    gap: .25rem;
}

/* --- Desktop / tablet --- */
@media (min-width: 641px) {
    .pvr-row {
        grid-template-columns: 40% 40% 20%;
        grid-template-areas: "name value range";
    }

        .pvr-row > .name {
            grid-area: name;
        }

        .pvr-row > .val {
            grid-area: value;
        }

        .pvr-row > .range {
            grid-area: range;
        }
}

/* --- Mobiel --- */
@media (max-width: 640px) {
    .pvr-row {
        grid-template-columns: 50% 50%;
        grid-template-areas:
            "name value"
            "name range";
    }

        .pvr-row > .name {
            grid-area: name;
        }

        .pvr-row > .val {
            grid-area: value;
        }

        .pvr-row > .range {
            grid-area: range;
        }

        .pvr-row > .range {
            font-size: .95em;
            opacity: .9;
        }
}

/* Zelfde control-styling als in HeaderedValueView */
.pvr-row .val > .value-input,
.pvr-row .val > .value-readonly {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .25rem .5rem;
    border: 1px solid;
    border-radius: .375rem;
}


/******************************** Headered values ******************************/
.hv-row {
    display: grid;
    align-items: center;
    gap: .25rem;
}

    /* Kolom helpers (optioneel voor leesbaarheid) */
    .hv-row > .header {
    }

    .hv-row > .val {
    }

    .hv-row > .unit {
    }

/* --- Desktop / tablet --- */
@media (min-width: 641px) {
    .hv-row.has-unit {
        grid-template-columns: 40% 40% 20%;
    }

    .hv-row.no-unit {
        grid-template-columns: 40% 60%;
    }

        .hv-row.no-unit > .unit {
            display: none;
        }
}

/* --- Mobiel --- */
@media (max-width: 640px) {
    .hv-row.has-unit {
        grid-template-columns: 40% 40% 20%;
    }
    /* gelijk houden */
    .hv-row.no-unit {
        grid-template-columns: 50% 50%;
    }
        /* gevraagd: 50/50 */
        .hv-row.no-unit > .unit {
            display: none;
        }

    .hv-row .unit {
        font-size: .95em;
        opacity: .9;
    }
}

/* Consistente controls in de value-kolom */
.hv-row .val > .value-input,
.hv-row .val > .value-readonly {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .25rem .5rem;
    border: 1px solid;
    border-radius: .375rem;
}

/* Checkbox-grootte (bv. HeaderedBoolean) */
.hv-row .val .checkbox-input {
    transform: scale(2.0);
    margin: 8px;
}

/* Dropdown moet 100% breed in de value-kolom */
.hv-row .val .dropdown-wrapper {
    width: 100%;
}

    .hv-row .val .dropdown-wrapper > * {
        width: 100%;
    }


/******************************** Unheadered values ******************************/
.uhv-row {
    display: grid;
    align-items: center;
    gap: .25rem;
}

    /* Controls in value-kolom */
    .uhv-row .val > .value-input,
    .uhv-row .val > .value-readonly {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: .25rem .5rem;
        border: 1px solid;
        border-radius: .375rem;
    }

    /* Checkbox (UnHeaderedBoolean) */
    .uhv-row .val .checkbox-input {
        transform: scale(1.6);
        margin: 8px;
    }

    /* Dropdown 100% breed (Enum/MultiValue) */
    .uhv-row .val .dropdown-wrapper {
        width: 100%;
    }

        .uhv-row .val .dropdown-wrapper > * {
            width: 100%;
        }

/* Desktop / tablet */
@media (min-width: 641px) {
    .uhv-row.has-unit {
        grid-template-columns: 67% 33%;
    }

    .uhv-row.no-unit {
        grid-template-columns: 100%;
    }

        .uhv-row.no-unit > .unit {
            display: none;
        }
}

/* Mobiel */
@media (max-width: 640px) {
    .uhv-row.has-unit {
        grid-template-columns: 67% 33%;
    }
    /* zelfde verhouding */
    .uhv-row.no-unit {
        grid-template-columns: 100%;
    }

        .uhv-row.no-unit > .unit {
            display: none;
        }

    .uhv-row .unit {
        font-size: .95em;
        opacity: .9;
    }
}