/* ========================================================================
   TRICORE PARTNERS — Global Mobile Fixes
   Loaded AFTER all other stylesheets so these rules win.
   Targets common pain points without touching per-page styles.
   ======================================================================== */

@media (max-width: 900px) {

    /* --- General layout safety -------------------------------------- */
    html, body {
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    /* Any container with a big max-width becomes fluid on mobile */
    [style*="max-width:1600px"],
    [style*="max-width: 1600px"],
    [style*="max-width:1200px"],
    [style*="max-width: 1200px"],
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* --- Tables get horizontal scroll wrapper treatment ------------- */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    table.evaluations-table td,
    table.candidates-table td,
    table.evaluations-table th,
    table.candidates-table th {
        white-space: nowrap;
    }

    /* --- Any grid form-row becomes single column ------------------- */
    .form-row,
    [class*="form-row"] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* Explicit admin page grids that use inline style */
    [style*="grid-template-columns: 2fr 1fr 1fr auto"],
    [style*="grid-template-columns: 2fr 2fr 2fr 1fr auto"],
    [style*="grid-template-columns: 3fr 1fr auto"],
    [style*="grid-template-columns: 2fr 1fr auto"] {
        grid-template-columns: 1fr !important;
    }

    /* --- Form-submit buttons full-width (forms only, NOT headers) -- */
    form .btn-submit,
    .form-submit,
    form .btn,
    form .btn-add {
        width: 100% !important;
        min-height: 44px;
    }

    /* --- Admin header: compact, non-overlapping -------------------- */
    .admin-header {
        margin-top: 64px !important;   /* mobile nav is shorter */
        padding: 0.75rem 0 !important;
    }
    .admin-header-content {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0 1rem !important;
    }
    .admin-header h1 {
        font-size: 1.1rem !important;
        width: 100%;
    }
    .admin-header-content > div:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        width: 100%;
        justify-content: flex-end;
    }
    /* Header buttons (Change Password / Logout) stay inline & compact */
    .admin-header .btn-back {
        width: auto !important;
        padding: 0.4rem 0.9rem !important;
        font-size: 0.75rem !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
    }
    .admin-header #adminName {
        display: block;
        width: 100%;
        text-align: right;
        font-size: 0.8rem !important;
        margin-bottom: 0.2rem;
    }

    /* --- Admin tab nav: horizontal scroll ------------------------- */
    .admin-nav,
    .admin-header + div[style*="background:var(--color-gray-100)"],
    .admin-header + div[style*="background: var(--color-gray-100)"] {
        overflow: hidden;
    }
    .admin-nav-content,
    .admin-nav,
    .admin-nav-content ~ div,
    div[style*="max-width:1600px"][style*="gap:2rem"],
    div[style*="max-width: 1600px"][style*="gap:2rem"],
    div[style*="display:flex"][style*="gap:2rem"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        gap: 1.25rem !important;
        padding: 0.25rem 1rem !important;
        scrollbar-width: thin;
    }
    .admin-nav-content > a,
    div[style*="gap:2rem"] > a {
        flex-shrink: 0 !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }

    /* --- Forms & inputs -------------------------------------------- */
    .form-input,
    .form-select,
    .form-textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important; /* prevents iOS auto-zoom */
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Phone number country-code + number row */
    .form-grid-2,
    [style*="grid-template-columns"][style*="140px"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
    }

    /* --- Section cards: reduce padding ----------------------------- */
    .section-card,
    .portal-card,
    [class*="dashboard-container"],
    [class*="services-container"],
    [class*="questions-container"],
    [class*="partners-container"] {
        padding: 1.25rem !important;
    }

    /* --- Partner portal: stat cards stack & shrink --------------- */
    .stats-grid,
    .dashboard-stats {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    .stat-card {
        padding: 0.9rem !important;
    }
    .stat-label {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }
    .stat-value {
        font-size: 1.5rem !important;
    }
    .dashboard-container,
    .partners-container,
    .services-container,
    .questions-container {
        padding: 0.75rem !important;
    }

    /* --- Big hero titles stay large but don't overflow ------------ */
    .hero-brutalist__title {
        font-size: clamp(2.5rem, 13vw, 5rem) !important;
        word-break: break-word;
    }
    .hero-brutalist--page .hero-brutalist__title {
        font-size: clamp(2.25rem, 10vw, 4rem) !important;
    }
    .hero-brutalist__subtitle {
        font-size: 0.95rem !important;
    }

    /* --- Section titles don't exceed width ------------------------ */
    h1, h2 { word-break: break-word; }

    /* --- Admin action button group wrap --------------------------- */
    td[style*="display: flex"] {
        flex-wrap: wrap !important;
    }

    /* --- Modal content on mobile ---------------------------------- */
    #pw-modal > div,
    .contact-modal > div {
        max-width: 95vw !important;
        padding: 1.25rem !important;
    }

    /* --- CV upload zone padding ----------------------------------- */
    .upload-zone {
        padding: 1.5rem 1rem !important;
    }

    /* --- Footer: single column ------------------------------------ */
    .footer__grid,
    .footer__nav {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* --- Notable experience dropdown buttons wrap properly -------- */
    .team-editorial__notable-dropdown button {
        width: 100% !important;
    }

    /* --- Team member photos: keep visible & consistent on mobile --- */
    .team-editorial__header {
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    .team-editorial__photo,
    .team-editorial__initials {
        width: 90px !important;
        height: 90px !important;
        object-fit: cover !important;
        object-position: center top !important;
        flex-shrink: 0 !important;
    }
    .team-editorial__name {
        font-size: 1.5rem !important;
        line-height: 1.1 !important;
    }
    .team-editorial__title {
        font-size: 0.85rem !important;
    }
}

    /* --- Navigation bar (top strip on mobile) --------------------- */
    .nav {
        padding: 0 1rem !important;
    }
    .nav__container {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        gap: 0 !important;
        justify-content: space-between !important;
    }
    .nav__logo {
        gap: 0.6rem !important;
    }
    .nav__wordmark {
        font-size: 1.1rem !important;
        letter-spacing: 0.1em !important;
        white-space: nowrap !important;
    }
    /* Push page content below the compacted fixed nav.
       `justify-content: center` can hoist tall titles above the padding;
       anchor to the top instead. */
    .hero-brutalist {
        padding-top: 110px !important;
        justify-content: flex-start !important;
        min-height: auto !important;
    }
    .hero-brutalist--page {
        padding-top: 120px !important;
    }

    /* --- EY-style mobile menu ------------------------------------- */
    .nav__menu {
        padding: 5rem 1.75rem 2rem !important;
    }
    .nav__menu > li > .nav__link {
        font-size: 1.4rem !important;
        padding: 1.3rem 0 !important;
        font-weight: 400 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: #fff !important;
    }
    .nav__menu > li > a.btn {
        font-size: 1rem !important;
        padding: 1rem 2rem !important;
        margin-top: 1.5rem !important;
        background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
        border: none !important;
        border-radius: 999px !important;
    }
    .nav__dropdown-link {
        font-size: 1rem !important;
        padding: 0.85rem 0 !important;
        padding-left: 1rem !important;
        color: rgba(255,255,255,0.75) !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    }
    .nav__dropdown-header {
        font-size: 0.7rem !important;
        letter-spacing: 0.15em !important;
        color: #8B5CF6 !important;
        padding: 1rem 0 0.5rem !important;
        display: block !important;
    }

    /* Make hamburger icon clearly visible */
    .nav__hamburger {
        padding: 10px !important;
        gap: 5px !important;
    }
    .nav__hamburger span {
        width: 26px !important;
        height: 2.5px !important;
        background: #fff !important;
    }
    .nav__hamburger.open span {
        background: #fff !important;
    }
}

/* ---- Extra-narrow phones (< 420px) ---------------------------------- */
@media (max-width: 420px) {
    .hero-brutalist__title {
        font-size: clamp(2rem, 11vw, 3.5rem) !important;
    }
    .hero-brutalist {
        padding-top: 90px !important;
    }
    .nav__wordmark {
        font-size: 1rem !important;
    }
    .admin-header-content h1 {
        font-size: 1rem !important;
    }
    .section-title {
        font-size: 1.2rem !important;
    }
}