/* ============================================================
   NovoQuantum Sovereign Vault — Vaultwarden UI override
   Loaded by index.html as /css/vaultwarden.css.
   ------------------------------------------------------------
   Vaultwarden consumes colors as RGB triplets via
   `rgb(var(--color-X) / opacity)`. Hex values DO NOT work for
   legacy tokens — they MUST be space-separated R G B integers.
   The new Figma palette (--color-brand-*) uses hex.
   ============================================================ */

:root,
html,
html.theme_light,
html.theme_dark {
  /* === Backgrounds: zinc-950 / zinc-900 / zinc-800 === */
  --color-background:        9 9 11;
  --color-background-alt:    24 24 27;
  --color-background-alt2:   39 39 42;
  --color-background-alt3:   24 24 27;
  --color-background-alt4:   16 185 129;   /* emerald active-item bg */

  /* === Primary (links, buttons): emerald === */
  --color-primary-100:       6 95 70;
  --color-primary-300:       6 95 70;
  --color-primary-600:       16 185 129;
  --color-primary-700:       52 211 153;

  /* === Secondary: zinc-500 family === */
  --color-secondary-100:     39 39 42;
  --color-secondary-300:     82 82 91;
  --color-secondary-500:     113 113 122;
  --color-secondary-600:     113 113 122;
  --color-secondary-700:     161 161 170;

  /* === Info: kept emerald-shifted === */
  --color-info-100:          6 95 70;
  --color-info-600:          110 231 183;
  --color-info-700:          236 253 245;

  /* === Status semantics: kept usable === */
  --color-success-100:       6 78 59;
  --color-success-600:       16 185 129;
  --color-success-700:       167 243 208;
  --color-danger-100:        127 29 29;
  --color-danger-600:        239 68 68;
  --color-danger-700:        254 226 226;
  --color-warning-100:       120 53 15;
  --color-warning-600:       245 158 11;
  --color-warning-700:       254 243 199;
  --color-notification-100:  120 53 15;
  --color-notification-600:  245 158 11;

  /* === Text: zinc-100 on dark === */
  --color-text-main:         244 244 245;
  --color-text-muted:        161 161 170;
  --color-text-contrast:     9 9 11;
  --color-text-alt2:         244 244 245;
  --color-text-code:         52 211 153;

  /* === Hovers === */
  --color-hover-default:     rgb(16 185 129 / 0.12);
  --color-hover-contrast:    rgb(255 255 255 / 0.10);
  --color-transparent-hover: rgb(16 185 129 / 0.06);

  /* === Logo + accent === */
  --color-marketing-logo:    16 185 129;   /* recolors the Vaultwarden wordmark SVG */
  --color-bw-blue:           16 185 129;   /* recolors literal blue accents */

  /* === Illustrations: tone down (decorative login art) === */
  --color-illustration-outline:       16 185 129;
  --color-illustration-bg-primary:    24 24 27;
  --color-illustration-bg-secondary:  39 39 42;
  --color-illustration-bg-tertiary:   9 9 11;
  --color-illustration-tertiary:      16 185 129;
  --color-illustration-logo:          16 185 129;

  /* === Ring offset === */
  --tw-ring-offset-color:    #09090b;

  /* === New Figma brand palette: emerald scale === */
  --color-brand-050: #ecfdf5;
  --color-brand-100: #d1fae5;
  --color-brand-200: #a7f3d0;
  --color-brand-300: #6ee7b7;
  --color-brand-400: #34d399;
  --color-brand-500: #10b981;
  --color-brand-600: #059669;
  --color-brand-700: #047857;
  --color-brand-800: #065f46;
  --color-brand-900: #064e3b;
  --color-brand-950: #022c22;
}

/* --- Page chrome --- */
html,
html.theme_light,
html.theme_dark,
body,
body.layout_frontend {
  background-color: rgb(var(--color-background)) !important;
  color: rgb(var(--color-text-main)) !important;
}

/* --- Replace the in-app logo via CSS content swap --- */
img.new-logo-themed,
.theme_light img.new-logo-themed,
.theme_dark img.new-logo-themed {
  content: url("../images/logo.svg") !important;
  height: 44px !important;
  width: auto !important;
  filter: drop-shadow(0 0 24px rgba(16, 185, 129, 0.18));
}

/* --- Hide Bitwarden-themed decorative illustrations on login pages
       (large blue Bitwarden character / device illustrations) --- */
.layout_frontend svg[viewBox="0 0 501 226"],
.layout_frontend svg[viewBox="0 0 506 297"] {
  display: none !important;
}

/* --- We do NOT broadly hide bit-callout / app-callout — those are used for
       legitimate UI like the WebAuthn "Touch your key" prompt during 2FA.
       Attribution text in the JS bundle is replaced by string patches in
       scripts/apply-vault-branding.ps1, not by CSS hiding. --- */

/* --- Sovereign accent strip at the bottom of frontend pages --- */
body.layout_frontend::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.45), transparent);
  pointer-events: none;
  z-index: 9999;
}

