/* =============================================================================
   FNC Module Common Styles
   Estilos comuns para o modulo Financeiro
   ============================================================================= */

/* =========================================================================
   FILTER PANEL
   ========================================================================= */
.fnc-filtro-card {
    border: 1px solid var(--fnc-neutral-200);
    border-radius: var(--fnc-radius-lg);
    overflow: hidden;
}

.fnc-filtro-header {
    padding: 12px 16px;
    background: var(--fnc-neutral-50);
    border-bottom: 1px solid var(--fnc-neutral-200);
}

.fnc-filtro-grupo {
    background: var(--fnc-neutral-50);
    border-radius: var(--fnc-radius-md);
    border: 1px solid var(--fnc-neutral-100);
}

.fnc-filtro-acoes {
    background: var(--fnc-neutral-100);
    border-radius: var(--fnc-radius-md);
}

/* =========================================================================
   KPI CARDS
   ========================================================================= */
.fnc-kpi-card {
    background: white;
    border-radius: var(--fnc-radius-md);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all var(--fnc-transition-normal);
    border: 1px solid var(--fnc-neutral-200);
    box-shadow: var(--fnc-shadow-xs);
    height: 100%;
}

.fnc-kpi-card:hover {
    box-shadow: var(--fnc-shadow-md);
    transform: translateY(-2px);
}

.fnc-kpi-card .fnc-kpi-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.fnc-kpi-card .fnc-kpi-label {
    font-size: 12px;
    font-weight: var(--fnc-font-weight-medium);
    color: var(--fnc-neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fnc-kpi-card .fnc-kpi-value {
    font-size: 20px;
    font-weight: var(--fnc-font-weight-bold);
    color: var(--fnc-neutral-900);
    margin-top: 4px;
}

.fnc-kpi-card .fnc-kpi-subtitle {
    font-size: 11px;
    color: var(--fnc-neutral-500);
    margin-top: 2px;
}

/* KPI Card variants */
.fnc-kpi-card.receber {
    border-left: 4px solid var(--fnc-receber);
}

.fnc-kpi-card.pagar {
    border-left: 4px solid var(--fnc-pagar);
}

.fnc-kpi-card.vencido {
    border-left: 4px solid var(--fnc-status-vencido);
}

.fnc-kpi-card.saldo {
    border-left: 4px solid var(--fnc-primary);
}

/* =========================================================================
   HERO SECTION
   ========================================================================= */
.fnc-hero {
    background: var(--fnc-hero-gradient);
    border-radius: var(--fnc-radius-lg);
    padding: 24px;
    color: white;
    box-shadow: var(--fnc-shadow-md);
}

.fnc-hero .fnc-hero-label {
    font-size: 11px;
    font-weight: var(--fnc-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--fnc-white-alpha-70);
}

.fnc-hero .fnc-hero-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
}

.fnc-hero .fnc-hero-value .currency {
    font-size: 18px;
    font-weight: var(--fnc-font-weight-medium);
    opacity: 0.9;
}

.fnc-hero .fnc-hero-value .amount {
    font-size: 36px;
    font-weight: var(--fnc-font-weight-bold);
    letter-spacing: -1px;
}

/* Pulse metric (secondary metrics in hero) */
.fnc-pulse-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--fnc-white-alpha-10);
    border-radius: var(--fnc-radius-md);
    text-align: center;
    min-width: 100px;
}

.fnc-pulse-metric .fnc-pulse-value {
    font-size: 20px;
    font-weight: var(--fnc-font-weight-bold);
    margin-top: 4px;
}

.fnc-pulse-metric .fnc-pulse-label {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 2px;
}

/* =========================================================================
   VARIATION CHIPS
   ========================================================================= */
.fnc-variacao-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--fnc-radius-full);
    font-size: 12px;
    font-weight: var(--fnc-font-weight-semibold);
}

.fnc-variacao-chip.up {
    background: var(--fnc-receber-alpha-15);
    color: var(--fnc-receber-dark);
}

.fnc-variacao-chip.down {
    background: rgba(244, 67, 54, 0.15);
    color: #c62828;
}

/* =========================================================================
   AGING BARS
   ========================================================================= */
.fnc-aging-bar {
    display: flex;
    height: 24px;
    border-radius: var(--fnc-radius-sm);
    overflow: hidden;
    background: var(--fnc-neutral-100);
}

.fnc-aging-bar .fnc-aging-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2px;
    transition: width var(--fnc-transition-normal);
}

