/* Vaultnord-preg på hvelvet.
 * ---------------------------------------------------------------------------
 * Verifisert mot Vaultwarden web-klient 2026.7.0.
 *
 * Vi endrer ingen av klientens egne filer - alt her legges oppå. Det finnes
 * derfor ingen fletting ved oppgradering; det som kan ryke er at klienten har
 * byttet navn på noe vi henger på. Alle slike avhengigheter står i lista under,
 * og bygget sjekker at de fortsatt finnes (se vault-image/Dockerfile). Feiler
 * bygget etter en oppgradering, er det ett av disse punktene som har endret seg:
 *
 *   img.new-logo-themed        logo før appen starter
 *   bit-svg[aria-label*=logo]  logo på innloggingssidene
 *   bit-nav-logo               logo i sidemenyen etter innlogging
 *   --color-brand-050…950      fargetrappa alt annet peker inn i
 *   --color-illustration-*     fargene i tegningene
 *   bit-landing-footer         produktnavn og versjon nederst
 *   .tw-min-h-screen           høyden vi må krympe for vår egen bunntekst
 *
 * Rekkefølgen i fila følger lista. Endrer du farger, hold deg til blokken
 * "farger" - resten er kobling mot klienten, ikke smak.
 * ---------------------------------------------------------------------------
 */

/* --- logo ------------------------------------------------------------ */
/* To steder: den statiske i index.html før appen starter, og den Angular
   tegner etterpå som inline SVG i <bit-landing-header>. Begge må tas. */
.theme_light img.new-logo-themed { content: url(/_vaultnord/logo.png) !important; }
.theme_dark  img.new-logo-themed { content: url(/_vaultnord/logo-white.png) !important; }
img.new-logo-themed { width: 190px !important; height: auto !important; }

/* Klienten merker logoene sine med aria-label. Det er mer stabilt å henge på
   enn komponentnavn, og treffer både innloggingssidene og skallet innenfor. */
bit-svg[aria-label*="logo" i] {
    display: none !important;
}
a:has(> bit-svg[aria-label*="logo" i]),
bit-landing-header a:has(bit-svg) {
    display: block !important;
    min-width: 150px;
    height: 40px;
    background: url(/_vaultnord/logo-white.png) left center / contain no-repeat;
}
.theme_light a:has(> bit-svg[aria-label*="logo" i]),
.theme_light bit-landing-header a:has(bit-svg) {
    background-image: url(/_vaultnord/logo.png);
}

/* Logoen i sidemenyen når man er logget inn. Den ligger i <bit-nav-logo> og
   har ingen aria-label å henge på, så komponentnavnet må brukes. Menyen er
   mørk i begge temaer, derfor alltid den lyse logoen. */
bit-nav-logo bit-svg,
bit-nav-logo svg {
    display: none !important;
}
bit-nav-logo a {
    background: url(/_vaultnord/logo-white.png) center / 170px auto no-repeat;
}

/* --- farger ---------------------------------------------------------- */
/* Klienten bygger alt på en fargetrapp (--color-brand-050 … 950) som de
   semantiske variablene peker inn i: knapper bruker --color-bg-brand-strong,
   som igjen er var(--color-brand-800). Bytter vi trappa, følger resten med -
   knapper, lenker, fokusringer - uten at vi må jakte enkeltklasser. */
.theme_light, .theme_dark, :root {
    --color-brand-050: #f0faf9;
    --color-brand-100: #d7f2f0;
    --color-brand-200: #b0e6e2;
    --color-brand-300: #7ed6d1;
    --color-brand-400: #47c2bc;
    --color-brand-500: #2aa9a4;
    --color-brand-600: #1f918d;
    --color-brand-700: #17807d;
    --color-brand-800: #12666a;
    --color-brand-900: #0e4e52;
    --color-brand-950: #082f33;

    /* Den gamle primary-trappa lever fortsatt enkelte steder. */
    --color-primary-100: 227 241 240;
    --color-primary-300: 42 169 164;
    --color-primary-600: 23 128 125;
    --color-primary-700: 18 102 106;
}
.theme_dark {
    /* På mørk bunn er trappa speilvendt i klienten: bg-brand-strong peker på
       brand-200, ikke 800. Da må de lyse trinnene være de mettede. */
    --color-brand-050: #082f33;
    --color-brand-100: #0e4e52;
    --color-brand-200: #3dd2cc;
    --color-brand-300: #7ed6d1;
    --color-brand-400: #3dd2cc;
    --color-brand-500: #2aa9a4;
    --color-brand-600: #1f918d;
    --color-brand-700: #17807d;
    --color-brand-800: #3dd2cc;
    --color-brand-900: #0e4e52;
    --color-brand-950: #082f33;

    --color-primary-100: 20 60 62;
    --color-primary-300: 42 169 164;
    --color-primary-600: 61 210 204;
    --color-primary-700: 143 188 187;
}

