/* ===== Mobile First - Base is mobile ===== */

/* Tablets (768px+) */
@media (min-width: 768px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .metric-trio {
    gap: var(--space-6);
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .hamburger { display: none !important; }
  .nav { display: flex !important; }

  .kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

/* Mobile only (below 1024px) */
@media (max-width: 1023px) {
  .hamburger {
    display: flex !important;
  }

  .nav {
    display: none !important;
  }

  .header__subtitle {
    display: none;
  }

  .header__title {
    font-size: var(--fs-base);
  }

  .header__logo {
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
  }

  .header__brand {
    gap: var(--space-3);
  }

  .main {
    padding: var(--space-4);
  }

  .booking-3col {
    grid-template-columns: 1fr;
    height: auto;
  }

  .booking-3col__items,
  .booking-3col__form,
  .booking-3col__summary {
    max-height: none;
  }

  .booking-3col__scroll {
    overflow-y: visible;
  }

  .booking-3col__summary-body {
    overflow-y: visible;
  }

  .pay-pills {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .receipt__actions {
    flex-direction: column;
  }

  .success-page__actions {
    flex-direction: column;
  }

  .dashboard-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-controls .form-input {
    max-width: none;
  }

  .dashboard-actions {
    margin-left: 0;
  }

  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
  }

  .toast {
    max-width: none;
  }

  .modal {
    margin: var(--space-4);
  }

  .variant-modal {
    margin: var(--space-4);
  }

  .variant-option__stepper .stepper__btn {
    width: 40px;
    height: 40px;
  }

  .variant-row {
    grid-template-columns: 1fr 100px auto;
  }
}

/* Small mobile (below 480px) */
@media (max-width: 479px) {
  .mobile-nav__panel {
    width: 85vw;
    max-width: var(--drawer-width);
  }

  .pay-pills {
    grid-template-columns: repeat(3, 1fr);
  }

  .item-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .page-header__title {
    font-size: var(--fs-xl);
  }

  .kpi-card {
    padding: var(--space-4);
  }

  .kpi-card__value {
    font-size: var(--fs-xl);
  }

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

  .chart-canvas-wrap {
    height: 200px;
  }

  .variant-row {
    grid-template-columns: 1fr auto;
  }
  .variant-row__label {
    grid-column: 1 / -1;
  }
}

/* Print Styles */
@media print {
  .header, .footer, .hamburger, .mobile-nav,
  .toast-container, .receipt__actions, .btn {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  .main {
    padding: 0;
    max-width: none;
  }

  .receipt {
    max-width: none;
  }

  .receipt__qr {
    border: 1px solid #ccc;
    box-shadow: none;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}