/*
 * EvaliFlow redesign — branded auth pages (Login / Register / Forgot /
 * Reset / AcceptInvite / AccessDenied).
 *
 * Source of truth: design_handoff_evaliflow_redesign (login screen).
 * Full-screen navy gradient, white EvaliFlow logo, 400px white card
 * (wider for Register/AcceptInvite), Jost headings, teal actions.
 * Self-contained — these pages load only this sheet (no Bootstrap);
 * `.alert-*` class names are kept for test/PageModel compatibility.
 */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

.evf-auth-body {
    min-height: 100vh;
    background: linear-gradient(160deg, #172654 0%, #0d1733 55%, #0a1129 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans", Arial, sans-serif;
    padding: 40px 20px;
}

.evf-auth-logo {
    height: 44px;
    width: auto;
    margin-bottom: 28px;
}

.evf-auth-card {
    width: 100%;
    max-width: 400px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    padding: 32px 32px 28px;
}

.evf-auth-card--wide { max-width: 560px; }
.evf-auth-card--mid  { max-width: 480px; }

.evf-auth-title {
    font-family: "Jost", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #172654;
    text-align: center;
    margin: 0;
}

.evf-auth-sub {
    font-size: 13px;
    color: #54628a;
    text-align: center;
    margin: 5px 0 24px;
}

/* Section headings inside longer forms (Register). */
.evf-auth-section {
    font-family: "Jost", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #8794b3;
    margin: 22px 0 12px;
}

.evf-auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.evf-auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}

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

.evf-auth-label {
    font-family: "Jost", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #54628a;
}

.evf-auth-label .req { color: #B4781A; }

.evf-auth-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.evf-auth-label-row a { font-size: 12px; font-weight: 600; }

.evf-auth-input,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control {
    height: 42px;
    width: 100%;
    border: 1px solid #e4e9f1;
    border-radius: 8px;
    padding: 0 13px;
    font-family: "Noto Sans", sans-serif;
    font-size: 13.5px;
    color: #172654;
    outline: none;
    background: #ffffff;
}

.evf-auth-input:focus,
.form-control:focus { border-color: #009B9B; }

.evf-auth-input:disabled,
.form-control:disabled { background: #f6f8fb; color: #54628a; }

.evf-auth-input::placeholder { color: #8794b3; }

.evf-auth-hint {
    font-size: 12px;
    color: #8794b3;
    margin: 2px 0 0;
}

/* Remember-me / checkbox rows */
.evf-auth-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: #54628a;
    margin-bottom: 20px;
    cursor: pointer;
}

.evf-auth-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    border: 1.5px solid #c6cede;
    border-radius: 5px;
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
    display: inline-block;
    position: relative;
    background: #ffffff;
}

.evf-auth-check input[type="checkbox"]:checked {
    background: #009B9B;
    border-color: #009B9B;
}

.evf-auth-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 1.5px;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Primary action — full-width teal. */
.evf-auth-btn {
    width: 100%;
    height: 44px;
    background: #009B9B;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: "Jost", sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 155, 155, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.evf-auth-btn:hover { background: #007f7f; color: #ffffff; text-decoration: none; }

/* Secondary action — white with border. */
.evf-auth-btn-secondary {
    width: 100%;
    height: 44px;
    background: #ffffff;
    color: #54628a;
    border: 1px solid #e4e9f1;
    border-radius: 8px;
    font-family: "Jost", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.evf-auth-btn-secondary:hover {
    border-color: #009B9B;
    color: #007f7f;
    text-decoration: none;
}

/* EFW-1584 — a secondary action stacked directly under the primary one (the login form's
   "Continue with single sign-on" beneath "Sign in") needs breathing room; on its own, as on
   ForgotPassword, it does not. Adjacent-sibling selector so only the stacked case is affected. */
.evf-auth-btn + .evf-auth-btn-secondary {
    margin-top: 10px;
}

/* "NEW HERE" style divider. */
.evf-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 16px;
}

.evf-auth-divider span:first-child,
.evf-auth-divider span:last-child {
    flex: 1;
    height: 1px;
    background: #e4e9f1;
}

.evf-auth-divider .evf-auth-divider-label {
    flex: none;
    height: auto;
    background: none;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8794b3;
}

.evf-auth-alt {
    font-size: 13px;
    color: #54628a;
    text-align: center;
    margin: 0;
}

.evf-auth-alt a { font-weight: 600; }

a { color: #007f7f; text-decoration: none; }
a:hover { color: #009B9B; text-decoration: underline; }

/* Alerts — class names kept for tests/PageModels (.alert-danger etc.). */
.alert {
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 13px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}

.alert-danger {
    background: rgba(255, 76, 81, 0.10);
    border-color: rgba(255, 76, 81, 0.25);
    color: #b02a37;
}

.alert-success {
    background: rgba(0, 155, 155, 0.10);
    border-color: rgba(0, 155, 155, 0.25);
    color: #007f7f;
}

.alert-warning {
    background: rgba(180, 120, 26, 0.12);
    border-color: rgba(180, 120, 26, 0.25);
    color: #B4781A;
}

.evf-auth-footer {
    margin-top: 26px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
}

/* Access denied helpers */
.evf-auth-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.evf-auth-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(180, 120, 26, 0.14);
    color: #B4781A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 14px;
}