/* ============================================================
   FINANCESAPP — RESPONSIVIDADE + TEMAS v4
   Melhorias mobile: sem sidebar drawer, layout maior e mais harmonioso
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   1. VARIÁVEIS GLOBAIS
   ══════════════════════════════════════════════════════════ */

:root {
  --theme-transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  --sidebar-bg:   var(--bg2);
  --card-bg:      var(--bg2);
  --input-bg:     var(--bg3);
  --topbar-bg:    var(--bg2);
  --modal-bg:     var(--bg2);
  --hover-bg:     var(--bg3);
  --shadow-color: rgba(0,0,0,0.4);
  --accent-contrast-auto: var(--accent-contrast);
}

body, .sidebar, .main-content, .topbar,
.card, .chart-box, .modal, .login-card,
.gasto-item, .parcelado-item, .recorrente-item,
.extrato-dia, .extrato-item, .cal-cell,
.config-section, .widget-modular, .pag-item,
.cartao-item, .meta-item, .salario-hist-item,
.historico-painel, .confirm-modal, .customizar-modal,
.ciclo-card, .div-card, .div-breakdown,
.mp-row, .filter-row select, .filter-row input,
.input-group input, .input-group select,
.nav-item, .btn-logout, .btn-primary, .btn-secondary,
.toast, .cfg-backup-card, .cfg-theme-card {
  transition: var(--theme-transition);
}

/* ══════════════════════════════════════════════════════════
   2. TEMAS CLAROS
   ══════════════════════════════════════════════════════════ */

[data-theme="white"] {
  --bg:#f8f9fb;--bg2:#ffffff;--bg3:#eef0f5;--border:#dde0ea;
  --text:#111318;--text2:#4a5068;--text3:#8890a8;--shadow-color:rgba(0,0,0,0.08);
  --sidebar-bg:#ffffff;--card-bg:#ffffff;--input-bg:#f0f2f8;
  --topbar-bg:#ffffff;--modal-bg:#ffffff;--hover-bg:#eef0f5;
  --accent-contrast:#ffffff;--accent-contrast-auto:#0d0f14;
}
[data-theme="light"] {
  --bg:#eef1f7;--bg2:#f8faff;--bg3:#dde3f0;--border:#c8d0e4;
  --text:#181c2e;--text2:#404870;--text3:#8090b8;--shadow-color:rgba(0,0,0,0.1);
  --sidebar-bg:#f8faff;--card-bg:#f8faff;--input-bg:#dde3f0;
  --topbar-bg:#f8faff;--modal-bg:#f8faff;--hover-bg:#dde3f0;--accent-contrast-auto:#0d0f14;
}
[data-theme="beige"] {
  --bg:#f5f0e8;--bg2:#fdfaf4;--bg3:#e8dfc8;--border:#cfc4a4;
  --text:#2a2218;--text2:#5a4e38;--text3:#9a8e78;--shadow-color:rgba(60,40,0,0.1);
  --sidebar-bg:#fdfaf4;--card-bg:#fdfaf4;--input-bg:#e8dfc8;
  --topbar-bg:#fdfaf4;--modal-bg:#fdfaf4;--hover-bg:#e8dfc8;--accent-contrast-auto:#0d0f14;
}
[data-theme="nordic"] {
  --bg:#dfe4ef;--bg2:#edf0f8;--bg3:#cdd5e5;--border:#adb8d0;
  --text:#1c2235;--text2:#3d4a6a;--text3:#7888aa;--shadow-color:rgba(0,0,50,0.1);
  --sidebar-bg:#edf0f8;--card-bg:#edf0f8;--input-bg:#cdd5e5;
  --topbar-bg:#edf0f8;--modal-bg:#edf0f8;--hover-bg:#cdd5e5;--accent-contrast-auto:#0d0f14;
}
[data-theme="rose"] {
  --bg:#faeef0;--bg2:#fff8f9;--bg3:#f5d8dc;--border:#e8b0ba;
  --text:#2a0d12;--text2:#6a2035;--text3:#b07088;--shadow-color:rgba(80,0,20,0.08);
  --sidebar-bg:#fff8f9;--card-bg:#fff8f9;--input-bg:#f5d8dc;
  --topbar-bg:#fff8f9;--modal-bg:#fff8f9;--hover-bg:#f5d8dc;--accent-contrast-auto:#0d0f14;
}

