/* ═══════════════════════════════════════════════════════
   CareerHai - Mobile Responsiveness Fix
   Targets: 320px, 360px, 375px, 390px, 412px, 768px
   Fixes: overflow, hidden elements, wrapping, flex breaks
   ═══════════════════════════════════════════════════════ */

/* ─── Global Mobile-First Utilities ─── */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Prevent any element from exceeding viewport */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* ─── Responsive Text Utilities ─── */
@media (max-width: 768px) {
    /* Force word-break on long text */
    h1, h2, h3, h4, h5, h6, p, span, a, div, li, td, th, label {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }

    /* Prevent horizontal scroll from any element */
    body {
        min-width: 0;
    }

    body > * {
        max-width: 100vw;
    }

    /* ─── Bottom Nav Overlap Fix ─── */
    body {
        padding-bottom: 72px !important;
    }

    /* ─── Navbar Fix ─── */
    .navbar {
        height: 48px !important;
    }

    .nav-container {
        height: 48px !important;
        padding: 0 10px !important;
        gap: 6px !important;
    }

    .nav-container img {
        height: 32px !important;
        width: auto !important;
    }

    /* ─── Main Container - Single Column ─── */
    .main-container {
        grid-template-columns: 1fr !important;
        padding: 0 12px !important;
        gap: 1rem !important;
        margin-top: 56px !important;
    }

    /* ─── Job Cards ─── */
    .job-card {
        padding: 14px !important;
        margin-bottom: 12px !important;
        border-radius: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .job-header {
        flex-wrap: wrap !important;
    }

    .job-header h4 {
        font-size: 1rem !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }

    .job-header .company {
        font-size: 0.85rem !important;
    }

    /* ─── Job Meta Tags - Wrap Properly ─── */
    .job-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: flex-start !important;
    }

    .job-meta span {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }

    /* ─── Job Skills Chips ─── */
    .job-skills {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }

    .job-skills .skill {
        font-size: 0.72rem !important;
        padding: 3px 8px !important;
        white-space: nowrap !important;
    }

    /* ─── Job Actions ─── */
    .job-actions {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .job-actions .btn,
    .job-actions .apply-btn,
    .job-actions .view-details-btn,
    .job-actions .save-job-btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
        min-width: 0 !important;
    }

    /* ─── Ads Section ─── */
    .ads-section {
        width: 100% !important;
    }

    .ad-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ─── Empty State ─── */
    .empty-state {
        padding: 2.5rem 1rem !important;
    }

    .empty-state .icon {
        font-size: 3rem !important;
    }

    .empty-state h3 {
        font-size: 1.1rem !important;
    }

    .empty-state p {
        font-size: 0.88rem !important;
    }

    /* ─── Buttons - Ensure Visibility ─── */
    .btn, button, a.btn {
        min-height: 40px !important;
        min-width: 0 !important;
    }

    /* ─── Inputs - Stay Within Screen ─── */
    input, select, textarea {
        max-width: 100% !important;
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    .form-group input, .form-group select, .form-group textarea,
    .fg input, .fg select, .fg textarea {
        width: 100% !important;
    }

    /* ─── Dashboard Specific ─── */
    .dw {
        grid-template-columns: 1fr !important;
        padding: 56px 12px 12px !important;
        gap: 12px !important;
    }

    .lc {
        position: static !important;
        border-radius: 12px !important;
    }

    .rc {
        position: static !important;
    }

    /* Dashboard Tabs */
    .tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

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

    .tab {
        padding: 6px 12px !important;
        font-size: 0.78rem !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Dashboard Sidebar Buttons */
    .sb-btn {
        font-size: 0.74rem !important;
        padding: 7px 10px !important;
    }

    /* ─── Complaint Modal ─── */
    .modal-box {
        width: 94% !important;
        max-width: 100% !important;
        margin: 10px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    .modal-bd {
        padding: 14px !important;
    }

    .fg input, .fg select, .fg textarea {
        font-size: 14px !important;
    }

    /* ─── Popup Box ─── */
    .ch-popup {
        width: 92% !important;
        max-width: 340px !important;
        padding: 1.5rem !important;
    }

    .ch-popup-title {
        font-size: 1rem !important;
    }

    .ch-popup-msg {
        font-size: 0.82rem !important;
    }

    /* Share popup buttons */
    .ch-popup-msg a,
    .ch-popup-msg button {
        padding: 8px 12px !important;
        font-size: 11px !important;
        border-radius: 10px !important;
    }

    /* ─── Job Details Page ─── */
    .job-header[style*="display:flex"] {
        flex-wrap: wrap !important;
    }

    .job-header img[style*="width:75px"] {
        width: 50px !important;
        height: 50px !important;
    }

    /* ─── Detail Box ─── */
    .detail-box {
        padding: 1rem !important;
        font-size: 0.85rem !important;
        overflow-wrap: break-word !important;
    }

    .detail-box ul {
        padding-left: 1rem !important;
    }

    /* ─── Benefits Chips ─── */
    div[style*="display:flex"][style*="flex-wrap:wrap"] {
        gap: 5px !important;
    }

    div[style*="display:flex"][style*="flex-wrap:wrap"] span {
        font-size: 0.75rem !important;
    }
}

/* ═══ 412px - Standard Android (Pixel, Samsung) ═══ */
@media (max-width: 412px) {
    .main-container {
        padding: 0 10px !important;
    }

    .job-card {
        padding: 12px !important;
    }

    .job-header h4 {
        font-size: 0.95rem !important;
    }

    /* Stats grid in applications */
    .stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .stat .num {
        font-size: 1.3rem !important;
    }

    .stat .lbl {
        font-size: 0.65rem !important;
    }

    /* Filter tabs scroll */
    .filters {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
    }

    .filters::-webkit-scrollbar {
        display: none !important;
    }

    .ftab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}

/* ═══ 390px - iPhone 14/15 ═══ */
@media (max-width: 390px) {
    .job-meta span {
        font-size: 0.72rem !important;
        padding: 3px 6px !important;
    }

    .job-skills .skill {
        font-size: 0.7rem !important;
        padding: 2px 6px !important;
    }

    .tab {
        padding: 5px 10px !important;
        font-size: 0.74rem !important;
    }

    /* Application card */
    .ac-left h4 {
        font-size: 0.88rem !important;
    }

    .ac-meta {
        font-size: 0.72rem !important;
    }

    .status-badge {
        font-size: 0.68rem !important;
        padding: 4px 10px !important;
    }
}

/* ═══ 375px - iPhone SE 2nd/3rd, iPhone 12 mini ═══ */
@media (max-width: 375px) {
    .main-container {
        padding: 0 8px !important;
        margin-top: 52px !important;
    }

    .job-card {
        padding: 10px !important;
    }

    .job-header h4 {
        font-size: 0.9rem !important;
    }

    .job-header .company {
        font-size: 0.8rem !important;
    }

    .job-meta span {
        font-size: 0.7rem !important;
    }

    /* Dashboard */
    .dw {
        padding: 52px 8px 8px !important;
    }

    .pn {
        font-size: 0.95rem !important;
    }

    .vp {
        padding: 6px 16px !important;
        font-size: 0.75rem !important;
    }

    /* Buttons */
    .browse-btn,
    .apply-btn,
    .btn-apply {
        padding: 8px 14px !important;
        font-size: 0.82rem !important;
    }

    /* Modal */
    .modal-box,
    .ch-popup {
        width: 96% !important;
        padding: 1.2rem !important;
    }
}

/* ═══ 360px - Samsung Galaxy S series, older Androids ═══ */
@media (max-width: 360px) {
    .job-header h4 {
        font-size: 0.88rem !important;
    }

    .job-meta {
        gap: 4px !important;
    }

    .job-meta span {
        font-size: 0.68rem !important;
        padding: 3px 5px !important;
    }

    .job-skills .skill {
        font-size: 0.68rem !important;
        padding: 2px 5px !important;
    }

    .tab {
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
    }

    /* Stats */
    .stat {
        padding: 10px 6px !important;
    }

    .stat .num {
        font-size: 1.1rem !important;
    }

    /* Application cards */
    .ac-body {
        padding: 10px 12px !important;
    }

    .ac-left h4 {
        font-size: 0.82rem !important;
    }

    .tl-tag {
        font-size: 0.62rem !important;
        padding: 2px 6px !important;
    }

    /* Section headers */
    .ah h2 {
        font-size: 1.1rem !important;
    }

    .section-header h3,
    .job-section h3 {
        font-size: 1.1rem !important;
    }
}

/* ═══ 320px - iPhone SE 1st gen, very small screens ═══ */
@media (max-width: 320px) {
    body {
        font-size: 13px !important;
    }

    .main-container {
        padding: 0 6px !important;
        margin-top: 48px !important;
    }

    .dw {
        padding: 48px 6px 6px !important;
    }

    .job-card {
        padding: 8px !important;
        margin-bottom: 8px !important;
    }

    .job-header h4 {
        font-size: 0.82rem !important;
    }

    .job-header .company {
        font-size: 0.75rem !important;
    }

    .job-meta span {
        font-size: 0.65rem !important;
        padding: 2px 4px !important;
    }

    .job-skills .skill {
        font-size: 0.65rem !important;
    }

    .job-actions .btn,
    .job-actions .apply-btn,
    .job-actions .view-details-btn,
    .job-actions .save-job-btn {
        padding: 8px 10px !important;
        font-size: 0.78rem !important;
    }

    /* Dashboard left card */
    .lc {
        padding: 1rem !important;
    }

    .pp {
        width: 60px !important;
        height: 60px !important;
    }

    .pp img {
        width: 54px !important;
        height: 54px !important;
    }

    .pp-ring-svg {
        width: 68px !important;
        height: 68px !important;
    }

    .pn {
        font-size: 0.88rem !important;
    }

    .pla {
        font-size: 0.72rem !important;
        padding: 5px 0 !important;
    }

    /* Tabs */
    .tab {
        padding: 4px 6px !important;
        font-size: 0.68rem !important;
    }

    /* Stats */
    .stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
    }

    .stat {
        padding: 8px 4px !important;
        border-radius: 8px !important;
    }

    .stat .num {
        font-size: 1rem !important;
    }

    .stat .lbl {
        font-size: 0.6rem !important;
    }

    /* Filter tabs */
    .ftab {
        padding: 4px 8px !important;
        font-size: 0.68rem !important;
    }

    /* Application card */
    .ac-left h4 {
        font-size: 0.78rem !important;
    }

    .ac-meta {
        font-size: 0.68rem !important;
    }

    .status-badge {
        font-size: 0.62rem !important;
        padding: 3px 8px !important;
    }

    /* Modal */
    .modal-box,
    .ch-popup {
        width: 98% !important;
        padding: 1rem !important;
        margin: 4px !important;
    }

    .modal-hd h3 {
        font-size: 0.88rem !important;
    }

    /* Empty state */
    .empty-state,
    .empty {
        padding: 2rem 0.8rem !important;
    }

    .empty-state h3,
    .empty h3 {
        font-size: 1rem !important;
    }

    .empty-state p,
    .empty p {
        font-size: 0.8rem !important;
    }
}

/* ═══ Cross-Browser Fixes ═══ */

/* Samsung Internet - flex gap fallback */
@supports not (gap: 1rem) {
    .job-meta span {
        margin-right: 6px;
        margin-bottom: 6px;
    }
    .job-skills .skill {
        margin-right: 4px;
        margin-bottom: 4px;
    }
    .job-actions .btn {
        margin-bottom: 6px;
    }
}

/* Safari iOS - input zoom prevention */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
        -webkit-appearance: none;
        appearance: none;
        border-radius: 8px;
    }
}

