/* ===== Responsive =====
   Objectiu: que el dashboard sigui usable en mòbil (iPhone 14 Pro Max, etc.)
   sense destrossar l'escriptori.
*/

@media (max-width: 960px) {
  /* Layout: sidebar off-canvas */
  .layout { grid-template-columns: 1fr !important; }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: auto;
    width: min(280px, 86vw);
    transform: translateX(-104%);
    transition: transform 180ms ease;
    z-index: 60;
    border-right: 1px solid var(--border);
  }

  html[data-sidebar-position="right"] .sidebar {
    left: auto;
    right: 0;
    transform: translateX(104%);
    border-right: 0;
    border-left: 1px solid var(--border);
  }

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

  /* Overlay */
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }
  body.sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }

  /* Evita scroll del body quan el menú està obert */
  body.sidebar-open { overflow: hidden; }

  /* Topbar */
  .menu-btn { display: inline-flex; }

  .topbar {
    padding: var(--space-2) var(--space-3);
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .topbar-left {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .topbar-heading { min-width: 0; }

  .topbar-right {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
  }

  .topbar-search {
    flex: 1 1 220px;
    min-width: 0;
  }

  .topbar-search input {
    width: 100%;
    min-width: 0;
  }

  /* Cards / actions */
  .card-head { flex-wrap: wrap; align-items: flex-start; }
  .actions { flex-wrap: wrap; }

  /* Pagination */
  .pagination { flex-wrap: wrap; }

  /* Content padding */
  .content { padding: var(--space-3); }
}

@media (max-width: 520px) {
  /* Més aire en pantalles molt petites */
  .breadcrumbs { display: none; }
  .topbar-title { font-size: 14px; }
  .topbar-subtitle { font-size: 12px; }

  .btn { padding: 11px 12px; }
  .btn.xs { padding: 8px 10px; }

  .table th, .table td { padding: 10px 12px; }
}