/* Inloggningssidan (Views/Account/Login.cshtml) — "Planritningen".
   Sidan är ett ritningsblad på rutpapper: planritningen och ritningsstämpeln i
   vänster spalt, i samma bredd, och formuläret som en egen ruta till höger.
   Allt är tecknat med tunn linje som en arkitektritning; orange används bara där
   något kräver uppmärksamhet (avvikelsen) och i ordmärket, som i logotypen.
   Typsnitt: IBM Plex Sans Condensed (rubriker), IBM Plex Sans (text),
   IBM Plex Mono (stämpelns småtext och måtten), Montserrat (ordmärket, som logotypen).
   Alla laddas i _AuthLayout. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --plan-navy: #214366;
    --plan-navy-deep: #182F48;
    --plan-ink: #16202B;
    --plan-muted: #5E6B7A;
    --plan-faint: #8B97A6;
    --plan-line: #CBD4DF;
    --plan-wall: #A9B7C7;
    --plan-paper: #F5F7FA;
    --plan-green: #237A55;
    --plan-red: #C8453F;   /* appens symbolröda, ett snäpp dovare för att tåla tunn linje */
    --plan-red-deep: #9B2F2A;   /* löpande feltext på tonad botten, där --plan-red blir för svag */
    --plan-focus: rgba(33, 67, 102, .14);
    --font-display: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    /* Sidan har bara ett ljust tema. Tillsammans med meta-taggen i _AuthLayout hindrar det
       att Chrome på Android mörklägger bladet med sin egen algoritm, så färgerna blir
       desamma på telefon, laptop och stationär skärm. */
    color-scheme: only light;
}

body {
    font-family: var(--font-body);
    min-height: 100vh;
    background: var(--plan-paper);
    color: var(--plan-ink);
    -webkit-font-smoothing: antialiased;
    /* Androids grå tryckmarkering läggs annars över knappar och länkar; fokusramarna finns. */
    -webkit-tap-highlight-color: transparent;
}

