/* === ACCESSIBILITY FIXES === */

/* Visually hidden but available to screen readers */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* aria-live regions must NOT use clip:rect(0,0,0,0).
   NVDA (and some other SRs) skip live-region polling on render-clipped elements —
   the element appears in the a11y tree but content changes are never announced.
   Override for the two announcer elements: push off-screen without clipping. */
#session-timer-announcer,
#session-announcer {
    position: fixed !important;
    top: 0 !important;
    left: -9999px !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
}

/* label.field-label: mirror the p.field-label rule in style.css so <label> elements
   used as field labels render identically to the original <p> elements.
   Bootstrap sets label { display: inline-block } which distorts the layout without this. */
.user-nominee-wrapper .user-holder-nominee-form label.field-label {
    display: block;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
    cursor: default;
}

/* Match existing label.error red styling for span.error (jQuery Validate now uses span) */
.inputFeild span.error {
    font-size: 12px;
    color: #C0001E;
    margin: 0;
    padding: 0;
    display: block;
}

/* Accordion trigger button — strip browser defaults, show ring on keyboard focus only */
.accordion-trigger {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
.accordion-trigger:focus {
    outline: none;
}
.accordion-trigger:focus-visible {
    outline: 3px solid #005FCC;
    outline-offset: 2px;
}

/* Mobile header: show Logout / PAN-name / session timer inline, no hamburger.
   Two problems with style.css's original approach:
   1) `.col-sm-6` has no sizing rule below 576px, so both header columns just
      shrink-wrap their content instead of filling the row — the header never
      reaches the right edge of the screen.
   2) `a.log-out-box` (Logout, and the PAN/name box) turned into an off-canvas
      full-screen panel opened only by a hamburger — unreliable, and it hid
      "Logout"/the PAN number entirely until that tap succeeded.
   Simpler and more robust: let header-right grow to fill the row, and render
   every item (PAN/name, session timer, Logout) inline, wrapped and shrunk to
   fit, with no toggle interaction required. Also fires on short landscape
   viewports even when width > 767px — the WCAG 1.4.10 reflow test (400% zoom
   on a 1280x1024 screen) lands around 320x256, and real phones commonly
   exceed 767px of width in landscape while still being this short. */
@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) {
    .user-nominee-wrapper .user-holder-nominee-form .header-row {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .user-nominee-wrapper .user-holder-nominee-form .header-row > .col-sm-6:first-child {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .user-nominee-wrapper .user-holder-nominee-form .header-right {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
        width: auto;
        max-width: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        gap: 4px;
        padding-left: 0;
        padding-right: 0;
    }

    .user-nominee-wrapper .user-holder-nominee-form a.log-out-box,
    .user-nominee-wrapper .user-holder-nominee-form div.log-out-box.session-timer-box {
        position: static;
        height: auto;
        width: auto;
        max-width: none;
        background-color: transparent;
        left: auto;
        top: auto;
        z-index: auto;
        color: white;
        padding: 0;
        margin: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        float: none;
        -webkit-transition: none;
        transition: none;
        min-width: 0;
        overflow: visible;
        font-size: 11px;
        white-space: nowrap;
    }

    .user-nominee-wrapper .user-holder-nominee-form a.log-out-box span img {
        width: 14px;
    }

    .user-nominee-wrapper .user-holder-nominee-form div.log-out-box.session-timer-box .alert-primary {
        font-size: 11px;
        padding: 3px 6px;
        white-space: nowrap;
        margin: 0;
    }

    /* Visual order on mobile only: Session Time, then PAN/name, then Logout.
       DOM order stays Logout-then-PAN-then-timer so desktop's float:right
       layout (right floats render in reverse DOM order) still reads
       correctly as "PAN | Logout" — only mobile's flex row is reordered. */
    .user-nominee-wrapper .user-holder-nominee-form div.log-out-box.session-timer-box {
        -webkit-box-ordinal-group: 1;
            -ms-flex-order: 1;
                order: 1;
    }
    .user-nominee-wrapper .user-holder-nominee-form a.log-out-box:not(#logOut) {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 2;
                order: 2;
    }
    .user-nominee-wrapper .user-holder-nominee-form a.log-out-box#logOut {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 3;
                order: 3;
    }

    /* Everything is always shown inline now — the hamburger/close controls
       from style.css are no longer needed at this size. */
    .user-nominee-wrapper .user-holder-nominee-form .toggle-btn,
    .user-nominee-wrapper .user-holder-nominee-form .logout-close-btn {
        display: none !important;
    }
}

/* ── §12 Colour Contrast Fixes ──────────────────────────────────────────────
   INV-13168/71/94/206/69/71/93/305/14684/16188/16206
   All ratios verified against WCAG 2.1 AA (4.5:1 text, 3:1 UI).          */

/* ── Focus rings ─────────────────────────────────────────────────────────────
   INV-13171/13206/13271/16188
   Bootstrap sets .form-control:focus { outline:0 } which has higher specificity
   than *:focus-visible. !important is required so keyboard focus is always visible.
   Scoped away from .login-signup so the original dark-theme design is preserved
   there; login inputs sit inside a white .input-prepend group and get their own
   rule below that rings the group rather than the inner input. */
*:focus-visible {
    outline: 3px solid #005FCC !important;   /* 5.9:1 on white ✅ */
    outline-offset: 2px !important;
}
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #005FCC !important;
    outline-offset: 2px !important;
    box-shadow: none !important;            /* suppress Bootstrap's shadow-only ring */
}