/* --- illustrasjoner -------------------------------------------------- */
/* Safen og bakgrunnsfigurene er inline SVG-er som henter fargene sine fra
   variabler. Å legge et hue-filter på dem gjetter feil figur og gir rare
   resultater - variablene treffer presist. */
.theme_light {
    --color-illustration-bg-primary: 176 230 226;
    --color-illustration-bg-secondary: 126 214 209;
    --color-illustration-bg-tertiary: 240 250 249;
    --color-illustration-outline: 18 102 106;
    --color-illustration-logo: 23 128 125;
    --color-illustration-tertiary: 235 203 139;
}
.theme_dark {
    --color-illustration-bg-primary: 26 110 108;
    --color-illustration-bg-secondary: 61 210 204;
    --color-illustration-bg-tertiary: 243 246 249;
    --color-illustration-outline: 8 47 51;
    --color-illustration-logo: 255 255 255;
    --color-illustration-tertiary: 235 203 139;
}

/* --- klientens egen bunntekst ---------------------------------------- */
/* Rekkefølgen i <bit-landing-footer>: miljøvelger, produktnavn, versjon, br,
   ansvarsfraskrivelse. Vi skjuler produktnavnet og setter vårt eget foran
   versjonstallet - tallet blir stående som det er, så det følger hvelvet ved
   oppgradering i stedet for å ruste fast i en CSS-fil.
   Ansvarsfraskrivelsen (#vw-disclaimer) røres ikke: den skal stå, både av
   hensyn til AGPL og til Bitwardens varemerke. */
bit-landing-footer footer > div:nth-of-type(2) {
    display: none !important;
}
bit-landing-footer footer > div:nth-of-type(3)::before {
    content: "Vaultnord \2014 bygger på Vaultwarden ";
}

/* --- bunntekst med kildekodelenke ------------------------------------ */
/* Bunnteksten skal alltid være synlig - det er der kildekodelenken bor - men
   klientens layout er min-h-screen, så deres egen bunntekst havner nøyaktig der
   en fast stripe ligger. Padding hjelper ikke, for stripen følger vinduet.
   Løsningen er å krympe "en skjermhøyde" med akkurat stripens høyde. */
body.layout_frontend .tw-min-h-screen {
    min-height: calc(100vh - 46px) !important;
}
body.layout_frontend .tw-h-screen {
    height: calc(100vh - 46px) !important;
}
/* Og når innholdet er høyere enn vinduet: uten denne ligger stripen oppå det
   siste avsnittet når man har rullet helt ned. Begge deler trengs - den ene
   for korte sider, den andre for lange. */
body.layout_frontend {
    padding-bottom: 46px !important;
}

/* Inne i det innloggede skallet er det ingen plass å ta - der har klienten sin
   egen rullebeholder med fast høyde. Kildekodelenken står uansett på
   innloggingssiden, som er der alle begynner. */
body:not(.layout_frontend) #vaultnord-footer {
    display: none !important;
}

#vaultnord-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font: 12px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #55617a;
    background: #f3f6fa;
    border-top: 1px solid #dbe2ec;
    text-align: center;
    z-index: 2147483000;
}
#vaultnord-footer a { color: #17807d; }

.theme_dark #vaultnord-footer,
body.theme_dark #vaultnord-footer {
    color: #9aa5b8;
    background: #202733;
    border-top-color: #434c5e;
}
.theme_dark #vaultnord-footer a { color: #8fbcbb; }