/* Today */

.today-list,
.task-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.drag-handle {
    cursor: grab;
    color: var(--text-3);
    font-size: 16px;
    flex-shrink: 0;
    user-select: none;
    padding: 0 2px;
    transition: color 0.16s ease;
}
.drag-handle:hover {
    color: var(--text-3);
}
.drag-handle:active {
    cursor: grabbing;
}

.today-step {
    border-radius: var(--r-md);
    border: 1px solid var(--border-soft);
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
}
.today-step:hover {
    background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
}

/* Dämpfe Status-Tags und Pills auf dem dunkleren Step-Hintergrund */
.today-step .step-status-tag {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(140, 165, 200, 0.12);
}
.today-step .step-status-tag.status-offen  { color: var(--accent-strong); }
.today-step .step-status-tag.status-in_arbeit { color: var(--warning); }
.today-step .step-status-tag.status-erledigt { color: var(--success); }

.today-step .step-pill {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(188, 200, 218, 0.12);
    color: var(--text-3);
}
.today-step.step-item {
    padding: 12px 14px;
    border-bottom: none;
}
.today-step:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-xs);
}
.today-step.dragging {
    opacity: 0.34;
}
.today-step.drag-target {
    border-top: 2px solid var(--accent);
}

.day-type-btn:hover {
    border-color: rgba(79, 104, 232, 0.30);
    color: var(--accent-strong);
}

.step-project-tag {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 10.5px;
    opacity: 0.82;
    vertical-align: middle;
}

.day-type-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.day-type-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-3);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 700;
}
.day-type-btn:hover {
    border-color: rgba(127, 143, 255, 0.32);
    color: var(--accent-strong);
}
.day-type-btn.active {
    background: linear-gradient(180deg, #6a7ff0 0%, var(--accent) 100%);
    border-color: rgba(130, 148, 248, 0.34);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(79, 104, 232, 0.28);
}

.day-banner {
    padding: 16px 18px;
    margin-bottom: 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-soft);
    background: linear-gradient(180deg, #3a4b63, #314055);
    font-size: 13.5px;
    color: var(--text-2);
}

.day-banner--blockiert {
    background: linear-gradient(180deg, #35181e 0%, #281018 100%);
    border-color: rgba(224, 78, 100, 0.26);
    color: #f0a8b4;
}

.day-banner--andere {
    background: linear-gradient(180deg, #2c2010 0%, #201808 100%);
    border-color: rgba(212, 149, 46, 0.26);
    color: #f0d090;
}

.day-budget {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 20px;
    margin-bottom: 16px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.budget-info {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-2);
}

.budget-bar {
    flex: 1;
    min-width: 140px;
    height: 8px;
}

.budget-fill.overload {
    background: linear-gradient(90deg, #ffb4bf 0%, var(--danger) 100%);
}

.budget-pct {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-2);
    white-space: nowrap;
}

.budget-avail-input {
    width: 44px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    border-bottom: 1px dashed var(--border-strong);
    border-radius: 0;
    text-align: center;
    cursor: text;
}
.budget-avail-input:hover {
    border-bottom-color: var(--accent);
}
.budget-avail-input:focus {
    outline: none;
    border-bottom-color: var(--accent-strong);
    box-shadow: none;
}