/* =============================================================================
   TesteeResponsive.css
   Mobile-responsive overrides for the Testee area (standard flow only).
   Loaded last from Areas/Testee/Views/Shared/_Layout.cshtml so cascade wins.
   Branded variants (Iverse/Mizrachi/IDF/Fiverr) use different DOM IDs/classes
   and are intentionally untouched here.
   Breakpoints: mobile <=480, tablet 481-1023, desktop >=1024 (unchanged).
   ============================================================================= */


/* ---------------------------------------------------------------------------
   Foundation: unblock the global min-width:1024px from Intercat.css.
   Scoped to body.TesteeArea so other areas (Client admin) remain unaffected.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    body.TesteeArea {
        min-width: 0 !important;
        width: 100% !important;
        overflow-x: hidden;
    }

    html, body.TesteeArea {
        -webkit-text-size-adjust: 100%;
    }
}


/* ---------------------------------------------------------------------------
   Layout shell: collapse the table-based _Layout into a vertical stack
   on tablet and below. #MainArea is role="presentation" so this is safe.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    #MainArea,
    #MainArea > tbody,
    #MainArea > tbody > tr,
    #MainArea > tbody > tr > td {
        display: block !important;
        width: 100% !important;
    }

    /* Main form container: kill the fixed 60px lateral margins (inline style in _Layout) */
    #currFormContnt {
        margin: 16px 24px 0 24px !important;
        width: auto !important;
        float: none !important;
        box-sizing: border-box;
    }

    /* Header: drop the fixed 80px height and the logo's left:80px nudge */
    #Header,
    #Header > table,
    #Header > table > tbody,
    #Header > table > tbody > tr,
    #Header > table > tbody > tr > td {
        height: auto !important;
    }

    #Logo {
        height: auto !important;
        padding: 8px 0 !important;
        text-align: center !important;
    }

    #Logo img {
        position: static !important;
        left: auto !important;
        height: 56px !important;
        width: auto !important;
        padding-top: 8px !important;
        max-width: 90%;
    }

    /* Top black strip (nav): unfix height, wrap children */
    #BlackStrip {
        min-width: 0 !important;
        height: auto !important;
        padding: 6px 12px !important;
        line-height: 1.6 !important;
        display: flex !important;
        flex-wrap: wrap;
        gap: 12px;
        box-sizing: border-box;
    }

    #BlackStrip a,
    #BlackStrip span,
    #BlackStrip div {
        line-height: 1.6 !important;
        float: none !important;
        padding: 0 !important;
    }
}


