/* ==========================================================================
   HireMee PRO - phone-only responsive overrides
   --------------------------------------------------------------------------
   * Linked as the LAST stylesheet in index.html <head>.
   * Every rule is inside @media (max-width: 767.98px) or narrower, EXCEPT the
     single .hm-ty-top rule below, which reproduces a former inline style 1:1.
   * Nothing here applies at >= 768px (tablet / desktop render as before).
   * Scoped (*.razor.css) rules carry an extra [b-xxxx] attribute, so the
     overrides below use one more class/element or !important to win.
   ========================================================================== */

/* Moved from the inline style in ThankyouContent.razor (identical value, all widths). */
.hm-ty-top {
    margin-top: 4.375rem !important;
}

/* ==========================================================================
   1. Tokens + global (phones)
   ========================================================================== */
@media (max-width: 767.98px) {
    :root {
        --hm-header-h: 3.5rem;
        --hm-gutter: .75rem;
    }

    /* safety net against sideways page scroll (clip, not hidden: keeps position:sticky working) */
    #app {
        overflow-x: clip;
    }

    /* iOS Safari zooms into any field < 16px on focus */
    .form-control,
    .form-select,
    textarea,
    .select2-search__field {
        font-size: 16px !important;
    }

    .form-label {
        font-size: .875rem;
    }

    .btn {
        min-height: 2.5rem;
        font-size: .8125rem;
    }

    .fs-10 {
        font-size: .6875rem;
    }

    .fs-11 {
        font-size: .75rem;
    }

    .sidebar-mail,
    .file-note {
        font-size: .75rem;
    }

    .loader-bg,
    .loader-overlay {
        height: 100dvh;
        width: 100%;
    }

    /* select2 had min-width:25rem (400px) */
    .select2-container {
        min-width: 0 !important;
    }

    .select2-results__option {
        min-width: 50%;
    }

    /* rich HTML from the editor (questions, consent, instructions, thank-you) */
    .question-layout,
    .consent-form-content,
    .thankyou-h-set {
        overflow-wrap: anywhere;
    }

    .question-layout table,
    .consent-form-content table,
    .thankyou-h-set table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .question-layout pre,
    .consent-form-content pre {
        white-space: pre-wrap;
    }

    .question-layout video,
    .question-layout iframe,
    .consent-form-content iframe {
        max-width: 100%;
    }

    .consent-form-content img {
        height: auto !important;
    }

    /* SweetAlert2 */
    .swal2-popup {
        max-height: calc(100dvh - 1rem);
        overflow-y: auto;
    }

    /* iziToast top positions would sit on the fixed header */
    .iziToast-wrapper-topRight,
    .iziToast-wrapper-topCenter,
    .iziToast-wrapper-topLeft {
        top: var(--hm-header-h) !important;
    }

    /* Bootstrap modals: tall fixed heights and inline min-heights */
    .modal.show .modal-content[style*="min-height"] {
        min-height: 0 !important;
    }

    .modal-body-custom-zoom {
        min-height: 0;
        max-height: 75dvh;
    }

    .modal-h {
        min-height: 0;
        max-height: calc(100dvh - 10rem);
    }

    .preview-form {
        min-height: 0;
        max-height: 70dvh;
    }
}

@media (max-width: 575.98px) {
    /* existing <=991 rule (min-width:100% !important) + Bootstrap .5rem margin = 1rem too wide */
    .modal.show .modal-dialog {
        min-width: 0 !important;
        max-width: none !important;
        width: auto;
        margin: .5rem !important;
    }
}

/* ==========================================================================
   2. Fixed header -> one compact row (steps, exam, thank-you, feedback)
      Below 768px the Bootstrap columns stack into 3-4 rows and the fixed
      header covers the page content.
   ========================================================================== */
