/* =============================================================================
   OAuth 2.1 ceremony pages (login / consent / MFA).
   Source of truth: the PEX Dashboard (Metropolis, PEX-green primary button).
   Shared here so the button + field styles are defined once and reused across
   every page, instead of being duplicated inline in each view.
   ========================================================================== */

/* ---- Page shell -------------------------------------------------------- */
.oauth-page {
    font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
    color: #21252b;
}

/* Keep the login / MFA column a comfortable, Dashboard-like width so the inputs
   don't stretch full-bleed to the width of the summary line. */
#login-container {
    width: 320px;
    max-width: 100%;
    margin: 0 auto;
}

/* A generic block error message (top of a form). */
.oauth-error {
    color: #d50000;
    font-size: 13px;
    margin-bottom: 1rem;
}

/* ---- Buttons (Dashboard) ----------------------------------------------- */
/* Base: shared metrics for every OAuth ceremony button. Variants set colors;
   .oauth-btn--block makes it full-width (MFA). MDL's raised elevation is
   explicitly removed (no box-shadow). */
.oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    box-sizing: border-box;
    height: 36px;
    min-width: 72px;
    max-width: 360px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
}

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

.oauth-btn--primary {
    background-color: rgb(148, 238, 134);
    border-color: rgb(148, 238, 134);
    color: rgb(8, 6, 62);
}

.oauth-btn--primary:hover {
    background-color: rgb(131, 224, 117);
    border-color: rgb(131, 224, 117);
}

.oauth-btn--secondary {
    background-color: transparent;
    border-color: rgb(159, 194, 245);
    color: rgb(8, 6, 62);
}

.oauth-btn--secondary:hover { background-color: #f5f8ff; }

/* Disabled (e.g. consent buttons after a decision) — greyed out. */
.oauth-btn:disabled {
    background-color: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
    color: #9aa0a6 !important;
    cursor: default;
}

/* Loading (login / MFA): hide the label and show a centered spinner. The button
   still submits (the form isn't disabled), so it uses a class, not :disabled. */
.oauth-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.oauth-btn--primary.is-loading {
    background-color: #e0e0e0 !important;
    border-color: #e0e0e0 !important;
}

.oauth-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 1.5px solid rgba(0, 0, 0, .2);
    border-top-color: rgba(0, 0, 0, .55);
    border-radius: 50%;
    animation: oauth-spin 0.7s linear infinite;
}

/* Text/link button (MFA "Resend code") — Dashboard btn-link. */
.oauth-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 36px;
    min-width: 72px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #2866fa;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 16px;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.oauth-link:hover { color: #1c4ed2; }

.oauth-link.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.oauth-link.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 1.5px solid rgba(40, 102, 250, .25);
    border-top-color: #2866fa;
    border-radius: 50%;
    animation: oauth-spin 0.7s linear infinite;
}

@keyframes oauth-spin { to { transform: rotate(360deg); } }

/* ---- Login: underline text fields (Dashboard Clarity) ------------------ */
.oauth-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

/* Labels are screen-reader-only (the placeholder is the visible affordance). */
.oauth-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.oauth-field input {
    font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 24px;
    letter-spacing: -0.1px;
    color: #21333b;
    padding: 4px 2px;
    border: none;
    border-bottom: 1px solid #6a7a81;
    border-radius: 0;
    background: transparent;
    outline: none;
    box-sizing: border-box;
    width: 100%;
    transition: border-color 0.2s ease;
}

.oauth-field input::placeholder { color: #4f6169; }
.oauth-field input:focus { border-bottom-color: #21333b; }
.oauth-field input.invalid,
.oauth-field input.invalid:focus { border-bottom-color: #e02200; }

.oauth-field-error {
    font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
    color: #d50000;
    font-size: 12px;
    margin-top: 4px;
}

/* Neutralize the browser autofill styling so the value matches the typed one. */
.oauth-field input:-webkit-autofill,
.oauth-field input:-webkit-autofill:hover,
.oauth-field input:-webkit-autofill:focus,
.oauth-field input:-webkit-autofill:active {
    -webkit-text-fill-color: #21333b !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 9999s ease-in-out 0s;
}

.oauth-input-wrap { position: relative; }

.oauth-input-wrap input {
    width: 100%;
    box-sizing: border-box;
    padding-right: 34px; /* room for the reveal toggle */
}

/* Show/hide password toggle (eye). */
.oauth-password-toggle {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    display: flex;
    padding: 2px;
    margin: 0;
    border: none;
    background: none;
    color: #2866fa;
    cursor: pointer;
    line-height: 0;
}

.oauth-password-toggle:hover { color: #1a4fd6; }

.oauth-password-toggle:focus-visible {
    outline: 2px solid #2866fa;
    outline-offset: 2px;
    border-radius: 2px;
}

.oauth-password-toggle svg { width: 18px; height: 18px; display: block; }

/* ---- Consent ----------------------------------------------------------- */
.oauth-consent { max-width: 460px; margin: 0 auto; }

.oauth-requesting {
    margin-bottom: 1rem;
    text-align: center;
    color: #5f6368;
}

.oauth-scopes {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.oauth-scope {
    padding: 0.6rem 0;
    border-bottom: 1px solid #eee;
}

.oauth-scope-title { font-weight: 600; color: #21333b; }

.oauth-scope-desc {
    font-size: 0.9em;
    color: #5f6368;
    margin-top: 0.15rem;
}

/* Right-aligned action row (Deny/Allow). */
.oauth-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 1em;
}

/* ---- MFA --------------------------------------------------------------- */
.oauth-mfa-heading {
    font-size: 1.6rem;
    font-weight: 500;
    color: #21252b;
    line-height: 1.2;
    margin: 0 0 1rem;
}

.oauth-mfa-sent {
    color: #21252b;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.oauth-mfa-sent .dest {
    display: block;
    font-weight: 600;
    margin-top: 2px;
    word-break: break-all;
}

.oauth-code-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid #c9ccd3;
    border-radius: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    letter-spacing: 0.5px;
    color: #21252b;
    padding: 8px 2px;
    outline: none;
    transition: border-color 0.2s ease;
}

.oauth-code-input::placeholder { color: #9aa0a6; }
.oauth-code-input:focus { border-bottom: 2px solid #2866fa; }
.oauth-code-input.invalid { border-bottom: 2px solid #d50000; }

.oauth-input-error {
    color: #d50000;
    font-size: 12px;
    margin-top: 6px;
}

.oauth-resend-row {
    font-size: 13px;
    color: #5f6368;
    margin: 0.9rem 0 1.5rem;
}

/* Full-width MFA buttons get a little vertical rhythm. */
.oauth-mfa-continue { margin: 24px 0 8px; }

.oauth-mfa-question {
    font-size: 14px;
    color: #21252b;
    margin-bottom: 1rem;
}

.oauth-radio-list {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}

.oauth-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
}

.oauth-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    accent-color: #2866fa;
    cursor: pointer;
}

.oauth-radio-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.oauth-radio-label { font-size: 14px; color: #21252b; }
.oauth-radio-dest { font-size: 12px; color: #5f6368; }