/* ================================================================= * mobile.css — Responsive overrides for Nuance ATS * * Loaded AFTER styles.css and styles-portal.css. Uses only media * queries so desktop rules are untouched. * * Breakpoints: * tablet : max-width 1100px (covers iPad landscape 1024px + narrow laptops) * phone : max-width 640px * * The hamburger menu, mobile nav drawer, and full-screen candidate * modal are toggled via the .is-mobile-nav-open class on and * the data-mobile attribute on the modal scrim. * ================================================================= */ /* ---------- Hamburger button (always rendered, hidden on desktop) -- */ .ats-hamburger { display: none; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-1); background: rgba(255,255,255,0.6); align-items: center; justify-content: center; color: var(--fg-1); flex-shrink: 0; } .ats-hamburger svg { width: 18px; height: 18px; } .ats-hamburger:hover { background: rgba(29,49,64,0.06); } /* Mobile nav backdrop + drawer (only visible at ≤900px when open) */ .ats-mobile-nav-scrim { display: none; position: fixed; inset: 0; background: rgba(29, 49, 64, 0.32); z-index: 8000; } .ats-mobile-nav { position: fixed; top: 0; bottom: 0; left: 0; width: 280px; max-width: 86vw; background: var(--bg-1); z-index: 8001; display: flex; flex-direction: column; padding: 18px 16px; gap: 8px; overflow-y: auto; box-shadow: 0 0 30px rgba(29,49,64,0.18); transform: translateX(-100%); transition: transform .22s ease; } .ats-mobile-nav.is-open { transform: translateX(0); } .ats-mobile-nav-scrim.is-open { display: block; } .ats-mobile-nav__heading { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-4); padding: 6px 6px; margin-top: 6px; } .ats-mobile-nav__item { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 8px; font-size: 14px; color: var(--fg-1); text-align: left; min-height: 44px; /* iOS touch target */ } .ats-mobile-nav__item:hover { background: rgba(29,49,64,0.06); } .ats-mobile-nav__item.is-active { background: rgba(112,135,183,0.18); color: var(--nl-ink); font-weight: 500; } .ats-mobile-nav__close { margin-left: auto; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--fg-3); } .ats-mobile-nav__close:hover { background: rgba(29,49,64,0.06); color: var(--fg-1); } /* ============================================================ * TABLET — ≤ 1100px * Collapse desktop sidebar, tighten paddings, allow horizontal * scroll on dense tables. Covers iPad portrait/landscape and * narrow laptop windows. * ============================================================ */ @media (max-width: 1100px) { .ats-hamburger { display: inline-flex; } .ats-topnav { padding: 8px 12px; gap: 8px; } .ats-topnav__left { gap: 12px; min-width: 0; } .ats-topnav__right { gap: 8px; min-width: 0; } .ats-tabs { gap: 0; } .ats-tab { padding: 5px 8px; font-size: 12.5px; white-space: nowrap; } .ats-search { width: auto; min-width: 0; padding: 6px 8px; } .ats-search input { width: 140px; } .ats-search kbd { display: none; } /* Sidebar becomes the mobile drawer; the original sidebar hides. */ .ats-sidebar { display: none; } .ats-page-head { padding: 16px 16px 12px; flex-direction: column; align-items: flex-start; gap: 10px; } .ats-page-title { font-size: 22px; line-height: 1.15; } .ats-page-sub { font-size: 12.5px; } .ats-page-actions { flex-wrap: wrap; gap: 6px; } .ats-main { -webkit-overflow-scrolling: touch; } /* Job/pipeline metric rows wrap onto multiple rows */ .ats-metric-row { flex-wrap: wrap; gap: 10px; } .ats-metric-row .ats-metric { flex: 1 1 calc(50% - 5px); min-width: 0; } /* Sheet filter bar wraps */ .ats-sheet-filterbar { flex-wrap: wrap; gap: 6px; padding: 10px 14px; } /* ------------------------------------------------------------ * Vertical page scroll fix * On desktop, .ats-kanban / .ats-sheet / .ats-col__body each * `flex: 1` + own scroll, which makes .ats-main never overflow. * At narrow widths the page-head eats the viewport and the content * below it is unreachable. Below, we let these regions size to * their content so .ats-main becomes the single scroll context. * ------------------------------------------------------------ */ .ats-main { overflow-y: auto; -webkit-overflow-scrolling: touch; } .ats-kanban { flex: none; overflow-y: visible; overflow-x: auto; align-items: flex-start; } .ats-col { max-height: none; } .ats-col__body { flex: none; overflow-y: visible; } /* Tables: allow horizontal scroll, let .ats-main do vertical */ .ats-sheet { flex: none; overflow-x: auto; overflow-y: visible; } .ats-sheet table { min-width: 760px; } .ats-sheet thead th:first-child, .ats-sheet tbody td:first-child { padding-left: 14px; } /* Permissions tables horizontal-scroll on tablet */ .ats-perms { padding: 18px 16px 60px; } .ats-perms__people, .ats-perms__matrix { overflow-x: auto; } .ats-perms__matrix table { min-width: 640px; } /* External portal padding shrink */ .ats-portal__top { padding: 10px 16px; } .ats-portal__hero { padding: 20px 16px 16px; } .ats-portal__main { padding: 16px 16px 48px; } .ats-portal__kpis { grid-template-columns: repeat(2, 1fr); } /* Candidate detail modal: drop the desktop min-width */ .ats-modal { width: 92%; min-width: 0; } /* Two-column overview / grids collapse */ .ats-overview-row { grid-template-columns: 1fr; } .ats-submit__grid { grid-template-columns: 1fr; } .ats-ai-card__rubric { grid-template-columns: repeat(2, 1fr); } /* Submit modal sizing */ .ats-submit { width: 95vw; max-height: 92vh; } } /* ============================================================ * PHONE — ≤ 640px * Single-column everything, full-screen modals, kanban scrolls * horizontally with snap points. * ============================================================ */ @media (max-width: 640px) { /* TopNav: brand word can drop, tabs stack tighter */ .ats-brand__word { display: none; } .ats-tabs { display: none; } /* navigated via hamburger instead */ .ats-topnav__left { gap: 8px; } .ats-topnav__right { gap: 6px; } .ats-search { width: 36px; padding: 6px; } .ats-search input, .ats-search kbd { display: none; } .ats-search.is-mobile-open { width: 100%; padding: 6px 12px; } .ats-search.is-mobile-open input { display: block; } /* Page heads */ .ats-page-head { padding: 12px 14px 10px; flex-direction: column; align-items: flex-start; gap: 8px; } .ats-page-title { font-size: 22px; } .ats-page-actions { flex-wrap: wrap; gap: 6px; } /* Kanban: horizontal scroll with column snap */ .ats-kanban { padding: 10px 12px 16px; gap: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .ats-col { width: 86vw !important; max-width: 320px; scroll-snap-align: start; flex-shrink: 0; } .ats-col--compact { width: 80vw !important; max-width: 280px; } /* Cards: bigger tap targets */ .ats-card { padding: 10px; } .ats-card__title { font-size: 14px; } /* Filter bar wrapping */ .ats-sheet-filterbar { flex-wrap: wrap; gap: 6px; padding: 10px 14px; } /* Tables shrink horizontal-scroll target */ .ats-sheet table { min-width: 680px; font-size: 12.5px; } /* External portal kpi → single column on phone */ .ats-portal__kpis { grid-template-columns: 1fr; gap: 8px; } .ats-portal__top { flex-wrap: wrap; gap: 10px; padding: 10px 12px; } /* Candidate detail modal: full-screen */ .ats-modal-scrim { padding: 0; align-items: stretch; } .ats-modal { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 100%; max-height: 100%; border-radius: 0; } .ats-modal__bar { padding: 10px 12px; } .ats-modal__body { padding: 12px 14px 28px; } /* Hide right-rail in detail; tabs collapse */ .ats-detail__rail { display: none; } .ats-detail__content { grid-template-columns: 1fr; padding: 14px 14px 28px; gap: 14px; } .ats-detail__head { padding: 14px 14px 12px; flex-direction: column; align-items: flex-start; gap: 10px; } .ats-detail__name { font-size: 22px; } .ats-detail__meta-row { font-size: 11.5px; gap: 8px; flex-wrap: wrap; } .ats-detail__links { flex-wrap: wrap; gap: 6px; } /* Candidate tab bar: horizontal scroll if too many tabs */ .ats-tabbar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .ats-tabbar::-webkit-scrollbar { display: none; } .ats-tabbar__tab { flex-shrink: 0; } /* Notes composer: full width inputs */ .ats-note-composer { padding: 12px; } .ats-note-composer textarea { font-size: 16px; /* prevents iOS zoom */ } /* Buttons: bump tap targets */ .ats-btn { min-height: 36px; } .ats-btn--primary, .ats-btn--accent, .ats-btn--danger { min-height: 40px; padding: 10px 16px; } .ats-mini-btn { width: 28px; height: 28px; font-size: 14px; } /* Submit modal: full-screen on phone */ .ats-submit { width: 100vw !important; max-width: 100vw !important; height: 100%; max-height: 100vh; border-radius: 0; } .ats-submit__grid { grid-template-columns: 1fr; } /* Login screen: form widths collapse */ .ats-login-card, .ats-login-form, .ats-login-form > * { width: 100% !important; max-width: 320px; } .ats-login-card { padding: 24px 16px !important; } /* All form inputs: at least 16px font to avoid iOS zoom */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], textarea, select { font-size: 16px; } /* My candidates: collapse rail */ .ats-myc-rail { display: none; } /* Calendar: horizontal scroll */ .ats-cal__grid, .ats-cal__head { min-width: 640px; } .ats-cal { overflow-x: auto; } /* Job detail metrics row: wrap */ .ats-metric-row { flex-wrap: wrap; gap: 8px; } .ats-metric-row .ats-metric { flex: 1 1 calc(50% - 4px); min-width: 0; } /* Resume PDF viewer: shrink controls */ .ats-resume-viewer { padding: 0; } /* Toasts */ .ats-toast { left: 12px !important; right: 12px !important; bottom: 12px !important; transform: none !important; max-width: none !important; } } /* ============================================================ * Body lock when the mobile nav is open (prevent scroll-through) * ============================================================ */ body.is-mobile-nav-open { overflow: hidden; } body.is-mobile-nav-open .ats-shell--frame { overflow: hidden; }