/* =====================================================================
   WCAG 2.2 AA – global accessibility overrides (PHW Test and Post)
   Load this LAST in every master shell so it wins over Metronic / Bootstrap
   and the tenant/survey CSS:
     - Views/Account/_Layout.cshtml
     - Areas/App/Views/Layout/_Layout.cshtml
     - Views/Questionaires/Index.cshtml
   All colour pairs below were checked against WCAG 1.4.3 (4.5:1 text)
   and 1.4.11 (3:1 non-text).
   ===================================================================== */

/* ---------- 1.4.3 Contrast (Minimum) – muted text tokens ---------- */
/* Metronic default #B5B5C3 on white = 2.03:1 (fail). #5E6278 = 6.01:1 on #fff, 5.42:1 on #f2f3f7 */
/* Not applied inside the questionnaire #header: its colours come from the survey's own CSS/DB settings */
.text-dark-50:not(#header *),
.text-muted:not(#header *) {
    color: #5E6278 !important;
}

/* PHW brand teal #6cacb5 on white = 2.56:1 (fail). #1F6F7A = 5.81:1 */
.a11y-brand-text,
#forget-password {
    color: #1F6F7A !important;
}

/* PHW buttons: white on #77c8d9 = 1.9:1 (fail). White on #1F6F7A = 5.81:1 */
.btn.btn-custom-login,
button.btn.btn-custom-login {
    color: #FFFFFF !important;
    background-color: #1F6F7A !important;
    border-color: #1F6F7A !important;
}

    .btn.btn-custom-login:hover,
    .btn.btn-custom-login:focus,
    button.btn.btn-custom-login:hover,
    button.btn.btn-custom-login:focus {
        color: #FFFFFF !important;
        background-color: #164F57 !important; /* 8.9:1 */
        border-color: #164F57 !important;
    }

/* ---------- 1.4.1 Use of Colour – in-text links must not rely on colour ---------- */
/* Scoped to body text only – menus, dropdowns, tables and buttons are NOT underlined */
p a:not(.btn):not(.dropdown-item):not(.navi-link),
.page-desc a,
.question-remarks a,
.bluesky li a:not(.btn),
.bluesky .panel-body p a:not(.btn),
.alert-text a:not(.btn),
.a11y-help a,
label a,
#lblPrivacyNotice,
#urlSentToHelpLine,
#email-activation-btn,
#forget-password {
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

/* ---------- 2.4.7 Focus Visible / 2.4.13 Focus Appearance ---------- */
/* Two-tone ring (dark + white) keeps >= 3:1 against both light and dark backgrounds */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid #0B0C0C !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px #FFFFFF !important;
}

/* Custom checkboxes / radios that hide the native control: show focus on the visual box */
.checkbox > input:focus-visible ~ span,
.radio > input:focus-visible ~ span,
.radio-inline > input:focus-visible ~ span {
    outline: 3px solid #0B0C0C;
    outline-offset: 2px;
}

/* ---------- 2.4.11 Focus Not Obscured – fixed header/footer must not hide focus ---------- */
html {
    scroll-padding-top: 90px;
    scroll-padding-bottom: 130px; /* fixed Recite Me launcher (100px) + margin */
}

/* ---------- 2.5.8 Target Size (Minimum) – 24 x 24 CSS px ---------- */
.footer-icons .icons-wrapper a,
.footer a.fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-right: 4px;
}

.question-help,
.Information img,
.close,
.modal-header .close,
#kt_aside_toggle,
#kt_scrolltop {
    min-width: 24px;
    min-height: 24px;
}

/* ---------- Questionnaire – visible labels added for 1.3.1 / 3.3.2 ---------- */
.a11y-field-label {
    display: block !important; /* viewer.css forces label { display:inline !important } */
    font-weight: 600;
    margin-bottom: 4px;
}

/* Bootstrap 3 + 4 compatible visually-hidden helper */
.a11y-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;
}

/* ---------- 1.4.10 Reflow – avoid horizontal scroll at 320 CSS px (400% zoom) ---------- */
@media (max-width: 400px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    .login.login-1 .login-content {
        transform: none !important; /* scale(0.9) breaks reflow and text resizing */
    }
}

/* ---------- 2.3.3 / user preference – respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Questionnaire (viewer.css / friskywales.css / QuestionStyle.css) ---------- */

/* .recitemeLabel: duplicate option text used by Recite Me. Some survey themes show this copy and hide
   the other one, so its visual styling is left to the survey CSS. It is hidden from screen readers
   via aria-hidden (markup + JS), which stops options being read twice. */

/* Logged-in dropdown: Logout button #3699FF on #E1F0FF = 2.53:1 */
.customdrop .btn.btn-light-primary {
    color: #0B4F9C !important;
}

