/* Fallen Vault theme: portfolio palette translated to Bitwarden's existing UI. */
:root {
  color-scheme: dark;
  --fallen-bg: #1a0b0b;
  --fallen-surface: #200e0e;
  --fallen-raised: #281313;
  --fallen-hover: #321818;
  --fallen-border: rgba(255, 68, 68, 0.16);
  --fallen-border-strong: rgba(255, 68, 68, 0.3);
  --fallen-text: #fff4f4;
  --fallen-secondary: #d7baba;
  --fallen-muted: #9f7f7f;
  --fallen-accent: #ff4444;
  --fallen-accent-hover: #ff6666;
  --fallen-radius: 8px;
  --fallen-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* Override the client's existing semantic palette in either saved theme mode. */
:root, .theme_light, .theme_dark {
  --color-background: 26 11 11;
  --color-background-alt: 32 14 14;
  --color-background-alt2: 40 19 19;
  --color-background-alt3: 40 19 19;
  --color-background-alt4: 50 24 24;
  --color-primary-100: 74 28 28;
  --color-primary-300: 159 127 127;
  --color-primary-600: 255 68 68;
  --color-primary-700: 255 102 102;
  --color-secondary-100: 50 24 24;
  --color-secondary-300: 83 49 49;
  --color-secondary-500: 115 76 76;
  --color-secondary-600: 159 127 127;
  --color-secondary-700: 215 186 186;
  --color-text-main: 255 244 244;
  --color-text-muted: 159 127 127;
  --color-text-contrast: 26 11 11;
  --color-hover-default: rgb(255 68 68 / 0.1);
  --color-bw-blue: 255 68 68;

  /* New component-library tokens used by navigation, cards, tables, and forms. */
  --color-gray-050: #281313;
  --color-gray-100: #321818;
  --color-gray-200: #432323;
  --color-gray-300: #603030;
  --color-gray-400: #815858;
  --color-gray-500: #9f7f7f;
  --color-gray-600: #d7baba;
  --color-gray-700: #e6cece;
  --color-gray-800: #f2e2e2;
  --color-gray-900: #fff4f4;
  --color-gray-950: #fffafa;
  --color-gray-950-rgb: 255, 250, 250;
  --color-brand-050: #321818;
  --color-brand-100: #432020;
  --color-brand-200: #612727;
  --color-brand-300: #8a3030;
  --color-brand-400: #c13b3b;
  --color-brand-500: #e74343;
  --color-brand-600: #ff4444;
  --color-brand-700: #ff5555;
  --color-brand-800: #ff7777;
  --color-brand-900: #ffaaaa;
  --color-brand-950: #4a1c1c;
  --color-brand-950-rgb: 74, 28, 28;
  --color-fg-white: #fff4f4;
  --color-fg-dark: #1a0b0b;
  --color-fg-contrast: #fff4f4;
  --color-fg-contrast-strong: #d7baba;
  --color-fg-heading: #fff4f4;
  --color-fg-body: #d7baba;
  --color-fg-body-subtle: #b99898;
  --color-fg-inactive: #9f7f7f;
  --color-fg-brand-soft: #ffaaaa;
  --color-fg-brand: #ff6666;
  --color-fg-brand-strong: #ff4444;
  --color-bg-white: #200e0e;
  --color-bg-dark: #170909;
  --color-bg-primary: #1a0b0b;
  --color-bg-secondary: #200e0e;
  --color-bg-tertiary: #281313;
  --color-bg-quaternary: #321818;
  --color-bg-inactive: #321818;
  --color-bg-contrast-soft: #432323;
  --color-bg-contrast: #321818;
  --color-bg-contrast-strong: #281313;
  --color-bg-brand-softer: #281313;
  --color-bg-brand-soft: #321818;
  --color-bg-brand-medium: #432020;
  --color-bg-brand: #ff4444;
  --color-bg-brand-strong: #e74343;
  --color-bg-brand-stronger: #c13b3b;
  --color-bg-hover: rgba(255, 68, 68, 0.1);
  --color-bg-hover-contrast: rgba(255, 244, 244, 0.08);
  --color-bg-overlay: rgba(15, 5, 5, 0.72);
  --color-border-muted: #281313;
  --color-border-light: #321818;
  --color-border-base: rgba(255, 68, 68, 0.16);
  --color-border-strong: rgba(255, 68, 68, 0.3);
  --color-border-stronger: #603030;
  --color-border-buffer: #200e0e;
  --color-border-brand-soft: #612727;
  --color-border-brand: #ff4444;
  --color-border-brand-strong: #ff7777;
  --color-border-focus: #ff6666;
  --color-nav-fg-primary: #fff4f4;
  --color-nav-fg-secondary: #d7baba;
  --color-nav-bg-primary: #1a0b0b;
  --color-nav-bg-secondary: #200e0e;
  --color-nav-bg-primary-strong: #170909;
  --color-nav-bg-secondary-strong: #281313;
  --color-nav-bg-primary-hover: rgba(255, 68, 68, 0.1);
  --color-nav-bg-secondary-hover: rgba(255, 68, 68, 0.08);
  --color-nav-bg-primary-hover-strong: rgba(255, 68, 68, 0.16);
  --color-nav-bg-secondary-hover-strong: rgba(255, 68, 68, 0.12);
  --color-nav-border-primary: rgba(255, 68, 68, 0.16);
  --color-nav-border-secondary: rgba(255, 68, 68, 0.16);
  --color-nav-border-primary-focus: #ff6666;
  --color-nav-border-secondary-focus: #ff6666;
}

html,
body {
  background: var(--fallen-bg) !important;
  color: var(--fallen-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body,
body * {
  scrollbar-color: #603030 var(--fallen-bg);
}

body :is(h1, h2, h3, h4, h5, h6, label, .tw-font-semibold, .tw-font-bold) {
  color: var(--fallen-text);
}

body :is(p, .tw-text-secondary) {
  color: var(--fallen-secondary);
}

body :is(.text-muted, .tw-text-muted) { color: var(--fallen-muted); }

body :is(code, pre, kbd, .tw-font-mono, .font-monospace, input[type="password"],
  .password-value, time) {
  font-family: var(--fallen-mono);
}

img.new-logo-themed,
img.logo { content: url("fallen-vault-lockup.svg"); object-fit: contain; }

img.new-logo-themed { height: auto; }

/* Vault navigation and credential rows from the current client component tree. */
app-side-nav,
bit-nav-logo,
bit-nav-item,
bit-nav-group {
  color: var(--fallen-text);
}

app-vault-filter {
  display: block;
  border-color: var(--fallen-border) !important;
}

app-vault-filter > div,
app-vault-filter [data-testid="filters"] {
  border-color: var(--fallen-border-strong) !important;
  background: var(--fallen-surface);
}

app-vault-filter [data-testid="filters"] > div:first-child {
  background: #281313 !important;
  color: var(--fallen-muted);
  font-family: var(--fallen-mono);
  letter-spacing: 0.08em;
}

app-vault-items bit-table,
app-vault-items table {
  color: var(--fallen-text);
}

app-vault-items thead th {
  background: #200e0e;
  color: var(--fallen-muted);
  font-family: var(--fallen-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

app-vault-items tbody tr {
  border-bottom: 1px solid var(--fallen-border) !important;
  transition: background-color 140ms ease;
}

app-vault-items tbody tr:hover {
  background-color: rgba(255, 68, 68, 0.055) !important;
}

app-item-details-v2 bit-card,
read-only-cipher-card,
bit-dialog,
bit-dialog-content {
  color: var(--fallen-text);
}

app-item-details-v2 bit-card {
  display: block;
  border: 1px solid var(--fallen-border) !important;
  border-radius: 8px !important;
  background: var(--fallen-surface) !important;
  box-shadow: none !important;
}

app-item-details-v2 h2[data-testid="item-name"] {
  letter-spacing: -0.025em;
}

.vw-or-text {
  color: var(--fallen-muted);
  font-family: var(--fallen-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vw-email-continue,
.vw-email-sso,
#masterPassword {
  font-size: 0.95rem;
}

:is(.vw-continue-login, .vw-sso-login, .vw-passkey-login, .vw-other-login) {
  min-height: 42px;
}

.vw-continue-login {
  box-shadow: 0 0 0 1px rgba(255, 68, 68, 0.12);
}

/* Shared app surfaces: navigation, panels, menus, dialogs, and item rows. */
body :is(.sidebar, .sidebar-container, .modal-content, .dropdown-menu, .popover,
  .card, .tw-bg-background, .tw-bg-primary, .tw-bg-secondary, .tw-bg-surface,
  .content-container, .vault-list, .vault-list-container, .list-group-item) {
  background-color: var(--fallen-surface) !important;
  color: var(--fallen-text);
  border-color: var(--fallen-border) !important;
}

body :is(.sidebar, .sidebar-container, .modal-content, .dropdown-menu, .popover,
  .card, .vault-list, .list-group-item) {
  border-radius: var(--fallen-radius);
}

body :is(.sidebar a, .sidebar button, .dropdown-item, .nav-link, .list-group-item,
  button, [role="button"]) {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

body :is(.sidebar a, .sidebar button, .dropdown-item, .nav-link, .list-group-item):hover {
  background-color: var(--fallen-hover) !important;
  color: var(--fallen-text);
}

body :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select,
  .form-control, .form-select, [bitInput]) {
  background-color: #170909 !important;
  border: 1px solid var(--fallen-border-strong) !important;
  border-radius: 6px !important;
  color: var(--fallen-text) !important;
  caret-color: var(--fallen-accent);
}

body :is(input, textarea, select, .form-control, .form-select):focus {
  border-color: var(--fallen-accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.13) !important;
  outline: none;
}

body :is(input, textarea, select)::placeholder {
  color: var(--fallen-muted) !important;
  opacity: 1;
}

body :is(button, .btn, [bitButton]) {
  border-radius: 6px;
}

body :is(.btn-primary, .tw-bg-primary-600, [bitButton="primary"]) {
  background-color: var(--fallen-accent) !important;
  border-color: var(--fallen-accent) !important;
  color: #170909 !important;
}

body :is(.btn-primary, .tw-bg-primary-600, [bitButton="primary"]):hover {
  background-color: var(--fallen-accent-hover) !important;
  border-color: var(--fallen-accent-hover) !important;
}

body a,
body :is(.text-primary, .tw-text-primary, .tw-text-primary-600, .bwi.text-primary) {
  color: var(--fallen-accent-hover);
}

body a:hover { color: var(--fallen-text); }

body :is(hr, .border, .tw-border, .tw-border-b, .tw-border-t, .border-bottom,
  .border-top, .list-group, .table, .table td, .table th) {
  border-color: var(--fallen-border) !important;
}

body :is(.alert, .toast, .notification) {
  background-color: var(--fallen-raised);
  border-color: var(--fallen-border-strong);
  color: var(--fallen-text);
}

body :is(.spinner-border, .bwi-spinner) { color: var(--fallen-accent); }

*:focus-visible {
  outline: 2px solid var(--fallen-accent) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 767px) {
  body :is(.modal-dialog, .modal-content) { border-radius: 8px 8px 0 0; }
}