.providers-2fa-3,.providers-2fa-1,app-root a[routerlink="/signup"],ng-dropdown-panel div.ng-dropdown-panel-items div:has(>[title=DuckDuckGo]),ng-dropdown-panel div.ng-dropdown-panel-items div:has(>[title="Firefox Relay"]),app-user-layout app-danger-zone button:nth-child(1),bit-nav-logo bit-nav-item .bwi-shield,bit-dialog div.tw-ml-4:has(bit-form-control input),bit-dialog div.tw-col-span-4:has(input[formcontrolname*=access],input[formcontrolname*=manage]),app-security>app-two-factor-setup>form,app-org-reports-home>app-report-list>div.tw-inline-grid>div:nth-child(6),app-org-account form.ng-untouched:nth-child(5),app-organization-plans>form>bit-section:nth-child(2),bit-nav-item[route="settings/two-factor"],a[href$="/settings/two-factor"],.vw-other-login,.vw-or-text,.vw-passkey-login,app-user-layout app-password-settings app-webauthn-login-settings,.vw-continue-login,.vw-email-continue,a[href$="/settings/sponsored-families"],bit-nav-item[route="settings/subscription"],.vw-hide,head{display:none !important}bit-nav-logo bit-nav-item a:before{content:"";background-image:url("../images/icon-white.svg");background-repeat:no-repeat;background-position:center center;height:32px;display:block}

/* CMDTek visual theme */
/* CMDTek Vaultwarden branding — maintained from /opt/vaultwarden/branding. */
:root,
.theme_light,
.theme_dark {
  --color-transparent-hover: rgb(0 191 120 / 0.12);
  --color-shadow: 8 17 22;

  --color-background: 25 34 41;        /* #192229 */
  --color-background-alt: 42 49 54;    /* #2A3136 */
  --color-background-alt2: 0 174 112;  /* #00AE70 */
  --color-background-alt3: 25 34 41;
  --color-background-alt4: 19 26 31;

  --color-primary-100: 213 251 235;
  --color-primary-300: 0 191 120;      /* #00BF78 */
  --color-primary-600: 0 174 112;      /* #00AE70 */
  --color-primary-700: 0 158 105;      /* #009E69 */

  --color-secondary-100: 42 49 54;
  --color-secondary-300: 72 84 92;
  --color-secondary-500: 159 174 181;
  --color-secondary-600: 184 196 200;
  --color-secondary-700: 215 224 228;

  --color-info-100: 25 34 41;
  --color-info-600: 0 191 120;
  --color-info-700: 0 158 105;

  --color-success-100: 213 251 235;
  --color-success-600: 0 174 112;
  --color-success-700: 0 158 105;

  --color-text-main: 244 247 248;
  --color-text-muted: 184 196 200;
  --color-text-contrast: 255 255 255;
  --color-text-alt2: 255 255 255;
  --color-text-code: 0 191 120;

  --color-hover-default: rgb(0 191 120 / 0.15);
  --color-hover-contrast: rgb(255 255 255 / 0.14);
  --color-marketing-logo: 255 255 255;
  --color-bw-blue: 0 174 112;
  --tw-ring-offset-color: #192229;

  --color-illustration-outline: 184 196 200;
  --color-illustration-bg-primary: 42 49 54;
  --color-illustration-bg-secondary: 0 158 105;
  --color-illustration-bg-tertiary: 25 34 41;
  --color-illustration-tertiary: 0 191 120;
  --color-illustration-logo: 0 174 112;
}

html,
body,
.layout_frontend,
.tw-bg-background,
.tw-bg-background-alt {
  background-color: #192229 !important;
}

/* Login header: use the CMDTek favicon, not a wordmark. */
.theme_light img.new-logo-themed,
.theme_dark img.new-logo-themed {
  content: url("../images/cmdtek-icon-512.png") !important;
  width: 136px !important;
  max-width: calc(100vw - 40px);
  height: 136px !important;
  object-fit: contain;
}

/* Navigation brand: replace Vaultwarden's rendered shield/SVG with the
   Command Technologies wordmark. */
bit-nav-logo {
  display: block !important;
  min-width: 252px !important;
}