/* Avatar initial #1BC5BD on #C9F7F5 = 1.85:1 */
.symbol.symbol-light-success .symbol-label {
    color: #0B5E5A !important;
}

/* Help tooltips were hover-only (2.1.1, 1.4.13). Also show them while the option has keyboard focus. */
.question-radio:focus-within div.InformationText,
.question-checkbox:focus-within div.InformationText,
div.Information:focus-within div.InformationText {
    visibility: visible;
    display: inline;
    position: relative;
    padding: 7px;
    border-radius: 5px;
    background-color: #1F5F99; /* white text = 6.66:1 (was #337AB7 = 4.56:1) */
    color: #fff !important;
    z-index: 9;
}

div.Information:hover div.InformationText {
    background-color: #1F5F99 !important;
}

/* Validation text (viewer.css: color Red = 4.0:1) */
.validation,
.lblvalidation,
.chkvalidation,
.rdbvalidation {
    color: #B00020 !important; /* 7.3:1 */
}

/* Focus ring around the blue option boxes: #0B0C0C = 3.07:1 on #005eb8 and 19:1 on white (1.4.11 / 2.4.13) */
.columns label.radio-inline:focus-within,
.columns label.checkbox-inline:focus-within {
    outline: 3px solid #0B0C0C !important;
    outline-offset: 2px;
}

/* ---------- App shell (Batch 3) ---------- */
/* #kt_quick_user_toggle changed from <div> to <button>: keep Metronic look */
button#kt_quick_user_toggle {
    border: 0;
    background-color: transparent;
}

/* ---------- 3.2.6 Consistent Help ---------- */
.a11y-help {
    margin: 16px 0;
    padding: 12px 16px;
    border-left: 4px solid #1F6F7A;
    background: #FFFFFF;
    color: #1B1B1B;
}

.a11y-help-wrap {
    padding: 0 16px;
}

/* Footer wrappers added for 3.2.6 – keep Metronic layout */
.a11y-account-footer,
.a11y-app-footer {
    display: block;
    flex-shrink: 0;
}

    .a11y-app-footer .a11y-help-wrap {
        padding: 0 25px;
    }

.footer .a11y-help-wrap {
    padding-top: 16px;
}

.a11y-help__title {
    font-size: 16px !important;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #1B1B1B;
}

.a11y-help__text {
    margin: 0;
}

    .a11y-help__text a {
        color: #0B4F9C !important; /* 8.3:1 on white */
        text-decoration: underline !important;
        word-break: break-all;
    }

/* Show only the block matching the page language */
html[lang="cy"] .a11y-help[data-help-lang="en"],
html:not([lang="cy"]) .a11y-help[data-help-lang="cy"] {
    display: none !important;
}

/* Account pages: "Go To Login" etc. use .text-primary (#3699FF on #f2f3f7 = 2.6:1) */
.login-content a.text-primary {
    color: #0B4F9C !important; /* 7.6:1 on #f2f3f7 */
    text-decoration: underline !important;
}

/* Questionnaire + request form inputs (Bootstrap 3 defaults):
   border #ccc = 1.6:1 (1.4.11 needs 3:1), placeholder #999 = 2.8:1 (1.4.3 needs 4.5:1) */
.bluesky .form-control,
.bluesky .inputTextN,
.bluesky textarea,
.bluesky select {
    border-color: #767676 !important; /* 4.54:1 on white */
}

    .bluesky .form-control::placeholder,
    .bluesky .inputTextN::placeholder,
    .bluesky textarea::placeholder {
        color: #6B6B6B !important; /* 5.33:1 on white */
        opacity: 1;
    }

/* Patient portal (/App/...): Metronic's footer bar is position:fixed when <body> has .footer-fixed,
   so it covered the "Need help?" block. Reserve space below the block so it always sits fully
   above the fixed footer bar (DOM order unchanged: help is still first inside <footer>). */
body.footer-fixed .a11y-app-footer {
    padding-bottom: 72px;
}

.a11y-app-footer .a11y-help {
    margin: 16px 0 0 0;
}

/* friskywales_Contraception.css (TestPost/TestandPost surveys):
   intro links #77c8d9 = 1.9:1, intro heading #5fa6c5 = 2.71:1 → #1A7585 = 5.35:1 (same teal family) */
#formBody .survey-desc a,
.page-desc a {
    color: #1A7585 !important;
}

#formBody .survey-desc h2 {
    color: #1A7585 !important;
}

/* X/Twitter icon: white glyph on #55acee = 2.46:1 → #1D6FA5 = 5.43:1 (bg AND glyph set so it works in every survey theme) */
.footer .fa-twitter {
    background: #1D6FA5 !important;
    color: #FFFFFF !important;
}