/* ══════════════════════════════════════════════════════════
   3. APLICAÇÃO DAS VARIÁVEIS NOS COMPONENTES
   ══════════════════════════════════════════════════════════ */

.sidebar          { background: var(--sidebar-bg) !important; }
.topbar           { background: var(--topbar-bg)  !important; }
.card             { background: var(--card-bg)    !important; }
.modal            { background: var(--modal-bg)   !important; }
.login-card       { background: var(--modal-bg)   !important; }
.confirm-modal    { background: var(--modal-bg)   !important; }
.historico-painel { background: var(--modal-bg)   !important; }
.customizar-modal { background: var(--modal-bg)   !important; }
.resumo-mes-modal { background: var(--modal-bg)   !important; }
.mobile-nav-dropdown { background: var(--modal-bg) !important; border-color: var(--border) !important; }

.input-group input,.input-group select,
.filter-row select,.filter-row input,
.meta-input,.mp-val-input,
.mp-adiantar-field input,.mp-adiantar-field select,
#div-mes-select { background: var(--input-bg) !important; }

.chart-box,.insights-wrapper,.explicador-wrapper,
.ciclo-wrapper,.config-section,.cfg-backup-card,
.gasto-item,.parcelado-item,.recorrente-item,
.extrato-dia,.cartao-item,.sal-bloco,.sal-extra-box,
.meta-item,.salario-hist-item,.pag-item,.div-card,
.div-breakdown,.parcelados-atrasos-card,.parcelados-pagos-box,
.widget-modular,.ciclo-card,.extrato-item { background: var(--card-bg) !important; }

.historico-item,.recorrente-icon,.cal-cell,.cfg-theme-card,
.mp-row,.parcelado-pago-item,.atraso-item,
.semana-bar-wrap { background: var(--hover-bg) !important; }

.nav-item:hover       { background: var(--hover-bg) !important; }
.cfg-conta-row:hover  { background: var(--hover-bg) !important; }
.mobile-nav-item:hover,.mobile-nav-item:active { background: var(--hover-bg) !important; }

.card,.modal,.login-card,.sidebar { box-shadow: 0 4px 32px var(--shadow-color); }

[data-theme="white"] #login-screen,[data-theme="light"] #login-screen,
[data-theme="beige"] #login-screen,[data-theme="nordic"] #login-screen,
[data-theme="rose"] #login-screen {
  background: radial-gradient(ellipse at 20% 80%,rgba(240,192,64,0.06) 0%,transparent 60%),
              radial-gradient(ellipse at 80% 20%,rgba(77,157,224,0.06) 0%,transparent 60%),var(--bg);
}

