/* Werk4 Login Page Styles
   Light look of werk4.at (Transformation & Leadership Development): warm black #1d1c1b text,
   warm off-white #f5f4f2 surfaces, orange #f0911e accent, Roboto Condensed (SIL OFL 1.1,
   bundled under /css/werk4/fonts). Logo: /css/werk4/logo.png (black "werk", orange "4",
   transparent) replaces the app's login logo via content: url() and sits on a white band with
   an orange rule at the top of the card, like the website header.
   All colours are fixed so the page looks the same whatever theme the browser has selected. */

@font-face {
    font-family: "Roboto Condensed";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/css/werk4/fonts/roboto-condensed-latin-400.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto Condensed";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/css/werk4/fonts/roboto-condensed-latin-500.woff2") format("woff2");
}

@font-face {
    font-family: "Roboto Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/css/werk4/fonts/roboto-condensed-latin-700.woff2") format("woff2");
}

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

/* Background: warm off-white page with soft orange and charcoal tints */
.login-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1100px 620px at 14% 88%, rgba(240, 145, 30, 0.16) 0%, rgba(240, 145, 30, 0) 60%),
        radial-gradient(900px 560px at 86% 10%, rgba(17, 17, 17, 0.08) 0%, rgba(17, 17, 17, 0) 60%),
        linear-gradient(160deg, #f5f4f2 0%, #ece9e5 55%, #e2ded8 100%);
}

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

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

.login-shape:nth-child(2) {
    width: 420px;
    height: 420px;
    background: linear-gradient(135deg, #e8e6e3 0%, #2b2a28 100%);
    bottom: -210px;
    right: -190px;
    opacity: 0.22;
    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 {
    --w4-card-pad-y: 3rem;
    --w4-card-pad-x: 3rem;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(17, 17, 17, 0.12);
    border-radius: 16px;
    padding: var(--w4-card-pad-y) var(--w4-card-pad-x);
    width: 100%;
    max-width: 480px;
    color: #1d1c1b;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    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 werk4 logo on a full-width white band with an orange rule at the
   top of the card, like the website header. The logo is shown 220 px wide; on narrow cards the
   side padding shrinks to 1.5rem and the logo scales down. */
.login-logo {
    content: url('/css/werk4/logo.png');
    display: block;
    box-sizing: border-box;
    width: calc(100% + 2 * var(--w4-card-pad-x));
    max-width: none;
    height: auto;
    margin: calc(-1 * var(--w4-card-pad-y)) calc(-1 * var(--w4-card-pad-x)) 0;
    padding: 2rem max(1.5rem, calc((100% + 2 * var(--w4-card-pad-x) - 220px) / 2)) 1.75rem;
    object-fit: contain;
    background: #ffffff;
    border-bottom: 3px solid #f0911e;
}

.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 the brand typeface, black to orange */
.login-header h1 {
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #111111 0%, #f0911e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-header p {
    color: #555453;
    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: #1d1c1b;
    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: #f7f6f4;
    border: 1px solid #d8d5d0;
    border-radius: 8px;
    color: #111111;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

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

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

.form-control-modern:focus {
    outline: none;
    background: #ffffff;
    border-color: #f0911e;
    box-shadow: 0 0 0 3px rgba(240, 145, 30, 0.28);
}

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

.twofactor-subtext {
    color: #555453;
    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: #1d1c1b;
    font-size: 0.9rem;
    margin: 0;
}

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

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

.forgot-password:hover {
    color: #1d1c1b;
    text-decoration: underline;
}

/* Login Button: werk4 orange with black text like the logo (7.9:1, hover 6.1:1) */
.btn-login {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #f0911e 0%, #f5a84a 100%);
    border: none;
    border-radius: 8px;
    color: #111111;
    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(240, 145, 30, 0.32);
}

.btn-login:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #d97a0a 0%, #f0911e 100%);
    box-shadow: 0 6px 20px rgba(217, 122, 10, 0.42);
}

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

.btn-login:focus-visible {
    outline: none;
    box-shadow:
        0 4px 15px rgba(240, 145, 30, 0.32),
        0 0 0 3px rgba(17, 17, 17, 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: #555453;
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
}

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

.link-register:hover {
    color: #1d1c1b;
}

.link-secondary {
    color: #555453;
    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 #e8e6e3;
}

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

/* Validation Messages */
.validation-summary {
    background: rgba(150, 74, 67, 0.08);
    border: 1px solid rgba(150, 74, 67, 0.38);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.validation-summary-info {
    background: rgba(240, 145, 30, 0.1);
    border-color: rgba(240, 145, 30, 0.4);
}

.text-danger {
    color: #8a3a33 !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(150, 74, 67, 0.08);
    border: 1px solid rgba(150, 74, 67, 0.38);
    color: #7d3c36;
}

.alert-success {
    background: rgba(65, 105, 79, 0.1);
    border: 1px solid rgba(65, 105, 79, 0.4);
    color: #32533d;
}

.login-info-text {
    color: #2e2c2a;
}

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

/* Responsive Design */
@media (max-width: 640px) {
    .login-card {
        --w4-card-pad-y: 2rem;
        --w4-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 #d8d5d0;
    border-radius: 8px;
    background: #ffffff;
    color: #1d1c1b;
    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: #f5f4f2;
    border-color: #f0911e;
    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; }