/* ---------------------------------------------------------------------------
   Mobile-only tightening
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
    #currFormContnt {
        margin: 12px 12px 0 12px !important;
    }

    #Logo img {
        height: 44px !important;
    }

    body.TesteeArea h1 { font-size: 22px !important; }
    body.TesteeArea h2 { font-size: 19px !important; }
    body.TesteeArea h3 { font-size: 17px !important; }
}


/* ---------------------------------------------------------------------------
   Data tables inside views: stack rows on mobile/tablet.
   Targets the known IDs in ToolList.cshtml and a generic .consent-table hook.
   The inline width="300px" / width="500px" attributes are overridden here.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    #tblMandatory,
    #tblForms,
    #tblStandard,
    body.TesteeArea .consent-table,
    body.TesteeArea #divRegular {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #tblMandatory td,
    #tblForms td,
    #tblStandard td {
        display: block;
        width: 100% !important;
        padding: 8px 4px;
        box-sizing: border-box;
    }

    /* consent-row inline height:40px relaxes to a minimum */
    body.TesteeArea .consent-row {
        height: auto !important;
        min-height: 40px;
    }

    /* ---------------- ConsentQuest pages ----------------
       All ConsentQuest views (ConsentQuest1/2/2ILimudim/4/Iverse/Lomda) share the
       .ConsentArea wrapper styled inline in each view: width:750px, padding 0 68px.
       Plus an internal <table> with multiple <td>s per <tr> (lastname/firstname/ssn
       fields side-by-side) — stack them on mobile/tablet. */
    body.TesteeArea .ConsentArea {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
        font-size: 14px;
    }

    body.TesteeArea .ConsentArea .h1,
    body.TesteeArea .ConsentArea h1 {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    /* The scrollable consent text block has inline height:340px — shrink on mobile */
    body.TesteeArea .ConsentArea > div[style*="height:340px"],
    body.TesteeArea .ConsentArea > div[style*="height: 340px"] {
        height: 260px !important;
    }

    /* Inner consent details table: stack cells so label/input pairs appear vertically */
    body.TesteeArea .ConsentArea table {
        width: 100% !important;
        max-width: 100% !important;
        border-collapse: collapse;
    }
    body.TesteeArea .ConsentArea table,
    body.TesteeArea .ConsentArea table > tbody,
    body.TesteeArea .ConsentArea table > tbody > tr,
    body.TesteeArea .ConsentArea table > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    body.TesteeArea .ConsentArea table > tbody > tr > td {
        padding: 4px 0 !important;
    }

    /* .consent-label has min-width:85px (and inline min-widths up to 420px) */
    body.TesteeArea .ConsentArea .consent-label,
    body.TesteeArea .ConsentArea td[style*="min-width"],
    body.TesteeArea .ConsentArea td[style*="padding-right"],
    body.TesteeArea .ConsentArea td[style*="padding-left"] {
        min-width: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        font-weight: 600;
    }

    /* Inputs in consent forms: full width, tap-friendly */
    body.TesteeArea .ConsentArea input[type=text],
    body.TesteeArea .ConsentArea input[type=email],
    body.TesteeArea .ConsentArea input[type=tel],
    body.TesteeArea .ConsentArea input[type=password],
    body.TesteeArea .ConsentArea select {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 40px;
        font-size: 16px !important;
        box-sizing: border-box;
        padding: 6px 8px !important;
    }

    /* Lomda variant has td.width:78px (3 fixed cells with logos / labels) */
    body.TesteeArea .ConsentArea td[style*="width: 78px"],
    body.TesteeArea .ConsentArea td[style*="width:78px"] {
        width: 100% !important;
    }

    /* Radio rows (consent_general/save/consent/extraserv/signature) and date row */
    body.TesteeArea .ConsentArea input[type=radio],
    body.TesteeArea .ConsentArea input[type=checkbox] {
        transform: scale(1.2);
        margin: 4px 6px !important;
        vertical-align: middle;
    }

    /* The "send" submit button cell */
    body.TesteeArea .ConsentArea #sendB,
    body.TesteeArea .ConsentArea .btn-login {
        width: 100% !important;
        max-width: 280px;
        min-height: 44px;
        margin: 16px auto !important;
        display: block !important;
        font-size: 16px !important;
        padding: 10px 18px !important;
    }

    /* Lomda variant uses iframe for course content */
    body.TesteeArea .ConsentArea iframe {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 320px;
    }

    /* ToolList: stack the three list tables vertically (Mandatory → Forms → Tests)
       The outer #table-tests is a single <tr> with three <td> siblings on desktop.
       On mobile we collapse the tr/td to block so they stack in DOM order. */
    body.TesteeArea #table-tests,
    body.TesteeArea #table-tests > tbody,
    body.TesteeArea #table-tests > tbody > tr,
    body.TesteeArea #table-tests > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        vertical-align: top;
    }

    body.TesteeArea #table-tests > tbody > tr > td {
        padding: 0 !important;
        margin-bottom: 16px;
    }

    /* The inner list tables had inline margin-left/right: 60px to separate columns —
       useless and harmful when stacked. */
    body.TesteeArea #tblForms,
    body.TesteeArea #tblStandard {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* ---------------------------------------------------------------------------
   Touch targets and iOS no-zoom on inputs
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    body.TesteeArea button,
    body.TesteeArea .btn,
    body.TesteeArea a.btn,
    body.TesteeArea input[type=button],
    body.TesteeArea input[type=submit],
    body.TesteeArea input[type=reset] {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 18px !important;
        box-sizing: border-box;
    }

    body.TesteeArea input[type=text],
    body.TesteeArea input[type=password],
    body.TesteeArea input[type=email],
    body.TesteeArea input[type=tel],
    body.TesteeArea input[type=number],
    body.TesteeArea input[type=search],
    body.TesteeArea select,
    body.TesteeArea textarea {
        font-size: 16px !important;
        min-height: 44px !important;
        box-sizing: border-box;
        max-width: 100%;
    }

    body.TesteeArea label {
        line-height: 1.5;
    }
}


