/* ============================================================
   ZeroDay — Mobile & Responsive Fixes v7
   Covers all pages: home, features, premium, community,
   commands, learn, status, threats, account, admin
   ============================================================ */

/* ── Base mobile resets ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }

/* ══════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none !important; }
  .nav-toggle { display: flex !important; }

  .nav-mobile-open .nav-links {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: var(--bg-3);
    border-bottom: 1px solid var(--border);
    padding: 20px 24px;
    gap: 4px;
    z-index: 999;
  }
  .nav-mobile-open .nav-cta {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: auto;
    left: 0; right: 0;
    background: var(--bg-3);
    border-bottom: 1px solid var(--border);
    padding: 0 24px 20px;
    gap: 8px;
    z-index: 999;
  }
  .nav-mobile-open .nav-links { bottom: auto; }
  .nav-mobile-open .nav-links a {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: .95rem;
  }
  .nav-mobile-open .nav-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════
   HOMEPAGE
══════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
  .hero-visual { display: none !important; }
  .hero-content { text-align: center; }
  .hero-content .btn-group { justify-content: center; }
  .hero-stats { justify-content: center; }
  .what-grid, .mod-showcase, .cyber-grid, .future-grid,
  .cert-section-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

@media (max-width: 640px) {
  .hero-inner { padding: 32px 0 !important; }
  .hero-content h1 { font-size: clamp(1.8rem, 8vw, 2.8rem) !important; }
  .hero-stats { flex-direction: column; gap: 12px; align-items: center; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .stat-block { padding: 24px 16px !important; }
  .stat-block .val { font-size: 2rem !important; }
  .why-grid, .highlights-grid, .future-cards { grid-template-columns: 1fr !important; }
  .cta-section { padding: 48px 20px !important; }
  .cta-section h2 { font-size: 1.5rem !important; }
  .section { padding: 56px 0 !important; }
  .section-header h2 { font-size: 1.6rem !important; }
}

/* ══════════════════════════════════════════════════════════
   FEATURES PAGE
══════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .feature-showcase { grid-template-columns: 1fr !important; gap: 32px !important; }
  .feature-showcase .feature-visual { order: -1; }
  .kb-grid { grid-template-columns: 1fr 1fr !important; }
  .future-feat-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .kb-grid, .future-feat-grid, .plan-explainer-grid { grid-template-columns: 1fr !important; }
  .page-hero h1 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
  .page-hero p { font-size: .9rem !important; }
}

/* ══════════════════════════════════════════════════════════
   PREMIUM PAGE
══════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .pricing-grid { grid-template-columns: 1fr !important; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .pricing-grid { max-width: 100%; padding: 0 4px; }
  .pricing-card { padding: 28px 20px !important; }
}

/* ══════════════════════════════════════════════════════════
   STATUS PAGE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .metrics-grid { grid-template-columns: 1fr 1fr !important; }
  .status-details { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .metrics-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .metric-card { padding: 20px 14px !important; }
  .metric-val { font-size: 1.4rem !important; }
}

/* ══════════════════════════════════════════════════════════
   COMMUNITY PAGE
══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .submit-section > div { grid-template-columns: 1fr !important; gap: 32px !important; }
  .reviews-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .testimonial-card { padding: 24px 18px !important; }
}

/* ══════════════════════════════════════════════════════════
   COMMANDS PAGE
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .cmd-grid { grid-template-columns: 1fr !important; }
  .cmd-toolbar { flex-direction: column; }
  .cmd-search-wrap { width: 100%; }
}

/* ══════════════════════════════════════════════════════════
   LEARN / STUDY RESOURCES PAGE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .learn-tools-row { grid-template-columns: 1fr !important; }
  .quiz-links-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .cert-tabs { gap: 6px; }
  .cert-tab { font-size: .8rem !important; padding: 8px 14px !important; }
}
@media (max-width: 560px) {
  .quiz-links-grid { grid-template-columns: 1fr 1fr !important; }
  .resources-grid, .cert-resources { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════
   QUIZ PAGES
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .quiz-score-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .quiz-wrap { padding: 0 16px; }
  .quiz-card { padding: 22px 18px; }
  .quiz-q-text { font-size: .95rem !important; }
  .quiz-option { padding: 12px 14px !important; font-size: .85rem !important; }
  .quiz-hero-top { gap: 12px; }
  .quiz-cert-name { font-size: 1.2rem !important; }
}

/* ══════════════════════════════════════════════════════════
   THREATS / CVE FEED PAGE
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .cve-controls { flex-direction: column !important; gap: 10px; }
  .cve-controls select, .cve-controls input { width: 100%; }
  .cve-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .cve-card { padding: 18px !important; }
  .cve-card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ══════════════════════════════════════════════════════════
   INVITE PAGE
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .perm-list { grid-template-columns: 1fr !important; }
  .invite-steps { grid-template-columns: 1fr !important; }
  .invite-cta .btn-invite-main, .invite-cta .btn-invite-minimal { font-size: .9rem !important; }
}

/* ══════════════════════════════════════════════════════════
   ACCOUNT DASHBOARD
══════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .account-layout { grid-template-columns: 1fr !important; }
  .account-sidebar {
    position: static !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 16px 0 0 !important;
  }
  .sidebar-profile { padding: 0 16px 16px !important; }
  .sidebar-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 8px 12px 16px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar-nav-group { display: contents !important; }
  .sidebar-nav-label { display: none !important; }
  .sidebar-nav-item { width: auto !important; padding: 8px 12px !important; font-size: .78rem !important; white-space: nowrap; }
  .sidebar-plan-cta { display: none !important; }
  .account-main { padding: 24px 16px !important; }
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr !important; }
  .settings-card { padding: 18px 14px !important; }
  .profile-preview-body { flex-direction: column; padding: 0 16px 16px !important; }
  .profile-preview-avatar-wrap { margin-top: -36px; }
  .section-title { font-size: 1.2rem !important; }
  .discord-sync-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .toggle-row { gap: 12px; }
  .linked-account-row { flex-wrap: wrap; }
  .server-row { flex-wrap: wrap; }
  .account-id-display { flex-wrap: wrap; font-size: .82rem !important; }
}

/* ══════════════════════════════════════════════════════════
   ADMIN PANEL
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr !important; }
  .admin-sidebar {
    position: static !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 12px 0 !important;
  }
  .admin-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 8px 12px !important;
    overflow-x: auto;
  }
  .admin-nav-group { display: contents !important; }
  .admin-nav-label { display: none !important; }
  .admin-nav-item {
    width: auto !important;
    padding: 7px 12px !important;
    font-size: .78rem !important;
    white-space: nowrap;
    border-right: none !important;
  }
  .admin-main { padding: 20px 16px !important; }
  .admin-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .staff-overview-grid { grid-template-columns: 1fr 1fr !important; }
  .quick-actions-grid { grid-template-columns: 1fr 1fr !important; }
  .admin-search-bar { display: none !important; } /* too cramped on mobile */
}
@media (max-width: 560px) {
  .admin-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .quick-actions-grid { grid-template-columns: 1fr !important; }
  .admin-toolbar { flex-direction: column; }
  .admin-search-input { width: 100% !important; min-width: unset !important; }
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table { min-width: 600px; }
}

