/* ═══════════════════════════════════════════════════════════════════════════
   CHRONO OS — GLOBAL RESPONSIVE SYSTEM
   Covers: Phone (≤480) · Tablet (481-768) · Laptop (769-1024) · Desktop · 4K
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── VIGNETTE & DEPTH ───────────────────────────────────────── */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(circle, transparent 50%, rgba(0,0,0,0.4) 150%);
    z-index: 10000;
}

.glass-card, .sidebar-premium, nav, header {
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 10px rgba(255,255,255,0.05);
}

/* ─── CUSTOM CURSOR FIX ──────────────────────────────────────── */
@media (max-width: 1024px) {
  #cur, #cur-ring, .custom-cursor, .cursor-ripple, .cursor-img {
    display: none !important;
  }
  body, * {
    cursor: auto !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   INDEX / LANDING PAGE
   ──────────────────────────────────────────────────────────────── */

/* Tablet + Phone: nav */
@media (max-width: 768px) {
  nav, .nav-bar, header { padding: 14px 20px !important; }
  .nav-links { display: none !important; }
  .nav-cta { font-size: 12px; padding: 8px 14px; }

  /* Hero */
  #robot-wrap { display: none; }
  .hero-inner {
    width: 100% !important;
    text-align: center !important;
    padding: 0 20px !important;
  }
  .hero-h1 { font-size: clamp(30px, 8vw, 52px) !important; }
  .hero-sub { font-size: 15px !important; margin: 16px auto 0 !important; max-width: 90% !important; }
  .hero-actions { justify-content: center !important; flex-direction: column; align-items: center; gap: 10px !important; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { width: 100%; text-align: center; }

  /* Section padding */
  .max { padding: 0 20px !important; }
  #problem { padding: 70px 0 !important; }
  #who { padding: 70px 0 !important; }

  /* Grids: collapse to 1 col */
  .problem-grid { grid-template-columns: 1fr !important; }
  .who-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .who-cards { grid-template-columns: 1fr 1fr !important; }

  /* Tool rows */
  .tool-row { grid-template-columns: 40px 1fr !important; gap: 14px !important; padding: 18px !important; }
  .tool-tag, .tool-arrow { display: none !important; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}

@media (max-width: 480px) {
  .who-cards { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  nav, .nav-bar, header { padding: 12px 16px !important; }
  .hero-h1 { font-size: clamp(26px, 9vw, 40px) !important; }
}

/* ────────────────────────────────────────────────────────────────
   DASHBOARD
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --sidebar-width: 72px !important; }
  .sidebar-premium {
    width: 72px !important;
    padding: 20px 10px !important;
    overflow: visible;
  }
  .sidebar-link { padding: 10px !important; justify-content: center; }
  .sidebar-link span:not(.sidebar-icon) { display: none !important; }
  .sidebar-brand-text, .sidebar-username, .sidebar-email, .sidebar-section-label { display: none !important; }
  .main-content { margin-left: 72px !important; padding: 24px 20px !important; }
}

@media (max-width: 768px) {
  :root { --sidebar-width: 0px !important; }
  .sidebar-premium {
    width: 100% !important;
    height: auto !important;
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    padding: 8px 0 !important;
    z-index: 200 !important;
    border-right: none !important;
    border-top: 1px solid var(--border, #242424) !important;
    overflow: visible;
    overflow-x: auto;
  }
  .sidebar-premium > *:not(.sidebar-link) { display: none !important; }
  .sidebar-link { flex-direction: column; gap: 2px; padding: 6px 10px !important; font-size: 0.65rem; justify-content: center; min-width: 52px; }
  .sidebar-link span:not(.sidebar-icon) { display: block !important; font-size: 0.6rem !important; }
  .main-content { margin-left: 0 !important; padding: 16px 12px 80px !important; }
  
  /* DASHBOARD HEADER REARRANGEMENT */
  .dash-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  .dash-header > div {
    width: 100% !important;
  }
  /* Welcome heading first */
  .dash-header > div:first-child {
    order: 1 !important;
  }
  #welcomeSub { display: none !important; } /* No extra text on mobile */
  
  /* Right side elements (XP, Account) */
  .dash-header > div:last-child {
    order: 2 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  
  /* XP Bar width */
  .dash-header div[style*="width:180px"] {
    width: 100% !important;
    order: 1 !important;
  }
  
  /* Account Info full width */
  .dash-header div[style*="background:var(--bg-glass)"] {
    width: 100% !important;
    order: 2 !important;
    justify-content: flex-start !important;
  }

  /* Section Layout */
  #homeSection {
    display: flex !important;
    flex-direction: column !important;
  }
  .quick-action-bar {
    order: 3 !important;
  }
  
  /* Hide Stat cards on very small screens or keep them? User said "then all the ai features" 
     so I will keep them but maybe stack them */
  #homeSection > div[style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
    order: 4 !important;
  }

  .premium-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
    order: 5 !important;
  }
  
  .glass-card { padding: 18px 12px !important; }
  .feature-icon { font-size: 1.8rem !important; }
  .main-topbar { padding: 12px 16px !important; }
}

@media (max-width: 480px) {
  .premium-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .glass-card { padding: 14px 10px !important; }
  .main-content { padding: 12px 10px 80px !important; }
}

/* ────────────────────────────────────────────────────────────────
   LOGIN & SIGNUP PAGES
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .auth-container, .login-container, .signup-container {
    flex-direction: column !important;
  }
  .auth-left, .login-left, .signup-left {
    display: none !important;
  }
  .auth-right, .login-right, .signup-right {
    width: 100% !important;
    padding: 32px 20px !important;
  }
  .auth-form, .login-form, .signup-form {
    max-width: 100% !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   SLIDEFORGE AI
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sf-layout { flex-direction: column !important; }
  .sf-sidebar { width: 100% !important; max-height: 220px !important; overflow-y: auto; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .sf-main { flex: 1 !important; }
  .answers-container { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .sf-topbar { flex-wrap: wrap; padding: 8px 12px !important; gap: 6px !important; }
  .sf-topbar .sf-title { font-size: 14px !important; }
  .slide-card { padding: 12px !important; }
  .sc-bar { flex-wrap: wrap; gap: 4px; }
  .imgs-row { flex-direction: column !important; }
  .sc-img-wrap { width: 100% !important; }
}

/* ────────────────────────────────────────────────────────────────
   QUESTION PAPER SOLVER
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .qps-layout { flex-direction: column !important; }
  .qps-sidebar { width: 100% !important; max-height: 200px; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1); overflow-y: auto; }
  .qps-content { width: 100% !important; padding: 12px !important; }
}

/* ────────────────────────────────────────────────────────────────
   YT NOTES STUDIO
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ytn-layout { flex-direction: column !important; }
  .ytn-left, .ytn-right { width: 100% !important; }
}

/* ────────────────────────────────────────────────────────────────
   MINDMAP GENERATOR
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mm-topbar { flex-wrap: wrap; padding: 8px 12px !important; gap: 6px !important; }
  .mm-canvas-area { height: calc(100vh - 120px) !important; }
}

/* ────────────────────────────────────────────────────────────────
   EDUVISION AI
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ev-layout { flex-direction: column !important; }
  .ev-sidebar { width: 100% !important; max-height: 160px; overflow-y: auto; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .ev-content { padding: 12px !important; }
}

/* ────────────────────────────────────────────────────────────────
   STUDY ARENA
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .arena-header { flex-wrap: wrap; padding: 10px 14px !important; gap: 6px !important; }
  .arena-grid { grid-template-columns: 1fr !important; }
  .q-card { padding: 14px !important; }
}

/* ────────────────────────────────────────────────────────────────
   FLASHCARDS GENERATOR
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .fc-layout { flex-direction: column !important; }
  .fc-sidebar { width: 100% !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .card-display { width: 90vw !important; height: 200px !important; }
}

/* EduVision Mobile Sidebar */
@media (max-width: 768px) {
  #sb {
    position: fixed !important;
    top: 58px !important;
    left: -100% !important;
    width: 252px !important;
    height: calc(100vh - 58px) !important;
    transition: 0.3s !important;
    z-index: 1000 !important;
    background: #000 !important;
    border-right: 1px solid #333 !important;
  }
  #sb.open { left: 0 !important; }
  .burger { display: flex !important; }
}

