/* Zuständigkeiten (Team view): department → one card per responsible person → their areas. */

.rd-tr {
    margin-bottom: var(--rd-spacing-md);
}

.rd-tr__empty {
    font-size: var(--rd-fontsize-3);
    color: var(--rd-gray-400);
    padding: var(--rd-spacing-x-sm) 0;
}

.rd-tr__link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--rd-secondary-active);
    cursor: pointer;
}

/* ---- Header and toolbar ---- */

.rd-tr__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rd-spacing-md);
    margin-bottom: var(--rd-spacing-md);
}

.rd-tr__heading {
    margin: 0;
    font-size: var(--rd-fontsize-9);
    font-weight: 700;
    color: var(--rd-font-dark);
}

.rd-tr__subtitle {
    margin: 2px 0 0;
    font-size: var(--rd-fontsize-4);
    color: var(--rd-gray-500);
}

.rd-tr__header-actions {
    display: flex;
    gap: var(--rd-spacing-x-sm);
}

.rd-tr__toolbar {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-sm);
    margin-bottom: var(--rd-spacing-md);
}

.rd-tr__search,
.rd-tr__filter {
    font: inherit;
    font-size: var(--rd-fontsize-4);
    padding: var(--rd-spacing-x-sm) var(--rd-spacing-sm);
    border: 1px solid var(--rd-gray-200);
    border-radius: var(--rd-borderradius-border-big);
    background: var(--rd-bg-primary);
    color: var(--rd-font-dark);
}

.rd-tr__search {
    flex: 0 1 400px;
}

.rd-tr__filter {
    flex: 0 1 240px;
}

.rd-tr__viewtoggle {
    margin-left: auto;
}

/* ---- Departments and person cards ---- */

.rd-tr__dept {
    margin-bottom: var(--rd-spacing-big);
}

.rd-tr__dept-name {
    margin: 0 0 var(--rd-spacing-x-sm);
    font-size: var(--rd-fontsize-6);
    font-weight: 700;
    color: var(--rd-font-dark);
}

.rd-tr__card {
    border: 1px solid var(--rd-gray-200);
    border-radius: var(--rd-borderradius-border-big);
    background: var(--rd-bg-primary);
    overflow: hidden;
}

.rd-tr__card + .rd-tr__card {
    margin-top: var(--rd-spacing-md);
}

.rd-tr__card.is-open {
    border-color: var(--rd-error-default);
}

.rd-tr__card-head {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-x-sm);
    padding: var(--rd-spacing-xx-sm) var(--rd-spacing-md);
    background: var(--rd-gray-100);
}

.rd-tr__card-head .rd-tr__avatar {
    width: 26px;
    height: 26px;
    font-size: var(--rd-fontsize-2);
}

.rd-tr__card.is-open .rd-tr__card-head {
    background: var(--rd-error-inactive);
}

.rd-tr__card-name {
    font-size: var(--rd-fontsize-4);
    font-weight: 700;
    color: var(--rd-font-dark);
}

.rd-tr__card.is-open .rd-tr__card-name {
    color: var(--rd-error-pressed);
}

.rd-tr__badge {
    padding: 2px var(--rd-spacing-x-sm);
    border-radius: var(--rd-borderradius-border-lg);
    background: var(--rd-secondary-inactive);
    font-size: var(--rd-fontsize-2);
    font-weight: 600;
    color: var(--rd-secondary-active);
}

.rd-tr__card-add {
    margin-left: auto;
    padding: 3px 10px;
}

.rd-tr__chevron {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--rd-borderradius-border-md);
    background: none;
    font-size: var(--rd-fontsize-6);
    line-height: 1;
    color: var(--rd-gray-500);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.rd-tr__chevron:hover {
    background: var(--rd-gray-200);
}

.rd-tr__chevron.is-collapsed {
    transform: rotate(180deg);
}

/* ---- Avatars ---- */

.rd-tr__avatar {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: var(--rd-fontsize-4);
    font-weight: 700;
}

.rd-tr__avatar.is-small {
    width: 26px;
    height: 26px;
    font-size: var(--rd-fontsize-2);
}

.rd-tr__avatar.is-empty {
    background: var(--rd-gray-100);
    color: var(--rd-gray-400);
}

.rd-tr__avatar--t0 { background: var(--rd-secondary-inactive); color: var(--rd-secondary-active); }
.rd-tr__avatar--t1 { background: var(--rd-primary-inactive); color: var(--rd-primary-pressed); }
.rd-tr__avatar--t2 { background: var(--rd-success-inactive); color: var(--rd-success-pressed); }
.rd-tr__avatar--t3 { background: var(--rd-warning-inactive); color: var(--rd-warning-pressed); }
.rd-tr__avatar--t4 { background: var(--rd-error-inactive); color: var(--rd-error-pressed); }
.rd-tr__avatar--t5 { background: var(--rd-gray-200); color: var(--rd-gray-700); }

/* ---- Rows: the same columns in every card ---- */

.rd-tr__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    padding: 0 var(--rd-spacing-md);
    border-top: 1px solid var(--rd-gray-100);
}

