/* ThreatDesk welcome / sign-in screen. Loaded only by templates/login.html. */
:root {
  --bg: #EFF0E8;
  --bg-top: #EFF0E8;
  --bg-card: #FFFFFF;
  --ink: #0B1A14;
  --ink-secondary: #1F3027;
  --muted: #2E4337;
  --subtle: #687970;
  --border: #CCD6CE;
  --border-focus: #103324;
  
  /* Brand Green Accents */
  --brand-dark: #103324;
  --brand-hover: #0A2218;
  --jade: #10A37F;
  --jade-soft: #28B991;
  
  --shadow-card: 0 2px 8px rgba(11, 28, 20, 0.04), 0 24px 54px -12px rgba(11, 28, 20, 0.12);
  --radius-card: 18px;
  --radius-input: 9px;
  --radius-btn: 9px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Executive 3D Coiling Shield Loading Screen (Enlarged, Zero-Background)
   ========================================================================== */
.loader-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--bg-top);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.38s ease;
}

.loader-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Enlarged 3D Coiling Shield (260px x 260px, Commanding & Eye-Catching) */
.loader-canvas-wrap {
  position: relative;
  width: 260px;
  height: 260px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 18px 36px rgba(11, 26, 36, 0.16));
}

.loader-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.loader-video-source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Crisp Subheading */
.loader-subheading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 650;
  color: #1A3527;
  letter-spacing: -0.005em;
  opacity: 0.95;
}

.loader-beacon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--jade);
  box-shadow: 0 0 0 0 rgba(16, 163, 127, 0.7);
  animation: beaconGlow 1.8s infinite;
}

@keyframes beaconGlow {
  0% { box-shadow: 0 0 0 0 rgba(16, 163, 127, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(16, 163, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 163, 127, 0); }
}

/* ==========================================================================
   Page Layout & Photorealistic Sloping Mountain Backdrop
   ========================================================================== */
.page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(24px, 4vw, 48px) 24px clamp(36px, 5.5vw, 64px);
  background-color: var(--bg);
  overflow: hidden;   /* clips the backdrop where it is pushed below the fold */
}

/* Mountain Backdrop — Slope from High on Left to Low on Right (Matches Reference) */
.mountain-backdrop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -56px;      /* sit the mountains a little lower on the page */
  width: 100%;
  height: clamp(320px, 46vh, 480px);
  pointer-events: none;
  z-index: 1;
  background-image: url('mountains.jpg');
  background-size: cover;
  background-position: left bottom;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}

/* Central Split Hero Container */
.container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1040px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: flex-start;
  gap: clamp(36px, 6.5vw, 84px);
  margin: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.container.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Left Column: Enlarged, Bold Brand Presence
   ========================================================================== */
.brand-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px 16px;
  margin-top: 7px;    /* nudge the whole brand block (logo + text) slightly lower */
}

