/* Haupt-Container */
.blp-container {
    background: #ffffff !important;
    background-image: linear-gradient(90deg, #f1f4f9 1px, transparent 1px) !important;
    background-size: 80px 100% !important;
    border: 1px solid #e1e8f0 !important;
    border-radius: 16px !important;
    position: relative !important;
    overflow-x: auto !important;
    padding: 0 !important;
}

/* Header */
.blp-days-row {
    display: flex !important;
    height: 60px !important;
    align-items: center !important;
    border-bottom: 1px solid #f1f4f9 !important;
}

.blp-day-cell {
    width: 80px !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    color: #a0aec0 !important;
    font-weight: 700 !important;
}

.is-today-header {
    background: #ffd54f !important;
    color: white !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
}

/* Die awork-Pille */
.blp-item {
    position: absolute !important;
    display: flex !important; /* Wichtig für horizontale Ausrichtung */
    flex-direction: row !important; /* Erzwingt Nebeneinander */
    align-items: center !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 4px 4px 4px 12px !important; /* Rechts Platz für Avatar sparen */
    border-radius: 100px !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #edf2f7 !important;
    white-space: nowrap !important; /* Verhindert Zeilenumbruch des Textes */
    z-index: 5 !important;
}

/* Badges */
.blp-badge {
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
}

.blp-perc { background: #eef5ff !important; color: #3182ce !important; }
.blp-today { background: #fff0f3 !important; color: #e53e3e !important; }

/* Titel */
.blp-task-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    margin: 0 5px !important;
}

/* Avatar */
.blp-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: block !important;
    object-fit: cover !important;
}

/* Heute-Linie */
.blp-vertical-today-line {
    position: absolute !important;
    left: 360px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: #ffd54f !important;
    z-index: 1 !important;
    opacity: 0.5 !important;
}

/* Status: Läuft (Standard Blau) */
.blp-item.status-running {
    border-left: 4px solid #3182ce !important;
}

/* Status: Geplant (Gelb/Orange) */
.blp-item.status-planned {
    border-left: 4px solid #f6ad55 !important;
}
.blp-item.status-planned .blp-perc {
    background: #fffaf0 !important;
    color: #dd6b20 !important;
}

/* Status: Erledigt (Grün) */
.blp-item.status-done {
    border-left: 4px solid #48bb78 !important;
}
.blp-item.status-done .blp-perc {
    background: #f0fff4 !important;
    color: #38a169 !important;
}

/* Optimierung der Pille mit Status-Border */
.blp-item {
    border-top-left-radius: 8px !important; /* Etwas kantiger an der Status-Seite wirkt moderner */
    border-bottom-left-radius: 8px !important;
}

.blp-avatar {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
}

.blp-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #fff !important;
    display: block !important;
}