/* Presence variants participant overview (instrcreate manageVeranstaltungenUsers)
   — Figma "Teilnehmer verwalten" (Step-4.1/4.2). */

/* ── Global self-registration settings card ─────────────────────────── */

.rd-vpu-settings {
    padding: var(--rd-spacing-sm) var(--rd-spacing-x-big);
    margin-bottom: var(--rd-spacing-x-big);
    border: 1px solid var(--rd-border-gray);
    border-radius: var(--rd-borderradius-border-md);
    background: var(--rd-list-default-light);
}

.rd-vpu-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rd-spacing-md);
    text-align: left;
}

.rd-vpu-settings-headline label {
    font-weight: 700;
    font-size: 14px;
    color: var(--rd-font-dark);
}

.rd-vpu-settings-subtext {
    display: block;
    font-size: 11px;
    color: var(--rd-gray-500);
}

.rd-vpu-settings-divider {
    height: 1px;
    margin: var(--rd-spacing-sm) 0 var(--rd-spacing-md);
    background: var(--rd-border-gray);
}

/* Figma: label block in a fixed right-aligned column, control directly next
   to it — NOT stretched to the far right. */
.rd-vpu-settings-row {
    display: grid;
    grid-template-columns: 300px auto;
    align-items: center;
    gap: var(--rd-spacing-md);
    padding: var(--rd-spacing-x-sm) 0;
}

.rd-vpu-settings-label {
    text-align: right;
}

.rd-vpu-settings-label label {
    font-weight: 700;
    font-size: 12px;
    color: var(--rd-font-dark);
}

.rd-vpu-settings-control {
    display: flex;
    align-items: center;
    justify-self: start;
}

/* ── Text links (secondary blue in settings, primary pink in rows) ──── */

.rd-vpu-textlink {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-spacing-x-sm);
    font-size: 14px;
    color: var(--rd-secondary-active);
    cursor: pointer;
    white-space: nowrap;
}

.rd-vpu-textlink-primary {
    color: var(--rd-primary-active);
}

/* Pencil icon — UX-specified asset. */
.rd-vpu-icon-pencil {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    mask-image: url("/src/img/2024/svg/icons/rd-icon-pencil.svg");
    -webkit-mask-image: url("/src/img/2024/svg/icons/rd-icon-pencil.svg");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: 50%;
    -webkit-mask-position: 50%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* ── Course head ────────────────────────────────────────────────────── */

.rd-vpu-course-head {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-md);
    padding: var(--rd-spacing-md) var(--rd-spacing-x-big);
    margin-bottom: var(--rd-spacing-md);
    border: 1px solid var(--rd-border-gray);
    border-radius: var(--rd-borderradius-border-md);
    background: var(--rd-list-default-light);
}

.rd-vpu-course-img {
    flex: 0 0 auto;
    width: 64px;
    height: 48px;
    border-radius: var(--rd-borderradius-border-md);
    background-size: cover;
    background-position: center;
    background-color: var(--rd-list-default-dark);
}

.rd-vpu-course-title {
    font-weight: 700;
    color: var(--rd-font-dark);
}

/* ── Variants: standalone header bar + row cards (Figma) ────────────── */

.rd-vpu-grid {
    display: grid;
    grid-template-columns: 28px minmax(140px, 0.8fr) minmax(220px, 1.4fr) minmax(120px, 1fr) minmax(110px, 0.7fr) minmax(80px, 0.5fr) auto 28px;
    align-items: center;
    gap: var(--rd-spacing-x-big);
}

.rd-vpu-tablehead {
    padding: var(--rd-spacing-x-sm) var(--rd-spacing-x-big);
}

.rd-vpu-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-spacing-xx-sm);
    padding: 0;
    border: 0;
    background: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--rd-font-dark);
    cursor: pointer;
    justify-self: start;
}

