/* Clever Clover Login Page Styles
   Light look of cleverclover.vc (Clever Clover, FMCG accelerator): white surfaces, charcoal text
   #191919 / #3c3c3c, brand red #e41d13 (deepened to #d41a10 / #b3150c where text must stay readable),
   light grey #f8f8f8 / #e1e1e1 like the website colour set. No external fonts (the website uses
   Oswald / Lato); condensed system faces for the title fallback.
   Logo: /css/cleverclover/logo_full.png (red wordmark with grey tagline, transparent) replaces the
   app's login logo via content: url() and sits on a white band closed by a red rule, like the
   website header. All colours are fixed so the page looks the same whatever theme is selected. */

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem;
    padding-top: 10vh;
    position: relative;
    overflow: hidden;
    color: #191919;
}

/* Background: light grey page with a soft red glow and a charcoal corner */
.login-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1100px 620px at 14% 88%, rgba(228, 29, 19, 0.12) 0%, rgba(228, 29, 19, 0) 60%),
        radial-gradient(900px 560px at 86% 10%, rgba(25, 25, 25, 0.10) 0%, rgba(25, 25, 25, 0) 60%),
        linear-gradient(160deg, #f8f8f8 0%, #efefef 55%, #e1e1e1 100%);
}

.login-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.22;
    animation: float 22s infinite ease-in-out;
}

.login-shape:nth-child(1) {
    width: 520px;
    height: 520px;
    background: linear-gradient(135deg, #f2453b 0%, #e41d13 100%);
    top: -260px;
    left: -240px;
    animation-delay: 0s;
}

.login-shape:nth-child(2) {
    width: 420px;
    height: 420px;
    background: linear-gradient(135deg, #3c3c3c 0%, #191919 100%);
    bottom: -210px;
    right: -190px;
    opacity: 0.16;
    animation-delay: -11s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(50px, 50px) scale(1.1);
    }

    50% {
        transform: translate(30px, -30px) scale(0.9);
    }

    75% {
        transform: translate(-50px, 30px) scale(1.05);
    }
}

/* Login Card. The explicit colour keeps inherited text (legal links, info texts) readable. */
.login-card {
    --cc-card-pad-y: 3rem;
    --cc-card-pad-x: 3rem;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(18px);
    border: 1px solid #e1e1e1;
    border-radius: 16px;
    padding: var(--cc-card-pad-y) var(--cc-card-pad-x);
    width: 100%;
    max-width: 480px;
    color: #191919;
    box-shadow:
        0 24px 60px rgba(17, 17, 17, 0.16),
        0 4px 14px rgba(17, 17, 17, 0.07);
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Header */
.login-header {
    text-align: center;
    margin-bottom: 2.25rem;
}

/* Logo override via CSS: the Clever Clover logo (314 x 73 px) on a full-width white band at the
   top of the card, closed by the red rule of the website header. On narrow cards the side
   padding shrinks to 1.5rem and the logo scales down. */
.login-logo {
    content: url('/css/cleverclover/logo_full.png');
    display: block;
    box-sizing: border-box;
    width: calc(100% + 2 * var(--cc-card-pad-x));
    max-width: none;
    height: auto;
    margin: calc(-1 * var(--cc-card-pad-y)) calc(-1 * var(--cc-card-pad-x)) 0;
    padding: 2.25rem max(1.5rem, calc((100% + 2 * var(--cc-card-pad-x) - 314px) / 2)) 1.75rem;
    object-fit: contain;
    background: #ffffff;
    border-bottom: 3px solid #e41d13;
}

.login-header .login-logo + p {
    margin-top: 1.5rem;
}

.login-logo-icon {
    width: min(180px, 55%);
    height: auto;
    display: block;
    margin: 0 auto 0.75rem;
}

/* Text fallback (no logo): name in brand red */
.login-header h1 {
    font-family: "Oswald", "Bahnschrift", "Arial Narrow", Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #d41a10;
}

.login-header p {
    color: #4a4a4a;
    font-size: 0.95rem;
    margin: 0;
}

/* Form Styles */
.login-content {
    width: 100%;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #191919;
    font-size: 0.9rem;
    font-weight: 600;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 1rem;
    font-size: 1.2rem;
    pointer-events: none;
    z-index: 1;
    filter: grayscale(1) brightness(0.7);
    opacity: 0.75;
}

.form-control-modern {
    width: 100%;
    padding: 0.9rem 1rem 0.9rem 3rem;
    background: #f8f8f8;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    color: #111111;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-control-modern::placeholder {
    color: #6e6e6e;
}

.form-control-modern:hover {
    border-color: #b9b9b9;
}

.form-control-modern:focus {
    outline: none;
    background: #ffffff;
    border-color: #e41d13;
    box-shadow: 0 0 0 3px rgba(228, 29, 19, 0.16);
}

.form-control-modern[readonly] {
    opacity: .7;
    cursor: default;
}

.twofactor-subtext {
    color: #4a4a4a;
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
    line-height: 1.45;
}

.twofactor-code-input {
    letter-spacing: 0.18rem;
    font-weight: 600;
}

.twofactor-code-input::placeholder {
    letter-spacing: normal;
    font-weight: 400;
}

/* Form Options */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: #191919;
    font-size: 0.9rem;
    margin: 0;
}

.checkbox-modern {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #d41a10;
}

.forgot-password {
    color: #b3150c;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.forgot-password:hover {
    color: #8f1009;
    text-decoration: underline;
}

/* Login Button: brand red like the website's call-to-action, white text (AA) */
.btn-login {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #d41a10 0%, #e41d13 100%);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(212, 26, 16, 0.28);
}

.btn-login:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #b3150c 0%, #d41a10 100%);
    box-shadow: 0 6px 20px rgba(212, 26, 16, 0.38);
}

