/* === SHIZA brand override (loaded after main stylesheet) === */
html, :root, .theme_light, .theme_dark {
  /* SHIZA violet brand ramp (around #7C6FE0). brand-* = hex (semantic consumers). */
  --color-brand-050: #f2f0fc;
  --color-brand-100: #e6e3f9;
  --color-brand-200: #cdc7f3;
  --color-brand-300: #b3aaed;
  --color-brand-400: #9b8ff0;
  --color-brand-500: #7c6fe0;
  --color-brand-600: #6a5cd3;
  --color-brand-700: #5e51c9;
  --color-brand-800: #4a40a0;
  --color-brand-900: #383078;
  --color-brand-950: #221d4d;
  /* --color-primary-* = legacy RGB triples (links use 600, link-hover 700) */
  --color-primary-050: 242 240 252;
  --color-primary-100: 230 227 249;
  --color-primary-200: 205 199 243;
  --color-primary-300: 179 170 237;
  --color-primary-400: 155 143 240;
  --color-primary-500: 124 111 224;
  --color-primary-600: 167 139 250;   /* LINKS -> #A78BFA */
  --color-primary-700: 196 181 253;   /* link hover -> #C4B5FD */
  --color-primary-800: 74 64 160;
  --color-primary-900: 56 48 120;
  --color-primary-950: 34 29 77;
  --color-marketing-logo: #7c6fe0;

  /* semantic accent (hex; primary button + links/icons consume these) */
  --color-bg-brand: #7c6fe0;            /* primary button bg */
  --color-bg-brand-strong: #9b8ff0;     /* primary hover */
  --color-bg-brand-stronger: #5e51c9;   /* primary active/pressed */
  --color-bg-brand-medium: #4a40a0;
  --color-fg-brand: #a78bfa;            /* links / active icons */
  --color-fg-brand-strong: #c4b5fd;
  --color-fg-brand-soft: #9b8ff0;
  --color-border-brand: #7c6fe0;
  --color-border-brand-strong: #9b8ff0;
}
/* loading logo + brand accents fallbacks */
.new-logo-themed { filter: none; }

/* Force SHIZA logo on the frontend/login header (absolute paths, beats theme rules) */
img.new-logo-themed { content: url(/images/shiza-logo-white.svg) !important; }
.theme_light img.new-logo-themed { content: url(/images/shiza-logo-dark.svg) !important; }
.theme_dark  img.new-logo-themed { content: url(/images/shiza-logo-white.svg) !important; }
bit-nav-logo bit-nav-item a:before { background-image: url(/images/shiza-mark.svg) !important; }

/* === SHIZA-themed background illustrations + login safe-box (retint Bitwarden blue ramp) === */
html, :root, .theme_light, .theme_dark {
  --color-illustration-bg-primary: 145 107 227;   /* #916BE3 purple */
  --color-illustration-bg-secondary: 120 127 247; /* #787FF7 periwinkle */
  --color-illustration-bg-tertiary: 168 89 209;    /* #A859D1 orchid */
  --color-illustration-outline: 213 199 244;       /* #D5C7F4 light purple outline */
  --color-illustration-logo: 145 107 227;          /* #916BE3 */
  --color-illustration-tertiary: 0 194 255;        /* #00C2FF cyan accent (dial) */
}

