/* /////////////////////////////////////
   RESPONSIVE
   Shared responsive helpers only
///////////////////////////////////// */

@media (max-width: 26.25rem) {
  .top-row {
    grid-template-columns: 1fr;
  }

  .button,
  button {
    width: 100%;
  }

  .admin-card-actions .button,
  .page-actions .button,
  .dashboard-actions .button {
    width: 100%;
  }
}

@media (min-width: 43.75rem) {
  .admin-card-actions .button {
    width: auto;
  }
}

/* /////////////////////////////////////
   SMALL PHONE FRAMEWORK TUNING
   Shared app layout/forms/buttons/tables
///////////////////////////////////// */

@media (max-width: 30rem) {
  .sheet-main {
    padding-inline: clamp(0.5rem, 3vw, 0.75rem);
    padding-block-start: max(0.75rem, env(safe-area-inset-top));
  }

  .sheet-card,
  .card,
  .cc-panel,
  .dashboard-card {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .card-grid,
  .form-grid,
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .page-actions .button,
  .page-actions .btn,
  .page-actions button {
    inline-size: 100%;
    justify-content: center;
  }

  .responsive-table {
    max-inline-size: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .responsive-table table {
    min-inline-size: max-content;
  }
}

/* Hide desktop-only tables on small screens */


/* Hide mobile-only card lists once desktop layout is available */

/* /////////////////////////////////////
   RESPONSIVE TABLE / CARD SWITCHING
   Mobile-first: keep cards on phones and tablets.
   Desktop tables only start on larger desktop widths.
///////////////////////////////////// */

.desktop-table,
.desktop-order-lines {
  display: none;
}

.mobile-admin-list,
.mobile-product-list,
.mobile-order-lines {
  display: grid;
}

@media (min-width: 64rem) {
  .desktop-table,
  .desktop-order-lines {
    display: block;
  }

  .mobile-admin-list,
  .mobile-product-list,
  .mobile-order-lines {
    display: none;
  }
}

/* /////////////////////////////////////
   MOBILE CARD SPACING
   Shared framework spacing for compact mobile cards
///////////////////////////////////// */

@media (max-width: 40rem) {
  :root {
    --cc-card-gap: 0.35rem;
    --cc-card-padding: 0.6rem;
  }

  .card-grid {
    gap: var(--cc-card-gap);
  }

  :where(.sheet-card, .card, .cc-panel) > :where(.card, .section-card, .cc-panel, .mobile-admin-card) {
    border-color: var(--cc-colour-border-soft);
  }

  :where(.sheet-card, .card, .cc-panel) > :where(.card, .section-card, .cc-panel) {
    padding: clamp(0.65rem, 3vw, 0.85rem);
  }
}

/* /////////////////////////////////////
   MOBILE CARD CONTENT SPACING
   Compact shared card layout on small screens
///////////////////////////////////// */

@media (max-width: 40rem) {
  :where(.card-grid) > :where(.card) {
    gap: 0.45rem;
  }

  :where(.card-grid) > :where(.card) > :where(.button, .btn, button) {
    margin-block-start: 0.2rem;
  }
}

/* /////////////////////////////////////
   DASHBOARD GRID
   Food safety/admin dashboard cards: wider page, narrower cards.
///////////////////////////////////// */

@media (min-width: 64rem) {
  :where(.dashboard-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  }
}

@media (min-width: 100rem) {
  :where(.dashboard-grid) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}