/* VaultKhol theme v2 - Dashlane-style single rail, always dark.
   Jade #0A9B8E | Saffron #E67E22 | Navy #0F2C59 | Canvas #0A1428
   Dark token mapping is copied from the web-vault build itself, then recoloured by the overrides below. */
:root, html.theme_light, html.theme_dark {
  --color-transparent-hover: rgb(255 255 255 / 0.02);
  --color-shadow: 0 0 0;
  --color-background: 32 39 51;
  --color-background-alt: 18 26 39;
  --color-background-alt2: 47 52 61;
  --color-background-alt3: 48 57 70;
  --color-background-alt4: 18 26 39;
  --color-primary-100: 29 46 99;
  --color-primary-300: 26 65 172;
  --color-primary-600: 101 171 255;
  --color-primary-700: 170 195 239;
  --color-secondary-100: 48 57 70;
  --color-secondary-300: 82 91 106;
  --color-secondary-500: 121 128 142;
  --color-secondary-600: 143 152 166;
  --color-secondary-700: 158 167 181;
  --color-success-100: 8 81 15;
  --color-success-600: 107 241 120;
  --color-success-700: 213 243 216;
  --color-danger-100: 149 27 42;
  --color-danger-600: 255 78 99;
  --color-danger-700: 255 236 239;
  --color-warning-100: 142 64 0;
  --color-warning-600: 255 191 0;
  --color-warning-700: 255 244 212;
  --color-info-100: 13 36 123;
  --color-info-600: 121 161 233;
  --color-info-700: 219 229 246;
  --color-notification-100: 117 37 83;
  --color-notification-600: 255 143 208;
  --color-text-main: 243 246 249;
  --color-text-muted: 136 152 181;
  --color-text-contrast: 18 26 39;
  --color-text-alt2: 255 255 255;
  --color-text-code: 255 143 208;
  --color-hover-default: rgb(170 195 239 / 0.1);
  --color-hover-contrast: rgb(0 0 0 / 0.15);
  --color-marketing-logo: 255 255 255;
  --color-bw-blue: 23 93 220;
  --tw-ring-offset-color: #1f242e;
  --color-illustration-outline: 23 93 220;
  --color-illustration-bg-primary: 170 195 239;
  --color-illustration-bg-secondary: 121 161 233;
  --color-illustration-bg-tertiary: 243 246 249;
  --color-illustration-tertiary: 255 191 0;
  --color-illustration-logo: 255 255 255;
  /* ========================================
   * SEMANTIC FOREGROUND COLORS (Dark Mode Overrides)
   * ======================================== */

  /* Neutral Foreground */
  --color-fg-contrast: var(--color-gray-900);
  --color-fg-contrast-strong: var(--color-gray-600);
  --color-fg-heading: var(--color-gray-050);
  --color-fg-body: var(--color-gray-200);
  --color-fg-body-subtle: var(--color-gray-400);
  --color-fg-inactive: var(--color-gray-600);
  /* Brand Foreground */
  --color-fg-brand-soft: var(--color-brand-500);
  --color-fg-brand: var(--color-brand-400);
  --color-fg-brand-strong: var(--color-brand-200);
  /* Status Foreground */
  --color-fg-success: var(--color-green-400);
  --color-fg-success-strong: var(--color-green-200);
  --color-fg-danger: var(--color-red-400);
  --color-fg-danger-strong: var(--color-red-200);
  --color-fg-warning: var(--color-orange-400);
  --color-fg-warning-strong: var(--color-orange-200);
  --color-fg-sensitive: var(--color-pink-300);
  /* Accent Foreground */
  --color-fg-accent-primary-soft: var(--color-teal-400);
  --color-fg-accent-primary: var(--color-teal-300);
  --color-fg-accent-primary-strong: var(--color-teal-100);
  --color-fg-accent-secondary-soft: var(--color-coral-500);
  --color-fg-accent-secondary: var(--color-coral-400);
  --color-fg-accent-secondary-strong: var(--color-coral-100);
  --color-fg-accent-tertiary-soft: var(--color-purple-500);
  --color-fg-accent-tertiary: var(--color-purple-400);
  --color-fg-accent-tertiary-strong: var(--color-purple-100);
  /* ========================================
   * SEMANTIC BACKGROUND COLORS (Dark Mode Overrides)
   * ======================================== */

  /* Neutral Background */
  --color-bg-primary: var(--color-gray-900);
  --color-bg-secondary: var(--color-gray-800);
  --color-bg-tertiary: var(--color-gray-950);
  --color-bg-quaternary: var(--color-gray-700);
  --color-bg-inactive: var(--color-gray-950);
  /* Gray Background */
  --color-bg-gray: var(--color-gray-500);
  --color-bg-gray-strong: var(--color-gray-400);
  /* Contrast Background */
  --color-bg-contrast-soft: var(--color-gray-200);
  --color-bg-contrast: var(--color-gray-100);
  --color-bg-contrast-strong: var(--color-white);
  /* Brand Background */
  --color-bg-brand-softer: var(--color-brand-950);
  --color-bg-brand-soft: var(--color-brand-900);
  --color-bg-brand-medium: var(--color-brand-800);
  --color-bg-brand: var(--color-brand-400);
  --color-bg-brand-strong: var(--color-brand-200);
  --color-bg-brand-stronger: var(--color-brand-100);
  /* Status Background */
  --color-bg-success-soft: var(--color-green-950);
  --color-bg-success-medium: var(--color-green-900);
  --color-bg-success: var(--color-green-400);
  --color-bg-success-strong: var(--color-green-200);
  --color-bg-danger-soft: var(--color-red-950);
  --color-bg-danger-medium: var(--color-red-900);
  --color-bg-danger: var(--color-red-400);
  --color-bg-danger-strong: var(--color-red-200);
  --color-bg-warning-soft: var(--color-orange-950);
  --color-bg-warning-medium: var(--color-orange-900);
  --color-bg-warning: var(--color-orange-400);
  --color-bg-warning-strong: var(--color-orange-200);
  /* Accent Background */
  --color-bg-accent-primary-soft: var(--color-teal-950);
  --color-bg-accent-primary-medium: var(--color-teal-900);
  --color-bg-accent-primary: var(--color-teal-400);
  --color-bg-accent-primary-strong: var(--color-teal-200);
  --color-bg-accent-secondary-soft: var(--color-coral-950);
  --color-bg-accent-secondary-medium: var(--color-coral-900);
  --color-bg-accent-secondary: var(--color-coral-400);
  --color-bg-accent-tertiary-soft: var(--color-purple-950);
  --color-bg-accent-tertiary-medium: var(--color-purple-900);
  --color-bg-accent-tertiary: var(--color-purple-600);
  /* Avatar Background */
  --color-bg-avatar-teal: var(--color-teal-700);
  --color-bg-avatar-teal-hover: var(--color-teal-600);
  --color-bg-avatar-coral: var(--color-coral-700);
  --color-bg-avatar-coral-hover: var(--color-coral-600);
  --color-bg-avatar-brand: var(--color-brand-700);
  --color-bg-avatar-brand-hover: var(--color-brand-600);
  --color-bg-avatar-green: var(--color-green-700);
  --color-bg-avatar-green-hover: var(--color-green-600);
  --color-bg-avatar-purple: var(--color-purple-700);
  --color-bg-avatar-purple-hover: var(--color-purple-600);
  /* Hover & Overlay */
  --color-bg-hover: rgba(var(--color-white-rgb), 0.05);
  --color-bg-hover-contrast: rgba(var(--color-gray-950-rgb), 0.05);
  --color-bg-overlay: rgba(var(--color-gray-950-rgb), 0.85);
  /* ========================================
   * SEMANTIC BORDER COLORS (Dark Mode Overrides)
   * ======================================== */

  /* Neutral Border */
  --color-border-muted: var(--color-gray-900);
  --color-border-light: var(--color-gray-800);
  --color-border-base: var(--color-gray-700);
  --color-border-strong: var(--color-gray-500);
  --color-border-stronger: var(--color-gray-400);
  --color-border-buffer: var(--color-gray-950);
  /* Brand Border */
  --color-border-brand-soft: var(--color-brand-800);
  --color-border-brand: var(--color-brand-400);
  --color-border-brand-strong: var(--color-brand-200);
  /* Status Border */
  --color-border-success-soft: var(--color-green-800);
  --color-border-success: var(--color-green-400);
  --color-border-success-strong: var(--color-green-200);
  --color-border-danger-soft: var(--color-red-800);
  --color-border-danger: var(--color-red-400);
  --color-border-danger-strong: var(--color-red-200);
  --color-border-warning-soft: var(--color-orange-800);
  --color-border-warning: var(--color-orange-400);
  --color-border-warning-strong: var(--color-orange-200);
  /* Accent Border */
  --color-border-accent-primary-soft: var(--color-teal-800);
  --color-border-accent-secondary-soft: var(--color-coral-800);
  --color-border-accent-secondary: var(--color-coral-500);
  --color-border-accent-tertiary-soft: var(--color-purple-800);
  --color-border-accent-tertiary: var(--color-purple-500);
  /* Focus Border */
  --color-border-focus: var(--color-white);
  --color-border-focus-contrast: var(--color-black);
  /**========================================
    * SIDENAV CUSTOM COLORS (Dark mode)
    * ======================================== */

  /* Sidenav Foreground */
  --color-nav-fg-primary: var(--color-white);
  --color-nav-fg-secondary: var(--color-white);
  /* Sidenav Background */
  --color-nav-bg-primary: var(--color-gray-800);
  --color-nav-bg-secondary: var(--color-gray-800);
  --color-nav-bg-primary-strong: var(--color-gray-600);
  --color-nav-bg-secondary-strong: var(--color-gray-600);
  /* Sidenav Hover */
  --color-nav-bg-primary-hover: rgba(var(--color-gray-400-rgb), 0.2);
  --color-nav-bg-secondary-hover: rgba(var(--color-gray-400-rgb), 0.2);
  --color-nav-bg-primary-hover-strong: rgba(var(--color-gray-400-rgb), 0.6);
  --color-nav-bg-secondary-hover-strong: rgba(var(--color-gray-400-rgb), 0.6);
  /* Sidenav Border */
  --color-nav-border-primary: var(--color-gray-700);
  --color-nav-border-secondary: var(--color-gray-700);
  --color-nav-border-primary-focus: var(--color-white);
  --color-nav-border-secondary-focus: var(--color-white);
  color-scheme: dark;
  --vk-primary: #0A9B8E;
  --vk-accent: #E67E22;
  --vk-navy: #0F2C59;
  --vk-canvas: #0A1428;
  --vk-surface: #0D1F3F;
  --vk-surface-2: #112851;
  --vk-border: #1B3566;
  --vk-radius: 12px;
  --color-gray-050: #F4F7FB;
  --color-gray-100: #E8EEF7;
  --color-gray-200: #D3DEEE;
  --color-gray-300: #B4C4DD;
  --color-gray-400: #8CA3C7;
  --color-gray-500: #5B759F;
  --color-gray-600: #2F4A7D;
  --color-gray-700: #1B3566;
  --color-gray-800: #0F2C59;
  --color-gray-900: #0D1F3F;
  --color-gray-950: #0A1428;
  --color-gray-400-rgb: 140, 163, 199;
  --color-gray-950-rgb: 10, 20, 40;
  --color-brand-050: #E6F7F5;
  --color-brand-100: #C6EEE9;
  --color-brand-200: #8FE0D6;
  --color-brand-300: #52CBBE;
  --color-brand-400: #0A9B8E;
  --color-brand-500: #088579;
  --color-brand-600: #067063;
  --color-brand-700: #055B51;
  --color-brand-800: #04473F;
  --color-brand-900: #03332E;
  --color-brand-950: #021F1C;
  --color-brand-950-rgb: 2, 31, 28;
  --color-orange-050: #FFF6EC;
  --color-orange-100: #FDE7D0;
  --color-orange-200: #F9CFA5;
  --color-orange-300: #F2AE6E;
  --color-orange-400: #E67E22;
  --color-orange-500: #CB6A14;
  --color-orange-600: #B05A10;
  --color-orange-700: #8E470C;
  --color-orange-800: #6F3809;
  --color-orange-900: #4F2807;
  --color-orange-950: #331A04;
  --color-border-focus: #E67E22;
  --color-nav-bg-primary-strong: #08857A;
  --color-nav-bg-secondary-strong: #08857A;
  --color-nav-bg-primary-hover: rgba(10, 155, 142, 0.18);
  --color-nav-bg-secondary-hover: rgba(10, 155, 142, 0.18);
  --color-nav-bg-primary-hover-strong: rgba(10, 155, 142, 0.45);
  --color-nav-bg-secondary-hover-strong: rgba(10, 155, 142, 0.45);
  --color-nav-border-primary-focus: #E67E22;
  --color-nav-border-secondary-focus: #E67E22;
  --color-hover-default: rgb(10 155 142 / 0.12);
  --color-marketing-logo: 255 255 255;
  --color-illustration-outline: 10 155 142;
  --color-illustration-bg-primary: 143 224 214;
  --color-illustration-bg-secondary: 82 203 190;
  --color-illustration-bg-tertiary: 232 247 245;
  --color-illustration-tertiary: 230 126 34;
  --color-illustration-logo: 255 255 255;
  --color-background: 10 20 40;
  --color-background-alt: 13 31 63;
  --color-background-alt2: 15 44 89;
  --color-background-alt3: 17 40 81;
  --color-background-alt4: 7 14 28;
  --color-text-main: 232 240 250;
  --color-text-muted: 143 163 194;
  --color-text-contrast: 10 20 40;
  --color-text-alt2: 255 255 255;
  --color-text-code: 255 170 100;
  --color-primary-100: 12 58 70;
  --color-primary-300: 22 120 120;
  --color-primary-600: 10 155 142;
  --color-primary-700: 92 214 202;
  --color-secondary-100: 18 40 78;
  --color-secondary-300: 40 70 120;
  --color-secondary-500: 98 126 170;
  --color-secondary-600: 128 152 190;
  --color-secondary-700: 165 185 215;
  --color-warning-100: 70 40 12;
  --color-warning-600: 230 126 34;
  --color-warning-700: 247 190 130;
  --color-danger-100: 70 20 30;
  --color-danger-600: 255 90 110;
  --color-danger-700: 255 205 212;
  --color-success-100: 10 60 45;
  --color-success-600: 60 200 140;
  --color-success-700: 170 240 205;
  --color-info-100: 20 45 100;
  --color-info-600: 120 160 235;
  --color-info-700: 200 218 248;
  --color-shadow: 0 0 0;  --color-fg-brand: #52CBBE;
}