.fnc-aging-bar .fnc-aging-segment span {
    font-size: 10px;
    font-weight: var(--fnc-font-weight-semibold);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* =========================================================================
   STATUS BADGES
   ========================================================================= */
.fnc-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--fnc-radius-sm);
    font-size: 11px;
    font-weight: var(--fnc-font-weight-medium);
}

.fnc-status-badge.lancado {
    background: rgba(33, 150, 243, 0.15);
    color: var(--fnc-status-lancado);
}

.fnc-status-badge.quitado {
    background: var(--fnc-receber-alpha-15);
    color: var(--fnc-status-quitado);
}

.fnc-status-badge.vencido {
    background: rgba(244, 67, 54, 0.15);
    color: var(--fnc-status-vencido);
}

.fnc-status-badge.agendado {
    background: rgba(156, 39, 176, 0.15);
    color: var(--fnc-status-agendado);
}

.fnc-status-badge.parcial {
    background: var(--fnc-pagar-alpha-15);
    color: var(--fnc-status-parcial);
}

.fnc-status-badge.cancelado {
    background: rgba(158, 158, 158, 0.15);
    color: var(--fnc-status-cancelado);
}

/* =========================================================================
   RANKING ITEMS
   ========================================================================= */
.fnc-ranking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border-radius: var(--fnc-radius-md);
    border: 1px solid var(--fnc-neutral-200);
    transition: all var(--fnc-transition-normal);
}

.fnc-ranking-item:hover {
    box-shadow: var(--fnc-shadow-sm);
    border-color: var(--fnc-primary-alpha-30);
}

.fnc-ranking-item .fnc-medal {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--fnc-font-weight-bold);
}

.fnc-ranking-item .fnc-medal.gold {
    background: var(--fnc-medal-gold-light);
    color: #b7791f;
}

.fnc-ranking-item .fnc-medal.silver {
    background: var(--fnc-medal-silver-light);
    color: #616161;
}

.fnc-ranking-item .fnc-medal.bronze {
    background: var(--fnc-medal-bronze-light);
    color: #8b5a2b;
}

.fnc-ranking-item .fnc-medal.default {
    background: var(--fnc-neutral-100);
    color: var(--fnc-neutral-600);
}

/* =========================================================================
   ALERTS
   ========================================================================= */
.fnc-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--fnc-radius-md);
    border-left: 4px solid;
}

.fnc-alert.info {
    background: var(--fnc-alert-info-bg);
    border-color: var(--fnc-alert-info);
}

.fnc-alert.warning {
    background: var(--fnc-alert-warning-bg);
    border-color: var(--fnc-alert-warning);
}

.fnc-alert.error {
    background: var(--fnc-alert-error-bg);
    border-color: var(--fnc-alert-error);
}

.fnc-alert.success {
    background: var(--fnc-alert-success-bg);
    border-color: var(--fnc-alert-success);
}

/* =========================================================================
   FIXED TOTALIZER (FOOTER)
   ========================================================================= */
.fnc-totalizador-fixo {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--fnc-neutral-200);
    padding: 12px 24px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    z-index: var(--fnc-z-sticky);
    transition: left var(--fnc-transition-normal);
}