/* ---------------------------------------------------------------------------
   TinCan Index — standard login (NOT branded variants).
   The standard form has class="testee_login_form"; the branded variants
   (Mizrachi/IDF/Fiverr) use class="mizrachi-login-fields" so their rows/labels
   are NOT affected by these selectors. The branded suffixes (-mizrachi/-idf)
   on .label-text, .login-item, .login-item-txt, .testee-cap are also untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Form wrapper: drop the fixed 350px from Intercat.css */
    body.TesteeArea form.testee_login_form {
        width: 100% !important;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0 !important;
        box-sizing: border-box;
        padding: 0 12px;
    }

    /* Inner .login-form column had inline margin-{side}:20px and a 43px top margin */
    body.TesteeArea form.testee_login_form > .login-form {
        margin: 0 !important;
        width: 100% !important;
    }

    /* Background image (.img-login) is position:fixed with height:600px — push behind
       and shrink so it never overlaps the form on small screens */
    body.TesteeArea .login-container > .img-login,
    body.TesteeArea form.testee_login_form .img-login {
        position: absolute !important;
        height: 220px !important;
        width: auto !important;
        top: auto !important;
        bottom: 0 !important;
        left: auto !important;
        right: auto !important;
        opacity: 0.25;
        z-index: -1;
        pointer-events: none;
    }

    /* Login rows stack — kill the flex side-by-side that crams label+input together */
    body.TesteeArea form.testee_login_form .login-item,
    body.TesteeArea form.testee_login_form > .login-form > .row {
        display: block !important;
        margin-top: 12px !important;
    }

    /* Labels become block + auto width (Intercat.css forces 90px) */
    body.TesteeArea form.testee_login_form .label-text {
        display: block !important;
        width: auto !important;
        margin-bottom: 4px;
    }

    /* Inputs span full row */
    body.TesteeArea form.testee_login_form .login-item-txt,
    body.TesteeArea form.testee_login_form input[type=text],
    body.TesteeArea form.testee_login_form input[type=password],
    body.TesteeArea form.testee_login_form input[type=tel],
    body.TesteeArea form.testee_login_form select {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Login button: inline style="width: 100px" gets overridden */
    body.TesteeArea form.testee_login_form #login-btn,
    body.TesteeArea form.testee_login_form .btn-login {
        width: 100% !important;
        max-width: 240px;
        margin: 16px auto 0 !important;
        display: block !important;
    }

    /* Title shrinks (Intercat.css sets .testee-cap to 28px) */
    body.TesteeArea form.testee_login_form .testee-cap {
        font-size: 22px !important;
        line-height: 1.25;
        margin-bottom: 6px;
    }

    /* Accessibility link was position:absolute; bottom:40px — make it flow */
    body.TesteeArea .login-container > .btn[style*="position: absolute"] {
        position: static !important;
        bottom: auto !important;
        margin: 24px 0 12px !important;
        text-align: center;
    }

    /* tech-entrance image already hidden by testArea.css at <=500; keep hidden at <=768 */
    body.TesteeArea #tech-entrance,
    body.TesteeArea .tech-entrance {
        display: none !important;
    }
}

@media (max-width: 480px) {
    body.TesteeArea form.testee_login_form .testee-cap {
        font-size: 19px !important;
    }

    body.TesteeArea form.testee_login_form #login-btn,
    body.TesteeArea form.testee_login_form .btn-login {
        max-width: 100%;
    }

    /* ConsentQuest pages — mobile-only refinements (tablet rules in 768 block above) */
    body.TesteeArea .ConsentArea {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    body.TesteeArea .ConsentArea .h1,
    body.TesteeArea .ConsentArea h1 {
        font-size: 19px !important;
    }
    body.TesteeArea .ConsentArea > div[style*="height:340px"],
    body.TesteeArea .ConsentArea > div[style*="height: 340px"] {
        height: 200px !important;
    }
}


/* ---------------------------------------------------------------------------
   Media: keep images/iframes/videos from overflowing the viewport.
   The Logo is excluded — it has its own sizing above.
   The fullscreen interview iframe (#frmMainContent fixed 100vw/100vh) is excluded.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    body.TesteeArea img:not(#Logo img) {
        max-width: 100%;
        height: auto;
    }

    body.TesteeArea iframe:not(#frmMainContent),
    body.TesteeArea video {
        max-width: 100%;
    }
}