/* MAFLX-7894: Enhanced focus indicators for Patient Portal login page */
/* WCAG 2.4.7 (Focus Visible) Level AA - 3:1 minimum contrast ratio */
/* WCAG 1.4.11 (Non-text Contrast) - Focus indicators must have 3:1 minimum contrast */
/* WCAG 1.4.3 (Contrast - Minimum) - Text must have 4.5:1 contrast */
/* WellSky Atlas Design System: Focus indicator color #228189 (4.59:1 on white) */

/* ========================================== */
/* INPUT FIELDS - Username, Password */
/* ========================================== */

/* Material Design text field inputs */
.mdc-text-field__input:focus,
#User_id:focus,
#password:focus,
.portal-login input[type="text"]:focus,
.portal-login input[type="password"]:focus,
.portal-login input[type="email"]:focus {
    outline: 3px solid #228189 !important;
    outline-offset: 2px !important;
    border-color: #228189 !important;
}

/* Text field containers - ensure border color is coordinated */
.mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: #228189 !important;
}

/* Username field specific */
#mdc-text-field--ws-username input:focus,
#mdc-text-field--ws-username input:focus-visible {
    outline: 3px solid #228189 !important;
    outline-offset: 2px !important;
}

/* MAFLX-7893: Fix floating label color contrast on focus */
/* Original: #66c0c8 on white = 2.11:1 ❌ (need 4.5:1) */
/* New: #228189 on white = 4.59:1 ✅ (WellSky Atlas Design System standard) */
#mdc-text-field--ws-username .mdc-floating-label--float-above,
#mdc-text-field--ws-username.mdc-text-field--focused .mdc-floating-label {
    color: #228189 !important;
}

/* Password field specific */
#mdc-text-field--ws-password input:focus,
#mdc-text-field--ws-password input:focus-visible {
    outline: 3px solid #228189 !important;
    outline-offset: 2px !important;
}

/* MAFLX-7893: Fix floating label color contrast on focus */
#mdc-text-field--ws-password .mdc-floating-label--float-above,
#mdc-text-field--ws-password.mdc-text-field--focused .mdc-floating-label {
    color: #228189 !important;
}

/* ========================================== */
/* BUTTONS - Login, Submit */
/* ========================================== */

/* Primary login button - white outline for contrast on dark teal background */
#LoginSubmit:focus,
#LoginSubmit:focus-visible,
.portal-login button:focus,
.portal-login .button-primary:focus,
.portal-login input[type="submit"]:focus,
.mdc-button--unelevated:focus {
    outline: 3px solid #ffffff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

/* MAFLX-7887: Fix hover state contrast - disable MDC white overlay and use accessible hover color */
#LoginSubmit:hover::before {
    opacity: 0 !important; /* Disable white overlay that reduces contrast */
}

/* Lighter teal on hover with sufficient contrast (4.8:1 with white text) */
#LoginSubmit:hover:not(:disabled) {
    background-color: #1E7981 !important; /* Lighter teal that maintains WCAG AA compliance */
}

/* Material Design buttons (general) */
.mdc-button:focus:not(#LoginSubmit) {
    outline: 3px solid #228189 !important;
    outline-offset: 2px !important;
}

/* ========================================== */
/* LINKS - Forgot Password, Help Links */
/* ========================================== */

/* Forgot password link - text color fix for WCAG 1.4.3 */
#lnk_forgot_password {
    color: #CB4E0D !important;
}

/* Forgot password link - focus state */
#lnk_forgot_password:focus,
#lnk_forgot_password:focus-visible,
.portal-login a:focus,
.portal-login .js-forgot-password:focus,
a[href*="forgot"]:focus,
a[href*="password"]:focus {
    outline: 3px solid #228189 !important;
    outline-offset: 2px !important;
    text-decoration: underline !important;
    background-color: rgba(34, 129, 137, 0.1) !important;
}

/* ========================================== */
/* CHECKBOXES AND RADIO BUTTONS */
/* ========================================== */

.portal-login input[type="checkbox"]:focus,
.portal-login input[type="radio"]:focus,
.mdc-checkbox__native-control:focus,
#ws-remember-me:focus {
    outline: 3px solid #228189 !important;
    outline-offset: 2px !important;
}

/* ========================================== */
/* NAVIGATION LINKS - Top Bar (Home, Solutions, Support) */
/* ========================================== */

/* Top app bar navigation buttons */
.mdc-top-app-bar a.mdc-button:focus,
.mdc-top-app-bar a.mdc-button:focus-visible {
    outline: 3px solid #228189 !important;
    outline-offset: 2px !important;
}

/* Mobile drawer list items */
.mdc-list-item:focus,
.mdc-list-item:focus-visible {
    outline: 3px solid #228189 !important;
    outline-offset: 2px !important;
}

/* Menu button (hamburger icon) */
.mdc-top-app-bar__navigation-icon:focus,
.mdc-top-app-bar__navigation-icon:focus-visible {
    outline: 3px solid #228189 !important;
    outline-offset: 2px !important;
}

/* ========================================== */
/* FOOTER LINKS */
/* ========================================== */

footer a:focus,
footer a:focus-visible {
    outline: 2px solid #228189 !important;
    outline-offset: 2px !important;
}

/* ========================================== */
/* DISABLE MDC RIPPLE EFFECTS (Low Contrast) */
/* ========================================== */

/* Disable Material Design ripple ::before pseudo-elements that create low-contrast overlays */
/* These cause WCAG 1.4.11 failures (1.23:1 to 1.44:1 contrast) */

.mdc-button:not(.mdc-ripple-upgraded):focus::before,
.mdc-button.mdc-ripple-upgraded--background-focused::before,
.mdc-top-app-bar a.mdc-button:not(.mdc-ripple-upgraded):focus::before,
.mdc-top-app-bar a.mdc-button.mdc-ripple-upgraded--background-focused::before,
#lnk_forgot_password:not(.mdc-ripple-upgraded):focus::before,
#lnk_forgot_password.mdc-ripple-upgraded--background-focused::before,
.mdc-list-item:not(.mdc-ripple-upgraded):focus::before,
.mdc-list-item.mdc-ripple-upgraded--background-focused::before,
.mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):focus::before,
.mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded--background-focused::before {
    opacity: 0 !important;
    display: none !important;
}

/* ========================================== */
/* WINDOWS HIGH CONTRAST MODE SUPPORT */
/* ========================================== */

@media (prefers-contrast: high) {
    .portal-login *:focus,
    .mdc-text-field__input:focus,
    .mdc-button:focus,
    #LoginSubmit:focus,
    #lnk_forgot_password:focus {
        outline: 3px solid currentColor !important;
        outline-offset: 2px !important;
    }
}

/* ========================================== */
/* FORCED COLORS MODE (Windows High Contrast) */
/* ========================================== */

@media (forced-colors: active) {
    .portal-login *:focus {
        outline: 3px solid Highlight !important;
        outline-offset: 2px !important;
    }
}

/* ========================================== */
/* ENSURE NO FOCUS SUPPRESSION */
/* ========================================== */

/* Override any global styles that suppress focus indicators */
.portal-login *:focus {
    /* Explicitly allow outline - do NOT set to none or 0 */
}

/* Remove any legacy focus suppression that may exist */
.portal-login *:focus:not(:focus-visible) {
    /* Allow browsers that support :focus-visible to use their logic */
    /* But still maintain outline for keyboard users */
}

/* ========================================== */
/* PORTAL LOGIN HEADING STYLES */
/* ========================================== */

/* MAFLX-7886: Style h1 heading for Patient Portal login */
.portal-login-heading {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    display: inline-block;
    padding: 0;
}