/* ==========================================================
   AYW DESIGN SYSTEM
   COMPONENTS / FORMS

   Responsabilidades:
   - campos de texto;
   - textarea e select;
   - labels, ajuda e validação;
   - campos com ícone ou ação;
   - grupos de entrada;
   - checkbox, radio e switch;
   - fieldset;
   - ações de formulário.

   Validação oficial:
   - erro: aria-invalid="true";
   - sucesso confirmado: classe .is-valid;
   - mensagem: .ayw-field-error ou .ayw-field-success.
   ========================================================== */


/* ==========================================================
   CAMPO E ORGANIZAÇÃO
   ========================================================== */

   .ayw-field {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: var(--ayw-space-2);
}

.ayw-field-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap: var(--ayw-space-4);
}

.ayw-field-group {
    display: flex;
    flex-direction: column;

    gap: var(--ayw-space-4);
}

.ayw-form {
    width: 100%;
    min-width: 0;
}

.ayw-form-stack {
    display: grid;
    gap: var(--ayw-space-4);
}

.ayw-form-stack-lg {
    gap: var(--ayw-space-6);
}

.ayw-form-block {
    display: grid;
    gap: var(--ayw-space-4);
    padding: var(--ayw-space-4);
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-lg);
    background: var(--ayw-bg-soft);
}

.ayw-form-block-header {
    display: grid;
    gap: var(--ayw-space-1);
}

.ayw-form-block-title {
    margin: 0;
    color: var(--ayw-text);
    font-size: var(--ayw-font-size-md);
    font-weight: var(--ayw-font-weight-semibold);
}

.ayw-form-block-description {
    margin: 0;
    color: var(--ayw-text-muted);
    font-size: var(--ayw-font-size-sm);
}


/* ==========================================================
   LABEL
   ========================================================== */

.ayw-label {
    display: inline-flex;
    align-items: center;

    gap: var(--ayw-space-2);

    color: var(--ayw-text-soft);

    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-medium);
    line-height: var(--ayw-line-height-normal);
}

.ayw-label-required::after {
    margin-left: 0.15rem;

    color: var(--ayw-danger);

    content: "*";
}

.ayw-label-optional {
    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-regular);
}


/* ==========================================================
   CAMPOS BASE
   ========================================================== */

.ayw-input,
.ayw-select,
.ayw-textarea {
    width: 100%;
    min-width: 0;

    margin: 0;

    border: 1px solid var(--ayw-border-strong);
    border-radius: var(--ayw-radius-md);

    background: var(--ayw-surface);
    color: var(--ayw-text);

    font: inherit;
    font-size: 16px;
    line-height: var(--ayw-line-height-normal);

    box-shadow: var(--ayw-shadow-xs);

    appearance: none;

    -webkit-appearance: none;

    transition:
        border-color var(--ayw-transition-fast),
        background-color var(--ayw-transition-fast),
        color var(--ayw-transition-fast),
        box-shadow var(--ayw-transition-fast);
}

.ayw-input,
.ayw-select {
    min-height: 44px;

    padding:
        0.75rem
        0.90rem;
}

.ayw-textarea {
    min-height: 120px;

    padding:
        0.85rem
        0.90rem;

    resize: vertical;
}

.ayw-input::placeholder,
.ayw-textarea::placeholder {
    color: var(--ayw-text-disabled);

    opacity: 1;
}

.ayw-input:hover:not(:disabled):not([readonly]),
.ayw-select:hover:not(:disabled),
.ayw-textarea:hover:not(:disabled):not([readonly]) {
    border-color: var(--ayw-text-disabled);
}

.ayw-input:focus,
.ayw-select:focus,
.ayw-textarea:focus {
    outline: none;

    border-color: var(--ayw-primary);

    box-shadow:
        0 0 0 3px
        var(--ayw-focus-ring);
}


/* ==========================================================
   DESABILITADO E SOMENTE LEITURA
   ========================================================== */

.ayw-input:disabled,
.ayw-select:disabled,
.ayw-textarea:disabled {
    background: var(--ayw-bg-muted);
    color: var(--ayw-text-disabled);

    cursor: not-allowed;

    opacity: 0.75;
}

.ayw-input[readonly],
.ayw-textarea[readonly] {
    background: var(--ayw-bg-soft);

    cursor: default;
}


/* ==========================================================
   AUTOFILL
   ========================================================== */

.ayw-input:-webkit-autofill,
.ayw-input:-webkit-autofill:hover,
.ayw-input:-webkit-autofill:focus,
.ayw-select:-webkit-autofill,
.ayw-textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--ayw-text);

    box-shadow:
        0 0 0 1000px
        var(--ayw-surface)
        inset;

    caret-color: var(--ayw-text);
}