@media (max-width: 767.98px) {
    header > .row.header {
        flex-wrap: nowrap;
        align-items: center;
        height: var(--hm-header-h);
        margin: 0;
        padding: .25rem var(--hm-gutter);
        column-gap: .5rem;
    }

        header > .row.header > * {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
            padding: 0;
            margin-top: 0;
        }

        /* logo */
        header > .row.header > :first-child img {
            height: 2rem;
            width: auto;
            max-width: 6rem;
            object-fit: contain;
        }

        /* assessment title (responsive.css hides it below 575px; show it truncated instead) */
        header > .row.header > :nth-child(2) {
            display: block !important;
            flex: 1 1 auto;
            min-width: 0;
            padding-left: 0 !important;
            text-align: left !important;
        }

            header > .row.header > :nth-child(2) h6 {
                font-size: .875rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            header > .row.header > :nth-child(2) .badge {
                font-size: .625rem !important;
                padding: .2em .45em;
            }

        /* e-mail column (steps / thank-you / feedback) */
        header > .row.header > .text-end {
            display: none !important;
        }

        /* live proctoring camera: in the header row instead of absolute top-right */
        header > .row.header .proctoring-camera-wrapper {
            position: relative !important;
            top: auto !important;
            right: auto !important;
            width: 4rem !important;
            height: 3rem !important;
        }

            header > .row.header .proctoring-camera-wrapper video {
                border-width: 2px !important;
                border-radius: .25rem;
            }

        /* timer (scoped .header-timer[b-x] -> needs the longer selector) */
        header > .row.header .header-timer:not(.hidden) {
            font-size: .75rem;
            padding: .25rem .5rem;
            min-width: 5.25rem;
        }

    /* content offsets that depended on the old header height */
    .main-layout {
        padding-top: var(--hm-header-h) !important;
    }

    .landingtop {
        margin-top: calc(var(--hm-header-h) + .5rem) !important;
    }

        .landingtop.pt-5 {
            padding-top: 0 !important;
        }

        .landingtop.m-3,
        .landingtop.m-5 {
            margin-left: .5rem !important;
            margin-right: .5rem !important;
            margin-bottom: .5rem !important;
        }

        .landingtop[style*="padding"] {
            padding: .75rem !important;
        }
}

/* ==========================================================================
   3. Login / Test pin / Registration
   ========================================================================== */
@media (max-width: 767.98px) {
    .right-div {
        height: auto;
        min-height: 100dvh;
        gap: 1.5rem;
    }

    .registration-wrapper .title {
        font-size: 1.25rem;
        margin-top: .75rem;
    }

    .right-side-height {
        max-height: none;
        overflow: visible;
    }

    .right-panel .content {
        min-height: 0;
    }

    .registration-wrapper .d-flex > .btn.p-0 {
        min-width: 2.5rem;
        min-height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #cameraPreview {
        height: auto;
        max-height: 55dvh;
        width: 100%;
        object-fit: cover;
    }

    .preview-card img {
        height: auto;
        max-height: 50dvh;
    }

    #previewModal iframe {
        height: 65dvh !important;
    }
}

/* ==========================================================================
   4. Assessment steps (stepper, system check, training photo, consent, instructions)
   ========================================================================== */
@media (max-width: 767.98px) {
    /* stepper: vertical list -> horizontal scrollable strip */
    .main-layout.maincus {
        display: block !important;
    }

    .maincus .sidebarcus {
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        min-height: 0 !important;
        padding: .5rem var(--hm-gutter);
        border-right: 0;
        border-bottom: 1px solid #EDEDED;
        gap: .25rem;
        scrollbar-width: none;
    }

        .maincus .sidebarcus > h6 {
            display: none;
        }

        .maincus .sidebarcus .step-item {
            white-space: nowrap;
            font-size: .75rem;
            padding: .375rem .5rem;
            margin: 0;
        }

            .maincus .sidebarcus .step-item::after {
                display: none;
            }

            .maincus .sidebarcus .step-item::before {
                width: 1.5rem;
                height: 1.5rem;
                margin-right: .375rem;
                font-size: .75rem;
            }

            .maincus .sidebarcus .step-item.completed::before {
                font-size: 1rem;
            }

    /* fixed-height scroll panes -> let the page scroll (calc(100vh - X) is ~150px sideways) */
    .main-layout .step-scrollable-content,
    .scroll-info-proof-details,
    .systemlayout {
        max-height: none !important;
        min-height: 0 !important;
    }

    .main-layout .title-section,
    .main-layout .step-scrollable-content,
    .main-layout .footer-btn {
        padding-left: var(--hm-gutter);
        padding-right: var(--hm-gutter);
    }

    /* Next / Start Assessment always reachable */
    .main-layout .footer-btn {
        position: sticky;
        bottom: 0;
        z-index: 5;
        background: #fff;
        padding-bottom: calc(.5rem + env(safe-area-inset-bottom)) !important;
    }

    .footer-btn .next-btn {
        width: 100%;
    }

    .consent-form-check {
        flex: 1 1 100%;
        margin-bottom: .5rem;
    }

    /* vertical separators of stacked columns */
    .row > [class*="col-md-"].border-end {
        border-right: 0 !important;
    }

    /* training-photo camera: inline width:20rem (320px) was clipped */
    .image-or-video-frame {
        height: auto !important;          /* beats the inline height:18rem of the guided capture frame */
        max-width: 100% !important;       /* beats the inline max-width:24rem */
        aspect-ratio: 4 / 3;
        max-height: 55dvh;
    }

        /* guided capture: instruction bar under the live video (inline width:24rem) */
        .image-or-video-frame > div[style*="24rem"] {
            width: 100% !important;
        }

        .image-or-video-frame video,
        .image-or-video-frame img {
            width: 100% !important;
            height: 100% !important;
            min-width: 0;
            object-fit: cover;
        }

    /* system check */
    .step-scrollable-content .d-flex.gap-lg-4 {
        gap: .75rem 1.25rem;
    }

    .step-scrollable-content span[style*="underline"] {
        display: inline-flex;
        align-items: center;
        min-height: 2.5rem;
        padding: 0 .25rem;
    }

    .app-card .col-md-4.d-flex .mt-4 {
        margin-top: .75rem !important;
    }
}

