/**
 * Formularios admin — estados de validación (todo el proyecto).
 *
 * El tema Vuexy pinta el label con --bs-form-validation-border-color tanto en
 * .is-valid como en .is-invalid; esa variable vive en el form (default = danger).
 * Resultado: un correo correcto queda con borde verde y label rojo.
 *
 * Convención AMIRA:
 * - válido (.is-valid / :valid tras submit) → success
 * - inválido (.is-invalid / :invalid tras submit) → danger
 * - sin validar → outline del tema (sin verde ni rojo)
 */

.amira-admin .form-floating:has(> .form-control.is-valid),
.amira-admin .form-floating:has(> .form-select.is-valid),
.amira-admin form.was-validated .form-floating:has(> .form-control:valid),
.amira-admin form.was-validated .form-floating:has(> .form-select:valid) {
    --bs-form-validation-border-color: var(--bs-form-valid-border-color, var(--bs-success));
}

.amira-admin .form-floating:has(> .form-control.is-invalid),
.amira-admin .form-floating:has(> .form-select.is-invalid),
.amira-admin form.was-validated .form-floating:has(> .form-control:invalid),
.amira-admin form.was-validated .form-floating:has(> .form-select:invalid) {
    --bs-form-validation-border-color: var(--bs-form-invalid-border-color, var(--bs-danger));
}

.amira-admin form .form-floating.form-floating-outline > .form-control.is-valid ~ label,
.amira-admin form .form-floating.form-floating-outline > .form-select.is-valid ~ label,
.amira-admin form.was-validated .form-floating.form-floating-outline > .form-control:valid ~ label,
.amira-admin form.was-validated .form-floating.form-floating-outline > .form-select:valid ~ label {
    color: var(--bs-form-valid-border-color, var(--bs-success)) !important;
}

.amira-admin form .form-floating.form-floating-outline > .form-control.is-valid ~ label .text-danger,
.amira-admin form .form-floating.form-floating-outline > .form-select.is-valid ~ label .text-danger,
.amira-admin form.was-validated .form-floating.form-floating-outline > .form-control:valid ~ label .text-danger,
.amira-admin form.was-validated .form-floating.form-floating-outline > .form-select:valid ~ label .text-danger {
    color: inherit !important;
}

.amira-admin form .form-floating.form-floating-outline > .form-control.is-invalid ~ label,
.amira-admin form .form-floating.form-floating-outline > .form-select.is-invalid ~ label,
.amira-admin form.was-validated .form-floating.form-floating-outline > .form-control:invalid ~ label,
.amira-admin form.was-validated .form-floating.form-floating-outline > .form-select:invalid ~ label {
    color: var(--bs-form-invalid-border-color, var(--bs-danger)) !important;
}

.amira-admin form .form-floating.form-floating-outline > .form-control.is-invalid ~ label .text-danger,
.amira-admin form .form-floating.form-floating-outline > .form-select.is-invalid ~ label .text-danger,
.amira-admin form.was-validated .form-floating.form-floating-outline > .form-control:invalid ~ label .text-danger,
.amira-admin form.was-validated .form-floating.form-floating-outline > .form-select:invalid ~ label .text-danger {
    color: inherit !important;
}

/*
 * Floating outline — notch del label (todo el admin)
 *
 * El tema activa el label flotante con :focus / :not(:placeholder-shown). Eso falla en
 * type=date y en Select2 (select oculto). Convención AMIRA: clase form-floating-active
 * en el contenedor .form-floating-outline, sincronizada con AmiraFormFloating (JS).
 *
 * Markup: form-floating form-floating-outline (+ form-floating-select2 si Select2).
 * Inputs: placeholder=" " obligatorio. Ver docs/desarrollo/ADMIN-FORMULARIOS-FLOATING.md
 */

