.tree-wrapper {
    --actions-col: clamp(16px, 3vw, 20px); /* Default: nur Menü */
}

.tree-wrapper.with-move-buttons {
    --actions-col: clamp(150px, 22vw, 200px);
}

.tree-header {
    display: grid;
    gap: 8px;
    padding: 12px;
    font-weight: 600;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Nr | Titel | Ort | Datum | Zeit | Anzeigen | Aktionen */
.tree-header,
.row-content {
    display: grid;
    align-items: center;
    /* WICHTIG: minmax(0, …) erlaubt echtes Schrumpfen! */
    grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 1fr) 130px /* Datum */
    92px /* Uhrzeit */
    92px /* Dauer */
    34px var(--actions-col);
    column-gap: 10px;
    box-sizing: border-box;
}

.title-cell, .place-cell, .date-cell, .time-cell, .duration-cell, .a-cell, .actions {
    min-width: 0;
}

.tree-header .col-a,
.row-content .a-cell {
    text-align: center;
}


.row-content .a-cell .mud-checkbox {
    margin: 0 auto;
}

/* Inhalt darf schrumpfen */
.title-cell, .place-cell, .date-cell, .time-cell {
    min-width: 0;
}

.row-content .mud-input-control,
.row-content .mud-input-root,
.row-content .mud-input-slot {
    min-width: 0;
    width: 100%;
}

.program-header-margin-left .mud-expand-panel-text {
    padding-left: 24px;
}

.program-header .mud-expand-panel .mud-expand-panel-header {
    padding: 0px;
    min-height: 0px;
}

@media (max-width: 900px) {
    .tree-wrapper.with-move-buttons .actions {
        flex-wrap: wrap;
        row-gap: 2px;
    }
}

@media (max-width: 1100px) {
    .tree-header,
    .row-content {
        grid-template-columns: minmax(36px, 48px) /* Nr */
        minmax(0, 2fr) /* Titel */
        minmax(0, 1fr) /* Ort */
        130px /* Datum */
        92px /* Uhrzeit */
        92px /* Dauer */
        34px /* A */
        var(--actions-col); /* Aktionen */
    }

    .tree-wrapper.with-move-buttons {
        --actions-col: clamp(104px, 20vw, 140px);
    }
}

/* Mobile: Ort unter Titel stapeln */
@media (max-width: 700px) {
    .tree-header {
        display: none;
    }

    .row-content {
        grid-template-columns: minmax(36px,48px) /* Nr */
        minmax(0,1fr) /* Inhalt gestapelt */
        34px /* A */
        clamp(16px,5vw,20px); /* Aktionen */

        grid-template-areas:
            "num title    a actions"
            "num ort      a actions"
            "num date     a actions"
            "num time     a actions"
            "num duration a actions";
    }

    .num-cell {
        grid-area: num;
        align-self: flex-start;
    }

    .title-cell {
        grid-area: title;
    }

    .place-cell {
        grid-area: ort;
    }

    .date-cell {
        grid-area: date;
    }

    .time-cell {
        grid-area: time;
    }

    .duration-cell {
        grid-area: duration;
    }

    .a-cell {
        grid-area: a;
        justify-content: center;
    }

    .actions {
        grid-area: actions;
        justify-content: flex-end;
    }
}


.show-cell {
    justify-items: center;
}

.tree-wrapper .cell.show-cell .mud-input-control-input-container > label.mud-checkbox.mud-input-content-placement-end {
    justify-content: center !important;
}

.show-cell span.mud-button-root.mud-icon-button.mud-primary-text.hover\:mud-primary-hover.mud-ripple.mud-ripple-checkbox {
    padding: 4px;
}

.mud-collapse-wrapper {
    overscroll-behavior: contain;
}

.zone-card {
    padding: 0px;
    margin: 6px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.zone-drop {
    padding: 2px;
    border-radius: 8px;
    background: var(--mud-palette-surface);
}


.node {
    margin: 6px 0px 6px 10px;
}

.row-content {
    display: grid;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.cell {
    display: flex;
    align-items: center;
}

.num-cell {
    min-width: 0;
    justify-content: flex-start;
}


.num-label {
    display: block;
    width: 100%;
    white-space: nowrap;
    text-align: left;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.title-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle.placeholder {
    opacity: .25;
    width: 18px;
    text-align: center;
}

.title-input {
    width: 100%;
}

.actions {
    gap: 8px;
}

.drag-handle {
    opacity: .7;
}

.node-children {
    margin: 0px;
    padding: 0px;
}

.actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: 4px;
    flex-wrap: nowrap;
}

.actions-header {
    width: 20px;
    text-align: center;
}

.actions .mud-button-root,
.actions .mud-icon-button {
    min-width: 0;
    padding: 0;
    width: 20px;
    height: 20px;
}

.actions .mud-menu {
    width: 20px;
}

.title-indent {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drag-active .mud-drop-zone {
    transition: box-shadow .12s ease, background-color .12s ease;
}

.drop-allowed {
    /*background-color: color-mix(in srgb, var(--mud-palette-success) 20%, transparent) !important;*/
}

.drop-denied {
    /*background-color: color-mix(in srgb, var(--mud-palette-error) 20%, transparent) !important;*/
}

.drag-item {
    opacity: .75;
}

.zone-drop-num {
    display: inline-flex;
    align-items: center;
    padding: 2px 4px;
    border-radius: 8px;
}

/* Reorder-Bars standardmäßig verstecken */
.reorder-bar {
    display: none;
    height: 28px;
    border-radius: 8px;
    background: var(--mud-palette-surface);
    margin: 6px 0;
    align-items: center;
    justify-content: center;
}

/* Nur während Draggen zeigen (MudDropContainer.DraggingClass = drag-active) */
.drag-active .reorder-bar {
    display: flex;
}

.drag-active .reorder-label {
    display: flex;
}

.reorder-bar.drop-allowed,
.reorder-bar.drop-denied {
    display: flex;
}

.reorder-label {
    font-size: 12px;
    opacity: .6;
}

/* Highlight */
.drop-allowed.reorder-bar {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-success) 60%, transparent) inset;
    /*background-color: color-mix(in srgb, var(--mud-palette-success) 20%, transparent) !important;*/
}

.drop-denied.reorder-bar {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-error) 50%, transparent) inset;
    /*background-color: color-mix(in srgb, var(--mud-palette-error) 20%, transparent) !important;*/
    opacity: .85;
}

