/* ===========================================
   FORMS & INPUTS - GLOBAL DESIGN SYSTEM
   Dourfor Dark/Light Mode Support
   
   Este arquivo define o estilo ÚNICO para TODOS
   os inputs do projeto. Não criar estilos 
   diferentes por contexto (auth, search, etc).
   =========================================== */

/* ============ CSS TOKENS ============ */
:root {
    /* Input Design Tokens */
    --input-border-radius: 12px;
    --input-border-radius-pill: 24px;
    --input-height: 56px;
    --input-padding-x: 16px;
    --input-font-size: 1rem;
    --input-label-size: 0.875rem;
    --input-helper-size: 0.75rem;
    --input-border-width: 1px;
    --input-focus-ring-width: 3px;
    
    /* Colors - Dark Mode (default) */
    --input-bg: transparent;
    --input-border: rgba(255, 255, 255, 0.18);
    --input-border-hover: rgba(255, 255, 255, 0.35);
    --input-border-focus: #3b82f6;
    --input-focus-ring: rgba(59, 130, 246, 0.25);
    --input-text: rgba(255, 255, 255, 0.95);
    --input-label: rgba(255, 255, 255, 0.7);
    --input-placeholder: rgba(255, 255, 255, 0.4);
    --input-icon: rgba(255, 255, 255, 0.6);
    --input-icon-focus: #3b82f6;
    --input-disabled-bg: rgba(255, 255, 255, 0.02);
    --input-disabled-border: rgba(255, 255, 255, 0.08);
    --input-disabled-text: rgba(255, 255, 255, 0.35);
    --input-error-border: #ef4444;
    --input-error-focus-ring: rgba(239, 68, 68, 0.25);
    --input-error-text: #ef4444;
    --input-success-border: #22c55e;
}

/* Light Mode */
body.light {
    --input-bg: transparent;
    --input-border: rgba(0, 0, 0, 0.18);
    --input-border-hover: rgba(0, 0, 0, 0.35);
    --input-border-focus: #2563eb;
    --input-focus-ring: rgba(37, 99, 235, 0.2);
    --input-text: rgba(0, 0, 0, 0.9);
    --input-label: rgba(0, 0, 0, 0.6);
    --input-placeholder: rgba(0, 0, 0, 0.4);
    --input-icon: rgba(0, 0, 0, 0.5);
    --input-icon-focus: #2563eb;
    --input-disabled-bg: rgba(0, 0, 0, 0.02);
    --input-disabled-border: rgba(0, 0, 0, 0.08);
    --input-disabled-text: rgba(0, 0, 0, 0.35);
}

/* ===========================================
   RESET: REMOVER OUTLINE QUADRADO DO NAVEGADOR
   Aplica a TODOS os elementos focáveis
   =========================================== */

/* Reset global de focus para inputs */
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
button:focus-visible,
.mud-input-slot:focus,
.mud-input-slot:focus-visible,
.mud-input-root input:focus,
.mud-input-root input:focus-visible,
.mud-input-root textarea:focus,
.mud-input-root textarea:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
}

/* Remover outline do MudBlazor especificamente */
.mud-input-control input:focus,
.mud-input-control textarea:focus,
.mud-input-control input:focus-visible,
.mud-input-control textarea:focus-visible,
.mud-input input:focus,
.mud-input textarea:focus,
.mud-input input:focus-visible,
.mud-input textarea:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Reset para elementos dentro do MudTextField */
.mud-input-outlined input,
.mud-input-outlined textarea,
.mud-input-filled input,
.mud-input-filled textarea {
    outline: none !important;
}

.mud-input-outlined input:focus,
.mud-input-outlined input:focus-visible,
.mud-input-outlined textarea:focus,
.mud-input-outlined textarea:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ===========================================
   ESTILO BASE PARA TODOS OS INPUTS MUDBLAZOR
   =========================================== */

/* Borda do input outlined - ESTILO PADRÃO */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--input-border-radius) !important;
    border-color: var(--input-border) !important;
    border-width: var(--input-border-width) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    background-color: var(--input-bg) !important;
}

/* Hover */
.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--input-border-hover) !important;
}

