/* Shared styling for login, first-run, and reset-password. Unlayered on purpose. */

/* Login anchor-button padding lives in the ant-stomper layer in Login.cshtml. */

/* Doubled selector beats AntDesign's .ant-card, which loads after this in the app shell. */
.ant-card.auth-card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 30px var(--overlay-hover-subtle);
    overflow: hidden;
}
.auth-card .ant-card-body {
    padding: 28px;
}

.auth-card .ant-card-head {
    border-bottom-color: var(--border-100);
    padding-left: 0;
    padding-right: 0;
}

/* Direct child only — these login-stack rules shouldn't reach nested Tabs/wizard spaces. */
.auth-card > .ant-card-body > .ant-space-vertical {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
.auth-card > .ant-card-body > .ant-space-vertical > .ant-space-item {
    margin-bottom: 0 !important;
}
.auth-card h4.ant-typography {
    margin-bottom: 8px;
}
/* Don't override .ant-form-item margin — it breaks AntDesign's validation-explain offset
   (.ant-form-item-margin-offset) and overlaps errors. Use markup margin-top for gaps. */
.auth-card .ant-btn,
.auth-card .auth-or,
.auth-card .ant-form-horizontal {
    max-width: none !important;
}
/* AntDesign's Form wraps fields in spin containers that shrink to content. */
.auth-card .ant-form,
.auth-card .ant-spin-nested-loading,
.auth-card .ant-spin-container {
    width: 100%;
}

.auth-tagline {
    font-size: 18px;
    font-family: SFProDisplay-Semibold, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    color: var(--text-300);
    line-height: 1.25;
    text-align: center;
}
.auth-footnote {
    font-size: 12px;
    color: var(--text-100);
    white-space: nowrap;
}

.auth-or {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 auto;
    color: var(--text-100);
    font-size: 12px;
}
.auth-or::before,
.auth-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-100);
}

/* gap:0 + per-row margins because a flex gap can't be margin-offset for uneven spacing. */
.auth-stack {
    gap: 0 !important;
    width: 100%;
    max-width: 380px;
}
.auth-stack > #logo {
    margin-bottom: 28px;
}
.auth-stack > .auth-tagline {
    margin-bottom: 8px;
}
.auth-stack > .auth-card {
    margin-bottom: 24px;
}
.auth-stack > .ant-alert,
.auth-stack > .ant-typography {
    margin-bottom: 16px;
}
.auth-stack > .ant-typography:last-child {
    margin-bottom: 0;
}

.auth-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(40px, 12vw, 200px);
    padding: 32px;
    box-sizing: border-box;
}
@media (max-width: 720px) {
    .auth-row {
        flex-direction: column;
        gap: 32px;
    }
}
.auth-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 380px;
}

/* Logo: dark-text wordmark on light, white wordmark on dark. */
.auth-logo--white {
    display: none;
}
:root[data-theme="dark"] .auth-logo--dark {
    display: none;
}
:root[data-theme="dark"] .auth-logo--white {
    display: inline;
}

:root[data-theme="dark"] .auth-footnote {
    color: var(--text-100);
}
:root[data-theme="dark"] .auth-or {
    color: var(--text-100);
}
:root[data-theme="dark"] .auth-or::before,
:root[data-theme="dark"] .auth-or::after {
    background: var(--border-100);
}

/* The first-run wizard renders AntDesign Text/Steps/Tabs inside the card, but those
   components hardcode light-theme text colors. Re-point them at tokens so the theme drives them. */
.auth-card .ant-typography,
.auth-card .ant-steps-item-title,
.auth-card .ant-steps-item-content {
    color: var(--text-300);
}
.auth-card .ant-checkbox-wrapper {
    color: var(--text-400);
}
.auth-card .ant-steps-item-wait .ant-steps-item-title,
.auth-card .ant-steps-item-wait .ant-steps-item-icon {
    color: var(--text-100);
    border-color: var(--border-100);
}
.auth-card .ant-divider {
    border-color: var(--border-100);
}

