/**
 * =============================================================================
 * RESPONSIVE.CSS - Sistema de Responsividade Completo
 * Movve BPO
 * =============================================================================
 * 
 * Regras de responsividade para todos os tamanhos de tela.
 * Mobile-first approach com breakpoints progressivos.
 * 
 * Breakpoints:
 * - Mobile: < 480px
 * - Mobile Large: 480px - 767px
 * - Tablet: 768px - 1023px
 * - Desktop: 1024px - 1439px
 * - Desktop Large: >= 1440px
 */

/* =============================================================================
   PREVENÇÃO GLOBAL DE OVERFLOW HORIZONTAL
   Garante que nenhum elemento ultrapasse os limites horizontais da tela
   ============================================================================= */

/* Root elements - prevenir overflow no nível mais alto */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

/* App Container */
.app-container {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

/* =============================================================================
   MOBILE SIDEBAR - MENU MOBILE
   Controla a abertura/fechamento do menu lateral em dispositivos móveis
   ============================================================================= */

/* Sidebar base */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Mobile Overlay - fundo escuro */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer;
}

/* Mobile Topbar - barra superior mobile */
.mobile-topbar {
    display: none;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    padding: 0 1rem;
    background: var(--bg-card, #111827);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 100;
    align-items: center;
    justify-content: space-between;
}

/* Botão do Menu Mobile */
.mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.mobile-menu-btn svg {
    width: 24px;
    height: 24px;
    color: var(--text-primary, #fff);
}

.mobile-menu-btn:hover,
.mobile-menu-btn:active {
    background: rgba(255, 255, 255, 0.1);
}

/* Mobile Topbar Title */
.mobile-topbar-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile Topbar Logo */
.mobile-topbar-logo {
    display: flex;
    align-items: center;
}

.mobile-topbar-logo img {
    height: 28px;
    width: auto;
}

/* ============================================
   SIDEBAR OPEN STATE
   Quando body tem classe sidebar-open
   ============================================ */
body.sidebar-open .sidebar {
    transform: translateX(0) !important;
    left: 0 !important;
}

body.sidebar-open .mobile-overlay {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Prevenir scroll do body quando sidebar está aberta */
body.sidebar-open {
    overflow: hidden !important;
}

/* ============================================
   DESKTOP - Sidebar sempre visível
   ============================================ */
@media (min-width: 768px) {
    .sidebar {
        transform: translateX(0);
    }

    .mobile-overlay {
        display: none !important;
    }

    .mobile-topbar {
        display: none !important;
    }

    .main-content {
        margin-left: 280px;
    }
}

/* ============================================
   MOBILE - Sidebar oculta por padrão
   ============================================ */
@media (max-width: 767px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .mobile-topbar {
        display: flex !important;
    }

    .topbar {
        display: none !important;
    }

    .main-content {
        margin-left: 0;
        padding-top: 0;
    }

    /* Força a sidebar aparecer quando aberta */
    body.sidebar-open .sidebar {
        transform: translateX(0) !important;
    }
}

/* Main Content - prevenir overflow */
.main-content {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Content Wrapper */
.content-wrapper {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Regras globais para todos os elementos */
*,
*::before,
*::after {
    max-width: 100%;
    box-sizing: border-box;
}

/* Elementos que podem causar overflow */
img,
video,
iframe,
embed,
object,
canvas,
svg {
    max-width: 100% !important;
    height: auto;
}

/* Tabelas responsivas */
table {
    max-width: 100% !important;
    display: block;
    overflow-x: auto;
}

/* Texto que pode causar overflow */
pre,
code {
    max-width: 100% !important;
    overflow-x: auto !important;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
}

/* Inputs e textareas */
input,
textarea,
select {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Cards e containers */
.card,
.stat-card,
.metric-card,
.tx-stat-card,
.tx-main-card,
.chart-card,
.mc-card,
.projection-card {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Grids - garantir que não ultrapassem */
.metrics-grid,
.stats-grid,
.charts-section,
.mc-grid,
.projections-grid,
.tx-stats-grid,
.grid {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Hero sections */
.hero-section,
.tx-hero {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Formulários */
.form-group,
.form-row,
.filter-bar,
.filter-group {
    max-width: 100% !important;
}

/* Botões e ações */
.hero-actions,
.section-actions,
.page-header-right,
.btn-group-responsive {
    max-width: 100% !important;
    flex-wrap: wrap !important;
}

/* Listas de transações */
.transactions-list,
.tx-list {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.transaction-row,
.tx-item {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Textos longos - forçar quebra */
.tx-item-desc,
.tx-desc,
.description,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

/* =============================================================================
   CONTAINER RESPONSIVO
   ============================================================================= */
.container {
    width: 100%;
    max-width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* =============================================================================
   CLASSES UTILITÁRIAS DE VISIBILIDADE
   ============================================================================= */

/* Mobile only (< 768px) */
.hide-mobile {
    display: none !important;
}

.show-mobile {
    display: block !important;
}

/* Tablet only (768px - 1023px) */
.hide-tablet {
    display: initial !important;
}

/* Desktop only (>= 1024px) */
.hide-desktop {
    display: initial !important;
}

/* =============================================================================
   TABELAS RESPONSIVAS
   ============================================================================= */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* =============================================================================
   GRID DE CARDS RESPONSIVO
   ============================================================================= */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* A sidebar mobile agora é controlada pela seção "MOBILE SIDEBAR" no início deste arquivo */

/* =============================================================================
   FORMULÁRIOS RESPONSIVOS
   ============================================================================= */
.form-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-col {
    flex: 1;
    min-width: 0;
}

/* =============================================================================
   BOTÕES RESPONSIVOS
   ============================================================================= */
.btn-group-responsive {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.btn-group-responsive .btn {
    width: 100%;
    justify-content: center;
}

/* =============================================================================
   TEXTO RESPONSIVO
   ============================================================================= */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-wrap-mobile {
    word-break: break-word;
}

/* =============================================================================
   BREAKPOINT: TABLET (768px+)
   ============================================================================= */
@media (min-width: 768px) {
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Visibilidade */
    .hide-mobile {
        display: initial !important;
    }

    .show-mobile {
        display: none !important;
    }

    .hide-tablet {
        display: none !important;
    }

    /* Grid de cards */
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Sidebar - Controlada pela seção no início deste arquivo */

    /* Menu toggle */
    .menu-toggle {
        display: none;
    }

    /* Formulários */
    .form-row {
        flex-direction: row;
    }

    /* Botões */
    .btn-group-responsive {
        flex-direction: row;
        width: auto;
    }

    .btn-group-responsive .btn {
        width: auto;
    }
}

/* =============================================================================
   BREAKPOINT: DESKTOP (1024px+)
   ============================================================================= */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        padding-left: 32px;
        padding-right: 32px;
    }

    /* Visibilidade */
    .hide-tablet {
        display: initial !important;
    }

    .hide-desktop {
        display: none !important;
    }

    /* Grid de cards */
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .card-grid.four-cols {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Sidebar Desktop */
    .sidebar {
        width: 280px;
    }

    .main-content {
        margin-left: 280px;
    }
}

/* =============================================================================
   BREAKPOINT: DESKTOP LARGE (1440px+)
   ============================================================================= */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }

    .card-grid.four-cols {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =============================================================================
   BREAKPOINT: MOBILE EXTRA PEQUENO (< 360px)
   ============================================================================= */
@media (max-width: 359px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    h1 {
        font-size: 1.25rem;
    }

    h2 {
        font-size: 1.125rem;
    }

    .btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    .form-control {
        padding: 8px 10px;
        font-size: 14px;
    }
}

/* =============================================================================
   ESTILO DE IMPRESSÃO
   ============================================================================= */
@media print {

    .sidebar,
    .menu-toggle,
    .btn,
    .no-print,
    .mobile-topbar,
    .pwa-install-banner {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    body {
        background: white;
        color: black;
    }

    .card {
        border: 1px solid #ccc;
        box-shadow: none;
    }
}

/* =============================================================================
   MODO PAISAGEM EM MOBILE
   ============================================================================= */
@media (max-width: 767px) and (orientation: landscape) {
    .mobile-topbar {
        height: 48px;
    }

    .content-wrapper {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .page-title {
        font-size: 18px;
    }
}

/* =============================================================================
   SAFE AREA INSETS (iPhone X+, Notches)
   ============================================================================= */
@supports (padding: env(safe-area-inset-left)) {
    .mobile-topbar {
        padding-left: calc(16px + env(safe-area-inset-left));
        padding-right: calc(16px + env(safe-area-inset-right));
    }

    .content-wrapper {
        padding-left: calc(16px + env(safe-area-inset-left));
        padding-right: calc(16px + env(safe-area-inset-right));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    .pwa-install-banner {
        padding-left: calc(24px + env(safe-area-inset-left));
        padding-right: calc(24px + env(safe-area-inset-right));
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    .sidebar {
        padding-top: env(safe-area-inset-top);
    }
}

/* =============================================================================
   PREFERÊNCIA DE MOVIMENTO REDUZIDO
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   MODO ESCURO DO SISTEMA (Fallback)
   ============================================================================= */
@media (prefers-color-scheme: dark) {

    /* Se o usuário não definiu preferência manual, usar tema escuro do sistema */
    html:not([data-theme]) {
        color-scheme: dark;
    }
}

/* =============================================================================
   RESPONSIVIDADE ESPECÍFICA POR COMPONENTE
   ============================================================================= */

/* =============================================================================
   MOBILE PEQUENO (< 480px)
   ============================================================================= */
@media (max-width: 479px) {

    /* Layout Principal */
    .content-wrapper {
        padding: 12px !important;
    }

    /* Dashboard Hero */
    .hero-section {
        padding: 1.25rem !important;
    }

    .hero-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    .hero-chart {
        display: none !important;
    }

    .hero-balance-value {
        font-size: 1.75rem !important;
    }

    .hero-balance-value .currency {
        font-size: 1rem !important;
    }

    .hero-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Dashboard Metrics Grid */
    .metrics-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .metric-card {
        padding: 1rem !important;
    }

    .metric-value {
        font-size: 1.125rem !important;
    }

    .metric-label {
        font-size: 0.75rem !important;
    }

    /* Charts Section */
    .charts-section {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .chart-body {
        padding: 1rem !important;
        min-height: 220px !important;
    }

    .chart-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }

    .chart-period-selector {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Monte Carlo */
    .monte-carlo-section .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .mc-period-selector {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .mc-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .mc-card {
        padding: 1rem !important;
    }

    .mc-value {
        font-size: 1.125rem !important;
    }

    .mc-detail-row {
        grid-template-columns: 1fr !important;
    }

    /* Projeções */
    .projections-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .projection-card {
        padding: 1rem !important;
    }

    .proj-value {
        font-size: 1.125rem !important;
    }

    /* Transactions Section */
    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .section-actions {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .transactions-list .transaction-row {
        flex-wrap: wrap !important;
        padding: 0.75rem !important;
        gap: 0.5rem !important;
    }

    .tx-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .tx-info {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .tx-meta {
        margin-left: auto !important;
    }

    /* Transaction Page Hero */
    .tx-hero {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 1.25rem !important;
        text-align: center !important;
    }

    .tx-hero-content {
        flex-direction: column !important;
        text-align: center !important;
    }

    .tx-hero-icon {
        margin: 0 auto !important;
    }

    .tx-hero-actions {
        width: 100% !important;
    }

    .tx-hero-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Transaction Stats */
    .tx-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .tx-stat-card {
        padding: 1rem !important;
    }

    .tx-stat-value {
        font-size: 1.125rem !important;
    }

    /* Transaction Filters */
    .tx-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .tx-filter-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    .tx-filter-toggle {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Transaction Card */
    .tx-card-header {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }

    .tx-search-box {
        width: 100% !important;
        min-width: unset !important;
    }

    /* Transaction Items - Layout Card */
    .tx-item {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 0.5rem 0.75rem !important;
        padding: 1rem !important;
    }

    .tx-item-icon {
        grid-row: span 2 !important;
        align-self: center !important;
    }

    .tx-item-main {
        grid-column: 2 !important;
    }

    .tx-item-amount {
        grid-column: 3 !important;
        grid-row: span 2 !important;
        align-self: center !important;
        min-width: unset !important;
    }

    .tx-item-date,
    .tx-item-status,
    .tx-item-actions {
        display: none !important;
    }

    .tx-amount-value {
        font-size: 0.9375rem !important;
    }

    /* Stats Grid Global */
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .stat-card {
        padding: 1rem !important;
    }

    .stat-card-value {
        font-size: 1.25rem !important;
    }

    /* Formulários */
    .form-group-row,
    .filter-bar {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .form-control,
    .form-select,
    select,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="number"],
    textarea {
        font-size: 16px !important;
        /* Previne zoom no iOS */
    }

    /* Botões */
    .page-header-right {
        flex-direction: column !important;
        width: 100% !important;
    }

    .page-header-right .btn {
        width: 100% !important;
    }

    /* Modais */
    .modal-content,
    .confirm-modal {
        width: 95% !important;
        margin: 10px !important;
    }

    /* Toasts */
    .toast-container,
    #toastContainer {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
    }

    .toast {
        min-width: unset !important;
        max-width: 100% !important;
    }
}

/* =============================================================================
   MOBILE (480px - 767px)
   ============================================================================= */
@media (min-width: 480px) and (max-width: 767px) {

    /* Dashboard Metrics Grid - 2 colunas */
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Charts Section */
    .charts-section {
        grid-template-columns: 1fr !important;
    }

    /* Monte Carlo */
    .mc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Projeções */
    .projections-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Transaction Stats */
    .tx-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Formulários em 2 colunas quando possível */
    .form-row {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .form-col {
        flex: 0 0 calc(50% - 8px) !important;
    }
}

/* =============================================================================
   TABLET (768px - 1023px)
   ============================================================================= */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Dashboard Metrics Grid - 2 colunas */
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Charts Section - Stack */
    .charts-section {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Monte Carlo - 2 colunas */
    .mc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Transaction Stats - 3 colunas mantém */
    .tx-stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Sidebar minificada no tablet */
    .sidebar {
        width: 80px !important;
    }

    .sidebar .nav-link span,
    .sidebar .user-info,
    .sidebar .nav-section-label {
        display: none !important;
    }

    .sidebar .nav-link {
        justify-content: center !important;
        padding: 12px !important;
    }

    .sidebar .user-profile {
        justify-content: center !important;
        padding: 10px !important;
    }

    .main-content {
        margin-left: 80px !important;
    }

    /* Stats Grid - 2 colunas */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =============================================================================
   DESKTOP (1024px+)
   ============================================================================= */
@media (min-width: 1024px) {

    /* Metrics Grid volta para 4 colunas */
    .metrics-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Charts Section lado a lado */
    .charts-section {
        grid-template-columns: 1.5fr 1fr;
    }

    /* Monte Carlo - 4 colunas */
    .mc-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Transaction Stats - 3 colunas */
    .tx-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Stats Grid - 4 colunas */
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Sidebar expandida */
    .sidebar {
        width: 240px;
    }

    .main-content {
        margin-left: 240px;
    }
}

/* =============================================================================
   TOUCH TARGETS - Garantir áreas de toque adequadas
   ============================================================================= */
@media (hover: none) and (pointer: coarse) {

    /* Botões de ação maiores em dispositivos touch */
    .tx-action-btn,
    .icon-btn,
    .btn-logout {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Links de navegação */
    .nav-link {
        min-height: 48px !important;
    }

    /* Filtros */
    .tx-filter-btn,
    .period-btn,
    .mc-period-btn {
        min-height: 44px !important;
        padding: 0.625rem 1rem !important;
    }
}

/* =============================================================================
   HIGH DPI / RETINA DISPLAYS
   ============================================================================= */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Bordas mais finas em telas de alta resolução */
    .card,
    .metric-card,
    .tx-stat-card,
    .tx-main-card,
    .chart-card {
        border-width: 0.5px;
    }
}

/* =============================================================================
   FILTROS RESPONSIVOS - TODAS AS PÁGINAS
   Melhora a diagramação das barras de filtros em mobile
   ============================================================================= */

/* Estilos base melhorados para filtros */
.tx-filter-toggle,
.tpl-filter-group,
.cl-filter-group,
.cat-filter-group {
    display: flex;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.25rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Botões de filtro com visual premium */
.tx-filter-btn,
.tpl-filter-btn,
.cl-filter-btn,
.cat-filter-btn {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Estado ativo com gradiente */
.tx-filter-btn.active,
.tpl-filter-btn.active,
.cl-filter-btn.active,
.cat-filter-btn.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}

/* Cores específicas - Receitas/Entradas */
.tx-filter-btn.income.active,
.tpl-filter-btn.income.active,
.cat-filter-btn.income.active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
}

/* Cores específicas - Despesas/Saídas */
.tx-filter-btn.expense.active,
.tpl-filter-btn.expense.active,
.cat-filter-btn.expense.active {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}

/* Status Realizado */
.tx-filter-btn.done.active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
}

/* Status Previsto/Pending */
.tx-filter-btn.pending.active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

/* Outros */
.cat-filter-btn.other.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
}

/* ============================================
   FILTROS - RESPONSIVO MOBILE
   ============================================ */
@media (max-width: 767px) {

    /* Filter bars empilham vertical */
    .tx-filter-bar,
    .tpl-filter-bar,
    .cl-filter-bar,
    .cat-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }

    /* Filter groups ocupam largura total */
    .tx-filter-group,
    .tpl-filter-group,
    .cl-filter-group,
    .cat-filter-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    /* Toggle groups com scroll horizontal */
    .tx-filter-toggle,
    .tpl-filter-toggle,
    .cl-filter-toggle,
    .cat-filter-toggle {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    /* Filtros botões ocupam espaço igual */
    .tx-filter-btn,
    .tpl-filter-btn,
    .cl-filter-btn,
    .cat-filter-btn {
        flex: 1 !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 0.625rem 0.75rem !important;
        font-size: 0.75rem !important;
    }

    /* Labels de filtro */
    .tx-filter-label,
    .tpl-filter-label,
    .cl-filter-label,
    .cat-filter-label {
        font-size: 0.6875rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: var(--text-muted, #64748b) !important;
        margin-bottom: 0.375rem !important;
    }

    /* Clear filters */
    .tx-clear-filters {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.75rem !important;
    }
}

/* Mobile pequeno - ajustes extras */
@media (max-width: 479px) {

    .tx-filter-btn,
    .tpl-filter-btn,
    .cl-filter-btn,
    .cat-filter-btn {
        font-size: 0.6875rem !important;
        padding: 0.5rem 0.5rem !important;
    }

    /* Ocultar ícones SVG em filtros para economizar espaço */
    .tx-filter-btn svg,
    .cl-filter-btn svg {
        display: none !important;
    }
}

/* =============================================================================
   CORREÇÕES ESPECÍFICAS PARA iPHONE 11 PRO E MOBILE (375px - 414px)
   Valores monetários, cards, e responsividade geral
   ============================================================================= */

@media (max-width: 479px) {

    /* ============================================
       VALORES MONETÁRIOS - EVITAR QUEBRA DE LINHA
       ============================================ */

    /* Hero balance value - evitar quebra */
    .hero-balance-value {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
        gap: 0.25rem !important;
        font-size: 1.5rem !important;
        white-space: nowrap !important;
    }

    .hero-balance-value .currency {
        font-size: 0.875rem !important;
        flex-shrink: 0 !important;
    }

    .hero-balance-value .amount {
        font-size: 1.5rem !important;
        white-space: nowrap !important;
    }

    /* Metric card values - compactar */
    .metric-value,
    .mc-value,
    .stat-card-value,
    .proj-value,
    .tx-stat-value {
        font-size: 1rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Valores de transação */
    .tx-amount-value {
        font-size: 0.875rem !important;
        white-space: nowrap !important;
    }

    /* ============================================
       CARDS DO DASHBOARD - COMPACTAÇÃO
       ============================================ */

    .metric-card,
    .mc-card,
    .stat-card,
    .projection-card {
        padding: 0.875rem !important;
        min-height: auto !important;
    }

    .metric-card-header,
    .mc-card-header {
        margin-bottom: 0.5rem !important;
    }

    .metric-icon,
    .mc-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .metric-icon svg,
    .mc-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .metric-label,
    .mc-label,
    .stat-card-label {
        font-size: 0.6875rem !important;
        line-height: 1.3 !important;
    }

    /* ============================================
       GRIDS - FORÇAR 2 COLUNAS COMPACTAS
       ============================================ */

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .mc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .projections-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* ============================================
       HERO SECTION - COMPACTAÇÃO
       ============================================ */

    .hero-section {
        padding: 1rem !important;
    }

    .hero-greeting {
        font-size: 0.8125rem !important;
    }

    .hero-balance-label {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }

    .hero-trend {
        font-size: 0.6875rem !important;
        margin-top: 0.375rem !important;
    }

    .hero-trend svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* ============================================
       BOTÕES E AÇÕES
       ============================================ */

    .hero-actions {
        gap: 0.5rem !important;
        margin-top: 1rem !important;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        padding: 0.625rem 1rem !important;
        font-size: 0.8125rem !important;
        min-height: 40px !important;
    }

    /* ============================================
       SEÇÕES E TÍTULOS
       ============================================ */

    .section-title {
        font-size: 1rem !important;
    }

    .section-header {
        padding: 0.75rem 0 !important;
        gap: 0.5rem !important;
    }

    /* ============================================
       SIDEBAR MOBILE - AJUSTES
       ============================================ */

    .sidebar {
        width: 260px !important;
    }

    .nav-link {
        padding: 0.625rem 1rem !important;
        font-size: 0.8125rem !important;
    }

    .nav-link svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* ============================================
       GRÁFICOS - ALTURA MÍNIMA
       ============================================ */

    .chart-body {
        min-height: 180px !important;
        padding: 0.75rem !important;
    }

    .chart-header {
        padding: 0.75rem !important;
    }

    .chart-title {
        font-size: 0.875rem !important;
    }
}

/* =============================================================================
   CORREÇÕES TUTORIAL/ONBOARDING MOBILE
   ============================================================================= */

@media (max-width: 767px) {

    /* Card fixo no bottom com safe area */
    .onboarding-card {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 20px !important;
        border-radius: 16px !important;
    }

    .onboarding-card.visible {
        transform: translateY(0) !important;
    }

    /* Welcome card centralizado */
    .onboarding-card.welcome-card {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        max-height: calc(100vh - 48px) !important;
        overflow-y: auto !important;
    }

    .onboarding-card.welcome-card.visible {
        transform: translateY(-50%) !important;
    }

    /* Títulos e descrição menores */
    .onboarding-title {
        font-size: 1.125rem !important;
        margin-bottom: 8px !important;
    }

    .onboarding-description {
        font-size: 0.875rem !important;
        margin-bottom: 16px !important;
        line-height: 1.5 !important;
    }

    /* Ícone menor */
    .onboarding-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 12px !important;
    }

    .onboarding-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* Welcome icon */
    .welcome-card .onboarding-icon {
        width: 48px !important;
        height: 48px !important;
        margin: 0 auto 16px !important;
    }

    /* Footer compacto */
    .onboarding-footer {
        padding-top: 16px !important;
        gap: 12px !important;
    }

    /* Botões maiores para touch */
    .onboarding-btn {
        min-height: 44px !important;
        font-size: 0.875rem !important;
    }

    .onboarding-btn-next,
    .onboarding-btn-finish {
        flex: 1 !important;
    }

    /* Step counter repositionado */
    .onboarding-step-counter {
        top: 16px !important;
        right: 16px !important;
        font-size: 0.6875rem !important;
    }

    /* Spotlight ajustado */
    .onboarding-spotlight {
        border-radius: 8px !important;
    }

    /* Quando tutorial está ativo e destaca sidebar */
    body.sidebar-open .onboarding-card {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        left: 12px !important;
        right: 12px !important;
    }
}

/* =============================================================================
   iPHONE X+ E NOTCH DEVICES
   ============================================================================= */

@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 479px) {

        /* Ajustar padding do content */
        .content-wrapper {
            padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        }

        /* Mobile topbar com safe area top */
        .mobile-topbar {
            padding-top: env(safe-area-inset-top) !important;
            height: calc(60px + env(safe-area-inset-top)) !important;
        }

        /* Toast no bottom com safe area */
        #toastContainer,
        .toast-container {
            bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* =============================================================================
   CORREÇÕES ESPECÍFICAS PARA iPHONE 11 PRO (414px width)
   ============================================================================= */

@media (min-width: 410px) and (max-width: 420px) {

    /* Metrics grid otimizado para 414px */
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.625rem !important;
    }

    .metric-value {
        font-size: 1.125rem !important;
    }

    .hero-balance-value {
        font-size: 1.75rem !important;
    }

    .hero-balance-value .currency {
        font-size: 1rem !important;
    }
}

/* =============================================================================
   MOBILE LANDSCAPE ORIENTATION
   ============================================================================= */

@media (max-width: 767px) and (orientation: landscape) {

    /* Reduzir hero em landscape */
    .hero-section {
        padding: 0.75rem !important;
    }

    .hero-balance-value {
        font-size: 1.25rem !important;
    }

    /* Grids mais compactos */
    .metrics-grid,
    .mc-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
    }

    .metric-card {
        padding: 0.625rem !important;
    }

    .metric-value {
        font-size: 0.875rem !important;
    }

    .metric-label {
        font-size: 0.625rem !important;
    }

    /* Tutorial card mais fino */
    .onboarding-card {
        padding: 16px !important;
        bottom: 8px !important;
    }

    .onboarding-title {
        font-size: 1rem !important;
    }

    .onboarding-description {
        font-size: 0.8125rem !important;
    }
}

/* =============================================================================
   FIX: CARDS COM FUNDO AMARELO (ALERTA)
   Garantir que warnings apareçam corretamente
   ============================================================================= */

.metric-card.warning,
.mc-card.warning,
.stat-card.warning {
    background: rgba(234, 179, 8, 0.1) !important;
    border-color: rgba(234, 179, 8, 0.3) !important;
}

.metric-card.warning .metric-value,
.mc-card.warning .mc-value {
    color: #fbbf24 !important;
}

/* Remove estilos de warning não intencionais */
.metric-card:not(.warning),
.mc-card:not(.warning) {
    background: var(--bg-card) !important;
}