/* IBD Dashboard — Mobile Nav and Responsive */
/* ─────────────────────────────────────────────
   33. MOBILE BOTTOM NAV (base — hidden on desktop)
   ───────────────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-top: 0.5px solid var(--border-card);
  z-index: 200;
  justify-content: space-evenly;
  align-items: center;
}

/* ─────────────────────────────────────────────
   34. MOBILE — max-width 700px
   ───────────────────────────────────────────── */
@media (max-width: 700px) {
  .sidebar             { display: none; }
  .mobile-bottom-nav   { display: flex !important; }
  .main                { margin-left: 0; width: 100%; padding-bottom: 90px; background: var(--bg-page); }

  /* Top bar */
  .page-topbar         { padding: 12px 14px 0; }
  .page-topbar-row     { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-header h1      { font-size: 18px; }
  .page-header p       { font-size: 12px; }

  /* Tabs */
  .ytabs               { flex-wrap: wrap; gap: 6px; }
  .ytab                { padding: 7px 14px; font-size: 13px; border-radius: 99px; }
  .stab                { padding: 10px 16px; font-size: 13px; }

  /* Page content */
  .page-content        { padding: 12px 14px; padding-bottom: 100px; }

  /* Stats */
  .sg                  { grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 16px; }
  .stat                { padding: 14px; gap: 12px; border-radius: 12px; }
  .stat-icon           { width: 40px; height: 40px; font-size: 20px; border-radius: 10px; }
  .sl                  { font-size: 11px; margin-bottom: 4px; }
  .sv                  { font-size: 26px; }

  /* Class cards */
  .cg                  { grid-template-columns: 1fr; gap: 10px; }
  .cc                  { padding: 16px; border-radius: 14px; border-left-width: 4px; }
  .cn                  { font-size: 15px; }
  .cm                  { font-size: 11px; padding: 3px 9px; }
  .cc-meta             { font-size: 12px; margin-bottom: 10px; }
  .cp                  { font-size: 11px; padding: 4px 10px; }
  .cpills              { gap: 5px; margin-bottom: 10px; }
  .cc-foot             { padding-top: 10px; margin-top: 6px; }
  .cc-stu-info         { font-size: 11px; gap: 6px; }
  .noc                 { font-size: 12px; }
  .adc                 { font-size: 13px; }

  /* Detail panel */
  .det                 { border-radius: 14px; }
  .dh                  { padding: 14px; }
  .dt                  { font-size: 15px; }
  .ds                  { font-size: 12px; }
  .ctab                { padding: 12px 16px; font-size: 13px; }
  .ctedit              { padding: 12px 16px; font-size: 13px; }
  .ia                  { padding: 12px 14px; gap: 10px; }
  .il                  { font-size: 13px; }
  .ib                  { padding: 8px 16px; font-size: 12px; }
  table                { font-size: 13px; }
  th                   { padding: 10px 12px; font-size: 12px; }
  td                   { padding: 10px 12px; }
  th.hm, td.hm         { display: none; }
  .badge               { font-size: 12px; padding: 4px 10px; }
  .ht                  { font-size: 12px; padding: 12px 14px; }

  /* Modals — slide up from bottom */
  .modal-overlay       { align-items: flex-end; }
  .modal               { border-radius: 20px 20px 0 0; max-width: 100%; margin: 0; padding: 24px 20px; }
  .modal h3            { font-size: 16px; }
  .modal p             { font-size: 13px; }
  .modal-field label   { font-size: 13px; }
  .modal-field input,
  .modal-field select  { padding: 12px; font-size: 14px; border-radius: 10px; }
  .modal-save          { padding: 13px; font-size: 14px; border-radius: 10px; }
  .modal-cancel        { padding: 13px 20px; font-size: 14px; border-radius: 10px; }

  /* Wizard */
  .wiz-box             { max-width: 100%; border-radius: 0; height: 100vh; max-height: 100vh; }
  .wiz-field input,
  .wiz-field select    { padding: 12px; font-size: 14px; }
  .wiz-btn-next,
  .wiz-btn-back,
  .wiz-btn-launch      { padding: 13px 24px; font-size: 14px; }

  /* Room modal */
  .rm-modal            { border-radius: 20px 20px 0 0; max-width: 100%; margin: 0; padding: 24px 20px; }
  .rm-modal-bg         { align-items: flex-end; }
  .mf input, .mf select { padding: 12px; font-size: 14px; }
  .msave, .mcancel     { padding: 13px; font-size: 14px; }

  /* Calendar */
  .cal-day             { min-height: 48px; padding: 4px; }
  .cal-day-num         { font-size: 13px; }
  .cal-tag             { font-size: 9px; padding: 2px 5px; }

  /* Room tracker */
  .rt-topbar           { padding: 12px 14px; }
  .rt-addbtn           { padding: 10px 18px; font-size: 13px; }

  /* Bottom nav — floating card */
  .mobile-bottom-nav   { padding: 8px 12px 20px; gap: 0; margin: 0 10px 10px; border-radius: 20px; border: 0.5px solid var(--border-card); box-shadow: 0 4px 20px rgba(0,0,0,0.1); border-top: none; }
  .mobile-bottom-nav > div { padding: 6px 8px; flex: 1; justify-content: center; border-radius: 12px; }
  .mobile-bottom-nav i { font-size: 24px; }
  .mobile-bottom-nav span { font-size: 11px; margin-top: 2px; }

  /* Filters */
  .filters             { gap: 10px; }
  .fld label           { font-size: 13px; }
  .fld select          { padding: 10px 14px; font-size: 13px; }

  /* Semester cards */
  .sem-card            { padding: 20px; }
  .sem-card h3         { font-size: 15px; }
  .sem-card p          { font-size: 13px; }
  .sem-action-btn      { padding: 12px 20px; font-size: 13px; }

  /* Login — stack vertically on mobile */
  .login-wrap          { align-items: stretch; }
  .login-card          { flex-direction: column; }
  .login-left          { flex: 0 0 220px; padding: 28px 24px; align-items: center; justify-content: center; text-align: center; }
  .login-left-title    { font-size: 26px; }
  .login-left-logo     { margin: 0 auto 14px; }
  .login-left-tagline  { display: none; }
  .login-right         { flex: 1; padding: 28px 24px; overflow-y: auto; }
  .login-box           { max-width: 100%; }
  .login-logo h2       { font-size: 22px; }
  .field input         { padding: 14px 16px; font-size: 15px; border-radius: 12px; }
  .login-btn           { padding: 15px; font-size: 15px; border-radius: 12px; }
}