/* GorillaLink login-only override for ThingsBoard 3.2.2 UI. */
tb-login {
  display: flex;
  flex: 1 1 0%;
  min-height: 100vh;
  position: relative;
}

tb-login .tb-login-content {
  position: relative !important;
  min-height: 100vh !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: clamp(24px, 4vw, 72px) !important;
  background:
    linear-gradient(90deg, rgba(6, 19, 43, 0.78) 0%, rgba(8, 27, 54, 0.58) 46%, rgba(6, 19, 43, 0.38) 100%),
    linear-gradient(180deg, rgba(5, 14, 31, 0.12) 0%, rgba(5, 14, 31, 0.62) 100%),
    url("/assets/gorillalink-port-bg-afbd76e8220d5f9d3f8faab20c8059ef.png") center center / cover no-repeat !important;
}

tb-login .tb-login-content::before {
  content: "Track every unit.\A Monitor every shipment.";
  white-space: pre-line;
  position: absolute;
  left: clamp(42px, 6.8vw, 128px);
  top: 27vh;
  max-width: min(680px, 44vw);
  color: #fff;
  font: 800 clamp(42px, 4.2vw, 76px) / 1.08 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.42);
  z-index: 0;
}

tb-login .tb-login-content::after {
  content: "Powered by GorillaLink";
  position: absolute;
  left: clamp(42px, 6.8vw, 128px);
  bottom: clamp(28px, 4.5vh, 56px);
  color: rgba(255, 255, 255, 0.86);
  font: 500 14px / 1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  z-index: 0;
}

tb-login .tb-login-content > * {
  position: relative;
  z-index: 1;
}

tb-login .tb-login-form,
tb-login mat-card.tb-login-form {
  box-sizing: border-box !important;
  width: min(540px, calc(100vw - 48px)) !important;
  max-width: 540px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: clamp(8px, 3vw, 72px) !important;
  padding: clamp(32px, 3.4vw, 54px) !important;
  border: 1px solid rgba(15, 35, 64, 0.08) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  color: #081a34 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(16px);
}

tb-login .tb-login-form img {
  display: block !important;
  width: min(360px, 100%) !important;
  height: auto !important;
  max-height: 108px !important;
  object-fit: contain !important;
  content: url("/assets/gorillalink-logo-black-ad37ec62b7aa7b327c43a19f64acbe1c.png") !important;
  margin: 0 auto 30px !important;
}

tb-login .tb-login-form mat-card-content,
tb-login .tb-login-form form {
  color: #081a34 !important;
}

tb-login .tb-login-form form {
  display: flex !important;
  flex-direction: column !important;
}

tb-login .tb-login-form form > * {
  order: 4;
}

tb-login .tb-login-form form img {
  order: 1;
}

tb-login .tb-login-form form::before {
  content: "Live Map";
  display: block;
  order: 2;
  margin: 0 0 8px;
  color: #081a34;
  text-align: center;
  font: 800 clamp(28px, 2vw, 36px) / 1.12 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

tb-login .tb-login-form .mat-form-field {
  width: 100% !important;
}

tb-login .tb-login-form .mat-form-field-label,
tb-login .tb-login-form .mat-input-element,
tb-login .tb-login-form .mat-icon,
tb-login .tb-login-form .mat-form-field-prefix,
tb-login .tb-login-form .mat-form-field-suffix {
  color: #0f1f38 !important;
}

tb-login .tb-login-form .mat-input-element::placeholder {
  color: #94a3b8 !important;
}

tb-login .tb-login-form .mat-form-field-outline,
tb-login .tb-login-form .mat-form-field-appearance-outline .mat-form-field-outline {
  color: #cbd5e1 !important;
}

tb-login .tb-login-form .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
  color: #0f9f8f !important;
}

tb-login .tb-login-form button.mat-raised-button,
tb-login .tb-login-form button.mat-flat-button,
tb-login .tb-login-form button[type="submit"] {
  width: 100% !important;
  min-height: 56px !important;
  margin-top: 16px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #14a38f 0%, #0b7f74 100%) !important;
  color: #fff !important;
  font: 800 17px / 1 Arial, Helvetica, sans-serif !important;
  letter-spacing: 0 !important;
  box-shadow: 0 10px 24px rgba(15, 127, 116, 0.28) !important;
}

