/**
 * ============================================================================
 * CURRENCY INPUT - Estilos para Campos Monetários Brasileiros
 * ============================================================================
 * Versão: 1.0.0
 * Data: 2025
 * Descrição: Estilos padronizados para campos monetários com símbolo R$
 * ============================================================================
 */

/* Wrapper do campo monetário */
.currency-input-wrapper {
    position: relative;
    width: 100%;
    display: inline-block;
}

/* Símbolo R$ */
.currency-symbol {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 2.75rem;
    height: calc(100% - 2px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-default);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    border-radius: 0.375rem 0 0 0.375rem;
    text-align: center;
}

/* Modo escuro - herda variáveis do tema */
.dark .currency-symbol {
    background: var(--bg-surface);
    border-right-color: var(--border-default);
    color: var(--text-muted);
}

/* Input dentro do wrapper */
.currency-input-wrapper input,
.currency-input-wrapper .form-control {
    padding-left: 3.5rem;
    padding-right: 0.75rem;
    text-align: right;
    font-family: 'Courier New', monospace;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* Classe direta para inputs monetários */
.currency-input,
.mascara-monetaria,
input[data-money="true"] {
    text-align: right;
    direction: ltr;
    font-variant-numeric: tabular-nums;
    font-family: 'Courier New', monospace;
    font-weight: 500;
}

/* Placeholder alinhado à direita */
.currency-input::placeholder,
.mascara-monetaria::placeholder,
input[data-money="true"]::placeholder {
    text-align: right;
    color: var(--text-muted);
}

/* Hover effect */
.currency-input-wrapper input:hover,
.currency-input:hover,
.mascara-monetaria:hover {
    background-color: var(--bg-surface);
}

/* Focus melhorado */
.currency-input-wrapper input:focus,
.currency-input:focus,
.mascara-monetaria:focus {
    background-color: var(--bg-surface);
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-500-rgb, 79, 70, 229), 0.1);
    outline: none;
}

/* Campos com tamanho de texto maior */
.currency-input-wrapper .text-lg {
    font-size: 1.125rem;
    font-weight: 600;
}

/* Campos readonly */
.currency-input-wrapper input[readonly],
.currency-input[readonly],
.mascara-monetaria[readonly] {
    background-color: var(--bg-surface);
    cursor: not-allowed;
}

/* Animação suave para transições */
.currency-input-wrapper input,
.currency-input,
.mascara-monetaria {
    transition: all 0.2s ease-in-out;
}

/* Responsividade para mobile */
@media (max-width: 640px) {
    .currency-symbol {
        width: 2.5rem;
        font-size: 0.75rem;
    }

    .currency-input-wrapper input,
    .currency-input-wrapper .form-control {
        padding-left: 3rem;
        font-size: 0.95rem;
    }
}

/* Estados de validação */
.currency-input-wrapper input.border-green-500,
.currency-input.border-green-500,
.mascara-monetaria.border-green-500 {
    border-color: var(--color-success-500, #10b981);
}

.currency-input-wrapper input.border-red-500,
.currency-input.border-red-500,
.mascara-monetaria.border-red-500 {
    border-color: var(--color-error-500, #ef4444);
}

/* Ícones de validação não devem sobrepor o texto */
.currency-input-wrapper .validation-icon {
    right: 0.5rem;
    z-index: 2;
}

/* ═══ PROTEÇÃO: Células de resumo financeiro ═══ */
/* Esconde apenas ícones/símbolos decorativos, mantém wrappers e inputs visíveis */
.resumo-financeiro-cell .currency-symbol,
.resumo-financeiro-cell .icon-left,
.resumo-financeiro-cell .icon-right {
    display: none !important;
}

/* Reseta wrappers injetados pelo JS para não quebrar o layout */
.resumo-financeiro-cell .currency-input-wrapper,
.resumo-financeiro-cell .input-icon-group {
    position: static !important;
    display: block !important;
}

/* Remove padding/estilos que o JS injeta nos inputs do resumo */
.resumo-financeiro-cell input {
    padding-left: 0 !important;
    text-align: center !important;
    font-family: inherit !important;
    border: none !important;
}

/* R$ nativo do template - nunca esconder */
.resumo-financeiro-cell .resumo-rs {
    display: inline !important;
    flex-shrink: 0;
    pointer-events: none;
    user-select: none;
}

/* Esconder spinners do input[type=number] no resumo financeiro */
.resumo-financeiro-cell input[type="number"]::-webkit-inner-spin-button,
.resumo-financeiro-cell input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.resumo-financeiro-cell input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Mobile: resumo financeiro */
@media (max-width: 640px) {
    .resumo-financeiro-cell .resumo-rs {
        font-size: 0.75rem;
    }
    .resumo-financeiro-cell input {
        font-size: 1rem !important;
    }
}

@media (max-width: 360px) {
    .resumo-financeiro-cell .resumo-rs {
        font-size: 0.625rem;
    }
    .resumo-financeiro-cell input {
        font-size: 0.875rem !important;
    }
}