/*
 * UP1750 — Mobile App-style UX Optimization
 * Mobile-only presentation layer. Keeps desktop untouched.
 * Inspired by modern native job-search app patterns: compact headers,
 * card lists, bottom navigation, clean form rhythm and role workspaces.
 */
@media (max-width: 860px) {
    :root {
        --fij-mobile-bg: #f6f8fa;
        --fij-mobile-surface: #ffffff;
        --fij-mobile-soft: #eef8f9;
        --fij-mobile-line: #e4e9ef;
        --fij-mobile-text: #2f3546;
        --fij-mobile-muted: #8a93a3;
        --fij-mobile-accent: #18c7d6;
        --fij-mobile-accent-2: #5364ac;
        --fij-mobile-danger: #ef8ea0;
        --fij-mobile-success: #74d8c9;
        --fij-mobile-shadow: 0 10px 28px rgba(14, 23, 38, .08);
        --fij-mobile-radius: 16px;
    }

    html { -webkit-text-size-adjust: 100%; }
    body.fj-public,
    body.fj-auth {
        background: var(--fij-mobile-bg) !important;
        color: var(--fij-mobile-text) !important;
        overflow-x: hidden !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    }
    body.fj-auth { padding-bottom: env(safe-area-inset-bottom) !important; }
    .container,
    .fj-container,
    .fij-container,
    .ui-container {
        width: 100% !important;
        max-width: none !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /* Header: app-like compact top bar */
    .fij-public-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 80 !important;
        min-height: 58px !important;
        background: rgba(255,255,255,.96) !important;
        border-bottom: 1px solid rgba(226,232,240,.95) !important;
        backdrop-filter: blur(14px) !important;
    }
    .fij-public-header-inner {
        min-height: 58px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .fij-public-brand,
    .fij-brand-lockup,
    .fij-footer-brand {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
    }
    .fij-public-brand svg,
    .fij-public-brand img,
    .fij-brand-lockup svg,
    .fij-brand-lockup img { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; }
    .fij-public-brand span,
    .fij-brand-lockup span { font-size: 16px !important; line-height: 1 !important; white-space: nowrap !important; }
    .fij-desktop-nav { display: none !important; }
    .fij-mobile-menu-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        min-height: 40px !important;
        padding: 0 13px !important;
        border: 1px solid var(--fij-mobile-line) !important;
        background: var(--fij-mobile-surface) !important;
        color: var(--fij-mobile-text) !important;
        border-radius: 999px !important;
        box-shadow: 0 3px 10px rgba(15,23,42,.05) !important;
        font-size: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: .08em !important;
    }

    /* Mobile drawer: role menu as clear app sheet */
    .fij-mobile-drawer {
        width: min(88vw, 360px) !important;
        border-left: 1px solid var(--fij-mobile-line) !important;
        background: #fff !important;
        box-shadow: -20px 0 50px rgba(15,23,42,.16) !important;
    }
    .fij-mobile-drawer-head {
        min-height: 64px !important;
        padding: 16px 18px !important;
        border-bottom: 1px solid var(--fij-mobile-line) !important;
        background: linear-gradient(135deg, rgba(180,244,236,.55), rgba(176,222,255,.55)) !important;
    }
    .fij-mobile-nav-parity,
    .fij-role-aware-mobile-nav {
        padding: 14px !important;
        display: grid !important;
        gap: 8px !important;
    }
    .fij-mobile-nav-parity a,
    .fij-mobile-workspace-group a,
    .fij-mobile-logout button {
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 14px !important;
        background: #f8fafc !important;
        border: 1px solid var(--fij-mobile-line) !important;
        border-radius: 13px !important;
        color: var(--fij-mobile-text) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        letter-spacing: .02em !important;
        text-decoration: none !important;
    }
    .fij-mobile-workspace-group p {
        margin: 12px 0 6px !important;
        color: var(--fij-mobile-muted) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: .16em !important;
    }
    .fij-mobile-nav-parity .fij-nav-action-primary,
    .fij-mobile-workspace-group a.is-accent {
        background: var(--fij-mobile-accent) !important;
        border-color: var(--fij-mobile-accent) !important;
        color: #031923 !important;
    }
    .fij-mobile-logout button {
        justify-content: center !important;
        width: 100% !important;
        background: #07111e !important;
        color: #fff !important;
        border-color: #07111e !important;
    }

    /* Hero: reduce giant desktop blocks into app-sized headers */
    .fij-home-hero,
    .fij-hero,
    .fij-page-hero,
    .fij-public-hero,
    .fij-cinematic-hero,
    .fij-auth-brand-panel,
    .hero,
    [class*="hero"] {
        min-height: auto !important;
    }
    section[class*="hero"],
    .fij-home-hero,
    .fij-page-hero,
    .fij-public-hero,
    .fij-cinematic-hero {
        padding: 38px 0 28px !important;
        border-radius: 0 0 22px 22px !important;
        overflow: hidden !important;
    }
    .fij-home-hero h1,
    .fij-page-hero h1,
    .fij-public-hero h1,
    .fij-cinematic-hero h1,
    .hero h1,
    main h1 {
        font-size: clamp(31px, 11vw, 44px) !important;
        line-height: .94 !important;
        letter-spacing: -.055em !important;
        max-width: 92vw !important;
        margin-bottom: 12px !important;
    }
    .fij-home-hero p,
    .fij-page-hero p,
    .fij-public-hero p,
    .fij-cinematic-hero p,
    .hero p {
        max-width: 94vw !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }
    .eyebrow,
    [class*="eyebrow"] {
        font-size: 10px !important;
        line-height: 1.2 !important;
        letter-spacing: .18em !important;
        color: var(--fij-mobile-accent) !important;
    }

    /* Search area: app-style grouped search, not oversized desktop module */
    form[class*="search"],
    .fij-search,
    .fij-hero-search,
    .fij-search-bar,
    .fij-filter-bar,
    .fij-unified-search,
    .job-search,
    .search-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 12px !important;
        background: rgba(255,255,255,.96) !important;
        border: 1px solid var(--fij-mobile-line) !important;
        border-radius: var(--fij-mobile-radius) !important;
        box-shadow: var(--fij-mobile-shadow) !important;
        margin: 16px 0 12px !important;
        max-width: 100% !important;
    }
    form[class*="search"] input,
    form[class*="search"] select,
    .fij-search input,
    .fij-search select,
    .fij-hero-search input,
    .fij-hero-search select,
    .fij-filter-bar input,
    .fij-filter-bar select,
    .fij-unified-search input,
    .fij-unified-search select,
    .job-search input,
    .job-search select,
    .search-form input,
    .search-form select {
        width: 100% !important;
        min-height: 50px !important;
        padding: 0 14px !important;
        border: 1px solid #dfe5eb !important;
        border-radius: 12px !important;
        background: #fbfdff !important;
        color: var(--fij-mobile-text) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
    }
    form[class*="search"] button,
    .fij-search button,
    .fij-hero-search button,
    .fij-filter-bar button,
    .fij-unified-search button,
    .job-search button,
    .search-form button {
        min-height: 52px !important;
        width: 100% !important;
        border-radius: 12px !important;
        background: var(--fij-mobile-accent) !important;
        color: #041822 !important;
        border: 0 !important;
        font-size: 13px !important;
        font-weight: 950 !important;
        letter-spacing: .12em !important;
        text-transform: uppercase !important;
    }

    /* General buttons and CTAs */
    .button,
    .btn,
    .fij-btn,
    .fij-public-button,
    .fij-cta,
    a[class*="button"],
    button:not(.fij-mobile-menu-button):not(.fij-mobile-logout button) {
        min-height: 46px !important;
        padding: 12px 16px !important;
        border-radius: 11px !important;
        font-size: 13px !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
    }
    .fij-hero-actions,
    .hero-actions,
    .actions,
    .cta-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }
    .fij-hero-actions > *,
    .hero-actions > *,
    .cta-actions > * { flex: 1 1 140px !important; text-align: center !important; }

    /* Cards/lists: compact app cards */
    .card,
    .fij-card,
    .job-card,
    .company-card,
    .article-card,
    .department-card,
    .pricing-card,
    .workspace-card,
    .dashboard-card,
    .fij-list-card,
    .fij-job-card,
    .fij-company-card,
    .fij-profile-card,
    .fij-panel,
    .fij-public-card,
    .fij-account-card,
    .fij-onboarding-card,
    .fij-recommendation-card,
    .fij-notification-row,
    .fij-application-row {
        border-radius: var(--fij-mobile-radius) !important;
        border: 1px solid var(--fij-mobile-line) !important;
        background: var(--fij-mobile-surface) !important;
        box-shadow: 0 8px 20px rgba(15,23,42,.045) !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
    }
    .jobs-list,
    .company-list,
    .fij-list,
    .fij-grid,
    .dashboard-grid,
    .workspace-grid,
    .cards-grid,
    .pricing-grid,
    .articles-grid,
    .departments-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .job-card h2,
    .job-card h3,
    .fij-job-card h2,
    .fij-job-card h3,
    .company-card h2,
    .company-card h3,
    .fij-card h2,
    .fij-card h3,
    .workspace-card h2,
    .dashboard-card h2 {
        font-size: 18px !important;
        line-height: 1.16 !important;
        letter-spacing: -.025em !important;
        margin: 0 0 6px !important;
    }
    .job-card p,
    .company-card p,
    .fij-card p,
    .workspace-card p,
    .dashboard-card p {
        font-size: 13px !important;
        line-height: 1.45 !important;
        color: #647084 !important;
        margin-bottom: 8px !important;
    }

    /* Page headings and section labels */
    main h2 { font-size: 25px !important; line-height: 1.08 !important; letter-spacing: -.035em !important; }
    main h3 { font-size: 18px !important; line-height: 1.18 !important; }
    .section-title,
    .fij-section-title,
    [class*="section"] > h2:first-child {
        font-size: 23px !important;
        line-height: 1.08 !important;
    }
    .section-label,
    .fij-section-label,
    label,
    legend {
        font-size: 11px !important;
        letter-spacing: .13em !important;
        text-transform: uppercase !important;
        color: #8a93a3 !important;
        font-weight: 850 !important;
    }

    /* Forms: native-app rhythm */
    input,
    select,
    textarea {
        max-width: 100% !important;
        border-radius: 11px !important;
        border: 1px solid #dde5ec !important;
        background: #f8fbfd !important;
        color: var(--fij-mobile-text) !important;
        font-size: 15px !important;
        font-weight: 650 !important;
        box-shadow: none !important;
    }
    input,
    select { min-height: 49px !important; padding: 0 13px !important; }
    textarea { min-height: 110px !important; padding: 13px !important; line-height: 1.45 !important; }
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px !important;
        height: 24px !important;
        min-height: 24px !important;
        border-radius: 6px !important;
        flex: 0 0 24px !important;
        accent-color: var(--fij-mobile-accent) !important;
    }
    .form-row,
    .field-row,
    .fij-form-row,
    .fij-form-grid,
    .form-grid,
    .fij-account-grid,
    .fij-profile-grid,
    .fij-onboarding-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .form-help,
    .help-text,
    small,
    .muted { font-size: 12px !important; color: #7e8998 !important; }

    /* Profile/workspace pages: sections like app profile */
    .fij-profile-workspace,
    .fij-dashboard-context main,
    .fij-account-context main,
    .fij-auth-form-panel {
        background: var(--fij-mobile-bg) !important;
    }
    .fij-dashboard-context section,
    .fij-dashboard-context .fij-section,
    .fij-dashboard-context .profile-section,
    .fij-dashboard-context .workspace-section,
    .fij-content-polish-context section {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }
    .readiness,
    .fij-readiness,
    .readiness-checklist,
    .fij-side-panel,
    aside[class*="sidebar"],
    aside[class*="side"] {
        position: static !important;
        width: auto !important;
        margin: 12px 0 !important;
        border-radius: var(--fij-mobile-radius) !important;
    }
    .fij-profile-card .edit,
    .edit-link,
    a[href*="edit"],
    button[class*="edit"] {
        min-width: 40px !important;
        min-height: 40px !important;
    }

    /* Chips/tags */
    .chip,
    .tag,
    .badge,
    .fij-chip,
    .fij-tag,
    .fij-badge,
    .status,
    [class*="chip"],
    [class*="badge"] {
        border-radius: 999px !important;
        padding: 6px 10px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: .01em !important;
    }
    .chip-list,
    .tags,
    .fij-chip-list,
    .fij-tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }

    /* Bottom navigation inspired by native app */
    .fij-mobile-bottom-appbar,
    [data-mobile-appbar],
    .mobile-bottom-appbar,
    .bottom-appbar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 90 !important;
        min-height: calc(70px + env(safe-area-inset-bottom)) !important;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 2px !important;
        background: rgba(255,255,255,.96) !important;
        border-top: 1px solid rgba(218,226,235,.95) !important;
        box-shadow: 0 -16px 34px rgba(15,23,42,.10) !important;
        backdrop-filter: blur(18px) !important;
    }
    .fij-mobile-bottom-appbar a,
    [data-mobile-appbar] a,
    .mobile-bottom-appbar a,
    .bottom-appbar a {
        min-height: 54px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        color: #a0a7b2 !important;
        text-decoration: none !important;
        font-size: 11px !important;
        font-weight: 850 !important;
        letter-spacing: .02em !important;
        border-radius: 14px !important;
    }
    .fij-mobile-bottom-appbar a[aria-current="page"],
    .fij-mobile-bottom-appbar a.active,
    [data-mobile-appbar] a[aria-current="page"],
    [data-mobile-appbar] a.active,
    .mobile-bottom-appbar a.active,
    .bottom-appbar a.active {
        color: var(--fij-mobile-accent-2) !important;
    }
    .fij-mobile-bottom-appbar svg,
    .fij-mobile-bottom-appbar img,
    [data-mobile-appbar] svg,
    [data-mobile-appbar] img {
        width: 24px !important;
        height: 24px !important;
    }

    /* Application/job rows: app list look */
    .applications-list,
    .saved-jobs-list,
    .notifications-list,
    .job-results,
    .fij-job-results {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        background: #fff !important;
        border: 1px solid var(--fij-mobile-line) !important;
        border-radius: var(--fij-mobile-radius) !important;
        overflow: hidden !important;
    }
    .applications-list > *,
    .saved-jobs-list > *,
    .notifications-list > *,
    .job-results > *,
    .fij-job-results > * {
        margin: 0 !important;
        border-radius: 0 !important;
        border-width: 0 0 1px 0 !important;
        box-shadow: none !important;
    }
    .applications-list > *:last-child,
    .saved-jobs-list > *:last-child,
    .notifications-list > *:last-child,
    .job-results > *:last-child,
    .fij-job-results > *:last-child { border-bottom: 0 !important; }

    /* Tables: convert to scroll-safe cards */
    table { width: 100% !important; display: block !important; overflow-x: auto !important; border-radius: var(--fij-mobile-radius) !important; }
    th, td { white-space: nowrap !important; font-size: 13px !important; padding: 12px !important; }

    /* Auth/register: single-column compact mobile */
    .fij-auth-shell,
    .fij-public-auth-shell {
        display: grid !important;
        grid-template-columns: 1fr !important;
        min-height: 100svh !important;
        background: var(--fij-mobile-bg) !important;
    }
    .fij-auth-brand-panel {
        min-height: auto !important;
        padding: 28px 20px 22px !important;
        border-radius: 0 0 24px 24px !important;
    }
    .fij-auth-brand-panel h1 {
        font-size: clamp(30px, 10vw, 42px) !important;
        line-height: .95 !important;
    }
    .fij-auth-trust-list { display: none !important; }
    .fij-auth-form-panel {
        padding: 16px 18px 24px !important;
    }
    .fij-auth-form-panel > * {
        border-radius: var(--fij-mobile-radius) !important;
        box-shadow: var(--fij-mobile-shadow) !important;
    }

    /* Footer compact on mobile */
    .fij-public-footer {
        padding: 30px 0 94px !important;
    }
    .fij-footer-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .fij-footer-bottom {
        display: grid !important;
        gap: 8px !important;
        text-align: left !important;
    }

    /* Avoid hidden content behind bottom bar */
    main { padding-bottom: 12px !important; }
    body.fij-job-detail-context,
    body.fij-article-detail-context,
    body.fij-company-detail-context,
    body.fij-application-detail-context { padding-bottom: 20px !important; }

    /* Motion: light on mobile */
    @media (prefers-reduced-motion: no-preference) {
        .card, .fij-card, .job-card, .company-card, .fij-job-card, .fij-company-card, .dashboard-card, .workspace-card {
            transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
        }
        .card:active, .fij-card:active, .job-card:active, .company-card:active, .fij-job-card:active, .fij-company-card:active {
            transform: scale(.992) !important;
        }
    }
}

@media (max-width: 430px) {
    body.fj-public,
    body.fj-auth { font-size: 14px !important; }
    .container,
    .fj-container,
    .fij-container,
    .ui-container { padding-left: 16px !important; padding-right: 16px !important; }
    .fij-home-hero h1,
    .fij-page-hero h1,
    .fij-public-hero h1,
    .fij-cinematic-hero h1,
    .hero h1,
    main h1 { font-size: clamp(29px, 10.5vw, 38px) !important; }
    .fij-mobile-bottom-appbar a,
    [data-mobile-appbar] a { font-size: 10.5px !important; }
}