/* ═══════════════════════════════════════════════════════
   JOBNEST — MOBILE-ONLY LINKEDIN UI OVERLAY
   Only activates on phones (≤768px). Desktop unchanged.
   Overlays a LinkedIn-style top bar + bottom tab nav.
═══════════════════════════════════════════════════════ */

/* Hide injected nav on desktop */
.jnl-topbar,.jnl-bottom-nav{display:none}

@media(max-width:768px){
  /* Hide the page's original top nav on mobile (so ours replaces it) */
  #nav,#landing-nav,.nav:not(.jnl-nav){display:none !important}
  .lnav-link{display:none !important}

  /* Body padding so content isn't hidden under our fixed navs */
  body{padding-top:56px !important;padding-bottom:70px !important}
  #app-wrap{margin-top:0 !important}

  /* ═══ OUR TOP BAR ═══ */
  .jnl-topbar{
    display:flex !important;
    position:fixed;top:0;left:0;right:0;z-index:9998;
    height:56px;padding:8px 12px;align-items:center;gap:10px;
    background:rgba(4,16,31,.96);backdrop-filter:blur(18px);
    border-bottom:1px solid #1a2d47;
  }
  .jnl-avatar{
    width:32px;height:32px;border-radius:50%;
    background:linear-gradient(135deg,#1a6ef5,#00d4ff);
    display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:12px;color:#fff;flex-shrink:0;
    cursor:pointer;border:none;font-family:inherit;
  }
  .jnl-search{
    flex:1;position:relative;
  }
  .jnl-search::before{
    content:'🔍';position:absolute;left:12px;top:50%;
    transform:translateY(-50%);font-size:12px;pointer-events:none;opacity:.6;
  }
  .jnl-search input{
    width:100%;background:#0f2038;border:1px solid #1a2d47;
    border-radius:8px;padding:8px 12px 8px 32px;
    color:#eef5ff;font-size:13px;font-family:inherit;outline:none;
  }
  .jnl-search input::placeholder{color:#7a93ac}
  .jnl-search input:focus{border-color:#00d4ff}
  .jnl-icon-btn{
    width:36px;height:36px;border-radius:10px;
    background:transparent;border:none;color:#b8cde0;
    font-size:16px;cursor:pointer;display:flex;
    align-items:center;justify-content:center;flex-shrink:0;
    position:relative;font-family:inherit;
  }
  .jnl-icon-btn:active{background:#0f2038}
  .jnl-icon-badge{
    position:absolute;top:3px;right:3px;background:#ff4757;color:#fff;
    font-size:9px;font-weight:700;padding:1px 5px;border-radius:100px;
    min-width:14px;text-align:center;line-height:1.2;
  }

  /* ═══ OUR BOTTOM TAB NAV ═══ */
  .jnl-bottom-nav{
    display:flex !important;
    position:fixed;bottom:0;left:0;right:0;z-index:9998;
    background:rgba(4,16,31,.98);backdrop-filter:blur(20px);
    border-top:1px solid #1a2d47;
    align-items:stretch;
    padding:4px 0 max(6px,env(safe-area-inset-bottom));
  }
  .jnl-bn-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:7px 4px;background:none;border:none;cursor:pointer;
    color:#7a93ac;font-family:inherit;text-decoration:none;position:relative;
    transition:color .15s;
  }
  .jnl-bn-item:active{color:#b8cde0}
  .jnl-bn-item.active{color:#00d4ff}
  .jnl-bn-item.active::before{
    content:'';position:absolute;top:0;left:50%;
    transform:translateX(-50%);width:26px;height:3px;
    background:linear-gradient(135deg,#1a6ef5,#00d4ff);
    border-radius:0 0 4px 4px;
  }
  .jnl-bn-icon{font-size:20px;line-height:1}
  .jnl-bn-label{font-size:10px;font-weight:600;letter-spacing:.2px}
  .jnl-bn-badge{
    position:absolute;top:5px;right:calc(50% - 18px);
    background:#ff4757;color:#fff;font-size:9px;font-weight:700;
    padding:1px 5px;border-radius:100px;min-width:14px;text-align:center;line-height:1.2;
  }

  /* ═══ HAMBURGER / SETTINGS DRAWER ═══ */
  .jnl-drawer-backdrop{
    display:none;position:fixed;inset:0;z-index:9999;
    background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  }
  .jnl-drawer-backdrop.open{display:block}
  .jnl-drawer{
    position:fixed;top:0;bottom:0;left:0;width:82%;max-width:320px;z-index:10000;
    background:#0a1a2e;border-right:1px solid #1a2d47;
    transform:translateX(-100%);transition:transform .25s ease;
    display:flex;flex-direction:column;
  }
  .jnl-drawer.open{transform:translateX(0)}
  .jnl-drawer-head{padding:20px;border-bottom:1px solid #1a2d47}
  .jnl-drawer-avatar-big{
    width:56px;height:56px;border-radius:50%;
    background:linear-gradient(135deg,#1a6ef5,#00d4ff);
    display:flex;align-items:center;justify-content:center;
    font-weight:900;font-size:22px;color:#fff;margin-bottom:10px;
  }
  .jnl-drawer-name{font-size:16px;font-weight:800;color:#eef5ff;margin-bottom:2px}
  .jnl-drawer-sub{font-size:12px;color:#7a93ac}
  .jnl-drawer-links{flex:1;overflow-y:auto;padding:8px 12px}
  .jnl-drawer-link{
    display:flex;align-items:center;gap:12px;padding:12px 14px;
    color:#b8cde0;text-decoration:none;border-radius:8px;font-size:14px;
    font-family:inherit;background:none;border:none;cursor:pointer;width:100%;text-align:left;
  }
  .jnl-drawer-link:active{background:#0f2038}
  .jnl-drawer-link .icon{font-size:18px;width:24px;text-align:center}
  .jnl-drawer-section-title{
    font-size:10px;font-weight:700;color:#7a93ac;
    text-transform:uppercase;letter-spacing:1.5px;padding:16px 14px 6px;
  }

  /* If the page uses a specific padding for #app-wrap (app pages), reset it */
  [id="app-wrap"]{padding-top:0 !important;margin-top:0 !important}
  /* Fix: remove fixed position from any other top element the page uses */
  .app-shell,.jobs-wrap,.prof-wrap,.has-session,.feed-wrap,.chat-wrap,.rec-wrap{
    height:auto !important;
    min-height:calc(100vh - 126px);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL MOBILE GRID FIX
   Many pages have inline `style="grid-template-columns:repeat(N,1fr)"`
   that force 3-7 cols, making the page wider than the phone viewport.
   These attribute selectors override ALL of those at once on phones.
   Loaded on every page → fixes whole-site phone layout in one shot.
═══════════════════════════════════════════════════════════════════ */

/* Phones (≤768px): collapse 3+col inline grids to 1 col */
@media(max-width:768px){

  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns: repeat(6"],
  [style*="grid-template-columns:repeat(7"],
  [style*="grid-template-columns: repeat(7"]{
    grid-template-columns:1fr !important;
  }

  /* Also catch literal `1fr 1fr 1fr...` patterns inline */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"]{
    grid-template-columns:1fr !important;
  }

  /* Stat-row variants (apps/profile/coach/recruiter) → 2 col grid for legibility */
  #app-stats,
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(7,1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px !important;
  }

  /* Belt-and-suspenders: kill horizontal overflow site-wide on phones */
  html,body{
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

  /* Common wrappers that sometimes set min-width wider than viewport */
  .apps-wrap,.notif-wrap,.prof-wrap,.coach-wrap,
  .rec-wrap,.chat-wrap,.feed-wrap,.jobs-wrap{
    max-width:100vw !important;
    overflow-x:hidden !important;
  }
}

/* Very small phones (≤480px): also collapse inline 2-col grids */
@media(max-width:480px){
  [style*="grid-template-columns:1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"]{
    grid-template-columns:1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DEFENSIVE SITE-WIDE MOBILE FIXES (≤768px)
   These rules catch the most common mobile breakages across all live
   app pages: overflow, modal width, sticky-bar collisions, form zoom,
   long-word wrap, table overflow, image overflow, tap-target sizing.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 1. Box-sizing + word-wrap globally (long emails/URLs breaking layout) */
  *, *::before, *::after { box-sizing: border-box !important; }
  body, p, a, span, div, li, h1, h2, h3, h4, h5, h6, .jcard-title, .fc-title, .fp-body {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* 2. Media never overflows */
  img, video, iframe, picture, canvas, svg {
    max-width: 100% !important;
    height: auto;
  }
  iframe { border: 0; }

  /* 3. Tables become horizontally scrollable rather than overflowing */
  table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 4. Pre / code blocks scroll instead of overflowing */
  pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }

  /* 5. Modals — never wider than viewport, scroll vertically.
        Scoped to open-state classes so these rules do NOT activate
        (and force layout on) modals that are still hidden. */
  .mo.open, .mo.is-open, .mo.show, .mo.active,
  .modal.open, .modal.is-open, .modal.show, .modal.active,
  .modal-overlay.open, .modal-overlay.is-open, .modal-overlay.show, .modal-overlay.active,
  .mo-overlay.open, .mo-overlay.is-open, .mo-overlay.show, .mo-overlay.active {
    padding: 12px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .mo.open .mb, .mo.is-open .mb, .mo.show .mb, .mo.active .mb,
  .modal.open .modal-body, .modal.is-open .modal-body, .modal.show .modal-body, .modal.active .modal-body,
  .modal.open .modal-content, .modal.is-open .modal-content, .modal.show .modal-content, .modal.active .modal-content,
  .mo.open .mo-body, .mo.is-open .mo-body, .mo.show .mo-body, .mo.active .mo-body {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    border-radius: 14px !important;
    padding: 18px !important;
  }

  /* 6. Forms — prevent iOS auto-zoom on focus (16px min) */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, select, .fi, .fta, .fsel {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  /* 7. Tap targets — min 44px (WCAG / Apple HIG) */
  .btn, .btn-p, .btn-s, .btn-sm, .nb, .ntag, button[type="submit"],
  .tpill, .chip, .fpa, .fc-btn, .jnl-bn-item {
    min-height: 44px;
  }

  /* 8. Fixed action bars (chat input, job-apply CTA, etc.) — sit ABOVE
        our LinkedIn bottom nav (which is 64–72px tall + safe-area). */
  .chat-input-bar, .ji-fab, .floating-cta, .sticky-apply,
  [class*="bottom-bar"]:not(.jnl-bottom-nav):not(.bottom-nav) {
    bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }

  /* 9. Generic page-wrapper resets — make sure no inline padding pushes
        content sideways or hides it under the injected top bar. */
  #app-wrap, #page-app, .app-shell, .has-session,
  .jobs-wrap, .prof-wrap, .feed-wrap, .chat-wrap, .coach-wrap,
  .rec-wrap, .apps-wrap, .notif-wrap, .admin-wrap, .analytics-wrap {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* 10. Page-content gap at bottom so content isn't trapped under the
         fixed bottom nav (≈64px nav + safe-area). */
  #app-wrap, body > main, .content {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  /* 11. Hide desktop-only sidebars by class hint — many app pages put
         secondary content into right/left rails that don't fit on phones. */
  .desktop-only, .hide-mobile, .d-only,
  aside.r-rail, aside.l-rail, .r-sidebar, .l-sidebar,
  .jobs-r-sidebar, .profile-r-sidebar, .coach-r-sidebar, .feed-r-sidebar,
  .feed-l, .feed-r, .jobs-side, .jobs-left, .jobs-right {
    display: none !important;
  }

  /* 12. Containers that use big horizontal padding — tighten on phones */
  .section, section[class*="section"], .hero-sec, .cta-sec,
  .legal-wrap, .privacy-wrap, .policy-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 13. Buttons inside cards stretch to full width when stacked */
  .stack-actions, .card-actions, .jd-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .stack-actions > .btn, .card-actions > .btn { flex: 1 1 140px !important; }

  /* 14. Long single-word breaks (urls, hashes) inside cards */
  .fc, .jcard, .fp, .ni, .sec-row, .jd-section, .modal-body {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 15. Toast notifications stay readable on small screens */
  #toasts, .toast {
    left: 12px !important;
    right: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* ════ Very small phones (≤380px) — extra padding/font tweaks ════ */
@media (max-width: 380px) {
  body { font-size: 14px; }
  .jnl-search input { font-size: 12px !important; padding: 7px 10px 7px 30px !important; }
  .jnl-bn-label { font-size: 9px !important; }
  .jnl-bn-icon { font-size: 18px !important; }
  .section, section[class*="section"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .fc, .jcard, .fp { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ════ Landscape phones — let content scroll, no forced 100vh ════ */
@media (max-height: 480px) and (orientation: landscape) {
  .hero, .hero-sec, .empty-state, .no-sel { min-height: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   SPECIFIC FIXES FROM USER PHOTO REVIEW (≤768px)
   - Pricing 2-col grids overflow → force 1 col
   - #app-stats 5-col grid clips Response Rate → wrap into 2 cols
   - #notif-filter-tabs clips "Messages" → horizontal scroll
   - Legacy #nav "Jobnest FIND YOUR CAREER HOME" still showing → hard-hide
   - Right-rail sidebars on feed/profile/jobs → hard-hide
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Pricing / plans — single column, full width, no max-width games */
  .pricing-grid, .plans-grid, .pricing-cards, .price-grid, .upgrade-grid,
  .plan-grid, .tiers-grid, .vp-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .price-card, .plan-card, .pricing-card, .tier-card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Applications page — stat strip must NOT scroll horizontally */
  #app-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 14px 16px !important;
    margin: 0 !important;
    overflow: visible !important;
    max-width: 100% !important;
  }
  #app-stats > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Notifications + Apps tabs — horizontal scroll, cleaner than wrap */
  #notif-filter-tabs,
  .apps-wrap .jn-tabs,
  .apps-wrap > div:has(> .tpill) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding: 8px 12px 10px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #notif-filter-tabs::-webkit-scrollbar,
  .apps-wrap .jn-tabs::-webkit-scrollbar { display: none !important; width: 0 !important; }
  #notif-filter-tabs > *,
  .apps-wrap .jn-tabs > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Hard-hide the legacy page nav even after JS un-hides it */
  body #nav,
  body #landing-nav,
  body > nav:not(.jnl-bottom-nav):not(.bottom-nav) {
    display: none !important;
  }
  /* And its inner brand banner (.nname / .ntag pair) */
  #nav .nname, #nav .ntag, #nav .nlinks, #nav .nbox { display: none !important; }

  /* Feed / Profile / Jobs / Coach — kill ALL secondary rails on phone */
  .feed-l, .feed-r,
  .jobs-side, .jobs-left, .jobs-right,
  .jobs-r-sidebar, .profile-r-sidebar, .coach-r-sidebar, .feed-r-sidebar,
  .prof-wrap > aside, .feed-wrap > aside, .jobs-wrap > aside,
  [class*="-r-sidebar"], [class*="-l-sidebar"],
  [class*="-r-rail"], [class*="-l-rail"] {
    display: none !important;
  }

  /* Force feed/profile/jobs containers to single-column flow */
  .feed-wrap, .prof-wrap, .jobs-wrap, .coach-wrap {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0 !important;
    max-width: 100% !important;
    gap: 0 !important;
  }
  .feed-c, .prof-c, .jobs-c, .coach-c {
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 0 !important;
  }
}