.rd-vpu-sort-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: var(--rd-font-dark);
    mask-image: url("/src/img/2024/svg/icons/rd-icon-sort-descending.svg");
    -webkit-mask-image: url("/src/img/2024/svg/icons/rd-icon-sort-descending.svg");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: 50%;
    -webkit-mask-position: 50%;
}

.rd-vpu-sort[data-dir="asc"] .rd-vpu-sort-icon {
    mask-image: url("/src/img/2024/svg/icons/rd-icon-sort-ascending.svg");
    -webkit-mask-image: url("/src/img/2024/svg/icons/rd-icon-sort-ascending.svg");
    background-color: var(--rd-primary-active);
}

.rd-vpu-sort[data-dir="desc"] .rd-vpu-sort-icon {
    background-color: var(--rd-primary-active);
}

.rd-vpu-rows {
    border-radius: var(--rd-borderradius-border-md);
    background: var(--rd-list-default-light);
    overflow: hidden;
}

.rd-vpu-row {
    min-height: 72px;
    padding: var(--rd-spacing-md) var(--rd-spacing-x-big);
    border-top: 1px solid var(--rd-border-gray);
    font-size: 11px;
    color: var(--rd-gray-2);
}

.rd-vpu-row:first-child {
    border-top: 0;
}

.rd-vpu-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--rd-font-dark);
}

.rd-vpu-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-spacing-x-sm);
    font-weight: 600;
}

.rd-vpu-cell.rd-icon-before::before {
    --rd-icon-color: var(--rd-gray-2);
}

.rd-vpu-actions {
    justify-self: end;
    white-space: nowrap;
}

.rd-vpu-trash {
    text-align: center;
}

.rd-vpu-trash .rd-icon-trash {
    color: var(--rd-primary-active);
    cursor: pointer;
}

/* Termine list / accordion (up to 3 visible, rest expandable — Figma dev note) */

.rd-vpu-termine-list {
    display: flex;
    flex-direction: column;
    gap: var(--rd-spacing-xx-sm);
}

/* Follow-up Termin lines carry no calendar icon; indent them so the text
   aligns with the first line (icon 16px + 8px gap). */
.rd-vpu-termin-follow {
    padding-left: var(--rd-spacing-x-big);
}

.rd-vpu-termine summary {
    cursor: pointer;
    list-style: none;
}

.rd-vpu-termine summary::-webkit-details-marker {
    display: none;
}

.rd-vpu-termine-more {
    display: block;
    font-size: 11px;
    color: var(--rd-secondary-active);
}

.rd-vpu-termine[open] .rd-vpu-termine-more {
    display: none;
}

.rd-vpu-termine .rd-vpu-termine-list {
    margin-top: var(--rd-spacing-xx-sm);
}

/* ── Legacy Warenkorb (without isEntepriseBeta): course head + table ── */

.rd-vpu-table-wrap {
    padding: var(--rd-spacing-x-sm) var(--rd-spacing-x-big) var(--rd-spacing-md);
    border: 1px solid var(--rd-border-gray);
    border-radius: var(--rd-borderradius-border-md);
    background: var(--rd-list-default-light);
}

.rd-vpu-table {
    width: 100%;
    border-collapse: collapse;
}

.rd-vpu-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--rd-input-hover);
    padding: var(--rd-spacing-sm);
}

.rd-vpu-table td {
    padding: var(--rd-spacing-md) var(--rd-spacing-sm);
    border-top: 1px solid var(--rd-border-gray);
    color: var(--rd-font-dark);
    font-size: 14px;
    vertical-align: middle;
}

.rd-vpu-check {
    width: 40px;
}

.rd-vpu-table .rd-vpu-trash {
    width: 40px;
}

.rd-vpu-table .rd-vpu-trash .rd-icon-trash {
    color: var(--rd-input-hover);
}

.rd-vpu-table .rd-vpu-trash .rd-icon-trash:hover {
    color: var(--rd-primary-active);
}

.rd-vpu-table .rd-vpu-cell.rd-icon-before::before {
    --rd-icon-color: var(--rd-input-hover);
}