/* -- Ritningsbladet ----------------------------------------------- */
.login-sheet {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background-color: var(--plan-paper);
    background-image:
        linear-gradient(#E3E9F0 1px, transparent 1px),
        linear-gradient(90deg, #E3E9F0 1px, transparent 1px),
        linear-gradient(#ECF0F5 1px, transparent 1px),
        linear-gradient(90deg, #ECF0F5 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}

.login-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 64px;
    min-height: 100vh;
    align-content: center;
    padding: 48px;
    max-width: 1280px;
    margin: 0 auto;
}

/* Vänster spalt: ritningen tar höjden som blir över, stämpeln står under den. Ritningen
   skalas med meet och ställs mot stämpeln (xMidYMax), så den beskärs aldrig. Spalten har
   en bestämd höjd, så att formuläret kan ställas på samma baslinje som stämpeln. */
.login-drawing {
    display: grid;
    grid-template-rows: minmax(160px, 1fr) auto;
    gap: 28px;
    min-width: 0;
    height: clamp(440px, calc(100vh - 96px), 780px);
    /* Samma baslinje som formuläret även när formuläret är högre än spalten. */
    align-self: end;
}

.login-plan {
    width: 100%;
    height: 100%;
    max-height: 460px;
    align-self: end;
    display: block;
}

/* Dubbla väggar: bred linje i väggfärg, smal i papperets färg ovanpå. Raka ändar som går
   en halv linjebredd förbi (square): en streckad sluten bana får inget hörnförband i sin
   startpunkt, och utan dem saknas ytterhörnet medan uppritningens streckning ligger på. */
.plan-wall-outer { stroke: var(--plan-wall); stroke-width: 7; stroke-linejoin: miter; stroke-linecap: square; }
.plan-wall-inner { stroke: var(--plan-paper); stroke-width: 4; stroke-linejoin: miter; stroke-linecap: square; }
.plan-openings rect { fill: var(--plan-paper); stroke: none; }
.plan-door { stroke: var(--plan-wall); stroke-width: 1.25; }
.plan-window { stroke: var(--plan-wall); stroke-width: 1; }
.plan-dim path { stroke: var(--plan-wall); stroke-width: 1; }
.plan-dim text {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .08em;
    fill: var(--plan-faint);
    stroke: none;
    text-anchor: middle;
}

/* Plansymbolerna: tecknad ruta med färgad kontur och tecken, som en symbol på ritningen. */
.plan-sym rect { fill: #fff; stroke-width: 1.5; }
.plan-sym--fire rect { stroke: var(--plan-red); }
.plan-sym--safe rect { stroke: var(--plan-green); }
.plan-sym text,
.plan-deviation text {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    stroke: none;
    text-anchor: middle;
    dominant-baseline: central;
}
.plan-sym--fire text { fill: var(--plan-red); }
.plan-sym--safe text { fill: var(--plan-green); }
/* Symbolen och brickan skalas kring sin egen mitt när de sätts ut. */
.plan-sym, .plan-deviation { transform-box: fill-box; transform-origin: center; }

/* Avvikelsemarkeringen på korridorens släckare. Ringen pulserar två gånger när brickan
   är satt och står sedan still — en markering, inte en larmlampa. */
.plan-deviation circle { fill: var(--brand-orange); stroke: var(--plan-paper); stroke-width: 2; }
.plan-deviation text { font-size: 9px; fill: #fff; }
.plan-deviation .plan-deviation-ring {
    fill: none;
    stroke: var(--brand-orange);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: plan-deviation-pulse 2s ease-out 3.2s 2;
}
@keyframes plan-deviation-pulse {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* Ritningen ritas upp när sidan öppnas, i den ordning arbetet görs: måtten och väggarna,
   sedan dörrar och fönster. När ritningen står klar går ronden: symbolerna sätts ut en i
   taget, medurs runt planet, och slutar vid korridorens släckare. Där sätts
   avvikelsebrickan och ringen pulserar — det SBA hittar.
   Sidans enda rörelse; utan rörelseönskemål står allt färdigt.
   Det dolda startläget finns bara i nyckelbildernas from + fill-mode backwards, aldrig som
   vanlig stil: startar animationen inte alls står ritningen färdig i stället för att bli
   kvar osynlig. Fryser webbläsaren den mitt i förloppet visas läget där den stannade;
   formuläret och stämpeln animeras aldrig och syns alltid. */
@media (prefers-reduced-motion: no-preference) {
    .plan-wall-outer, .plan-wall-inner, .plan-dim path, .plan-door, .plan-window {
        stroke-dasharray: 1;
        animation: plan-draw 1s cubic-bezier(.45, 0, .2, 1) .15s backwards;
    }
    .plan-dim path { animation-duration: .7s; }
    .plan-door, .plan-window { animation-duration: .6s; animation-delay: 1s; }
    .plan-dim text { animation: plan-appear .4s ease-out .7s backwards; }
    /* Öppningarna är pappersrutor; innan väggarna finns syns de som fläckar i rutnätet. */
    .plan-openings { animation: plan-appear .01s linear 1.1s backwards; }
    /* Ronden: en symbol var 170:e millisekund, i markeringens gångordning. */
    .plan-sym { animation: plan-place .34s cubic-bezier(.2, .9, .3, 1.25) 1.6s backwards; }
    .plan-syms > g:nth-child(2) .plan-sym { animation-delay: 1.77s; }
    .plan-syms > g:nth-child(3) .plan-sym { animation-delay: 1.94s; }
    .plan-syms > g:nth-child(4) .plan-sym { animation-delay: 2.11s; }
    .plan-syms > g:nth-child(5) .plan-sym { animation-delay: 2.28s; }
    .plan-syms > g:nth-child(6) .plan-sym { animation-delay: 2.45s; }
    /* Avvikelsen: brickan sätts när ronden är klar. */
    .plan-deviation { animation: plan-place .32s cubic-bezier(.2, .9, .3, 1.5) 2.85s backwards; }
}
@keyframes plan-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes plan-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes plan-place { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* Rutorna ligger på bladet: tunn ram och en mjuk skugga, ingen tjock kant. */
.login-stamp,
.login-form-box {
    background: #fff;
    border: 1px solid var(--plan-navy);
    box-shadow: 0 1px 2px rgba(22, 32, 43, .05), 0 18px 40px -18px rgba(33, 67, 102, .22);
}

/* -- Ritningsstämpeln ---------------------------------------------- */
.login-stamp { font-size: 13.5px; }

.login-stamp > div {
    padding: 18px 22px;
    border-bottom: 1px solid var(--plan-line);
}

.login-stamp > div:last-child { border-bottom: 0; }

/* Taglinen och teckenförklaringen står bredvid varandra, som fälten i en ritningsstämpel. */
.login-stamp > .stamp-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0;
}

.stamp-body > div { padding: 18px 22px; }
.stamp-body > .stamp-legend { border-left: 1px solid var(--plan-line); }

.stamp-id {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stamp-plate {
    width: 48px;
    height: 48px;
    flex: none;
    border: 1px solid var(--plan-line);
    background: #fff;
    display: grid;
    place-items: center;
}

.stamp-plate img {
    width: 34px;
    height: 34px;
    display: block;
    object-fit: contain;
}

/* Ordmärket skrivs som i logotypen: versaler, BRAND mörkblått och SIKT orange. */
.brand-name {
    font-family: 'Montserrat', var(--font-body);
    font-weight: 700;
    font-size: 21px;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--plan-navy);
}

.brand-name span { color: var(--brand-orange); }

.brand-sba {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--plan-muted);
    margin-top: 7px;
}

.stamp-tagline h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -.005em;
    color: var(--plan-navy);
    margin-bottom: 6px;
}

.stamp-tagline p {
    color: var(--plan-muted);
    line-height: 1.6;
    max-width: 40ch;
}

.stamp-legend {
    display: grid;
    gap: 10px;
}

.legend-key {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--plan-muted);
    margin-bottom: 2px;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--plan-ink);
}

/* Rutorna i förklaringen har samma form och färg som symbolerna på ritningen. */
.legend-sym {
    width: 22px;
    height: 22px;
    flex: none;
    border: 1.5px solid var(--plan-red);
    border-radius: 3px;
    color: var(--plan-red);
    display: grid;
    place-items: center;
    font-size: 10px;
}

.legend-sym--warn {
    border: 0;
    border-radius: 50%;
    background: var(--brand-orange);
    color: #fff;
    width: 18px;
    height: 18px;
    margin: 0 2px;
    font-size: 9px;
}

.legend-sym--time { border-color: var(--plan-green); color: var(--plan-green); }

/* -- Inloggningsrutan ---------------------------------------------- */
.login-form-box { align-self: end; }

.form-header {
    padding: 28px 32px 20px;
    border-bottom: 1px solid var(--plan-line);
}

.form-header .welcome {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--plan-navy);
}

.form-header .sub {
    font-size: 14px;
    color: var(--plan-muted);
    margin-top: 8px;
    line-height: 1.5;
}

.form-body { padding: 24px 32px 28px; }

.field-group { margin-bottom: 18px; }

.field-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--plan-ink);
    margin-bottom: 7px;
}

