/* ============================================================================
   LOGIN - SSO look
   ----------------------------------------------------------------------------
   Mirrors the identity provider's own login screen
   (SsoIdentityProvider/Sso.Api/wwwroot/css/login.css) so the first screen a
   user sees matches the one they are handed to seconds later: a 50/50 split,
   form on flat white at the left, artwork at the right in a large rounded
   panel, filled inputs, and a full-width pill button.

   Colours come from Sso.Api/wwwroot/css/global.css. Type comes from
   assets/css/acs-typography.css (Mulish), which must be linked before this.

   Two hooks are load-bearing and must not be renamed - assets/js/translateV2.js
   binds to both, and they are how a school's own branding reaches this page:
     .acs-admin-bg   gets a tenant gradient applied with !important
     .acs-admin-img  gets its src swapped for the school's own image
   Anything here that sets a background on those elements is only a fallback for
   schools that have not themed, and is expected to lose to translateV2.
   ============================================================================ */

:root {
    --login-primary: #3276ff;
    --login-primary-darker: #3567d4;
    --login-primary-subtle: #e5eeff;
    --login-fg: #010816;
    --login-muted: #4b5563;
    --login-label: #1e293b;
    --login-placeholder: #94a3b8;
    --login-input-bg: #f0f0f3;
    --login-border: #e2e8f0;
    --login-danger: #ee4444;
    --login-radius: 8px;
    --login-panel-radius: 40px;
}

/* ============================================
   SHELL - 50/50 split
   ============================================ */
body.login-page {
    margin: 0;
    background: #ffffff;
    color: var(--login-fg);
    font-family: var(--acs-font-sans, "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
}

.login-container {
    display: flex;
    min-height: 100vh;
}

.login-form-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 40px;
}

.login-form-inner {
    width: 100%;
    max-width: 450px;
}

/* The artwork panel. Inset and heavily rounded, per the identity provider. */
.login-bg-wrapper {
    flex: 1;
    position: relative;
    min-height: 500px;
    overflow: hidden;
    margin: 8px 20px;
    border-radius: var(--login-panel-radius);
    background-color: #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    color: #ffffff;
    text-align: center;
}

/* ============================================
   FORM HEADER
   ============================================ */
.login-header {
    text-align: center;
    margin-bottom: 28px;
}

.login-logo-link {
    display: inline-block;
}

.login-logo {
    max-height: 96px;
    width: auto;
}

.login-header h2 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    margin: 16px 0 8px;
    color: var(--login-fg);
}

.login-welcome-line {
    color: var(--login-muted);
    font-size: 15px;
    margin: 8px 0 0;
}

.portal-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    background: var(--login-primary-subtle);
    color: var(--login-primary-darker);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ============================================
   FIELDS
   ============================================ */
.login-field {
    margin-bottom: 24px;
}

.login-field .form-label,
.login-field label {
    display: block;
    font-weight: 600;
    font-size: 0.925rem;
    color: var(--login-label);
    margin-bottom: 6px;
}

.input-wrapper {
    position: relative;
    width: 100%;
}

.input-wrapper .input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--login-placeholder);
    font-size: 1rem;
    pointer-events: none;
    transition: color 0.2s;
}

.modern-input,
.input-wrapper input[type="text"],
.input-wrapper input[type="password"],
.input-wrapper input[type="email"] {
    width: 100%;
    height: 48px;
    padding: 0 1rem 0 2.85rem;
    background-color: var(--login-input-bg);
    border: 1px solid var(--login-border);
    border-radius: var(--login-radius);
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--login-label);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.modern-input::placeholder {
    color: var(--login-placeholder);
}

.modern-input:focus,
.input-wrapper input:focus {
    outline: none;
    border-color: var(--login-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    background-color: #ffffff;
}

.input-wrapper input:focus ~ .input-icon {
    color: var(--login-primary);
}

/* Password reveal sits inside the field, so the field needs room on the right. */
.input-wrapper.has-reveal input {
    padding-right: 2.75rem;
}

.password-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 6px;
    line-height: 1;
    cursor: pointer;
    color: #666666;
    border-radius: 9999px;
}