/* ======================================================================
   Welsh pathway audit (20/10/2026) – patient portal + questionnaire
   ====================================================================== */

/* 1. DataTables sortable headers: #b5b5c3 = 1.78–2.02:1 → #595d6e = 6.53:1 (white) / 5.74:1 (#eef0f8) */
table.dataTable thead th,
table.dataTable thead td,
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
.datatable.datatable-default > .datatable-table > .datatable-head .datatable-row > .datatable-cell > span {
    color: #595d6e !important;
}

/* 2. Theme blue: white on #3699ff = 2.93:1 → #1b6ec2 = 5.18:1 */
.btn.btn-primary,
#RefreshRolesButton,
.alert.alert-custom.alert-primary {
    background-color: #1b6ec2 !important;
    border-color: #1b6ec2 !important;
    color: #ffffff !important;
}

    .btn.btn-primary:hover,
    .btn.btn-primary:focus,
    #RefreshRolesButton:hover,
    #RefreshRolesButton:focus {
        background-color: #155799 !important; /* 7.36:1 */
        border-color: #155799 !important;
        color: #ffffff !important;
    }

    .alert.alert-custom.alert-primary .alert-text,
    .alert.alert-custom.alert-primary .alert-text *,
    .alert.alert-custom.alert-primary .alert-icon i {
        color: #ffffff !important;
    }

/* Clear-filter / danger outline: #f64e60 = 3.39:1 → #c9192e = 5.73:1 */
.btn.btn-outline-danger,
.btn-outline-danger.filterbtn,
#btnClearTestRequestFilter,
#btnClearBloodBorneVirusFilter {
    color: #c9192e !important;
    border-color: #c9192e !important;
}

    .btn.btn-outline-danger:hover,
    .btn.btn-outline-danger:focus,
    #btnClearTestRequestFilter:hover,
    #btnClearBloodBorneVirusFilter:hover {
        background-color: #c9192e !important;
        color: #ffffff !important; /* 5.73:1 */
    }

/* Logout / light-primary: #3699ff on #e1f0ff = 2.53:1 → #155799 = 6.34:1 */
.btn.btn-light-primary {
    color: #155799 !important;
    background-color: #e1f0ff !important;
}

    .btn.btn-light-primary:hover,
    .btn.btn-light-primary:focus {
        color: #ffffff !important;
        background-color: #155799 !important;
    }

/* 3. Datepicker previous/next-month days: #999 = 2.84:1 → #757575 = 4.61:1 */
.datepicker table tr td.old,
.datepicker table tr td.new,
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    color: #757575 !important;
}

/* Rescan 29/10/2026 – "Actions" / "Camau Gweithredu" headers (.sorting_disabled) stayed #b5b5c3 (2.02:1).
   Metronic's own header rule (e.g. .table.table-head-custom thead th { color:#B5B5C3 !important })
   is more specific than "table.dataTable thead th", so the class is repeated here to win in every case.
   #595d6e = 6.53:1 on #ffffff, 5.74:1 on #eef0f8. */
table.dataTable.dataTable.dataTable thead tr th,
table.dataTable.dataTable.dataTable thead tr th.sorting_disabled,
table.dataTable.dataTable.dataTable thead tr th.sorting,
table.dataTable.dataTable.dataTable thead tr th.sorting_asc,
table.dataTable.dataTable.dataTable thead tr th.sorting_desc,
.table.table.table-head-custom thead tr th,
.table.table.table-head-custom thead tr,
table.table.table thead tr th[aria-label="Actions"],
table.table.table thead tr th[aria-label="Camau Gweithredu"] {
    color: #595d6e !important;
}

/* ======================================================================
   Rescan 02/11/2026 – Sidebar navigation (Rows 90-95)
   Active/open/hover menu text: #3699ff on #f3f6f9 = 2.71:1 (fail)
   -> #1b6ec2 = 4.77:1 on #f3f6f9 (pass 1.4.3, 4.5:1)
   Applies ONLY to active / open / here / hover states; normal items keep Metronic's colour.
   ====================================================================== */
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text,
.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-text,
.aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-text,
.aside-menu .menu-nav > .menu-item:hover > .menu-link .menu-text,
.aside-menu .menu-submenu .menu-item.menu-item-active > .menu-link .menu-text,
.aside-menu .menu-submenu .menu-item.menu-item-open > .menu-link .menu-text,
.aside-menu .menu-submenu .menu-item:hover > .menu-link .menu-text {
    color: #1b6ec2 !important;
}

/* Icons / arrows of active + open items (1.4.11 non-text contrast >= 3:1) */
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon,
.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon,
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-arrow,
.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-arrow {
    color: #1b6ec2 !important;
}