/* ===== Mobile First (default) ===== */
/* < 640px — single column, bottom nav, compact */

/* ===== Tablet / iPad ===== */
@media (min-width: 640px) and (max-width: 1023px) {
  .app-shell {
    max-width: 720px;
    padding: 0 24px 120px;
  }

  .quick-actions {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .services-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .balance-amount { font-size: 44px; }
  .balance-card { padding: 28px; }
}

/* ===== Desktop ===== */
@media (min-width: 1024px) {
  body { padding: 32px 0; }

  .app-shell {
    max-width: 1280px;
    padding: 0 32px 32px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
    background: transparent;
  }

  /* Desktop Sidebar */
  .desktop-sidebar {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 32px;
    height: fit-content;
  }

  .desktop-sidebar .logo {
    font-size: 24px;
    font-weight: 800;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 24px;
  }

  .desktop-sidebar .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius);
    color: var(--text-2);
    font-weight: 600;
    margin-bottom: 4px;
    transition: all var(--transition);
  }

  .desktop-sidebar .nav-item:hover {
    background: var(--primary-gradient-soft);
    color: var(--primary);
  }

  .desktop-sidebar .nav-item.active {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.30);
  }

  .desktop-sidebar .nav-item .icon { font-size: 20px; }

  .main-content { min-width: 0; }

  .quick-actions {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .quick-action { padding: 22px 14px; }
  .quick-action-icon { width: 60px; height: 60px; font-size: 26px; }
  .quick-action-label { font-size: 14px; }

  .services-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
  }

  .service-icon { width: 56px; height: 56px; font-size: 24px; }
  .service-label { font-size: 13px; }

  .balance-card { padding: 36px; }
  .balance-amount { font-size: 52px; }
  .balance-card { aspect-ratio: auto; }

  .promo-banner { padding: 32px; }
  .promo-content h3 { font-size: 26px; }

  /* Hide mobile-only elements */
  .mobile-only { display: none !important; }
}

@media (max-width: 1023px) {
  .desktop-only, .desktop-sidebar { display: none !important; }
}

/* ===== Large Desktop ===== */
@media (min-width: 1280px) {
  .app-shell {
    grid-template-columns: 280px 1fr 340px;
  }
}

/* ===== Admin Panel Responsive ===== */
.admin-layout {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

@media (min-width: 1024px) {
  .admin-layout {
    grid-template-columns: 260px 1fr;
  }
}

/* Smaller mobile */
@media (max-width: 380px) {
  .balance-amount { font-size: 32px; }
  .quick-action-icon { width: 44px; height: 44px; font-size: 18px; }
  .quick-action-label { font-size: 11px; }
  .service-icon { width: 42px; height: 42px; font-size: 18px; }
}