/* ── Dialogs (Gruppen auswählen / Abschluss bestätigen) ─────────────── */

.rd-vpu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--rd-base-fg-bg-overlay) 80%, transparent);
}

.rd-vpu-dialog {
    position: relative;
    text-align: left;
    width: 800px;
    max-width: calc(100vw - 2 * var(--rd-spacing-x-big));
    max-height: calc(100vh - 2 * var(--rd-spacing-x-big));
    display: flex;
    flex-direction: column;
    padding: var(--rd-spacing-lg);
    border-radius: var(--rd-borderradius-border-lg);
    background: var(--rd-list-default-light);
}

.rd-vpu-dialog-small {
    width: 560px;
}

.rd-vpu-dialog-close {
    position: absolute;
    top: var(--rd-spacing-big);
    right: var(--rd-spacing-big);
    width: 20px;
    height: 20px;
    background-color: var(--rd-primary-active);
    mask-image: url("/src/img/2021/svg/rd-close.svg");
    -webkit-mask-image: url("/src/img/2021/svg/rd-close.svg");
    mask-size: 14px;
    -webkit-mask-size: 14px;
    mask-position: 50%;
    -webkit-mask-position: 50%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    cursor: pointer;
}

/* Figma: title left-aligned at the top of the dialog. */
.rd-vpu-dialog-title {
    margin: 0 0 var(--rd-spacing-x-big);
    font-size: 22px;
    font-weight: 700;
    text-align: left;
    color: var(--rd-font-dark);
}

.rd-vpu-dialog-text {
    margin: 0 0 var(--rd-spacing-md);
    color: var(--rd-font-dark);
}

.rd-vpu-dialog-search {
    margin-bottom: var(--rd-spacing-md);
}

.rd-vpu-dialog-list-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--rd-spacing-md) var(--rd-spacing-x-big);
    border: 1px solid var(--rd-border-gray);
    border-radius: var(--rd-borderradius-border-md);
}

.rd-vpu-dialog-list-heading {
    padding-bottom: var(--rd-spacing-sm);
    border-bottom: 1px solid var(--rd-border-gray);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    color: var(--rd-font-dark);
}

/* Header row: select-all + counter + sortable "Häuser" column. */
.rd-vpu-role-header {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--rd-spacing-x-big);
    align-items: center;
    padding: var(--rd-spacing-x-sm) 0;
    background: var(--rd-list-default-dark);
}

.rd-vpu-role-header-left {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-spacing-md);
}

.rd-vpu-dialog-list {
    flex: 1 1 auto;
    min-height: 120px;
    overflow-y: auto;
}

.rd-vpu-role-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--rd-spacing-x-big);
    align-items: center;
    padding: var(--rd-spacing-sm) 0;
    border-bottom: 1px solid var(--rd-border-gray);
    cursor: pointer;
}

.rd-vpu-role-name-cell {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-spacing-md);
    min-width: 0;
}

.rd-vpu-role-name {
    font-weight: 600;
    color: var(--rd-font-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-vpu-role-haus {
    color: var(--rd-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Shared group marker — same rule as /groups/ (UserRoles.PUBLIC = 'Ja'). */
.rd-vpu-role-shared::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: var(--rd-primary-active);
    mask-image: url("/src/img/svg/global_icon.svg");
    -webkit-mask-image: url("/src/img/svg/global_icon.svg");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: 50%;
    -webkit-mask-position: 50%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    vertical-align: middle;
    margin-left: var(--rd-spacing-xx-sm);
}

.rd-vpu-dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--rd-spacing-x-big);
    padding-top: var(--rd-spacing-x-big);
}

/* Both footer buttons: same 40px height, no stray margins so they sit on one line. */
.rd-vpu-dialog-footer button {
    box-sizing: border-box;
    height: 40px;
    min-width: 160px;
    margin: 0;
    padding: 0 var(--rd-spacing-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}