/* =========================================================
   THE AI MATTERS
   MOBILE APP ONLY CSS
   DESKTOP IS NOT TOUCHED
   ========================================================= */


/* =========================================================
   TABLET + MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

    /* ---------- BASIC MOBILE SAFETY ---------- */

    html {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        overflow-x: hidden !important;

        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

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


    /* =====================================================
       IMAGES / MEDIA
       ===================================================== */

    img,
    video,
    iframe,
    canvas {
        max-width: 100% !important;
    }

    img {
        height: auto;
    }


    /* =====================================================
       HEADER
       ===================================================== */

    header,
    .main-header,
    .site-header,
    .header {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }

    .header-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       HAMBURGER MENU
       ===================================================== */

    .mobile-overlay {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100vw !important;
        max-width: 100vw !important;

        height: 100vh !important;
        height: 100dvh !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;

        z-index: 99999 !important;
    }

    .mobile-box {
        position: absolute !important;

        top: 0 !important;
        bottom: 0 !important;

        right: -100% !important;
        left: auto !important;

        width: min(88vw, 360px) !important;
        max-width: 88vw !important;

        height: 100% !important;

        margin: 0 !important;

        box-sizing: border-box !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        transition: right .3s ease !important;
    }

    .mobile-overlay.active .mobile-box {
        right: 0 !important;
    }


    /* =====================================================
       FORMS
       ===================================================== */

    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    input,
    select,
    textarea {
        -webkit-appearance: none;
    }


    /* Prevent iPhone/Android input zoom */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }


    /* =====================================================
       TABLES
       ===================================================== */

    table {
        max-width: 100% !important;
    }

    .table-responsive,
    .table-container,
    .table-wrapper {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto !important;

        -webkit-overflow-scrolling: touch !important;
    }


    /* =====================================================
       COMMON MODALS / POPUPS
       ===================================================== */

    .modal,
    .modal-content,
    .popup,
    .popup-content,
    .dialog {
        box-sizing: border-box !important;

        max-width: calc(100vw - 24px) !important;
    }

    .modal-content,
    .popup-content {
        max-height: calc(100dvh - 24px) !important;

        overflow-y: auto !important;
    }


    /* =====================================================
       LONG TEXT
       ===================================================== */

    p,
    span,
    a,
    td,
    th {
        overflow-wrap: break-word;
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    footer,
    .footer,
    .site-footer,
    .main-footer {
        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* =====================================================
       SEARCH JOB / DASHBOARD
       
       ONLY applies when these classes actually exist.
       Does NOT change other pages.
       ===================================================== */

    .dashboard-layout {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box !important;
    }

    .dashboard-layout > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .premium-sidebar {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #premiumResultsContainer {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .premium-card {
        max-width: 100% !important;
        min-width: 0 !important;
    }


    /* =====================================================
       FLEX CONTENT SAFETY
       ===================================================== */

    .card-content-main,
    .content-main,
    .left-content,
    .right-content {
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* =====================================================
       VERY SMALL PHONES
       ===================================================== */

    @media screen and (max-width: 380px) {

        .mobile-box {
            width: 90vw !important;
            max-width: 90vw !important;
        }

        .modal,
        .modal-content,
        .popup,
        .popup-content,
        .dialog {
            max-width: calc(100vw - 16px) !important;
        }
    }
}