/* ==========================================================
   TAMANHOS
   ========================================================== */

.ayw-input-sm,
.ayw-select-sm {
    min-height: 38px;

    padding:
        0.60rem
        0.75rem;

    font-size: var(--ayw-font-size-sm);
}

.ayw-input-lg,
.ayw-select-lg {
    min-height: 52px;

    padding:
        0.95rem
        1rem;

    font-size: var(--ayw-font-size-md);
}


/* ==========================================================
   AJUDA E MENSAGENS
   ========================================================== */

.ayw-field-help,
.ayw-field-error,
.ayw-field-success {
    margin: 0;

    font-size: var(--ayw-font-size-xs);
    line-height: var(--ayw-line-height-normal);
}

.ayw-field > .errorlist {
    margin: 0;
    padding: 0;
    color: var(--ayw-danger);
    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-medium);
    line-height: var(--ayw-line-height-normal);
    list-style: none;
}

.ayw-field > .errorlist li + li {
    margin-top: var(--ayw-space-1);
}

.ayw-form-error-summary {
    margin: 0;
}

.ayw-field-help {
    color: var(--ayw-text-muted);
}

.ayw-field-error {
    color: var(--ayw-danger);

    font-weight: var(--ayw-font-weight-medium);
}

.ayw-field-success {
    color: var(--ayw-success);

    font-weight: var(--ayw-font-weight-medium);
}


/* ==========================================================
   VALIDAÇÃO DE ERRO

   Padrão oficial:
   aria-invalid="true"
   ========================================================== */

.ayw-input[aria-invalid="true"],
.ayw-select[aria-invalid="true"],
.ayw-textarea[aria-invalid="true"] {
    border-color: var(--ayw-danger);
}

.ayw-input[aria-invalid="true"]:focus,
.ayw-select[aria-invalid="true"]:focus,
.ayw-textarea[aria-invalid="true"]:focus {
    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--ayw-danger) 22%,
            transparent
        );
}

.ayw-field.is-invalid .ayw-label {
    color: var(--ayw-danger);
}


/* ==========================================================
   VALIDAÇÃO DE SUCESSO

   Usar somente após validação confirmada.
   ========================================================== */

.ayw-input.is-valid,
.ayw-select.is-valid,
.ayw-textarea.is-valid {
    border-color: var(--ayw-success);
}

.ayw-input.is-valid:focus,
.ayw-select.is-valid:focus,
.ayw-textarea.is-valid:focus {
    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--ayw-success) 22%,
            transparent
        );
}

.ayw-field.is-valid .ayw-label {
    color: var(--ayw-success);
}


/* ==========================================================
   INPUT COM ÍCONE OU AÇÃO
   ========================================================== */

.ayw-input-wrap {
    position: relative;

    display: flex;
    align-items: center;

    min-width: 0;
}

.ayw-input-wrap .ayw-input {
    width: 100%;
}

.ayw-input-icon {
    position: absolute;
    left: var(--ayw-space-3);
    z-index: 1;

    display: grid;
    place-items: center;

    width: 20px;
    height: 20px;

    color: var(--ayw-text-muted);

    line-height: 1;

    pointer-events: none;
}

.ayw-input-icon svg,
.ayw-input-icon img {
    display: block;

    width: 1em;
    height: 1em;
}

.ayw-input-wrap.has-icon-left .ayw-input {
    padding-left: 2.75rem;
}

.ayw-input-wrap.has-action .ayw-input {
    padding-right: 3rem;
}


/* ==========================================================
   AÇÃO DO CAMPO
   ========================================================== */

.ayw-input-action {
    position: absolute;
    right: var(--ayw-space-2);
    z-index: 2;

    display: inline-grid;
    place-items: center;

    width: 36px;
    height: 36px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: var(--ayw-radius-sm);

    background: transparent;
    color: var(--ayw-text-muted);

    cursor: pointer;

    font: inherit;
    line-height: 1;

    appearance: none;

    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;

    transition:
        background-color var(--ayw-transition-fast),
        color var(--ayw-transition-fast);
}

.ayw-input-action:hover {
    background: var(--ayw-bg-muted);
    color: var(--ayw-primary);
}

.ayw-input-action:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 1px;
}

.ayw-input-action:disabled {
    color: var(--ayw-text-disabled);

    cursor: not-allowed;

    opacity: 0.55;
}


/* ==========================================================
   INPUT GROUP
   ========================================================== */

.ayw-input-group {
    display: flex;

    width: 100%;
    min-width: 0;
}

.ayw-input-group .ayw-input,
.ayw-input-group .ayw-select,
.ayw-input-group .ayw-input-addon {
    min-width: 0;

    border-radius: 0;
}

.ayw-input-group > :first-child {
    border-top-left-radius: var(--ayw-radius-md);
    border-bottom-left-radius: var(--ayw-radius-md);
}

