/*
 * Shared styling for the public authentication pages (login, create-account,
 * forgot-passcode, user-consent).
 *
 * Included per-page via <h:outputStylesheet>, so even global selectors such as
 * body / .page-name only take effect on pages that opt in by loading this file.
 *
 * G2OPS palette: orange #d5441c, blue #28637e, dark gray #595a5c, black #231f20.
 */

/* Soft page backdrop so the white card stands out. `html body` outranks the
   base `body` rule in styles.css, which is loaded after this file. */
html body {
    background: linear-gradient(180deg, #f4f6f9 0%, #eef1f5 100%);
}

/* The template always reserves a page-header row; hide it on auth pages so the
   card owns branding. */
.page-name,
.sofia-page-header-row {
    display: none !important;
}

.auth-page {
    display: flex;
    justify-content: center;
    padding: 24px 15px 48px;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border: 1px solid #e6e9ee;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(35, 31, 32, 0.12), 0 2px 8px rgba(35, 31, 32, 0.06);
    overflow: hidden;
}

/* Wider variants for longer forms. `wide` (create account) and `medium`
   (forgot passcode) differ only in card max-width; both let their enclosing
   grid column expand (see the :has rule below) so the extra room is usable. */
.auth-card.auth-card-wide {
    max-width: 820px;
}

.auth-card.auth-card-medium {
    max-width: 640px;
}

/* The shared full-page-form template puts the form in a col-lg-6 column
   (50% width, centered), which is too narrow for the wider forms. When a wide
   or medium card is present, let its enclosing grid column span the full width
   so the card can use more space. Scoped via :has() to those variants only, so
   the narrow login card is unaffected even though it shares this stylesheet. */
@media (min-width: 992px) {
    .row > [class*="col-"]:has(> .auth-page > .auth-card-wide),
    .row > [class*="col-"]:has(> .auth-page > .auth-card-medium),
    .row > [class*="col-"]:has(> .auth-page > .auth-card-consent) {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Branded accent strip along the top of the card. */
.auth-card::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #d5441c 0%, #e8663f 55%, #28637e 100%);
}

.auth-card-header {
    text-align: center;
    padding: 32px 36px 4px;
}

.auth-badge {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 28px;
    background: linear-gradient(135deg, #d5441c 0%, #e8663f 100%);
    box-shadow: 0 8px 18px rgba(213, 68, 28, 0.35);
}

.auth-badge .fa {
    line-height: 1;
}

.auth-title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: #231f20;
    letter-spacing: 0.2px;
}

.auth-subtitle {
    margin: 0;
    font-size: 14px;
    color: #7a7d82;
}

.auth-alerts {
    padding: 8px 36px 0;
}

.auth-alerts .alert,
.auth-alerts .bf-messages,
.auth-alerts .alert-container {
    margin-bottom: 12px;
}

.auth-card-body {
    padding: 20px 36px 8px;
}

/* Grouped sections within longer forms ---------------------------------- */

.auth-section + .auth-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #eef0f3;
}

.auth-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #231f20;
}

.auth-section-title .fa {
    color: #d5441c;
}

/* Multi-step wizard ----------------------------------------------------- */

/* Progress header. Hidden until JS marks the form as wizard-enabled, so the
   page still renders as a single scrolling form when JS is unavailable. */
.auth-stepper {
    display: none;
    padding: 6px 36px 0;
    margin-bottom: 4px;
}

.wizard-on .auth-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}

.auth-stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1 1 0;
    text-align: center;
    position: relative;
    padding: 0;
    background: none;
    border: 0;
    color: #9aa0a6;
    font-size: 12px;
    font-weight: 600;
    cursor: default;
}

/* Connector line between the step dots. */
.auth-stepper-item::before {
    content: "";
    position: absolute;
    top: 15px;
    right: 50%;
    width: 100%;
    height: 2px;
    background: #e2e6ea;
    z-index: 0;
}

.auth-stepper-item:first-child::before {
    display: none;
}

.auth-stepper-dot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef1f5;
    border: 2px solid #e2e6ea;
    color: #9aa0a6;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.auth-stepper-label {
    line-height: 1.2;
}

.auth-stepper-item.is-active {
    color: #d5441c;
}

.auth-stepper-item.is-active .auth-stepper-dot {
    background: #d5441c;
    border-color: #d5441c;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(213, 68, 28, 0.3);
}

/* Completed steps: filled blue with a check, and a solid connector. */
.auth-stepper-item.is-complete {
    color: #28637e;
    cursor: pointer;
}

.auth-stepper-item.is-complete .auth-stepper-dot {
    background: #28637e;
    border-color: #28637e;
    color: #ffffff;
}

.auth-stepper-item.is-complete::before {
    background: #28637e;
}

/* Only one step is visible at a time once the wizard is active. */
.wizard-on .auth-step {
    display: none;
}

