/* ==========================================================================
   Student Report
   Login Page
   ==========================================================================

   Loaded AFTER tokens.css and app.css.
   NOT loaded on authenticated pages.

   STRUCTURE
   --------------------------------------------------------------------------
   Split-screen layout:
       .login-shell              — full-viewport flex container
         .login-brand            — left panel (dark brand, marketing)
           .login-brand-inner
             .login-brand-logo
             .login-brand-title
             .login-brand-subtitle
             .login-brand-features
         .login-form-panel       — right panel (form)
           .login-form-inner
             .login-form-header
             .login-form
             .login-form-footer

   RESPONSIVE
   --------------------------------------------------------------------------
   <900px  → stack vertically (brand on top, form below)
   <560px  → compact padding, hide some branding elements

   THEME
   --------------------------------------------------------------------------
   Both light and dark modes are supported via tokens.
   The brand panel stays dark green in both modes.

   ========================================================================== */


/* ==========================================================================
   1. SHELL
   ========================================================================== */

.login-shell {
    display: flex;

    min-height: 100vh;
    min-height: 100dvh;

    width: 100%;

    background-color: var(--color-bg-page);
}


/* ==========================================================================
   2. BRAND PANEL (LEFT)
   ==========================================================================
      Dark green panel with logo and marketing copy.
      Uses the brand colour in both light and dark mode.
   ========================================================================== */

.login-brand {
    flex: 1 1 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    overflow: hidden;

    padding: var(--space-12) var(--space-10);

    background-color: var(--color-brand);
    color: #ffffff;
}


/* Subtle decorative gradient orb */

.login-brand::before {
    content: "";

    position: absolute;

    top: -30%;
    left: -20%;

    width: 700px;
    height: 700px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.08) 0%,
            transparent 60%
        );

    pointer-events: none;
}


.login-brand::after {
    content: "";

    position: absolute;

    bottom: -40%;
    right: -30%;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 60%
        );

    pointer-events: none;
}


.login-brand-inner {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    gap: var(--space-6);

    max-width: 460px;

    width: 100%;
}


/* ==========================================================================
   3. BRAND LOGO
   ========================================================================== */

.login-brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-xl);

    background-color: rgba(255, 255, 255, 0.08);

    overflow: hidden;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


.login-brand-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 8px;
}


/* Fallback initials shown when no logo image is available */

.login-brand-logo-text {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    color: #ffffff;
}


/* ==========================================================================
   4. BRAND TITLE
   ========================================================================== */

.login-brand-title {
    margin: 0;

    font-size: clamp(28px, 3vw, 38px);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);

    color: #ffffff;
}


.login-brand-subtitle {
    margin: 0;

    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-normal);

    color: rgba(255, 255, 255, 0.78);

    max-width: 40ch;
}


/* ==========================================================================
   5. FEATURE LIST
   ========================================================================== */

.login-brand-features {
    display: flex;
    flex-direction: column;

    gap: var(--space-3);

    margin: 0;
    padding: 0;

    list-style: none;
}


.login-brand-feature {
    display: flex;
    align-items: center;

    gap: var(--space-3);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);

    color: rgba(255, 255, 255, 0.92);
}


.login-brand-feature-icon {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    border-radius: var(--radius-full);

    background-color: rgba(255, 255, 255, 0.14);

    color: #ffffff;
}


.login-brand-feature-icon svg {
    width: 14px;
    height: 14px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================================
   6. BRAND FOOTER
   ========================================================================== */

.login-brand-footer {
    margin-top: auto;

    padding-top: var(--space-8);

    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);

    color: rgba(255, 255, 255, 0.55);
}


/* ==========================================================================
   7. FORM PANEL (RIGHT)
   ========================================================================== */

.login-form-panel {
    flex: 1 1 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: var(--space-12) var(--space-8);

    background-color: var(--color-bg-surface);
}


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


/* ==========================================================================
   8. FORM HEADER
   ========================================================================== */

.login-form-header {
    margin-bottom: var(--space-8);
}


.login-form-title {
    margin: 0 0 var(--space-2);

    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);

    color: var(--color-text-primary);
}


.login-form-subtitle {
    margin: 0;

    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);

    color: var(--color-text-muted);
}


