/* ==========================================================================
   Jobnest — Mobile polish (applications + notifications)
   All chips/tabs visible at once on narrow phones.
   ========================================================================== */

@media (max-width: 768px) {

  /* =========================================================================
     APPLICATIONS — tabs wrap to multiple rows, stats 2-col grid
     ========================================================================= */

  .apps-wrap {
    padding: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* Title + subtitle */
  .apps-wrap > div:first-child {
    padding: 14px 14px 2px !important;
    margin: 0 !important;
    font-size: 22px !important;
    letter-spacing: -0.02em !important;
  }
  .apps-wrap > div:nth-child(2) {
    padding: 0 14px 12px !important;
    margin: 0 !important;
    font-size: 12.5px !important;
  }

  /* Tabs container (tagged by mobile-polish.js as .jn-tabs).
     Force wrap regardless of inline styles. */
  .apps-wrap .jn-tabs,
  .apps-wrap > div:has(> .tpill) {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 6px !important;
    padding: 0 14px 12px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* Smaller pills so more fit per row → 4 pills × 2 rows = 8 visible */
  .tpill {
    flex: 0 0 auto !important;
    padding: 6px 11px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border-radius: 100px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: var(--text) !important;
    white-space: nowrap !important;
    min-height: 30px !important;
    line-height: 1.2 !important;
    cursor: pointer;
    letter-spacing: 0 !important;
  }
  .tpill.on {
    background: rgba(0,212,255,.14) !important;
    border-color: rgba(0,212,255,.45) !important;
    color: var(--cyan) !important;
  }
  .tpill span {
    margin-left: 4px !important;
    font-weight: 700 !important;
    opacity: .85;
  }

  /* Stats grid — 2 columns, wraps to 3 rows for 5 cards */
  #app-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 14px 16px !important;
    margin: 0 !important;
    overflow: visible !important;
    width: auto !important;
  }
  #app-stats > div {
    padding: 12px 8px !important;
    text-align: center !important;
    min-width: 0 !important;
  }
  #app-stats > div > div:first-child {
    font-size: 22px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }
  #app-stats > div > div:nth-child(2) {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    margin-top: 3px !important;
  }

  /* Job cards list */
  #apps-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 14px !important;
  }


  /* =========================================================================
     NOTIFICATIONS — filter chips wrap
     ========================================================================= */

  #notif-filter-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 6px !important;
    padding: 0 14px 14px !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }
  #notif-filter-tabs .btn {
    flex: 0 0 auto !important;
    padding: 6px 11px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border-radius: 100px !important;
    white-space: nowrap !important;
    min-height: 30px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: var(--text) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }
  #notif-filter-tabs .btn.btn-ai {
    background: rgba(0,212,255,.14) !important;
    border-color: rgba(0,212,255,.45) !important;
    color: var(--cyan) !important;
  }

  /* Mark all read / Clear all row */
  .notif-wrap > div[style*="gap:8px"] {
    padding: 0 14px 12px !important;
    margin: 0 !important;
  }
}