.providers-2fa-3,.providers-2fa-1,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,:is(bit-dialog,[bit-dialog]) div.tw-ml-4:has(bit-form-control input),:is(bit-dialog,[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-sso-login,.vw-email-sso,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}

/**
 * ====================================================================
 * TIN SOLUTIONS (PTY) LTD - CORPORATE VAULT SYSTEM STYLING
 * Enterprise Brand Architecture:
 * - Primary Brand Teal: #066168
 * - Teal Hover / Strong: #044b50
 * - Brand Amber: #FFAA0D
 * - Deep Slate Base: #0F172A
 * ====================================================================
 */

:root, html, body, .theme_light, .theme_dark {
  --color-brand-500: #07747c !important;
  --color-brand-600: #066168 !important;
  --color-brand-700: #066168 !important;
  --color-brand-700-rgb: 6, 97, 104 !important;
  --color-brand-800: #044b50 !important;
  --color-brand-800-rgb: 4, 75, 80 !important;
  --color-brand-900: #033c40 !important;
  --color-bg-brand: #066168 !important;
  --color-bg-brand-medium: #c7e6e8 !important;
  --color-bg-brand-soft: #e0f2f3 !important;
  --color-bg-brand-softer: #f0f9fa !important;
  --color-bg-brand-strong: #044b50 !important;
  --color-bg-brand-stronger: #033c40 !important;
  --color-border-brand: #066168 !important;
  --color-border-brand-strong: #044b50 !important;
  --color-border-focus: #FFAA0D !important;
  --color-fg-brand: #066168 !important;
  --color-fg-brand-strong: #044b50 !important;
  --color-nav-bg-brand: #066168 !important;
  --color-nav-bg-primary: #066168 !important;
  --color-primary-600: 6 97 104 !important;
  --color-primary-700: 4 75 80 !important;
  --color-illustration-bg-primary: 220 238 240 !important;
}

/* Header bar styling */
.navbar, header, nav.navbar, .tw-bg-header {
  background: linear-gradient(135deg, #066168 0%, #033c40 100%) !important;
  border-bottom: 3px solid #FFAA0D !important;
}

/* Top-left Brand Logo container */
svg[viewBox="0 0 290 60"] {
  display: block !important;
  box-sizing: border-box !important;
  background: url("/images/logo.svg") no-repeat left center / contain !important;
  width: 250px !important;
  height: 60px !important;
}

svg[viewBox="0 0 290 60"] path,
svg[viewBox="0 0 290 60"] text,
svg[viewBox="0 0 290 60"] g {
  display: none !important;
}

/* Primary Action Buttons */
.vw-continue-login,
button.tw-bg-bg-brand,
.tw-bg-bg-brand,
button[type="submit"],
.btn-primary,
button.tw-btn-primary {
  background-color: #066168 !important;
  border-color: #066168 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 6px rgba(6, 97, 104, 0.25) !important;
}

.vw-continue-login:hover,
button.tw-bg-bg-brand:hover,
.tw-bg-bg-brand:hover,
button[type="submit"]:hover,
.btn-primary:hover,
button.tw-btn-primary:hover,
.hover\:tw-bg-bg-brand-strong:hover {
  background-color: #044b50 !important;
  border-color: #044b50 !important;
  box-shadow: 0 4px 14px rgba(6, 97, 104, 0.35) !important;
}

/* Text links & brand highlights */
a,
a.tw-text-primary,
.tw-text-primary,
button.tw-btn-link,
a.tw-text-fg-brand {
  color: #066168 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

a:hover,
a.tw-text-primary:hover,
.tw-text-primary:hover,
a.tw-text-fg-brand:hover {
  color: #FFAA0D !important;
}

/* Focus and inputs */
input:focus,
input:focus-visible,
select:focus,
textarea:focus {
  border-color: #066168 !important;
  outline-color: #066168 !important;
  box-shadow: 0 0 0 3px rgba(6, 97, 104, 0.22) !important;
}

/* Checkbox and radios */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: #066168 !important;
  border-color: #066168 !important;
}

/* Badges */
.badge-primary,
.tw-bg-badge-primary {
  background-color: #FFAA0D !important;
  color: #0F172A !important;
  font-weight: 700 !important;
}