/* ==========================================================================
   9. ERROR ALERT
   ========================================================================== */

.login-error {
    display: flex;
    align-items: flex-start;

    gap: var(--space-3);

    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);

    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);

    background-color: var(--color-danger-soft);
    color: var(--color-badge-danger-text);

    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}


.login-error-icon {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    margin-top: 1px;

    color: currentColor;
}


.login-error-icon svg {
    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================================
   10. FORM FIELDS
   ========================================================================== */

.login-form {
    display: flex;
    flex-direction: column;

    gap: var(--space-4);
}


.login-form-group {
    display: flex;
    flex-direction: column;

    gap: var(--space-2);
}


.login-form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

    color: var(--color-text-primary);
}


/* Input fields — override forms.css defaults for a more
   "premium login" feel (taller, rounder) */

.login-input {
    display: block;
    width: 100%;

    min-height: 48px;
    padding: var(--space-3) var(--space-4);

    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.4;

    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);

    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);

    outline: none;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
}


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


.login-input:hover:not(:disabled) {
    border-color: var(--color-text-muted);
}


.login-input:focus {
    border-color: var(--color-brand);
    box-shadow: var(--shadow-focus);
}


.login-input:disabled {
    color: var(--color-text-disabled);
    background-color: var(--color-bg-hover);
    cursor: not-allowed;
}


/* ==========================================================================
   11. SUBMIT BUTTON
   ========================================================================== */

.login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 48px;

    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);

    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;

    color: var(--color-brand-contrast);
    background-color: var(--color-brand);

    border: 1px solid var(--color-brand);
    border-radius: var(--radius-md);

    cursor: pointer;
    user-select: none;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}


.login-submit:hover {
    background-color: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
}


.login-submit:active {
    transform: translateY(1px);
}


.login-submit:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}


.login-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}


/* ==========================================================================
   12. FORM FOOTER
   ========================================================================== */

.login-form-footer {
    margin-top: var(--space-8);
    padding-top: var(--space-5);

    border-top: 1px solid var(--color-border-subtle);

    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);

    color: var(--color-text-muted);

    text-align: center;
}


/* ==========================================================================
   13. FORM PANEL — RESPONSIVE HELPERS
   ========================================================================== */

/* On very small screens we slightly reduce the visual weight */

@media (max-width: 560px) {

    .login-form-panel {
        padding: var(--space-8) var(--space-5);
    }

    .login-form-title {
        font-size: var(--font-size-2xl);
    }
}


/* ==========================================================================
   14. RESPONSIVE — STACK ON NARROW VIEWPORTS
   ==========================================================================
      Below 900px the two panels stack vertically.
      Brand panel becomes a compact header on top.
   ========================================================================== */

@media (max-width: 900px) {

    .login-shell {
        flex-direction: column;
    }


    .login-brand {
        flex: 0 0 auto;

        padding: var(--space-8) var(--space-6);

        min-height: auto;
    }


    .login-brand-inner {
        max-width: none;

        gap: var(--space-4);
    }


    .login-brand-logo {
        width: 56px;
        height: 56px;
    }


    .login-brand-title {
        font-size: var(--font-size-2xl);
    }


    .login-brand-subtitle {
        font-size: var(--font-size-sm);
    }


    /* Hide the feature list on mobile — too much noise */

    .login-brand-features {
        display: none;
    }


    /* Hide the small footer line inside the brand panel */

    .login-brand-footer {
        display: none;
    }


    .login-form-panel {
        flex: 1 1 auto;

        padding: var(--space-10) var(--space-6);
    }
}


/* ==========================================================================
   15. RESPONSIVE — VERY NARROW
   ========================================================================== */

@media (max-width: 400px) {

    .login-brand {
        padding: var(--space-6) var(--space-5);
    }

    .login-form-panel {
        padding: var(--space-8) var(--space-4);
    }
}


/* ==========================================================================
   16. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .login-input,
    .login-submit {
        transition: none;
    }
}


/* ==========================================================================
   17. PRINT
   ========================================================================== */

@media print {

    .login-shell {
        display: block;
    }

    .login-brand {
        display: none;
    }

    .login-form-panel {
        padding: 0;
    }
}