tb-login .tb-login-form button.mat-raised-button:hover,
tb-login .tb-login-form button.mat-flat-button:hover,
tb-login .tb-login-form button[type="submit"]:hover {
  background: linear-gradient(135deg, #16b8a2 0%, #0a7168 100%) !important;
}

tb-login .tb-login-form a {
  color: #0b7f74 !important;
  font-weight: 600 !important;
}

tb-login .tb-login-form .mat-progress-bar-fill::after {
  background-color: #0f9f8f !important;
}

@media (max-width: 959px) {
  tb-login .tb-login-content {
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
  }

  tb-login .tb-login-content::before {
    display: none;
  }

  tb-login .tb-login-content::after {
    left: 24px;
    right: 24px;
    bottom: 18px;
    text-align: center;
  }

  tb-login .tb-login-form,
  tb-login mat-card.tb-login-form {
    margin: 0 auto !important;
    padding: 30px 24px !important;
  }

  tb-login .tb-login-form::before {
    font-size: 28px;
  }
}

/* Final layout corrections: the real ThingsBoard DOM places tb-login-form on
   the inner form, while the visual card is the direct mat-card child. */
tb-login .tb-login-content {
  display: flex !important;
  place-content: center flex-end !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0 !important;
}

tb-login .tb-login-content::before {
  left: clamp(56px, 7vw, 128px) !important;
  top: 27vh !important;
  max-width: min(620px, calc(100vw - 760px)) !important;
  font-size: clamp(40px, 4vw, 68px) !important;
  line-height: 1.12 !important;
  z-index: 0 !important;
}

tb-login .tb-login-content > mat-card {
  box-sizing: border-box !important;
  width: min(540px, calc(100vw - 48px)) !important;
  max-width: 540px !important;
  max-height: calc(100vh - 72px) !important;
  margin: 0 clamp(48px, 7vw, 112px) 0 auto !important;
  padding: clamp(34px, 3.6vw, 54px) !important;
  border: 1px solid rgba(15, 35, 64, 0.08) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  color: #081a34 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34) !important;
  overflow-y: auto !important;
}

tb-login .tb-login-content > mat-card > mat-card-content {
  display: block !important;
  padding: 0 !important;
}

tb-login .tb-login-form,
tb-login mat-card.tb-login-form {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

tb-login form.tb-login-form {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

tb-login .tb-login-form::before,
tb-login .tb-login-form::after,
tb-login .tb-login-form form::before,
tb-login .tb-login-form form::after {
  content: none !important;
  display: none !important;
}

tb-login .tb-login-form fieldset {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

tb-login .tb-login-form fieldset > div {
  display: flex !important;
  flex-direction: column !important;
}

tb-login .tb-login-form fieldset > div > div:first-child {
  padding: 0 0 26px !important;
}

tb-login .tb-login-form fieldset > div > div:first-child img {
  display: block !important;
  width: min(360px, 100%) !important;
  max-height: 108px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  content: url("/assets/gorillalink-logo-black-ad37ec62b7aa7b327c43a19f64acbe1c.png") !important;
}

tb-login .tb-login-form [tb-toast] {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}

tb-login .tb-login-form [tb-toast]::before {
  content: "Live Map";
  display: block;
  order: 0;
  margin: 0 0 8px;
  color: #081a34;
  text-align: center;
  font: 800 clamp(28px, 2vw, 36px) / 1.12 Arial, Helvetica, sans-serif;
}

tb-login .tb-login-form [tb-toast]::after {
  content: none !important;
  display: none !important;
}

tb-login .tb-login-content::after {
  content: "Real-time container and GPS tracking powered by our proprietary satellite communications solution" !important;
  position: absolute !important;
  left: clamp(56px, 7vw, 128px) !important;
  top: calc(27vh + clamp(190px, 13vw, 240px)) !important;
  bottom: auto !important;
  max-width: min(560px, calc(100vw - 820px)) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  text-align: left !important;
  font: 500 clamp(18px, 1.35vw, 24px) / 1.42 Arial, Helvetica, sans-serif !important;
  letter-spacing: 0 !important;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.42) !important;
  z-index: 0 !important;
}

tb-login::after {
  content: "Powered by GorillaLink";
  position: absolute;
  left: clamp(42px, 6.8vw, 128px);
  bottom: clamp(28px, 4.5vh, 56px);
  color: rgba(255, 255, 255, 0.82);
  font: 500 14px / 1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  z-index: 2;
  pointer-events: none;
}

tb-login .tb-login-form [tb-toast]::after {
  content: none !important;
  display: none !important;
}

tb-login .tb-login-form [tb-toast] > span[style*="height"] {
  display: none !important;
}

tb-login .tb-login-form [tb-toast] > mat-form-field {
  order: 2;
  margin-bottom: 10px !important;
}

tb-login .tb-login-form [tb-toast] > div:has(.tb-action-button),
tb-login .tb-login-form [tb-toast] > .tb-action-button {
  order: 4;
}

tb-login .tb-login-form [tb-toast] > div:has(.tb-reset-password) {
  order: 5;
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: 12px !important;
}

tb-login .tb-login-form button[type="submit"] .mat-button-wrapper {
  font-size: 0 !important;
}

tb-login .tb-login-form button[type="submit"] .mat-button-wrapper::before {
  content: "Sign in";
  font-size: 17px !important;
}

@media (min-width: 960px) and (max-width: 1350px) {
  tb-login .tb-login-content::after {
    top: calc(27vh + 230px) !important;
  }
}

@media (max-width: 959px) {
  tb-login .tb-login-content {
    place-content: center !important;
    justify-content: center !important;
  }

  tb-login .tb-login-content::after {
    display: none !important;
  }

  tb-login::after {
    left: 24px;
    right: 24px;
    bottom: 18px;
    text-align: center;
  }

  tb-login .tb-login-content > mat-card {
    margin: 0 auto !important;
    padding: 30px 24px !important;
  }
}