/* =======================================================================
   VitalCX Vault — Brand overrides on top of Bitwarden/Vaultwarden web vault
   Colors from VitalCX Brand Guide v1.0
   ======================================================================= */

/* Self-hosted Albert Sans (variable font) — CSP-compliant */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/albert-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/albert-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
html.theme_light,
html.theme_dark,
html.theme_system {
  /* === Primary brand === */
  --brand-primary: #0063FF;          /* Vital Blue */
  --brand-primary-600: #0051CF;      /* Deep Indigo (hover) */
  --brand-primary-200: #A3C7FF;      /* Soft Sky */
  --brand-primary-100: #D8E7FF;      /* Air Blue */

  /* === Grayscale === */
  --brand-black: #1C1A19;
  --brand-charcoal: #575A66;
  --brand-drift: #9DA2B3;
  --brand-mist: #E0E3ED;
  --brand-paper: #F8F8FB;
  --brand-white: #FFFFFF;
}

/* === Bitwarden/Bootstrap color tokens → VitalCX === */
html.theme_light, html.theme_system {
  --color-primary-100: 216 231 255;   /* Air Blue */
  --color-primary-300: 163 199 255;   /* Soft Sky */
  --color-primary-500: 0 99 255;      /* Vital Blue */
  --color-primary-600: 0 81 207;      /* Deep Indigo */
  --color-primary-700: 0 65 165;
  --color-secondary-100: 248 248 251; /* Paper */
  --color-secondary-300: 224 227 237; /* Mist */
  --color-secondary-500: 157 162 179; /* Drift */
  --color-secondary-700: 87 90 102;   /* Charcoal */

  --color-text-main: 28 26 25;        /* Black */
  --color-text-alt: 87 90 102;        /* Charcoal */
  --color-text-muted: 157 162 179;    /* Drift */

  --color-background: 255 255 255;
  --color-background-alt: 248 248 251; /* Paper */
  --color-background-alt2: 0 99 255;   /* Vital Blue */

  --color-illustration-logo: 0 99 255;
  --color-illustration-outline: 28 26 25;
  --color-illustration-bg-primary: 216 231 255;
  --color-illustration-bg-secondary: 163 199 255;
  --color-illustration-bg-tertiary: 136 228 254; /* Aqua */

  --color-info-100: 216 231 255;
  --color-info-500: 0 99 255;
  --color-info-700: 0 81 207;
}

html.theme_dark {
  --color-primary-300: 0 99 255;
  --color-primary-500: 136 228 254;    /* Aqua for dark mode primary highlight */
  --color-primary-700: 163 199 255;

  --color-background: 28 26 25;        /* Black */
  --color-background-alt: 42 40 39;
  --color-background-alt2: 0 99 255;   /* Vital Blue */
  --color-text-main: 255 255 255;
  --color-text-alt: 224 227 237;       /* Mist */
  --color-text-muted: 157 162 179;

  --color-illustration-logo: 136 228 254;
  --color-illustration-outline: 255 255 255;
}

/* === Typography: Albert Sans everywhere EXCEPT icon fonts === */
/* Use the :not() selector to exclude anything that uses an icon font-family.
   This preserves bwi-*, bi-*, fa-*, etc. glyphs. */
html, body,
.bit-input, .bit-button, .bit-link, .bit-form-field,
input, button, select, textarea, label,
h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, dd, dt,
[class*="tw-text-"], [class*="tw-font-"] {
  font-family: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* Icon fonts must NOT be overridden. Without !important the original icon-font rules win
   by equal or higher specificity. We only re-declare to guard against our body/html rules. */
.bwi, [class*=" bwi-"], [class^="bwi-"] {
  font-family: "bwi-font" !important;
}
.bi, [class*=" bi-"], [class^="bi-"] {
  font-family: "bootstrap-icons" !important;
}
.fa, .fas, .far, .fab, [class*=" fa-"], [class^="fa-"] {
  font-family: "Font Awesome 6 Free", "FontAwesome" !important;
}

/* === Replace top-left splash logo ("new-logo-themed") with VitalCX wordmark === */
img.new-logo-themed {
  content: url('/images/logo-dark@2x.png');
}
html.theme_dark img.new-logo-themed,
html.theme_dark_contrast img.new-logo-themed {
  content: url('/images/logo-white@2x.png');
}

/* === VitalCX wordmark rendered via <foreignObject> inside patched SVGs === */
/* The foreignObject wrapper exactly fills the SVG viewBox. No padding or
   flex-centering here — the <img> handles its own aspect via object-fit.
   Extra layout constraints would shift the logo out of its allocated slot
   and push neighboring UI down. */
.vcx-foreign-wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  line-height: 0;
}
.vcx-wordmark {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.vcx-shield-img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 14%;
}

/* Light/dark theme variants. IMPORTANT: use !important to beat any inline
   styles Angular might inject, and never use inline display:none on the imgs. */
.vcx-wordmark-dark { display: none !important; }
html.theme_dark .vcx-wordmark-light,
html.theme_dark_contrast .vcx-wordmark-light { display: none !important; }
html.theme_dark .vcx-wordmark-dark,
html.theme_dark_contrast .vcx-wordmark-dark { display: block !important; }

/* === Hide "Bitwarden" / "Vaultwarden" footer attribution === */
.environment-selector,
footer .text-muted small,
footer a[href*="bitwarden.com"],
footer a[href*="vaultwarden"],
.footer a[href*="github.com/dani-garcia"] {
  display: none !important;
}

/* === Hide "Create account" / signup UI (SIGNUPS_ALLOWED=false) === */
/* Hide links to signup, the registration form itself, and the footer CTA. */
a[href="#/signup"],
a[href*="/#/signup"],
a[routerlink="/signup"],
a[routerLink="/signup"],
app-root a[href$="/signup"],
auth-registration-start,
auth-registration-start-secondary {
  display: none !important;
}

/* === Primary button/link color normalization === */
a,
.text-primary,
.btn-link {
  color: rgb(var(--color-primary-500)) !important;
}
a:hover, .btn-link:hover {
  color: rgb(var(--color-primary-600)) !important;
}

.btn-primary,
button.primary,
.bit-button.primary,
[type="submit"].btn {
  background-color: rgb(var(--color-primary-500)) !important;
  border-color: rgb(var(--color-primary-500)) !important;
  color: #fff !important;
}
.btn-primary:hover,
button.primary:hover,
.bit-button.primary:hover {
  background-color: rgb(var(--color-primary-600)) !important;
  border-color: rgb(var(--color-primary-600)) !important;
}

/* === Focus rings: Vital Blue === */
*:focus-visible,
.bit-input:focus, input:focus, select:focus, textarea:focus {
  outline-color: rgb(var(--color-primary-500)) !important;
  box-shadow: 0 0 0 3px rgba(0, 99, 255, 0.25) !important;
}

/* === Accent backgrounds === */
.bg-primary { background-color: rgb(var(--color-primary-500)) !important; }
.border-primary { border-color: rgb(var(--color-primary-500)) !important; }

/* === Login page left-panel background === */
.layout-frontend,
.bit-layout-frontend,
body.layout_frontend {
  background-color: rgb(var(--color-background-alt)) !important;
}

/* === Theme color meta (for mobile browser chrome) === */
/* actually set via meta tag in index.html */