/*
 * Mobile Optimizations - Zubopact 2026
 * Final override layer: loads AFTER all page-specific CSS
 * Fixes: grid layouts, touch targets, spacing, overflow, typography
 * Breakpoints: 991px (tablet), 767px (phone), 575px (small), 400px (tiny)
 */

/* ============================================
   1. THREE-COLUMN DASHBOARD GRIDS → SINGLE COLUMN
   Affects: job-seeker, recruiter, freelancer, company dashboards
   ============================================ */

@media (max-width: 991px) {
    .main-wrapper {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 16px !important;
    }

    /* Sidebar profile cards: full width on tablet */
    .main-wrapper>div:first-child,
    .main-wrapper>div:last-child {
        max-width: 100% !important;
    }

    /* Stats grids: 2 columns on tablet */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 575px) {
    .main-wrapper {
        padding: 10px !important;
        gap: 12px !important;
    }

    /* Stats grids: still 2 columns on phone for compact view */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .stat-box {
        padding: 12px !important;
    }

    .stat-box-number {
        font-size: 20px !important;
    }

    .stat-box-label {
        font-size: 11px !important;
    }
}

/* ============================================
   2. TWO-COLUMN LAYOUTS → SINGLE COLUMN
   Affects: explore, advanced-job-search, blog, bid-details, etc.
   ============================================ */

@media (max-width: 767px) {

    /* Any sidebar + content layout */
    .ajs-layout,
    .ep-layout {
        grid-template-columns: 1fr !important;
    }

    /* Bid details, post-bid, company profile sidebars */
    .bd-layout,
    .pb-layout {
        grid-template-columns: 1fr !important;
    }

    /* Community feed layout */
    .lk-layout {
        grid-template-columns: 1fr !important;
    }

    /* Hide sidebars on mobile (keep on tablet) */
    .lk-sidebar-right {
        display: none !important;
    }
}

@media (max-width: 991px) {

    /* Community layout on tablet: hide right sidebar, keep left mini */
    .lk-layout {
        grid-template-columns: minmax(0, 600px) !important;
        justify-content: center !important;
    }

    .lk-sidebar-left,
    .lk-sidebar-right {
        display: none !important;
    }
}

/* ============================================
   3. TRANSACTION/INVOICE DETAIL PAGES
   ============================================ */

