/* login-kls.css — login-siden (index.html) som 1:1-kopi af kls.asa-el.dk/login (Jonas, 30. sep 2026:
   "alle login-sider = 1-til-1 kopi af KLS"). Kun logo, navn og undertitel er hovedappens egne.
   Værdierne er KLS' egne (LoginPage.tsx / Tailwind), målt på det live site i 1440 og 390 bredde.
   Bevidste undtagelser fra DESIGN-DNA på netop denne side: Poppins + Montserrat (KLS' fonte),
   hover-løft på knappen og trykmål under 48 px (faner 36 px, felter 46 px) — alt som i KLS. */

body.kls-login {
    --kls-bund:   hsl(205 62% 8%);
    --kls-blaa:   hsl(209 63% 49%);
    --kls-fejl:   hsl(0 72% 51%);
    --kls-succes: hsl(152 60% 42%);

    margin: 0;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: normal;
    color: #F2F4F7;
    background: var(--kls-bund);
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
}

/* Scenen: min-h-screen, centreret, p-4, to bløde lysfelter på navy */
.kls {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 16px;
    overflow: hidden;
    box-sizing: border-box;
    background:
        radial-gradient(ellipse at 60% 10%, hsl(209 63% 25% / .6), transparent 50%),
        radial-gradient(ellipse at 30% 90%, hsl(205 62% 18% / .5), transparent 50%),
        var(--kls-bund);
}
.kls *, .kls *::before, .kls *::after { box-sizing: border-box; }

/* Svag kornet struktur */
.kls__korn {
    position: absolute;
    inset: 0;
    opacity: .08;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Blød glød bag kolonnen */
.kls__gloed {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    pointer-events: none;
    background: radial-gradient(circle, hsl(209 63% 49% / .06), transparent 70%);
}

/* Kolonnen: max 480 px */
.kls__kolonne {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 480px;
}

/* ▲ Logo, navn, undertitel */
.kls__ikon {
    display: block;
    width: auto;
    height: 112px;
    margin: 0 0 12px;
    filter: drop-shadow(0 4px 32px hsl(209 63% 49% / .35));
}
.kls__navn {
    display: block;
    width: auto;
    height: 18px;
    margin: 0 0 10px;
}
.kls__undertitel {
    margin: 0 0 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 9px;
    line-height: 13.5px;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
}

.kls__visning { display: flex; flex-direction: column; align-items: center; width: 100%; }
.kls__visning[hidden] { display: none; }

/* Faner: Medarbejder / Kontor */
.kls__faner { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; }
.kls__fane {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 20px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 9999px;
    background: transparent;
    color: rgba(255, 255, 255, .5);
    font: 600 12px/18px 'Poppins', sans-serif;
    cursor: pointer;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.kls__fane:hover { border-color: rgba(255, 255, 255, .25); }
.kls__fane[aria-selected="true"] {
    background: var(--kls-blaa);
    border-color: var(--kls-blaa);
    color: #fff;
    box-shadow: 0 4px 14px hsl(209 63% 49% / .4);
}
.kls__fane svg { width: 13px; height: 13px; flex: none; }

.kls__hint {
    margin: 0 0 16px;
    text-align: center;
    font-size: 11px;
    line-height: 16.5px;
    color: rgba(255, 255, 255, .3);
}

/* Formularen: trekant-bredder 72 / 82 / 92 % */
.kls__form { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; margin: 0; }
.kls__felt { position: relative; }
.kls__felt--email { width: 72%; }
.kls__felt--password { width: 82%; }

body.kls-login .kls__input {
    display: block;
    width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font: 400 14px/20px 'Poppins', sans-serif;
    box-shadow: none;
    outline: none;
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
    -webkit-appearance: none;
    appearance: none;
}
body.kls-login .kls__input::placeholder { color: rgba(255, 255, 255, .2); opacity: 1; }
body.kls-login .kls__input:focus { background: rgba(255, 255, 255, .1); }
body.kls-login .kls__input:focus-visible { border-color: hsl(208 62% 49%); }
body.kls-login .kls__input:-webkit-autofill,
body.kls-login .kls__input:-webkit-autofill:hover,
body.kls-login .kls__input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    box-shadow: 0 0 0 100px hsl(206 45% 12%) inset;
    transition: background-color 9999s;
}

.kls__felt-ikon {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .2);
    pointer-events: none;
}
.kls__oeje {
    position: absolute;
    top: 50%;
    right: 14px;
    display: block;
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .2);
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .15s cubic-bezier(.4, 0, .2, 1);
}
.kls__oeje:hover { color: rgba(255, 255, 255, .45); }
.kls__oeje svg { display: block; width: 15px; height: 15px; }