/* ===================================================================== */
/* === SECTION 5: SHIZA navy vault theme (authenticated app, dark) ===== */
/* ===================================================================== */
.theme_dark {
  /* surfaces — semantic (HEX, consumed via var()) */
  --color-bg-tertiary: #0D0F1A;    /* page / content */
  --color-bg-primary: #13162A;     /* cards / sidebar / panels */
  --color-bg-secondary: #1E2238;   /* hover / inputs / elevated */
  --color-bg-quaternary: #1E2238;
  --color-border-base: #2A2E4A;    /* borders / dividers */
  --color-border-muted: #2A2E4A;
  --color-border-light: #2A2E4A;

  /* surfaces — legacy triples (consumed via rgb(var())) */
  --color-background: 13 15 26;       /* #0D0F1A */
  --color-background-alt: 19 22 42;   /* #13162A */
  --color-background-alt2: 30 34 56;  /* #1E2238 */
  --color-background-alt3: 30 34 56;  /* #1E2238 table header */
  --color-background-alt4: 19 22 42;  /* #13162A */
  --color-secondary-100: 30 34 56;    /* #1E2238 input/disabled bg */
  --color-secondary-300: 42 46 74;    /* #2A2E4A control border */

  /* text */
  --color-text-main: 242 241 249;    /* #F2F1F9 */
  --color-text-muted: 156 160 184;   /* #9CA0B8 */
  --color-fg-heading: #F2F1F9;
  --color-fg-body: #F2F1F9;
  --color-fg-body-subtle: #9CA0B8;
  --color-fg-muted: #9CA0B8;

  /* status */
  --color-bg-danger: #E24B4A;  --color-fg-danger: #E24B4A;
  --color-bg-danger-strong: #c93f3e;  --color-fg-danger-strong: #f08c8b;
  --color-bg-success: #1D9E75; --color-fg-success: #1D9E75;
  --color-bg-success-strong: #178a66; --color-fg-success-strong: #6fd9b6;
  --color-bg-warning: #EF9F27; --color-fg-warning: #EF9F27;
  --color-bg-warning-strong: #d98c16; --color-fg-warning-strong: #f7c47a;

  /* nav text (inactive) muted; icons handled per-element in Section 13 */
  --color-nav-fg-primary: #9CA0B8;
  --color-nav-fg-secondary: #9CA0B8;
}
/* flat page background per palette (no gradient) */
.theme_dark body:not(.layout_frontend) bit-layout { background: #0D0F1A !important; }

/* ===================================================================== */
/* === SECTION 6: LOGIN full-bleed hero (image fills whole page) ======= */
/* ===================================================================== */
body.layout_frontend { background-color: #0a0913 !important; overflow-x: hidden; }

/* hero image fills the ENTIRE viewport, fixed behind the app content,
   with a left-dark -> right-clear gradient so the card stays legible on
   the left while the face glows on the right (no seam). */
body.layout_frontend::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(13,15,26,0.97) 0%,
      rgba(13,15,26,0.88) 32%,
      rgba(13,15,26,0.55) 62%,
      rgba(13,15,26,0.18) 100%),
    #0D0F1A url("/images/shiza-hero.png") right center / cover no-repeat;
  filter: saturate(0.9);
  z-index: 0;
  pointer-events: none;
}
/* keep all app content above the hero */
body.layout_frontend app-root { position: relative; z-index: 1; }

/* ===================================================================== */
/* === SECTION 7: LOGIN transparent panels, card-left, hide art+footer = */
/* ===================================================================== */
/* neutralize Bitwarden's opaque alt backgrounds so the hero shows.
   Scoped to app-root (the login form) ONLY — the CDK modal overlay is a
   sibling of app-root, so dialogs (e.g. the logout confirm) keep their bg. */
body.layout_frontend auth-anon-layout .tw-bg-background-alt,
body.layout_frontend auth-anon-layout .\!tw-bg-background-alt { background-color: transparent !important; }

/* form column spans full width (over the hero) and is left-aligned so the
   face on the right stays visible */
body.layout_frontend auth-anon-layout main > div.tw-flex.tw-flex-col.tw-flex-1.tw-items-center {
  width: 100%;
  margin-right: 0;
  background: transparent;
  align-items: flex-start;
  padding-left: 7vw;
  padding-right: 2rem;
}
/* header (logo) transparent over the hero */
body.layout_frontend auth-anon-layout header.tw-bg-background-alt { background-color: transparent !important; width: auto; }
/* hide Bitwarden's faint decorative corner illustrations.
   auth-anon-layout-scoped selector applies the INSTANT they render (no wait for
   the JS-set body.layout_frontend class) -> no "old background flashes for a second".
   Plain descendant selector = works in every browser (no :has needed). */
auth-anon-layout div[class*="tw-opacity-[.11]"] { display: none !important; }
/* remove the footer (version + Bitwarden disclaimer) per request — same no-flash scope */
auth-anon-layout footer { display: none !important; }

/* ===================================================================== */
/* === SECTION 8: LOGIN glass card ===================================== */
/* ===================================================================== */
body.layout_frontend auth-anon-layout main div.tw-flex.tw-flex-col.tw-max-w-md.tw-w-full {
  background-color: rgba(19, 22, 42, 0.82);   /* #13162A glass */
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(124, 111, 224, 0.40); /* violet */
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.55);
}

