/* ============================================================
   Onesown Blazor Components – Datepicker
   Abhängigkeit: theme1.css
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */

.oo-datepicker {
    position: relative;
}

/* ── Floating Label – oben wenn Wert gesetzt (HasValue) ──── */

.oo-datepicker.float-label.HasValue .form--label {
    transform: translateY(-50%);
    font-size: var(--oo-font-size-sm);
    line-height: 1;
    background-color: var(--oo-color-surface);
    padding: 0 0.25rem;
    left: 0.6875rem;
    height: auto;
    align-items: unset;
}

/* ── Input-Overrides für Datepicker ─────────────────────── */

/* flatpickr setzt readonly statt disabled – trotzdem klickbar */
.oo-datepicker .form--input[readonly] {
    cursor: pointer;
    background-color: var(--oo-color-surface);
}

.oo-datepicker .form--input[readonly][disabled] {
    cursor: not-allowed;
    background-color: var(--oo-color-background);
}

/* Icon-Platz rechts freihalten (0.9375rem padding-x + 1.25rem icon + 0.5rem gap) */
.oo-datepicker .form--input {
    padding-right: calc(0.9375rem + 1.25rem + 0.5rem);
}

/* ── Clear-Button ────────────────────────────────────────── */

.oo-datepicker--clear {
    position: absolute;
    right: calc(0.9375rem + 1.25rem + 0.5rem);
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.oo-datepicker--clear-inner {
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--oo-color-text-subtle);
}

.oo-datepicker--clear-inner:hover {
    color: var(--oo-danger);
}

/* ── Kalender-Icon ───────────────────────────────────────── */

.oo-datepicker--icon {
    position: absolute;
    right: 0.9375rem;
    top: 0;
    height: 100%;
    width: 1.25rem;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.oo-datepicker--icon-inner {
    display: flex;
    align-items: center;
    color: var(--oo-color-text-subtle);
}

.oo-datepicker--icon .oo-svg-icon {
    height: 1.25rem;
    width: 1.25rem;
}

/* ── Validation ──────────────────────────────────────────── */

.oo-datepicker.invalid {
    outline: none !important;
}

.oo-datepicker.invalid .form--input {
    border-color: var(--oo-danger);
}