/* Bold Enlarged Logo — Commanding Executive Presence */
.brand-icon-wrap {
  width: 206px;
  height: 208px;
  margin-top: -20px;
  margin-bottom: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 16px 36px rgba(11, 26, 36, 0.22));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-icon-wrap:hover {
  transform: scale(1.035) translateY(-2px);
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Bold & Eye-Catching Brand Title */
.brand-title {
  margin: 0;
  font-size: clamp(40px, 4.6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #081C13;
  line-height: 1.12;
  text-shadow: 0 1px 2px rgba(239, 240, 232, 0.85);
}

.brand-title-accent {
  color: var(--jade);
}

.brand-subtitle {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #174530;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(239, 240, 232, 0.9);
}

/* Prominent Emerald Pill Bar */
.accent-bar {
  width: 32px;
  height: 3.5px;
  background-color: var(--jade);
  border-radius: 999px;
  margin: 22px 0 18px;
}

/* High-Contrast, Bold Value Proposition */
.tagline-heading {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #0A2218;
  letter-spacing: -0.025em;
  text-shadow: 0 1px 2px rgba(239, 240, 232, 0.9);
}

.tagline-body {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #213B2E;
  font-weight: 550;
  max-width: 330px;
  text-shadow: 0 1px 2px rgba(239, 240, 232, 0.9);
}

/* ==========================================================================
   Right Column: Crisp, Floating Authentication Card
   ========================================================================== */
.card-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(204, 214, 206, 0.85);
  padding: clamp(36px, 4.5vw, 48px) clamp(30px, 4vw, 40px);
}

.card-title {
  margin: 0;
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.25;
}

.card-desc {
  margin: 8px 0 28px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.45;
}

/* High-Contrast Form Fields */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 15px;
  color: var(--subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.input-icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
}

.input-field {
  width: 100%;
  height: 50px;
  padding: 0 44px 0 44px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 500;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-field::placeholder {
  color: #72847A;
  font-weight: 450;
}

.input-field:hover {
  border-color: #A6B7AC;
}

.input-field:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3.5px rgba(16, 51, 36, 0.09);
}

/* Show/Hide Password Eye Button */
.toggle-pwd {
  position: absolute;
  right: 14px;
  background: none;
  border: 0;
  padding: 6px;
  color: var(--subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.toggle-pwd:hover {
  color: var(--ink);
}

.toggle-pwd:focus-visible {
  outline: 2px solid var(--border-focus);
}

.toggle-pwd svg {
  width: 19px;
  height: 19px;
}

/* Primary Sign In Button */
.btn-submit {
  margin-top: 6px;
  width: 100%;
  height: 50px;
  background-color: var(--brand-dark);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.015em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.btn-submit:hover {
  background-color: var(--brand-hover);
  box-shadow: 0 4px 14px rgba(16, 51, 36, 0.22);
}

.btn-submit:active {
  transform: translateY(1px);
}

.btn-submit:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
}

/* Secondary Registration Link */
.card-footer {
  margin-top: 20px;
  text-align: center;
}

.link-create {
  font-size: 13.5px;
  font-weight: 650;
  color: #1A4633;
  text-decoration: none;
  transition: color 0.15s ease, text-decoration 0.15s ease;
}

.link-create:hover {
  color: var(--brand-dark);
  text-decoration: underline;
}

.link-create:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   Executive Trust Statement Under Card (Unified with Login Card)
   ========================================================================== */
.trust-badge-wrap {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.trust-subtext {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 550;
  color: #1A3B2B;
  letter-spacing: -0.01em;
  line-height: 1.4;
  text-align: center;
}

.trust-shield-icon {
  width: 15px;
  height: 15px;
  color: var(--jade);
  flex-shrink: 0;
}

@media (max-width: 840px) {
  .container {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 440px;
  }
  .brand-column {
    padding-bottom: 0;
  }
  .accent-bar {
    margin: 24px 0 20px;
  }
  .mountain-backdrop {
    height: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  .loader-overlay {
    display: none !important;
  }
  .container {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   App integration: password toggle states, messages, a11y, no-JS fallback
   ========================================================================== */
.toggle-pwd .eye-closed { display: none; }
.toggle-pwd[aria-pressed="true"] .eye-open { display: none; }
.toggle-pwd[aria-pressed="true"] .eye-closed { display: block; }

.btn-submit[aria-busy="true"] {
  opacity: 0.85;
  cursor: progress;
}

.auth-flash,
.auth-alert {
  margin: -12px 0 20px;
  padding: 11px 14px;
  border-radius: var(--radius-input);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

.auth-flash {
  background: #E6F4EE;
  border: 1px solid #B9DFCD;
  color: #0F4A33;
}

.auth-alert {
  background: #FCEDEC;
  border: 1px solid #F0C4C0;
  color: #8A1F17;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* If the script never runs (blocked, slow, or failed), the intro still gets out of
   the way and the form still appears, so sign-in can never be stuck behind it. */
.has-intro .loader-overlay {
  animation: introFallbackHide 0.38s ease 2.6s forwards;
}
.has-intro .container {
  animation: introFallbackShow 0.5s ease 2.6s forwards;
}
.has-intro.intro-js .loader-overlay,
.has-intro.intro-js .container {
  animation: none;
}

@keyframes introFallbackHide {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
@keyframes introFallbackShow {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .has-intro .container { animation: none; }
}