html, body { background: var(--vk-canvas) !important; }
::selection { background: rgb(10 155 142 / .45); }

/* Focus states = saffron */
:focus-visible {
  outline: 2px solid var(--vk-accent) !important;
  outline-offset: 2px;
  --tw-ring-color: rgb(230 126 34 / 1) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--vk-accent) !important;
  box-shadow: 0 0 0 3px rgb(230 126 34 / .25) !important;
}

/* Single navigation rail */
app-side-nav { border-inline-end: 1px solid var(--vk-border); }
bit-nav-item a, bit-nav-item button, bit-nav-group button {
  border-radius: 999px !important;
  transition: background-color .15s ease, color .15s ease;
}
bit-nav-item a.active, bit-nav-item a[aria-current="page"],
bit-nav-item .active, bit-nav-item [aria-current="page"] { color: #fff !important; }

/* Modals use the navy trust colour */
bit-dialog, [role="dialog"], .cdk-overlay-pane > * {
  border: 1px solid var(--vk-navy) !important;
  border-radius: var(--vk-radius) !important;
}

/* Filters panel: navy header instead of near-black */
[data-testid="filters"] {
  border-radius: var(--vk-radius) !important;
  border-color: var(--vk-border) !important;
  overflow: hidden;
}
[data-testid="filters"] > div:first-child { background-color: var(--vk-navy) !important; }

/* Vault items as navy card rows */
table:has(app-vault-icon) {
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  background: transparent !important;
}
table:has(app-vault-icon) thead th { border: 0 !important; background: transparent !important; }
tr:has(app-vault-icon) { background: transparent !important; }
tr:has(app-vault-icon) > td {
  background: var(--vk-navy) !important;
  border: 0 solid var(--vk-border) !important;
  border-block-width: 1px !important;
  padding: 12px 14px !important;
  vertical-align: middle;
  transition: background-color .15s ease, border-color .15s ease;
}
tr:has(app-vault-icon) > td:first-child {
  border-inline-start-width: 1px !important;
  border-radius: var(--vk-radius) 0 0 var(--vk-radius);
}
tr:has(app-vault-icon) > td:last-child {
  border-inline-end-width: 1px !important;
  border-radius: 0 var(--vk-radius) var(--vk-radius) 0;
}
tr:has(app-vault-icon):hover > td {
  background: #153A73 !important;
  border-color: rgb(10 155 142 / .6) !important;
}
tr:has(app-vault-icon) a { color: #5CD6CA !important; }
tr:has(app-vault-icon) small { color: rgb(var(--color-text-muted)); }

/* Rounded 28px favicons */
app-vault-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
app-vault-icon img, app-vault-icon i, app-vault-icon .bwi {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--vk-navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}

* { scrollbar-color: var(--vk-border) transparent; scrollbar-width: thin; }
/* hide stock logo until JS swaps it (prevents Vaultwarden flash) */
svg:has(> path.tw-fill-marketing-logo):not([data-vk]), svg:has(> g path.tw-fill-marketing-logo):not([data-vk]) { visibility: hidden; }