/* Focus - o estilo principal sem quadrado */
.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--input-border-focus) !important;
    box-shadow: 0 0 0 var(--input-focus-ring-width) var(--input-focus-ring) !important;
}

/* Focus-within para garantir consistência */
.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--input-border-focus) !important;
    box-shadow: 0 0 0 var(--input-focus-ring-width) var(--input-focus-ring) !important;
    outline: none !important;
}

/* Texto do input */
.mud-input > input,
.mud-input > textarea {
    font-size: var(--input-font-size) !important;
    color: var(--input-text) !important;
}

/* Placeholder */
.mud-input > input::placeholder,
.mud-input > textarea::placeholder {
    color: var(--input-placeholder) !important;
    opacity: 1 !important;
}

/* Labels */
.mud-input-label {
    font-size: var(--input-label-size) !important;
    font-weight: 500 !important;
    color: var(--input-label) !important;
}

.mud-input-label.mud-input-label-animated.mud-input-label-inputcontrol {
    color: var(--input-label) !important;
}

/* Label quando focado */
.mud-input-focused .mud-input-label {
    color: var(--input-border-focus) !important;
}

/* Helper text */
.mud-input-helper-text {
    font-size: var(--input-helper-size) !important;
    margin-top: 6px !important;
}

/* ===========================================
   ÍCONES DE ADORNMENT
   =========================================== */

.mud-input-adornment .mud-icon-root {
    color: var(--input-icon) !important;
    transition: color 0.2s ease !important;
}

.mud-input-focused .mud-input-adornment .mud-icon-root {
    color: var(--input-icon-focus) !important;
}

.mud-input-adornment-start {
    padding-left: 4px !important;
}

.mud-input-adornment-end {
    padding-right: 4px !important;
}

/* ===========================================
   ESTADOS: ERROR, DISABLED, SUCCESS
   =========================================== */

/* Error */
.mud-input-error .mud-input-outlined-border {
    border-color: var(--input-error-border) !important;
}

.mud-input-error.mud-input-focused .mud-input-outlined-border,
.mud-input-error:focus-within .mud-input-outlined-border {
    border-color: var(--input-error-border) !important;
    box-shadow: 0 0 0 var(--input-focus-ring-width) var(--input-error-focus-ring) !important;
}

.mud-input-error .mud-input-label,
.mud-input-error .mud-input-helper-text {
    color: var(--input-error-text) !important;
}

/* Disabled */
.mud-input.mud-disabled .mud-input-outlined-border {
    border-color: var(--input-disabled-border) !important;
    background-color: var(--input-disabled-bg) !important;
}

.mud-input.mud-disabled input,
.mud-input.mud-disabled textarea {
    color: var(--input-disabled-text) !important;
    cursor: not-allowed !important;
}

/* Success */
.input-success .mud-input-outlined-border {
    border-color: var(--input-success-border) !important;
}

.input-success .mud-input-adornment .mud-icon-root {
    color: var(--input-success-border) !important;
}

/* ===========================================
   CLASSE .form-field - APLICAR EM TODOS INPUTS
   =========================================== */

/* A classe form-field garante o padrão em qualquer contexto */
.form-field .mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--input-border-radius) !important;
}

/* ===========================================
   VARIANTE PILL (para busca) - OPCIONAL
   Usar com: Class="form-field form-field--pill"
   =========================================== */

.form-field--pill .mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--input-border-radius-pill) !important;
}

.form-field--pill .mud-input > input {
    padding-left: 8px !important;
}

/* Manter compatibilidade com search-field existente */
.search-field .mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--input-border-radius-pill) !important;
}

.search-field .mud-input > input {
    padding-left: 8px !important;
}

/* ===========================================
   SELECT, AUTOCOMPLETE, TEXTAREA
   =========================================== */

/* MudSelect */
.mud-select .mud-input-outlined-border {
    border-radius: var(--input-border-radius) !important;
    border-color: var(--input-border) !important;
}

.mud-select:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--input-border-hover) !important;
}

.mud-select.mud-input-focused .mud-input-outlined-border {
    border-color: var(--input-border-focus) !important;
    box-shadow: 0 0 0 var(--input-focus-ring-width) var(--input-focus-ring) !important;
}

