/* ---------- Responsive layer ----------
   Loaded after styles.css. Only touches spacing/layout at breakpoints;
   colors, shadows, etc. stay in styles.css. */

/* Tablets */
@media (max-width: 1024px) {
  .page-content {
    padding: 20px;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* Small tablets / large phones */
@media (max-width: 680px) {
  .page-content {
    padding: 16px;
  }

  #topbar {
    padding: 10px 16px;
  }

  .page-title {
    font-size: 1.25rem;
  }

  .toolbar {
    flex-wrap: wrap;
  }

  .toolbar .search-input {
    flex: 1 1 100%;
    order: 2;
  }

  .toolbar .btn-inline {
    order: 1;
    width: 100%;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-actions {
    flex-wrap: wrap;
  }

  .product-actions .btn {
    flex: 1 1 auto;
  }

  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal-card {
    max-width: 100%;
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }

  .ticket-header {
    flex-direction: column;
  }

  .ticket-controls {
    width: 100%;
  }

  .ticket-controls select {
    flex: 1;
  }

  .data-table th,
  .data-table td {
    padding: 6px 8px;
    font-size: 0.75rem;
  }

  .row-actions {
    flex-wrap: nowrap;
  }
}

/* Phones */
@media (max-width: 420px) {
  .auth-card {
    padding: 24px 18px;
  }

  .widget-grid {
    grid-template-columns: 1fr;
  }

  .modal-card {
    padding: 16px;
  }

  .message-bubble {
    max-width: 88%;
  }
}