/*
 * Anonymous pages (Login, ForgotPassword, ResetPassword, ConfirmLogin) — _LoginLayout.cshtml.
 * Port of the AlphadiLicensePortal auth layout: ink brand panel with a plumb line that swings
 * once on load (lg+), the form centred in a narrow column on white.
 *
 * Plain CSS on purpose (not LESS, not bundled): it renders without a Visual Studio
 * Web Compiler / bundler run. Linked after crm-theme.min.css; overrides start with the
 * #auth id because the theme's input rules (html body input:not(...)x4, !important)
 * out-rank any class-only selector.
 *
 * --auth-u replaces the portal's rem (14px, 15px from 640px, 16px from 1024px).
 */
.auth {
    --auth-u: 14px;
    --auth-ink: #1e2229;
    --auth-text: #2a2f38;
    --auth-label: #444b57;
    --auth-input: #444b57;
    --auth-muted: #737b88;
    --auth-panel-muted: #9aa1ad;
    --auth-border: #c3c8d0;
    --auth-border-hover: #9aa1ad;
    --auth-primary: #0c785b;
    --auth-primary-hover: #0a6149;
    --auth-radius: 6px;
    /* Leaf green from the MedSales logo, only for the plumb line. */
    --auth-plumb: #6cc04a;
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background: #fff;
    color: var(--auth-text);
    font-size: var(--auth-u);
    line-height: 1.5;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 640px) {
    .auth {
        --auth-u: 15px;
    }
}

@media (min-width: 1024px) {
    .auth {
        --auth-u: 16px;
    }
}

/* --------------------------------------------------------------------------
   Brand panel (lg+)
   -------------------------------------------------------------------------- */
.auth-brand {
    position: relative;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
    width: 44%;
    max-width: calc(var(--auth-u) * 40);
    overflow: hidden;
    padding: calc(var(--auth-u) * 3);
    background: var(--auth-ink);
    color: #fff;
}

@media (min-width: 1024px) {
    .auth-brand {
        display: flex;
    }
}

@media (min-width: 1280px) {
    .auth-brand {
        padding-left: calc(var(--auth-u) * 4);
        padding-right: calc(var(--auth-u) * 4);
    }
}

.auth-brand-logo {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--auth-u) * 0.75);
    align-self: flex-start;
}

.auth-brand-logo img {
    width: calc(var(--auth-u) * 3);
    height: calc(var(--auth-u) * 3);
}

.auth-brand-name {
    display: block;
    font-size: calc(var(--auth-u) * 1.375);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #fff;
}

.auth-brand-by {
    display: block;
    font-size: calc(var(--auth-u) * 0.8125);
    color: var(--auth-panel-muted);
}

.auth-brand-text {
    position: relative;
    max-width: calc(var(--auth-u) * 24);
}

#auth .auth-brand-title {
    margin: 0;
    font-size: calc(var(--auth-u) * 2.5);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: #fff;
}

#auth .auth-brand-tagline {
    margin: var(--auth-u) 0 0;
    font-size: var(--auth-u);
    color: var(--auth-panel-muted);
}

/* The plumb bob, hung from the top edge of the brand panel. */
.auth-plumb {
    position: absolute;
    top: 0;
    right: 22%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    animation: auth-plumb-settle 2.6s cubic-bezier(0.25, 0.8, 0.3, 1) 0.2s both;
}

.auth-plumb-line {
    width: 1.5px;
    height: 46vh;
    background: var(--auth-plumb);
}

.auth-plumb-bob {
    width: 22px;
    height: 22px;
    margin-top: -5px;
    background: var(--auth-plumb);
    border-radius: 50% 50% 0 50%;
    transform: rotate(45deg);
}

/* One damped swing on load, then still. */
@keyframes auth-plumb-settle {
    0% {
        transform: rotate(9deg);
    }

    30% {
        transform: rotate(-5deg);
    }

    55% {
        transform: rotate(2.5deg);
    }

    78% {
        transform: rotate(-1deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-plumb {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Form column
   -------------------------------------------------------------------------- */
.auth-main {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    min-width: 0;
    padding: calc(var(--auth-u) * 2) calc(var(--auth-u) * 1.25);
}

@media (min-width: 640px) {
    .auth-main {
        padding-left: calc(var(--auth-u) * 2.5);
        padding-right: calc(var(--auth-u) * 2.5);
    }
}

.auth-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--auth-u);
    min-height: calc(var(--auth-u) * 2.25);
}

.auth-top-logo {
    display: block;
    height: calc(var(--auth-u) * 2.25);
    width: auto;
}

@media (min-width: 1024px) {
    .auth-top-logo {
        display: none;
    }
}

.auth-env-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-left: auto;
}

.auth-center {
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    justify-content: center;
    padding: calc(var(--auth-u) * 2.5) 0;
}

.auth-content {
    width: 100%;
    max-width: calc(var(--auth-u) * 24);
}

#auth .auth-title {
    margin: 0 0 calc(var(--auth-u) * 0.375);
    font-size: calc(var(--auth-u) * 1.75);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--auth-text);
}