/* --- Scrollbars --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgb(var(--color-background)); }
::-webkit-scrollbar-thumb { background: rgb(var(--color-background-alt2)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-secondary-300)); }

/* --- Focus rings: emerald --- */
*:focus-visible {
  outline: 2px solid rgb(var(--color-primary-600)) !important;
  outline-offset: 2px;
}

/* --- Headings: tactical italic --- */
h1, h2, h3, h4, h5, h6 {
  color: rgb(var(--color-text-main)) !important;
  letter-spacing: 0.02em;
}

/* ============================================================================
   Modern Bitwarden / Vaultwarden surfaces — minimal, safe coverage.
   Deep selector overrides for buttons/forms were rolled back because they
   broke the login button visibility + interfered with form semantics.
   Vaultwarden's primary button + master-password input stay untouched —
   only the surrounding chrome (background, links, scrollbars, sidebar) is
   restyled. The Sentinel-bot widget in the corner is the *only* feature
   added to the DOM; it does not overlap real UI controls.
   ============================================================================ */

/* App shell background only — safe utility class match. */
.tw-bg-background {
  background-color: rgb(var(--color-background)) !important;
}

/* Links — emerald accent (avoid touching button-like elements) */
a:not(.btn):not([role="button"]):not([role="menuitem"]):not(.bit-nav-item):not(button) {
  color: rgb(var(--color-primary-700));
}
a:not(.btn):not([role="button"]):not([role="menuitem"]):not(.bit-nav-item):not(button):hover {
  color: rgb(var(--color-primary-600));
}

/* --- Sovereign sign-in chrome (login page) --- */
/* Subtle scanline + grid backdrop so the login page reads "NovoQuantum" not "Bitwarden". */
body.layout_frontend {
  background-image:
    radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.08), transparent 55%),
    linear-gradient(rgba(16, 185, 129, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.02) 1px, transparent 1px) !important;
  background-size: auto, 56px 56px, 56px 56px !important;
  background-position: 0 0, 0 0, 0 0 !important;
  background-attachment: fixed !important;
}

/* Login card: stronger edge + emerald rim-light */
.layout_frontend .tw-card,
.layout_frontend [class*="login-card"],
.layout_frontend [class*="auth-card"],
.layout_frontend bit-section,
.layout_frontend .container > .card {
  border: 1px solid rgb(var(--color-background-alt2)) !important;
  background: linear-gradient(180deg, rgba(24, 24, 27, 0.92), rgba(9, 9, 11, 0.92)) !important;
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.08) inset,
    0 24px 60px -24px rgba(0, 0, 0, 0.65),
    0 0 60px -20px rgba(16, 185, 129, 0.15) !important;
  border-radius: 8px !important;
}

/* (Removed: h1::before eyebrow tagline — it pushed real h1 content out of view
    on narrow login cards. The bot widget in the corner already conveys
    "Sentinel watching" without crowding the header.) */

/* --- Inputs: tighter, more "instrument" feeling --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea,
select {
  background-color: rgb(var(--color-background-alt)) !important;
  border: 1px solid rgb(var(--color-background-alt2)) !important;
  color: rgb(var(--color-text-main)) !important;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:focus,
textarea:focus,
select:focus {
  border-color: rgb(var(--color-primary-600)) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
  outline: none !important;
}

/* --- Buttons: explicit, high-contrast styling for the login surface so the
       "Continue" / "Log in" button is always obviously the primary action.
       Modern Vaultwarden's primary button is an Angular `bit-button` with
       `buttontype="primary"`; older / form-based ones use `.btn.primary` or
       just `button[type="submit"]`. Cover both. ---*/
.layout_frontend button[type="submit"],
.layout_frontend button.btn-primary,
.layout_frontend button.btn.primary,
.layout_frontend .bit-button[buttontype="primary"],
.layout_frontend bit-button button,
button[buttontype="primary"],
a.btn.primary {
  background: linear-gradient(180deg, #10b981, #059669) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #022c22 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-shadow: none !important;
  box-shadow: 0 4px 14px -4px rgba(16, 185, 129, 0.5) !important;
  transition: transform 100ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.layout_frontend button[type="submit"]:hover,
.layout_frontend button.btn-primary:hover,
.layout_frontend button.btn.primary:hover,
.layout_frontend .bit-button[buttontype="primary"]:hover,
.layout_frontend bit-button button:hover,
button[buttontype="primary"]:hover,
a.btn.primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 8px 22px -6px rgba(16, 185, 129, 0.7) !important;
  transform: translateY(-1px);
}
.layout_frontend button[type="submit"]:disabled,
button[buttontype="primary"]:disabled {
  opacity: 0.55;
  filter: grayscale(0.3);
  cursor: not-allowed;
}

/* Secondary buttons on the login surface (Use device, SSO, Create account)
   need visible borders so they don't disappear into the card background. */
.layout_frontend button:not([type="submit"]):not(.btn-primary):not(.btn.primary):not([buttontype="primary"]):not(.icon-button):not([appa11ytitle]) {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: rgb(var(--color-text-main));
  font-weight: 500;
  transition: background 120ms ease, border-color 120ms ease;
}
.layout_frontend button:not([type="submit"]):not(.btn-primary):not(.btn.primary):not([buttontype="primary"]):not(.icon-button):not([appa11ytitle]):hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.45);
}

