:root {
  --trustive-navy: #001060;
  --trustive-blue: #1234b8;
  --trustive-green: #139348;
  --trustive-ink: #111827;
  --trustive-muted: #6b7280;
  --trustive-border: #d8def2;
  --trustive-field: #f8faff;
  --trustive-shadow: 0 24px 70px rgba(0, 16, 96, 0.24);
}

html,
body {
  min-height: 100%;
}

body {
  --theme-color: var(--trustive-navy);
  --theme-color-dark: #00093d;
  --theme-color-light: #e9edff;
  --link-color: var(--trustive-blue);
  --button-background-color: var(--trustive-navy);
  --button-border-color: var(--trustive-navy);
  margin: 0 !important;
  color: var(--trustive-ink);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

body.task-login,
body:has(.trustive-login-shell) {
  min-height: 100vh !important;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(23, 55, 190, 0.34), transparent 28%),
    linear-gradient(135deg, #00072f 0%, var(--trustive-navy) 52%, #02208b 100%) !important;
}

body.task-login::before,
body:has(.trustive-login-shell)::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 82%);
}

.trustive-login-shell {
  position: relative !important;
  z-index: 1 !important;
  min-height: 100vh !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(86px, 10vh, 120px) 20px 48px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background: transparent !important;
}

#login-form.trustive-login-form {
  position: fixed !important;
  top: clamp(76px, 10vh, 118px) !important;
  left: 50% !important;
  z-index: 5 !important;
  width: min(680px, calc(100vw - 40px)) !important;
  margin: 0 !important;
  padding: clamp(36px, 4vw, 54px) !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: var(--trustive-shadow) !important;
  backdrop-filter: blur(18px) !important;
}

#trustive-card-logo {
  display: block !important;
  width: 230px !important;
  max-width: 80% !important;
  height: auto !important;
  margin: 0 auto 30px !important;
}

#login-footer {
  display: none !important;
}

#login-form.trustive-login-form table,
#login-form.trustive-login-form tbody {
  display: block !important;
  width: 100% !important;
  border: 0 !important;
  border-collapse: separate !important;
}

#login-form.trustive-login-form tr {
  display: block !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
}

#login-form.trustive-login-form tr:has(input[type="submit"]),
#login-form.trustive-login-form tr:has(button) {
  display: block !important;
  margin-bottom: 0 !important;
}

#login-form.trustive-login-form td {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#login-form.trustive-login-form label,
#login-form.trustive-login-form .title,
#login-form.trustive-login-form .title label,
#login-form.trustive-login-form td:not(:has(input)):not(:has(button)):not(:has(select)):not(:has(textarea)) {
  display: none !important;
}

#login-form.trustive-login-form input[type="text"],
#login-form.trustive-login-form input[type="email"],
#login-form.trustive-login-form input[type="password"],
#login-form.trustive-login-form .form-control {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 1px solid var(--trustive-border) !important;
  border-radius: 12px !important;
  background: var(--trustive-field) !important;
  color: var(--trustive-ink) !important;
  box-shadow: none !important;
  font-size: 17px !important;
}

#login-form.trustive-login-form td:only-child input[type="text"],
#login-form.trustive-login-form td:only-child input[type="email"],
#login-form.trustive-login-form td:only-child input[type="password"],
#login-form.trustive-login-form td:only-child .form-control {
  border-radius: 12px !important;
}

#login-form.trustive-login-form input:focus {
  border-color: var(--trustive-blue) !important;
  box-shadow: 0 0 0 4px rgba(18, 52, 184, 0.13) !important;
  outline: none !important;
}

#login-form.trustive-login-form input[type="submit"],
#login-form.trustive-login-form button,
#login-form.trustive-login-form .button,
#login-form.trustive-login-form .btn-primary {
  width: 100% !important;
  height: 56px !important;
  margin: 4px 0 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--trustive-navy), var(--trustive-blue)) !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 56px !important;
  box-shadow: 0 14px 30px rgba(0, 16, 96, 0.2) !important;
}

#layout-menu,
#taskmenu,
.menu.toolbar,
.toolbar,
.header {
  background-color: var(--trustive-navy) !important;
}

#layout-menu a,
#taskmenu a,
.toolbar a,
.header a {
  color: rgba(255, 255, 255, 0.9) !important;
}

#layout-menu a.selected,
#taskmenu a.selected,
.toolbar a.selected,
.header a.selected {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

img#logo,
#layout-menu #logo img,
#taskmenu #logo img,
.header #logo img,
.popover-header #logo img {
  content: url("../images/trustive-icon-logo-white.png") !important;
  width: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  background: transparent !important;
}

#layout-menu #logo,
#taskmenu #logo,
.header #logo,
a#logo,
.logo {
  width: 100% !important;
  min-height: 76px !important;
  background-color: transparent !important;
  background-image: url("../images/trustive-icon-logo-white.png") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 38px 38px !important;
}

body:not(:has(.trustive-login-shell)) .header,
body:not(:has(.trustive-login-shell)) .header *,
body:not(:has(.trustive-login-shell)) #layout-header,
body:not(:has(.trustive-login-shell)) #layout-header *,
body:not(:has(.trustive-login-shell)) #messagestack,
body:not(:has(.trustive-login-shell)) .username,
body:not(:has(.trustive-login-shell)) .email {
  color: #fff !important;
}

.badge,
.unreadcount,
.counter {
  background: var(--trustive-green) !important;
  color: #fff !important;
}

@media (max-width: 640px) {
  .trustive-login-shell {
    min-height: 100vh !important;
    padding: 70px 16px 32px !important;
  }

  #login-form.trustive-login-form {
    width: 100% !important;
    top: 58px !important;
    padding: 28px !important;
    border-radius: 16px !important;
  }

  #trustive-card-logo {
    width: 190px !important;
    margin-bottom: 24px !important;
  }

  #login-form.trustive-login-form input[type="text"],
  #login-form.trustive-login-form input[type="email"],
  #login-form.trustive-login-form input[type="password"],
  #login-form.trustive-login-form .form-control,
  #login-form.trustive-login-form input[type="submit"],
  #login-form.trustive-login-form button,
  #login-form.trustive-login-form .button,
  #login-form.trustive-login-form .btn-primary {
    height: 54px !important;
    min-height: 54px !important;
    line-height: 54px !important;
  }
}