/*
 * Wiederverwendbarer Datums-Zeitraum-Picker (Kalender mit Drag-/Klick-Auswahl).
 * ActiveDesign-konform: nur Tokens, Light + Dark (tokens.css schaltet automatisch),
 * 4px-Raster, Focus-/Hover-States. Markup: Partial _DateRangePicker.cshtml.
 */
.drp {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-surface-2);
    user-select: none;
    touch-action: none; /* erlaubt Drag-Auswahl ohne Scrollen */
}

.drp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.drp-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.drp-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.drp-nav:hover { background: rgb(var(--as-primary-rgb) / 0.08); color: var(--as-primary); }
.drp-nav:focus-visible { outline: 2px solid var(--as-primary); outline-offset: 1px; }

.drp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.125rem;
    margin-bottom: 0.25rem;
}
.drp-weekdays span {
    text-align: center;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.drp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.125rem;
}

.drp-day {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.8125rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.drp-day:hover { background: rgb(var(--as-primary-rgb) / 0.12); }
.drp-day:focus-visible { outline: 2px solid var(--as-primary); outline-offset: -2px; }
.drp-day.is-other { color: var(--text-muted); opacity: 0.4; }
.drp-day.in-range { background: rgb(var(--as-primary-rgb) / 0.25); border-radius: 0; }

/* Start/Ende: Text auf Primary -- gleiche Konvention wie .btn-primary (color:#fff). */
.drp-day.is-start, .drp-day.is-end { background: var(--as-primary); color: #fff; font-weight: 600; }
.drp-day.is-start { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }
.drp-day.is-end { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
.drp-day.is-start.is-end { border-radius: 0.375rem; }

/* Tage aus dem Nachbarmonat, die zur Auswahl gehoeren, NICHT abblenden --
   gleicher Farbton wie im aktuell angezeigten Monat (sonst wirken sie blasser). */
.drp-day.is-other.in-range { opacity: 1; color: var(--text-primary); }
.drp-day.is-other.is-start,
.drp-day.is-other.is-end { opacity: 1; color: #fff; }