/*  Login layout  
   Only what Bootstrap can't do: panel widths, logo, brand colour, mobile rounding */

/* Left panel: fixed width, transparent over background.jpg */
.login-left {
    flex: 0 0 50%;
    padding: 3rem 3rem 3rem 15%;
    min-width: 0;
    overflow: hidden;
}

/* Right panel: fixed width so background peeks out on the right */
.login-right {
    flex: 0 0 40%;
}

.login-form-box {
    max-width: 480px;
}

/* Logo: constrain SVG dimensions and invert to white */
.login-left-content {
    min-width: 0;
    width: 100%;
}

.login-logo {
    width: 280px;
    max-width: 100%;
    height: 100px;
    object-fit: contain;
    object-position: left center;
    filter: brightness(0) invert(1);
}

/* Letter spacing for headings (no Bootstrap utility for this) */
.ls-wide {
    letter-spacing: 0.08em;
}

/* Amber submit button — brand colour not in Bootstrap defaults */
.login-btn {
    background-color: #e8a020;
    color: #fff;
    border: none;
    font-weight: 600;
    transition: background-color 0.2s;
}

.login-btn:hover {
    background-color: #cf8e18;
    color: #fff;
}

/*  Tablet  */
@media (max-width: 1024px) {
    .login-left {
        flex: 1;
        padding: 3rem 2rem 3rem 8%;
        min-width: 0;
    }

    .login-left-content {
        width: 100%;
    }

    .login-right {
        flex: 0 0 50%;
    }
}

/*  Mobile: stack vertically, form slides up from bottom  */
@media (max-width: 768px) {
    .login-wrapper {
        flex-direction: column;
    }

    .login-left {
        flex: 0 0 auto;
    }

    .login-right {
        flex: 1;
        width: 100%;
        align-items: flex-start !important;
    }

    .login-form-box {
        max-width: 100%;
    }
}

/*  Form framework overrides  */
.login-form-box label {
    display: block;
    margin-bottom: 0.25rem;
}

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

/* Ensure invalid-feedback shows and spacing holds when validation triggers */
.login-form-box .form-group {
    margin-bottom: 1rem;
}

.login-form-box .invalid-feedback {
    display: none;
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.login-form-box .invalid-input ~ .invalid-feedback,
.login-form-box .invalid-feedback:not(:empty) {
    display: block;
}

/* Red border on invalid inputs */
.login-form-box input.invalid-input {
    border-color: #dc3545;
    outline: none;
}

.login-form-box input.invalid-input:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/*  Accessibility: WCAG 2.1 compliant focus states  */

/* Ensure focus is always clearly visible for keyboard navigation */
.login-form-box input:focus {
    outline: 3px solid #e8a020;
    outline-offset: 2px;
    border-color: #1a3a6b;
}

/* High-contrast focus ring on the button for keyboard users */
.login-btn:focus,
.login-btn:focus-visible {
    outline: 3px solid #1a3a6b;
    outline-offset: 3px;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .login-btn,
    .login-form-box input {
        transition: none;
    }
}

.login-spinner {
    display: flex;
    align-items: center;
}

.spinner-wheel {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}