.rd-tr__grid--area {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
}

.rd-tr__grid > * {
    min-width: 0;
    padding: var(--rd-spacing-xx-sm) var(--rd-spacing-x-sm);
}

.rd-tr__grid > * + * {
    border-left: 1px solid var(--rd-gray-100);
}

.rd-tr__grid--head {
    border-top-color: var(--rd-gray-200);
    font-size: var(--rd-fontsize-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rd-gray-400);
}

.rd-tr__grid--head > * + * {
    border-left-color: transparent;
}

.rd-tr__row:hover {
    background: var(--rd-gray-100);
}

.rd-tr__area-name {
    text-align: left;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--rd-fontsize-4);
    font-weight: 500;
    color: var(--rd-font-dark);
    cursor: pointer;
}

.rd-tr__area-name:hover {
    color: var(--rd-secondary-active);
    text-decoration: underline;
}

.rd-tr__area-dept {
    margin-left: var(--rd-spacing-x-sm);
    font-size: var(--rd-fontsize-3);
    font-weight: 400;
    color: var(--rd-gray-400);
}

.rd-tr__person-cell {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-x-sm);
}

.rd-tr__select {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: var(--rd-fontsize-4);
    padding: var(--rd-spacing-xx-sm) var(--rd-spacing-x-sm);
    border: 1px solid transparent;
    border-radius: var(--rd-borderradius-border-md);
    background-color: transparent;
    color: var(--rd-font-dark);
    cursor: pointer;
}

.rd-tr__select:hover,
.rd-tr__select:focus {
    border-color: var(--rd-gray-200);
    background-color: var(--rd-bg-primary);
    outline: none;
}

.rd-tr__select.is-open {
    color: var(--rd-error-pressed);
}

.rd-tr__pill {
    flex: 0 1 auto;
    border-radius: var(--rd-borderradius-border-lg);
    background-color: var(--rd-gray-100);
    font-size: var(--rd-fontsize-3);
}

.rd-tr__pill.is-empty {
    color: var(--rd-gray-400);
}

/* ---- Save status ---- */

.rd-tr__status {
    margin-top: var(--rd-spacing-x-sm);
    font-size: var(--rd-fontsize-3);
    color: var(--rd-gray-500);
}

.rd-tr__status.is-saved::before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-right: var(--rd-spacing-x-sm);
    border-radius: 50%;
    background: var(--rd-success-default);
    font-size: var(--rd-fontsize-1);
    color: var(--rd-bg-primary);
}

.rd-tr__status.is-error {
    color: var(--rd-error-pressed);
}

/* ---- Task form and department manager ---- */

.rd-tr__form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rd-spacing-sm);
}

.rd-tr__delete {
    margin-right: auto;
    color: var(--rd-error-pressed);
}

.rd-tr__dept-edit {
    display: flex;
    align-items: center;
    gap: var(--rd-spacing-x-sm);
}

.rd-tr__dept-edit input {
    flex: 1;
}

.rd-tr__dept-edit small {
    font-size: var(--rd-fontsize-2);
    color: var(--rd-gray-500);
    white-space: nowrap;
}

/* ---- Dark mode of the Produktions-OS ---- */

.rd-pos--dark .rd-tr__card,
.rd-pos--dark .rd-tr__grid,
.rd-pos--dark .rd-tr__grid > * + * {
    border-color: var(--d-border);
}

.rd-pos--dark .rd-tr__card {
    background: var(--d-elev);
}

.rd-pos--dark .rd-tr__card-head,
.rd-pos--dark .rd-tr__row:hover {
    background: var(--d-body);
}

.rd-pos--dark .rd-tr__heading,
.rd-pos--dark .rd-tr__dept-name,
.rd-pos--dark .rd-tr__card-name,
.rd-pos--dark .rd-tr__area-name,
.rd-pos--dark .rd-tr__select {
    color: var(--d-h);
}

.rd-pos--dark .rd-tr__search,
.rd-pos--dark .rd-tr__filter,
.rd-pos--dark .rd-tr__select:focus {
    background: var(--d-elev);
    color: var(--d-h);
    border-color: var(--d-border);
}

/* Pflegecampus profile picture instead of initials */
.rd-tr__avatar.has-img {
    background-size: cover;
    background-position: center top;
    color: transparent;
}

/* "Abteilung löschen" next to the department heading: quiet until hovered */
.rd-tr__dept-name {
    display: flex;
    align-items: baseline;
    gap: var(--rd-spacing-sm);
}

.rd-tr__dept-delete {
    font-size: var(--rd-fontsize-3);
    font-weight: 400;
    color: var(--rd-gray);
}

.rd-tr__dept-delete:hover,
.rd-tr__dept-delete:focus-visible {
    color: var(--rd-error-pressed);
}

.rd-pos--dark .rd-tr__dept-delete {
    color: var(--d-muted);
}

.rd-pos--dark .rd-tr__dept-delete:hover,
.rd-pos--dark .rd-tr__dept-delete:focus-visible {
    color: var(--rd-red-400);
}