[data-theme="white"] .btn-primary,[data-theme="light"] .btn-primary,
[data-theme="beige"] .btn-primary,[data-theme="nordic"] .btn-primary,
[data-theme="rose"] .btn-primary,
[data-theme="white"] .btn-add,[data-theme="light"] .btn-add,
[data-theme="beige"] .btn-add,[data-theme="nordic"] .btn-add,
[data-theme="rose"] .btn-add { color: #0d0f14 !important; }

[data-theme="white"] ::-webkit-scrollbar-track,[data-theme="light"] ::-webkit-scrollbar-track,
[data-theme="beige"] ::-webkit-scrollbar-track,[data-theme="nordic"] ::-webkit-scrollbar-track,
[data-theme="rose"] ::-webkit-scrollbar-track { background: var(--bg3); }
[data-theme="white"] ::-webkit-scrollbar-thumb,[data-theme="light"] ::-webkit-scrollbar-thumb,
[data-theme="beige"] ::-webkit-scrollbar-thumb,[data-theme="nordic"] ::-webkit-scrollbar-thumb,
[data-theme="rose"] ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ══════════════════════════════════════════════════════════
   4. BOTÃO HAMBÚRGUER — completamente desabilitado
      O menu lateral esquerdo não existe mais no mobile.
      A navegação é feita apenas pelo botão de grade (canto superior direito).
   ══════════════════════════════════════════════════════════ */

/* Hamburger escondido em todos os tamanhos */
.mobile-menu-btn {
  display: none !important;
}

/* Overlay do drawer também desativado */
.mobile-overlay {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   5. NAVEGAÇÃO RÁPIDA — botão grade (canto direito topbar)
      Visível apenas em mobile/tablet (≤ 1024px)
   ══════════════════════════════════════════════════════════ */

.mobile-nav-wrap {
  display: none;
  position: relative;
}

.mobile-nav-btn {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none; border-radius: 10px; color: #0d0f14;
  cursor: pointer; padding: 9px 11px; flex-shrink: 0;
  transition: opacity 0.2s, transform 0.15s;
}
.mobile-nav-btn:active { transform: scale(0.93); }
.mobile-nav-btn svg { width: 20px; height: 20px; fill: currentColor; display: block; }

/* Dropdown — oculto por padrão, aparece com .open */
.mobile-nav-dropdown {
  display: none;
  position: fixed;
  top: 60px;
  right: 12px;
  width: 215px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
  z-index: 500;
  padding: 6px;
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Quando aberto */
.mobile-nav-dropdown.open {
  display: block;
  animation: navDropIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes navDropIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mobile-nav-title {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text3); padding: 6px 10px 8px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}

.mobile-nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; background: none; border: none;
  border-radius: 10px; color: var(--text2); cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 10px 10px; text-align: left;
  transition: background 0.15s, color 0.15s;
}
.mobile-nav-item svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }
.mobile-nav-item.active-tab { background: rgba(240,192,64,0.12) !important; color: var(--accent); }

/* ══════════════════════════════════════════════════════════
   6. DESKTOP GRANDE (> 1280px)
   ══════════════════════════════════════════════════════════ */

@media (min-width: 1281px) {
  .cards-row { grid-template-columns: repeat(4, 1fr); }
  .mobile-nav-wrap { display: none !important; }
  .mobile-nav-dropdown { display: none !important; }
  .sidebar { transform: translateX(0) !important; box-shadow: none; }
  .sidebar-toggle-btn { display: flex; }
}

/* ══════════════════════════════════════════════════════════
   7. DESKTOP PADRÃO (1025px – 1280px)
   ══════════════════════════════════════════════════════════ */

@media (min-width: 1025px) and (max-width: 1280px) {
  .cards-row { grid-template-columns: repeat(4, 1fr); }
  .mobile-nav-wrap { display: none !important; }
  .mobile-nav-dropdown { display: none !important; }
  .sidebar { transform: translateX(0) !important; box-shadow: none; }
  .sidebar-toggle-btn { display: flex; }
  .tab-content { padding: 28px 28px; }
}

/* ══════════════════════════════════════════════════════════
   8. TABLET (769px – 1024px)
      Sidebar sempre visível (mais estreita),
      botão de grade para navegação rápida
   ══════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1024px) {
  :root { --sidebar-w: 190px; }

  .sidebar {
    transform: translateX(0) !important;
    position: fixed;
    width: var(--sidebar-w) !important;
    box-shadow: none;
  }
  .sidebar-toggle-btn { display: flex; }
  .mobile-overlay { display: none !important; }

  /* Botão de grade visível em tablet */
  .mobile-nav-wrap { display: block !important; }
  .mobile-nav-dropdown { right: 16px; top: 62px; width: 200px; }

  .main-content { margin-left: var(--sidebar-w) !important; width: calc(100vw - var(--sidebar-w)) !important; }
  .cards-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .charts-row { grid-template-columns: 1fr; }
  .parcelados-page { grid-template-columns: 1fr; }
  .parcelados-side { order: -1; }
  .pagamentos-wrapper,.cartoes-wrapper { grid-template-columns: 1fr; }
  .tab-content { padding: 24px 20px; }
  .topbar { padding: 16px 24px; }
  .relogio-box { display: none !important; }
  .divisao-cards { grid-template-columns: 1fr 1fr; }
  .ciclo-grid { grid-template-columns: 1fr 1fr; }
  .cal-cell { min-height: 70px; }
  .widgets-half-grid { grid-template-columns: 1fr 1fr; }

  .topbar-right { gap: 8px; }
  .btn-add span { display: none; }
  .btn-add { padding: 9px 11px; }
}

