.ptr-startstopklok {
    padding: 0.25rem 0 0.25rem 0;
}

.ptr-startstopklok-acties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Segmentenlijst - elk afgerond Start/Stop-segment met een verwijderknop. Geen paginering, geen
   bovengrens aan het aantal segmenten: bij meer dan 5-7 items scrollt de lijst binnen een vaste
   max-height in plaats van te blijven groeien. */
.ptr-segmenten-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 280px;
    overflow-y: auto;
    margin-top: 0.25rem;
}

.ptr-segment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.2rem;
}

/* Scheidingslijn tussen segmenten - zonder deze lijn was op mobiel niet direct duidelijk welk
   kruisje bij welke regel hoort zodra er meerdere items onder elkaar staan. Zelfde precedent/kleur
   als .pod-activiteit:not(:last-child) in orderdetail.css - geen lijn onder het laatste item, anders
   sluit de lijst af met een overbodige lijn vlak vóór de Totaal-regel. */
.ptr-segment-item:not(:last-child) {
    border-bottom: var(--rz-panel-border, 1px solid #ddd);
}

.ptr-segment-tijden {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Radzen's rz-text-body2 heeft een eigen default margin-bottom op het onderliggende <p> - dat duwt de
   tekst omlaag t.o.v. de prullenbak-knop ernaast, ondanks align-items: center op .ptr-segment-item.
   Scoped op dit exacte pad (niet globaal op alle rz-text-body2 in de RCL) om elders geen marges te
   wijzigen die daar wel gewenst zijn. */
.ptr-segment-tijden p.rz-text-body2 {
    margin: 0;
}

.ptr-startstopklok-info {
    display: flex;
}

/* Duur en bedrag op één regel: de duur komt eerst, het laatste element staat rechts. Is er geen bedrag,
   dan is de duur het laatste element en staat die dus rechts. */
.ptr-duur-bedrag {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 0.25rem;
    margin-top: 0.25rem;
}

/* Radzen's rz-text-body2 heeft een eigen marge boven en onder; die zou de duurregel hoger maken dan het bedrag. */
.ptr-duur-bedrag p.rz-text-body2 {
    margin: 0;
}

.ptr-duur-bedrag > :last-child {
    margin-left: auto;
}

/* Modus-toggle (Start/Stop vs Handmatig) + optionele "Verwacht: X uur"-tekst op dezelfde rij - dat
   laatste is puur informatief (direct boeken vanuit een activiteit) en mag geen extra regelhoogte
   kosten, zie orderdetail-design.md. */
.ptr-modus-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

/* Dagnorm-waarschuwing onder de Totaal-regel van de segmentenlijst. */
.ptr-dagnorm-waarschuwing {
    margin-top: 0.5rem;
}

/* Declarabel: gewone checkbox met label ernaast (DeclarabelToggle.razor). */
.ptr-declarabel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Keuze "Huidig tarief gebruiken" onder het bedrag bij het bewerken van een boeking. */
.ptr-huidig-tarief {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.ptr-timepicker-popup {
    display: none;
    position: absolute;
    overflow: hidden;
    height: max-content;
    width: max-content;
    border: var(--rz-panel-border);
    background-color: var(--rz-panel-background-color);
    box-shadow: var(--rz-panel-shadow);
    border-radius: var(--rz-border-radius)
}

.ptr-timepicker {
    .rz-multiselect-item-content {
        white-space: nowrap;
    }
}

/* Radzen validatie van PRadzenField - rode rand op rz-form-field-content. */
.ptr-field-error .rz-form-field-content {
    border-color: var(--rz-danger) !important;
}

/* Generieke tekenteller (PCharCounter.razor) - niet veld-specifiek, elk veld met een tekenlimiet geeft
   zijn eigen Aantal/Max door. Rendert in PRadzenField's HelperContent-slot - positionering (rechts
   uitgelijnd, naast een eventuele foutmelding) loopt via .ptr-field-helper hieronder, hier alleen
   nog de teller's eigen tekststijl. */
.ptr-teken-teller {
    font-size: 0.75rem;
}

/* Helper-slot van PRadzenField: foutmelding + optionele HelperContent (bv. een tekenteller) samen
   rechts uitgelijnd - foutmelding staat qua brontekst-volgorde eerst, dus komt op het scherm links
   van de teller te staan. */
.ptr-field-helper {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0.5rem;
}