/* ==========================================================================
   5. Exam layout: palette sidebar -> off-canvas drawer, main area, chat
   ========================================================================== */
@media (max-width: 767.98px) {
    .main-layout:not(.maincus) {
        display: block !important;
    }

        .main-layout:not(.maincus) > main {
            margin: .5rem !important;
            padding-left: 0 !important;
            width: auto !important;
            min-width: 0;
            padding-bottom: 5rem; /* room for the chat button */
        }

            .main-layout:not(.maincus) > main > .container-fluid {
                padding-left: .5rem;
                padding-right: .5rem;
            }

        /* drawer (QuestionsSidebar.razor: .sidebar / .sidebar.collapsed) */
        .main-layout:not(.maincus) aside > .sidebar {
            position: fixed !important;
            top: var(--hm-header-h);
            bottom: 0;
            left: 0;
            width: min(85vw, 20rem) !important;
            min-height: 0 !important;
            overflow-y: auto;
            z-index: 1040;
            background: #fff;
            box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
            transition: left .25s ease;
        }

            .main-layout:not(.maincus) aside > .sidebar.collapsed {
                left: calc(-1 * min(85vw, 20rem) - 2px);
                box-shadow: none;
            }

            /* toggle (img.collapseicon): fixed tab; the drawer is moved with `left`, not transform,
               so this fixed child is positioned against the viewport */
            .main-layout:not(.maincus) aside > .sidebar .collapseicon {
                position: fixed !important;
                top: calc(var(--hm-header-h) + .5rem) !important;
                left: calc(min(85vw, 20rem) - 1.25rem) !important;
                width: 2.5rem;
                height: 2.5rem;
                padding: .5rem;
                background: #fff;
                border: 1px solid #E9EAEB;
                border-radius: 50%;
                box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
                z-index: 1041;
            }

            .main-layout:not(.maincus) aside > .sidebar.collapsed .collapseicon {
                left: 0 !important;
                border-radius: 0 .5rem .5rem 0;
            }

            .main-layout:not(.maincus) aside > .sidebar .question-palatte {
                max-height: 40dvh;
            }

        /* backdrop rendered by QuestionsSidebar.razor while the drawer is open */
        .main-layout:not(.maincus) aside > .hm-sidebar-backdrop {
            position: fixed;
            top: var(--hm-header-h);
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1039;
            background: rgba(0, 0, 0, .35);
        }

        /* when collapsed the old <=991 rule adds padding-left:4.063rem; width:90% */
        .main-layout.sidebar-collapsed > main {
            padding-left: 0 !important;
            width: auto !important;
        }

    /* chat button / panel (Chat.razor) */
    .fab-container {
        right: .75rem !important;
        bottom: calc(.75rem + env(safe-area-inset-bottom)) !important;
    }

        .fab-container.active {
            left: .5rem;
            right: .5rem !important;
        }

    .chatbody {
        min-height: 0 !important;
        height: 40dvh;
        max-height: 40dvh !important; /* beats inline max-height:28.125rem */
    }

    /* audio-violation warning toast (AssessmentSectionLayout.razor) */
    .toast-container.position-fixed.top-0 {
        top: var(--hm-header-h) !important;
        left: 0;
        right: 0;
        padding: .5rem !important;
    }

        .toast-container .toast[style*="min-width"] {
            min-width: 0 !important;
            width: 100%;
        }
}

