/* ==========================================================================
   Ajustes responsivos adicionais
   ========================================================================== */

@media (max-width: 720px) {
  .page-head { flex-direction: column; align-items: flex-start; }
  .page-head-actions { width: 100%; }
  .page-head-actions .btn { flex: 1; }

  .table-toolbar { flex-direction: column; align-items: stretch; }
  .table-search { min-width: 0; width: 100%; }
  .table-filters { width: 100%; }
  .table-filters select { flex: 1; }

  .card-header { flex-direction: column; align-items: flex-start; gap: var(--space-2); }

  .modal { max-width: calc(100vw - 32px); }

  .toast-stack { left: var(--space-4); right: var(--space-4); max-width: none; }

  .table-footer { flex-direction: column; align-items: stretch; }
  .pagination { justify-content: center; }
}

@media (max-width: 560px) {
  .kpi-card__value { font-size: 20px; }
  .topbar { padding: 0 var(--space-3); gap: var(--space-2); }
  .content { padding: var(--space-3); }
}

/* Tabelas em telas pequenas: modo cartão */
@media (max-width: 640px) {
  .data-table--stack thead { display: none; }
  .data-table--stack, .data-table--stack tbody, .data-table--stack tr, .data-table--stack td { display: block; width: 100%; }
  .data-table--stack tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin: var(--space-3);
    overflow: hidden;
  }
  .data-table--stack td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    text-align: right;
  }
  .data-table--stack td:last-child { border-bottom: none; }
  .data-table--stack td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: left;
  }
  .data-table--stack .row-actions { justify-content: flex-end; }
}

@media print {
  .sidebar, .topbar, .page-head-actions, .table-toolbar, .table-footer, .toast-stack { display: none !important; }
  .app-shell { display: block; }
  .content { padding: 0; max-width: none; }
}