/*
 * Form Fields - contrato visual compartilhado
 *
 * Esta e a fonte de verdade para campos de formularios administrativos.
 * Arquivos de modulo podem ajustar apenas largura, posicionamento e necessidades
 * funcionais especificas. Aparencia, geometria e estados pertencem a este arquivo.
 */

:root {
    --ui-field-height: 44px;
    --ui-field-radius: 8px;
    --ui-field-padding-block: 8px;
    --ui-field-padding-inline: 12px;
    --ui-field-border-width: 1px;
    --ui-field-background: var(--color-white, #ffffff);
    --ui-field-background-hover: #f8fafc;
    --ui-field-border: #cbd5e0;
    --ui-field-border-hover: #94a3b8;
    --ui-field-text: #2d3748;
    --ui-field-placeholder: #718096;
    --ui-field-focus: var(--color-focus, #4ba0ff);
    --ui-field-focus-ring: rgba(75, 160, 255, 0.2);
    --ui-field-error: #dc3545;
    --ui-field-error-text: #b42332;
    --ui-field-error-ring: rgba(220, 53, 69, 0.16);
    --ui-field-disabled-background: #f1f5f9;
    --ui-field-disabled-text: #64748b;
}

.dark-skin {
    --ui-field-error-text: #fda4af;
    --ui-field-background: var(--color-surface-raised, #30314a);
    --ui-field-background-hover: var(--color-surface-hover, #383a55);
    --ui-field-border: var(--color-border-subtle, #4a4c68);
    --ui-field-border-hover: var(--color-border-hover, #646783);
    --ui-field-text: var(--color-text-body, #e2e8f0);
    --ui-field-placeholder: var(--color-text-muted, #94a3b8);
    --ui-field-disabled-background: #1f2937;
    --ui-field-disabled-text: #94a3b8;
}

/* O painel oficial mantém superfície escura também fora de .dark-skin. */
.ui-drawer {
    --ui-field-error-text: #fda4af;
}

.form-control,
.form-select {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--ui-field-height);
    padding: var(--ui-field-padding-block) var(--ui-field-padding-inline);
    border: var(--ui-field-border-width) solid var(--ui-field-border);
    border-radius: var(--ui-field-radius);
    background-color: var(--ui-field-background);
    color: var(--ui-field-text);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.form-label.required::after,
.form-label.is-required::after,
.required-field::after {
    margin-left: 4px;
    color: var(--ui-field-error);
    content: "*";
    font-weight: 700;
}

.invalid-feedback,
.validation-message {
    display: none;
    width: 100%;
    overflow-wrap: anywhere;
    margin-top: 4px;
    color: var(--ui-field-error-text);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* A confirmação tem superfície escura fixa, inclusive no tema claro. */
.delete-modal :is(.invalid-feedback, .validation-message) {
    color: #fda4af;
}

.invalid-feedback.show,
.validation-message.show,
.form-control.is-invalid + .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid + .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback,
.form-control[aria-invalid="true"] + .invalid-feedback,
.form-control[aria-invalid="true"] ~ .invalid-feedback,
.form-select[aria-invalid="true"] + .invalid-feedback,
.form-select[aria-invalid="true"] ~ .invalid-feedback,
.is-invalid .invalid-feedback {
    display: block;
}

select.form-control,
select.form-select {
    min-height: var(--ui-field-height);
    padding-block: var(--ui-field-padding-block);
    padding-inline-start: var(--ui-field-padding-inline);
    padding-inline-end: 40px;
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    cursor: pointer;
    transform: none;
}

textarea.form-control {
    min-height: 96px;
    /* Match the legacy template selector without changing public textareas. */
    border-radius: var(--ui-field-radius);
    resize: vertical;
    white-space: pre-wrap;
}

/* A field and its official attached action form one row; feedback sits below. */
.input-group:has(> .ui-attached-field-action) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: start;
    width: 100%;
    gap: 0;
}

.input-group:has(> .ui-attached-field-action) > :is(input, select):is(.form-control, .form-select) {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    height: var(--ui-field-height);
    min-height: var(--ui-field-height);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.input-group:has(> .ui-attached-field-action) > :is(.invalid-feedback, .validation-message, .form-text) {
    grid-column: 1 / -1;
}

/* Native date/time controls share activation and states across modules. */
:where(input[type="date"], input[type="time"], input[type="datetime-local"]):not(:disabled, [readonly], [aria-disabled="true"]) {
    cursor: pointer;
}

:where(form[aria-busy="true"]) :is(input[type="date"], input[type="time"], input[type="datetime-local"]) {
    cursor: progress;
}

.form-control::placeholder {
    color: var(--ui-field-placeholder);
    opacity: 1;
}

.form-control:hover:not(:disabled):not([readonly]),
select.form-control:hover:not(:disabled),
select.form-select:hover:not(:disabled) {
    border-color: var(--ui-field-border-hover);
    background-color: var(--ui-field-background-hover);
}

.form-control:focus,
select.form-control:focus,
select.form-select:focus {
    border-color: var(--ui-field-focus);
    background-color: var(--ui-field-background);
    color: var(--ui-field-text);
    box-shadow: 0 0 0 3px var(--ui-field-focus-ring);
    outline: 2px solid var(--ui-field-focus);
    outline-offset: 2px;
}

.form-control.is-invalid,
.form-select.is-invalid,
.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"] {
    border-color: var(--ui-field-error);
    background-image: none;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.form-control[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus {
    border-color: var(--ui-field-error);
    box-shadow: 0 0 0 3px var(--ui-field-error-ring);
    outline-color: var(--ui-field-error);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--ui-field-disabled-background);
    border-color: var(--ui-field-border);
    color: var(--ui-field-disabled-text);
    cursor: not-allowed;
    opacity: 0.72;
}

.form-control[readonly] {
    background-color: var(--ui-field-disabled-background);
    color: var(--ui-field-text);
    cursor: default;
}

select.form-control option,
select.form-select option {
    background: var(--ui-field-background);
    color: var(--ui-field-text);
}

@media (max-width: 768px) {
    .form-control,
    .form-select {
        min-height: var(--ui-field-height);
        padding-block: var(--ui-field-padding-block);
        font-size: 16px;
    }

    select.form-control,
    select.form-select {
        min-height: var(--ui-field-height);
        padding-inline-end: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .form-control,
    .form-select {
        transition: none;
    }
}