/* First-run tabs sit inside the card. Keep the global bordered-nav treatment specific to the
   app shell — inside the card the nav border/padding reads as clutter, so drop them here. */
.auth-card .ant-tabs-top > .ant-tabs-nav .ant-tabs-nav-list,
.auth-card .ant-tabs-bottom > .ant-tabs-nav .ant-tabs-nav-list {
    padding-bottom: 0;
}
.auth-card .ant-tabs-top > .ant-tabs-nav::before,
.auth-card .ant-tabs-bottom > .ant-tabs-nav::after {
    border-bottom-color: transparent;
}

/* AntDesign on the pre-auth pages runs with its compiled light theme (only data-theme is flipped,
   not the JS theme), so inputs/buttons keep light colors. Re-point them at tokens for both themes. */
.auth-card .ant-input,
.auth-card .ant-input-affix-wrapper {
    background-color: var(--fill-100);
    border-color: var(--border-200);
    color: var(--text-300);
}
.auth-card .ant-input-affix-wrapper .ant-input {
    background-color: transparent;
}
.auth-card .ant-input-prefix .anticon {
    color: var(--text-100);
}
.auth-card .ant-btn-default {
    background-color: var(--fill-100);
    border-color: var(--border-200);
    color: var(--text-300);

    &[disabled] {
        opacity: 0.5;
    }
}
.auth-card .ant-btn-default:not([disabled]):hover {
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-bg);
}

/* Sized column so the card resolves width:100% inside AntDesign's shrink-wrapping Space. */
.auth-card-col {
    width: 380px;
    max-width: 100%;
}

.auth-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}
.auth-result > img {
    margin-bottom: 16px;
}
.auth-result__title {
    color: var(--text-400);
    font-size: 24px;
    line-height: 1.3;
}
.auth-result__subtitle {
    color: var(--text-300);
    font-size: 14px;
}
.auth-result__extra {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}

.auth-fullbg {
    background-color: var(--fill-brand-100);
    background-image: url('../../background-light.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
:root[data-theme="dark"] .auth-fullbg,
.auth-fullbg.auth-fullbg--dark {
    background-color: var(--fill-100);
    background-image: url('../../background-dark.svg');
}

/* Cold-start loading screen: the full PSU logo, static, with only the underscore glyph blinking. */
@keyframes auth-caret-blink {
    0%, 55%      { opacity: 1; }
    55.01%, 100% { opacity: 0; }
}

.auth-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.auth-loading__status {
    font-family: "SFMono-Regular", "Cascadia Code", Consolas, Menlo, monospace;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: var(--text-100);
    animation: auth-logo-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}
:root[data-theme="dark"] .auth-loading__status {
    color: rgba(255, 255, 255, 0.5);
}
.auth-loading__dots::after {
    content: "…";
}

.auth-logo-loading {
    display: block;
    width: 222px;
    height: auto;
    animation: auth-logo-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes auth-logo-rise {
    from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.auth-logo-loading.is-leaving {
    animation: auth-logo-leave 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes auth-logo-leave {
    from { opacity: 1; transform: translateY(0);     filter: blur(0); }
    to   { opacity: 0; transform: translateY(-12px); filter: blur(3px); }
}
.auth-logo-loading__word {
    fill: var(--text-400);
}
.auth-logo-loading__underscore {
    animation: auth-caret-blink 1.05s steps(1, end) infinite;
}
/* Startup failed: freeze the blinking caret and flag the status line as an error. */
.auth-logo-loading.has-error .auth-logo-loading__underscore {
    animation: none;
    opacity: 1;
}
.auth-loading.has-error .auth-loading__status {
    color: var(--red-500, #d9363e);
}
@media (prefers-reduced-motion: reduce) {
    .auth-loading__status,
    .auth-logo-loading,
    .auth-logo-loading__underscore { animation: none; }
}