.ayw-input-group > :last-child {
    border-top-right-radius: var(--ayw-radius-md);
    border-bottom-right-radius: var(--ayw-radius-md);
}

.ayw-input-group > * + * {
    margin-left: -1px;
}

.ayw-input-group .ayw-input:focus,
.ayw-input-group .ayw-select:focus {
    position: relative;
    z-index: 2;
}

.ayw-input-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-height: 44px;

    padding:
        0
        var(--ayw-space-3);

    border: 1px solid var(--ayw-border-strong);

    background: var(--ayw-bg-soft);
    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-sm);

    white-space: nowrap;
}


/* ==========================================================
   SELECT
   ========================================================== */

.ayw-select {
    padding-right: 2.75rem;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            var(--ayw-text-muted) 50%
        ),
        linear-gradient(
            135deg,
            var(--ayw-text-muted) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}

.ayw-select:disabled {
    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            var(--ayw-text-disabled) 50%
        ),
        linear-gradient(
            135deg,
            var(--ayw-text-disabled) 50%,
            transparent 50%
        );
}


/* ==========================================================
   CONTROLE DESLIZANTE

   Uso recomendado:
   - percentuais;
   - faixas de valor;
   - ajustes contínuos com limites conhecidos.
   ========================================================== */

.ayw-range {
    width: 100%;
    min-width: 0;
    height: 24px;

    margin: 0;
    padding: 0;

    background: transparent;

    cursor: pointer;

    accent-color: var(--ayw-primary);

    appearance: none;
    -webkit-appearance: none;
}

.ayw-range::-webkit-slider-runnable-track {
    height: 6px;

    border-radius: var(--ayw-radius-full);

    background: var(--ayw-bg-muted);
}

.ayw-range::-webkit-slider-thumb {
    width: 20px;
    height: 20px;

    margin-top: -7px;

    border: 3px solid var(--ayw-surface);
    border-radius: 50%;

    background: var(--ayw-primary);

    box-shadow: var(--ayw-shadow-sm);

    appearance: none;
    -webkit-appearance: none;
}

.ayw-range::-moz-range-track {
    height: 6px;

    border: 0;
    border-radius: var(--ayw-radius-full);

    background: var(--ayw-bg-muted);
}

.ayw-range::-moz-range-thumb {
    width: 14px;
    height: 14px;

    border: 3px solid var(--ayw-surface);
    border-radius: 50%;

    background: var(--ayw-primary);

    box-shadow: var(--ayw-shadow-sm);
}

.ayw-range:hover::-webkit-slider-thumb {
    background: var(--ayw-primary-hover);
}

.ayw-range:hover::-moz-range-thumb {
    background: var(--ayw-primary-hover);
}

.ayw-range:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 3px;

    border-radius: var(--ayw-radius-full);
}

.ayw-range:disabled {
    cursor: not-allowed;

    opacity: 0.55;
}


/* ==========================================================
   CHECKBOX E RADIO
   ========================================================== */

.ayw-check,
.ayw-radio {
    display: inline-flex;
    align-items: flex-start;

    min-height: 44px;

    gap: var(--ayw-space-3);

    color: var(--ayw-text-soft);

    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-normal);

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.ayw-check-input,
.ayw-radio-input {
    position: relative;

    flex: 0 0 auto;

    width: 20px;
    height: 20px;

    margin:
        1px
        0
        0;

    border: 1px solid var(--ayw-border-strong);

    background: var(--ayw-surface);

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    transition:
        border-color var(--ayw-transition-fast),
        background-color var(--ayw-transition-fast),
        box-shadow var(--ayw-transition-fast);
}

.ayw-check-input {
    border-radius: var(--ayw-radius-sm);
}

.ayw-radio-input {
    border-radius: 50%;
}

.ayw-check-input:hover:not(:disabled),
.ayw-radio-input:hover:not(:disabled) {
    border-color: var(--ayw-primary);
}

.ayw-check-input:focus-visible,
.ayw-radio-input:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
}

.ayw-check-input:checked,
.ayw-radio-input:checked {
    border-color: var(--ayw-primary);

    background: var(--ayw-primary);
}

.ayw-check-input:checked::after {
    position: absolute;
    top: 3px;
    left: 6px;

    width: 5px;
    height: 9px;

    border: solid #ffffff;
    border-width:
        0
        2px
        2px
        0;

    content: "";

    transform: rotate(45deg);
}

.ayw-radio-input:checked::after {
    position: absolute;
    inset: 4px;

    border-radius: 50%;

    background: #ffffff;

    content: "";
}

.ayw-check-input:disabled,
.ayw-radio-input:disabled {
    cursor: not-allowed;

    opacity: 0.55;
}

