/* ==========================================================================
   E-KYC Accessibility Fixes — extracted stylesheet
   Depends on CSS custom properties set inline in _Layout.cshtml:
     --theme-primary-safe, --theme-secondary-safe (from web.config,
     contrast-checked via AccessibilityColorHelper.EnsureContrastWithWhite)
   ========================================================================== */

body {
    font-family: 'ONYX-N', "Roboto", "Helvetica Neue", Arial, sans-serif;
}

:root {
    --acc-bg: #ffffff;
    --acc-border: #e2e8f0;
    --acc-text: #1a202c;
    --acc-text-muted: #64748b;
    --acc-btn-bg: #f1f5f9;
    --acc-btn-hover: #e2e8f0;
    --acc-btn-active-bg: #1a202c;
    --acc-btn-active-text: #ffffff;
    --acc-shadow: 0 8px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.08);
    --acc-toggle-bg: #1a202c;
    --acc-toggle-text: #ffffff;
    --acc-radius: 12px;
    --acc-font-size-scale: 1;
}

[data-theme="dark"] {
    --acc-bg: #1e2533;
    --acc-border: #2d3748;
    --acc-text: #f0f4f8;
    --acc-text-muted: #94a3b8;
    --acc-btn-bg: #2d3748;
    --acc-btn-hover: #374151;
    --acc-btn-active-bg: #f0f4f8;
    --acc-btn-active-text: #1e2533;
    --acc-shadow: 0 8px 32px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
    --acc-toggle-bg: #f0f4f8;
    --acc-toggle-text: #1e2533;
}

    [data-theme="dark"] body {
        background: #000102;
        color: #f0f4f8;
    }

    [data-theme="dark"] .ithub-body {
        background: #000102;
        border-color: #2d3748;
    }

    [data-theme="dark"] .ithub-nav {
        background: #000102 !important;
        border-color: #000102 !important;
    }

    [data-theme="dark"] .theme-switchable-img {
        filter: invert(1) hue-rotate(180deg);
    }

    [data-theme="dark"] .address li p {
        color: white;
    }

    [data-theme="dark"] .panel {
        background: #000102;
        color: #f0f4f8;
        border-color: white;
    }

    [data-theme="dark"] .table {
        background-color: #000102;
    }

    [data-theme="dark"] .inactive {
        color: white;
        background-color: #afafaf;
    }

    [data-theme="dark"] .modal-content {
        background: #000102;
        color: #f0f4f8;
    }

    [data-theme="dark"] .ui.form .field > label {
        color: white;
    }

html {
    font-size: calc(16px * var(--acc-font-size-scale));
}

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

body {
    margin: 0;
    background: #ffffff;
    color: #1a202c;
    transition: background 0.3s, color 0.3s;
}

/* FIX [Major | 2.4.7] Global visible focus indicator — this app previously
   had no consistent focus style at all across several pages/layouts. */
