/* Southland Servers — local, persistent Vaultwarden branding. */
html:root, html:root[class] {

  --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;
  --sls-bg: #141716;
  --sls-surface: #1b201e;
  --sls-raised: #242b26;
  --sls-text: #eeede6;
  --sls-muted: #a5ada7;
  --sls-accent: #d5b98c;
  --sls-border: #343c36;
  --color-background: 27 32 30;
  --color-background-alt: 20 23 22;
  --color-background-alt2: 36 43 38;
  --color-background-alt3: 36 43 38;
  --color-background-alt4: 20 23 22;
  --color-primary-100: 43 42 34;
  --color-primary-300: 115 103 80;
  --color-primary-600: 213 185 140;
  --color-primary-700: 228 205 167;
  --color-secondary-100: 52 60 54;
  --color-secondary-300: 92 103 94;
  --color-secondary-500: 146 155 146;
  --color-secondary-600: 165 173 167;
  --color-secondary-700: 184 190 184;
  --color-text-main: 238 237 230;
  --color-text-muted: 165 173 167;
  --color-text-contrast: 20 23 22;
  --color-text-alt2: 238 237 230;
  --color-hover-default: rgb(213 185 140 / .1);
  --color-marketing-logo: 213 185 140;
  --color-bw-blue: 213 185 140;
  --color-fg-heading: #eeede6;
  --color-fg-body: #eeede6;
  --color-fg-body-subtle: #a5ada7;
  --color-fg-inactive: #808c82;
  --color-fg-contrast: #141716;
  --color-fg-brand: #d5b98c;
  --color-fg-brand-soft: #c1a375;
  --color-fg-brand-strong: #e4cda7;
  --color-bg-primary: #1b201e;
  --color-bg-secondary: #141716;
  --color-bg-tertiary: #141716;
  --color-bg-quaternary: #242b26;
  --color-bg-inactive: #242b26;
  --color-bg-brand-softer: #24251f;
  --color-bg-brand-soft: #2b2a22;
  --color-bg-brand-medium: #5c533e;
  --color-bg-brand: #d5b98c;
  --color-bg-brand-strong: #e4cda7;
  --color-bg-brand-stronger: #f0dfc2;
  --color-border-muted: #242b26;
  --color-border-light: #343c36;
  --color-border-base: #343c36;
  --color-border-strong: #5c675e;
  --color-border-stronger: #a5ada7;
  --color-border-buffer: #141716;
  --color-border-brand-soft: #736750;
  --color-border-brand: #d5b98c;
  --color-border-brand-strong: #e4cda7;
  --color-border-focus: #d5b98c;
  --color-nav-fg-primary: #eeede6;
  --color-nav-fg-secondary: #a5ada7;
  --color-nav-bg-primary: #141716;
  --color-nav-bg-secondary: #1b201e;
  --color-nav-bg-primary-strong: #343c36;
  --color-nav-bg-secondary-strong: #343c36;
  --color-nav-bg-primary-hover: #242b26;
  --color-nav-bg-secondary-hover: #242b26;
  --color-nav-border-primary: #343c36;
  --color-nav-border-secondary: #343c36;
  --color-nav-border-primary-focus: #d5b98c;
  --color-nav-border-secondary-focus: #d5b98c;
  --tw-ring-offset-color: #141716;
}
html:root body { background: var(--sls-bg); color: var(--sls-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html:root body :is(button,input,select,textarea) { font-family: inherit; color-scheme: dark; }
html:root body :is(h1,h2) { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.025em; }
html { scrollbar-color: #5c675e #141716; }
::selection { background: #5c533e; color: #fff; }
html:root body :is(bit-base-card,bit-dialog) { border-radius: 6px !important; box-shadow: none; }
html:root body :is([bitbutton],[biticonbutton],[bitfieldcontainer]) { border-radius: 4px; }
html:root body [bitfieldcontainer] { min-height: 44px; }
html:root body hr { border-color: var(--sls-border); }

/* The application retains all its native forms, validation and navigation. */
html:root auth-anon-layout bit-landing-header header {
  min-height: 76px;
  padding: 0 max(24px, calc((100vw - 1160px) / 2));
  border-bottom: 1px solid var(--sls-border);
  background: var(--sls-bg);
}
html:root auth-anon-layout bit-landing-header header > a { width: auto; padding: 14px 0; }
html:root auth-anon-layout bit-landing-header bit-svg { align-items: center; justify-content: flex-start; gap: 12px; }
html:root auth-anon-layout bit-landing-header bit-svg > svg,
html:root body bit-nav-logo bit-svg > svg { display: none !important; }
html:root auth-anon-layout bit-landing-header bit-svg::before,
html:root body bit-nav-logo bit-svg::before {
  content: ""; display: block; flex: 0 0 44px; width: 44px; height: 44px;
  background: url("SLS_Vaultwarden.png?v=eb94fc83d644") center / contain no-repeat;
  border-radius: 6px;
}
html:root auth-anon-layout bit-landing-header bit-svg::after {
  content: "Southland Servers Group\a Vaultwarden"; white-space: pre;
  color: var(--sls-text); font: 500 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html:root auth-anon-layout bit-landing-content > div { padding-top: clamp(36px, 7vh, 76px); }
html:root auth-anon-layout bit-landing-hero bit-svg > svg { display: none !important; }
html:root auth-anon-layout bit-landing-hero bit-svg::before {
  content: ""; display: block; width: 96px; height: 96px;
  background: url("SLS_Vaultwarden.png?v=eb94fc83d644") center / contain no-repeat;
  border-radius: 10px;
}
html:root auth-anon-layout bit-landing-hero h1 { font-size: 40px !important; margin-top: 20px; }
html:root auth-anon-layout bit-landing-card bit-base-card {
  background: var(--sls-surface); border: 1px solid var(--sls-border); padding: 30px;
}
html:root auth-anon-layout bit-landing-footer { border-top: 1px solid var(--sls-border); }
html:root auth-anon-layout bit-landing-footer::before {
  content: "Southland Servers Group · Private password vault"; display: block;
  text-align: center; color: var(--sls-accent); padding: 24px 20px 0; font-size: 12px;
}
/* Keep Southland's plain background by hiding only the landing artwork. */
html:root body bit-landing-layout > div > div:has(> bit-svg[aria-hidden="true"]) { display: none !important; }
/* Loading logo and the expanded/collapsed vault navigation use the same supplied art. */
html:root body app-root img.new-logo-themed {
  content: url("SLS_Vaultwarden.png?v=eb94fc83d644") !important; object-fit: contain;
  width: 64px !important; height: 64px !important;
}
html:root body bit-nav-logo bit-svg { align-items: center; justify-content: flex-start; gap: 10px; overflow: hidden; }
html:root body bit-nav-logo bit-svg::after {
  content: "Southland\a Vaultwarden"; white-space: pre;
  color: var(--sls-text); font: 500 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html:root body #bit-side-nav[style*="4.5rem"] bit-nav-logo bit-svg::after { display: none; }
@media (max-width: 639px) {
  html:root auth-anon-layout bit-landing-header header { min-height: 68px; padding: 0 20px; }
  html:root auth-anon-layout bit-landing-header bit-svg::after { font-size: 13px; }
  html:root auth-anon-layout bit-landing-hero h1 { font-size: 34px !important; }
  html:root auth-anon-layout bit-landing-hero bit-svg::before { width: 80px; height: 80px; }
  html:root auth-anon-layout bit-landing-card bit-base-card { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html:root body :is(button,input,select,textarea) { transition: none !important; }
}