/* ===== MOBILE RESPONSIVENESS FIXES ===== */
@media (max-width: 480px) {

  /* Top nav — prevent overflow */
  .top-nav { padding: 10px 12px; gap: 8px; }
  .top-nav > div[style*="font-size:17px"] { font-size: 15px !important; }

  /* Streak widget — smaller on mobile */
  .streak-widget {
    padding: 5px 10px !important;
    border-radius: 14px !important;
  }
  .streak-emoji { font-size: 15px !important; }
  .streak-days { font-size: 11px !important; }
  .streak-coins { font-size: 10px !important; }

  /* Dashboard hero card */
  .dash-hero { padding: 20px 16px !important; }
  .dash-hero-name { font-size: 20px !important; }

  /* Dash stats 2 col stays, but smaller padding */
  .dash-stat-card { padding: 12px !important; }
  .dash-stat-num { font-size: 22px !important; }

  /* feat-page full width */
  .feat-page { padding: 12px !important; }

  /* Calculator — tighter buttons on small screens */
  .cbtn { padding: 14px 4px !important; font-size: 15px !important; border-radius: 10px !important; }
  .calc-result { font-size: 36px !important; }
  .calc-display { padding: 16px !important; }

  /* Calendar year grid — 2 col on small screens */
  #yearCalGrid { grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }

  /* Profile card */
  .profile-row { padding: 11px 0 !important; }
  .profile-label { font-size: 12px !important; }

  /* Attendance ring size */
  .att-ring-wrap { width: 120px !important; height: 120px !important; }

  /* Notes/PYQ grid */
  .notes-grid, .pyq-grid { grid-template-columns: 1fr !important; }

  /* Holiday list */
  .holiday-item { padding: 10px 12px !important; gap: 10px !important; }
  .holiday-date-box { padding: 6px 8px !important; min-width: 40px !important; }

  /* Modal — full width bottom sheet feel */
  .modal-box, [id$="Modal"] > div { max-width: 100% !important; border-radius: 20px 20px 0 0 !important; }

  /* Buttons — full width touch targets */
  button, .cbtn { min-height: 44px; }

  /* Prevent horizontal scroll but allow cards to show fully */
  .page-content { overflow-x: clip !important; }
  .feat-page { overflow-x: visible !important; }
  .att-subject-card { overflow: visible !important; }
  .att-btns { overflow: visible !important; flex-wrap: nowrap; }
}

@media (max-width: 360px) {
  /* Very small phones (Galaxy A series etc) */
  .top-nav { padding: 8px 10px; }
  .cbtn { padding: 11px 2px !important; font-size: 13px !important; }
  .calc-result { font-size: 28px !important; }
  #yearCalGrid { grid-template-columns: repeat(2,1fr) !important; }
  .dash-stat-num { font-size: 18px !important; }
  .streak-widget { font-size: 9px !important; padding: 4px 7px !important; } /* very small — shrink but show */
}

/* Fix top-nav title + streak overflow on all mobile */
@media (max-width: 767px) {
  .top-nav { flex-wrap: nowrap; overflow: hidden; }
  .top-nav > *:nth-child(3) { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
  .top-nav-right { flex-shrink: 0; }

  /* Safe area for notched phones */
  .page-content { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* Larger touch targets */
  .hamburger { min-width: 40px; min-height: 40px; display: flex !important; align-items: center; justify-content: center; }

  /* Profile edit modal — full bottom sheet */
  #profileEditModal > div { border-radius: 24px 24px 0 0 !important; }

  /* Att subject modal */
  #attSubjModal > div { max-width: 100% !important; }
}
/* ===== END MOBILE FIXES ===== */