/*
 * GARUDA 10.2E4 — Login Blue White
 * Frontend-only login palette correction.
 * No JavaScript and no backend changes.
 */

:root {
  --g4-blue-950: #071629;
  --g4-blue-900: #0b1f3a;
  --g4-blue-850: #102b4e;
  --g4-blue-800: #12375f;
  --g4-blue-700: #174a7a;
  --g4-blue-600: #1e63a7;
  --g4-blue-500: #2e7fc2;
  --g4-blue-300: #78b8f1;
  --g4-blue-100: #eaf3fb;
  --g4-blue-050: #f4f7fb;
  --g4-ink: #152033;
  --g4-muted: #5f6f85;
  --g4-line: #dbe4ef;
}

/* Page background while login is visible. */
html body:has(#login-view.login-shell:not(.hidden)) {
  background:
    radial-gradient(
      circle at 8% 8%,
      rgba(46, 127, 194, .13),
      transparent 31rem
    ),
    radial-gradient(
      circle at 92% 92%,
      rgba(30, 99, 167, .09),
      transparent 29rem
    ),
    var(--g4-blue-050) !important;
}

/* Main login container. */
html body #login-view.login-shell {
  border: 1px solid rgba(255, 255, 255, .96) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 26px 82px rgba(7, 22, 41, .16) !important;
}

/* White-blue left panel. */
html body #login-view.login-shell .login-panel {
  position: relative !important;
  color: var(--g4-ink) !important;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(120, 184, 241, .15),
      transparent 23rem
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      var(--g4-blue-050) 100%
    ) !important;
}

/* Eliminate the old pink decoration layer. */
html body #login-view.login-shell .login-panel::before {
  background:
    linear-gradient(
      135deg,
      rgba(46, 127, 194, .10),
      rgba(120, 184, 241, .035)
    ) !important;
  opacity: 1 !important;
}

/* GARUDA logo and brand heading. */
html body #login-view.login-shell .login-panel .brand-mark {
  background:
    linear-gradient(
      145deg,
      var(--g4-blue-700),
      var(--g4-blue-500)
    ) !important;
  box-shadow: 0 13px 30px rgba(30, 99, 167, .26) !important;
}

html body #login-view.login-shell .login-panel .brand-row h1 {
  color: var(--g4-blue-950) !important;
  -webkit-text-fill-color: var(--g4-blue-950) !important;
}

html body #login-view.login-shell .login-panel .eyebrow {
  color: var(--g4-blue-600) !important;
  -webkit-text-fill-color: var(--g4-blue-600) !important;
}

/* Security badge. */
html body #login-view.login-shell .login-panel .secure-pill {
  border: 1px solid #c9def0 !important;
  color: var(--g4-blue-700) !important;
  -webkit-text-fill-color: var(--g4-blue-700) !important;
  background: var(--g4-blue-100) !important;
  box-shadow: none !important;
}

/* Login copy. */
html body #login-view.login-shell .login-panel .login-copy h2 {
  color: var(--g4-blue-950) !important;
  -webkit-text-fill-color: var(--g4-blue-950) !important;
}

html body #login-view.login-shell .login-panel .login-copy p {
  color: var(--g4-muted) !important;
  -webkit-text-fill-color: var(--g4-muted) !important;
}

/* Form labels and fields. */
html body #login-view.login-shell .login-panel .login-form label,
html body #login-view.login-shell .login-panel .login-form label > span {
  color: var(--g4-ink) !important;
  -webkit-text-fill-color: var(--g4-ink) !important;
}

html body #login-view.login-shell .login-panel .login-form input {
  border: 1px solid var(--g4-line) !important;
  color: var(--g4-ink) !important;
  -webkit-text-fill-color: var(--g4-ink) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html body #login-view.login-shell .login-panel
  .login-form input::placeholder {
  color: #8b98aa !important;
  -webkit-text-fill-color: #8b98aa !important;
}

html body #login-view.login-shell .login-panel .login-form input:focus {
  border-color: var(--g4-blue-600) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(30, 99, 167, .12) !important;
}

/* Password visibility control. */
html body #login-view.login-shell .login-panel
  .password-wrap button {
  color: var(--g4-blue-700) !important;
  -webkit-text-fill-color: var(--g4-blue-700) !important;
  background: var(--g4-blue-100) !important;
}

html body #login-view.login-shell .login-panel
  .password-wrap button:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--g4-blue-600) !important;
}

/* Main login button. */
html body #login-view.login-shell .login-panel .primary-button {
  border: 1px solid var(--g4-blue-600) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--g4-blue-800),
      var(--g4-blue-500)
    ) !important;
  box-shadow: 0 15px 32px rgba(30, 99, 167, .24) !important;
}

html body #login-view.login-shell .login-panel
  .primary-button:hover:not(:disabled) {
  background:
    linear-gradient(
      135deg,
      var(--g4-blue-700),
      var(--g4-blue-500)
    ) !important;
  transform: translateY(-1px);
}

html body #login-view.login-shell .login-panel
  .primary-button:disabled {
  opacity: .66 !important;
}

/* Connection indicator text. */
html body #login-view.login-shell .login-panel .connection {
  color: var(--g4-muted) !important;
  -webkit-text-fill-color: var(--g4-muted) !important;
}

/* Keep the right visual strongly navy-blue. */
html body #login-view.login-shell .login-visual {
  background:
    radial-gradient(
      circle at 86% 3%,
      rgba(120, 184, 241, .13),
      transparent 22rem
    ),
    linear-gradient(
      145deg,
      var(--g4-blue-950) 0%,
      var(--g4-blue-900) 48%,
      var(--g4-blue-800) 100%
    ) !important;
}

html body #login-view.login-shell .login-visual::before {
  border-color: rgba(120, 184, 241, .32) !important;
  box-shadow:
    0 0 0 60px rgba(120, 184, 241, .055),
    0 0 0 120px rgba(120, 184, 241, .028) !important;
}

html body #login-view.login-shell .login-visual .glass-card {
  border-color: rgba(120, 184, 241, .30) !important;
  background: rgba(255, 255, 255, .11) !important;
  box-shadow: 0 24px 64px rgba(3, 18, 52, .31) !important;
}

/* Responsive login remains white-blue. */
@media (max-width: 760px) {
  html body #login-view.login-shell {
    width: min(100% - 22px, 620px) !important;
    margin: 11px auto !important;
    border-radius: 24px !important;
  }

  html body #login-view.login-shell .login-panel {
    background:
      linear-gradient(
        145deg,
        #ffffff,
        var(--g4-blue-050)
      ) !important;
  }
}