*:focus {
    outline: 2px solid #1558A8 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

.acc-toggle-btn:focus,
.acc-theme-btn:focus,
.acc-font-btn:focus,
.acc-preset-btn:focus,
.acc-reset-btn:focus {
    outline: 2px solid #1558A8 !important;
    outline-offset: 2px !important;
}

.k-widget:focus-within,
.k-dropdown:focus-within,
.k-combobox:focus-within {
    outline: 2px solid #1558A8 !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}

/* FIX [Major | 2.4.7] [Major | 1.4.11] EK-69296 (and the same finding
   reported per-page as EK-70025 / EK-70483 on Pan Details) — semantic.css
   sets `.ui.button { outline: none; }` globally, stripping the focus ring
   from every button/link using the "ui button" class combo — which is used
   across nearly every page in the app (Registration/AccountProcess, Plan
   Selection, Document Upload, etc.). Fixed once, here, instead of patching
   each page's buttons individually. */
.ui.button:focus,
.ui.button:focus-visible {
    outline: 2px solid #1558A8 !important;
    outline-offset: 2px !important;
}

/* FIX [Blocker] EK-68855 / EK-68857 — best-effort mitigation, not a full fix.
   Kendo's dropdown popup list (.k-list-container / .k-animation-container)
   is appended to document.body and sized by Kendo's own JS, independent of
   the triggering field's container. On the old Kendo build this app loads
   (2017.2.621 — see _Layout.cshtml), that popup can end up wider than the
   viewport at 200% browser zoom or at 320px widths, which is what these two
   findings are almost certainly describing. This forces the popup to never
   exceed the viewport and to scroll internally instead of overflowing it.
   A real fix would mean upgrading the Kendo UI version; that's a bigger,
   separate piece of work and can't be done safely from CSS alone. */
.k-list-container,
.k-animation-container {
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

    .k-list-container .k-list {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

a, a:visited, .btn-link {
    color: #1558A8;
}

    a:hover, a:focus, .btn-link:hover, .btn-link:focus {
        color: #0D3D7A;
    }

.btn-primary,
button[data-bb-handler="ok"],
#addNomineeBtn {
    background-color: #1558A8 !important;
    border-color: #0D3D7A !important;
    color: #ffffff !important;
}

.btn-success,
#saveNomineeBtn {
    background-color: #276F27 !important;
    border-color: #1D5A1D !important;
    color: #ffffff !important;
}

.btn-danger {
    background-color: #B5200D !important;
    border-color: #8C1A0A !important;
    color: #ffffff !important;
}

.navbar-right a[href*="Logout"],
.navbar-right a[href*="logout"] {
    color: #4A6E1A !important;
    display: inline-block;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
}

    .navbar-right a[href*="Logout"]:hover,
    .navbar-right a[href*="logout"]:hover {
        background-color: rgba(74, 110, 26, 0.1);
        text-decoration: underline;
    }

::placeholder {
    color: #767676 !important;
    opacity: 1 !important;
}

:-ms-input-placeholder {
    color: #767676 !important;
}

/* FIX [Major | 1.4.3] color-red was #FF0000 (3.99:1) — now #C0000C (5.9:1). */
.color-red, sub {
    color: #C0000C !important;
}

.modal .close, .alert .close, .bootbox .close {
    color: #595959 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

    .modal .close:hover, .alert .close:hover {
        color: #1F1F1F !important;
    }

/* FIX [Minor] Skip link so keyboard users can bypass the repeated header. */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 99999;
    padding: 10px 18px;
    background: #1558A8;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-radius: 0 0 6px 0;
    transition: top 0.1s;
}

    .skip-link:focus {
        top: 0 !important;
        outline: 2px solid #ffffff !important;
        outline-offset: 2px !important;
    }

.acc-toolbar {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    font-family: -apple-system,'Segoe UI',system-ui,sans-serif;
    font-size: 14px;
}

.acc-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--acc-toggle-bg);
    color: var(--acc-toggle-text);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    box-shadow: var(--acc-shadow);
    transition: transform .15s,box-shadow .15s;
    white-space: nowrap;
}

    .acc-toggle-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 40px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.12);
    }

.acc-panel {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    width: 240px;
    background: var(--acc-bg);
    border: 1px solid var(--acc-border);
    border-radius: var(--acc-radius);
    padding: 16px;
    box-shadow: var(--acc-shadow);
    animation: acc-up .2s cubic-bezier(.34,1.56,.64,1);
}

    .acc-panel[hidden] {
        display: none;
    }

@keyframes acc-up {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.acc-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.acc-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--acc-text-muted);
    margin: 0;
}

.acc-divider {
    height: 1px;
    background: var(--acc-border);
    margin: 14px 0;
}

.acc-theme-row {
    display: flex;
    gap: 8px;
}

.acc-theme-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--acc-btn-bg);
    color: var(--acc-text);
    border: 1.5px solid var(--acc-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all .15s;
}

    .acc-theme-btn:hover {
        background: var(--acc-btn-hover);
    }

    .acc-theme-btn.active {
        background: var(--acc-btn-active-bg);
        color: var(--acc-btn-active-text);
        border-color: var(--acc-btn-active-bg);
    }

.acc-font-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.acc-font-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--acc-btn-bg);
    color: var(--acc-text);
    border: 1.5px solid var(--acc-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}

    .acc-font-btn:hover {
        background: var(--acc-btn-hover);
    }

    .acc-font-btn:active {
        transform: scale(.92);
    }

.acc-font-display {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--acc-text);
    background: var(--acc-btn-bg);
    border: 1.5px solid var(--acc-border);
    border-radius: 8px;
    padding: 7px 4px;
}

.acc-font-presets {
    display: flex;
    gap: 6px;
}