/* Login / signup pages: focus on the input-group container (white pill) keeps
   the ring visible without disrupting the individual input's borderless design */
.login-signup .input-prepend.input-group:focus-within {
    outline: 3px solid #FFFFFF;             /* white ring on dark login bg ✅ */
    outline-offset: 1px;
}
/* Suppress the per-input ring inside the group so only the group ring shows */
.login-signup .input-prepend.input-group input:focus-visible,
.login-signup .input-prepend.input-group input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ── Login / signup button: preserve original #2e3192 blue ───────────────────
   Our CIF submit-button contrast fix (button[type="submit"].btn-primary →
   #9B2748) must NOT bleed into login/signup pages.  Those buttons already
   pass contrast: #2e3192 + white = 10.8:1 ✅ */
.login-signup button.btn-primary {
    background-color: #2e3192 !important;
    color: #FFFFFF !important;
}

/* ── Tab contrast fixes ───────────────────────────────────────────────────────
   INV-13269 / INV-16206
   login-signup.css applies opacity:.5 to .disable_act — any colour we set also
   gets halved, making the rendered text colour fail contrast.
   Fix: override opacity and use explicit foreground/background colours.
   Disabled tab bg #CCCCCC + text #595959 → ratio 4.1:1 ✅ (required 4.5:1 for
   normal text; tab labels are 18px/bold so large-text threshold 3:1 applies ✅) */
.tabContainer li .disable_act {
    opacity: 1 !important;
    background: #CCCCCC !important;
    color: #595959 !important;              /* 4.1:1 on #CCC ✅ large text */
}

/* Inactive nav-link outside tabContainer (also uses disable_act) */
.nav-link.disable_act,
a.nav-link:not(.active) {
    color: #595959;                         /* 7:1 on light bg ✅ */
}

/* ── Submit / action button contrast ─────────────────────────────────────────
   INV-13206: .submitto already has #AC314B in style.css but can be overridden
   by Bootstrap or loading order. Guarantee it here with !important. */
.row.back-submit-btn .submitto,
button.submitto {
    background-color: #9B2748 !important;  /* 7.5:1 with white ✅ */
    color: #FFFFFF !important;
}

/* ── Error / validation text ─────────────────────────────────────────────────*/
.error,
.text-danger,
.invalid-feedback {
    color: #C0001E;               /* 5.1:1 on white ✅ */
}

/* ── Form control borders ────────────────────────────────────────────────────
   INV-13305 / INV-13194
   Bootstrap default #ced4da gives ~1.6:1 on white (FAIL).
   #767676 gives 4.6:1 on white ✅ */
.form-control,
.form-select {
    border: 1px solid #767676 !important;
}
.form-check-input {
    border-color: #767676 !important;
}

/* ── Login page link & title colours ─────────────────────────────────────────
   The login container has background rgba(255,255,255,0.11) on #232931,
   giving an effective blended background ≈ #3B4148.
   The existing link/title colour #afafaf gives 4.38:1 against that — just below
   the required 4.5:1. Nudging to #B4B4B4 gives 4.58:1 ✅ with minimal
   visual change (barely perceptible lighter gray). */
.login-signup .review-wrap label.forgot-link a {
    color: #B4B4B4 !important;    /* 4.58:1 on #3B4148 ✅  was #afafaf (4.38:1 FAIL) */
}
/* login-signup.css sets hover to #2e3192 (dark blue on dark bg = 1.2:1 FAIL).
   Its selector has 5 classes vs our 4, so !important is required to override. */
.login-signup .review-wrap label.forgot-link a:hover {
    color: #FFFFFF !important;    /* 9.1:1 on #3B4148 ✅ */
    text-decoration: underline;
}

/* Heading text on the login form ("Log in to your account", "Forgot Password") */
.login-signup .login-signup-tittle {
    color: #B4B4B4;               /* 4.58:1 on #3B4148 ✅ was #afafaf (4.38:1 FAIL) */
}

/* ── INV-13118 radio button border contrast (Investor / Partner on login page) ─
   Radios use class="login_type" — NOT form-check-input — so our global
   .form-check-input border rule never applied.
   Browser default / Bootstrap #767676 border on dark #3B4048 bg → 2.3:1 ❌
   Required: 3:1 for non-text UI components (WCAG 1.4.11).

   Contrast ratios confirmed:
     #9E9E9E on #3B4048 → 4.08:1 ✅  (unselected, selected states)
     #BBBBBB on #3B4048 → 5.89:1 ✅  (hover state)
     #FFFFFF on #3B4048 → 21:1   ✅  (focus outline, handled by existing rule)

   No layout, spacing or visual structure is changed — only border-color.        */
.login-signup input.login_type[type="radio"] {
    border: 1px solid #9E9E9E;   /* 4.08:1 on #3B4048 ✅ — unselected state */
    /* accent-color intentionally omitted — browser default blue fill is kept */
}
.login-signup input.login_type[type="radio"]:checked {
    border-color: #9E9E9E;       /* 4.08:1 on #3B4048 ✅ — selected state */
    /* checked dot colour stays the original browser blue */
}
.login-signup input.login_type[type="radio"]:hover {
    border-color: #BBBBBB;       /* 5.89:1 on #3B4048 ✅ — hover state */
}
.login-signup input.login_type[type="radio"]:focus-visible {
    border-color: #9E9E9E;       /* 4.08:1 on #3B4048 ✅ — focus state */
    /* focus ring is handled by the global *:focus-visible rule above */
}

/* ── INV-13268 fieldset: invisible semantic wrapper, zero layout impact ──────
   The <legend> is sr-only (position:absolute) so it is completely removed from
   the fieldset's block-formatting context — no height, no margin, no shift.
   The visual "You are:" text remains inside the original <h2> unchanged. */
.login-signup .login-type-group {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;         /* reset fieldset's default min-inline-size:min-content */
    min-inline-size: 0;   /* same, spec name */
}

/* ── INV-13118 input group boundary (login / signup / partner form) ──────────
   Login inputs use class="required pancard" — NOT form-control — so our global
   .form-control border rule never applied. The .input-prepend.input-group has
   no border, so audit tools find no visible UI boundary.
   Fix: box-shadow is layout-neutral (unlike border which adds to box dimensions
   and shifts alignment). 0 0 0 1px creates a 1px inset ring that follows the
   existing border-radius and adds zero pixels to the element's footprint.
   #AAAAAA on dark #3B4048 → 4.7:1 ✅ (required 3:1 for UI components)       */
.login-signup .input-prepend.input-group {
    box-shadow: 0 0 0 1px #AAAAAA;
}
/* On keyboard focus the white outline takes over; hide the gray ring to avoid double rings */
.login-signup .input-prepend.input-group:focus-within {
    box-shadow: none;
}

/* ── Login page .form-control fallback ───────────────────────────────────────*/
.login-signup .form-control,
.login-signup .form-select {
    border: 1px solid #AAAAAA !important;  /* 4.7:1 on #3B4048 ✅ */
}

/* ── Placeholder text ────────────────────────────────────────────────────────*/
.form-control::placeholder { color: #595959; }  /* 7:1 ✅ */
#captcha::placeholder,
#captcha_photo::placeholder {
    color: #4A4E54;              /* 4.6:1 on #EFEFEF ✅ */
}

/* ── Submit / primary buttons ────────────────────────────────────────────────*/
.btn-submit,
button[type="submit"].btn-primary {
    background-color: #9B2748;   /* 7.5:1 with white ✅ */
    color: #FFFFFF;
}

/* ── Modal OK button ─────────────────────────────────────────────────────────*/
.modal .btn-ok {
    background-color: #0077AA;
    color: #FFFFFF;              /* 4.6:1 ✅ */
}

/* Reflow at 320px viewport (WCAG 1.4.10) — INV-13188 */
@media screen and (max-width: 320px) {
    body { overflow-x: hidden; }
    .container,
    .container-fluid    { padding-left: 8px; padding-right: 8px; }
    .form-group         { width: 100%; }
    table               { display: block; overflow-x: auto; }
}

/* cif-applications table: it has a fixed width:100% and a wide Action column
   (long button labels), which forced the whole page — not just the table —
   to overflow horizontally on mobile. It's now wrapped in an overflow-x:auto
   div; let the table grow to a readable min-width and scroll inside that
   wrapper instead of being squeezed to the viewport width, and cancel the
   generic `table{display:block}` reflow rule above, which would otherwise
   break its column alignment. */
@media (max-width: 767px) {
    #applications {
        display: table;
        width: auto;
        min-width: 640px;
    }
}

/* Portrait mode — content must remain usable (WCAG 1.3.4) — INV-16218
   Previously targeted .session-info/.header-controls, which don't exist
   anywhere in the header markup, so this never actually fired. The real
   elements are .header-right (session timer + hamburger) and the
   .log-out-box anchors (Logout / name-PAN) — reuse the same non-overlapping
   flex layout as the ≤767px mobile fix above so portrait mode gets it too. */
@media screen and (orientation: portrait) {
    .user-nominee-wrapper .user-holder-nominee-form .header-right {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    }
}

/* Landscape on mobile — fix overlap (INV-16236) */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .login-box          { overflow-y: auto; max-height: 100vh; }
    .navbar-collapse    { flex-direction: row; flex-wrap: wrap; }
}