/* =============================================
   SPEED DASHBOARD - RESPONSIVE MOBILE-FIRST
   Breakpoints: 480px, 768px, 1100px, 1400px
   ============================================= */

/* ---- TABLET (max 1100px) ---- */
@media (max-width: 1100px) {
  .fin-types-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---- TABLET SMALL (max 768px) ---- */
@media (max-width: 768px) {
  /* Header */
  header {
    padding: 0 12px;
    height: 52px;
    gap: 8px;
  }
  .logo img { height: 26px !important; }
  .header-right { gap: 10px; }
  .live-badge { font-size: 9px; }
  .current-time { font-size: 12px; }

  /* Nav tabs - horizontal scroll */
  .nav-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 50vw;
    flex-shrink: 1;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tab { padding: 4px 10px; font-size: 11px; white-space: nowrap; flex-shrink: 0; }

  /* Main */
  main { padding: 12px; }

  /* Section headers */
  .section-header { flex-wrap: wrap; gap: 8px; }
  .section-title { font-size: 15px; }
  .date-nav { width: 100%; justify-content: center; }

  /* KPIs */
  .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi-card { padding: 12px 14px; }
  .kpi-value { font-size: 26px; }

  /* Fin types */
  .fin-types-row { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Search */
  .search-input { width: 100%; max-width: 100%; }
  .filter-select { font-size: 11px; padding: 6px 8px; }

  /* Tables */
  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 600px; }

  /* Despesas */
  .desp-cat-label { min-width: 100px; font-size: 11px; }
  .desp-cat-valor { min-width: 80px; font-size: 11px; }
  .desp-table { min-width: 700px; }
  .filter-row { flex-wrap: wrap; }

  /* Agenda */
  .quadras-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .grade-header, .grade-row {
    grid-template-columns: 64px repeat(8, minmax(80px, 1fr));
    min-width: 720px;
  }
  .grade-header-cell:nth-child(n+6), .grade-cell:nth-child(n+6) {
    display: block; /* Override layout.css hiding */
  }
  .legenda { gap: 8px; }
  .legenda-item { font-size: 10px; }

  /* Agenda stats */
  .agenda-stats-bar { padding: 6px 10px; gap: 6px; }
  .stat-pill { font-size: 10px; padding: 3px 8px; }

  /* Bottom row */
  .bottom-row { grid-template-columns: 1fr; }

  /* Reservas lista */
  .reserva-item { grid-template-columns: 36px 1fr auto; gap: 8px; padding: 10px 12px; }

  /* Modals */
  .modal { width: 95vw; max-width: 95vw; padding: 20px; }
  .modal.modal-lg { width: 95vw; }
  .modal-row { grid-template-columns: 1fr; }
  .modal-title { font-size: 18px; }

  /* User badge */
  .user-name { display: none; }
  .user-role { display: none; }
}

/* ---- MOBILE (max 480px) ---- */
@media (max-width: 480px) {
  /* Header - stacked */
  header {
    height: auto;
    padding: 8px 10px;
    flex-wrap: wrap;
    gap: 6px;
  }
  .logo { order: 1; }
  .header-right { order: 2; margin-left: auto; }
  .nav-tabs {
    order: 3;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .nav-tab { padding: 5px 12px; font-size: 11px; }

  /* Main */
  main { padding: 8px; }

  /* KPIs - single column */
  .kpi-row { grid-template-columns: 1fr; gap: 6px; }
  .kpi-card { padding: 10px 12px; flex-direction: row; align-items: center; justify-content: space-between; }
  .kpi-label { font-size: 9px; }
  .kpi-value { font-size: 22px; }
  .kpi-sub { font-size: 10px; }

  /* Fin types */
  .fin-types-row { grid-template-columns: 1fr; }

  /* Section */
  .section-header { margin-bottom: 8px; }
  .section-title { font-size: 14px; }
  .current-date-label { font-size: 12px; min-width: auto; }

  /* Buttons */
  .btn-sm { padding: 4px 8px; font-size: 10px; }
  .btn-primary { padding: 6px 12px; font-size: 11px; }
  .fin-quick-links { gap: 4px; }
  .fin-quick-links .btn-sm { font-size: 9px; padding: 3px 6px; }

  /* Financeiro sub-tabs */
  .fin-subtabs { gap: 1px; padding: 2px; }
  .fin-subtab { padding: 5px 6px; font-size: 9px; letter-spacing: 0; }

  /* Despesas */
  .desp-cat-row { gap: 6px; flex-wrap: wrap; }
  .desp-cat-icon { font-size: 14px; width: 20px; }
  .desp-cat-label { min-width: auto; flex: 1; }
  .desp-cat-bar-wrap { width: 100%; flex-basis: 100%; order: 3; }
  .desp-cat-valor { min-width: auto; }

  /* DRE */
  .dre-card { padding: 12px; }
  .dre-line { padding: 4px 6px; font-size: 12px; }
  .dre-line.dre-total { font-size: 16px; padding: 10px 8px; }
  .dre-line.dre-detail { padding-left: 12px; font-size: 11px; }

  /* Meta gauge */
  .meta-gauge-container { width: 120px; height: 120px; }
  .meta-gauge-ring::after { width: 90px; height: 90px; top: 15px; left: 15px; }
  .meta-gauge-pct { font-size: 28px; }
  .meta-gauge-card { padding: 16px; }
  .meta-gauge-status { font-size: 11px; }

  /* Comissoes */
  .com-prof-card { padding: 12px; gap: 10px; }
  .com-prof-nome { font-size: 13px; }
  .com-prof-stats { gap: 8px; }
  .com-prof-stat { font-size: 11px; }
  .com-prof-valor-amount { font-size: 22px; }

  /* Agenda */
  .grade-hora { padding: 0 6px; font-size: 10px; min-height: 34px; }
  .grade-cell { padding: 2px; min-height: 34px; }
  .grade-header-cell { padding: 6px 4px; font-size: 9px; }
  .reserva-block { padding: 3px 5px; font-size: 10px; min-height: 32px; }
  .reserva-nome { font-size: 9px; }
  .reserva-tipo { font-size: 8px; }
  .aula-prof { font-size: 9px; }
  .aula-count-badge { min-width: 14px; height: 14px; font-size: 8px; }
  .aula-alunos-list { font-size: 8px; -webkit-line-clamp: 2; }

  /* Comercial */
  .com-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .com-gauge-grid { grid-template-columns: 1fr; }
  .com-gauge-container { width: 100px; height: 100px; }
  .com-gauge-ring::after { width: 70px; height: 70px; top: 15px; left: 15px; }
  .com-gauge-pct { font-size: 22px; }
  .com-stats-row { grid-template-columns: 1fr; }
  .com-stat-value { font-size: 22px; }
  .pipeline-board { grid-template-columns: 1fr; }
  .pipeline-column { min-height: 150px; }
  .planner-grid { grid-template-columns: 1fr; }
  .elayne-header { padding: 12px; }
  .elayne-avatar { width: 36px; height: 36px; font-size: 16px; }
  .elayne-name { font-size: 14px; }
  .elayne-comissao-valor { font-size: 24px; }
  .lead-modal { width: 98vw; padding: 14px; }
  .lead-modal-grid { grid-template-columns: 1fr; }
  .lead-modal-empresa { font-size: 20px; }

  /* Bar - kanban */
  .kanban-grid { grid-template-columns: 1fr !important; }

  /* Charts */
  .css-chart { height: 80px; }
  .chart-container { padding: 12px; }

  /* Chat widget */
  .chat-fin-widget { width: calc(100vw - 16px); right: 8px; bottom: 72px; height: 65vh; }
  .chat-fin-fab { width: 44px; height: 44px; bottom: 12px; right: 12px; }

  /* Mensal view */
  #mensal-chart { height: 150px !important; }

  /* Alertas */
  .alerta-item { padding: 10px 12px; gap: 8px; }
  .alerta-icon { width: 28px; height: 28px; font-size: 13px; }
  .alerta-texto { font-size: 11.5px; }

  /* Empty state */
  .empty-state { padding: 32px 16px; font-size: 12px; }

  /* Progress bar */
  .progress-label { font-size: 10px; }

  /* Scroll indicators for horizontal scroll areas */
  .quadras-grid,
  .table-container {
    position: relative;
  }
  .quadras-grid::after,
  .table-container::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(to right, transparent, var(--bg2));
    pointer-events: none;
    z-index: 10;
  }
}

/* ---- TOUCH TARGETS ---- */
@media (pointer: coarse) {
  .btn-icon { width: 36px; height: 36px; }
  .nav-tab { padding: 8px 14px; }
  .date-nav button { width: 36px; height: 36px; }
  .lead-card-actions button { width: 28px; height: 28px; }
  .aluno-checkbox { padding: 10px 12px; }
  .cell-livre { min-height: 44px; }
}

/* ---- LANDSCAPE PHONE ---- */
@media (max-height: 500px) and (orientation: landscape) {
  header { height: 44px; }
  main { padding: 8px; }
  .modal { max-height: 95vh; }
  .chat-fin-widget { height: 80vh; }
}

/* ---- PRINT ---- */
@media print {
  header { position: static; }
  .nav-tabs, .chat-fin-fab, .chat-fin-widget { display: none; }
  .modal-overlay { display: none; }
  main { padding: 0; max-width: none; }
  .kpi-card { break-inside: avoid; }
}