#auth .auth-subtitle {
    margin: 0 0 calc(var(--auth-u) * 2);
    font-size: var(--auth-u);
    color: var(--auth-muted);
    white-space: pre-line;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--auth-u);
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: calc(var(--auth-u) * 0.25);
}

#auth .auth-label {
    margin: 0;
    font-size: calc(var(--auth-u) * 0.875);
    font-weight: 600;
    line-height: 1.4;
    color: var(--auth-label);
}

/* Inputs (Optimus/Aura look): 1px slate border, 6px radius, primary border on focus. */
#auth .form-control {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: calc(var(--auth-u) * 0.5) calc(var(--auth-u) * 0.75);
    /* Never below 16px: iOS Safari zooms into smaller inputs on focus. */
    font-size: max(16px, var(--auth-u)) !important;
    line-height: 1.5 !important;
    text-align: left;
    color: var(--auth-input);
    background: #fff !important;
    border: 1px solid var(--auth-border) !important;
    border-radius: var(--auth-radius) !important;
    box-shadow: 0 1px 2px 0 rgba(18, 18, 23, 0.05) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#auth .form-control:hover:not(:disabled) {
    border-color: var(--auth-border-hover) !important;
    box-shadow: 0 1px 2px 0 rgba(18, 18, 23, 0.05) !important;
}

/* Same specificity as the hover rule and declared after it, so focus wins while hovered. */
#auth .form-control:focus:not(:disabled),
#auth .form-control:active:not(:disabled) {
    outline: none;
    border-color: var(--auth-primary) !important;
    box-shadow: 0 1px 2px 0 rgba(18, 18, 23, 0.05) !important;
}

#auth .auth-code-input {
    letter-spacing: 0.3em;
}

/* Password field with show/hide toggle inside the input. */
.auth-password {
    position: relative;
}

#auth .auth-password .form-control {
    padding-right: calc(var(--auth-u) * 2.5);
}

#auth .auth-password-toggle {
    position: absolute;
    top: 50%;
    right: calc(var(--auth-u) * 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--auth-u) * 1.75);
    height: calc(var(--auth-u) * 1.75);
    padding: 0;
    color: var(--auth-muted);
    background: transparent;
    border: 0;
    border-radius: var(--auth-radius);
    box-shadow: none;
    transform: translateY(-50%);
    cursor: pointer;
}

#auth .auth-password-toggle:hover {
    color: var(--auth-text);
}

#auth .auth-password-toggle svg {
    width: var(--auth-u);
    height: var(--auth-u);
}

.auth-password-toggle .auth-icon-hide,
.auth-password-toggle.is-visible .auth-icon-show {
    display: none;
}

.auth-password-toggle.is-visible .auth-icon-hide {
    display: inline-flex;
}

/* Buttons: full-width primary submit, link-style secondary actions below it. */
#auth .btn.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--auth-u) * 0.5);
    width: 100%;
    margin: 0;
    padding: calc(var(--auth-u) * 0.5) var(--auth-u) !important;
    font-size: var(--auth-u) !important;
    font-weight: 500 !important;
    line-height: 1.5;
    color: #fff !important;
    background: var(--auth-primary) !important;
    border: 1px solid var(--auth-primary) !important;
    border-radius: var(--auth-radius) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

#auth .btn.auth-submit:hover,
#auth .btn.auth-submit:active {
    background: var(--auth-primary-hover) !important;
    border-color: var(--auth-primary-hover) !important;
    transform: none !important;
}

#auth .auth-link {
    display: block;
    width: 100%;
    padding: calc(var(--auth-u) * 0.5) var(--auth-u);
    font-size: var(--auth-u);
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    color: var(--auth-primary);
    text-decoration: none;
    border-radius: var(--auth-radius);
}

#auth .auth-link:hover {
    color: var(--auth-primary);
    text-decoration: underline;
}

#auth .btn.auth-submit:focus-visible,
#auth .auth-link:focus-visible,
#auth .auth-password-toggle:focus-visible {
    outline: 2px solid var(--auth-primary);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* Messages (Optimus p-message look): soft tint, 1px border, no shadow. */
#auth .alert {
    margin: 0 0 var(--auth-u);
    padding: calc(var(--auth-u) * 0.5) calc(var(--auth-u) * 0.75);
    font-size: var(--auth-u);
    font-weight: 500;
    text-align: left;
    border: 1px solid transparent !important;
    border-radius: var(--auth-radius) !important;
    box-shadow: none;
}

#auth .alert-success {
    color: #16a34a !important;
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

#auth .alert-danger {
    color: #dc2626 !important;
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}

#auth .alert-warning {
    color: #ca8a04 !important;
    background: #fefce8 !important;
    border-color: #fef08a !important;
}

#auth .alert-info,
#auth .alert-message {
    color: #2563eb !important;
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
}