.wizard-on .auth-step.is-active {
    display: block;
}

/* In wizard mode each step owns the body, so drop the inter-section divider. */
.wizard-on .auth-section + .auth-section {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Navigation row (Back / Next / Create Account). */
.auth-wizard-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 36px 4px;
}

.auth-wizard-nav .auth-nav-spacer {
    flex: 1 1 auto;
}

/* Back / Next are plain buttons hidden unless the wizard is active. */
.auth-btn-back,
.auth-btn-next {
    display: none;
}

.wizard-on .auth-btn-back,
.wizard-on .auth-btn-next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.auth-wizard-nav .btn.auth-btn-back {
    height: 44px;
    padding: 0 20px;
    border-radius: 10px;
    border: 1px solid #d6dae0;
    background: #ffffff;
    color: #595a5c;
    font-weight: 600;
}

.auth-wizard-nav .btn.auth-btn-back:hover {
    border-color: #b7bec6;
    color: #231f20;
}

.auth-wizard-nav .btn.auth-btn-next {
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    font-weight: 600;
    background: linear-gradient(135deg, #d5441c 0%, #e05a2f 100%);
    box-shadow: 0 8px 18px rgba(213, 68, 28, 0.28);
}

.auth-wizard-nav .btn.auth-btn-next:hover {
    filter: brightness(1.04);
}

/* The finish (submit) button spans the row on the last step; in wizard mode it
   only appears on the final step. Selectors are scoped through .auth-wizard-nav
   so they outrank the .auth-submit base styling. */
.wizard-on .auth-wizard-nav .btn.auth-btn-finish {
    display: none;
}

.wizard-on.wizard-last .auth-wizard-nav .btn.auth-btn-finish {
    display: block;
}

.wizard-on.wizard-last .auth-btn-next {
    display: none;
}

.auth-wizard-nav .btn.auth-submit {
    width: auto;
    flex: 1 1 auto;
}

/* Per-field validation feedback shown while stepping. */
.auth-card-body .form-group.has-error .form-control {
    border-color: #d9534f;
}

.auth-card-body .form-group.has-error .input-group-addon {
    border-color: #d9534f;
    color: #d9534f;
    background: #fdf2f2;
}

.auth-field-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #d9534f;
}

/* Two-column responsive field grid. */
.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

@media (max-width: 560px) {
    .auth-grid {
        grid-template-columns: 1fr;
    }
}

/* Info / guidance callout (replaces the old accordions). */
.auth-note {
    margin-bottom: 18px;
    padding: 12px 14px;
    background: #f6f8fa;
    border: 1px solid #e6e9ee;
    border-left: 3px solid #28637e;
    border-radius: 8px;
    font-size: 13px;
    color: #4a4d52;
}

.auth-note-title {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    color: #28637e;
}

.auth-note ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

.auth-note li {
    margin: 2px 0;
}

.auth-help-text {
    margin: -8px 0 16px;
    font-size: 12px;
    color: #8a8d92;
}

/* Security question prompt shown above each answer field. */
.auth-question-text {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #231f20;
    line-height: 1.4;
}

.auth-question + .form-group {
    margin-top: 0;
}

/* Form fields ----------------------------------------------------------- */

.auth-card-body .form-group {
    margin-bottom: 18px;
}

.auth-card-body label,
.auth-card-body .control-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #595a5c;
    text-align: left;
}

.auth-card-body .input-group {
    width: 100%;
    box-shadow: 0 1px 2px rgba(35, 31, 32, 0.04);
    border-radius: 10px;
}