.acc-preset-btn {
    flex: 1;
    padding: 6px 4px;
    background: var(--acc-btn-bg);
    color: var(--acc-text);
    border: 1.5px solid var(--acc-border);
    border-radius: 7px;
    cursor: pointer;
    font-weight: 600;
    transition: all .15s;
    font-size: 12px;
}

    .acc-preset-btn:hover {
        background: var(--acc-btn-hover);
    }

    .acc-preset-btn.active {
        background: var(--acc-btn-active-bg);
        color: var(--acc-btn-active-text);
        border-color: var(--acc-btn-active-bg);
    }

.acc-reset-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px;
    background: transparent;
    color: var(--acc-text-muted);
    border: 1.5px dashed var(--acc-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all .15s;
}

    .acc-reset-btn:hover {
        background: var(--acc-btn-bg);
        color: var(--acc-text);
        border-style: solid;
    }

/* FIX [Major | 1.4.3] .ithub-primary previously had no background/color at
   all (or, in earlier iterations, a hardcoded value) — now reads from the
   web.config-driven, contrast-checked CSS variables set inline in the
   layout, so each client's theme color is respected AND guaranteed to
   pass 4.5:1 with white text. */
.ithub-primary, button.ithub-primary, a.ithub-primary {
    position: relative;
    transition: all 0.2s ease-in-out;
    background-color: var(--theme-primary-safe) !important;
    border-color: var(--theme-primary-safe) !important;
    color: #ffffff !important;
}

    .ithub-primary:hover, button.ithub-primary:hover, a.ithub-primary:hover {
        opacity: 0.95;
    }

    .ithub-primary:focus, .ithub-primary:focus-visible,
    button.ithub-primary:focus, button.ithub-primary:focus-visible,
    a.ithub-primary:focus, a.ithub-primary:focus-visible {
        outline: 3px solid #005fcc !important;
        outline-offset: 3px !important;
        box-shadow: 0 0 0 4px rgba(0,95,204,0.25) !important;
        text-decoration: none !important;
        border-radius: 6px;
    }

.ithub-secondary, button.ithub-secondary, a.ithub-secondary {
    position: relative;
    transition: all 0.2s ease-in-out;
    background-color: var(--theme-secondary-safe) !important;
    border-color: var(--theme-secondary-safe) !important;
    color: #ffffff !important;
}

    .ithub-secondary:hover, button.ithub-secondary:hover, a.ithub-secondary:hover {
        opacity: 0.95;
    }

    .ithub-secondary:focus, .ithub-secondary:focus-visible,
    button.ithub-secondary:focus, button.ithub-secondary:focus-visible,
    a.ithub-secondary:focus, a.ithub-secondary:focus-visible {
        outline: 3px solid #005fcc !important;
        outline-offset: 3px !important;
        box-shadow: 0 0 0 4px rgba(0,95,204,0.25) !important;
        text-decoration: none !important;
        border-radius: 6px;
    }

/* FIX [Major | 1.4.3] EK-73178 — .ithub-primary2 (small inline
   upload/re-upload buttons: "Proceed", "Front", "Back", "Upload",
   "Re-Upload" on the Document Upload page) only set color:#fff with no
   background override, inheriting whatever low-contrast green the page's
   own CSS resolved to (measured white on #7DB300, 2.52:1). Same
   theme-safe token as .ithub-primary. */
.ithub-primary2 {
    background-color: var(--theme-primary-safe) !important;
    border-color: var(--theme-primary-safe) !important;
    color: #ffffff !important;
}

/* FIX [Major | 1.4.3] "ui red/default large button" Semantic UI pattern
   used for Back/Next across multiple step pages (Bank Details, Upload,
   likely Plan Selection) — one shared rule instead of a page-local one. */
.ui.red.large.button,
.ui.red.large.button:hover,
.ui.red.large.button:focus {
    background-color: var(--theme-primary-safe) !important;
    border-color: var(--theme-primary-safe) !important;
    color: #ffffff !important;
}

.ui.default.large.button,
.ui.default.large.button:hover,
.ui.default.large.button:focus {
    background-color: #ffffff !important;
    border-color: #767676 !important;
    color: #1a202c !important;
}

button::-moz-focus-inner {
    border: 0;
}

.stepper-mobile-toggle {
    display: none;
}