/* MI Browser - overflow fix */
@media (max-width: 768px) {
    .job-card,
    .ac,
    .stat,
    .ad-card,
    .sb {
        overflow: hidden !important;
    }

    /* Ensure SVG icons are always visible */
    svg {
        flex-shrink: 0 !important;
        min-width: 14px !important;
        min-height: 14px !important;
    }
}

/* ─── Bottom Nav Safe Area ─── */
@media (max-width: 768px) {
    .ch-bnav {
        padding-bottom: env(safe-area-inset-bottom, 6px) !important;
    }

    /* Prevent content from hiding behind bottom nav */
    .aw,
    .main-container,
    .dw {
        padding-bottom: 80px !important;
    }

    /* Chatbot button above bottom nav */
    .ch-chatbot-btn,
    [id*="chatbot-btn"],
    [class*="chatbot-btn"] {
        bottom: 80px !important;
    }
}

/* ─── Scrollable Chips Pattern ─── */
@media (max-width: 768px) {
    .chips-inner,
    .filter-chips .chips-inner {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
    }

    .chips-inner::-webkit-scrollbar {
        display: none !important;
    }

    .chip {
        flex-shrink: 0 !important;
    }
}

/* ─── Jobs Page Specific ─── */
@media (max-width: 768px) {
    .search-bar .search-inner {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 0 12px !important;
    }

    .search-bar .search-inner input {
        width: 100% !important;
        flex: none !important;
    }

    .search-bar .search-inner button {
        width: 100% !important;
    }

    .main .job-list {
        width: 100% !important;
        min-width: 0 !important;
    }

    .result-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .job-card-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .job-card-top > div:first-child {
        width: 100% !important;
        min-width: 0 !important;
    }

    .job-card-top img[style*="width:60px"] {
        width: 44px !important;
        height: 44px !important;
    }

    .job-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .job-footer .job-actions {
        width: 100% !important;
    }

    .job-footer .btn-apply {
        width: 100% !important;
        text-align: center !important;
    }

    .job-footer .btn-save {
        width: auto !important;
    }

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

    .page-btn {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
    }
}

/* ─── Saved Jobs Page ─── */
@media (max-width: 768px) {
    .saved-jobs-container {
        width: 100% !important;
    }
}

/* ─── Profile Page Inputs ─── */
@media (max-width: 768px) {
    .contact-input,
    .bd-input,
    .form-group input,
    .form-group select,
    .form-group textarea {
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* ─── Icon Visibility Fix ─── */
@media (max-width: 768px) {
    .contact-icon,
    .edit-icon,
    .stat-icon,
    [class*="icon"] svg,
    .job-meta svg {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ─── Card Width Consistency ─── */
@media (max-width: 768px) {
    .job-card,
    .ac,
    .ad-card,
    .sb,
    .filter-box,
    .experience-item,
    .education-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .profile-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }
}

/* ─── Flex Items Min-Width Fix ─── */
@media (max-width: 768px) {
    [style*="display:flex"] > *,
    .job-meta > *,
    .job-skills > *,
    .job-actions > *,
    .ac-body > *,
    .ac-inner > * {
        min-width: 0;
    }
}