/* THE STANDARD - Vaultwarden Theme v10 */
/* Light: white nav, clean card, red accents (unchanged from v9.1). */
/* NEW: proper Dark Mode — dark surfaces, brighter red, white logo silhouettes. */
/* Web vault stamps html.theme_light / html.theme_dark at runtime; dark rules key off that. */

/* ===== 1. HIDE BRANDING ===== */
bit-svg,
img[alt="Vaultwarden"],
img[src*="vaultwarden"],
img[src*="bitwarden"],
img.new-logo-themed,
[class*="logo-themed"],
[class*="tw-opacity-[.11]"] {
  display: none !important;
}

/* ===== 2. LOGO ===== */
a[class*="tw-w-32"]::before {
  content: "";
  display: block;
  width: 160px;
  height: 40px;
  background: url("/theme/text-logo.png") no-repeat center/contain;
  margin: 0 auto 8px auto;
}

body.layout_frontend [class*="tw-size-20"]::before,
body.layout_frontend [class*="tw-size-24"]::before {
  content: "";
  display: block;
  width: 52px;
  height: 52px;
  margin: 8px auto;
  background: url("/theme/logo.png") no-repeat center/contain;
}

body.layout_frontend [class*="tw-size-20"],
body.layout_frontend [class*="tw-size-24"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Dark: both logos are near-black artwork — render as white silhouettes */
html.theme_dark a[class*="tw-w-32"]::before,
html.theme_dark body.layout_frontend [class*="tw-size-20"]::before,
html.theme_dark body.layout_frontend [class*="tw-size-24"]::before {
  filter: brightness(0) invert(1);
}

/* ===== 3. PAGE ===== */
body.layout_frontend {
  background-color: #FAFAFA !important;
}

html.theme_dark body.layout_frontend {
  background-color: #121215 !important;
}

/* ===== 4. CARD — shadow only, no borders ===== */
bit-base-card {
  background-color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 8px 24px rgba(0,0,0,0.05) !important;
  border-radius: 4px !important;
}

html.theme_dark bit-base-card {
  background-color: #1E1E23 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 12px 32px rgba(0,0,0,0.4) !important;
}

/* ===== 5. NAV BAR — white in light, charcoal in dark ===== */
:root {
  --color-nav-bg-primary: #FFFFFF !important;
  --color-nav-bg-primary-strong: #F4F4F4 !important;
  --color-nav-bg-primary-hover: rgba(0,0,0,0.04) !important;
  --color-nav-bg-primary-hover-strong: rgba(0,0,0,0.08) !important;
  --color-nav-fg-primary: #1A1A1A !important;
  --color-nav-border-primary: #E8E8E8 !important;
  --color-nav-border-primary-focus: #C41230 !important;
}

html.theme_dark {
  --color-nav-bg-primary: #18181C !important;
  --color-nav-bg-primary-strong: #202025 !important;
  --color-nav-bg-primary-hover: rgba(255,255,255,0.06) !important;
  --color-nav-bg-primary-hover-strong: rgba(255,255,255,0.12) !important;
  --color-nav-fg-primary: #ECECEE !important;
  --color-nav-border-primary: #2A2A31 !important;
  --color-nav-border-primary-focus: #F55468 !important;
}

/* ===== 6. COLOR TOKENS — replace all blue with red ===== */
:root {
  --color-primary-100: 253 220 226 !important;
  --color-primary-300: 231 100 118 !important;
  --color-primary-600: 196 18 48 !important;
  --color-primary-700: 160 14 38 !important;

  --color-brand-050: #fff0f2 !important;
  --color-brand-100: #ffe0e5 !important;
  --color-brand-200: #ffc0c9 !important;
  --color-brand-300: #ff8a96 !important;
  --color-brand-400: #f55468 !important;
  --color-brand-500: #e6263e !important;
  --color-brand-600: #C41230 !important;
  --color-brand-700: #A00E26 !important;
  --color-brand-800: #7d0b1e !important;
  --color-brand-900: #600916 !important;
}

/* Dark: #C41230 text fails contrast on dark surfaces — shift red tokens brighter */
html.theme_dark {
  --color-primary-100: 96 9 22 !important;
  --color-primary-300: 230 38 62 !important;
  --color-primary-600: 245 84 104 !important;
  --color-primary-700: 255 138 150 !important;
}

/* ===== 7. PRIMARY BUTTONS ===== */
button[class*="tw-bg-bg-brand"],
button[class*="tw-bg-primary-600"],
button[type="submit"],
.vw-continue-login {
  background-color: #C41230 !important;
  border-color: #C41230 !important;
  color: #FFFFFF !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
}

button[class*="tw-bg-bg-brand"]:hover,
button[class*="tw-bg-primary-600"]:hover,
button[type="submit"]:hover,
.vw-continue-login:hover {
  background-color: #A00E26 !important;
  border-color: #A00E26 !important;
}

/* Dark: hover brightens instead of darkens (darker-on-dark reads as disabled) */
html.theme_dark button[class*="tw-bg-bg-brand"]:hover,
html.theme_dark button[class*="tw-bg-primary-600"]:hover,
html.theme_dark button[type="submit"]:hover,
html.theme_dark .vw-continue-login:hover {
  background-color: #E6263E !important;
  border-color: #E6263E !important;
}

/* ===== 8. LINKS ===== */
a,
a[class*="tw-text-primary-600"] {
  color: #C41230 !important;
}

a:hover,
a[class*="tw-text-primary-600"]:hover {
  color: #A00E26 !important;
  text-decoration: underline !important;
}

html.theme_dark a,
html.theme_dark a[class*="tw-text-primary-600"] {
  color: #F55468 !important;
}

html.theme_dark a:hover,
html.theme_dark a[class*="tw-text-primary-600"]:hover {
  color: #FF8A96 !important;
}

/* ===== 9. INPUTS — no focus ring ===== */
*:focus,
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: none !important;
  --tw-ring-color: transparent !important;
}