/* ===================================================================== */
/* === SECTION 9: RESPONSIVE (narrow: center card, vertical gradient) == */
/* ===================================================================== */
@media (max-width: 900px) {
  body.layout_frontend auth-anon-layout main > div.tw-flex.tw-flex-col.tw-flex-1.tw-items-center {
    align-items: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  body.layout_frontend::after {
    background:
      linear-gradient(180deg, rgba(13,11,26,0.55), rgba(13,11,26,0.85)),
      #0a0913 url("/images/shiza-hero.png") center center / cover no-repeat;
  }
}

/* ===================================================================== */
/* === SECTION 10: refined login/signup card (mockup) ================== */
/* ===================================================================== */

/* self-hosted serif heading (OFL, font-src 'self') */
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/InstrumentSerif.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
body.layout_frontend bit-landing-hero h1[bittypography] {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
  line-height: 1.12;
}

/* refined small brand mark replacing the cartoon safe-box */
body.layout_frontend bit-landing-hero div.tw-size-20 bit-svg svg { display: none !important; }
body.layout_frontend bit-landing-hero div.tw-size-20 {
  background: url("/images/shiza-mark.svg") center / contain no-repeat;
  width: 3.25rem !important;
  height: 3.25rem !important;
  margin: 0 auto 0.85rem !important;
}

/* "Secure access" pill (injected) */
body.layout_frontend [data-shiza="pill"] {
  display: block;
  width: max-content;
  margin: 0 auto 0.85rem;
}
body.layout_frontend [data-shiza="pill"] > span {
  display: inline-block;
  padding: 0.18rem 0.7rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #b3aaed;
  border: 1px solid rgba(124, 111, 224, 0.45);
  border-radius: 999px;
  background: rgba(124, 111, 224, 0.10);
}

/* subtitle under heading (injected) */
body.layout_frontend [data-shiza="subtitle"] {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  color: rgb(var(--color-text-muted));
  text-align: center;
}

/* remove "(required)" indicator + the whole "Remember email" row */
body.layout_frontend bit-form-field span.tw-text-\[0\.625rem\] { display: none !important; }
body.layout_frontend bit-form-control:has(input[formcontrolname="rememberEmail"]) { display: none !important; }

/* "or" divider: existing .vw-or-text -> line — or — line */
body.layout_frontend .vw-or-text {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 !important;
  color: rgb(var(--color-text-muted));
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
body.layout_frontend .vw-or-text::before,
body.layout_frontend .vw-or-text::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(213, 199, 244, 0.18);
}

/* secondary link lead text (injected) */
body.layout_frontend [data-shiza="secondary-lead"] {
  color: rgb(var(--color-text-muted));
  font-size: 0.875rem;
}

/* trust note at the bottom of the card (injected) */
body.layout_frontend [data-shiza="trust"] {
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: rgba(187, 187, 204, 0.65);
}

/* "Continue ->" (keep real text for a11y, append arrow visually) */
body.layout_frontend button.vw-continue-login > div::after { content: " \2192"; }

/* tighten the card so it isn't too tall for one field */
body.layout_frontend bit-landing-hero > div { margin-bottom: 1rem !important; }
body.layout_frontend bit-form-field.tw-mb-4 { margin-bottom: 1rem !important; padding-top: 0 !important; }
body.layout_frontend bit-base-card { margin-bottom: 1rem !important; }

/* ===================================================================== */
/* === SECTION 11: kill Chrome's white autofill background ============= */
/* ===================================================================== */
/* Chrome paints autofilled inputs with its own light bg, ignoring the dark
   theme. Mask it with a navy inset shadow + cream text, app-wide. */
body.layout_frontend input:-webkit-autofill,
body.layout_frontend input:-webkit-autofill:hover,
body.layout_frontend input:-webkit-autofill:focus,
body.layout_frontend input:-webkit-autofill:active,
.theme_dark input:-webkit-autofill,
.theme_dark input:-webkit-autofill:hover,
.theme_dark input:-webkit-autofill:focus,
.theme_dark input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #13162A inset !important;
  box-shadow: 0 0 0 1000px #13162A inset !important;
  -webkit-text-fill-color: #f2f1f9 !important;
  caret-color: #f2f1f9 !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ===================================================================== */
/* === SECTION 12: app-wide — Inter font, purple hover, no Bitwarden === */
/* ===================================================================== */
:root, html, .theme_light, .theme_dark {
  /* Inter as the UI sans font (was undefined / fell back) */
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  /* hover tint -> SHIZA violet */
  --color-hover-default: rgb(124 111 224 / 0.12);
}
/* enforce Inter for body/controls (icons keep bwi-font; login headings keep
   Instrument Serif via Section 10's !important) */
html, body, button, input, select, textarea, p, span, a, div, label, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
}
/* hide all Bitwarden external links + any small text line wrapping them */
a[href*="bitwarden.com"], a[href*="bitwarden.eu"], a[href*="bitwarden.net"] { display: none !important; }
p:has(> a[href*="bitwarden.com"]), p:has(> a[href*="bitwarden.eu"]),
span:has(> a[href*="bitwarden.com"]) { display: none !important; }