/* Optional: Zeilen-Highlight beim „onto“-Drop (Child) – hast du schon */
.row-drop-onto.drop-allowed .row-content {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-success) 60%, transparent) inset;
    /*background-color: color-mix(in srgb, var(--mud-palette-success) 20%, transparent);*/
}

.row-drop-onto.drop-denied .row-content {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-error) 50%, transparent) inset;
    /*background-color: color-mix(in srgb, var(--mud-palette-error) 20%, transparent);*/
}

.tree-scroll {
    max-height: calc(100vh - calc(calc(var(--footer-height) + var(--mud-appbar-height)) + 86px)); /* an dein Layout anpassen */
    overflow: auto;
    overscroll-behavior: contain;
}

/* Leiste mit den ExpansionPanels bleibt oben */
.sticky-controls {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--mud-palette-surface);
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ---------- Gruppenfarben (Eltern + alle Kinder) ---------- */
:root {
    --group-0: #e57373;
    --group-1: #ba68c8;
    --group-2: #7986cb;
    --group-3: #64b5f6;
    --group-4: #4db6ac;
    --group-5: #81c784;
    --group-6: #dce775;
    --group-7: #ffd54f;
    --group-8: #ffb74d;
    --group-9: #a1887f;
    --group-10: #90a4ae;
    --group-11: #f06292;
}

/* Grundstil: linke Farbleiste + ganz leichte Tönung, nur auf der Zeile */
.node[class*="group-"] .row-content {
    position: relative;
    background: color-mix(in srgb, var(--node-color, transparent) 30%, transparent) !important;
    border-left: 4px solid color-mix(in srgb, var(--node-color, transparent) 30%, transparent) !important;
}

/* neutrale Gruppe (Nicht zugeordnet) */
.node.group-neutral .row-content {
    --node-color: var(--mud-palette-lines-default);
    background: transparent;
}

/* je Gruppe die Variable --node-color setzen */
.node.group-0 {
    --node-color: var(--group-0);
}

.node.group-1 {
    --node-color: var(--group-1);
}

.node.group-2 {
    --node-color: var(--group-2);
}

.node.group-3 {
    --node-color: var(--group-3);
}

.node.group-4 {
    --node-color: var(--group-4);
}

.node.group-5 {
    --node-color: var(--group-5);
}

.node.group-6 {
    --node-color: var(--group-6);
}

.node.group-7 {
    --node-color: var(--group-7);
}

.node.group-8 {
    --node-color: var(--group-8);
}

.node.group-9 {
    --node-color: var(--group-9);
}

.node.group-10 {
    --node-color: var(--group-10);
}

.node.group-11 {
    --node-color: var(--group-11);
}

.time-cell button.mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon.mud-icon-button-edge-start.mud-input-adornment-icon-button.mud-no-activator {
    padding: 4px;
}

.date-cell button.mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon.mud-icon-button-edge-start.mud-input-adornment-icon-button.mud-no-activator {
    padding: 4px;
}

.duration-cell button.mud-button-root.mud-icon-button.mud-ripple.mud-ripple-icon.mud-icon-button-edge-start.mud-input-adornment-icon-button.mud-no-activator {
    padding: 4px;
}

.date-cell .mud-icon-button-edge-start {
    margin-left: -4px;
    margin-inline-start: -4px;
    margin-inline-end: unset;
}

.time-cell .mud-icon-button-edge-start {
    margin-left: -4px;
    margin-inline-start: -4px;
    margin-inline-end: unset;
}

.duration-cell .mud-icon-button-edge-start {
    margin-left: -4px;
    margin-inline-start: -4px;
    margin-inline-end: unset;
}

.flash-on {
    animation: flashPulse 700ms ease-in-out infinite;
    border-radius: 6px;
}

@keyframes flashPulse {
    0%, 100% {
        background-color: transparent;
    }

    50% {
        background-color: rgba(255, 230, 120, 0.75);
    }
}

.unassigned-overlay-drop {
    display: none;
    /* deine zone-card Optik ist schon drauf, hier nur “innen” */
    min-height: 52px;
    padding: 10px 12px;
    align-items: center;
    justify-content: center;
    /* wirkt wie deine anderen Drop-Flächen */
    background: var(--mud-palette-surface);
    box-shadow: 0 0 0 1px var(--mud-palette-lines-default) inset;
}

    /* Sobald ein Drag läuft, bekommt die Zone drop-allowed ODER drop-denied -> einblenden */
    .unassigned-overlay-drop.drop-allowed,
    .unassigned-overlay-drop.drop-denied {
        display: flex;
    }

.unassigned-overlay-content {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    opacity: .85;
}

/* Highlight analog zu deinen reorder-bars */
.unassigned-overlay-drop.drop-allowed {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-success) 60%, transparent) inset;
}

.unassigned-overlay-drop.drop-denied {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-error) 50%, transparent) inset;
    opacity: .9;
}