/* Login page layout only — all colors/tokens come from css/style.css (loaded
   first) so this page is guaranteed to match the command center's theme
   instead of drifting out of sync with a second copy of the palette. */

body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(10,15,26,.90), rgba(10,15,26,.97)),
    url("../public/picture/nashik%20kumbh%20aerial%20view%20from%20drone.jpeg") center/cover no-repeat fixed;
}

.login-shell { width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px; align-items: center; }

.login-card { width: 100%; padding: 26px 26px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }

.login-brand { justify-content: center; margin-bottom: 4px; min-width: 0; }
.login-brand .brand-text { text-align: center; }

.login-divider { height: 1px; background: var(--border); margin: 16px 0 12px; }

.login-form { display: flex; flex-direction: column; }
.login-form .field-label:first-child { margin-top: 0; }
.login-form input {
  width: 100%; margin-top: 6px; padding: 9px 11px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  font-size: 12.5px; font-family: inherit;
}
.login-form input::placeholder { color: var(--text-faint); }
.login-form input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(56,189,248,.15); }

.captcha-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.captcha-box {
  flex: 1; min-height: 40px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--panel-2); display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; letter-spacing: 4px; color: var(--amber);
}
.refresh-btn {
  width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 7px;
  background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 16px; font-family: inherit;
}
.refresh-btn:hover { border-color: var(--blue); color: var(--blue); }

.login-submit { width: 100%; margin-top: 16px; padding: 10px; font-size: 12px; letter-spacing: .3px; }
.login-submit:hover { filter: brightness(1.08); }

.message { min-height: 16px; margin-top: 8px; font-size: 11.5px; text-align: center; }
.message.success { color: var(--green); }
.message.error { color: var(--red); }

.login-demo-hint {
  margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 10.5px; color: var(--text-faint); text-align: center; line-height: 1.6;
}
.login-demo-hint b { color: var(--text-dim); }

.login-footer-note { font-size: 10px; color: var(--text-faint); text-align: center; letter-spacing: .3px; }
.login-copyright { margin-top: 4px; }

/* ---------- Corner partner/co-branding logos ---------- */
.corner-logo { position: fixed; height: 65px; width: auto; z-index: 3; opacity: .95; }
.corner-top-left { top: 22px; left: 26px; }
.corner-bottom-left { bottom: 22px; left: 26px; height: 40px; }
.corner-bottom-right.ibm-badge {
  bottom: 20px; right: 26px; height: 74px; background: #fff; padding: 6px 10px;
  border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
@media (max-width: 620px) {
  .corner-logo { display: none; }
  .login-form input, .captcha-box, .refresh-btn { font-size: 16px; } /* prevents iOS Safari zoom-on-focus */
  body { padding: 16px; }
}