/* =========================================================================
       SISTEMA COMPLETO DE RESPONSIVIDADE MULTIDISPOSITIVOS (NOTEBOOKS, TABLETS E CELULARES)
       ========================================================================= */

    /* Scrollbars elegantes para tabelas horizontais */
    .panel::-webkit-scrollbar,
    .tabela-container::-webkit-scrollbar,
    div[style*="overflow-x"]::-webkit-scrollbar {
      height: 6px;
    }
    .panel::-webkit-scrollbar-track,
    .tabela-container::-webkit-scrollbar-track,
    div[style*="overflow-x"]::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 3px;
    }
    .panel::-webkit-scrollbar-thumb,
    .tabela-container::-webkit-scrollbar-thumb,
    div[style*="overflow-x"]::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 3px;
    }
    .panel::-webkit-scrollbar-thumb:hover,
    .tabela-container::-webkit-scrollbar-thumb:hover,
    div[style*="overflow-x"]::-webkit-scrollbar-thumb:hover {
      background: var(--primary);
    }

    /* -------------------------------------------------------------------------
       BREAKPOINT 1: NOTEBOOKS E TELAS COMPACTAS (1025px até 1440px)
       ------------------------------------------------------------------------- */
    @media screen and (max-width: 1440px) {
      nav.sidebar {
        width: 215px !important;
      }

      main,
      #main {
        padding: 14px 18px 80px 18px !important;
      }

      .filters {
        gap: 8px 6px !important;
        padding: 8px 10px !important;
      }

      .filters .field {
        flex: 1 1 115px !important;
        min-width: 105px !important;
      }

      table th,
      table td,
      .tabela-lancamentos th,
      .tabela-lancamentos td {
        padding: 5px 6px !important;
        font-size: 0.79rem !important;
      }

      .tabela-lancamentos button.btn-sm,
      .tabela-lancamentos .btn {
        padding: 2px 6px !important;
        font-size: 0.72rem !important;
      }
    }

    /* -------------------------------------------------------------------------
       BREAKPOINT 2: TABLETS E TELAS MÉDIAS (769px até 1024px)
       ------------------------------------------------------------------------- */
    @media screen and (max-width: 1024px) {
      nav.sidebar {
        width: 200px !important;
      }

      .kpi-cards,
      .cards-grid,
      .grid-dashboard-cards {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      .grid-2 {
        grid-template-columns: 1fr !important;
      }

      .filters {
        flex-wrap: wrap !important;
        gap: 8px 6px !important;
      }

      .filters .field {
        flex: 1 1 120px !important;
        min-width: 100px !important;
      }

      main,
      #main {
        padding: 14px 14px 80px 14px !important;
      }

      table.tabela-lancamentos,
      table.data-table,
      table.tabela-dre,
      .panel table {
        min-width: 880px !important;
      }

      .panel[style*="overflow-x"],
      .panel:has(table),
      .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
      }
    }

    /* -------------------------------------------------------------------------
       BREAKPOINT 3: SMARTPHONES E TELAS PEQUENAS (<= 768px)
       ------------------------------------------------------------------------- */
    @media screen and (max-width: 768px) {
      #app {
        flex-direction: column !important;
        height: 100% !important;
        overflow-y: auto !important;
      }

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

      /* Sidebar Gaveta Fluida (Off-canvas) */
      nav.sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 275px !important;
        max-width: 84vw !important;
        height: 100vh !important;
        z-index: 999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45) !important;
      }

      nav.sidebar.open {
        transform: translateX(0) !important;
      }

      .main-wrapper {
        min-height: 100vh;
        height: auto !important;
        overflow-y: visible !important;
      }

      main,
      #main {
        padding: 12px 10px 90px 10px !important;
        height: auto !important;
        overflow-y: visible !important;
      }

      .panel {
        padding: 10px 12px !important;
        border-radius: 8px !important;
      }

      /* Formulários e Filtros em Coluna Única Confortável */
      .form-row,
      .form-grid,
      .filtros-grid,
      .grid-2,
      .grid-3,
      .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
      }

      /* Cards de Indicadores Financeiros (KPIs) */
      .kpi-cards,
      .cards-grid,
      .grid-dashboard-cards {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }

      /* Preservação e Rolagem Suave de Tabelas Financeiras */
      .table-responsive,
      .tabela-container,
      .tabela-wrapper,
      .panel[style*="overflow-x"],
      .panel:has(table),
      div[style*="overflow-x: auto"],
      div[style*="overflow-x:auto"] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 8px;
        margin-bottom: 12px;
        scrollbar-width: thin;
      }

      table.tabela-lancamentos,
      table.data-table,
      table.tabela-dre,
      .panel table {
        min-width: 850px !important;
      }

      table th,
      table td,
      .tabela-lancamentos th,
      .tabela-lancamentos td {
        padding: 6px 6px !important;
        font-size: 0.78rem !important;
      }

      /* Modais Adaptativos */
      .modal {
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 92vh !important;
      }

      .modal-content,
      .modal-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 10px !important;
      }

      /* Toolbars e Ações Rápidas */
      .toolbar,
      .header-actions,
      .view-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding-top: 6px !important;
      }

      .toolbar button,
      .header-actions button {
        width: 100% !important;
        justify-content: center !important;
      }

      /* Barra de Vencimentos em Celular */
      .nav-vencimentos {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
      }

      .nav-vencimentos .nav-btns {
        justify-content: space-between !important;
        width: 100% !important;
      }

      .nav-vencimentos button {
        flex: 1 1 auto !important;
        text-align: center !important;
        padding: 6px 4px !important;
        font-size: 0.72rem !important;
      }

      /* Alerta Flutuante de Vencimentos */
      #containerAlertaVencimentos {
        bottom: 14px !important;
        right: 14px !important;
      }

      #popoverVencimentos {
        width: 92vw !important;
        right: -10px !important;
      }
    }

    /* -------------------------------------------------------------------------
       BREAKPOINT 4: SMARTPHONES PEQUENOS (<= 480px)
       ------------------------------------------------------------------------- */
    @media screen and (max-width: 480px) {
      .card-header h2,
      .view-title {
        font-size: 1.12rem !important;
      }

      .btn {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
      }

      .modal-content {
        padding: 14px 10px !important;
      }
    }

    /* =========================================================================
       TODAS AS COLUNAS EM NEGRITO EM TODAS AS SUB-ABAS DE RELATÓRIOS
       ========================================================================= */
    #containerConteudoRelatorio table,
    #containerConteudoRelatorio .tabela-lancamentos,
    #containerConteudoRelatorio .tabela-dre,
    #containerConteudoRelatorio .tabela-balancete,
    #containerConteudoRelatorio table th,
    #containerConteudoRelatorio table td,
    #containerConteudoRelatorio .tabela-lancamentos th,
    #containerConteudoRelatorio .tabela-lancamentos td,
    #containerConteudoRelatorio .tabela-dre th,
    #containerConteudoRelatorio .tabela-dre td,
    #containerConteudoRelatorio table th *,
    #containerConteudoRelatorio table td *,
    .tabela-dre th,
    .tabela-dre td,
    .tabela-dre th *,
    .tabela-dre td *,
    .tabela-balancete th,
    .tabela-balancete td,
    .tabela-balancete th *,
    .tabela-balancete td * {
      font-weight: 800 !important;
    }

    #containerConteudoRelatorio table th,
    .tabela-dre th,
    .tabela-balancete th {
      color: var(--navy) !important;
      font-weight: 900 !important;
    }

    /* =========================================================================
       BOTÕES DE EXPORTAÇÃO: PDF (VERMELHO) E EXCEL (VERDE ESCURO)
       ========================================================================= */
    .btn-pdf,
    .btn-export-pdf,
    .btn-print,
    #btnExportarAuditPdf,
    button[onclick*="imprimirRelatorioAtual"],
    button[onclick*="window.print"] {
      background: #dc2626 !important;
      color: #ffffff !important;
      border: 1px solid #b91c1c !important;
      font-weight: 700 !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }

    .btn-pdf:hover,
    .btn-export-pdf:hover,
    .btn-print:hover,
    #btnExportarAuditPdf:hover,
    button[onclick*="imprimirRelatorioAtual"]:hover,
    button[onclick*="window.print"]:hover {
      background: #b91c1c !important;
      border-color: #991b1b !important;
      color: #ffffff !important;
    }

    .btn-excel,
    .btn-export-excel,
    .btn-csv,
    #btnExportarCsv,
    #btnExportarAuditCsv,
    button[onclick*="exportarTabelaParaCsv"] {
      background: #15803d !important;
      color: #ffffff !important;
      border: 1px solid #166534 !important;
      font-weight: 700 !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }

    .btn-excel:hover,
    .btn-export-excel:hover,
    .btn-csv:hover,
    #btnExportarCsv:hover,
    #btnExportarAuditCsv:hover,
    button[onclick*="exportarTabelaParaCsv"]:hover {
      background: #166534 !important;
      border-color: #14532d !important;
      color: #ffffff !important;
    }


    tfoot {
      display: table-footer-group !important;
    }

    tfoot tr {
      display: table-row !important;
    }

    tfoot td {
      display: table-cell !important;
      vertical-align: middle !important;
    }

    tfoot td::before {
      content: none !important;
      display: none !important;
    }