.ayw-check.is-disabled,
.ayw-radio.is-disabled,
.ayw-check[aria-disabled="true"],
.ayw-radio[aria-disabled="true"] {
    color: var(--ayw-text-disabled);

    cursor: not-allowed;
}


/* ==========================================================
   SWITCH
   ========================================================== */

.ayw-switch {
    display: inline-flex;
    align-items: center;

    min-height: 44px;

    gap: var(--ayw-space-3);

    color: var(--ayw-text-soft);

    font-size: var(--ayw-font-size-sm);

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.ayw-switch-input {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);

    border: 0;

    white-space: nowrap;
}

.ayw-switch-track {
    position: relative;

    display: inline-flex;

    flex: 0 0 auto;

    width: 46px;
    height: 26px;

    border: 1px solid var(--ayw-border-strong);
    border-radius: var(--ayw-radius-pill);

    background: var(--ayw-bg-muted);

    transition:
        border-color var(--ayw-transition-fast),
        background-color var(--ayw-transition-fast),
        box-shadow var(--ayw-transition-fast);
}

.ayw-switch-track::after {
    position: absolute;
    top: 3px;
    left: 3px;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow: var(--ayw-shadow-sm);

    content: "";

    transition:
        transform
        var(--ayw-transition-fast);
}

.ayw-switch:hover
.ayw-switch-input:not(:disabled)
+ .ayw-switch-track {
    border-color: var(--ayw-primary);
}

.ayw-switch-input:checked
+ .ayw-switch-track {
    border-color: var(--ayw-primary);

    background: var(--ayw-primary);
}

.ayw-switch-input:checked
+ .ayw-switch-track::after {
    transform: translateX(20px);
}

.ayw-switch-input:focus-visible
+ .ayw-switch-track {
    box-shadow:
        0 0 0 3px
        var(--ayw-focus-ring);
}

.ayw-switch-input:disabled
+ .ayw-switch-track {
    opacity: 0.55;

    cursor: not-allowed;
}

.ayw-switch.is-disabled,
.ayw-switch[aria-disabled="true"] {
    color: var(--ayw-text-disabled);

    cursor: not-allowed;
}


/* ==========================================================
   FIELDSET
   ========================================================== */

.ayw-fieldset {
    min-width: 0;

    margin: 0;
    padding: var(--ayw-space-5);

    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-lg);

    background: var(--ayw-surface);
}

.ayw-fieldset:disabled {
    opacity: 0.65;
}

.ayw-legend {
    padding:
        0
        var(--ayw-space-2);

    color: var(--ayw-text);

    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-semibold);
}


/* ==========================================================
   AÇÕES DO FORMULÁRIO
   ========================================================== */

.ayw-form-actions {
    display: flex;
    flex-direction: column;

    gap: var(--ayw-space-3);

    padding-top: var(--ayw-space-4);
}

.ayw-form-actions .ayw-btn {
    width: 100%;
}

.ayw-form-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ayw-space-3);
}

.ayw-form-footer > .ayw-form-actions {
    padding-top: 0;
}

.ayw-form[aria-busy="true"] {
    cursor: progress;
}

.ayw-form[aria-busy="true"] .ayw-form-body {
    opacity: 0.72;
    pointer-events: none;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 768px) {
    .ayw-field-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .ayw-form-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .ayw-form-actions .ayw-btn {
        width: auto;
    }

    .ayw-form-footer {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }

    .ayw-form-footer.is-between {
        justify-content: space-between;
    }

    .ayw-input,
    .ayw-select,
    .ayw-textarea {
        font-size: var(--ayw-font-size-sm);
    }
}


/* ==========================================================
   MOVIMENTO REDUZIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .ayw-input,
    .ayw-select,
    .ayw-textarea,
    .ayw-input-action,
    .ayw-check-input,
    .ayw-radio-input,
    .ayw-switch-track,
    .ayw-switch-track::after {
        transition: none;
    }
}


/* ==========================================================
   CAMPO MONETÁRIO
   ========================================================== */

.ayw-money-input {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}


/* ==========================================================
   FALLBACK PARA COLOR-MIX
   ========================================================== */

@supports not (
    color:
        color-mix(
            in srgb,
            black,
            white
        )
) {
    .ayw-input[aria-invalid="true"]:focus,
    .ayw-select[aria-invalid="true"]:focus,
    .ayw-textarea[aria-invalid="true"]:focus {
        box-shadow:
            0 0 0 3px
            rgba(239, 68, 68, 0.22);
    }

    .ayw-input.is-valid:focus,
    .ayw-select.is-valid:focus,
    .ayw-textarea.is-valid:focus {
        box-shadow:
            0 0 0 3px
            rgba(34, 197, 94, 0.22);
    }
}