.fnc-totalizador-fixo .fnc-total-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fnc-totalizador-fixo .fnc-total-label {
    font-size: 10px;
    font-weight: var(--fnc-font-weight-medium);
    color: var(--fnc-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fnc-totalizador-fixo .fnc-total-valor {
    font-size: 16px;
    font-weight: var(--fnc-font-weight-bold);
    color: var(--fnc-primary);
}

.fnc-totalizador-fixo .fnc-total-valor.positivo {
    color: var(--fnc-receber);
}

.fnc-totalizador-fixo .fnc-total-valor.negativo {
    color: var(--fnc-status-vencido);
}

/* =========================================================================
   EMPTY STATE
   ========================================================================= */
.fnc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    background: linear-gradient(135deg, var(--fnc-neutral-100) 0%, var(--fnc-neutral-200) 100%);
    border-radius: var(--fnc-radius-lg);
}

.fnc-empty-state .fnc-empty-icon {
    font-size: 64px;
    color: var(--fnc-primary);
    margin-bottom: 16px;
}

.fnc-empty-state .fnc-empty-title {
    font-size: 20px;
    font-weight: var(--fnc-font-weight-semibold);
    color: var(--fnc-primary);
    margin-bottom: 8px;
}

.fnc-empty-state .fnc-empty-message {
    font-size: 14px;
    color: var(--fnc-neutral-600);
    max-width: 400px;
}

/* =========================================================================
   CARD ANIMATIONS
   ========================================================================= */
.fnc-card-animate {
    animation: fnc-fadeInUp 0.3s ease-out forwards;
    opacity: 0;
}

@keyframes fnc-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for card grids */
.fnc-card-animate:nth-child(1) { animation-delay: 0.05s; }
.fnc-card-animate:nth-child(2) { animation-delay: 0.1s; }
.fnc-card-animate:nth-child(3) { animation-delay: 0.15s; }
.fnc-card-animate:nth-child(4) { animation-delay: 0.2s; }
.fnc-card-animate:nth-child(5) { animation-delay: 0.25s; }
.fnc-card-animate:nth-child(6) { animation-delay: 0.3s; }

/* =========================================================================
   UTILITY CLASSES
   ========================================================================= */
.fnc-text-receber { color: var(--fnc-receber) !important; }
.fnc-text-pagar { color: var(--fnc-pagar) !important; }
.fnc-text-vencido { color: var(--fnc-status-vencido) !important; }
.fnc-text-positivo { color: var(--fnc-saldo-positivo) !important; }
.fnc-text-negativo { color: var(--fnc-saldo-negativo) !important; }

.fnc-bg-receber { background-color: var(--fnc-receber-bg) !important; }
.fnc-bg-pagar { background-color: var(--fnc-pagar-bg) !important; }

/* =========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================= */

/* Large tablets and small desktops */
@media (max-width: 1200px) {
    .fnc-hero .fnc-hero-value .amount {
        font-size: 28px;
    }

    .fnc-kpi-card .fnc-kpi-value {
        font-size: 18px;
    }
}

/* Tablets */
@media (max-width: 992px) {
    .fnc-hero {
        padding: 20px;
    }

    .fnc-hero .fnc-hero-value .amount {
        font-size: 24px;
    }

    .fnc-pulse-metric {
        padding: 12px;
        min-width: 80px;
    }

    .fnc-pulse-metric .fnc-pulse-value {
        font-size: 16px;
    }

    .fnc-kpi-card {
        padding: 12px;
    }

    .fnc-kpi-card .fnc-kpi-value {
        font-size: 16px;
    }

    .fnc-totalizador-fixo {
        padding: 10px 16px;
    }

    .fnc-totalizador-fixo .fnc-total-valor {
        font-size: 14px;
    }
}

/* Mobile devices */
@media (max-width: 768px) {
    .fnc-filtro-grupo {
        padding: 12px !important;
    }

    .fnc-hero {
        padding: 16px;
    }

    .fnc-hero .fnc-hero-value .currency {
        font-size: 14px;
    }

    .fnc-hero .fnc-hero-value .amount {
        font-size: 20px;
    }

    .fnc-pulse-metric {
        padding: 8px;
        min-width: 60px;
    }

    .fnc-pulse-metric .fnc-pulse-value {
        font-size: 14px;
    }

    .fnc-pulse-metric .fnc-pulse-label {
        font-size: 9px;
    }

    .fnc-kpi-card {
        padding: 10px;
        gap: 8px;
    }

    .fnc-kpi-card .fnc-kpi-label {
        font-size: 10px;
    }

    .fnc-kpi-card .fnc-kpi-value {
        font-size: 14px;
    }

    .fnc-kpi-card .fnc-kpi-subtitle {
        font-size: 9px;
    }

    .fnc-ranking-item {
        padding: 10px;
        gap: 8px;
    }

    .fnc-ranking-item .fnc-medal {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    .fnc-totalizador-fixo {
        padding: 8px 12px;
    }

    .fnc-totalizador-fixo .fnc-total-label {
        font-size: 9px;
    }

    .fnc-totalizador-fixo .fnc-total-valor {
        font-size: 12px;
    }

    .fnc-empty-state {
        padding: 32px 16px;
    }

    .fnc-empty-state .fnc-empty-icon {
        font-size: 48px;
    }

    .fnc-empty-state .fnc-empty-title {
        font-size: 16px;
    }

    .fnc-empty-state .fnc-empty-message {
        font-size: 12px;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .fnc-hero .fnc-hero-value .amount {
        font-size: 18px;
    }

    .fnc-hero .fnc-hero-value .currency {
        font-size: 12px;
    }

    .fnc-kpi-card .fnc-kpi-value {
        font-size: 12px;
    }

    .fnc-totalizador-fixo {
        padding: 6px 8px;
    }
}

/* Print styles */
@media print {
    .fnc-filtro-card,
    .fnc-totalizador-fixo,
    .fnc-toolbar {
        display: none !important;
    }

    .fnc-relatorio {
        padding: 0 !important;
    }
}