.amira-admin .form-floating.form-floating-outline.form-floating-active > label,
.amira-admin .form-floating.form-floating-outline > .form-control:focus ~ label,
.amira-admin .form-floating.form-floating-outline > .form-control:not(:placeholder-shown) ~ label,
.amira-admin .form-floating.form-floating-outline > .form-select:focus ~ label,
.amira-admin .form-floating.form-floating-outline > .form-select:not(:placeholder-shown) ~ label {
    block-size: auto;
    font-size: 0.8125rem;
    inline-size: auto;
    margin-block-start: 0.125rem;
    margin-inline-start: 0.625rem;
    opacity: 1;
    padding-block: 2px;
    padding-inline: 0.375rem;
    transform: translateY(-0.8rem) translateX(-2px);
    text-shadow: none;
}

.amira-admin .form-floating.form-floating-outline.form-floating-active > label::after,
.amira-admin .form-floating.form-floating-outline > .form-control:focus ~ label::after,
.amira-admin .form-floating.form-floating-outline > .form-control:not(:placeholder-shown) ~ label::after,
.amira-admin .form-floating.form-floating-outline > .form-select:focus ~ label::after,
.amira-admin .form-floating.form-floating-outline > .form-select:not(:placeholder-shown) ~ label::after {
    position: absolute;
    z-index: -1;
    block-size: 0.75rem;
    content: "";
    inline-size: 100%;
    inset-block-start: 0.5rem;
    inset-inline-start: 0;
    background-color: var(--bs-paper-bg, var(--bs-body-bg));
}

/* Select2 + floating (notch alineado al tema select2.css) */
.amira-admin .form-floating.form-floating-select2 {
    position: relative;
}

.amira-admin .form-floating.form-floating-select2 > label {
    z-index: 5;
    text-shadow: none;
    /* Select2 (tema) deja el label siempre flotante; notch legible vacío o con valor */
    background-color: var(--bs-paper-bg, var(--bs-body-bg));
    box-shadow: none;
}

.amira-admin .form-floating.form-floating-select2.form-floating-active > label,
.amira-admin .form-floating.form-floating-select2:has(.select2-container--open) > label,
.amira-admin .form-floating.form-floating-select2:has(.select2-container--focus) > label {
    z-index: 6;
}

.amira-admin .form-floating.form-floating-select2 > label::after {
    z-index: -1;
    block-size: 0.75rem;
    inset-block-start: 0.5rem;
    background-color: var(--bs-paper-bg, var(--bs-body-bg));
}

.amira-admin .modal .form-floating.form-floating-select2 > label {
    background-color: var(--bs-paper-bg, var(--bs-body-bg));
}

.amira-admin .modal .form-floating.form-floating-outline.form-floating-active > label::after,
.amira-admin .modal .form-floating.form-floating-outline > .form-control:focus ~ label::after,
.amira-admin .modal .form-floating.form-floating-outline > .form-control:not(:placeholder-shown) ~ label::after {
    background-color: var(--bs-paper-bg, var(--bs-body-bg));
}

.amira-admin .form-floating.form-floating-select2 .select2-container {
    z-index: 1;
}

.amira-admin .form-floating.form-floating-select2:has(.select2-container--open) .select2-container,
.amira-admin .form-floating.form-floating-select2:has(.select2-container--focus) .select2-container {
    z-index: 2;
}

.amira-admin .offcanvas .form-floating-select2 .select2-container {
    z-index: 1;
}

.amira-admin .offcanvas .form-floating-select2:has(.select2-container--open) .select2-container,
.amira-admin .offcanvas .form-floating-select2:has(.select2-container--focus) .select2-container {
    z-index: 2;
}

.amira-admin .offcanvas .select2-dropdown {
    z-index: 1095;
}

.amira-admin .offcanvas.amira-offcanvas-wide {
    --bs-offcanvas-width: min(28rem, 100vw);
}

.amira-admin .amira-select-country {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
}

.amira-admin .amira-select-country-flag {
    flex-shrink: 0;
    line-height: 1;
}

.amira-admin .amira-select-country-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amira-admin .amira-customer-picker {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
}

.amira-admin .amira-customer-picker-select {
    flex: 1 1 auto;
    min-width: 0;
}

.amira-admin .amira-customer-picker-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.amira-admin .amira-customer-picker .select2-selection__placeholder {
    color: var(--bs-secondary-color);
}