/* Phones (owner, 2026-10-31: replaces the forced desktop view). Below 760 px wide the sidebar becomes a
   bottom tab bar (Home, Professors, Emails, Me), the top bar gets compact and every screen is one column. */
@media (max-width: 760px) {
  /* ---- App shell ---- */
  /* The page itself scrolls on phones (the desktop body is fixed at 100vh with overflow hidden) */
  body { height: auto; min-height: 100vh; overflow: visible; }
  .app-layout { flex-direction: column; height: auto; min-height: 100vh; width: 100%; }
  .main-content { height: auto; min-height: 100vh; overflow: visible; }
  .tab-content-container { padding: 0.9rem 0.85rem calc(84px + env(safe-area-inset-bottom)); overflow: visible; }

  .sidebar, .sidebar.collapsed {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1000;
    width: 100%; height: auto; padding: 4px 4px calc(6px + env(safe-area-inset-bottom));
    flex-direction: row; border-right: none; border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .sidebar-header, .nav-item-admin, .nav-divider { display: none; }
  .sidebar-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; width: 100%; padding: 0; margin: 0; }
  .sidebar-nav .nav-item { flex-direction: column; justify-content: center; gap: 3px; min-height: 54px; padding: 4px 2px; margin: 0; border-radius: 10px; font-size: 0.72rem; text-align: center; }
  .sidebar-nav .nav-item i { font-size: 1.05rem; margin: 0; }
  .sidebar-nav .nav-item .nav-label { display: block; font-size: 0.72rem; }
  .sidebar-nav .nav-dot { position: absolute; top: 8px; right: calc(50% - 16px); }

  .topbar { height: 56px; padding: 0 0.75rem; position: sticky; top: 0; z-index: 900; }
  .page-title { font-size: 1.1rem; }
  .topbar-right { gap: 0.35rem; }
  .topbar-right .icon-btn, .topbar-right .notification-badge { width: 36px; height: 36px; }
  #theme-toggle { display: none; }
  /* The account menu lives in the sidebar; on phones it sits at the top bar's right end */
  .topbar-right { padding-right: 42px; }
  .sidebar-account { position: fixed; top: 10px; right: 8px; z-index: 950; padding: 0; border: none; }
  .sidebar-account .account-btn, .sidebar.collapsed .sidebar-account .account-btn { width: auto; padding: 3px; border: none; background: transparent; }
  .sidebar-account .user-pill-name, .sidebar-account .account-chevron { display: none; }
  .sidebar-account .account-menu, .sidebar.collapsed .sidebar-account .account-menu { position: fixed; top: 60px; bottom: auto; right: 8px; left: auto; width: min(280px, calc(100vw - 16px)); min-width: 0; }
  .notif-panel { position: fixed; top: 60px; right: 8px; left: 8px; width: auto; }

  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .form-control { font-size: 16px; } /* no zoom when focusing a field on iPhone */

  /* ---- Sub-menus: the sidebar's become a strip of chips under the top bar ---- */
  .nav-sub, .nav-sub.open { display: none; }
  .topbar { flex: none; }
  .phone-subnav:not([hidden]) { flex: none; display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.55rem 0.85rem; background: var(--bg-surface); border-bottom: 1px solid var(--border-color); position: sticky; top: 56px; z-index: 899; scrollbar-width: none; }
  .phone-subnav::-webkit-scrollbar { display: none; }
  .phone-subnav .nav-sub-item { flex: none; min-height: 36px; padding: 0 0.9rem; border: 1px solid var(--border-color); border-radius: 999px; color: var(--text-secondary); background: var(--bg-surface); font-size: 0.85rem; }
  .phone-subnav .nav-sub-item.active { color: var(--bg-surface); background: var(--text-primary); border-color: var(--text-primary); }
  .phone-subnav .nav-sub-count { background: var(--border-color); color: inherit; }
  .phone-subnav .nav-sub-item.active .nav-sub-count { background: rgba(255, 255, 255, 0.2); }

  /* ---- Home ---- */
  .db-head { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .db-head .btn { width: 100%; justify-content: center; }
  .db-next { padding: 1rem; }
  .db-next .btn { width: 100%; justify-content: center; }
  .db-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .db-stat { padding: 0.75rem; }
  .db-stat-value { font-size: 1.35rem; }
  .db-stat-sub { font-size: 0.72rem; }

  /* ---- Professors ---- */
  .search-form-grid.fp-filter-grid { grid-template-columns: 1fr; }
  .fp-status { width: 100%; }
  .fp-status select { flex: 1; min-width: 0; }
  .fp-toolbar-filters .fp-select-all { margin-left: 0; }
  .fp-toolbar #fp-make-list { width: 100%; justify-content: center; }
  .fp-toolbar .fp-status select { min-width: 0; }
  .fp-toolbar .mail-list-specific-select-wrap { width: 100%; }
  .prof-summary-row { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .prof-summary-left { align-items: flex-start; }
  .prof-avatar-large { display: none; }
  .prof-summary-right { justify-content: flex-start; flex-wrap: wrap; }
  .prof-summary-right .btn-card-manual-mail { flex: 1; justify-content: center; }
  .prof-more-menu { right: 0; }
  /* Cards: less on each one so a screen shows more professors */
  .prof-summary-row { padding: 0.85rem 0.9rem; gap: 0.6rem; }
  .prof-summary-left { gap: 0.65rem; }
  .prof-core-info { gap: 0.25rem; }
  .prof-title-line { gap: 0.35rem; }
  .prof-name-large { font-size: 1.02rem; }
  .badge-position { font-size: 0.7rem; padding: 2px 8px; }
  .prof-meta-line { flex-direction: column; align-items: flex-start; gap: 0.1rem; font-size: 0.84rem; }
  .prof-meta-item { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .prof-meta-item i { display: none; }
  .prof-tags-preview { flex-wrap: nowrap; overflow: hidden; gap: 0.3rem; }
  .prof-preview-tag { font-size: 0.72rem; padding: 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48%; flex: 0 1 auto; }
  .prof-preview-tag:nth-child(n+3) { display: none; }
  .prof-preview-tag-more { display: none; }
  .prof-summary-right { gap: 0.5rem; }
  .prof-expand-btn { padding: 0 0.75rem; min-height: 44px; }
  .prof-expand-btn .expand-label { display: none; }
  .fp-toolbar #fp-make-list { width: auto; }
  .fp-toolbar .fp-status > label { display: none; }
  .fp-welcome > i { display: none; }
  .fp-select-bar { bottom: calc(72px + env(safe-area-inset-bottom)); padding: 8px 8px 8px 14px; }
  .fp-select-count { font-size: 0.88rem; }

  /* ---- Write flow ---- */
  .wf-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .wf-steps li { font-size: 0.8rem; }
  .wf-steps li + li::before { width: 10px; }
  .wf-card { padding: 1rem; }
  .wf-title { font-size: 1.15rem; }
  .wf-list { max-height: none; flex-direction: row; overflow-x: auto; flex-basis: 100%; }
  .wf-row { min-width: 200px; }
  .wf-actions .btn { flex: 1; justify-content: center; }
  .wf-summary { gap: 0.9rem; }

  /* ---- Emails page ---- */
  .me-layout { grid-template-columns: 1fr; min-height: 0; }
  .me-batches { grid-template-columns: 1fr; }
  .me-batch { flex-wrap: wrap; }
  .me-list { max-height: 300px; }
  .me-detail { padding: 1rem; }

  /* ---- Me ---- */
  .settings-page .settings-grid, .settings-page .settings-grid-3 { grid-template-columns: 1fr; }
  .settings-card-footer { flex-wrap: wrap; }
  .settings-card-footer .btn { flex: 1; justify-content: center; }

  /* ---- Dialogs and full-screen screens ---- */
  .su-overlay { padding: 16px 10px; }
  .su-card { padding: 1.25rem; }
  .su-card h1 { font-size: 1.3rem; }
  .cvf-overlay, .upgrade-prompt { padding: 16px 10px; }
  .cvf-card { padding: 1.25rem; }
}

/* Phones: jumping to a section (Me sub-menu) stops below the sticky top bar and chip strip */
@media (max-width: 760px) { .settings-card { scroll-margin-top: 120px; } }