/* ===================================================================== */
/* === SECTION 13: authenticated vault panel — SHIZA Companion polish == */
/* === scoped to the logged-in app only (NOT login/signup) ============ */
/* ===================================================================== */
:root, .theme_dark { --shiza-card: #13162A; --shiza-card-border: #2A2E4A; }

/* flat page background per palette (#0D0F1A) */
body:not(.layout_frontend) bit-layout { background: #0D0F1A !important; }
/* the left nav rail: flat dark, sits on the gradient */
body:not(.layout_frontend) bit-side-nav,
body:not(.layout_frontend) [class*="tw-bg-background-alt"]:where(bit-side-nav, bit-side-nav *) {
  background: transparent !important;
}

/* CARD surfaces -> distinct lighter navy, rounded, hairline purple border + depth.
   (the get-started card + generic bg-alt rounded containers; NOT the filters panel) */
body:not(.layout_frontend) app-onboarding details,
body:not(.layout_frontend) [class*="tw-bg-background-alt"][class*="tw-rounded"] {
  background-color: var(--shiza-card) !important;
  border: 1px solid var(--shiza-card-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.30);
}
/* FILTERS panel: NO card box, NO "FILTERS" header, NO section divider lines.
   Search input sits directly in the panel; filter sections flow cleanly. */
body:not(.layout_frontend) app-vault-filter,
body:not(.layout_frontend) app-filter-section,
body:not(.layout_frontend) app-vault-filter [class*="tw-border-secondary-300"] {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* hide the "FILTERS" title header bar */
body:not(.layout_frontend) app-vault-filter [class*="tw-bg-background-alt"][class*="tw-rounded-t"] {
  display: none !important;
}
/* table/list header row -> #1E2238 */
body:not(.layout_frontend) [class*="tw-bg-background-alt3"] {
  background-color: #1E2238 !important;
  border-radius: 10px !important;
}

/* sidebar nav — leaf items are <a>; Bitwarden paints the active/hover background on
   the inner div.tw-rounded-xl WRAPPER (was grey -> caused the two-tone left block).
   Style THAT wrapper as the single uniform highlight; keep the <a> transparent.
   Icons are <bit-icon>, not <i>. Parent group headers are <button> (handled below). */

/* ACTIVE leaf: one solid #2A2748 pill (on the wrapper) + 3px #A78BFA left border */
body:not(.layout_frontend) bit-nav-item div[class*="tw-rounded-xl"]:has(a[aria-current="page"]),
body:not(.layout_frontend) bit-nav-item div[class*="tw-rounded-xl"]:has(a.active) {
  background-color: #2A2748 !important;
  border-left: 3px solid #A78BFA !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: none !important;
}
body:not(.layout_frontend) bit-nav-item a[aria-current="page"],
body:not(.layout_frontend) bit-nav-item a.active {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #C7BFFA !important;
}
body:not(.layout_frontend) bit-nav-item a[aria-current="page"] bit-icon,
body:not(.layout_frontend) bit-nav-item a.active bit-icon { color: #A78BFA !important; }

/* INACTIVE leaf: muted text/icon; hover brightens (recolor the wrapper, no grey) */
body:not(.layout_frontend) bit-nav-item a { color: #9CA0B8 !important; }
body:not(.layout_frontend) bit-nav-item bit-icon { color: #6B6F87 !important; }
body:not(.layout_frontend) bit-nav-item:hover div[class*="tw-rounded-xl"]:not(:has(a[aria-current="page"])):not(:has(a.active)) {
  background-color: rgba(124, 111, 224, 0.12) !important;
}
body:not(.layout_frontend) bit-nav-item a:not([aria-current="page"]):not(.active):hover { color: #F2F1F9 !important; }
body:not(.layout_frontend) bit-nav-item a:not([aria-current="page"]):not(.active):hover bit-icon { color: #A78BFA !important; }

/* PARENT group header (<button>): NEVER active — stays muted even when a child
   route is active (fixes the parent/child double-highlight). Chevron stays muted. */
body:not(.layout_frontend) bit-nav-group button,
body:not(.layout_frontend) bit-nav-group button[aria-current="page"],
body:not(.layout_frontend) bit-nav-group button.active {
  background-color: transparent !important;
  color: #9CA0B8 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
body:not(.layout_frontend) bit-nav-group button bit-icon,
body:not(.layout_frontend) bit-nav-group button i.bwi { color: #6B6F87 !important; }
body:not(.layout_frontend) bit-nav-group button:hover {
  background-color: rgba(124, 111, 224, 0.10) !important;
  color: #F2F1F9 !important;
}
body:not(.layout_frontend) bit-nav-group button:hover bit-icon,
body:not(.layout_frontend) bit-nav-group button:hover i.bwi { color: #A78BFA !important; }

/* primary buttons: consistent rounded corners */
body:not(.layout_frontend) button[bitbutton][buttontype="primary"] { border-radius: 10px !important; }

/* nav logo keeps natural size */
body:not(.layout_frontend) bit-nav-logo svg { max-height: 2.6rem; }

/* ===================================================================== */
/* === SECTION 14: vault fixes — avatar color, dialogs, tabs, menus ==== */
/* ===================================================================== */

/* avatar: Bitwarden hardcodes a blue --avatar-bg inline style -> force violet */
bit-avatar { --avatar-bg: #7c6fe0 !important; --avatar-bg-hover: #5e51c9 !important; }

/* dialogs were see-through: force solid card panel + darker backdrop */
.cdk-overlay-backdrop,
.cdk-overlay-dark-backdrop { background: rgba(6, 7, 13, 0.74) !important; }
.cdk-overlay-pane bit-dialog section,
.cdk-overlay-pane [class~="tw-bg-background"],
.cdk-overlay-pane .cdk-dialog-container > * {
  background-color: #13162A !important;
}
.cdk-overlay-pane bit-dialog section {
  border: 1px solid #2A2E4A !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65) !important;
}
/* dropdown menus / popovers (account menu, selects) -> #1E2238 */
.cdk-overlay-pane [role="menu"],
.cdk-overlay-pane bit-menu,
.cdk-overlay-pane [bitmenu] {
  background-color: #1E2238 !important;
  border: 1px solid #2A2E4A !important;
  border-radius: 12px !important;
}

/* tabs: active tab -> SHIZA violet text + underline (Generator/Security) */
body:not(.layout_frontend) [role="tab"][aria-selected="true"],
body:not(.layout_frontend) a[role="tab"].active,
body:not(.layout_frontend) nav a.active[bitlink] {
  color: #A78BFA !important;
  border-color: #7c6fe0 !important;
}

/* ===================================================================== */
/* === SECTION 15: button design-system (app-wide: login + vault) ====== */
/* ===================================================================== */
/* RULE 1: PRIMARY = the only violet button. bg #7C6FE0 / hover #9B8FF0 come
   from --color-bg-brand(-strong); add white text + darker pressed #5E51C9. */
button[bitbutton][buttontype="primary"]:not([bit-aria-disable="true"]) { color: #ffffff !important; }
button[bitbutton][buttontype="primary"]:not([bit-aria-disable="true"]):active {
  background-color: #5E51C9 !important; border-color: #5E51C9 !important;
}

/* RULE 1: SECONDARY = transparent + #2A2E4A border + #A78BFA text + states */
button[bitbutton][buttontype="secondary"]:not([bit-aria-disable="true"]) {
  background-color: transparent !important;
  border: 1px solid #2A2E4A !important;
  color: #A78BFA !important;
}
button[bitbutton][buttontype="secondary"]:not([bit-aria-disable="true"]):hover {
  background-color: rgba(124, 111, 224, 0.12) !important;
  border-color: #9B8FF0 !important;
  color: #9B8FF0 !important;
}
button[bitbutton][buttontype="secondary"]:not([bit-aria-disable="true"]):active {
  background-color: rgba(94, 81, 201, 0.18) !important;
  border-color: #7c6fe0 !important;
}

/* RULE 4: DANGER/destructive = #E24B4A bg, white text, hover/active darker */
button[bitbutton][buttontype="danger"]:not([bit-aria-disable="true"]) {
  background-color: #E24B4A !important; border-color: #E24B4A !important; color: #ffffff !important;
}
button[bitbutton][buttontype="danger"]:not([bit-aria-disable="true"]):hover {
  background-color: #C93F3E !important; border-color: #C93F3E !important;
}
button[bitbutton][buttontype="danger"]:not([bit-aria-disable="true"]):active {
  background-color: #B53636 !important; border-color: #B53636 !important;
}

/* text links -> #A78BFA (driven by --color-primary-600 above); ensure hover */
.theme_dark a[bitlink]:hover, .theme_dark .tw-link:hover { color: #c4b5fd !important; }

/* Bitwarden sets button label color on inner spans (tw-text-fg-*) -> force the
   label/icon color to match each button type (descendant override) */
button[bitbutton][buttontype="primary"]:not([bit-aria-disable="true"]) * { color: #ffffff !important; }
button[bitbutton][buttontype="danger"]:not([bit-aria-disable="true"]) * { color: #ffffff !important; }
button[bitbutton][buttontype="secondary"]:not([bit-aria-disable="true"]) * { color: #A78BFA !important; }
button[bitbutton][buttontype="secondary"]:not([bit-aria-disable="true"]):hover * { color: #9B8FF0 !important; }
/* override the brand "contrast" text var so any remaining primary labels read white on #7C6FE0 */
.theme_dark { --color-fg-contrast: #ffffff; --color-text-contrast: 255 255 255; }

/* ===================================================================== */
/* === SECTION 16: dialogs dark EVERYWHERE (fix white logout popup) ===== */
/* ===================================================================== */
/* The logout/confirm dialog can render over the login hero (body.layout_frontend),
   where Section 7 makes .tw-bg-background-alt transparent -> the CDK container's
   default WHITE shows through. Force every dialog surface to dark navy with high
   specificity that beats the layout_frontend rules. */
html body .cdk-overlay-container .cdk-overlay-pane .cdk-dialog-container,
html body .cdk-overlay-pane .cdk-dialog-container,
html body .cdk-overlay-pane .cdk-dialog-container > *,
html body .cdk-overlay-pane bit-dialog,
html body .cdk-overlay-pane bit-dialog section,
html body .cdk-overlay-pane bit-simple-dialog,
html body .cdk-overlay-pane bit-simple-configurable-dialog,
html body .cdk-overlay-pane app-simple-dialog,
html body .cdk-overlay-pane [role="dialog"],
html body .cdk-overlay-pane [role="alertdialog"],
html body .cdk-overlay-pane [class*="tw-bg-background-alt"],
html body .cdk-overlay-pane [class~="tw-bg-background"],
html body .cdk-overlay-pane [class*="tw-bg-white"] {
  background-color: #13162A !important;
}
/* dialog title/message stay readable on navy */
html body .cdk-overlay-pane [role="alertdialog"] *,
html body .cdk-overlay-pane bit-simple-dialog [bitdialogtitle],
html body .cdk-overlay-pane bit-simple-dialog [bittypography] { color: inherit; }

/* SECTION 16b: simple-dialog cards (e.g. the lock-screen "Log out" confirm) render as
   cdk-dialog-container > ng-component > form > div.card and paint the card's bg with
   tw-bg-text-contrast = rgb(var(--color-text-contrast)) = white (255 255 255). The earlier
   rules only cover tw-bg-background-alt/white/background, so this card stayed white.
   tw-bg-text-contrast is a BACKGROUND utility; white button text is hardcoded (#fff) and uses
   a different class (tw-text-contrast), so this never affects buttons. Theme-agnostic on
   purpose (the var is white in both theme_dark and theme_light). */
html body .cdk-overlay-pane [class*="tw-bg-text-contrast"] {
  background-color: #13162A !important;
  border-color: #2A2E4A !important;
}

/* ===================================================================== */
/* === SECTION 17: SHIZA is dark-only — theme_light uses the dark palette */
/* === (fixes white logout/confirm dialogs rendered in a theme_light ctx) */
/* ===================================================================== */
.theme_light {
  --color-bg-tertiary: #0D0F1A; --color-bg-primary: #13162A; --color-bg-secondary: #1E2238; --color-bg-quaternary: #1E2238;
  --color-border-base: #2A2E4A; --color-border-muted: #2A2E4A; --color-border-light: #2A2E4A;
  --color-background: 13 15 26; --color-background-alt: 19 22 42; --color-background-alt2: 30 34 56;
  --color-background-alt3: 30 34 56; --color-background-alt4: 19 22 42;
  --color-secondary-100: 30 34 56; --color-secondary-300: 42 46 74;
  --color-text-main: 242 241 249; --color-text-muted: 156 160 184;
  --color-fg-heading: #F2F1F9; --color-fg-body: #F2F1F9; --color-fg-body-subtle: #9CA0B8; --color-fg-muted: #9CA0B8;
  --color-bg-danger: #E24B4A; --color-fg-danger: #E24B4A;
  --color-bg-success: #1D9E75; --color-fg-success: #1D9E75;
  --color-bg-warning: #EF9F27; --color-fg-warning: #EF9F27;
  /* dialog warning aside bg (was warm white in light) */
  --color-bg-warning-soft: #2a2438; --color-bg-warning-medium: #3a2f1a;
  --color-fg-contrast: #ffffff; --color-text-contrast: 255 255 255;
  color-scheme: dark;
}

/* ===================================================================== */
/* === SECTION 18: hide the avatar "Customize" button (My account) ===== */
/* ===================================================================== */
/* The secondary button sitting next to bit-avatar inside app-profile.
   Scoped to the avatar row so Save/Continue/danger-zone are untouched.
   (bit-avatar is nested in the row, so :has(bit-avatar), not :has(> bit-avatar).) */
app-profile div:has(bit-avatar) > button[buttontype="secondary"] {
  display: none !important;
}

/* ===================================================================== */
/* === SECTION 19: SHIZA logo on the Admin Console nav ================== */
/* ===================================================================== */
/* The Password Manager nav logo is already SHIZA; the Admin Console / org
   layout uses a separate (Vaultwarden) inline SVG. Hide that SVG and paint
   the SHIZA logo. Scoped to :not([aria-label="Password Manager"]) so the PM
   logo is never touched, and body:not(.layout_frontend) so login is excluded. */
body:not(.layout_frontend) bit-nav-logo a:not([aria-label="Password Manager"]) svg {
  display: none !important;
}
body:not(.layout_frontend) bit-nav-logo a:not([aria-label="Password Manager"]) {
  background-image: url(/images/shiza-logo-white.svg) !important;
  background-repeat: no-repeat !important;
  background-position: 0.6875rem center !important;
  background-size: 200px auto !important;
}

/* ===================================================================== */
/* === SECTION 20: dark-theme the in-app SVG illustrations ============== */
/* ===================================================================== */
/* The post-signup "setup-extension" mockup (and other onboarding art) are
   inline SVGs colored with tw-fill-illustration-* / tw-stroke-illustration-*
   classes, which read from --color-illustration-* vars. The app boots on the
   theme_light base (see <html class="theme_light">), so these stayed at the
   light / washed-out defaults on our dark hero. Repaint them to the SHIZA
   dark-violet palette. html.theme_* (0,1,1) outranks the base .theme_* rules
   (0,1,0), and this file loads after styles.css, so the override always wins. */
html, :root, html.theme_light, html.theme_dark {
  --color-illustration-bg-primary: 26 29 53;     /* #1A1D35 main surface   */
  --color-illustration-bg-secondary: 37 41 68;   /* #252944 panel          */
  --color-illustration-bg-tertiary: 53 59 97;    /* #353B61 inputs / popup */
  --color-illustration-logo: 145 107 227;        /* #916BE3 brand violet   */
  --color-illustration-outline: 78 84 138;       /* #4E548A visible stroke */
  --color-illustration-tertiary: 167 139 250;    /* #A78BFA accent         */
}

/* ===================================================================== */
/* === SECTION 21: remove the post-signup "Get the extension" page ====== */
/* ===================================================================== */
/* SHIZA ships no browser extension of its own, and that onboarding page shows
   off-brand mockup videos. shiza-enhance.js redirects /setup-extension -> the
   vault; this hides the component so nothing flashes before the bounce lands. */
/* (removed: setup-extension is now killed at the /vault route guard in main.*.js
   — createUrlTree(["/setup-extension"]) -> !0. NO display:none here: that hid the
   onboarding page's own skip button and trapped users on a blank page.) */