/* ==============================================================
 * admin-responsive.css — Obsidian Aurora Responsive Breakpoints
 * ============================================================== */

/* ═══════════════════════════════════════════════════════════
   Desktop (≤ 1280px) — Slightly tighter
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .main-content { padding: 24px 24px 48px; }
  .stats-grid { gap: 12px; }
  .keys-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════
   Tablet (≤ 1024px) — Sidebar collapses
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 0px;
  }

  .sidebar {
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    width: 260px;
    z-index: 1100;
  }
  .sidebar.open {
    transform: translateX(0);
  }

  .topbar {
    left: 0;
  }

  .menu-toggle { display: flex; }

  .main-content {
    margin-left: 0;
    padding: 20px 20px 48px;
  }

  .platform-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .users-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .upstream-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .proxy-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

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

/* ═══════════════════════════════════════════════════════════
   Small Tablet (≤ 768px) — Stack layouts
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .main-content { padding: 16px 16px 40px; }

  .section-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .section-header-actions {
    width: 100%;
  }
  .section-header-actions .btn-create {
    width: 100%;
    justify-content: center;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .stat-card { padding: 16px 18px; }
  .stat-value { font-size: 1.6rem; }

  .keys-grid { grid-template-columns: 1fr; }
  .platform-grid { grid-template-columns: 1fr; }
  .users-grid { grid-template-columns: 1fr; }
  .upstream-grid { grid-template-columns: 1fr; }
  .proxy-grid { grid-template-columns: 1fr; }
  .system-grid { grid-template-columns: 1fr 1fr; }
  .gw-card-grid { grid-template-columns: 1fr; }

  #liveRpmContainer { grid-template-columns: 1fr; }

  .view-switcher-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .search-input-wrap { max-width: 100%; }
  .view-toggle-group { align-self: flex-end; }

  .package-grid { grid-template-columns: repeat(2, 1fr); }
  .package-limits { grid-template-columns: 1fr; }
  .expiry-presets { grid-template-columns: repeat(3, 1fr); }

  .topbar-actions { gap: 6px; }
  .brand-text strong { font-size: 13px; }

  /* Modal responsive */
  .modal,
  .modal-card {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: none !important;
    max-height: calc(100dvh - 20px) !important;
    margin: auto !important;
    border-radius: 16px;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .modal-overlay { padding: 10px; align-items: center; overflow-y: auto !important; }
  .modal-form { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; }
  .modal-header { padding: 20px 20px 0; flex-shrink: 0 !important; }
  .modal-body { padding: 18px 20px; flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; }
  .modal-footer { padding: 0 20px 20px; flex-shrink: 0 !important; }

  .key-detail-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   Mobile (≤ 480px) — Full stack
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  html { font-size: 13px; }

  .main-content { padding: 12px 12px 32px; }

  .section-title { font-size: 1.25rem; }
  .section-subtitle { font-size: 12px; }

  .stats-grid { grid-template-columns: 1fr; }
  .stat-card { padding: 14px 16px; }
  .stat-value { font-size: 1.4rem; }
  .stat-label { font-size: 11.5px; }

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

  .topbar { padding: 0 12px; }
  .topbar-right,
  .topbar-actions {
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .topbar-right::-webkit-scrollbar,
  .topbar-actions::-webkit-scrollbar { display: none; }

  .btn-topbar-action span:not(.btn-icon) { display: none; }
  .admin-user-pill span { display: none; }
  .db-status-badge span { display: none; }

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

  .login-card {
    padding: 30px 24px 28px;
    border-radius: var(--radius);
  }
  .login-title { font-size: 1.3rem; }

  /* Platform card mobile */
  .platform-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .platform-actions {
    width: 100%;
    justify-content: flex-end;
  }

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

  .modal,
  .modal-card { width: calc(100vw - 12px) !important; max-height: calc(100dvh - 12px) !important; border-radius: 14px; display: flex !important; flex-direction: column !important; overflow: hidden !important; margin: auto !important; }
  .modal-overlay { padding: 6px; overflow-y: auto !important; }
  .modal-form { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; }
  .modal-header { padding: 16px 16px 0; flex-shrink: 0 !important; }
  .modal-body { padding: 14px 16px; flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; }
  .modal-footer { padding: 0 16px 16px; flex-shrink: 0 !important; }
  .modal-title { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════
   Tiny (≤ 360px) — Extra compact
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .package-grid { grid-template-columns: 1fr 1fr; }
  .expiry-presets { grid-template-columns: 1fr 1fr; }
  .stats-grid { gap: 8px; }
  .key-stats-row { grid-template-columns: 1fr; }
  .brand-badge { display: none; }
}