.btn-login:active {
    transform: translateY(0);
}

.btn-login:focus-visible {
    outline: none;
    box-shadow:
        0 4px 15px rgba(212, 26, 16, 0.28),
        0 0 0 3px rgba(25, 25, 25, 0.45);
}

.btn-login .arrow {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.btn-login:hover .arrow {
    transform: translateX(4px);
}

/* Footer Links */
.login-footer {
    margin-top: 2rem;
    text-align: center;
}

.login-footer p {
    color: #4a4a4a;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
}

.link-register {
    color: #b3150c;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.link-register:hover {
    color: #8f1009;
}

.link-secondary {
    color: #5e5e5e;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.link-secondary:hover {
    color: #111111;
}

/* External Login Section */
.external-login-section {
    margin-top: 2rem;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 2rem 0 1.5rem 0;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e1e1e1;
}

.divider span {
    padding: 0 1rem;
    color: #5e5e5e;
    font-size: 0.85rem;
}

/* Validation Messages */
.validation-summary {
    background: rgba(163, 23, 61, 0.07);
    border: 1px solid rgba(163, 23, 61, 0.36);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.validation-summary-info {
    background: rgba(43, 99, 133, 0.08);
    border-color: rgba(43, 99, 133, 0.36);
}

.text-danger {
    color: #85112f !important;
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: block;
}

/* Alert / Status Messages */
.alert {
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.alert-danger {
    background: rgba(163, 23, 61, 0.07);
    border: 1px solid rgba(163, 23, 61, 0.36);
    color: #85112f;
}

.alert-success {
    background: rgba(47, 122, 69, 0.09);
    border: 1px solid rgba(47, 122, 69, 0.38);
    color: #245e35;
}

.login-info-text {
    color: #333333;
}

.btn-login-link {
    text-decoration: none;
}

/* Responsive Design */
@media (max-width: 640px) {
    .login-card {
        --cc-card-pad-y: 2rem;
        --cc-card-pad-x: 1.5rem;
    }

    .login-header h1 {
        font-size: 1.75rem;
    }

    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* External Login Buttons */
.external-login-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-external-login {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: #ffffff;
    color: #191919;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
}

.btn-external-login:hover {
    background: #f8f8f8;
    border-color: #e41d13;
    transform: translateY(-1px);
}

/* Provider-specific hover colors */
.btn-external-microsoft:hover { border-color: #00a4ef; }
.btn-external-google:hover    { border-color: #4285f4; }
.btn-external-azuread:hover   { border-color: #0078d4; }
.btn-external-okta:hover      { border-color: #007dc1; }