/* ══════════════════════════════════════════════════════════
   LEGAL PAGES (ToS / Privacy)
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .legal-wrap { padding: 0 16px; }
  .legal-header h1 { font-size: 1.5rem; }
  .legal-toc { padding: 18px; }
  .data-table { font-size: .78rem; }
  .data-table th, .data-table td { padding: 8px 10px; }
}

/* ══════════════════════════════════════════════════════════
   GLOBAL UTILITY FIXES
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Buttons full-width in tight spaces */
  .auth-card .btn-discord { font-size: .95rem; padding: 13px 16px; }
  .auth-card { padding: 24px 18px !important; }

  /* Modal full-screen on mobile */
  .modal-overlay { padding: 12px; align-items: flex-end; }
  .modal-box { border-radius: 16px 16px 0 0 !important; padding: 28px 20px !important; max-height: 90vh; overflow-y: auto; }

  /* Tables scroll horizontally */
  .admin-table-wrap, .data-table { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; }

  /* Fix container padding */
  .container { padding: 0 16px !important; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center; }

  /* Tags and pills */
  .tag { font-size: .7rem; }

  /* Hero sections */
  .page-hero { padding: 100px 0 48px !important; }

  /* General grid collapse */
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════
   TOUCH IMPROVEMENTS
══════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Increase tap targets */
  .sidebar-nav-item, .admin-nav-item { min-height: 44px; }
  .btn, .quiz-option, .resource-link { min-height: 44px; }
  .nav-toggle { min-width: 44px; min-height: 44px; }

  /* Remove hover states that feel wrong on touch */
  .cmd-card:hover, .stat-block:hover, .feature-card:hover { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════
   VERY SMALL SCREENS (< 380px)
══════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .quiz-links-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .quiz-link-card { padding: 16px 10px !important; }
  .quiz-link-name { font-size: .82rem !important; }
  .admin-stats-grid { grid-template-columns: 1fr !important; }
  .stat-value { font-size: 1.3rem !important; }
  h1 { font-size: clamp(1.4rem, 8vw, 2rem) !important; }
}