/* ===========================================================================
   public/css/responsive.css
   Media queries. VA ULTIMO: sus reglas deben poder pisar a las de arriba.

   Parte 12 de 12 de la hoja de estilos. El orden de carga IMPORTA:
   se enlazan en este mismo orden desde index.html y dashboard.html.
   =========================================================================== */
/* ===== 27. RESPONSIVE ===== */
@media (max-width: 900px) {
  .page-shell { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 260px;
    transform: translateX(-260px);
    z-index: 200;
  }

  .sidebar.sidebar-open { transform: translateX(0); }

  .topbar-menu-btn { display: block; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablets & large phones — sales reps creating/reviewing quotes on the go */
@media (max-width: 768px) {
  .page-content { padding: 1rem; }

  /* Card & modal chrome tightens up for narrow viewports */
  .card-header,
  .modal-header  { padding: .9rem 1rem; }
  .card-body     { padding: 1rem; }
  .modal-body    { padding: 1rem; }
  .modal-dialog  { max-width: 100%; }

  /* Forms collapse to a single column so fields are comfortably tappable */
  .form-row { grid-template-columns: 1fr; }

  /* Filter bar wraps instead of overflowing horizontally */
  .filter-bar { flex-wrap: wrap; }
  .filter-bar .form-group { flex: 1 1 auto; min-width: 140px; }

  /* Action buttons stretch full-width and stack for easy thumb access */
  .table-actions { flex-wrap: wrap; }
  .card-footer   { flex-direction: column-reverse; align-items: stretch; }
  .card-footer .btn { width: 100%; }

  /* Denser table typography to fit more columns before horizontal scroll */
  .data-table          { font-size: .8rem; }
  .data-table thead th { padding: .5rem .65rem; }
  .data-table tbody td { padding: .55rem .65rem; }

  .topbar-title { font-size: 1rem; }
}

@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .auth-card   { padding: 1.75rem 1.25rem; }
  .page-content { padding: 1rem; }
  .modal-overlay { padding: 1rem .5rem; }
}