/* ============================================================
   responsive.css — Mobile / tablet breakpoints
   ============================================================ */

/* ── Tablet: 2-col stats → 2x2 ── */
@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile ── */
@media (max-width: 640px) {

  /* App becomes single column */
  .app {
    grid-template-columns: 1fr;
  }

  /* Sidebar becomes off-canvas drawer */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 50;
    box-shadow: 4px 0 20px var(--shadow);
  }

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

  /* Show hamburger on mobile */
  .mobile-menu-btn { display: flex; }

  /* Topbar padding tighter */
  .topbar { padding: 12px 16px; }

  /* Hide "Keluar" text on mobile topbar */
  .hide-mobile { display: none; }

  /* Content padding tighter */
  .content { padding: 16px; }

  /* Single column stats */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
  }

  /* Form single column */
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* Packages single column */
  .pkg-select {
    grid-template-columns: 1fr;
  }

  /* Search input full width */
  .search-input { width: 100%; }

  .panel-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .panel-head-right { width: 100%; }
  .panel-head-right .search-input { width: 100%; }

  /* Receipt modal full width */
  .receipt-box {
    max-width: 100%;
    margin: 0;
  }

  /* Toast full width */
  .toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }

  /* Login card no side padding on very small screens */
  .login-card { padding: 28px 20px; }
}

/* ── Very small screens ── */
@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-val   { font-size: 22px; }
}