input:focus,
textarea:focus,
select:focus,
bit-form-field:focus-within input,
bit-form-field:focus-within textarea {
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ===== 10. CHECKBOXES + TOGGLES ===== */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: #C41230 !important;
  border-color: #C41230 !important;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  box-shadow: none !important;
  outline: none !important;
}

[role="switch"][aria-checked="true"],
button[role="switch"][class*="tw-bg-primary"] {
  background-color: #C41230 !important;
}

html.theme_dark input[type="checkbox"]:checked,
html.theme_dark input[type="radio"]:checked,
html.theme_dark [role="switch"][aria-checked="true"],
html.theme_dark button[role="switch"][class*="tw-bg-primary"] {
  background-color: #E6263E !important;
  border-color: #E6263E !important;
}

/* ===== 11. HIDE: Create account + disclaimer ===== */
a[href*="register"],
a[routerlink*="register"],
bit-standalone-footer,
app-footer,
[class*="tw-text-muted"] p,
small[bitTypography],
p[bitTypography*="helper"] {
  display: none !important;
}

/* ===== 12. FOOTER ===== */
body.layout_frontend::after {
  content: "Digital Platform Management · Powered by Vaultwarden";
  display: block;
  text-align: center;
  color: #BBBBBB;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 28px 0 20px 0;
  font-family: system-ui, -apple-system, sans-serif;
}

html.theme_dark body.layout_frontend::after {
  color: #5A5A62;
}

/* ===== BRITTLE SELECTORS =====
   html.theme_dark             — theme class stamped by web vault JS, breaks if renamed
   a[class*="tw-w-32"]         — logo link, breaks if header width class changes
   [class*="tw-size-20/24"]    — login illustration, breaks if size class changes
   [class*="tw-bg-bg-brand"]   — primary button token, breaks if renamed
   [class*="tw-opacity-[.11]"] — watermark hider, breaks if opacity value changes
   bit-standalone-footer       — Vaultwarden footer component name
   --color-nav-*               — nav variables, breaks if Vaultwarden renames tokens
*/