/* ============================================ IntelliPlan — Mobile UI Merged from both versions Add in your base template Load AFTER all other stylesheets. ============================================ */ /* ── Global: box model & tap targets ─────────────────────── */ html { -webkit-text-size-adjust: 100%; box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } button, a, [role="button"], input[type="button"], input[type="submit"], label[for], summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Keep custom HTML dropdowns below nav at all times */ select { position: relative; z-index: 1; } /* ══════════════════════════════════════════════════════════════ MOBILE (≤ 768px) ══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── No horizontal scroll ─────────────────────────────── */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; } body { padding-top: 62px !important; overflow-x: hidden; } body.mobile-nav-open { overflow: hidden; } /* ════════════════════════════════════════════════════════ HEADER / TOP BAR Fully opaque so nothing bleeds through. ════════════════════════════════════════════════════════ */ header, .top-bar { background-color: var(--bg-card) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; min-height: 62px; height: auto !important; padding: 10px 14px !important; display: flex !important; align-items: center !important; gap: 10px; z-index: 99999 !important; box-shadow: 0 1px 0 var(--border); isolation: isolate; } #mainNav { background-color: var(--bg-card) !important; border-bottom: 1px solid var(--border) !important; } .header-right { gap: 8px !important; } .header, .top-bar { padding: 8px 12px !important; } .header h1, .top-bar h1 { font-size: 1.2rem !important; } /* ════════════════════════════════════════════════════════ MAIN NAV — hamburger + slide-in side drawer. Hamburger visible on every page; drawer slides from the left. ════════════════════════════════════════════════════════ */ #mobileMenuBtn { display: flex !important; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); font-size: 1.05rem; line-height: 1; cursor: pointer; transition: background 0.14s, color 0.14s, border-color 0.14s; } #mobileMenuBtn:hover, #mobileMenuBtn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); border-color: var(--border-accent); } #mainNav { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: auto !important; width: min(82vw, 320px) !important; height: 100dvh !important; max-height: none !important; padding: 78px 14px calc(18px + env(safe-area-inset-bottom)) !important; margin: 0 !important; gap: 4px !important; background: var(--bg-card) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-right: 1px solid var(--border) !important; border-bottom: none !important; box-shadow: 12px 0 36px rgba(0,0,0,0.18) !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; transform: translateX(-100%) !important; opacity: 1 !important; pointer-events: none !important; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; z-index: 100001 !important; isolation: isolate; } #mainNav.mobile-open { transform: translateX(0) !important; pointer-events: auto !important; } /* Drawer backdrop */ #mobileNavBackdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 100000; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } #mobileNavBackdrop.mobile-open { opacity: 1; pointer-events: auto; } /* Drawer items stack vertically with comfortable tap targets */ #mainNav .nav-group { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 2px !important; width: 100% !important; } #mainNav .nav-divider { display: block !important; width: 100% !important; height: 1px !important; background: var(--border) !important; margin: 10px 0 !important; } #mainNav .nav-tab, #mainNav .dropdown-toggle { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 46px !important; padding: 11px 14px !important; font-size: 0.95rem !important; font-weight: 500 !important; border-radius: 12px !important; white-space: nowrap !important; text-align: left !important; gap: 12px !important; } #mainNav .nav-tab-icon { width: 20px !important; height: 20px !important; flex-shrink: 0 !important; margin: 0 !important; } #mainNav .nav-dropdown { position: relative !important; display: flex !important; flex-direction: column !important; } #mainNav .nav-dropdown .dropdown-panel { position: static !important; width: 100% !important; min-width: 0 !important; margin: 4px 0 0 30px !important; padding: 4px 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; opacity: 1 !important; pointer-events: auto !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } #mainNav .nav-dropdown .dropdown-item { width: 100% !important; justify-content: flex-start !important; min-height: 40px !important; padding: 8px 14px !important; border-radius: 10px !important; font-size: 0.88rem !important; color: var(--text-secondary) !important; } #mainNav .nav-dropdown::before { display: none !important; } #mainNav .chevron { margin-left: auto; } /* Page content select/input safety */ main select, main input, main textarea, .page-content select, .page-content input, .page-content textarea { position: relative; z-index: 1 !important; isolation: auto; } /* HTML dropdowns in body stay below nav */ main .dropdown-panel, .page-content .dropdown-panel, main [role="listbox"], .page-content [role="listbox"] { z-index: 100 !important; } /* Sidebar -> bottom nav */ .sidebar, .side-nav, nav.sidebar { background-color: var(--bg-surface, #111111) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; position: fixed !important; bottom: 0 !important; top: auto !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 60px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-around !important; z-index: 99999 !important; padding: 0 8px !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; overflow: hidden !important; isolation: isolate !important; transform: translateZ(0) !important; } .sidebar .nav-label, .side-nav .nav-label { display: none !important; } /* ════════════════════════════════════════════════════════ PLANI ════════════════════════════════════════════════════════ */ #planiBot, #planiWrap { position: fixed !important; right: 14px !important; bottom: 14px !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; max-width: calc(100vw - 28px) !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: flex-end !important; gap: 8px !important; z-index: 9999 !important; transform: none !important; margin: 0 !important; padding: 0 !important; } #planiRobot { width: 56px !important; height: 56px !important; } #planiBot > *, #planiWrap > * { pointer-events: auto !important; transform: none !important; } #planiBubble { pointer-events: auto !important; position: relative !important; display: inline-flex !important; align-self: flex-end !important; width: auto !important; max-width: calc(100vw - 28px) !important; z-index: 10001 !important; transform: none !important; margin: 0 !important; scale: 0.88; transform-origin: bottom right; } #planiChat { position: fixed !important; right: 14px !important; bottom: 76px !important; left: auto !important; top: auto !important; width: min(360px, calc(100vw - 28px)) !important; max-height: min(70dvh, 560px) !important; pointer-events: auto !important; z-index: 10000 !important; transform: none !important; margin: 0 !important; border-radius: 16px !important; } /* ════════════════════════════════════════════════════════ LANDING PAGE ════════════════════════════════════════════════════════ */ .hero-wrap { padding-top: 72px !important; } .hero { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .hero-preview { display: none !important; } .hero-title { font-size: 2rem !important; } .hero-subtitle { font-size: 0.97rem !important; } .hero-actions, .hero-mini-actions, .cta-actions { flex-direction: column !important; align-items: stretch !important; gap: 0.6rem !important; width: 100%; } .hero-actions a, .hero-btn, .mini-btn, .cta-btn { width: 100% !important; text-align: center !important; display: block !important; } .reviews-section { padding-left: 0 !important; padding-right: 0 !important; } .reviews-track-wrap { width: 100vw !important; margin-left: calc(-50vw + 50%) !important; } .reviews-fade { width: 48px !important; } /* Stats: 2-col grid */ .stats-strip { padding: 0 0.75rem !important; } .stats-strip-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1px !important; padding: 0 !important; background: var(--border) !important; border-radius: var(--r-xl) !important; overflow: hidden !important; } .stat-divider { display: none !important; } .stat-item { background: var(--bg-card) !important; padding: 1rem 0.5rem !important; align-items: center !important; } .stat-number { font-size: 1.7rem !important; } .stat-label { font-size: 0.74rem !important; } /* Reviews cards */ .review-card { width: 220px !important; } .reviews-fade { width: 36px !important; } /* Demo panel */ .demo-video-outer { margin: 0 0.75rem 0.75rem !important; width: calc(100% - 1.5rem) !important; padding-bottom: calc((100% - 1.5rem) * 9 / 16) !important; } /* Sections */ .steps-grid, .comparison-wrap { grid-template-columns: 1fr !important; } .features-grid, .integration-grid { grid-template-columns: 1fr 1fr !important; } /* Mobile sticky CTA */ .mobile-cta-bar { display: grid !important; grid-template-columns: 1fr 0.75fr !important; gap: 0.5rem !important; position: fixed !important; left: 0.75rem !important; right: 0.75rem !important; bottom: 68px !important; z-index: 9998 !important; } .mobile-cta-primary, .mobile-cta-secondary { text-decoration: none; text-align: center; border-radius: 999px; padding: 0.85rem 1rem; font-family: var(--font-ui); font-weight: 800; font-size: 0.9rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); } .mobile-cta-primary { background: var(--accent); color: white; } .mobile-cta-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); } .cta-section { padding-bottom: 5.5rem !important; } .floating-badge { right: 0.5rem; bottom: -14px; font-size: 0.72rem; padding: 0.5rem 0.85rem; } /* ════════════════════════════════════════════════════════ APP / DASHBOARD PAGES ════════════════════════════════════════════════════════ */ main, .main-content, .page-content { max-width: 100% !important; padding-left: 14px !important; padding-right: 14px !important; padding-bottom: 70px !important; margin-left: 0 !important; } .page-header { gap: 12px !important; flex-wrap: wrap !important; } .page-header > div, .page-header button, .page-header a { max-width: 100%; } .page-header .btn-primary, .page-header .btn-secondary { flex: 1 1 100% !important; min-height: 46px; padding: 12px 18px !important; font-size: 0.92rem !important; } /* Global polish on primary/secondary buttons used inside main content */ main .btn-primary, main .btn-secondary, .page-content .btn-primary, .page-content .btn-secondary, .modal-content .btn-primary, .modal-content .btn-secondary { min-height: 44px; padding: 12px 18px !important; font-size: 0.9rem !important; } main .btn-primary:active, main .btn-secondary:active, .page-content .btn-primary:active, .page-content .btn-secondary:active { transform: translateY(0) scale(0.985); transition: transform 0.08s ease; } #dashColumns { grid-template-columns: 1fr !important; gap: 18px !important; } #exportBar, #savedScheduleBanner { align-items: stretch !important; } #exportBar > div, #savedScheduleBanner > div { width: 100%; } #exportBar > div:last-child, #savedScheduleBanner > div:last-child { flex-direction: column; align-items: stretch !important; } #exportBar button, #savedScheduleBanner button { width: 100%; } .scheduler-panel { padding: 16px !important; } .scheduler-inputs, .custom-tasks-wrap, #savePanel { flex-direction: column !important; align-items: stretch !important; width: 100%; } .input-group, .custom-tasks-wrap input, #savePanel input, #savePanel button, #generateBtn { width: 100% !important; max-width: 100% !important; } .time-block { display: grid !important; grid-template-columns: 1fr auto; gap: 8px !important; } .time-slot { grid-column: 1 / -1; min-width: 0 !important; white-space: normal !important; } .block-content { min-width: 0; } .block-title, .card-title, .overview-text { overflow-wrap: anywhere; } .day-header { gap: 8px; align-items: flex-start !important; } .day-hours { white-space: nowrap; } .schedule-day, .day-block { flex-direction: column !important; width: 100% !important; } .card, .schedule-card, .assignment-card, .block-card { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .dashboard-grid, .stats-grid { grid-template-columns: 1fr !important; } table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } /* Inputs — prevent iOS zoom */ input, select, textarea { font-size: 16px !important; width: 100%; max-width: 100%; } .btn-group, .action-buttons { flex-wrap: wrap; gap: 8px; } .btn-group .btn, .action-buttons button { flex: 1 1 auto; min-width: 0; white-space: nowrap; } /* ════════════════════════════════════════════════════════ MODALS — above nav and plani ════════════════════════════════════════════════════════ */ #assignmentModal, #newTaskModal, #editTaskModal, #integrationsModal, #feedbackModal, #silenceModal, .modal-overlay { padding: 10px !important; align-items: flex-start !important; overflow-y: auto !important; z-index: 100000 !important; } #assignmentModal > div, #newTaskModal > div, #editTaskModal > div, #integrationsModal > div, #feedbackModal > div, #silenceModal > div, .modal-dialog, .modal-content { width: 100% !important; max-width: none !important; max-height: calc(100dvh - 20px) !important; margin: 0 !important; padding: 1.1rem !important; overflow-y: auto !important; border-radius: 16px !important; } /* ════════════════════════════════════════════════════════ LOGIN PAGE ════════════════════════════════════════════════════════ */ .login-card { padding: 1.4rem !important; border-radius: 16px !important; } .login-card .account-buttons { display: flex !important; flex-direction: column !important; gap: 12px !important; } .login-card .btn-primary, .login-card .btn-secondary { display: block !important; width: 100% !important; max-width: 100% !important; text-align: center !important; flex: none !important; position: relative !important; z-index: 10 !important; touch-action: manipulation !important; padding: 12px 0 !important; } .login-card .divider { display: flex; align-items: center; gap: 12px; margin: 1rem 0; } .login-card .divider span { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; } .login-card .guest-options .btn-guest { display: flex !important; align-items: center !important; gap: 14px !important; padding: 16px 20px !important; border-radius: 14px !important; border: 1px solid var(--border) !important; background: var(--bg-card) !important; color: var(--text-primary) !important; text-decoration: none !important; box-shadow: var(--shadow) !important; width: 100% !important; box-sizing: border-box !important; transition: all 0.2s !important; } .login-card .guest-options .btn-guest:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .login-card .btn-guest .icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .login-card .btn-guest .text .title { font-size: 0.95rem; font-weight: 600; margin-bottom: 2px; } .login-card .btn-guest .text .subtitle { font-size: 0.78rem; color: var(--text-muted); } .login-card .btn-guest .arrow { margin-left: auto; color: var(--text-muted); font-size: 0.9rem; } .login-card .btn-guest.canvas:hover { border-color: #e66000 !important; box-shadow: 0 8px 24px rgba(230, 96, 0, 0.15) !important; } .login-card .btn-guest.studentvue:hover { border-color: #22c55e !important; box-shadow: 0 8px 24px rgba(34, 197, 94, 0.15) !important; } .login-card .btn-guest.schoology:hover { border-color: #5865F2 !important; box-shadow: 0 8px 24px rgba(88, 101, 242, 0.15) !important; } .login-card .btn-google { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 12px !important; border-radius: var(--r-md) !important; border: 1px solid var(--border-strong) !important; background: #fff !important; color: #3c4043 !important; font-family: var(--font-ui) !important; font-size: 0.87rem !important; font-weight: 600 !important; text-decoration: none !important; margin-bottom: 1rem !important; width: 100% !important; box-sizing: border-box !important; box-shadow: var(--shadow) !important; transition: all 0.16s !important; } .login-card .btn-google:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important; transform: translateY(-1px) !important; } /* ════════════════════════════════════════════════════════ MISC ════════════════════════════════════════════════════════ */ .section, .container, .content-wrapper { padding: 12px !important; } #chatbot-toggle, .chat-fab, .floating-chat-btn { bottom: 70px !important; right: 16px !important; z-index: 9150 !important; } #chatbot-window, .chat-window { position: fixed !important; bottom: 60px !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; height: 70vh !important; border-radius: 12px 12px 0 0 !important; z-index: 9150 !important; } } /* end @media (max-width: 768px) */ /* ── Very small phones (< 390px) ─────────────────────────── */ @media (max-width: 390px) { .card, .assignment-card { padding: 10px !important; } .priority-badge, .difficulty-badge { font-size: 0.65rem !important; } #planiBubble { scale: 0.80 !important; } .stat-number { font-size: 1.45rem !important; } .review-card { width: 190px !important; } .hero-title { font-size: 1.75rem !important; } } /* ── Reduced motion ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .reviews-track { animation: none !important; } }