/* SuperSDM sign-in page. Colours come only from theme tokens (theme-system.css),
   so the page follows whichever palette/theme is active. */

body.cas-login-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-ui);
    color: var(--theme-text);
    background: var(--theme-bg-page);
}

.auth-stage {
    min-height: calc(100dvh - var(--ws-shell-top-height, 52px) - var(--ws-shell-bottom-height, 24px));
    padding: clamp(20px, 5vw, 56px) 16px;
    display: grid;
    place-items: center;
}

.auth-card {
    width: min(960px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    border: 1px solid var(--theme-border-subtle);
    border-radius: 16px;
    background: var(--theme-surface);
    box-shadow: var(--theme-shadow-raised);
    overflow: hidden;
}

/* Identity panel */
.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 40px 36px;
    background: var(--theme-surface-soft);
    border-right: 1px solid var(--theme-border-subtle);
}
.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--theme-accent);
}
.auth-mark {
    display: flex;
    align-items: center;
    gap: 12px;
}
.auth-mark-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--theme-accent);
    color: var(--theme-on-accent);
    font-size: 18px;
}
.auth-mark-text { display: grid; gap: 2px; }
.auth-mark-text strong { font-size: var(--fs-md); letter-spacing: .01em; }
.auth-mark-text span { font-size: var(--fs-xs); color: var(--theme-muted); }
.auth-brand h2 {
    margin: 6px 0 0;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.auth-brand-lead {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--theme-text-soft);
}
.auth-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}
.auth-points li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--theme-text-soft);
}
.auth-points i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
    font-size: 13px;
}
.auth-points strong { display: block; color: var(--theme-text); font-size: var(--fs-sm); }
.auth-status {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.zone-chip,
.secure-chip,
.helper-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid var(--theme-border-subtle);
    border-radius: 999px;
    background: var(--theme-surface);
    color: var(--theme-text-soft);
    font-size: var(--fs-2xs);
    font-weight: 600;
    white-space: nowrap;
}
.zone-chip.zone-trusted { color: var(--theme-success); border-color: color-mix(in srgb, var(--theme-success) 35%, var(--theme-surface)); }
.zone-chip.zone-campus { color: var(--theme-warning); border-color: color-mix(in srgb, var(--theme-warning) 35%, var(--theme-surface)); }
.zone-chip.zone-public { color: var(--theme-danger); border-color: color-mix(in srgb, var(--theme-danger) 35%, var(--theme-surface)); }
.secure-chip i { color: var(--theme-success); }
.secure-chip.is-off { color: var(--theme-muted); }
.secure-chip.is-off i { color: var(--theme-muted); }
.auth-network-hint {
    width: 100%;
    margin: 2px 0 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--theme-muted);
}

/* Form panel */
.auth-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 44px 48px 36px;
}
.auth-head h1 {
    margin: 0;
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.auth-head p {
    margin: 8px 0 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--theme-muted);
}
.auth-target {
    margin: 4px 0 0;
    font-size: var(--fs-xs);
    color: var(--theme-muted);
}
.auth-target code {
    font-family: var(--font-code);
    color: var(--theme-text-soft);
}
.banner {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.banner-success { background: var(--theme-success-soft); border-color: color-mix(in srgb, var(--theme-success) 30%, var(--theme-surface)); color: var(--theme-success); }
.banner-error { background: var(--theme-danger-soft); border-color: color-mix(in srgb, var(--theme-danger) 30%, var(--theme-surface)); color: var(--theme-danger); }

.auth-form { display: grid; gap: 16px; }
.field-label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--theme-text);
}
.field { position: relative; }
.field-icon,
.field-action {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    color: var(--theme-muted);
}
.field-icon { left: 14px; width: 18px; pointer-events: none; }
.field input {
    width: 100%;
    min-height: 44px;
    padding: 0 48px 0 42px;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    background: var(--theme-surface);
    color: var(--theme-text);
    font-size: var(--fs-md);
    box-sizing: border-box;
}
.field input::placeholder { color: var(--theme-muted); opacity: .85; }
.field input:focus {
    outline: none;
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 18%, transparent);
}
.field-action {
    right: 6px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}
.field-action:hover { background: var(--theme-surface-soft); color: var(--theme-text); }

.auth-submit {
    width: 100%;
    min-height: 44px;
    margin-top: 4px;
    border: 1px solid var(--btn-primary-bg);
    border-radius: 10px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-size: var(--fs-md);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}
.auth-submit:hover:not(:disabled) { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
/* glasswave-pro.css restyles every <button> with !important; the primary action must stay filled. */
body.cas-login-page .auth-submit,
body.cas-login-page .auth-submit:hover:not(:disabled) {
    background: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    box-shadow: none !important;
    transform: none !important;
}
body.cas-login-page .auth-submit:hover:not(:disabled) {
    background: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
}
body.cas-login-page .field-action { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.auth-submit:disabled { opacity: .75; cursor: progress; }
.btn-loading { display: none; align-items: center; gap: 8px; }
.btn-loading .spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--btn-primary-text) 35%, transparent);
    border-top-color: var(--btn-primary-text);
    animation: authSpin .8s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

.status-note {
    min-height: 1.4em;
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--theme-muted);
    text-align: center;
}
.status-note.is-busy { color: var(--theme-accent-strong); }

.auth-links {
    display: grid;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--theme-border-subtle);
    font-size: var(--fs-sm);
    color: var(--theme-muted);
}
.auth-links p { margin: 0; line-height: 1.6; }
.auth-links a {
    color: var(--theme-link);
    font-weight: 600;
    text-decoration: none;
}
.auth-links a:hover,
.auth-links a:focus-visible { text-decoration: underline; }
.auth-links .helper-row { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 880px) {
    .auth-card { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
    .auth-brand { padding: 20px 22px 18px; gap: 12px; border-right: 0; border-bottom: 1px solid var(--theme-border-subtle); }
    .auth-brand h2, .auth-brand-lead, .auth-points { display: none; }
    .auth-status { margin-top: 0; }
    .auth-main { padding: 26px 22px 24px; gap: 18px; }
    .auth-head h1 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-loading .spinner { animation-duration: 2.4s; }
}