.field-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    border: 1px solid var(--plan-line);
    border-radius: 2px;
    padding: 0 12px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.field-input-wrap:hover { border-color: var(--plan-wall); }
.field-input-wrap:focus-within {
    border-color: var(--plan-navy);
    box-shadow: 0 0 0 3px var(--plan-focus);
}
.field-input-wrap.is-invalid { border-color: var(--plan-red); }

.field-icon {
    color: var(--plan-faint);
    font-size: 13px;
    width: 16px;
    text-align: center;
    flex: none;
}

.field-input-wrap:focus-within .field-icon { color: var(--plan-navy); }

.field-input-wrap input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--plan-ink);
}

.field-input-wrap input::placeholder { color: #A3AEBB; }

/* Webbläsarens autofyll målar annars fältet ljusblått. */
.field-input-wrap input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px #fff inset;
    -webkit-text-fill-color: var(--plan-ink);
}

.toggle-pw {
    border: 0;
    background: none;
    padding: 4px;
    color: var(--plan-faint);
    cursor: pointer;
    display: flex;
    font-size: 14px;
}

.toggle-pw:hover { color: var(--plan-navy); }
.toggle-pw:focus-visible { outline: 2px solid var(--plan-navy); outline-offset: 2px; }

.field-error {
    display: block;
    font-size: 12.5px;
    margin-top: 5px;
}
/* Fältfelet får ritningens röda, samma som fältramen, i stället för Bootstraps. */
.login-form-box .field-error.text-danger { color: var(--plan-red) !important; }

