/* ──────────────────────────────────────────────────────────────────────────
   Responsividade global — aplicada em todas as páginas
   Padrão mobile-first: ajusta para telas <= 800px e <= 480px
   ────────────────────────────────────────────────────────────────────────── */

/* Tablets e celulares grandes ============================================== */
@media (max-width: 800px) {
  body { padding: 12px 10px 24px !important; }

  .header {
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 10px !important;
  }
  .title { font-size: 18px !important; }
  .subtitle { font-size: 11px !important; }
  .actions { width: 100%; gap: 4px !important; }
  .actions .btn { padding: 6px 10px; font-size: 11px; }

  /* Cards grids — força no máximo 2 colunas */
  .cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .charts-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .shopify-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

  /* Cards mais compactos */
  .metric-card, .stat-card, .kpi-card, .chart-card {
    padding: 12px !important;
  }
  .metric-value { font-size: 18px !important; }
  .stat-val { font-size: 18px !important; }
  .kpi-value { font-size: 16px !important; }

  /* Section cards — padding menor */
  .section-card, .shopify-card, .daily-card, .intel-card {
    padding: 12px 14px !important;
    margin-bottom: 14px !important;
  }
  .section-title, .shopify-title, .daily-title { font-size: 13px !important; }

  /* Tabelas — scroll horizontal e min-width quando muitas colunas */
  .daily-table-wrap, .btable-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .daily-table { min-width: 560px !important; }
  .btable      { min-width: 760px !important; }

  /* DRE: força scroll horizontal no card que contém */
  #dre-table, #cartao-table, #cmv-product-table,
  #dre-recurring-table, #dre-sporadic-table, #cost-table, #recurring-table {
    min-width: 100% !important;
    font-size: 12px !important;
  }
  .section-card { overflow-x: auto; }

  /* Datas e filtros — empilha bonito */
  .date-bar, .month-bar { gap: 6px !important; }
  .date-input, .month-input, .date-bar input[type="date"] {
    flex: 1; min-width: 140px; font-size: 13px !important; padding: 6px 8px !important;
  }
  .quick-btns { width: 100%; justify-content: space-between; }
  .qbtn { flex: 1; padding: 5px 8px !important; font-size: 11px !important; }

  /* Modal — quase fullscreen */
  .modal-box {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 92vh !important;
    padding: 16px !important;
    border-radius: 10px !important;
  }
  .modal-title { font-size: 14px !important; }
  .modal-canvas { height: 240px !important; }

  /* Inputs maiores em mobile (touch targets) */
  input[type="text"], input[type="number"], input[type="date"],
  input[type="month"], select, textarea {
    font-size: 14px !important;
    padding: 8px 10px !important;
    -webkit-appearance: none;
  }
  .form-group input, .form-group select, .form-group textarea {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  /* Botões — touch friendly */
  .btn { min-height: 34px; }
  .btn-primary, .btn-danger { font-size: 12px; }

  /* Tabs — wrap se necessário */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .tab { flex-shrink: 0; }
}

/* Celulares pequenos ======================================================= */
@media (max-width: 480px) {
  body { padding: 10px 8px 20px !important; }

  .title { font-size: 16px !important; }
  .subtitle { font-size: 10px !important; }

  /* 1 coluna em tudo */
  .cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .charts-grid { grid-template-columns: 1fr !important; }
  .shopify-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stats-grid { grid-template-columns: 1fr !important; }
  .kpi-grid { grid-template-columns: 1fr 1fr !important; }

  .metric-value, .kpi-value { font-size: 15px !important; }
  .stat-val { font-size: 16px !important; }

  /* Header em coluna */
  .header { flex-direction: column; align-items: stretch !important; }
  .actions { justify-content: flex-start; flex-wrap: wrap; }
  .actions .btn { padding: 5px 9px; font-size: 11px; }

  /* Tabs scrolláveis sem quebrar */
  .tabs { gap: 4px; }
  .tab { padding: 6px 12px !important; font-size: 11px !important; }
}

/* ── Calendário do Financeiro — ajustes específicos ────────────────────── */
@media (max-width: 800px) {
  .cal-grid, .cal-grid-header { gap: 3px !important; }
  .cal-day { min-height: 64px !important; padding: 5px 6px !important; gap: 1px !important; }
  .cal-day-num { font-size: 12px !important; }
  .cal-day-orders { font-size: 9px !important; }
  .cal-day-revenue { font-size: 9px !important; }
  .cal-day-profit { font-size: 11px !important; }
  .cal-day-margin { font-size: 9px !important; }
  .cal-grid-header > div { font-size: 9px !important; padding: 2px 0 !important; }
}
@media (max-width: 480px) {
  .cal-day { min-height: 52px !important; padding: 4px 3px !important; }
  .cal-day-num { font-size: 11px !important; }
  .cal-day-revenue, .cal-day-orders, .cal-day-margin { display: none !important; }
  .cal-day-profit { font-size: 10px !important; }
}

/* ── DRE: input Real e botões "+ adicionar" responsivos ──────────────────── */
@media (max-width: 800px) {
  .real-input { width: 80px !important; font-size: 11px !important; padding: 3px 5px !important; }
  .section-add { font-size: 10px !important; display: block !important; margin-top: 4px !important; margin-left: 0 !important; }
  .dre-table th, .dre-table td { padding: 6px 6px !important; font-size: 11px !important; }
  .dre-section-row td { font-size: 12px !important; }
}

/* ── Posts Instagram — já era mobile-first, ajustes finos ────────────────── */
@media (max-width: 480px) {
  .ad-list { gap: 10px !important; }
  .ad-title { font-size: 13px !important; }
  .btn-link { font-size: 12px !important; padding: 8px 10px !important; }
}

/* ── Heatmap do tracking — força scroll horizontal ───────────────────────── */
@media (max-width: 800px) {
  .heatmap-block { padding: 12px !important; overflow-x: auto; }
  .heatmap-grid { min-width: 700px; }
  .heatmap-totals { font-size: 11px !important; }
  .legend { font-size: 10px !important; }
}