/* ==========================================================================
   CPM Vision 2.0 — responsive.css
   Último arquivo carregado. É aqui — e só aqui — que a interface se adapta.
   Breakpoints: 1280 (notebook) · 1024 (tablet) · 768 (celular) · 480 (pequeno)
   ========================================================================== */

/* ===== Notebook ========================================================== */
@media (max-width: 1280px) {
  .content { padding: var(--sp-3) var(--sp-4) var(--sp-5); }
  .col-3 { grid-column: span 6; }
  .col-4 { grid-column: span 6; }
}

/* ===== Tablet — grid de 6 colunas ======================================== */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(6, 1fr); }
  .col-2, .col-3, .col-4 { grid-column: span 3; }
  .col-5, .col-6, .col-7, .col-8, .col-9, .col-12 { grid-column: span 6; }

  .form-row { grid-template-columns: repeat(6, 1fr); }

  .topbar__search { max-width: 280px; }
}

/* ===== Celular =========================================================== */
@media (max-width: 768px) {

  /* A sidebar sai do fluxo e desliza SOBRE o conteúdo. Nunca o empurra. */
  .app { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform var(--t-slow);
    box-shadow: var(--shadow-pop);
  }
  .sidebar.is-open { transform: translateX(0); }

  .topbar {
    padding: 0 var(--sp-3);
    gap: var(--sp-2);
  }
  .topbar__toggle { display: grid; }

  /* No celular a busca vira um botão de ícone; a barra ocuparia tudo. */
  .topbar__search { display: none; }

  .content { padding: var(--sp-3) var(--sp-3) var(--sp-5); gap: var(--sp-3); }

  /* Uma coluna. Sempre. */
  .grid, .form-row { grid-template-columns: 1fr; }
  .grid > [class^="col-"], .form-row > [class^="col-"] { grid-column: span 1; }
  .stat-grid { grid-template-columns: 1fr; }

  .page-header { flex-direction: column; align-items: stretch; }
  .page-header__actions { width: 100%; }
  .page-header__actions .btn { flex: 1; }

  .panel { padding: var(--sp-3); }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }

  .modal { max-width: 100%; }
  .modal__body { padding: var(--sp-3); }

  .toast-area { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); }
  .toast { min-width: 0; }

  .hide-mobile { display: none !important; }
  .only-mobile { display: block; }

  /* ---- Tabela vira cards empilhados ------------------------------------
     Cada <td> carrega seu próprio rótulo em data-label. Sem duplicar HTML.
     ---------------------------------------------------------------------- */
  .table-wrap { overflow-x: visible; }

  .table--cards { min-width: 0; }
  .table--cards thead { display: none; }

  .table--cards tbody tr {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    margin-bottom: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
  }
  .table--cards tbody tr:hover { background: var(--bg-card); }

  .table--cards tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    text-align: right;
  }
  .table--cards tbody td:last-child { border-bottom: 0; }

  .table--cards tbody td::before {
    content: attr(data-label);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    flex-shrink: 0;
  }

  /* A primeira célula é o título do card: sem rótulo, sem borda. */
  .table--cards tbody td:first-child {
    justify-content: flex-start;
    text-align: left;
    padding-top: var(--sp-2);
    font-size: var(--fs-md);
  }
  .table--cards tbody td:first-child::before { display: none; }

  .table--cards .actions .btn-group { width: 100%; justify-content: flex-end; }

  .table-toolbar__search { max-width: 100%; }
  .table-toolbar__count { margin-left: 0; }

  .pagination { justify-content: center; }
  .pagination__info { margin-right: 0; width: 100%; text-align: center; }
}

/* ===== Celular pequeno =================================================== */
@media (max-width: 480px) {
  :root { --sidebar-w: 280px; }

  .content { padding: var(--sp-2) var(--sp-2) var(--sp-4); }
  .stat__value { font-size: var(--fs-xl); }
  .topbar__user-info { display: none; }
  .footer { flex-direction: column; text-align: center; }
}

/* ===== Impressão ========================================================= */
@media print {
  .sidebar, .topbar, .sidebar-overlay, .page-header__actions, .btn { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .main::before { display: none; }
  body { background: #fff; color: #000; }
  .card, .panel, .stat { border-color: #ccc; box-shadow: none; }
}