/* Kanban Board Columns */
/* Die .kanban-board Regel wurde nach board.css verschoben und hier entfernt. */

.kanban-column {
    flex: 0 0 var(--kanban-column-width, 300px);
    border-radius: 8px;
    /* padding-top wird entfernt, da der Header absolut positioniert ist und seinen eigenen Padding hat */
    padding: 0 0.1rem 0.1rem 0.1rem;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    /* Feste Höhen entfernt, Höhe wird durch align-items: stretch vom Parent (.kanban-board) bestimmt */
    overflow: hidden; /* Verhindert Scrollbalken an der Spalte selbst */
    position: relative;
    box-sizing: border-box; /* Hinzugefügt */
}

.kanban-column.dragging {
    opacity: 0.5;
}

.kanban-column.drag-over {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0.5rem 1rem; /* Innenabstand im Header */
    border-radius: 0;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    width: 100%; /* Nimmt die volle Breite der Spalte ein */
    position: absolute; /* Absolut positioniert relativ zur Spalte */
    left: 0;
    top: 0;
    z-index: 1;
    height: 3.5rem; /* Feste Höhe für den Header, passend zum ursprünglichen Padding-Top der Spalte */
}

.column-header:active {
    cursor: grabbing;
}

.column-title {
    font-weight: bold;
    font-size: 1.1rem;
}

.column-actions {
    position: relative;
    display: flex;
    gap: 0.5rem;
}

.menu-dots {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1.2rem;
}

.dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: none;
    z-index: 1000;
    min-width: 150px;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: #f5f5f5;
}

.column-content {
    position: absolute;
    top: 3.5rem; /* Höhe des .column-header */
    left: 0.1rem; /* Spalten-Padding berücksichtigen */
    right: 0.1rem; /* Spalten-Padding berücksichtigen */
    bottom: 3.2rem; /* Platz für den add-card-btn (ca. 2.5rem Höhe + 0.6rem Abstand + 0.1rem Spalten-Padding unten) */
    overflow-y: auto; /* Nur dieser Bereich soll scrollen */
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Beibehalten vom Original */
    padding: 0.5rem; /* Innenabstand für den Inhalt (Karten) */
}

.add-card-btn {
    position: absolute; /* Absolut positionieren relativ zu .kanban-column */
    bottom: 0.6rem; /* Abstand vom unteren Rand der Spalte, über dem Spalten-Padding */
    left: 0.6rem;   /* Abstand vom linken Rand der Spalte, innerhalb des Spalten-Paddings */
    right: 0.6rem;  /* Abstand vom rechten Rand der Spalte, innerhalb des Spalten-Paddings */
    width: auto; /* Breite wird durch left/right und das Padding des Buttons bestimmt */
    padding: 0.75rem;
    background: rgba(200, 200, 200, 0.5);
    border: 2px dashed #9a9fa5;
    border-radius: 4px;
    cursor: pointer;
    color: #03214e;
    transition: all 0.3s ease;
    z-index: 5; /* Sicherstellen, dass er über anderem Inhalt im Column-Flow liegt, falls nötig */
    /* flex-shrink: 0; ist hier nicht mehr relevant */
}

/* Column placeholder for drag and drop */
.column-placeholder {
    flex: 0 0 300px;
    background: #e3f2fd;
    border: 2px dashed #4a90e2;
    border-radius: 8px;
    opacity: 0.5;
}

/* Schieberegler-Label und Wert */
.column-width-label {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.column-width-label-text {
    font-size: 0.95em;
}
.column-width-value {
    min-width: 3em;
    display: inline-block;
}

/* Drag&Drop Ghost/Chosen Styles für Columns (SortableJS) */
.kanban-column-drag-ghost {
    opacity: 0.4;
    background: #e0e7ff;
    border: 2px dashed #4a90e2;
    box-shadow: 0 0 12px #4a90e2aa;
    z-index: 10;
    rotate: 1deg;
}
.kanban-column-drag-chosen {
    box-shadow: 0 6px 24px #4a90e2aa;
    opacity: 0.7;
    z-index: 12;
    rotate: 1deg;
}

.kanban-column-dragging {
    opacity: 0.5;
    rotate: 1deg;
}
.kanban-column{
    background-blend-mode:lighten ;
    background-color: rgba(238, 237, 237, 0.4) !important;
}

.kanban-column.selected-for-paste {
    /* box-shadow: 0 0 0 3px #2196F3 !important;
    border-radius: 8px !important;
    transition: box-shadow 0.2s ease !important; */
    background-blend-mode: multiply;
    background-color: rgba(138, 138, 138, 0.15) !important;


}

.kanban-column.selected-for-paste .column-header {
    background-blend-mode: lighten;
    background: linear-gradient(135deg, rgba(33, 150, 243, 1) 0%, rgba(80, 77, 95, 1) 30%, rgba(80, 77, 95, 1) 100%) !important;
    color: rgb(0, 0, 0) !important;
    border-radius: 8px 8px 0 0 !important;
}

/* Column action buttons */
.column-btn {
    background: none;
    border: none;
    padding: 4px 6px;
    margin: 0 2px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.7;
    transition: all 0.2s ease;
    color: inherit;
}

.column-btn:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* AI Button - immer sichtbar */
.column-ai-btn {
    display: inline-block;
}

/* Delete Button - nur bei selected-for-paste sichtbar */
.column-delete-btn {
    display: none;
    color: #ff6b6b;
}

.kanban-column.selected-for-paste .column-delete-btn {
    display: inline-block;
}

.column-delete-btn:hover {
    background-color: rgba(255, 107, 107, 0.2) !important;
}