/* Wartung – login, glemt og vælg adgangskode.
   Login-boksen er formet som et typeskilt: stålplade med nitter i hjørnerne. */
:root {
    --graphite: #1f2933;
    --steel: #e6e9ec;
    --plate: #f7f8f9;
    --edge: #b7c0c8;
    --blue: #1d4f91;
    --blue-dark: #163d70;
    --signal: #f2b705;
    --muted: #52606d;
    --red: #b42318;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.wt-a {
    min-height: 100vh;
    background: var(--steel);
    color: var(--graphite);
    font: 400 16px/1.5 'Barlow', 'Segoe UI', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.wt-a-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px 24px;
}
.wt-a-plate {
    position: relative;
    width: 100%;
    max-width: 408px;
    background:
        repeating-linear-gradient(180deg, rgba(255,255,255,.55) 0 1px, rgba(255,255,255,0) 1px 3px),
        linear-gradient(180deg, #fbfcfc 0%, var(--plate) 55%, #eef0f2 100%);
    border: 1px solid var(--edge);
    border-radius: 6px;
    box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #d9dee3, 0 1px 2px rgba(31,41,51,.08), 0 10px 28px -14px rgba(31,41,51,.35);
    padding: 34px 36px 32px;
}
.wt-a-rivet {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0 18%, #c4cbd2 45%, #8a959f 100%);
    box-shadow: 0 1px 1px rgba(31,41,51,.35), inset 0 0 0 1px rgba(31,41,51,.18);
}
.wt-a-rivet.tl { top: 11px; left: 11px; }
.wt-a-rivet.tr { top: 11px; right: 11px; }
.wt-a-rivet.bl { bottom: 11px; left: 11px; }
.wt-a-rivet.br { bottom: 11px; right: 11px; }

.wt-a-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding-bottom: 20px;
    margin-bottom: 22px;
    border-bottom: 1px solid #d3d9de;
    box-shadow: 0 1px 0 #fff;
}
.wt-a-logo { display: block; max-height: 60px; max-width: 100%; }
.wt-a-mark { flex: none; display: block; }
.wt-a-company {
    font: 700 21px/1.15 'Barlow Semi Condensed', 'Barlow', Arial, sans-serif;
    letter-spacing: .01em;
}
.wt-a-wordmark {
    font: 700 28px/1 'Barlow Semi Condensed', 'Barlow', Arial, sans-serif;
    letter-spacing: .02em;
}

.wt-a-title {
    margin: 0 0 14px;
    font: 700 26px/1.15 'Barlow Semi Condensed', 'Barlow', Arial, sans-serif;
    letter-spacing: .005em;
}
.wt-a-text { margin: 0 0 18px; color: #323f4b; }
.wt-a-muted { color: var(--muted); font-size: 15px; }
.wt-a-label { display: block; margin: 16px 0 6px; font-weight: 600; font-size: 15px; }
.wt-a-input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font: 500 17px 'Barlow', Arial, sans-serif;
    color: var(--graphite);
    background: #fff;
    border: 1px solid #9aa5b1;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(31,41,51,.12);
}
.wt-a-input:focus { outline: none; border-color: var(--graphite); box-shadow: 0 0 0 3px var(--signal); }
.wt-a-pass { position: relative; }
.wt-a-pass .wt-a-input { padding-right: 72px; }
.wt-a-eye {
    position: absolute; right: 6px; top: 6px; height: 36px; min-width: 58px;
    border: 0; border-radius: 3px; background: transparent;
    font: 600 14px 'Barlow', Arial, sans-serif; color: var(--blue); cursor: pointer;
}
.wt-a-eye:hover { background: #eef2f7; }
.wt-a-eye:focus-visible { outline: 3px solid var(--signal); outline-offset: 0; }
.wt-a-hint { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.wt-a-check { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; font-size: 15px; cursor: pointer; }
.wt-a-check input { width: 18px; height: 18px; accent-color: var(--blue); margin: 0; }

.wt-a-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    height: 50px;
    margin-top: 22px;
    border: 0;
    border-radius: 4px;
    background: var(--blue);
    color: #fff;
    font: 600 18px 'Barlow', Arial, sans-serif;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
}
.wt-a-btn:hover { background: var(--blue-dark); }
.wt-a-btn:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.wt-a-btn.is-busy { opacity: .7; cursor: progress; }

.wt-a-notice { margin: 0 0 6px; padding: 10px 14px; border-radius: 4px; font-size: 15px; }
.wt-a-error { background: #fdecea; color: var(--red); border-left: 4px solid var(--red); }
.wt-a-info { background: #eaf1fa; color: var(--blue-dark); border-left: 4px solid var(--blue); }

.wt-a-links { margin: 20px 0 0; font-size: 15px; }
.wt-a-links a, .wt-a-text a { color: var(--blue); text-underline-offset: 3px; }
.wt-a-foot {
    display: flex; align-items: center; gap: 6px;
    margin: 22px 0 0;
    font: 600 13px 'Barlow Semi Condensed', 'Barlow', Arial, sans-serif;
    color: #7b8794;
    letter-spacing: .03em;
}
@media (max-width: 480px) {
    .wt-a-wrap { justify-content: flex-start; padding-top: 20px; }
    .wt-a-plate { padding: 28px 22px 26px; }
}
@media (prefers-reduced-motion: no-preference) {
    .wt-a-input, .wt-a-btn { transition: box-shadow .12s, background-color .12s; }
}