html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body.okonomistyrelsen-login-body {
    /* Staten palette — mirrors the canonical values in
       public/css/custom/staten.new-menu.css. Scoped to the body class so
       they don't leak into other pages that may ever load this stylesheet
       alongside others. */
    --staten-primary: rgb(6, 107, 67);
    --staten-primary-active: rgb(2, 94, 58);
    --card-radius: 8px;

    font-family: Arial, Helvetica, sans-serif;
    color: #222;
    background-color: #1a1a1a;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Hero background — desaturated + dimmed + side-weighted dark gradient
   so the white welcome copy stays legible on bright photography. */
.staten-hero {
    position: absolute;
    inset: 0;
    background-image: url('../img/login-okonomistyrelsen/hero.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(1) brightness(0.68) contrast(1.05);
    z-index: 0;
}
.staten-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
        rgba(0, 0, 0, 0.42) 0%,
        rgba(0, 0, 0, 0.14) 65%,
        rgba(0, 0, 0, 0.26) 100%);
}

.okonomistyrelsen-layout {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 0.6fr) 1.4fr;
    align-items: center;
    gap: 80px;
    padding: 80px;
    box-sizing: border-box;
}

.okonomistyrelsen-card-wrapper {
    justify-self: end;
    max-width: 370px;
    width: 100%;
}

.okonomistyrelsen-card {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    border-radius: var(--card-radius);
}

.okonomistyrelsen-card-header {
    background-color: var(--staten-primary);
    padding: 20px 24px;
    text-align: center;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.okonomistyrelsen-card-header img {
    max-width: 220px;
    height: auto;
    display: inline-block;
}

.okonomistyrelsen-card-body {
    background: #fff;
    padding: 25px;
    border-radius: 0 0 var(--card-radius) var(--card-radius);
}

.okonomistyrelsen-forgot {
    margin: 0 0 22px;
}
.okonomistyrelsen-forgot a {
    color: var(--staten-primary);
}
.okonomistyrelsen-forgot a:hover,
.okonomistyrelsen-forgot a:focus {
    color: var(--staten-primary-active);
}

/* SSO link styling — overrides .btn-toolbar's font-size: 0 (which would
   otherwise hide the link text), matches the .btn line box so the floated
   link sits vertically centred next to the submit button, and applies the
   staten brand link colour. */
.okonomistyrelsen-sso {
    color: var(--staten-primary);
    font-size: 14px;
    line-height: 30px;
    text-decoration: underline;
}
.okonomistyrelsen-sso:hover,
.okonomistyrelsen-sso:focus {
    color: var(--staten-primary-active);
}

.okonomistyrelsen-welcome {
    color: #fff;
    max-width: 640px;
}
.okonomistyrelsen-welcome h1 {
    font-size: 36px;
    font-weight: bold;
    margin: 0 0 24px;
    line-height: 1.2;
}
.okonomistyrelsen-welcome p {
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
}

.okonomistyrelsen-footer-mark {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 2;
    opacity: 0.95;
    transition: opacity 0.2s;
    display: inline-block;
}
.okonomistyrelsen-footer-mark:hover {
    opacity: 1;
}
.okonomistyrelsen-footer-mark img {
    height: 40px;
    width: auto;
    display: block;
}

.btn-toolbar.no-bottom-margin,
select.no-bottom-margin,
textarea.no-bottom-margin,
input.no-bottom-margin,
form.no-bottom-margin,
.input-append.no-bottom-margin,
.input-prepend.no-bottom-margin,
.no-bottom-margin {
    margin-bottom: 0;
}

/* Below 900px: stack the welcome panel under the card and center everything. */
@media (max-width: 900px) {
    .okonomistyrelsen-layout {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px;
        justify-items: center;
    }
    .okonomistyrelsen-card-wrapper {
        order: 1;
        justify-self: center;
    }
    .okonomistyrelsen-welcome {
        order: 2;
        text-align: center;
    }
}

/* Below 480px: card stretches edge-to-edge, welcome panel gets inner padding. */
@media (max-width: 480px) {
    .okonomistyrelsen-layout {
        padding: 0;
    }
    .okonomistyrelsen-card-wrapper {
        max-width: 100%;
    }
    .okonomistyrelsen-welcome {
        padding: 20px;
    }
    .okonomistyrelsen-welcome h1 {
        font-size: 28px;
    }
    .okonomistyrelsen-welcome p {
        font-size: 16px;
    }
}