/* dashboard-responsive.css — Shared responsive utilities for dashboard islands */

/* Table overflow wrapper — enables horizontal scroll on mobile */
.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll-wrapper > table {
  min-width: 600px;
}

/* Responsive grid utilities (for use with className in React islands) */
.responsive-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.responsive-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.responsive-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.mobile-stack {
  display: flex;
  gap: 1rem;
}

.mobile-hide { }
.mobile-show { display: none; }

/* Tablet breakpoint */
@media (max-width: 1024px) {
  .responsive-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
  .responsive-grid-4 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .responsive-grid-2 {
    grid-template-columns: 1fr;
  }
  .responsive-grid-3 {
    grid-template-columns: 1fr;
  }
  .responsive-grid-4 {
    grid-template-columns: 1fr;
  }
  .mobile-stack {
    flex-direction: column;
  }
  .mobile-hide { display: none; }
  .mobile-show { display: block; }
}