/* ============================================================
   TBV Content Intelligence — Responsive App CSS
   Correções de responsividade para as páginas do app
   Sobrescreve estilos inline via seletores de alta especificidade
   ============================================================ */

/* ── TABLET (≤ 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Dashboard: grid de stats 4 colunas → 2 colunas */
  .page-content > div[style*="repeat(4,1fr)"],
  .page-content > div[style*="repeat(4, 1fr)"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Dashboard: grid 2fr 1fr → 1fr */
  .page-content > div[style*="2fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* Analytics: grids complexos */
  .page-content > div[style*="repeat(3,1fr)"],
  .page-content > div[style*="repeat(3, 1fr)"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── MOBILE (≤ 768px) ──────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── TOPBAR ── */
  .topbar {
    padding: 0 16px;
    height: 56px;
    gap: 12px;
  }

  .topbar-left {
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

  .topbar-title {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-right {
    gap: 8px;
    flex-shrink: 0;
  }

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

  /* Esconde textos longos nos botões da topbar no mobile */
  .topbar-right .btn-text-mobile {
    display: none;
  }

  /* ── MAIN CONTENT ── */
  .main-content {
    padding-top: 56px; /* altura da topbar mobile */
  }

  /* ── PAGE HEADER ── */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .page-header .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── DASHBOARD: Todos os grids inline → 1 coluna ── */
  .page-content > div[style*="repeat(4,1fr)"],
  .page-content > div[style*="repeat(4, 1fr)"],
  .page-content > div[style*="repeat(3,1fr)"],
  .page-content > div[style*="repeat(3, 1fr)"],
  .page-content > div[style*="repeat(2,1fr)"],
  .page-content > div[style*="repeat(2, 1fr)"],
  .page-content > div[style*="2fr 1fr"],
  .page-content > div[style*="1fr 1fr"],
  .page-content > div[style*="3fr 2fr"],
  .page-content > div[style*="2fr 3fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* ── CARDS INTERNOS COM GRID ── */
  .card > div[style*="repeat("],
  .card > div[style*="1fr 1fr"],
  .card > div[style*="2fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* ── GERADOR: layout lateral → empilhado ── */
  .gerador-layout,
  div[style*="grid-template-columns: 1fr 2fr"],
  div[style*="grid-template-columns:1fr 2fr"],
  div[style*="grid-template-columns: 2fr 1fr"],
  div[style*="grid-template-columns:2fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* ── CALENDÁRIO: mini-calendário ── */
  div[style*="repeat(7,1fr)"],
  div[style*="repeat(7, 1fr)"] {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important; /* mantém 7 colunas para dias da semana */
    font-size: 10px !important;
  }

  /* ── BIBLIOTECA: grid de cards ── */
  .biblioteca-grid,
  div[style*="repeat(auto-fill"],
  div[style*="repeat(auto-fit"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* ── ANALYTICS: gráficos ── */
  .analytics-charts,
  .chart-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* ── STEPPER DO EMAIL BUILDER ── */
  .stepper-steps {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  /* ── WIZARD / MULTI-STEP ── */
  .wizard-nav {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .wizard-nav .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── VOICE STUDIO: controles ── */
  .voice-controls {
    flex-direction: column;
    gap: 12px;
  }

  /* ── BRAND KIT: paleta de cores ── */
  .color-palette {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── INTEGRAÇÕES: cards de conexão ── */
  .integration-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .integration-card .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── CONTA: seções de perfil ── */
  .profile-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* ── ASSINATURA: planos ── */
  .plan-cards {
    flex-direction: column;
    gap: 16px;
  }

  /* ── AUTOPOSTS: programações ── */
  .autopost-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .autopost-row .btn-group {
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .autopost-row .btn-group .btn {
    flex: 1;
    justify-content: center;
  }

  /* ── DISTRIBUIÇÃO: posts agendados ── */
  .post-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .post-row .btn-group {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  /* ── PLAYBOOKS: cards de ação ── */
  .playbook-actions {
    flex-direction: column;
    gap: 8px;
  }

  .playbook-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── LEARNING CENTER: grid de cursos ── */
  .courses-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* ── GUIAS E TEMPLATES: grid ── */
  .guides-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* ── TBV LOCAL: gráficos e dados ── */
  .market-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  /* ── MODAIS: ajustes adicionais ── */
  .modal-body > div[style*="grid"],
  .modal-body > div[style*="flex"] {
    flex-direction: column !important;
    display: flex !important;
  }

  /* ── TABELAS: scroll horizontal ── */
  .card .table-container,
  .card table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* ── ADMIN: páginas admin ── */
  .admin-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── TAGS / BADGES: wrap ── */
  .tag-list,
  .badge-list {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ── SEARCH BAR: largura total ── */
  .search-bar,
  input[type="search"],
  input[placeholder*="Buscar"],
  input[placeholder*="buscar"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── FILTROS: scroll horizontal ── */
  .filter-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .filter-bar::-webkit-scrollbar {
    display: none;
  }

  .filter-bar .btn {
    flex-shrink: 0;
  }

  /* ── STAT CARDS: grid 2 colunas no mobile ── */
  .stats-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* ── ONBOARDING: ajustes específicos ── */
  .onboarding-options {
    grid-template-columns: 1fr !important;
  }

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

  /* ── SIDEBAR POSITION: fixed no mobile ── */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 200;
  }
}

/* ── SMALL MOBILE (≤ 480px) ───────────────────────────────── */
@media (max-width: 480px) {

  .topbar-title {
    font-size: 13px;
  }

  .page-content {
    padding: 12px;
  }

  .card {
    padding: 16px;
  }

  /* Stats: 1 coluna em telas muito pequenas */
  .stats-row {
    grid-template-columns: 1fr !important;
  }

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

  /* Botões de ação: empilhados */
  .action-buttons {
    flex-direction: column;
    gap: 8px;
  }

  .action-buttons .btn {
    width: 100%;
    justify-content: center;
  }
}