/* Vaultnord-preg på hvelvet.
   Legges oppå Bitwarden-klienten utenfra av brand-proxyen, så den overlever en
   oppgradering av hvelvet. Prisen er at vi henger på klassenavn og CSS-variabler
   fra web-klienten: ser noe rart ut etter en oppdatering, er det her du ser
   først. Til gjengjeld er fiksen en CSS-linje, ikke en byggejobb.

   Variabelnavnene under er hentet fra web-klientens egen styles.css, der de er
   definert per tema som RGB-tripler uten rgb(). */

/* --- 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; }

bit-landing-header a bit-svg,
bit-landing-header a svg {
    display: none !important;
}
bit-landing-header a {
    display: block !important;
    width: 190px;
    height: 42px;
    background: url(/_vaultnord/logo-white.png) left center / contain no-repeat;
}
.theme_light bit-landing-header a {
    background-image: url(/_vaultnord/logo.png);
}

/* --- 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;
}

/* --- bunntekst med kildekodelenke ------------------------------------ */
/* Plass til den, ellers legger den seg oppå klientens egen bunntekst. */
body {
    padding-bottom: 42px !important;
}

#vaultnord-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 7px 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; }