/* ══════════════════════════════════════════════════════════
   9. MOBILE (≤ 768px)
      SEM sidebar. Navegação apenas pelo botão de grade (topo direito).
      Layout amplo: tela 100% usada, sem margens desnecessárias.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  /* ── Sidebar completamente escondida no mobile ── */
  .sidebar {
    display: none !important;
  }
  .sidebar-toggle-btn { display: none !important; }

  /* ── Botão de grade visível, hambúrguer ausente ── */
  .mobile-nav-wrap { display: block !important; }
  .mobile-nav-dropdown { top: 58px; right: 10px; width: 220px; }

  /* ── Main ocupa a tela toda ── */
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    min-height: 100dvh;
  }

  /* ── Topbar limpa e compacta ── */
  .topbar {
    padding: 12px 16px;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--border);
  }
  .topbar-left  { flex: 1; min-width: 0; }
  .topbar-right { gap: 8px; flex-wrap: nowrap; align-items: center; }
  .topbar h2    { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tab-sub      { font-size: 11px; margin-top: 1px; }
  .relogio-box  { display: none !important; }

  /* ── Botão adicionar — só ícone ── */
  .btn-add span { display: none; }
  .btn-add { padding: 9px 11px; }
  .btn-add svg { width: 18px; height: 18px; }
  .btn-resumo-mes span, .btn-undo span { display: none; }
  .btn-resumo-mes, .btn-undo { padding: 9px; }

  /* ── Tab content com padding generoso ── */
  .tab-content { padding: 16px 14px 24px; }

  /* ── Cards: 2 colunas mais espaçosas ── */
  .cards-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
  }
  .card {
    padding: 16px 14px;
    border-radius: 14px;
  }
  .card-value { font-size: 20px; }
  .card-label { font-size: 11px; }
  .card-hint  { font-size: 11px; }

  /* ── Charts ── */
  .charts-row { grid-template-columns: 1fr; gap: 12px; }
  .chart-box  { padding: 18px 14px; border-radius: 14px; }
  .chart-box h3 { font-size: 14px; }

  /* ── Insights ── */
  .insights-wrapper { padding: 16px 14px; border-radius: 14px; }
  .insight-chip { font-size: 12px; }

  /* ── Divisão ── */
  .divisao-cards  { grid-template-columns: 1fr; gap: 10px; }
  .div-card       { padding: 22px 18px; border-radius: 14px; }
  .div-card-date  { font-size: 34px; }
  .div-card-value { font-size: 22px; }
  .div-breakdown  { padding: 18px 14px; border-radius: 14px; }

  /* ── Salário ── */
  .sal-duplo      { grid-template-columns: 1fr; }
  .sal-extra-grid { grid-template-columns: 1fr; }
  .salario-box    { gap: 14px; }

  /* ── Parcelados ── */
  .parcelados-page { grid-template-columns: 1fr; }
  .parcelados-side { order: -1; }
  .parcelado-item  { padding: 14px 16px; border-radius: 12px; }
  .parcelado-valor-parcela { font-size: 18px; }

  /* ── Cartões e pagamentos ── */
  .cartoes-wrapper, .pagamentos-wrapper { grid-template-columns: 1fr; }

  /* ── Calendário ── */
  .cal-cell  { min-height: 46px; padding: 3px; }
  .cal-dot   { display: none; }
  .cal-cell-num   { font-size: 11px; }
  .cal-cell-total { font-size: 10px; }
  .cal-mes-titulo { font-size: 17px; }
  .cal-grid-header span { font-size: 9px; }
  .cal-resumo-chip { min-width: 100px; }
  .cal-resumo-val { font-size: 15px; }

  /* ── Ciclo ── */
  .ciclo-grid { grid-template-columns: 1fr; }

  /* ── Extrato ── */
  .extrato-dia      { padding: 14px 14px; border-radius: 12px; }
  .extrato-dia-head h3 { font-size: 14px; }
  .extrato-item     { gap: 10px; padding: 11px 14px; border-radius: 10px; }

  /* ── Gastos ── */
  .gasto-item     { gap: 10px; padding: 13px 14px; border-radius: 12px; }
  .gasto-cat-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 9px; }
  .gasto-loja { font-size: 14px; }
  .gasto-valor { font-size: 14px; }
  .gasto-desc  { font-size: 11px; }
  .gasto-data  { font-size: 11px; }

  /* ── Recorrentes ── */
  .recorrente-item  { gap: 10px; padding: 13px 16px; border-radius: 12px; }
  .recorrente-icon  { width: 38px; height: 38px; font-size: 17px; }
  .recorrente-nome  { font-size: 14px; }
  .recorrente-valor { font-size: 15px; }

  /* ── Modais — deslizam de baixo ── */
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal { border-radius: 20px 20px 12px 12px; margin: 0 4px; max-height: 92vh; }
  .modal-header { padding: 20px 18px 0; }
  .modal-header h3 { font-size: 18px; }
  .modal-body  { padding: 18px 18px; gap: 14px; }
  .modal-footer { padding: 0 18px 20px; gap: 10px; }
  .modal-footer .btn-primary,
  .modal-footer .btn-secondary { padding: 13px 16px; font-size: 14px; }

  .resumo-mes-overlay { align-items: center; padding: 16px; }
  .confirm-overlay    { padding: 16px; }
  .historico-overlay  { padding: 0; align-items: flex-end; }
  .historico-painel   { max-width: 100%; border-radius: 20px 20px 0 0; }
  .customizar-overlay { align-items: flex-end; padding: 0; }
  .customizar-modal   { max-width: 100%; border-radius: 20px 20px 0 0; max-height: 90vh; }

  /* Blur reduzido (performance) */
  .modal-overlay, .confirm-overlay, .resumo-mes-overlay,
  .historico-overlay, .customizar-overlay { backdrop-filter: blur(2px); }

  /* ── Parcelas modal ── */
  .mp-row { grid-template-columns: 40px 1fr 80px; gap: 8px; padding: 11px 14px; }
  .mp-venc, .mp-data-paga { display: none; }

  /* ── Toast ── */
  .toast { right: 12px; bottom: 18px; left: 12px; max-width: none; font-size: 13px; padding: 13px 16px; border-radius: 12px; }

  /* ── Config ── */
  .config-wrapper { gap: 14px; }
  .config-section-header { padding: 16px 18px 14px; gap: 12px; }
  .config-section-icon { width: 40px; height: 40px; }
  .config-section-header h3 { font-size: 15px; }
  .config-section-header p  { font-size: 12px; }
  .config-body { padding: 16px 18px; gap: 16px; }
  .config-row  { flex-direction: column; align-items: stretch; }
  .config-save-btn { width: 100%; justify-content: center; }
  .cfg-backup-grid { grid-template-columns: 1fr; }
  .cfg-theme-grid  { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cfg-theme-preview { height: 44px; }
  .cfg-conta-uid  { font-size: 10px; max-width: 200px; }

  /* ── Filter ── */
  .filter-row { gap: 8px; }
  .filter-row select, .filter-row input { font-size: 13px; padding: 8px 10px; border-radius: 10px; }

  /* ── Widgets ── */
  .widgets-half-grid  { grid-template-columns: 1fr; }
  .widget-content { padding: 16px 14px; }

  /* ── Botão Widgets: visível no mobile, compacto (só ícone) ── */
  .btn-customizar-dash {
    display: flex !important;
    padding: 9px 10px !important;
    font-size: 0 !important;   /* esconde o texto "Widgets" */
    gap: 0 !important;
    min-width: 38px;
    justify-content: center;
  }
  .btn-customizar-dash svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* ── Filtros de gastos: 2 colunas no mobile ── */
  .filter-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  /* Busca ocupa linha inteira */
  .filter-row input[id="filter-search"],
  .filter-row input[id="filter-futuras"],
  .filter-row input[id="filter-reprovados"] {
    grid-column: 1 / -1;
  }
  /* Botão Limpar datas ocupa linha inteira */
  .filter-clear-btn {
    grid-column: 1 / -1;
    text-align: center;
    justify-content: center;
  }
  /* Date inputs lado a lado */
  .filter-row input[type="date"] {
    min-width: 0;
    width: 100%;
  }

  .parcelados-pagos-filtros { grid-template-columns: 1fr; }

  /* ── Login ── */
  .login-card { padding: 36px 24px; border-radius: 20px; }
  .login-logo h1 { font-size: 26px; }

  /* ── Resumo mês ── */
  .resumo-mes-cards  { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
  .resumo-mes-header { padding: 22px 18px 14px; }
  .resumo-mes-header h2 { font-size: 19px; }
  .resumo-stat-val   { font-size: 19px; }
  .resumo-mes-fechar { width: calc(100% - 36px); margin: 0 18px 18px; }

  /* ── Confirm ── */
  .confirm-modal  { padding: 30px 22px 24px; border-radius: 18px; }
  .confirm-titulo { font-size: 18px; }

  /* ── Performance: desativa hover effects custosos ── */
  .card:hover        { transform: none; }
  .btn-primary:hover { transform: none; }
  .btn-add:hover     { transform: none; opacity: 1; }
  .nav-item:hover    { transform: none; }

  /* ── Scroll suave ── */
  .tab-content, .modal-body { -webkit-overflow-scrolling: touch; }

  /* ── Animação de card desativada (melhora FPS) ── */
  .card { animation: none !important; }

  /* ── Adiantar ── */
  .mp-adiantar-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   10. CELULAR PEQUENO (≤ 480px)
   ══════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .mobile-nav-dropdown { width: 205px; right: 8px; top: 56px; }
  .cards-row { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .card { padding: 14px 12px; }
  .card-value { font-size: 18px; }
  .tab-content { padding: 12px 10px 20px; }
  .topbar { padding: 10px 12px; gap: 8px; }
  .topbar h2 { font-size: 16px; }
  .divisao-cards  { grid-template-columns: 1fr; }
  .div-card-date  { font-size: 30px; }
  .div-card-value { font-size: 19px; }
  .chart-box { padding: 14px 12px; }
  .gasto-item, .recorrente-item, .extrato-dia { padding: 12px; }

  /* ── Filtros de gastos: coluna única em telas muito pequenas ── */
  .filter-row {
    grid-template-columns: 1fr !important;
  }
  .filter-row input[id="filter-search"],
  .filter-row input[id="filter-futuras"],
  .filter-row input[id="filter-reprovados"],
  .filter-clear-btn,
  .filter-row input[type="date"] {
    grid-column: 1 / -1;
  }

  /* ── Subtabs de gastos: menores para caber ── */
  .gastos-subtab { font-size: 11px; padding: 8px 10px; }
}


/* ══════════════════════════════════════════════════════════
   11. SCROLLBAR CUSTOMIZADA (desktop)
   ══════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  ::-webkit-scrollbar       { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--text3); }
}