/* ============================================================================
 * IdentityServer global styles
 *
 * Color rule (BrandSync SelfService):
 *   The Membercare IdentityServer login / account pages are member-facing.
 *   Every customer-deployed instance can override the color tokens below by
 *   providing their own /CustomerFiles/Customer.css (loaded AFTER this file).
 *   DO NOT hardcode hex values in the page-level Razor files — always reference
 *   the var(--color-*) tokens declared here so customer CSS can re-skin freely.
 *
 * Spacing rule: 8-px grid. Use var(--space-1) ... var(--space-12) only.
 * Typography rule: minimum 16px body, 12px caption, line-height ≥ 1.5x.
 * ============================================================================ */

:root {
    /* ---- Brand color fallbacks (Customer.css overrides) ----------------- */
    --color-primary-default:      #0E7060;
    --color-primary-hover:        #0B5C50;
    --color-primary-pressed:      #084840;
    --color-primary-focused:      #0B5C50;
    --color-on-primary:           #FFFFFF;

    --color-danger-default:       #B3261E;
    --color-danger-hover:         #8C1D17;
    --color-danger-pressed:       #6E1612;
    --color-on-danger:            #FFFFFF;

    --color-success-default:      #1F8A3A;
    --color-warning-default:      #B25F00;
    --color-info-default:         #1A6FB0;

    --color-surface-default:      #FFFFFF;
    --color-surface-elevated:     #FFFFFF;
    --color-surface-muted:        #F4F5F7;
    --color-surface-success:      #E8F3EC;
    --color-surface-warning:      #FCEFE0;
    --color-surface-danger:       #FAE7E6;
    --color-surface-info:         #E5F0F8;

    --color-neutrals-default:     #1A1D24;
    --color-neutrals-muted:       #4D535F;
    --color-neutrals-container:   #FFFFFF;
    --color-neutrals-container-muted: #F4F5F7;
    --color-border-default:       #D7DAE0;
    --color-border-strong:        #4D535F;

    --color-focus-ring:           #0B5C50;

    /* ---- Spacing scale (8-px grid) -------------------------------------- */
    --space-0:  0;
    --space-1:  8px;
    --space-2:  16px;
    --space-3:  24px;
    --space-4:  32px;
    --space-6:  48px;
    --space-8:  64px;
    --space-12: 96px;

    /* ---- Radii / borders ------------------------------------------------ */
    --radius-sm: 4px;
    --radius-md: 8px;

    /* ---- Typography ----------------------------------------------------- */
    --font-family-base: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-size-caption: 12px;
    --font-size-body:    16px;
    --font-size-heading: 20px;
    --font-size-title:   24px;
    --line-height-tight: 1.4;
    --line-height-base:  1.5;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    color: var(--color-neutrals-default);
    background-color: var(--color-surface-muted);
}

.logo {
    background-image: url(../Logo.png);
    background-repeat: no-repeat;
    height: 100%;
    width: 250px;
}

.navbar {
    height: 100px;
}

main > .container {
    padding: 0 var(--space-2);
}

/* ============================================================================
 * BrandSync utility tokens (mc- prefix to avoid Bootstrap collision)
 * Use these in the .cshtml files instead of Bootstrap theme classes.
 * ============================================================================ */

/* WCAG note: text uses --color-neutrals-default on --color-neutrals-container background. */
.mc-card {
    background-color: var(--color-neutrals-container);
    color: var(--color-neutrals-default);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}
.mc-card__title {
    margin: 0;
    font-size: var(--font-size-title);
    line-height: var(--line-height-tight);
    font-weight: 500;
}
.mc-card__subtitle {
    margin: 0;
    font-size: var(--font-size-body);
    color: var(--color-neutrals-muted);
}

.mc-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-stack--tight { gap: var(--space-1); }
.mc-stack--loose { gap: var(--space-3); }

.mc-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
}

.mc-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}
@media (min-width: 1024px) {
    .mc-grid-2 { grid-template-columns: 1fr 1fr; }
}

/* WCAG note: notice text uses --color-neutrals-default on --color-surface-* backgrounds. */
.mc-notice {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    border-left: 4px solid transparent;
    background-color: var(--color-surface-muted);
    color: var(--color-neutrals-default);
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
}
.mc-notice--info    { background-color: var(--color-surface-info);    border-left-color: var(--color-info-default); }
.mc-notice--success { background-color: var(--color-surface-success); border-left-color: var(--color-success-default); }
.mc-notice--warning { background-color: var(--color-surface-warning); border-left-color: var(--color-warning-default); }
.mc-notice--danger  { background-color: var(--color-surface-danger);  border-left-color: var(--color-danger-default); }

.mc-notice__title {
    font-weight: 600;
    margin: 0 0 var(--space-1) 0;
}
.mc-notice__body {
    margin: 0;
}