.password-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.show-password-label {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    font-size: 14px;
    color: var(--login-muted);
    cursor: pointer;
}

.show-password-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    accent-color: var(--login-primary);
}

/* Selects, including the Select2-backed school picker. */
.modern-select {
    width: 100%;
    height: 48px;
    padding: 0 1rem;
    background-color: var(--login-input-bg);
    border: 1px solid var(--login-border);
    border-radius: var(--login-radius);
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--login-label);
}

.modern-select:focus {
    outline: none;
    border-color: var(--login-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.select2-container--default .select2-selection--single {
    height: 48px;
    background-color: var(--login-input-bg);
    border: 1px solid var(--login-border);
    border-radius: var(--login-radius);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 46px;
    padding-left: 1rem;
    color: var(--login-label);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
}

/* ============================================
   BUTTONS - full-width pill
   ============================================ */
.modern-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 9999px;
    background-color: var(--login-primary);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.modern-btn:hover,
.modern-btn:focus {
    background-color: var(--login-primary-darker);
    color: #ffffff;
    text-decoration: none;
}

/* Secondary / provider button - outlined, per the identity provider's
   "Or Login With" row. */
.alt-login-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--login-border);
    border-radius: var(--login-radius);
    background: #ffffff;
    color: var(--login-label);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.alt-login-mark {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: block;
}

.alt-login-link:hover,
.alt-login-link:focus {
    background-color: #f8fafc;
    border-color: #cbd5e1;
    color: var(--login-label);
    text-decoration: none;
}

/* ============================================
   DIVIDER
   ============================================ */
.divider-text {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    color: #64748b;
    font-size: 0.875rem;
}

.divider-text::before,
.divider-text::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--login-border);
}

.divider-text span {
    padding: 0 1rem;
    font-weight: 500;
}

/* ============================================
   ERRORS
   ============================================ */
.error-message {
    color: var(--login-danger);
    font-size: 12px;
    margin-top: 4px;
}

.login-alert-error {
    padding: 12px 16px;
    border-radius: var(--login-radius);
    margin-bottom: 16px;
    font-size: 14px;
    background-color: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

/* ============================================
   LINKS
   ============================================ */
.forgot-link-row {
    text-align: right;
    margin-bottom: 24px;
}

.forgot-link {
    color: var(--login-primary);
    text-decoration: none;
    font-size: 14px;
}

.forgot-link:hover {
    text-decoration: underline;
    color: var(--login-primary-darker);
}

.login-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--login-border);
}

.portal-link {
    color: var(--login-muted);
    font-size: 13px;
    text-decoration: none;
}

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

/* ============================================
   RESPONSIVE - matches the identity provider's
   two breakpoints
   ============================================ */
@media (max-width: 1024px) {
    .login-container {
        flex-direction: column;
    }

    .login-bg-wrapper {
        width: auto;
        min-height: 300px;
        margin: 16px 16px 0;
        border-radius: 16px;
        padding: 28px 20px;
    }

    .login-bg-wrapper .login-art {
        max-height: 26vh;
    }

    .login-form-wrapper {
        padding: 24px;
    }
}

@media (max-width: 640px) {
    .login-header h2 {
        font-size: 24px;
    }

    .login-welcome-line {
        font-size: 14px;
    }

    /* Selector shape has to mirror the base rule above: that one reaches these
       inputs through .input-wrapper input[type="text"], which outranks a plain
       .input-wrapper input here and would keep them at 48px. */
    .modern-input,
    .input-wrapper input[type="text"],
    .input-wrapper input[type="password"],
    .input-wrapper input[type="email"],
    .modern-select {
        height: 44px;
        font-size: 0.9rem;
    }

    .modern-btn {
        padding: 10px;
        font-size: 15px;
    }

    .login-panel-title {
        font-size: 22px;
    }
}

/* ============================================
   FORGOT-PASSWORD MODAL
   Carried over from the inline styles this file
   replaced - the modal markup is unchanged.
   ============================================ */
.modern-modal {
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.6);
}

