/* ITS brand theme override for Vaultwarden web vault.
   Colors mirror resources/views/layouts/app.blade.php in the ITS CRM. */

:root {
  /* newer design-token scale (plain hex) - drives buttons/links via --color-bg-brand / --color-fg-brand */
  --color-brand-050: #f4f9fb !important;
  --color-brand-100: #e8f4f6 !important;
  --color-brand-200: #cdebed !important;
  --color-brand-300: #67c7c4 !important;
  --color-brand-400: #3eb7b0 !important;
  --color-brand-500: #20b5a9 !important;
  --color-brand-600: #178d87 !important;
  --color-brand-700: #16446f !important;
  --color-brand-800: #10365c !important;
  --color-brand-900: #0b2c4f !important;
  --color-brand-950: #061b32 !important;

  /* legacy token scale (RGB triplets, used by rgb(var(...))) */
  --color-background: 246 249 251 !important;      /* #f6f9fb */
  --color-background-alt: 232 244 246 !important;  /* #e8f4f6 */
  --color-primary-100: 232 244 246 !important;     /* #e8f4f6 */
  --color-primary-300: 103 199 196 !important;     /* #67c7c4 */
  --color-primary-600: 32 181 169 !important;     /* #20b5a9 */
  --color-primary-700: 22 68 111 !important;        /* #16446f */
  --color-text-main: 23 50 77 !important;          /* #17324d */
  --color-text-muted: 100 123 143 !important;       /* #647b8f */
  --color-text-contrast: 11 44 79 !important;      /* #0b2c4f, dark text on gold buttons */

  /* logged-in app's left nav sidebar - always dark brown, matching the CRM
     header, regardless of light/dark system theme */
  --color-nav-bg-primary: #0b2c4f !important;
  --color-nav-bg-primary-strong: #10365c !important;
  --color-nav-bg-primary-hover: rgba(189, 148, 104, 0.18) !important;
  --color-nav-bg-secondary: #0b2c4f !important;
  --color-nav-bg-secondary-strong: #10365c !important;
  --color-nav-bg-secondary-hover: rgba(189, 148, 104, 0.18) !important;
  --color-nav-border-primary: rgba(189, 148, 104, 0.3) !important;
  --color-nav-border-secondary: rgba(189, 148, 104, 0.3) !important;
  --color-nav-fg-primary: #e8f4f6 !important;
  --color-nav-fg-secondary: #e8f4f6 !important;
  --color-fg-nav: #e8f4f6 !important;
}

/* replace the nav sidebar's Vaultwarden logo (both the expanded wordmark and
   the collapsed icon-only variant share this wrapper) with the full ITS
   wordmark centered on top and "VAULT" centered beneath it - mirrors the CRM
   login card's logo-over-label stack exactly, just scaled down to fit the
   sidebar slot. Clipped by overflow:hidden when the sidebar is collapsed to
   its narrow icon-only width. */
bit-nav-logo a[aria-label] {
  background-image: url(../images/its-logo.png) !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  background-size: auto 34px !important;
  position: relative !important;
  overflow: hidden !important;
}

bit-nav-logo a[aria-label] svg {
  visibility: hidden !important;
}

bit-nav-logo a[aria-label]::before {
  content: "VAULT" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 4px !important;
  text-align: center !important;
  font-size: 0.55rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  color: #20b5a9 !important;
}

html.theme_light {
  /* page/card surfaces (separate token family from --color-background) */
  --color-bg-secondary: #f6f9fb !important;
  --color-bg-primary: #ffffff !important;
  --color-bg-tertiary: #f6f9fb !important;
  --color-bg-quaternary: #e8f4f6 !important;
}

.theme_dark {
  --color-background: 6 27 50 !important;          /* #061b32 */
  --color-background-alt: 11 44 79 !important;      /* #0b2c4f */
  --color-primary-100: 22 68 111 !important;         /* #16446f */
  --color-primary-300: 103 199 196 !important;      /* #67c7c4 */
  --color-primary-600: 32 181 169 !important;      /* #20b5a9 */
  --color-primary-700: 103 199 196 !important;      /* #67c7c4 */
  --color-text-main: 232 244 246 !important;        /* #e8f4f6 */
  --color-text-muted: 184 212 218 !important;       /* #b8d4da */
  --color-text-contrast: 11 44 79 !important;       /* #0b2c4f */
  --color-bg-secondary: #061b32 !important;
  --color-bg-primary: #1a1108 !important;
  --color-bg-tertiary: #061b32 !important;
  --color-bg-quaternary: #0b2c4f !important;
}

/* replace the Vaultwarden wordmark with the ITS logo, on a dark chip so the
   white logo stays legible against both light and dark page backgrounds */