.auth-card-body .form-control {
    height: 46px;
    border: 1px solid #d6dae0;
    border-radius: 10px;
    font-size: 15px;
    color: #231f20;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Multi-line inputs should grow, not be pinned to the single-line height. */
.auth-card-body textarea.form-control {
    height: auto;
    min-height: 96px;
    padding: 10px 12px;
    line-height: 1.5;
}

/* When the field has an appended icon, square off the joined corners. */
.auth-card-body .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.auth-card-body .form-control::placeholder {
    color: #a2a6ac;
}

.auth-card-body .form-control:focus {
    border-color: #d5441c;
    box-shadow: 0 0 0 3px rgba(213, 68, 28, 0.15);
    outline: none;
}

.auth-card-body .input-group-addon {
    min-width: 48px;
    border: 1px solid #d6dae0;
    border-left: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background: #f6f7f9;
    color: #8a8d92;
}

.auth-card-body .input-group:focus-within .input-group-addon {
    border-color: #d5441c;
    color: #d5441c;
    background: #fff4f0;
}

.auth-card-body .input-group:focus-within .form-control {
    border-color: #d5441c;
}

/* Submit button --------------------------------------------------------- */

.auth-actions {
    padding: 16px 36px 4px;
}

.auth-actions .btn.auth-submit,
.auth-actions .btn-primary.auth-submit,
.auth-wizard-nav .btn.auth-submit,
.auth-wizard-nav .btn-primary.auth-submit {
    display: block;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #ffffff;
    background: linear-gradient(135deg, #d5441c 0%, #e05a2f 100%);
    box-shadow: 0 8px 18px rgba(213, 68, 28, 0.28);
    transition: transform 0.05s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.auth-actions .btn.auth-submit:hover,
.auth-actions .btn.auth-submit:focus,
.auth-wizard-nav .btn.auth-submit:hover,
.auth-wizard-nav .btn.auth-submit:focus {
    color: #ffffff;
    filter: brightness(1.04);
    box-shadow: 0 10px 22px rgba(213, 68, 28, 0.36);
}

.auth-actions .btn.auth-submit:active,
.auth-wizard-nav .btn.auth-submit:active {
    transform: translateY(1px);
    box-shadow: 0 5px 12px rgba(213, 68, 28, 0.3);
}

.auth-actions .btn.auth-submit .fa,
.auth-wizard-nav .btn.auth-submit .fa {
    margin-right: 8px;
}

/* Footer links ---------------------------------------------------------- */

.auth-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 36px 30px;
    font-size: 14px;
}

.auth-card-footer .btn-link {
    padding: 0;
    color: #28637e;
    font-weight: 600;
    text-decoration: none;
}

.auth-card-footer .btn-link:hover,
.auth-card-footer .btn-link:focus {
    color: #d5441c;
    text-decoration: underline;
}

.auth-card-footer .auth-sep {
    color: #c7ccd3;
}

/* User consent page ----------------------------------------------------- */

.auth-page-consent {
    padding: 12px 16px 20px;
}

.auth-card.auth-card-consent {
    max-width: 960px;
}

.auth-card-consent .auth-card-header {
    padding: 20px 32px 0;
}

.auth-card-consent .auth-badge {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
    border-radius: 14px;
    font-size: 22px;
}

.auth-card-consent .auth-title {
    font-size: 20px;
    margin-bottom: 4px;
}

.auth-card-consent .auth-subtitle {
    font-size: 13px;
}

.auth-card-consent .auth-card-body {
    padding: 12px 32px 0;
}

.auth-card-consent .auth-actions {
    padding: 12px 32px 24px;
}

.auth-consent-intro {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #7a7d82;
}

/* Match trunk: scroll only inside the agreement panel, not the page. */
.auth-consent-message {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e6e9ee;
    border-left: 3px solid #28637e;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.55;
    color: #4a4d52;
}

.auth-consent-message p {
    margin: 0 0 0.75em;
}

.auth-consent-message p:last-child {
    margin-bottom: 0;
}

/* Trim template spacing so the card fits without page scroll. */
html body:has(.auth-page-consent) .row:has(> .col-xs-12 > .rowSpace) {
    display: none;
}

html body:has(.auth-page-consent) #footer-classification {
    display: none;
}

/* Keep the product footer at the bottom of the viewport when the consent
   card is shorter than the screen (instead of sitting right under the card). */
html body:has(.auth-page-consent) > .container-fluid {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

html body:has(.auth-page-consent) > .container-fluid > .row:has(.footer) {
    margin-top: auto;
}

.auth-actions-stacked {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-card-consent .auth-actions-stacked {
    flex-direction: row;
    gap: 12px;
}

.auth-card-consent .auth-actions-stacked .btn.auth-submit,
.auth-card-consent .auth-actions-stacked .btn.auth-cancel {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}

.auth-actions .btn.auth-cancel,
.auth-actions-stacked .btn.auth-cancel {
    display: block;
    width: 100%;
    height: 44px;
    border: 1px solid #d6dae0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #595a5c;
    background: #ffffff;
    box-shadow: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.auth-actions .btn.auth-cancel:hover,
.auth-actions .btn.auth-cancel:focus,
.auth-actions-stacked .btn.auth-cancel:hover,
.auth-actions-stacked .btn.auth-cancel:focus {
    border-color: #d9534f;
    color: #d9534f;
    background: #fdf2f2;
}

.auth-actions .btn.auth-cancel .fa,
.auth-actions-stacked .btn.auth-cancel .fa {
    margin-right: 8px;
}

@media (max-width: 480px) {
    .auth-card-header,
    .auth-alerts,
    .auth-card-body,
    .auth-actions,
    .auth-card-footer {
        padding-left: 22px;
        padding-right: 22px;
    }

    .auth-card-consent .auth-card-header,
    .auth-card-consent .auth-card-body,
    .auth-card-consent .auth-actions {
        padding-left: 22px;
        padding-right: 22px;
    }

    .auth-card-consent .auth-actions-stacked {
        flex-direction: column;
    }

    .auth-card-consent .auth-actions-stacked .btn.auth-submit,
    .auth-card-consent .auth-actions-stacked .btn.auth-cancel {
        width: 100%;
    }
}