/* ============================================
   MatchMyTech — Mobile Web (Mweb) Overrides
   All rules inside @media (max-width: 768px)
   This file does NOT affect Desktop (Dweb).
   ============================================ */

@media (max-width: 768px) {

    /* ======================
       1. BASE / GLOBAL
       ====================== */
    body {
        overflow-x: hidden;
    }

    * {
        max-width: 100vw;
    }

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .section {
        padding: 40px 0;
    }

    h1 {
        font-size: 1.6rem !important;
    }

    h2 {
        font-size: 1.3rem !important;
    }

    /* ======================
       2. TOP APP BAR & BOTTOM NAV
       ====================== */

    body {
        padding-bottom: 70px !important;
        /* Space for bottom nav */
    }

    /* Top App Bar */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        padding: 0 16px;
        flex-wrap: nowrap;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        z-index: 1000;
        justify-content: space-between;
    }

    .navbar-brand {
        flex-grow: 1;
        justify-content: flex-start;
    }

    .navbar-logo-text {
        font-size: 1.15rem;
    }

    /* Hide desktop links from the top app bar */
    .navbar-links {
        display: none !important;
    }

    .navbar-user {
        margin-left: auto;
    }

    .navbar-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    /* Content padding for fixed top bar */
    #app {
        padding-top: 60px;
    }

    /* Bottom Navigation Bar */
    .bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 64px;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        z-index: 1000;
        justify-content: space-around;
        align-items: center;
        padding: 4px 0;
        border-top: 1px solid var(--border-light);
    }

    .bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 0.65rem;
        font-weight: 500;
        flex: 1;
        height: 100%;
    }

    .bottom-nav a svg {
        color: var(--text-tertiary);
        transition: transform 0.2s;
    }

    .bottom-nav a.active {
        color: var(--primary);
    }

    .bottom-nav a.active svg {
        color: var(--primary);
        transform: translateY(-2px);
    }

    /* ======================
       3. AUTH PAGES (Login/Register)
       ====================== */
    .auth-container {
        flex-direction: column !important;
        min-height: auto !important;
        height: auto !important;
    }

    .auth-side-form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 20px 40px !important;
        min-height: auto !important;
        justify-content: flex-start !important;
    }

    /* Hide the visual/testimonial panel entirely */
    .auth-side-visual {
        display: none !important;
    }

    /* Back link becomes a compact top chip */
    .auth-back-link {
        position: static !important;
        margin-bottom: 20px !important;
        display: inline-flex !important;
        font-size: 0.82rem !important;
        padding: 6px 14px !important;
        background: var(--bg-muted) !important;
        border-radius: 20px !important;
    }

    /* Inner form wrapper — remove max-width constraint */
    .auth-side-form>div[style*="max-width"] {
        max-width: 100% !important;
    }

    /* Headings */
    .auth-side-form h1 {
        font-size: 1.5rem !important;
        margin-bottom: 4px !important;
    }

    .auth-subtitle {
        font-size: 0.88rem !important;
        color: var(--text-secondary);
        margin-bottom: 4px;
    }

    /* Logo icon */
    .auth-side-form .navbar-logo-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 12px !important;
    }

    /* Tighter form groups */
    .auth-side-form .form-group {
        margin-bottom: 14px !important;
    }

    .auth-side-form .form-label {
        font-size: 0.8rem !important;
        margin-bottom: 4px !important;
    }

    .auth-side-form .form-input {
        padding: 10px 12px !important;
        font-size: 0.88rem !important;
        border-radius: 8px !important;
    }

    /* Full width buttons with good tap targets */
    .auth-side-form .btn-lg {
        padding: 12px !important;
        font-size: 0.88rem !important;
        border-radius: 10px !important;
    }

    /* Remember me + Forgot password row */
    .auth-side-form div[style*="space-between"] {
        font-size: 0.8rem !important;
    }

    /* Footer text */
    .auth-footer {
        font-size: 0.85rem !important;
        margin-top: 20px !important;
    }

    /* Role picker chips */
    .auth-side-form .filter-chip {
        padding: 10px 14px !important;
        font-size: 0.82rem !important;
    }

    /* Step 2 Onboarding header */
    .auth-side-form #step-2-container h2 {
        font-size: 1.2rem !important;
    }

    /* Resume upload zone */
    .auth-side-form div[style*="dashed"] {
        padding: 20px 16px !important;
    }

    /* ======================
       4. LANDING / HERO
       ====================== */
    .hero-dark {
        min-height: auto;
        padding: 70px 16px 40px;
    }

    .hero-dark-inner {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 24px;
    }

    .hero-dark-text {
        max-width: 100%;
        margin: 0 auto;
    }

    .hero-dark-visual {
        display: none !important;
    }

    .hero-dark-title {
        font-size: 1.7rem !important;
        line-height: 1.2;
    }

    .hero-dark-subtitle {
        font-size: 0.9rem;
        margin: 0 auto var(--s-6);
    }

    .hero-dark-search {
        flex-direction: column;
        height: auto;
        padding: 8px;
        border-radius: 12px;
        gap: 8px;
    }

    .hero-dark-search-icon {
        display: none;
    }

    .hero-dark-search-input {
        width: 100%;
        padding: 10px 12px;
    }

    .hero-dark-search-btn {
        width: 100%;
        border-radius: 8px;
        padding: 12px;
    }

    .hero-dark-tags {
        justify-content: center;
    }

    .hero-dark-stats {
        flex-direction: row;
        justify-content: space-around;
        gap: 8px;
        width: 100%;
    }

    .hero-dark-stat {
        align-items: center;
        flex: 1;
        text-align: center;
    }

    .hero-dark-stat::after {
        display: none;
    }

    /* Trusted Companies Strip */
    .trusted-strip {
        padding: 24px 0;
    }

    .trusted-strip-label {
        font-size: 0.7rem;
    }

    /* ======================
       5. LANDING SECTIONS
       ====================== */
    .landing-section {
        padding: 48px 0;
    }

    .landing-section-header {
        margin-bottom: 32px;
    }

    .landing-section-title {
        font-size: 1.4rem !important;
    }

    /* How It Works */
    .how-it-works-grid {
        grid-template-columns: 1fr !important;
        max-width: 360px;
        margin: 0 auto;
        gap: 24px;
    }

    /* Categories */
    .category-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .category-card-arrow {
        display: none;
    }

    /* Featured Jobs */
    .featured-jobs-grid {
        grid-template-columns: 1fr !important;
        max-width: 100%;
        gap: 16px;
    }

    /* CTA Banner */
    .cta-banner {
        padding: 48px 16px;
    }

    .cta-banner h2 {
        font-size: 1.3rem !important;
    }

    .cta-banner-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .cta-banner-actions .btn {
        width: 100%;
        max-width: 280px;
    }

    /* ======================
       6. FOOTER — hidden on mobile, bottom nav replaces it
       ====================== */
    .site-footer {
        display: none !important;
    }

    /* ======================
       7. JOBS PAGE
       ====================== */

    /* Compact page header */
    .section>.dashboard-header {
        margin-bottom: 16px !important;
    }

    .section>.dashboard-header h1 {
        font-size: 1.3rem !important;
    }

    .section>.dashboard-header .section-subtitle {
        font-size: 0.82rem !important;
        margin-bottom: 0 !important;
    }

    /* Override the desktop grid to a vertical stack */
    .jobs-page-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Hide sidebar filters on mobile */
    .jobs-page-layout>aside {
        display: none !important;
    }

    /* Header bar with count + sort */
    .jobs-header-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .jobs-sort-options {
        width: 100%;
    }

    .jobs-sort-options .form-select {
        width: 100% !important;
    }

    /* Job list cards */
    .job-list-card {
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto;
        gap: 12px !important;
        padding: 16px !important;
    }

    .job-list-logo {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.1rem !important;
    }

    .job-list-meta {
        flex-wrap: wrap;
        gap: 8px;
    }

    .job-list-tags {
        flex-wrap: wrap;
    }

    .job-list-actions {
        grid-column: 1 / -1 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding-top: 12px;
        border-top: 1px solid var(--border-light);
    }

    /* Section heading on Jobs page */
    .section-header {
        text-align: center;
    }


    /* ======================
       8. JOB DETAILS PAGE
       ====================== */
    .job-details-header {
        padding: 16px !important;
    }

    .jd-header-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }

    .jd-title-block {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .jd-logo {
        width: 56px !important;
        height: 56px !important;
        font-size: 1.5rem !important;
    }

    .jd-title h1 {
        font-size: 1.3rem !important;
    }

    .jd-company-row {
        font-size: 0.95rem !important;
    }

    .jd-meta-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .jd-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .jd-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Content + Sidebar layout */
    .job-details-layout {
        display: flex !important;
        flex-direction: column !important;
        padding: 16px !important;
        gap: 16px !important;
    }

    .jd-content {
        padding: 16px !important;
    }

    .jd-sidebar {
        width: 100% !important;
    }

    .jd-card {
        padding: 16px !important;
    }

    /* ======================
       9. DASHBOARD
       ====================== */
    .dashboard {
        grid-template-columns: 1fr !important;
        display: block !important;
        min-height: auto !important;
    }

    /* Hide sidebar entirely — bottom nav replaces it */
    .dashboard-sidebar {
        display: none !important;
    }

    /* Dashboard main content area */
    .dashboard>main {
        padding: 16px !important;
    }

    /* Welcome banner */
    .dashboard-welcome {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 16px !important;
    }

    .dashboard-welcome h1,
    .welcome-text h1 {
        font-size: 1.4rem !important;
    }

    .welcome-stats {
        width: 100% !important;
        justify-content: space-between !important;
        flex-wrap: wrap;
        gap: 12px !important;
    }

    .w-stat {
        text-align: center !important;
    }

    /* Admin stat cards */
    .admin-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    .admin-stat-card {
        padding: 16px !important;
    }

    .stat-value,
    .admin-stat-card .stat-value {
        font-size: 1.5rem !important;
    }

    /* Admin table: horizontal scroll */
    .admin-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Filter chips row */
    .filter-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }

    /* ======================
       10. GLOBAL BUTTON FIX
       ====================== */
    .btn {
        white-space: normal;
        text-align: center;
    }

    .btn-lg {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
}