@media (max-width: 767px) {
    .stepper-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 4px;
    }

    .step-progress {
        font-size: 11px;
        background: #337ab7;
        color: #fff;
        padding: 2px 8px;
        border-radius: 20px;
        margin-right: 8px;
        font-weight: normal;
    }

    .stepper-chevron {
        font-size: 20px;
        transition: transform 0.25s ease;
        color: #888;
    }

    .stepper-list-collapse {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        margin: 0;
        padding: 0;
    }

        .stepper-list-collapse.is-open {
            max-height: 500px;
        }

    .stepper-mobile-toggle.is-open .stepper-chevron {
        transform: rotate(180deg);
    }

    .stepper-list-collapse li {
        width: 100%;
        border-bottom: 1px solid #eee;
    }
}

.ui.form .field > label {
    font-size: 0.75em !important;
}

/* FIX [Major | 1.4.3] EK-70034 / EK-70220 / EK-72797 — "Step X: ..." text
   failed contrast in both the active state (white on #EAF3DC, 1.14:1) and
   inactive state (white on #CCCCCC, 1.61:1) across Steps 1-2-3-4. Verified:
   #3d3d3d on #E0E0E0 = 8.23:1 (inactive), white on --theme-primary-safe =
   4.64:1 (active), white on #4a5560 = 7.61:1 (already used for .complete). */
.stepper-list-collapse .step-item,
.stepper-list-collapse .ithub-header-hover {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    text-decoration: none;
    font-size: 13px;
    border-radius: 4px;
}

.stepper-list-collapse .step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.stepper-list-collapse .complete {
    background-color: #4a5560 !important;
}

    .stepper-list-collapse .complete .step-item,
    .stepper-list-collapse .complete .ithub-header-hover,
    .stepper-list-collapse .complete .step-label {
        color: #ffffff !important;
    }

    .stepper-list-collapse .complete .step-badge {
        background: #ffffff;
        color: #4a5560;
    }

.stepper-list-collapse .active {
    background-color: var(--theme-primary-safe, #5A8000) !important;
}

    .stepper-list-collapse .active .step-item,
    .stepper-list-collapse .active .step-label {
        color: #ffffff !important;
        font-weight: 600;
    }

    .stepper-list-collapse .active .step-badge {
        background: #ffffff;
        color: var(--theme-primary-safe, #5A8000);
    }

.stepper-list-collapse .inactive {
    background-color: #E0E0E0 !important;
}

    .stepper-list-collapse .inactive .step-item,
    .stepper-list-collapse .inactive .step-label {
        color: #3d3d3d !important;
    }

    .stepper-list-collapse .inactive .step-badge {
        background: #ffffff;
        color: #3d3d3d;
        border: 1px solid #9a9a9a;
    }

/* Divider between steps via CSS border, not a literal <hr> — this is what
   removes EK-70463 / EK-73342 (separator announced by screen reader)
   entirely, rather than patching an <hr> with role="presentation". */
.stepper-list-collapse li:not(:last-child) {
    border-right: 1px solid rgba(0,0,0,0.1);
}

/* FIX [Blocker | 1.4.4] [Blocker | 1.4.10] EK-68855 / EK-68857 / EK-69380 /
   EK-73346 — Bootstrap's .navbar-collapse is display:none below 768px width
   (and effectively at high browser zoom, which shrinks the same layout
   viewport) unless toggled open via a .navbar-toggle button — but this
   header never had one. Result: the Logout link became completely
   unreachable at 200% zoom or 320px viewports, on every page using this
   layout. Since this header only ever holds an empty <ul> and, when logged
   in, a single Logout link — not a real mobile nav menu — the fix is to
   stop it from collapsing at all rather than build a toggle for one link. */
.ithub-nav .navbar-collapse.collapse {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
}

    /* FIX [Major] Logout link mispositioned by the flex conversion above —
   float has no effect on a flex child, so Bootstrap's own
   `.navbar-right { float: right !important; }` stopped doing anything the
   moment .navbar-collapse became display:flex, and "Log Out" ended up
   sitting right next to the logo instead of on the right side of the
   header, on every page. margin-left: auto pushes it to the end of the
   flex row instead — this is the flexbox equivalent of float:right. */
    .ithub-nav .navbar-collapse.collapse .navbar-right {
        float: none;
        margin-left: auto;
    }