.remember-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 4px 0 22px;
    font-size: 13.5px;
}

.remember-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--plan-muted);
}

.remember-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--plan-navy);
    cursor: pointer;
}

.forgot-link {
    color: var(--plan-navy);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--brand-orange);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.forgot-link:hover { color: var(--plan-navy-deep); text-decoration-thickness: 2px; }
.forgot-link:focus-visible { outline: 2px solid var(--plan-navy); outline-offset: 3px; }

.btn-login {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .01em;
    background: var(--plan-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background .15s;
}

.btn-login i { font-size: 13px; transition: transform .2s; }
.btn-login:hover { background: var(--plan-navy-deep); }
.btn-login:hover i { transform: translateX(3px); }
.btn-login:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }

.footer-note {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    color: var(--plan-faint);
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--plan-line);
}

/* Felet står som en anteckning i marginalen: röd kantlinje, lugn bakgrund. */
.validation-error {
    background: #FBF3F2;
    border-left: 3px solid var(--plan-red);
    padding: 10px 14px;
    font-size: 13.5px;
    color: var(--plan-red-deep);
    margin-bottom: 20px;
}

.validation-error ul { list-style: none; margin: 0; padding: 0; }

/* -- Smalare skärmar --------------------------------------------------- */
@media (max-width: 1180px) {
    .login-grid { gap: 40px; padding: 40px; }
    .login-stamp > .stamp-body { grid-template-columns: 1fr; }
    .stamp-body > .stamp-legend { border-left: 0; border-top: 1px solid var(--plan-line); }
}

/* Lågt fönster med den höga, enspaltiga stämpeln: ritningens minsta rad ryms inte ovanför
   den, och stämpeln skulle sticka ut under spalten. Ritningen tas bort och stämpeln står
   ensam på formulärets baslinje. */
@media (max-width: 1180px) and (max-height: 660px) {
    .login-drawing { display: block; height: auto; }
    .login-plan { display: none; }
}

/* En spalt: formuläret först, sedan ritningen och stämpeln under den. Ritningen ligger
   efter formuläret och skjuter aldrig ner det. I låga fönster (blocket ovan) är den
   fortfarande borta: där fyller formuläret redan skärmen. */
@media (max-width: 900px) {
    .login-grid {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 24px;
        align-content: start;
    }
    .login-form-box { align-self: start; }
    .login-drawing { order: 2; display: block; height: auto; }
    .login-plan {
        height: auto;
        max-height: 300px;
        margin-bottom: 24px;
    }
}

/* Telefonbredd: strax under den här bredden börjar ritningen krympa och symbolerna blir
   för små att läsa, så den tas bort; rutpapperet står kvar. */
@media (max-width: 600px) {
    .login-plan { display: none; }
}

/* Smala fönster och pekskärmar, även en telefon på tvären som får tvåspaltsläget. */
@media (max-width: 900px), (pointer: coarse) {
    /* Under 16 px zoomar iOS in sidan när fältet får fokus. */
    .field-input-wrap input { font-size: 16px; }
    /* Pekytan för visa lösenord är minst 44 px, utan att fältet växer. */
    .toggle-pw {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        margin-right: -10px;
    }
}

@media (max-width: 480px) {
    .login-grid { padding: 16px; }
    .form-header, .form-body { padding-left: 20px; padding-right: 20px; }
    .login-stamp > .stamp-id, .stamp-body > div { padding-left: 20px; padding-right: 20px; }
    .form-header .welcome { font-size: 27px; }
    .stamp-tagline p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .field-input-wrap, .btn-login, .btn-login i { transition: none; }
    .plan-deviation .plan-deviation-ring { animation: none; }
}