/* ═══ SOLICITE PRO — RESPONSIVO ═══ */
/* Ativado apenas em telas menores — não afeta desktop */

/* ─── Tablets e celulares ─── */
@media (max-width: 1024px) {
  .sidebar { width: 220px !important; }
  .main-content { margin-left: 220px !important; }
}

@media (max-width: 768px) {
  /* ─── Sidebar vira menu retrátil ─── */
  .sidebar {
    position: fixed !important;
    top: 0; left: -280px !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 1000 !important;
    transition: left 0.3s ease !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3) !important;
  }
  .sidebar.open {
    left: 0 !important;
  }
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }
  .sidebar-overlay.show {
    display: block !important;
  }
  .main-content {
    margin-left: 0 !important;
    padding: 16px !important;
    width: 100% !important;
  }

  /* ─── Hamburger button ─── */
  .menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1001;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: var(--primary, #3b82f6);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }

  /* ─── Topbar ─── */
  .topbar {
    padding-left: 56px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .topbar h1 { font-size: 18px !important; }
  .topbar .user-info { font-size: 13px !important; }

  /* ─── Cards em grid ─── */
  .cards-grid,
  .stats-grid,
  .item-row,
  [class*="grid"]:not(.kanban-grid):not(.pipeline-grid):not(.form-grid) {
    grid-template-columns: 1fr !important;
  }
  .form-grid { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .item-row { grid-template-columns: 1fr !important; }
  .card, [class*="card"]:not(.kanban-card) {
    padding: 16px !important;
  }

  /* ─── Tabelas com scroll horizontal ─── */
  .table-container,
  table:not(.no-responsive) {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table:not(.no-responsive) th,
  table:not(.no-responsive) td {
    white-space: nowrap !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  /* ─── Botões maiores para toque ─── */
  button, a.btn, .btn, [role="button"] {
    min-height: 40px !important;
    font-size: 14px !important;
  }

  /* ─── Inputs e selects ─── */
  input, select, textarea {
    font-size: 16px !important; /* evita zoom no iOS */
    max-width: 100% !important;
  }

  /* ─── Modais em tela cheia ─── */
  .modal-content, [class*="modal"] > div {
    width: 95% !important;
    max-width: 95% !important;
    margin: 10px auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* ─── Kanban/Pipeline ─── */
  .kanban-board, .pipeline-board {
    flex-direction: column !important;
    overflow-x: visible !important;
  }
  .kanban-column, .pipeline-column {
    min-width: 100% !important;
    max-width: 100% !important;
  }

  /* ─── Stats / KPIs ─── */
  .stats-container, .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ─── Gráficos ─── */
  canvas { max-width: 100% !important; height: auto !important; }

  /* ─── Abas / tabs ─── */
  .tabs, .tab-bar {
    flex-wrap: wrap !important;
    overflow-x: auto !important;
  }
  .tabs button, .tab-bar button, .tab-btn {
    flex: 1 1 auto !important;
    font-size: 13px !important;
    padding: 10px 8px !important;
    white-space: nowrap !important;
  }

  /* ─── Forms ─── */
  .form-row, .form-group {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .form-row > * { width: 100% !important; }

  /* ─── Reduzir padding do body nas páginas de conteúdo ─── */
  body { padding: 16px !important; }

  /* ─── Pipeline header ─── */
  .pipeline-header { flex-direction: column !important; gap: 12px !important; align-items: stretch !important; }
  .pipeline-header h1 { font-size: 20px !important; }
  .pipeline-header button { width: 100% !important; }

  /* ─── Charts row ─── */
  .charts-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ─── Page header ─── */
  .page-title { font-size: 20px !important; }

  /* ─── Filters ─── */
  .filtros { flex-direction: column !important; align-items: stretch !important; }
  .filtros input, .filtros select { min-width: 0 !important; width: 100% !important; }

  /* ─── Dashboard header ─── */
  .header-title { font-size: 20px !important; }

  /* ─── Item rows ─── */
  .item-row { grid-template-columns: 1fr !important; gap: 6px !important; }

  /* ─── Footer / barra inferior ─── */
  .bottom-bar, .action-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ─── Celulares pequenos ─── */
@media (max-width: 480px) {
  .topbar h1 { font-size: 16px !important; }
  .stats-container, .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .card, [class*="card"] {
    padding: 12px !important;
  }
  button, a.btn, .btn, [role="button"] {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
}

/* ─── Classe utilitária para esconder em mobile ─── */
.hide-mobile { display: revert; }
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
.show-mobile { display: none; }
@media (max-width: 768px) {
  .show-mobile { display: revert !important; }
}