/* Fejl/besked-boksen (KLS: 92 %, rød tone, ingen ikon) */
body.kls-login .kls__besked {
    width: 92%;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid hsl(0 72% 51% / .2);
    border-radius: 12px;
    background: hsl(0 72% 51% / .15);
    color: hsl(0 72% 51% / .8);
    font-size: 14px;
    line-height: 20px;
    display: block;
}
body.kls-login .kls__besked[hidden] { display: none; }
body.kls-login .kls__besked svg { display: none; }
body.kls-login .kls__besked.besked--info { border-color: hsl(209 63% 49% / .25); background: hsl(209 63% 49% / .14); color: rgba(255, 255, 255, .75); }
body.kls-login .kls__besked.besked--succes { border-color: hsl(152 60% 42% / .25); background: hsl(152 60% 42% / .15); color: hsl(152 60% 60%); }
.kls__visning--reset .kls__besked { width: 100%; }

/* Stor blå knap (92 %) */
body.kls-login .kls__knap {
    display: block;
    width: 92%;
    min-height: 0;
    margin: 4px 0 0;
    padding: 14px 0;
    border: 0;
    border-radius: 12px;
    background: var(--kls-blaa);
    color: #fff;
    font: 700 14px/20px 'Poppins', sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 20px hsl(209 63% 49% / .35);
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
}
body.kls-login .kls__knap:hover { transform: translateY(-2px); box-shadow: 0 8px 28px hsl(209 63% 49% / .45); }
body.kls-login .kls__knap:active { transform: translateY(0); }
body.kls-login .kls__knap:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.kls__knap-indhold { display: flex; align-items: center; justify-content: center; gap: 8px; }
.kls__knap-indhold svg { width: 16px; height: 16px; flex: none; }
.kls__spin { animation: kls-spin 1s linear infinite; }
@keyframes kls-spin { to { transform: rotate(360deg); } }

/* Bunden: "Glemt din adgangskode?" */
.kls__bund { margin: 16px 0 0; text-align: center; font-size: 11px; line-height: 16.5px; }
.kls__glemt {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .2);
    font: 400 11px/16.5px 'Poppins', sans-serif;
    cursor: pointer;
    transition: color .15s cubic-bezier(.4, 0, .2, 1);
}
.kls__glemt:hover { color: rgba(255, 255, 255, .4); }

/* ---------- Nulstil adgangskode (inline, som KLS) ---------- */
.kls__visning--reset { width: 85%; gap: 20px; }
.kls__titel {
    margin: 0 0 4px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.025em;
    color: #fff;
}
.kls__visning--reset .kls__form { gap: 20px; align-items: stretch; }
.kls__tekst { margin: 0; text-align: center; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .4); }
.kls__felt--reset { width: 100%; }
body.kls-login .kls__felt--reset .kls__input {
    padding: 16px 20px;
    border-width: 2px;
    background: rgba(255, 255, 255, .08);
    transition-duration: .3s;
}
body.kls-login .kls__felt--reset .kls__input::placeholder { color: rgba(255, 255, 255, .3); }
body.kls-login .kls__felt--reset .kls__input:focus { background: rgba(255, 255, 255, .12); }
.kls__felt--reset .kls__felt-ikon { right: 16px; width: 16px; height: 16px; color: rgba(255, 255, 255, .25); }
body.kls-login .kls__visning--reset .kls__knap { width: 100%; margin: 0; padding: 16px 0; transition-duration: .3s; }
body.kls-login .kls__visning--reset .kls__knap:hover { box-shadow: 0 8px 28px hsl(209 63% 49% / .5); }
.kls__visning--reset .kls__knap { box-shadow: 0 4px 20px hsl(209 63% 49% / .4); }
.kls__tilbage {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    color: rgba(255, 255, 255, .4);
    font: 400 14px/20px 'Poppins', sans-serif;
    cursor: pointer;
    transition: color .15s cubic-bezier(.4, 0, .2, 1);
}
.kls__tilbage:hover { color: rgba(255, 255, 255, .6); }
.kls__sendt { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.kls__sendt[hidden] { display: none; }
.kls__sendt-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: hsl(152 60% 42% / .15);
    color: var(--kls-succes);
}
.kls__sendt-ikon svg { width: 24px; height: 24px; }
.kls__sendt p { margin: 0; font-size: 14px; line-height: 1.625; color: rgba(255, 255, 255, .5); }
.kls__sendt strong { color: rgba(255, 255, 255, .7); }
.kls__link-knap {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--kls-blaa);
    font: 600 14px/20px 'Poppins', sans-serif;
    cursor: pointer;
}
.kls__link-knap:hover { text-decoration: underline; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* KLS: 16 px i felterne under 640 px (ingen iOS-zoom), ellers 14 px */
@media (max-width: 639.98px) {
    body.kls-login .kls__input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .kls__spin { animation: none; }
    body.kls-login .kls__knap:hover { transform: none; }
}