/* Select dropdown popover */
.mud-popover-paper {
    border-radius: var(--input-border-radius) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
}

.mud-list-item {
    border-radius: 8px !important;
    margin: 2px 4px !important;
}

/* MudAutocomplete */
.mud-autocomplete .mud-input-outlined-border {
    border-radius: var(--input-border-radius) !important;
    border-color: var(--input-border) !important;
}

.mud-autocomplete.mud-input-focused .mud-input-outlined-border {
    border-color: var(--input-border-focus) !important;
    box-shadow: 0 0 0 var(--input-focus-ring-width) var(--input-focus-ring) !important;
}

/* Textarea multiline */
.mud-input-text-multiline .mud-input-outlined-border {
    border-radius: var(--input-border-radius) !important;
}

.mud-input-text-multiline textarea {
    line-height: 1.6 !important;
}

/* ===========================================
   CHECKBOX & RADIO
   =========================================== */

.mud-checkbox .mud-button-root:focus-visible,
.mud-radio .mud-button-root:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 var(--input-focus-ring-width) var(--input-focus-ring) !important;
}

.mud-checkbox .mud-button-root {
    border-radius: 8px !important;
}

.mud-radio .mud-button-root {
    border-radius: 50% !important;
}

/* ===========================================
   CÓDIGO INPUT (2FA)
   =========================================== */

.code-input .mud-input > input {
    font-size: 1.5rem !important;
    letter-spacing: 0.5rem;
    text-align: center;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* ===========================================
   PASSWORD FIELD
   =========================================== */

.password-field .mud-input-adornment-end .mud-icon-button {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.password-field .mud-input-adornment-end .mud-icon-button:hover {
    opacity: 1;
}

.password-field .mud-input-adornment-end .mud-icon-button:focus-visible {
    outline: none !important;
    opacity: 1;
}

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

.mud-input-helper-text.mud-input-error {
    animation: shakeError 0.3s ease;
}

@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ===========================================
   ACESSIBILIDADE
   =========================================== */

/* Respeitar preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
    .mud-input-outlined .mud-input-outlined-border,
    .mud-input-adornment .mud-icon-root,
    .mud-input-helper-text.mud-input-error {
        transition: none !important;
        animation: none !important;
    }
}

/* ===========================================
   RESPONSIVIDADE
   =========================================== */

@media (max-width: 599.95px) {
    :root {
        --input-border-radius: 10px;
        --input-border-radius-pill: 20px;
        --input-height: 52px;
        --input-font-size: 16px; /* Previne zoom no iOS */
    }
}

/* ===========================================
   BOTÕES EM CONTEXTO DE FORMULÁRIO
   =========================================== */

.form-btn {
    border-radius: var(--input-border-radius) !important;
    text-transform: none !important;
    font-weight: 600 !important;
    min-height: 48px !important;
    transition: all 0.2s ease !important;
}

.form-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 var(--input-focus-ring-width) var(--input-focus-ring) !important;
}

.form-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.form-btn:active:not(:disabled) {
    transform: translateY(0);
}

.form-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Primary button */
.form-btn-primary {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%) !important;
}

/* Secondary/outlined button */
.form-btn-secondary {
    border-width: 2px !important;
}

.form-btn-secondary:hover:not(:disabled) {
    background-color: rgba(59, 130, 246, 0.08) !important;
}

/* ===========================================
   FORM LAYOUT HELPERS
   =========================================== */

.form-section {
    margin-bottom: 24px;
}

.form-section-title {
    margin-bottom: 16px;
    font-weight: 600;
}

.form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.form-row > * {
    flex: 1;
    min-width: 200px;
}

@media (max-width: 599.95px) {
    .form-row {
        flex-direction: column;
    }
    
    .form-row > * {
        min-width: 100%;
    }
}

/* ===========================================
   COMPACT FIELD (para layouts densos)
   =========================================== */

.form-field-compact .mud-input-control {
    margin-bottom: 0 !important;
}

.form-field-compact .mud-input > input {
    padding: 10px 14px !important;
}