/* ══════════════════════════════════════════════
   ADMIN PORTAL — Mobile / Responsive CSS
   Breakpoints: tablet ≤ 1024px · mobile ≤ 640px
   ══════════════════════════════════════════════ */

/* ══ BLOCK 0: 기반 초기화 ══ */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .3);
  z-index: 49;
}
.sidebar-overlay.show { display: block; }

.menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--body, #6B7280);
  padding: 4px;
  flex-shrink: 0;
}
.menu-btn .material-symbols-outlined { font-size: 24px; }

/* data-table horizontal scroll wrapper */
.data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ══ BLOCK 1: TABLET ≤ 1024px ══ */
@media (max-width: 1024px) {

  /* Sidebar → fixed slide-out drawer */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: 4px 0 16px rgba(0, 0, 0, .08);
  }
  .sidebar.open { transform: translateX(0); }

  /* main-wrap takes full width */
  .main-wrap { width: 100%; }

  /* Topbar */
  .menu-btn { display: flex; align-items: center; }
  .topbar { padding: 0 14px; gap: 8px; }

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

  /* Bento grid: wide spans collapse */
  .span-8, .span-6, .span-4, .span-3 { grid-column: span 12; }

  /* KPI grid: 2 columns on tablet */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* Quick links: 2 columns */
  .quick-links { grid-template-columns: repeat(2, 1fr); }

  /* Card grid: 2 columns */
  .card-grid { grid-template-columns: repeat(2, 1fr); }

  /* Bento gap */
  .bento { gap: 8px; }

  /* Nav section labels in sidebar */
  .nav-section-label { padding: 10px 12px 4px; }
}


/* ══ BLOCK 2: MOBILE ≤ 640px ══ */
@media (max-width: 640px) {

  /* Typography */
  .headline-sm { font-size: 1.25rem; }

  /* Page header stacks */
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .page-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .page-actions .btn-primary,
  .page-actions .btn-secondary { flex: 1; text-align: center; justify-content: center; min-width: 120px; }

  /* Topbar search: hide on mobile */
  .topbar-search { display: none; }

  /* Content padding */
  .content { padding: 12px; }

  /* Section padding */
  .section-body { padding: 10px 12px; }
  .section-head { padding: 10px 12px; }

  /* KPI grid: 2 col */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* Summary grid: 1 col */
  .summary-grid { grid-template-columns: 1fr; }

  /* Stat grid: 1 col */
  .stat-grid { grid-template-columns: 1fr; gap: 8px; }

  /* Quick links: 2 col */
  .quick-links { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* Card grid: 1 col */
  .card-grid { grid-template-columns: 1fr; }

  /* Forms: single column */
  .form-grid { grid-template-columns: 1fr !important; }
  .form-group.full { grid-column: span 1; }
  .info-grid { grid-template-columns: 1fr !important; }

  /* Tables: min-width + scroll */
  .data-table { min-width: 540px; }
  .data-table th,
  .data-table td { padding: 8px 10px; }

  /* Check table (permission matrix) */
  .check-table { min-width: 480px; }

  /* Tier row (grade/tier tables) */
  .tier-row { flex-wrap: wrap; gap: 6px; }

  /* Tab bar: horizontal scroll */
  .tab-bar { flex-wrap: nowrap; overflow-x: auto; }
  .tab { padding: 8px 10px; font-size: 12px; }

  /* Filter bar wraps */
  .filter-bar { flex-wrap: wrap; }

  /* Action bar */
  .action-bar {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .action-bar .btn-primary,
  .action-bar .btn-secondary { width: 100%; text-align: center; }

  /* Breadcrumb */
  .breadcrumb { font-size: 11px; }

  /* Admin specific: two-column detail layouts */
  .detail-grid { grid-template-columns: 1fr !important; }
  .meta-row { flex-wrap: wrap; gap: 6px; }
}