/* ────────────────────────────────────────────────────────────────
   GLOBAL UTILITY — applies to ALL pages
   ──────────────────────────────────────────────────────────────── */

/* Mobile Nav Toggle Button Styling */
.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 210;
}

@media (max-width: 768px) {
  .mobile-nav-toggle {
    display: flex;
  }
}

.mobile-nav-toggle span {
  width: 24px;
  height: 2px;
  background: white;
  border-radius: 10px;
  transition: all 0.3s linear;
  position: relative;
  transform-origin: 1px;
}

.mobile-nav-toggle.active span:nth-child(1) { transform: rotate(45deg); }
.mobile-nav-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.active span:nth-child(3) { transform: rotate(-45deg); }

/* Mobile Menu Active State */
.nav-links.mobile-active {
  display: flex !important;
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 70%;
  background: #0c0c0c;
  flex-direction: column;
  padding: 80px 40px;
  z-index: 205;
  border-left: 1px solid var(--border);
  box-shadow: -10px 0 30px rgba(0,0,0,0.5);
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* Touch — bigger tap targets */
@media (hover: none) and (pointer: coarse) {
  button, a, input[type="button"], input[type="submit"], label[for] {
    min-height: 44px;
  }
  input, select, textarea { font-size: 16px !important; } /* prevent iOS zoom */
}

/* Landscape phone */
@media (max-width: 812px) and (orientation: landscape) {
  .hero-h1 { font-size: clamp(22px, 5vw, 36px) !important; }
  #hero { height: auto; min-height: 100vh; }
}

/* Large screens / digital boards */
@media (min-width: 1920px) {
  .max { max-width: 1600px !important; }
  body { font-size: 16px; }
  .section-h { font-size: clamp(48px, 4vw, 80px) !important; }
}