/* --- Top navigation bar: thin emerald rule under it --- */
.layout_frontend header,
nav.navbar,
header.header {
  border-bottom: 1px solid rgba(16, 185, 129, 0.12) !important;
  background: rgba(9, 9, 11, 0.85) !important;
  backdrop-filter: blur(8px);
}

/* --- Tables (Vault list): denser rows + emerald row hover --- */
table tbody tr:hover {
  background-color: rgba(16, 185, 129, 0.06) !important;
}
table thead {
  border-bottom: 1px solid rgb(var(--color-background-alt2)) !important;
}
table thead th {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgb(var(--color-text-muted)) !important;
}

/* --- Toasts / notifications --- */
.toast,
.notification,
[role="status"] {
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
  background: rgba(9, 9, 11, 0.92) !important;
  backdrop-filter: blur(8px);
}

/* --- Hide Bitwarden marketing footer/sidebar nudges --- */
a[href*="bitwarden.com/help"],
a[href*="bitwarden.com/pricing"],
a[href*="bitwarden.com/products"] {
  display: none !important;
}

/* --- Vault item icons: keep neutral, override Bitwarden's blue badge --- */
.cipher-icon,
.org-name-icon,
[class*="cipher-icon"] {
  background-color: rgb(var(--color-background-alt2)) !important;
  border: 1px solid rgba(16, 185, 129, 0.12) !important;
  color: rgb(var(--color-primary-700)) !important;
}

/* --- Master-password reveal eye: emerald --- */
button[appa11ytitle*="password"] i,
button[appA11yTitle*="password"] svg {
  color: rgb(var(--color-primary-600)) !important;
}

/* --- Sentinel watch widget — styles for the interactive bot injected by
       the inline boot script in index.html. The script builds the DOM; this
       CSS handles all visuals. Bot face, popover, animations live here. --- */

#sentinel-bot {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 9998;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  outline: 0;
}
#sentinel-bot:focus-visible #sentinel-bot-face {
  outline: 2px solid rgb(var(--color-primary-600));
  outline-offset: 3px;
}
#sentinel-bot-face {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.32), rgba(16, 185, 129, 0.14));
  border: 1px solid rgba(16, 185, 129, 0.6);
  box-shadow:
    0 0 12px -2px rgba(16, 185, 129, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: sentinel-bot-bob 3.6s ease-in-out infinite;
  transform-origin: center bottom;
}
#sentinel-bot:hover #sentinel-bot-face {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.45), rgba(16, 185, 129, 0.22));
}
.sentinel-bot-antenna {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgb(110, 231, 183);
  box-shadow: 0 0 6px rgba(110, 231, 183, 0.9);
  animation: sentinel-bot-blink 3s ease-in-out infinite;
}
.sentinel-bot-eye {
  position: absolute;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgb(167, 243, 208);
  animation: sentinel-bot-eyeblink 5.5s ease-in-out infinite;
}
.sentinel-bot-eye.left  { left: 6px; }
.sentinel-bot-eye.right { right: 6px; animation-delay: 120ms; }
.sentinel-bot-mouth {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: rgba(167, 243, 208, 0.85);
}

@keyframes sentinel-bot-bob {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-2px) rotate(-1.5deg); }
}
@keyframes sentinel-bot-blink {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.55; transform: translateX(-50%) scale(1.5); }
}
@keyframes sentinel-bot-eyeblink {
  0%, 92%, 96%, 100% { transform: scaleY(1); }
  94%                { transform: scaleY(0.1); }
}

/* Popover speech bubble */
#sentinel-bot-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  width: 260px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.32);
  background: rgba(9, 9, 11, 0.96);
  color: rgb(244, 244, 245);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  font-size: 12px;
  line-height: 1.55;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  backdrop-filter: blur(8px) saturate(120%);
  animation: sentinel-pop 160ms ease-out;
  cursor: default;
}
#sentinel-bot-popover::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 12px;
  width: 9px;
  height: 9px;
  background: rgba(9, 9, 11, 0.96);
  border-left: 1px solid rgba(16, 185, 129, 0.32);
  border-top: 1px solid rgba(16, 185, 129, 0.32);
  transform: rotate(45deg);
}
.sentinel-bot-eyebrow {
  display: block;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(110, 231, 183, 0.85);
  margin-bottom: 6px;
  font-weight: 600;
}
.sentinel-bot-joke {
  display: block;
  color: rgb(244, 244, 245);
}
.sentinel-bot-another {
  margin-top: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(110, 231, 183);
  cursor: pointer;
  transition: color 100ms ease;
}
.sentinel-bot-another:hover { color: rgb(167, 243, 208); }
@keyframes sentinel-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Make sure CSS does NOT mask the master-password input — keep it semantic.
   Vaultwarden's password reveal toggles `type` between password/text; our
   styling reads color from the parent. No special override here intentionally. */