@media (max-width: 767px) {
    .transaction-header {
        flex-direction: column !important;
        padding: 20px !important;
        gap: 12px !important;
    }

    .transaction-header .header-left {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .container-wrapper {
        max-width: 100% !important;
        padding: 0 12px !important;
    }

    .detail-card,
    .info-section {
        padding: 16px !important;
    }

    /* Invoice items table scroll */
    .invoice-items-wrapper,
    .items-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

@media (max-width: 575px) {
    .container-wrapper {
        padding: 0 8px !important;
    }
}

/* ============================================
   4. VIEW APPLICANTS / VIEW BIDS PAGES
   ============================================ */

@media (max-width: 767px) {

    .va-stats,
    .vb-stats {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .va-stat,
    .vb-stat {
        min-width: 100% !important;
        padding: 12px 16px !important;
    }

    .va-stat-num,
    .vb-stat-num {
        font-size: 22px !important;
    }

    .va-header,
    .vb-header {
        padding: 20px 0 !important;
    }

    .va-header h1,
    .vb-header h1 {
        font-size: 18px !important;
    }

    /* Applicant/bid cards */
    .applicant-card,
    .bid-card {
        padding: 14px !important;
    }

    .applicant-card .d-flex,
    .bid-card .d-flex {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Action buttons stack vertically */
    .applicant-actions,
    .bid-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .applicant-actions .btn,
    .bid-actions .btn {
        flex: 1 !important;
        min-width: 100px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   5. PRIVACY / TWO-FACTOR AUTH / WITHDRAW
   (Standalone dark-bg pages with .container)
   ============================================ */

@media (max-width: 767px) {

    /* These pages use inline styles with max-width containers */
    .header,
    .card-section,
    .settings-card,
    .request-card,
    .method-card {
        padding: 16px !important;
        border-radius: 10px !important;
    }

    .header h1 {
        font-size: 20px !important;
    }

    .header p {
        font-size: 13px !important;
    }

    /* Two-factor auth: QR code and input */
    .qr-code img,
    .qr-code canvas {
        max-width: 180px !important;
        height: auto !important;
    }

    .otp-input {
        letter-spacing: 8px !important;
        font-size: 24px !important;
        padding: 12px 16px !important;
    }

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

    /* Withdraw form */
    .page-header h1 {
        font-size: 22px !important;
    }
}

@media (max-width: 575px) {
    body {
        padding: 12px !important;
    }

    .header,
    .card-section {
        padding: 14px !important;
    }
}

/* ============================================
   6. SIGNUP ROLE SELECTION
   ============================================ */

@media (max-width: 575px) {

    /* Role cards grid */
    .role-grid,
    .roles-grid,
    [class*="role"]>.d-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

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

/* ============================================
   7. SEO EDITOR / TALENT SEARCH
   ============================================ */

@media (max-width: 767px) {

    .seo-layout,
    .ts-layout {
        grid-template-columns: 1fr !important;
    }

    .seo-sidebar,
    .ts-sidebar {
        order: -1 !important;
    }

    .seo-preview,
    .ts-filters {
        max-width: 100% !important;
    }
}

/* ============================================
   8. GLOBAL TOUCH TARGET FIXES (minimum 44px)
   ============================================ */

@media (max-width: 767px) {

    /* Ensure all interactive elements are tappable */
    .btn,
    button,
    a.btn,
    .nav-link,
    .dropdown-item,
    .form-check-input,
    .pagination .page-link {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Small buttons get padding boost */
    .btn-sm {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    /* Icon-only buttons */
    .btn-icon,
    .btn-circle,
    .close,
    .btn-close {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Pagination */
    .pagination .page-link {
        padding: 10px 14px !important;
        font-size: 14px !important;
    }

    /* Nav links in sidebar/menus */
    .mobile-submenu-item,
    .mobile-menu-item {
        min-height: 44px !important;
        padding: 12px 16px !important;
    }
}

/* ============================================
   9. GLOBAL OVERFLOW PREVENTION
   ============================================ */

@media (max-width: 767px) {

    /* Prevent content from breaking layout */
    .card,
    .feed-card,
    .jd-card,
    .profile-card,
    .stat-box,
    [class*="-card"],
    [class*="-section"] {
        overflow: hidden !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Long text truncation */
    .card-name,
    .card-title,
    .job-title,
    .jd-title {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    /* Tables always scrollable */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    thead,
    tbody,
    tr {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    /* Pre/code blocks */
    pre,
    code {
        overflow-x: auto !important;
        white-space: pre-wrap !important;
        word-break: break-all !important;
    }

    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ============================================
   10. SPACING REDUCTION FOR MOBILE
   ============================================ */

@media (max-width: 767px) {

    /* Reduce excessive paddings */
    .container,
    .container-lg,
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Page headers */
    .jd-header,
    .page-header-dark,
    [class*="-header"]:not(.modal-header):not(.card-header):not(.offcanvas-header) {
        padding: 16px 0 !important;
    }

    /* Reduce large gaps */
    .row.g-4,
    .row.g-5 {
        --bs-gutter-x: 12px !important;
        --bs-gutter-y: 12px !important;
    }

    .row.g-3 {
        --bs-gutter-x: 10px !important;
        --bs-gutter-y: 10px !important;
    }

    /* Feed cards */
    .feed-card {
        padding: 14px !important;
        margin-bottom: 12px !important;
    }

    /* Section titles */
    .feed-title,
    .section-title {
        font-size: 16px !important;
    }
}

@media (max-width: 575px) {

    .container,
    .container-lg,
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ============================================
   11. MOBILE TYPOGRAPHY SCALE
   ============================================ */

@media (max-width: 767px) {

    h1,
    .h1 {
        font-size: clamp(20px, 5vw, 28px) !important;
    }

    h2,
    .h2 {
        font-size: clamp(18px, 4vw, 24px) !important;
    }

    h3,
    .h3 {
        font-size: clamp(16px, 3.5vw, 20px) !important;
    }

    h4,
    .h4 {
        font-size: clamp(14px, 3vw, 18px) !important;
    }

    /* Body text */
    p,
    .text-body,
    li {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* Small text */
    small,
    .text-muted,
    .text-secondary {
        font-size: 12px !important;
    }
}

@media (max-width: 400px) {

    h1,
    .h1 {
        font-size: 20px !important;
    }

    h2,
    .h2 {
        font-size: 18px !important;
    }

    p,
    .text-body,
    li {
        font-size: 13px !important;
    }
}

/* ============================================
   12. JOB DETAIL PAGE MOBILE FIXES
   ============================================ */

@media (max-width: 767px) {
    .jd-page {
        padding: 0 !important;
    }

    .jd-card {
        border-radius: 0 !important;
        margin-bottom: 8px !important;
    }

    .jd-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .jd-btn-apply,
    .jd-btn-save {
        flex: 1 !important;
        min-width: 120px !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .jd-meta {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .jd-tags {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .jd-title {
        font-size: 18px !important;
    }

    /* Sticky sidebar becomes normal flow */
    .jd-card-sm[style*="sticky"] {
        position: relative !important;
        top: auto !important;
    }
}

/* ============================================
   13. CHART/CANVAS RESPONSIVE
   ============================================ */

@media (max-width: 767px) {

    .chart-panel,
    .chart-canvas-wrap {
        min-height: 200px !important;
        max-height: 280px !important;
    }

    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ============================================
   14. MESSAGES PAGE MOBILE
   ============================================ */

@media (max-width: 767px) {

    .messages-layout,
    .msg-layout {
        grid-template-columns: 1fr !important;
    }

    /* Show conversation list or chat, not both */
    .msg-sidebar,
    .messages-sidebar {
        max-height: 300px !important;
        overflow-y: auto !important;
    }

    .msg-body,
    .messages-body {
        min-height: 400px !important;
    }
}

/* ============================================
   15. EXPLORE PAGE CARD GRID
   ============================================ */

@media (max-width: 767px) {
    .ep-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .profile-card .card-actions {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .profile-card .card-actions .btn-view,
    .profile-card .card-actions .btn-connect {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .ep-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   16. NOTIFICATION CENTER MOBILE
   ============================================ */

@media (max-width: 767px) {

    .notification-tabs,
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .notification-tabs::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .nav-tabs .nav-link {
        white-space: nowrap !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
    }
}

/* ============================================
   17. RESUME BUILDER / AI RESUME MOBILE
   ============================================ */

@media (max-width: 767px) {

    .rb-layout,
    .arb-layout {
        grid-template-columns: 1fr !important;
    }

    .rb-preview,
    .arb-preview {
        max-height: 500px !important;
        overflow-y: auto !important;
    }
}

/* ============================================
   18. APPLICATION TRACKER MOBILE
   ============================================ */

@media (max-width: 767px) {

    .kanban-board,
    .at-board {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        gap: 12px !important;
        padding-bottom: 16px !important;
    }

    .kanban-column,
    .at-column {
        min-width: 260px !important;
        flex-shrink: 0 !important;
    }
}

/* ============================================
   19. PAYMENT / WALLET PAGES
   ============================================ */

@media (max-width: 767px) {

    .wallet-balance,
    .balance-card {
        padding: 16px !important;
        text-align: center !important;
    }

    .wallet-balance h2,
    .balance-amount {
        font-size: 28px !important;
    }

    .payment-methods-grid,
    .pm-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   20. SAFE AREA INSETS (NOTCH PHONES)
   ============================================ */

@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 767px) {
        body {
            padding-bottom: env(safe-area-inset-bottom) !important;
        }

        .navbar-premium {
            padding-left: max(12px, env(safe-area-inset-left)) !important;
            padding-right: max(12px, env(safe-area-inset-right)) !important;
        }

        .modal-footer,
        .offcanvas-body {
            padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ============================================
   21. PERFORMANCE: REDUCE HEAVY EFFECTS ON MOBILE
   ============================================ */

@media (max-width: 767px) {

    /* Remove expensive shadows on mobile */
    .card,
    .feed-card,
    .stat-box,
    [class*="-card"] {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    }

    /* Disable hover transforms on touch devices */
    .card:hover,
    .profile-card:hover,
    .stat-box:hover,
    [class*="-card"]:hover {
        transform: none !important;
    }

    /* Simplify gradients */
    .hero-wrapper {
        background-attachment: scroll !important;
    }
}

/* ============================================
   22. LANDSCAPE PHONE FIXES
   ============================================ */

@media (orientation: landscape) and (max-height: 500px) {
    .main-wrapper {
        grid-template-columns: 1fr 2fr !important;
    }

    .main-wrapper>div:last-child {
        display: none !important;
    }

    .modal-dialog {
        max-height: 90vh !important;
        margin: 5px auto !important;
    }

    .modal-body {
        max-height: 60vh !important;
        overflow-y: auto !important;
    }
}