/* calculator (ScientificCalculator.razor): two 240px key pads side by side ~500px */
@media (max-width: 575.98px) {
    .calc-floating-window {
        left: .5rem !important;
        right: auto !important;
        top: calc(var(--hm-header-h) + .5rem) !important;
        max-height: calc(100dvh - var(--hm-header-h) - 1rem);
        overflow-y: auto;
    }

    .calc-body {
        flex-direction: column;
        align-items: center;
    }
}

/* ==========================================================================
   6. Question screens
   ========================================================================== */
@media (max-width: 767.98px) {
    /* stacked question / answer columns */
    .main-layout .row > .col-md-6.border-end {
        border-right: 0 !important;
        border-bottom: 1px solid #EDEDED;
        margin-bottom: .75rem;
        padding-bottom: .5rem;
    }

    /* nav rows (desktop copy is d-none here; phone copy is .hm-mobile-nav) */
    .main-layout .row.mt-4.pe-4,
    .main-layout .row.mt-3.pe-3,
    .main-layout .hm-mobile-nav {
        padding-right: 0 !important;
        row-gap: .5rem;
    }

    .main-layout .d-flex.justify-content-end.gap-lg-2 {
        gap: .5rem !important;
        flex-wrap: wrap;
    }

        .main-layout .d-flex.justify-content-end.gap-lg-2 > .btn,
        .main-layout .d-flex.justify-content-end.gap-lg-2 > span {
            flex: 1 1 0;
        }

            .main-layout .d-flex.justify-content-end.gap-lg-2 > span > .btn {
                width: 100%;
            }

    /* palette / sub-question numbers: 28px -> 40px */
    .question-default,
    .comprehension-complete,
    .comprehension-active {
        min-width: 2.5rem;
        max-width: 2.5rem;
        min-height: 2.5rem;
        max-height: 2.5rem;
        font-size: .8125rem;
    }

    /* section status counters */
    .main-layout .border-bottom.pb-3 .col-md-5 > .d-flex {
        justify-content: space-between !important;
        margin-top: .5rem;
    }

    .main-layout .border-bottom.pb-3 .col-md-5 .px-3 {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    /* MCQ option cards ("plans") */
    .plans .plan .plan-content .plan-details {
        width: 100%;
    }

    .plans .plan .plan-content {
        flex-direction: row;
        align-items: flex-start;
        padding: .75rem .75rem .75rem 2.5rem;
    }

    .plans .plan input[type="radio"] + .plan-content:after {
        left: .75rem !important;
        top: .875rem !important;
        transform: none !important;
    }

    .plans .plan > input[type="checkbox"].form-check-input {
        left: .75rem !important;
        top: .8rem !important;
    }

    .plans .plan .plan-content img {
        margin: 0 0 .5rem 0;
        height: auto;
        max-height: 4.5rem;
        max-width: 100%;
    }

    /* comprehension: long passage should not push the sub-question off screen */
    .main-layout .col-md-6.border-end .question-layout:has(#divParagraphQuestions) {
        max-height: 45dvh;
        overflow-y: auto !important;
    }

    .para-subques-arrow {
        min-height: 2.5rem;
        display: flex;
        align-items: center;
        padding: .25rem .75rem !important;
    }

    /* psychometric rating (single column, "max-content" options were clipped) */
    .physcometric-type-custom .plan-content {
        width: auto;
        max-width: 100%;
    }

    .physcometric-type-custom .plans .plan {
        flex: 1 1 100%;
    }

    /* psychometric forced-choice grid: keep options on one line, aligned like a table */
    .question-layout > .row.mx-0.border-bottom > .col-md-8 {
        flex: 0 0 100%;
    }

    .question-layout > .row.mx-0.border-bottom > .col-md-2 {
        flex: 1 0 0;
        width: auto;
        text-align: center;
        padding: .25rem;
    }

    .question-layout > .row.mx-0.border-bottom .form-check-inline {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .question-layout > .row.mx-0.border-bottom .form-check-input {
        float: none;
        margin: 0;
        width: 1.5rem;
        height: 1.5rem;
    }

    .hm-psy-opt-label {
        display: block;
        margin-top: .25rem;
        font-size: .6875rem;
        line-height: 1.2;
        text-align: center;
        overflow-wrap: anywhere;
    }

    /* subjective */
    .file-input-custom .input-custom {
        width: 100%;
        margin: .5rem 0 !important;
    }

    .pdf-wrapper iframe {
        height: 70dvh !important;
    }

    /* reference document modal */
    .pdfreference {
        min-height: 0;
        max-height: none;
        height: 70dvh;
    }

        .pdfreference object {
            min-height: 70dvh !important;
        }

    /* coding */
    .coding-layout .border.rounded-1 {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    .coding-layout .CodeMirror {
        height: 45dvh;
        font-size: 14px;
    }

    .main-layout--expanded .expanded-workspace select.form-select {
        min-width: 0;
    }

    /* OneCompiler (scoped rule is !important; equal specificity, later file wins) */
    .coding-assessment-container .coding-assessment-iframe {
        height: calc(100dvh - var(--hm-header-h)) !important;
        margin-top: var(--hm-header-h) !important;
    }

    /* typing test (scoped to its page: Subjective also uses id="sQuestion") */
    #assessmentTypingPage #sQuestion {
        max-height: 25dvh !important;
        min-height: 5rem !important;
    }

    #assessmentTypingPage #txtTypingTest.input-box-typing {
        height: 22dvh;
    }

    /* speech assessment: inline 100vh/100vw is taller than the visible area */
    [style*="height: 100vh; width: 100vw"],
    iframe[style*="height: 100vh"] {
        height: 100dvh !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   7. Section list (SectionSummary)
   ========================================================================== */
@media (max-width: 767.98px) {
    .tablelanding {
        max-height: none;
    }

        .tablelanding th,
        .tablelanding td {
            white-space: nowrap;
            font-size: .75rem;
        }

            .tablelanding th:first-child,
            .tablelanding td:first-child {
                white-space: normal;
                min-width: 8rem;
            }

            /* keep the Start / Resume button visible while the table scrolls sideways */
            .tablelanding th:last-child,
            .tablelanding td:last-child {
                position: sticky;
                right: 0;
                z-index: 1;
                background: #fff;
                box-shadow: -4px 0 6px -4px rgba(0, 0, 0, .2);
            }

    .sectiondetails-back .col-md-4.d-flex {
        justify-content: flex-start !important;
        margin-top: .5rem;
    }
}

/* ==========================================================================
   8. Thank you / section instructions / feedback
   ========================================================================== */
@media (max-width: 767.98px) {
    .hm-ty-top {
        margin-top: .5rem !important;
    }

    .landingtop .p-4 {
        padding: 1rem !important;
    }

    .thankyou-h-set {
        height: auto;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    /* feedback container: inline height calc(100vh - 6.25rem) + mt-5 pt-5 */
    header + .container[style*="calc(100vh"] {
        height: auto !important;
        overflow: visible !important;
        margin-top: calc(var(--hm-header-h) + .5rem) !important;
        padding-top: 0 !important;
    }

    .tabs-number {
        flex-wrap: wrap;
        gap: .375rem;
    }

    .tab-number > .tab-box-number {
        margin: 0;
        min-width: 2.75rem;
        padding: .5rem;
    }

    .needs-validation .d-flex.gap-lg-3 {
        flex-wrap: wrap;
    }

    .needs-validation .d-inline-flex.flex-column {
        display: flex !important;
        width: 100%;
    }

    .needs-validation input[type="range"] {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    .needs-validation .rating {
        font-size: 2rem;
        gap: .375rem;
    }

    .rating-scale-labels {
        font-size: .75rem;
    }
}

/* ==========================================================================
   9. Small phones held sideways (still < 768px wide)
   ========================================================================== */
@media (max-width: 767.98px) and (orientation: landscape) and (max-height: 500px) {
    :root {
        --hm-header-h: 3rem;
    }

    header > .row.header > :first-child img {
        height: 1.75rem;
    }

    header > .row.header .proctoring-camera-wrapper {
        width: 3.5rem !important;
        height: 2.6rem !important;
    }

    .main-layout .footer-btn {
        position: static;
    }

    .chatbody {
        height: 35dvh;
        max-height: 35dvh !important;
    }
}