/* --- Workcalendar header --- */
.workcalendar-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

    .workcalendar-header .rz-button,
    .workcalendar-header .rz-button-info,
    .workcalendar-header .rz-drop-down {
        flex-shrink: 0;
    }

    .workcalendar-header .rz-button-info {
        display: flex;
        align-items: center;
        padding: 0.5rem 1.2rem;
        border: none;
        min-width: 180px;
    }

    .workcalendar-header .rz-badge {
        margin-left: 1rem;
        font-size: 2rem;
        font-weight: bold;
        background: transparent !important;
        color: white;
        box-shadow: none;
        border: none;
    }

@media (max-width: 700px) {
    .workcalendar-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

        .workcalendar-header .rz-button-info {
            min-width: unset;
            font-size: 1rem;
            padding: 0.5rem 0.5rem;
        }

        .workcalendar-header .rz-badge {
            font-size: 1.3rem;
            margin-left: 0.5rem;
        }
}

/* --- Workcalendar day button --- */
.workcalendar-day-btn {
    width: 90px;
    text-align: center;
    justify-content: flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Holiday buttons --- */
.holiday-btn-vacation {
    background-color: rgba(189, 121, 230, 0.35) !important; /* was #bd79e6a4 */
    color: #333 !important;
}

.holiday-btn-feestdag {
    background-color: rgba(255, 220, 12, 0.35) !important; /* was #ffdc0c91 */
    color: #333 !important;
}

.holiday-btn-weekend {
    background-color: rgba(128, 128, 128, 0.20) !important;
    color: #333 !important;
}

/* --- Legend next to buttons --- */
.workcalendar-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #333;
    font-size: 0.9rem;
}

.legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.08);
    display: inline-block;
}
/* Swatch that matches Radzen ButtonStyle.Info (selected leave days) */
.legend-swatch-info {
    background-color: var(--rz-info, #17a2b8) !important; /* fallback just in case */
    color: #fff;
}

/* Holiday grid row backgrounds */
.rz-data-grid .rz-data-row.holiday-row-vacation > td {
    background-color: rgba(189, 121, 230, 0.35) !important; /* Paars */
    color: #333;
}

.rz-data-grid .rz-data-row.holiday-row-feestdag > td {
    background-color: rgba(255, 220, 12, 0.35) !important; /* Geel */
    color: #333;
}

/* Optional: keep hover readable */
.rz-data-grid .rz-data-row.holiday-row-vacation:hover > td,
.rz-data-grid .rz-data-row.holiday-row-feestdag:hover > td {
    filter: brightness(0.98);
}