.modern-modal-content {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================================
   ARTWORK PANEL - the SSO staff poster, composed rather than pasted
   ----------------------------------------------------------------------------
   The identity provider ships this as one 1.5MB PNG with the headline, the brand
   blue and the accent blobs baked in. A bitmap cannot follow a school's colours,
   so everything except the photograph is drawn here: the panel takes the tenant
   gradient, the headline is real text, and the blobs are CSS.

   The photograph is cut along the poster's own curve using the clip paths
   declared in the markup. Two curves are used - the photo, and a white sweep set
   slightly lower so a thin white band shows between the picture and the colour,
   exactly as the original does.

   Accent colours are sampled from the SSO poster and kept as tokens so a themed
   school can override them without touching these rules.
   ============================================================================ */
.login-bg-wrapper {
    --login-art-gold: #ca931b;
    --login-art-coral: #f5512a;
    position: relative;
    overflow: hidden;
    justify-content: flex-start;
    padding: 0 0 32px;
}

/* The <svg> that only carries <defs>. It must be in the layout but occupy nothing. */
.login-art-defs {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

.login-art-media {
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    /* Matches the crop: 1055 x 765 from the source poster. */
    aspect-ratio: 1055 / 765;
}

.login-bg-wrapper .login-art,
.login-art-sweep {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    max-width: none;
    max-height: none;
}

.login-art-sweep {
    background: #ffffff;
    -webkit-clip-path: url(#acsLoginCurveSweep);
    clip-path: url(#acsLoginCurveSweep);
}

.login-bg-wrapper .login-art {
    object-fit: cover;
    object-position: center top;
    -webkit-clip-path: url(#acsLoginCurve);
    clip-path: url(#acsLoginCurve);
}

/* ============================================
   DECORATION - all inert, all CSS
   ============================================ */
.login-art-blob {
    position: absolute;
    bottom: -14%;
    width: 46%;
    aspect-ratio: 1 / 1;
    border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
    pointer-events: none;
    z-index: 0;
}

.login-art-blob-gold {
    left: -16%;
    background: var(--login-art-gold);
}

.login-art-blob-orange {
    right: -18%;
    bottom: -20%;
    width: 42%;
    background: var(--login-art-coral);
}

/* The 3x8 dot grids in the poster corners. */
.login-art-dots {
    position: absolute;
    width: 34px;
    height: 92px;
    opacity: 0.85;
    pointer-events: none;
    background-image: radial-gradient(#ffffff 1.6px, transparent 1.7px);
    background-size: 11px 11px;
}

.login-art-dots-left {
    left: 22px;
    top: 34%;
}

.login-art-dots-right {
    right: 26px;
    bottom: 30%;
}

.login-art-ring {
    position: absolute;
    left: 26px;
    bottom: 24%;
    width: 26px;
    height: 26px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    pointer-events: none;
}

/* ============================================
   COPY
   ============================================ */
.login-art-copy {
    position: relative;
    z-index: 1;
    width: 100%;
    /* Clear of the curve. Its deepest point is at the horizontal centre and reaches
       almost the full height of the media box, so copy pulled any higher collides
       with the photograph exactly where the headline sits. */
    padding: 8px 32px 0;
    text-align: center;
}

.login-panel-title {
    font-size: clamp(22px, 2.5vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 12px;
    color: #ffffff;
}

/* The poster picks out two words in gold. */
.login-panel-title em {
    font-style: normal;
    color: var(--login-art-gold);
}

.login-panel-subtitle {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    opacity: 0.95;
    margin: 0 auto 20px;
    max-width: 34ch;
    text-transform: none;
    letter-spacing: 0;
}

.login-panel-contact {
    font-size: 12.5px;
    line-height: 1.8;
    opacity: 0.9;
    margin-top: 18px;
}

.login-panel-contact p {
    margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .login-bg-wrapper {
        padding-bottom: 24px;
    }

    /* The photo is the first thing that has to go when the panel becomes a strip
       under the form - the headline is what carries the message. */
    .login-art-media {
        display: none;
    }

    .login-art-copy {
        padding: 24px 20px 0;
    }
}

@media (max-width: 640px) {
    .login-panel-title {
        font-size: 20px;
    }

    .login-art-dots,
    .login-art-ring {
        display: none;
    }
}

/* ============================================================================
   PARENT AND STUDENT ARTWORK
   ----------------------------------------------------------------------------
   Same composition as the staff panel, with one difference that matters:
   translateV2.js swaps a school's own picture on these two portals by setting a
   BACKGROUND-IMAGE, where the admin page swaps an <img> src. So the photograph
   here is a background on its own element, and that element keeps the
   .acs-parent-img / .acs-student-img hook. A school that has uploaded its own
   image still overrides it.

   Each portal gets its own clip path. The three posters do not share a curve -
   the student sweep is far deeper at the edges than the parent one - so the
   shape is measured from each poster rather than assumed once.
   ============================================================================ */
.login-art--bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.login-art--parent {
    -webkit-clip-path: url(#acsLoginCurveParent);
    clip-path: url(#acsLoginCurveParent);
}

.login-art--student {
    -webkit-clip-path: url(#acsLoginCurveStudent);
    clip-path: url(#acsLoginCurveStudent);
}

/* The crops differ in aspect, so each panel's media box does too. */
.login-art-media--parent { aspect-ratio: 1100 / 772; }
.login-art-media--student { aspect-ratio: 1100 / 829; }

/* ============================================================================
   PORTAL HELP - "How to use this portal"
   ----------------------------------------------------------------------------
   Support answers the same few questions for every portal, so the link sits with
   the other footer links on each sign-in page and opens the same shaped modal.
   Content per portal comes from PortalHelpUi.
   ============================================================================ */
.portal-help-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--login-muted, #4b5563);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.portal-help-trigger:hover,
.portal-help-trigger:focus-visible {
    color: var(--login-primary, #3276ff);
    text-decoration: underline;
    outline: none;
}

.portal-help-modal {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2, 8, 23, 0.55);
    backdrop-filter: blur(4px);
}

.portal-help-modal.is-open {
    display: flex;
}

.portal-help-modal[hidden] {
    display: none;
}

.portal-help-card {
    width: 100%;
    max-width: 560px;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: var(--login-fg, #010816);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    text-align: left;
}

.portal-help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--login-border, #e2e8f0);
}

.portal-help-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--login-label, #1e293b);
}

.portal-help-close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--login-muted, #4b5563);
    font-size: 15px;
    cursor: pointer;
}

.portal-help-close:hover,
.portal-help-close:focus-visible {
    background: var(--login-input-bg, #f0f0f3);
    outline: none;
}

.portal-help-body {
    padding: 6px 20px 14px;
    overflow-y: auto;
}

.portal-help-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--login-border, #e2e8f0);
}

.portal-help-item:last-child {
    border-bottom: 0;
}

.portal-help-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--login-radius, 8px);
    background: var(--login-primary-subtle, #e5eeff);
    color: var(--login-primary, #3276ff);
    font-size: 14px;
}

.portal-help-item h5 {
    margin: 2px 0 3px;
    font-size: 14px;
    font-weight: 700;
    color: var(--login-label, #1e293b);
}

.portal-help-item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--login-muted, #4b5563);
}

.portal-help-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--login-border, #e2e8f0);
    background: #f8fafc;
    font-size: 12.5px;
    color: var(--login-muted, #4b5563);
}

.portal-help-foot a {
    color: var(--login-primary, #3276ff);
    text-decoration: none;
}

.portal-help-foot a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .portal-help-modal { padding: 12px; }
    .portal-help-card { max-height: 90vh; }
}

/* The caret. Browsers inherit it from `color`, which on these filled inputs is a
   dark slate that reads as grey against #f0f0f3 - visible, but easy to miss on a
   page whose whole job is "type here". Tying it to the accent makes it obvious,
   and it follows a school's theme like everything else. */
.modern-input,
.input-wrapper input,
.modern-select,
.login-form-inner input {
    caret-color: var(--acs-accent, var(--login-primary, #3276ff));
}