bit-nav-logo bit-nav-item > div,
bit-nav-logo bit-nav-item a {
  width: 252px !important;
  min-width: 252px !important;
  height: 73px !important;
  padding: 10px 14px !important;
}

bit-nav-logo bit-nav-item a > i,
bit-nav-logo bit-nav-item a > svg,
bit-nav-logo bit-nav-item a > span {
  display: none !important;
}

bit-nav-logo bit-nav-item a:before {
  content: "" !important;
  display: block !important;
  width: 224px !important;
  height: 53px !important;
  background-image: url("../images/cmdtek-logo-dark.svg") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
}

/* Anonymous login view. The header and hero are direct bit-svg components,
   not the navigation item structure above. */
bit-landing-header header > a > bit-svg {
  display: none !important;
}

bit-landing-header header > a {
  display: block !important;
  width: 260px !important;
  height: 92px !important;
  min-width: 260px !important;
  padding: 16px 0 !important;
  background-image: url("../images/cmdtek-logo-dark.svg") !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
}

/* This is the Vaultwarden icon immediately above the Log In heading. */
bit-landing-hero > div > div:has(> bit-svg) {
  width: 136px !important;
  height: 136px !important;
  min-width: 136px !important;
  min-height: 136px !important;
  margin-bottom: 14px !important;
  background-image: url("../images/cmdtek-icon-512.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

bit-landing-hero > div > div:has(> bit-svg) > bit-svg {
  display: none !important;
}

/* Navigation view: this is the actual component element inside the side-nav. */
bit-nav-logo > div > a > bit-svg {
  display: none !important;
}

bit-nav-logo > div > a {
  background-image: url("../images/cmdtek-logo-dark.svg") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: calc(100% - 28px) auto !important;
}

/* Keep the original functional custom overrides and make SSO actions CMDTek green. */
button.btn-primary,
.btn-primary,
.tw-bg-primary-600,
.tw-bg-primary-700 {
  background-color: #00AE70 !important;
  border-color: #00AE70 !important;
  color: #ffffff !important;
}

button.btn-primary:hover,
.btn-primary:hover,
.tw-bg-primary-600:hover,
.tw-bg-primary-700:hover {
  background-color: #009E69 !important;
  border-color: #009E69 !important;
}

a,
.tw-text-primary-600,
.tw-text-primary-700 {
  color: #00BF78 !important;
}

a:hover,
a:focus {
  color: #00AE70 !important;
}

input:focus,
textarea:focus,
select:focus,
.ng-select.ng-select-focused > .ng-select-container {
  border-color: #00BF78 !important;
  box-shadow: 0 0 0 0.2rem rgb(0 191 120 / 0.25) !important;
}

/* Vault Locked workflow. Angular removes the bitButton attribute at runtime;
   these buttons consume the semantic CSS variables below. Scope them to app-lock
   so no other page inherits the lock-screen palette. */
/* The rendered lock component's host is <bit-lock>, not <app-lock>. */
bit-lock,
bit-master-password-lock {
  --color-bg-brand: #00AE70;
  --color-bg-brand-strong: #009E69;
  --color-border-brand: #00AE70;
  --color-border-brand-strong: #009E69;
  --color-fg-brand: #00BF78;
  --color-fg-brand-strong: #00AE70;

  --color-bg-secondary: #2A3136;
  --color-bg-quaternary: #364149;
  --color-border-base: #00AE70;
  --color-fg-heading: #f4f7f8;
  --color-fg-disabled: #9faeb5;
  --color-bg-disabled: #2A3136;
  --color-border-focus: #00BF78;
}

/* Explicitly override the runtime classes used by each locked-vault button. */
bit-lock button.tw-bg-bg-brand,
bit-master-password-lock button.tw-bg-bg-brand {
  background-color: #00AE70 !important;
  border-color: #00AE70 !important;
  color: #ffffff !important;
}

bit-lock button.tw-bg-bg-brand:hover,
bit-lock button.tw-bg-bg-brand:focus-visible,
bit-lock button.tw-bg-bg-brand[aria-expanded="true"],
bit-master-password-lock button.tw-bg-bg-brand:hover,
bit-master-password-lock button.tw-bg-bg-brand:focus-visible,
bit-master-password-lock button.tw-bg-bg-brand[aria-expanded="true"] {
  background-color: #009E69 !important;
  border-color: #009E69 !important;
  color: #ffffff !important;
}

bit-lock button.tw-bg-bg-secondary,
bit-master-password-lock button.tw-bg-bg-secondary {
  background-color: #2A3136 !important;
  border-color: #00AE70 !important;
  color: #f4f7f8 !important;
}

bit-lock button.tw-bg-bg-secondary:hover,
bit-lock button.tw-bg-bg-secondary:focus-visible,
bit-lock button.tw-bg-bg-secondary[aria-expanded="true"],
bit-master-password-lock button.tw-bg-bg-secondary:hover,
bit-master-password-lock button.tw-bg-bg-secondary:focus-visible,
bit-master-password-lock button.tw-bg-bg-secondary[aria-expanded="true"] {
  background-color: #00AE70 !important;
  border-color: #00AE70 !important;
  color: #ffffff !important;
}

bit-lock button:focus-visible,
bit-master-password-lock button:focus-visible {
  outline: 2px solid #00BF78 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgb(0 191 120 / 0.22) !important;
}

bit-lock button[disabled],
bit-lock button[aria-disabled="true"],
bit-master-password-lock button[disabled],
bit-master-password-lock button[aria-disabled="true"] {
  background-color: #2A3136 !important;
  border-color: #48545c !important;
  color: #9faeb5 !important;
  cursor: not-allowed !important;
}

/* Confirmation dialogs render in Angular's CDK overlay, outside <bit-lock>.
   Give that overlay its own complete CMDTek semantic palette so the dialog
   surface, heading, description and action labels always have contrast. */
.cdk-overlay-container,
.cdk-overlay-container .cdk-overlay-pane,
.cdk-overlay-container bit-dialog,
.cdk-overlay-container bit-simple-dialog,
.cdk-overlay-container [bit-dialog] {
  --color-bg-primary: #192229;
  --color-bg-secondary: #2A3136;
  --color-bg-tertiary: #2A3136;
  --color-bg-quaternary: #364149;
  --color-bg-disabled: #2A3136;
  --color-bg-brand: #00AE70;
  --color-bg-brand-strong: #009E69;
  --color-border-base: #48545c;
  --color-border-brand: #00AE70;
  --color-border-brand-strong: #009E69;
  --color-border-focus: #00BF78;
  --color-fg-heading: #F4F7F8;
  --color-fg-body: #D7E0E4;
  --color-fg-body-subtle: #B8C4C8;
  --color-fg-contrast: #FFFFFF;
  --color-fg-disabled: #9FAEB5;
  --color-fg-brand: #00BF78;
  --color-fg-brand-strong: #00AE70;
  color: #F4F7F8;
}

.cdk-overlay-container .tw-bg-bg-primary,
.cdk-overlay-container .tw-bg-background,
.cdk-overlay-container .tw-bg-background-alt {
  background-color: #192229 !important;
}

.cdk-overlay-container .tw-text-fg-heading,
.cdk-overlay-container .tw-text-fg-body,
.cdk-overlay-container h1,
.cdk-overlay-container h2,
.cdk-overlay-container h3,
.cdk-overlay-container p,
.cdk-overlay-container [bitDialogTitle],
.cdk-overlay-container [bitDialogContent] {
  color: #F4F7F8 !important;
}

.cdk-overlay-container button.tw-bg-bg-brand {
  background-color: #00AE70 !important;
  border-color: #00AE70 !important;
  color: #FFFFFF !important;
}

.cdk-overlay-container button.tw-bg-bg-brand:hover,
.cdk-overlay-container button.tw-bg-bg-brand:focus-visible {
  background-color: #009E69 !important;
  border-color: #009E69 !important;
}

.cdk-overlay-container button.tw-bg-bg-secondary {
  background-color: #2A3136 !important;
  border-color: #00AE70 !important;
  color: #F4F7F8 !important;
}

.cdk-overlay-container button.tw-bg-bg-secondary:hover,
.cdk-overlay-container button.tw-bg-bg-secondary:focus-visible {
  background-color: #00AE70 !important;
  border-color: #00AE70 !important;
  color: #FFFFFF !important;
}