/* WCAG note: --color-on-primary must contrast at 4.5:1 against --color-primary-default. */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: 12px var(--space-3);
    font-size: var(--font-size-body);
    line-height: var(--line-height-tight);
    font-family: var(--font-family-base);
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    min-height: 40px;
}
.mc-btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}
.mc-btn:disabled,
.mc-btn[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}
.mc-btn--primary {
    background-color: var(--color-primary-default);
    color: var(--color-on-primary);
}
.mc-btn--primary:hover  { background-color: var(--color-primary-hover); }
.mc-btn--primary:active { background-color: var(--color-primary-pressed); }

.mc-btn--neutral {
    background-color: var(--color-neutrals-container);
    color: var(--color-neutrals-default);
    border-color: var(--color-border-strong);
}
.mc-btn--neutral:hover {
    background-color: var(--color-surface-muted);
}

.mc-btn--subtle {
    background-color: transparent;
    color: var(--color-neutrals-default);
    border-color: transparent;
}
.mc-btn--subtle:hover {
    background-color: var(--color-surface-muted);
}

.mc-btn--danger {
    background-color: var(--color-danger-default);
    color: var(--color-on-danger);
}
.mc-btn--danger:hover  { background-color: var(--color-danger-hover); }
.mc-btn--danger:active { background-color: var(--color-danger-pressed); }

.mc-btn--block {
    width: 100%;
}

.mc-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.mc-label {
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    font-weight: 500;
}
.mc-input {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    line-height: var(--line-height-base);
    padding: 12px var(--space-2);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background-color: var(--color-neutrals-container);
    color: var(--color-neutrals-default);
    min-height: 40px;
}
.mc-input:focus,
.mc-input:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 1px;
    border-color: var(--color-focus-ring);
}
.mc-input--code {
    letter-spacing: 0.25em;
    text-align: center;
    font-feature-settings: 'tnum';
}
.mc-help-text {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-base);
    color: var(--color-neutrals-muted);
}
.mc-error-text {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-base);
    color: var(--color-danger-default);
}

/* ---- QR / setup-specific ------------------------------------------------ */
.mc-qr-frame {
    background-color: var(--color-neutrals-container);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 256px;
    height: 256px;
}
.mc-qr-frame img {
    max-width: 100%;
    height: auto;
    display: block;
}
.mc-qr-skeleton {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    background:
        linear-gradient(90deg,
            var(--color-surface-muted) 0%,
            var(--color-neutrals-container-muted) 50%,
            var(--color-surface-muted) 100%);
    background-size: 200% 100%;
    animation: mc-shimmer 1.4s ease-in-out infinite;
}
@keyframes mc-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mc-qr-skeleton { animation: none; }
}

.mc-secret-key {
    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-body);
    letter-spacing: 0.15em;
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-sm);
    user-select: all;
    word-break: break-all;
}

.mc-recovery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-1);
    background-color: var(--color-surface-muted);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
}
@media (min-width: 640px) {
    .mc-recovery-grid { grid-template-columns: 1fr 1fr; }
}
.mc-recovery-code {
    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--font-size-body);
    letter-spacing: 0.1em;
    padding: var(--space-1);
    background-color: var(--color-neutrals-container);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    user-select: all;
}

/* ---- Tab-style toggle for QR vs manual ---------------------------------- */
.mc-segmented {
    display: inline-flex;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.mc-segmented__btn {
    background-color: var(--color-neutrals-container);
    color: var(--color-neutrals-default);
    border: none;
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    cursor: pointer;
    min-height: 40px;
}
.mc-segmented__btn[aria-pressed="true"] {
    background-color: var(--color-primary-default);
    color: var(--color-on-primary);
}
.mc-segmented__btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
}

/* ---- Modal -------------------------------------------------------------- */
.mc-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    z-index: 1000;
}
.mc-modal-backdrop[hidden] { display: none; }
.mc-modal {
    background-color: var(--color-neutrals-container);
    color: var(--color-neutrals-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    max-width: 480px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mc-modal__title {
    margin: 0;
    font-size: var(--font-size-heading);
    font-weight: 600;
}
.mc-modal__body {
    margin: 0;
    color: var(--color-neutrals-muted);
}
.mc-modal__actions {
    display: flex;
    gap: var(--space-1);
    justify-content: flex-end;
    margin-top: var(--space-1);
}

/*
 * Utility classes introduced for MEM-7373 — replace inline style="" attributes,
 * which cannot carry a CSP nonce and would be blocked once 'unsafe-inline' is
 * removed from style-src. Each class corresponds 1:1 to a former inline style.
 */
.mc-card--padded { padding: var(--space-2); }
.mc-card--spaced-top { margin-top: var(--space-2); }
.mc-card__title--heading { font-size: var(--font-size-heading); }
.mc-card__title--heading-success {
    font-size: var(--font-size-heading);
    color: var(--color-success-default);
}
.mc-list--indent {
    margin: var(--space-1) 0 0 var(--space-3);
    padding: 0;
}
.mc-checkbox-row {
    gap: var(--space-1);
    cursor: pointer;
}

/*
 * Login.cshtml: external-login button stacking and validation-summary spacing.
 * Moved off inline style="" so the page renders under a nonce-only CSP.
 */
.mc-external-login-btn { margin: 5px 0; }
.mc-validation-summary-spaced { margin-top: 20px; }