a:has(> bit-svg[aria-label="Bitwarden logo"]) {
  background-image: url(../images/its-logo.png) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 78% auto !important;
  background-color: #0b2c4f !important;
  border-radius: 12px !important;
}

a:has(> bit-svg[aria-label="Bitwarden logo"]) bit-svg {
  visibility: hidden !important;
}

/* remove Vaultwarden/Bitwarden branded footer disclaimer and decorative safe icon */
footer.tw-bg-background-alt,
bit-landing-footer {
  display: none !important;
}

.tw-size-20.sm\:tw-size-24 {
  display: none !important;
}

/* ============================================================
   CRM-style login screen: dark gradient + grid backdrop, glass
   card, centered logo, gold button. Mirrors
   resources/views/auth/login.blade.php in the ITS CRM.
   Scoped to auth-anon-layout so the logged-in vault app is unaffected.
   ============================================================ */

auth-anon-layout {
  /* force the CRM dark palette regardless of system light/dark theme */
  --color-text-main: 232 244 246 !important;       /* #e8f4f6 */
  --color-text-muted: 184 212 218 !important;      /* #b8d4da */
  --color-background: 11 44 79 !important;         /* #0b2c4f, for any lingering tw-bg-background */
  --color-bg-primary: rgba(245, 234, 223, 0.10) !important;
  --color-bg-secondary: transparent !important;
  --color-bg-tertiary: transparent !important;
  --color-bg-quaternary: rgba(245, 234, 223, 0.10) !important;

  /* CRM's sign-in button is always gold, regardless of system theme */
  --color-brand-400: #20b5a9 !important;
  --color-brand-700: #20b5a9 !important;
  --color-fg-brand: #67c7c4 !important;
  --color-fg-brand-strong: #e8f4f6 !important;
  --color-fg-brand-soft: #67c7c4 !important;
  --color-bg-brand: #20b5a9 !important;
  --color-bg-brand-strong: #67c7c4 !important;
  --color-fg-contrast: #0b2c4f !important;
  --color-border-brand: #20b5a9 !important;

  /* secondary/outline buttons ("Back", etc.) use the neutral gray scale by
     default - retint for legibility against our dark card */
  --color-fg-heading: #e8f4f6 !important;
  --color-border-base: rgba(189, 148, 104, 0.45) !important;

  display: block !important;
  min-height: 100vh !important;
  background-image:
    linear-gradient(rgba(189, 148, 104, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(189, 148, 104, .18) 1px, transparent 1px),
    linear-gradient(135deg, #061b32 0%, #0b2c4f 38%, #16446f 100%) !important;
  background-size: 46px 46px, 46px 46px, 100% 100% !important;
  background-repeat: repeat, repeat, no-repeat !important;
  background-attachment: fixed !important;
}

/* hide the small top logo bar on auth screens - replaced by the large centered logo below */
auth-anon-layout header.tw-bg-background-alt {
  display: none !important;
}

/* the login/register/etc card itself, made into a floating glass panel */
auth-anon-layout bit-landing-content > div {
  background: rgba(245, 234, 223, 0.12) !important;
  border: 1px solid rgba(189, 148, 104, 0.35) !important;
  border-radius: 28px !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45) !important;
  max-width: 430px !important;
  width: calc(100% - 2rem) !important;
  margin: 48px auto !important;
}

/* large centered ITS logo, "VAULT" label, and tagline above the dynamic
   "Log in" / "Create account" heading - mirrors the CRM login card's
   logo -> "CRM" -> "Travel inquiry management" stack. */
auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto::before {
  content: "" !important;
  display: block !important;
  order: 1 !important;
  height: 64px !important;
  width: 100% !important;
  margin: 0 auto 20px !important;
  background-image: url(../images/its-logo.png) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto::after {
  content: "VAULT" !important;
  display: block !important;
  order: 2 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.34em !important;
  color: #b8d4da !important;
  margin-bottom: 16px !important;
}

auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto h1 {
  order: 3 !important;
}

auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto h1::after {
  content: "Team password & credential management" !important;
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #20b5a9 !important;
  margin-top: 10px !important;
}

/* translucent gold-bordered inputs, matching the CRM form fields */
auth-anon-layout .tw-bg-background.tw-rounded-lg {
  background: rgba(245, 234, 223, 0.10) !important;
  border: 1px solid rgba(189, 148, 104, 0.45) !important;
  border-radius: 16px !important;
}

auth-anon-layout .tw-bg-background.tw-rounded-lg:focus-within {
  border-color: #67c7c4 !important;
  box-shadow: 0 0 0 3px rgba(189, 148, 104, 0.25) !important;
}

auth-anon-layout input,
auth-anon-layout select {
  color: #ffffff !important;
}

auth-anon-layout input::placeholder {
  color: rgba(217, 196, 173, 0.65) !important;
}

auth-anon-layout input[type="checkbox"] {
  accent-color: #20b5a9 !important;
}

/* the inner Bitwarden "card" component would otherwise double-box inside our
   outer glass panel - flatten it so only the outer panel shows */
auth-anon-layout bit-landing-card bit-base-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   ITS Secure Vault — matched to mail.its-cert.com
   ============================================================ */

auth-anon-layout {
  --its-navy: #0b3b82;
  --its-navy-hover: #082f69;
  --its-teal: #1db7aa;
  --its-charcoal: #343434;
  --its-muted: #6b7280;
  --its-border: #e5e7eb;

  --color-text-main: 52 52 52 !important;
  --color-text-muted: 107 114 128 !important;
  --color-background: 244 247 248 !important;

  --color-bg-brand: #0b3b82 !important;
  --color-bg-brand-strong: #082f69 !important;
  --color-border-brand: #0b3b82 !important;
  --color-fg-brand: #1db7aa !important;
  --color-fg-brand-strong: #0b3b82 !important;
  --color-fg-contrast: #ffffff !important;
  --color-fg-heading: #343434 !important;
  --color-border-base: #e5e7eb !important;

  display: block !important;
  min-height: 100vh !important;

  background:
    linear-gradient(
      135deg,
      #eef5f5,
      #f8fafc 55%,
      #eef3f8
    ) !important;
}

/* Hide default top Vaultwarden branding */
auth-anon-layout header.tw-bg-background-alt {
  display: none !important;
}

/* ============================================================
   Main card — same proportions as ITS Webmail
   ============================================================ */

auth-anon-layout bit-landing-content > div {
  width: calc(100% - 48px) !important;
  max-width: 560px !important;

  margin: 24px auto !important;
  padding: 38px 40px 34px !important;

  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 22px !important;

  box-shadow: 0 22px 60px rgba(0,0,0,.10) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  color: #343434 !important;
}

/* ============================================================
   Brand / hero
   ============================================================ */

auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* Logo — same width as Webmail */
auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto::before {
  content: "" !important;

  display: block !important;
  order: 1 !important;

  width: 210px !important;
  max-width: 70% !important;
  height: 150px !important;

  margin: 0 auto 18px !important;

  background-image: url(../images/its-logo.png) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

/* Teal rule — exactly like Webmail */
auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto::after {
  content: "" !important;

  display: block !important;
  order: 2 !important;

  width: 80px !important;
  height: 3px !important;

  margin: 4px auto 24px !important;

  background: #1db7aa !important;
  border-radius: 999px !important;
}

/* Existing dynamic Vaultwarden heading */
auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto h1 {
  order: 3 !important;

  margin: 0 !important;

  color: #343434 !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

/* Main ITS Secure Vault heading */
auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto h1::before {
  content: "ITS Secure Vault" !important;

  display: block !important;

  margin: 0 0 10px !important;

  color: #0b3b82 !important;
  font-size: 31px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: .2px !important;
}

/* Subtitle */
auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto h1::after {
  content: "Secure access to company passwords and credentials." !important;

  display: block !important;

  max-width: 410px !important;
  margin: 10px auto 28px !important;

  color: #6b7280 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* ============================================================
   Form labels
   ============================================================ */

auth-anon-layout bit-form-field label {
  color: #343434 !important;
  font-weight: 600 !important;
}

/* ============================================================
   Exact Vaultwarden field shell
   ============================================================ */

auth-anon-layout [bitfieldcontainer] {
  min-height: 48px !important;

  background: #ffffff !important;
  background-color: #ffffff !important;

  border: 1px solid #e5e7eb !important;
  border-radius: 11px !important;

  box-shadow: none !important;
  overflow: hidden !important;
}

/* Remove internal dark backgrounds */
auth-anon-layout [bitfieldcontainer] > div,
auth-anon-layout [bitfieldcontainer] [data-default-content] {
  background: transparent !important;
  background-color: transparent !important;

  border: 0 !important;
  box-shadow: none !important;
}

/* Actual editor */
auth-anon-layout [bitfieldcontainer] input {
  width: 100% !important;
  min-height: 46px !important;

  background: transparent !important;
  background-color: transparent !important;

  color: #343434 !important;

  border: 0 !important;
  border-radius: 0 !important;

  outline: none !important;
  box-shadow: none !important;
}

/* Focus state */
auth-anon-layout [bitfieldcontainer]:has(input:focus-visible) {
  border-color: #1db7aa !important;

  box-shadow:
    0 0 0 3px rgba(29,183,170,.12) !important;
}

/* ============================================================
   Checkbox
   ============================================================ */

auth-anon-layout input[type="checkbox"] {
  accent-color: #1db7aa !important;
}

/* ============================================================
   Primary buttons — same Webmail navy
   ============================================================ */

auth-anon-layout button[data-testid="login-continue-button"],
auth-anon-layout button[data-testid="login-submit-button"] {
  width: 100% !important;

  padding: 15px 22px !important;

  background: #0b3b82 !important;
  color: #ffffff !important;

  border: 1px solid #0b3b82 !important;
  border-radius: 11px !important;

  font-size: 16px !important;
  font-weight: 700 !important;

  box-shadow: 0 8px 20px rgba(11,59,130,.18) !important;

  transition: .2s ease !important;
}

auth-anon-layout button[data-testid="login-continue-button"]:hover,
auth-anon-layout button[data-testid="login-submit-button"]:hover {
  background: #082f69 !important;
  border-color: #082f69 !important;

  transform: translateY(-1px) !important;
}

/* ============================================================
   Links
   ============================================================ */

auth-anon-layout a {
  color: #1db7aa !important;
}

auth-anon-layout a:hover {
  color: #0b3b82 !important;
}

/* No public signup — ITS users will be invited */
auth-anon-layout a[href="#/register"] {
  display: none !important;
}

/* ============================================================
   ITS footer inside card
   ============================================================ */

auth-anon-layout bit-landing-content > div::after {
  content:
    "Sign in using your full ITS email address and Vault password.\A"
    "Secure credential access\A\A"
    "© 2026 Inspection & Testing Services (ITS). All rights reserved.";

  white-space: pre-line;

  display: block !important;

  margin-top: 28px !important;
  padding-top: 18px !important;

  border-top: 1px solid #e5e7eb !important;

  text-align: center !important;

  color: #9ca3af !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 640px) {

  auth-anon-layout bit-landing-content > div {
    width: calc(100% - 28px) !important;

    margin: 14px auto !important;
    padding: 28px 22px 26px !important;

    border-radius: 18px !important;
  }

  auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto::before {
    width: 175px !important;
    height: 125px !important;
  }

  auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto h1::before {
    font-size: 27px !important;
  }
}


/* ITS — remove public account creation */
auth-anon-layout a[href*="/register"],
auth-anon-layout a[href*="register"] {
  display: none !important;
}

/* Remove our custom footer/sign-in instructions */
auth-anon-layout bit-landing-content > div::after {
  content: "© 2026 Inspection & Testing Services (ITS). All rights reserved." !important;
  white-space: normal !important;
  display: block !important;
  margin-top: 28px !important;
  padding-top: 18px !important;
  border-top: 1px solid #e5e7eb !important;
  text-align: center !important;
  color: #9ca3af !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}


/* Hide Create account everywhere on auth screens */
auth-anon-layout a,
auth-anon-layout button {
}

auth-anon-layout a[href*="register"],
auth-anon-layout a[href*="signup"],
auth-anon-layout button[data-testid*="register"],
auth-anon-layout button[data-testid*="signup"] {
  display: none !important;
}

/* Vaultwarden 1.37.1 specific create-account area */
auth-anon-layout .vw-create-account,
auth-anon-layout [data-testid="login-create-account"],
auth-anon-layout [data-testid="create-account-button"] {
  display: none !important;
}


/* ITS Vault — compact desktop layout, no vertical page scrolling */
@media (min-width: 641px) {

  html,
  body {
    height: 100% !important;
    overflow-y: hidden !important;
  }

  auth-anon-layout {
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
  }

  auth-anon-layout bit-landing-content > div {
    margin: 12px auto !important;
    padding: 22px 40px 20px !important;
    max-height: calc(100vh - 24px) !important;
  }

  /* Smaller logo area */
  auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto::before {
    width: 175px !important;
    height: 105px !important;
    margin-bottom: 6px !important;
  }

  /* Teal line */
  auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto::after {
    margin: 2px auto 12px !important;
  }

  /* ITS Secure Vault */
  auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto h1::before {
    font-size: 28px !important;
    margin-bottom: 5px !important;
  }

  /* Subtitle */
  auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto h1::after {
    margin: 5px auto 14px !important;
    line-height: 1.4 !important;
  }

  /* Dynamic Log in heading */
  auth-anon-layout bit-landing-hero .tw-text-center.tw-mx-auto h1 {
    font-size: 21px !important;
  }

  /* Footer */
  auth-anon-layout bit-landing-content > div::after {
    margin-top: 14px !important;
    padding-top: 12px !important;
  }
}


/* Remove all decorative background icons/patterns from auth screen */
auth-anon-layout,
auth-anon-layout::before,
auth-anon-layout::after,
auth-anon-layout bit-landing-content,
auth-anon-layout bit-landing-content::before,
auth-anon-layout bit-landing-content::after {
  background-image: none !important;
}

/* Keep only the clean ITS Webmail-style background */
auth-anon-layout {
  background: linear-gradient(
    135deg,
    #eef5f5,
    #f8fafc 55%,
    #eef3f8
  ) !important;
}