/*
 * mobile.css — VidyaPrep Complete Mobile Styles
 * Poori website cover hai — Home + UPSC + Practice + Dashboard
 * Usage: <link rel="stylesheet" href="/css/mobile.css"> after app.css
 */

/* ═══════════════════════════════════════════════
   BASE MOBILE RESET (≤ 768px)
═══════════════════════════════════════════════ */
@media (max-width: 768px) {

  body { overflow: auto !important; height: auto !important; font-size: 14px; }
  .app-layout { height: auto !important; min-height: 100vh; overflow: visible !important; }
  .main-content { overflow: visible !important; width: 100%; }
  .content-scroll { overflow: visible !important; padding: 0.875rem !important; }

  /* ── SIDEBAR DRAWER ── */
  .sidebar {
    position: fixed !important;
    top: 0; left: 0;
    width: 82vw !important;
    max-width: 300px !important;
    min-width: unset !important;
    height: 100vh !important;
    z-index: 500;
    transform: translateX(-110%) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.2);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1) !important;
  }
  .sidebar.open { transform: translateX(0) !important; }
  .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 499; backdrop-filter: blur(2px); }
  .sidebar-overlay.show { display: block; }
  .mobile-toggle { display: flex !important; align-items: center; }

  /* ── TOPBAR ── */
  .topbar {
    padding: 0 0.875rem !important;
    height: 52px !important;
    gap: 0.5rem !important;
    position: sticky !important;
    top: 0; z-index: 100;
  }
  .topbar-search { flex: 1 !important; max-width: none !important; height: 34px !important; padding: 0 0.6rem !important; }
  .search-shortcut { display: none !important; }
  .topbar-right { gap: 0.4rem !important; }
  .ai-btn { padding: 0.38rem 0.75rem !important; font-size: 0.78rem !important; }
  .streak-badge { padding: 0.35rem 0.55rem !important; font-size: 0.74rem !important; }

  /* ── DAILY GOAL ── */
  .daily-goal-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    padding: 0.875rem !important;
  }
  .goal-track { width: 100% !important; }

  /* ── HOME BANNER ── */
  .quick-banner {
    padding: 1.1rem !important;
    flex-direction: column !important;
    gap: 0.875rem !important;
    margin-bottom: 1rem !important;
  }
  .quick-banner::before { display: none !important; }
  .banner-title { font-size: 1.15rem !important; }
  .banner-sub { font-size: 0.8rem !important; margin-bottom: 0.75rem !important; }
  .banner-cta { padding: 0.5rem 1rem !important; font-size: 0.85rem !important; display: block !important; text-align: center !important; }
  .banner-stats { display: none !important; }

  /* ── SECTION ── */
  .content-section { margin-bottom: 1.5rem !important; }
  .section-title { font-size: 0.95rem !important; }

  /* ── SUBJECT CARDS (Home) — 3 col ── */
  .subject-cards { grid-template-columns: repeat(3, 1fr) !important; gap: 0.5rem !important; }
  .subject-card { padding: 0.75rem 0.6rem !important; }
  .subject-icon { font-size: 1.25rem !important; margin-bottom: 0.3rem !important; }
  .subject-name { font-size: 0.78rem !important; }
  .subject-qs   { font-size: 0.68rem !important; }

  /* ── BOARD CARDS ── */
  .board-cards { grid-template-columns: 1fr !important; gap: 0.5rem !important; }
  .board-card  { padding: 0.75rem !important; }
  .board-card-icon { width: 36px !important; height: 36px !important; }
  .board-card-name { font-size: 0.85rem !important; }

  /* ── FEATURE TILES ── */
  .feature-row  { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; }
  .feature-tile { padding: 0.9rem !important; }
  .ftile-name   { font-size: 0.85rem !important; }
  .ftile-sub    { font-size: 0.72rem !important; }

  /* ── ALL BOARDS ── */
  .all-boards-grid { gap: 0.4rem !important; }
  .board-pill { padding: 0.38rem 0.75rem !important; font-size: 0.78rem !important; }

  /* ════════════════════════════════
     UPSC LANDING PAGE
  ════════════════════════════════ */

  /* Hero */
  .upsc-hero {
    flex-direction: column !important;
    padding: 20px 16px 18px !important;
    border-radius: 14px !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
  }
  .upsc-hero-l { width: 100% !important; }
  .upsc-hero-l .badge { font-size: 10px !important; padding: 3px 10px !important; margin-bottom: 10px !important; }
  .upsc-hero-l h1 { font-size: 26px !important; line-height: 1.2 !important; margin-bottom: 8px !important; }
  .upsc-hero-l p { font-size: 12px !important; margin-bottom: 14px !important; color: #bfdbfe !important; }
  .upsc-hero-btns { flex-direction: row !important; gap: 8px !important; }
  .upsc-hero-btns .btn-gold,
  .upsc-hero-btns .btn-ghost { flex: 1 !important; text-align: center !important; padding: 11px 10px !important; font-size: 13px !important; border-radius: 9px !important; }
  .upsc-hero-stats { width: 100% !important; grid-template-columns: repeat(4, 1fr) !important; gap: 7px !important; }
  .hstat { padding: 9px 5px !important; border-radius: 9px !important; }
  .hstat-v { font-size: 15px !important; font-weight: 900 !important; }
  .hstat-l { font-size: 9px !important; }

  /* UPSC Sections */
  .usec { margin-bottom: 18px !important; }
  .usec-hd { margin-bottom: 10px !important; }
  .usec-title { font-size: 14px !important; font-weight: 800 !important; }
  .usec-sub { font-size: 11px !important; }
  .see-all { font-size: 11px !important; font-weight: 700 !important; }

  /* Exam strip — horizontal scroll */
  .exam-strip {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 7px !important;
    padding-bottom: 4px !important;
    grid-template-columns: unset !important;
  }
  .exam-strip::-webkit-scrollbar { display: none; }
  .ecard { min-width: 85px !important; flex-shrink: 0 !important; padding: 9px 8px !important; border-radius: 9px !important; }
  .ecard-l { font-size: 8px !important; }
  .ecard-v { font-size: 14px !important; font-weight: 900 !important; }

  /* Subject grid — 2 col */
  .sub-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .scard { padding: 13px 11px !important; border-radius: 11px !important; }
  .scard-icon { font-size: 20px !important; }
  .scard-name { font-size: 12px !important; font-weight: 800 !important; }
  .scard-qs   { font-size: 10px !important; }
  .scard-cta  { font-size: 10px !important; font-weight: 700 !important; }

  /* Features grid — 2 col */
  .feat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .fcard { padding: 13px 11px !important; border-radius: 11px !important; }
  .fcard-icon  { font-size: 18px !important; margin-bottom: 6px !important; }
  .fcard-title { font-size: 12px !important; font-weight: 800 !important; margin-bottom: 3px !important; }
  .fcard-desc  { font-size: 10px !important; margin-bottom: 7px !important; line-height: 1.45 !important; }
  .ftag { font-size: 9px !important; padding: 2px 7px !important; font-weight: 700 !important; }

  /* Books — 1 col */
  .books-grid { grid-template-columns: 1fr !important; gap: 7px !important; }
  .bcard { padding: 11px 13px !important; border-radius: 9px !important; align-items: center !important; }
  .bspine { width: 4px !important; min-height: 44px !important; }
  .btype   { font-size: 9px !important; }
  .btitle  { font-size: 12px !important; font-weight: 700 !important; }
  .bauthor { font-size: 10px !important; }
  .bdl     { font-size: 10px !important; padding: 2px 8px !important; margin-top: 5px !important; }

  /* Roadmap — 1 col */
  .road-grid { grid-template-columns: 1fr !important; gap: 7px !important; }
  .rcard { padding: 13px !important; border-radius: 11px !important; gap: 11px !important; }
  .rstep { width: 28px !important; height: 28px !important; font-size: 12px !important; flex-shrink: 0 !important; }
  .rcard h4 { font-size: 12px !important; font-weight: 800 !important; margin-bottom: 3px !important; }
  .rcard p  { font-size: 11px !important; line-height: 1.5 !important; }

  /* UPSC CTA */
  .upsc-cta { padding: 24px 16px !important; border-radius: 13px !important; margin-bottom: 20px !important; }
  .upsc-cta h2 { font-size: 18px !important; margin-bottom: 6px !important; }
  .upsc-cta p  { font-size: 12px !important; margin-bottom: 14px !important; }
  .upsc-cta .btn-gold { display: block !important; text-align: center !important; padding: 13px !important; font-size: 14px !important; border-radius: 9px !important; }

  /* ════════════════════════════════
     UPSC PRACTICE PAGE (up3)
  ════════════════════════════════ */

  .up3 .ph { padding: 0 12px !important; flex-wrap: nowrap !important; gap: 8px !important; }
  .up3 .ph-title { font-size: 14px !important; }
  .up3 .ph-actions .btn:not(.btn-primary) { display: none !important; }
  .up3 .ph-actions .btn-primary { display: inline-flex !important; padding: 7px 12px !important; font-size: 12px !important; }

  .up3 .stat-strip { display: none !important; }

  .up3 .resume-banner { margin: 10px 12px !important; padding: 13px !important; flex-direction: column !important; align-items: flex-start !important; gap: 9px !important; }
  .up3 .rb-text h3 { font-size: 13px !important; }
  .up3 .rb-text p  { font-size: 11px !important; }
  .up3 .resume-banner > div:last-child { width: 100% !important; display: flex !important; gap: 8px !important; }
  .up3 .rb-btn { flex: 1 !important; text-align: center !important; padding: 9px 8px !important; font-size: 12px !important; }

  .up3 .main-wrap { padding: 12px 12px 100px !important; }

  .up3 .sec-tabs { display: flex !important; overflow-x: auto !important; scrollbar-width: none !important; gap: 2px !important; width: 100% !important; padding-bottom: 2px !important; }
  .up3 .sec-tabs::-webkit-scrollbar { display: none; }
  .up3 .sec-tab { white-space: nowrap !important; padding: 7px 14px !important; font-size: 12px !important; flex-shrink: 0 !important; }

  .up3 .subj-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .up3 .content-split,
  .up3 .content-split.has-panel { grid-template-columns: 1fr !important; }
  .up3 .chapter-panel { position: static !important; max-height: none !important; display: none !important; }
  .up3 .chapter-panel.open { display: flex !important; }

  .up3 .q-card { padding: 16px 13px !important; }
  .up3 .q-text { font-size: 14px !important; line-height: 1.65 !important; }
  .up3 .option { padding: 10px 11px !important; gap: 9px !important; }
  .up3 .opt-key { width: 26px !important; height: 26px !important; font-size: 11px !important; }
  .up3 .opt-text { font-size: 13px !important; }

  .up3 .overlay { padding: 12px !important; align-items: flex-end !important; }
  .up3 .modal { border-radius: 20px 20px 0 0 !important; max-height: 92vh !important; }
  .up3 .modal-head { padding: 16px 18px 12px !important; }
  .up3 .modal-title { font-size: 16px !important; }
  .up3 .modal-body { padding: 14px 18px 28px !important; }

  .up3 .results-card { padding: 26px 14px !important; }
  .up3 .res-percent  { font-size: 54px !important; }
  .up3 .res-stats    { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .up3 .res-actions .btn { flex: 1 !important; justify-content: center !important; font-size: 12px !important; }

  /* ════════════════════════════════
     UPSC DASHBOARD (vp-dash)
  ════════════════════════════════ */

  .vp-dash { padding: 12px 12px 80px !important; }
  .vp-dash .topbar { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 14px !important; height: auto !important; padding: 12px 0 !important; position: static !important; }
  .vp-dash .user-info h1 { font-size: 17px !important; }
  .vp-dash .user-info p  { font-size: 12px !important; }
  .vp-dash .topbar-right { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; width: 100% !important; }
  .vp-dash .pill { font-size: 11px !important; padding: 5px 10px !important; }

  .vp-dash .metrics-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .vp-dash .metrics-grid .metric:last-child { grid-column: span 2 !important; }
  .vp-dash .metric { padding: 12px 13px !important; }
  .vp-dash .metric-val { font-size: 22px !important; }

  .vp-dash .g2,
  .vp-dash .g3,
  .vp-dash .g3-l { grid-template-columns: 1fr !important; gap: 10px !important; }
  .vp-dash .g3 > .card:last-child { grid-column: span 1 !important; }
  .vp-dash .card { padding: 14px !important; }

  .vp-dash .sc-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .vp-dash .sc { padding: 11px !important; }
  .vp-dash .sc-nm    { font-size: 11px !important; }
  .vp-dash .sc-score { font-size: 20px !important; }

  .vp-dash .ptabs { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; }
  .vp-dash .ptabs::-webkit-scrollbar { display: none; }

  .vp-dash .todo-form { flex-wrap: wrap !important; gap: 6px !important; }
  .vp-dash .ti   { width: 100% !important; flex: none !important; }
  .vp-dash .ts   { flex: 1 !important; min-width: 0 !important; }

  .vp-dash .mov { padding: 0 !important; align-items: flex-end !important; }
  .vp-dash .mod { border-radius: 20px 20px 0 0 !important; max-height: 92vh !important; max-width: 100% !important; }

  .vp-dash .cw    { height: 170px !important; }
  .vp-dash .cw-sm { height: 110px !important; }
  .vp-dash .cw-lg { height: 190px !important; }

  .vp-dash .exg { grid-template-columns: 1fr 1fr !important; }
  .vp-dash .exv { font-size: 12px !important; }
  .vp-dash .exl { font-size: 9px !important; }

  .vp-dash .rscore { font-size: 42px !important; }
  .vp-dash .pyq-c  { display: none !important; }

  #allSubjGrid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .vp-dash .chg { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════
   SMALL PHONES (≤ 400px)
═══════════════════════════════════════════════ */
@media (max-width: 400px) {

  .content-scroll { padding: 0.625rem !important; }

  .subject-cards  { grid-template-columns: repeat(2, 1fr) !important; }
  .feature-row    { grid-template-columns: 1fr 1fr !important; }
  .banner-title   { font-size: 1rem !important; }

  /* UPSC hero */
  .upsc-hero-l h1 { font-size: 22px !important; }
  .upsc-hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .hstat-v { font-size: 17px !important; }

  /* Features — hide desc */
  .fcard-desc { display: none !important; }
  .fcard-title { font-size: 11px !important; }

  /* Dashboard */
  .vp-dash .metrics-grid { grid-template-columns: 1fr !important; }
  .vp-dash .metrics-grid .metric:last-child { grid-column: span 1 !important; }
  .vp-dash .sc-grid { grid-template-columns: 1fr !important; }
  #allSubjGrid { grid-template-columns: 1fr !important; }
  .vp-dash .user-info h1 { font-size: 15px !important; }
  .vp-dash .rscore { font-size: 36px !important; }

  /* Practice */
  .up3 .main-wrap { padding: 10px 10px 100px !important; }
  .up3 .q-text { font-size: 13px !important; }
  .up3 .res-percent { font-size: 46px !important; }
}

/* ═══════════════════════════════════════════════
   SAFE AREA — iPhone notch / home bar
═══════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-bottom)) {
  .content-scroll,
  .up3 .main-wrap,
  .up3 .session-view,
  .vp-dash {
    padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
}