/* ═══════════════════════════════════════════════════════════════════
   GP Assurances — Login UI (design-system v1)
   Single authoritative login modal rendered by api-client.js
   (window.__gpAuthUI). Uses the global design tokens from
   design-system.css — same brand blue, radii, borders and type scale
   as the rest of the application. Loaded after design-system.css so it
   wins over the legacy .cloud-auth-* rules in styles.css.
   ═══════════════════════════════════════════════════════════════════ */

.cloud-auth-modal {
  position: fixed;
  inset: 0;
  z-index: var(--gp-z-modal, 1000);
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(6px);
}

.cloud-auth-modal.hidden {
  display: none;
  pointer-events: none;
}

.cloud-auth-card {
  width: min(400px, calc(100vw - 32px));
  padding: 28px 28px 24px;
  border: 1px solid var(--gp-border, #E8ECF2);
  border-radius: var(--gp-radius, 12px);
  background: var(--gp-white, #FFFFFF);
  box-shadow: var(--gp-shadow-md, 0 4px 12px rgba(0,0,0,0.06)), 0 24px 64px rgba(15, 23, 42, 0.18);
  color: var(--gp-text, #0F172A);
  font-family: inherit;
}

/* Brand lockup */
.cloud-auth-card .auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.cloud-auth-card .auth-brand svg { flex-shrink: 0; display: block; }
.cloud-auth-card .auth-brand-text {
  font-size: var(--gp-fs-title, 22px);
  font-weight: var(--gp-fw-title, 600);
  color: var(--gp-brand, #0B63F6);
  letter-spacing: 0.02em;
}

.cloud-auth-card h2 {
  margin: 0 0 4px;
  font-size: var(--gp-fs-section, 15px);
  font-weight: var(--gp-fw-section, 600);
  text-align: center;
  color: var(--gp-text, #0F172A);
}

.cloud-auth-card p {
  margin: 0 0 16px;
  color: var(--gp-muted, #64748B);
  line-height: 1.5;
  text-align: center;
  font-size: var(--gp-fs-body, 12px);
}

/* Labeled fields — same structure as .form-grid in the design system */
.cloud-auth-card .cloud-auth-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.cloud-auth-card .cloud-auth-field > span {
  font-size: var(--gp-fs-helper, 11px);
  font-weight: var(--gp-fw-th, 500);
  color: var(--gp-text2, #1E293B);
  line-height: 1.25;
}
.cloud-auth-card input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--gp-border3, #E2E8F0);
  border-radius: var(--gp-radius-sm, 8px);
  padding: 0 12px;
  outline: none;
  margin-bottom: 0;
  background: var(--gp-white, #fff);
  color: var(--gp-text2, #1E293B);
  font-size: var(--gp-fs-body, 12px);
  transition: border-color 0.15s;
}
.cloud-auth-card input:focus {
  border-color: var(--gp-brand, #0B63F6);
}
.cloud-auth-card input::placeholder { color: var(--gp-muted2, #94A3B8); }

/* Primary action — mirrors button.primary from the design system */
.cloud-auth-card button#apiLoginSubmit {
  width: 100%;
  height: 36px;
  margin-top: 6px;
  border: 1px solid var(--gp-brand, #0B63F6);
  border-radius: var(--gp-radius-sm, 8px);
  color: var(--gp-white, #fff);
  background: var(--gp-brand, #0B63F6);
  font-weight: var(--gp-fw-btn, 500);
  font-size: var(--gp-fs-btn, 12px);
  cursor: pointer;
  transition: background 0.15s;
}
.cloud-auth-card button#apiLoginSubmit:hover:not(:disabled) {
  background: var(--gp-brand-hover, #0851D4);
}
.cloud-auth-card button#apiLoginSubmit:disabled {
  opacity: 0.55;
  cursor: default;
}

.cloud-auth-card .cloud-auth-secondary {
  color: var(--gp-text2, #1E293B);
  background: var(--gp-bg2, #F8FAFD);
  border: 1px solid var(--gp-border3, #E2E8F0);
}

.cloud-auth-error {
  min-height: 16px;
  margin-top: 10px;
  color: var(--gp-red, #DC2626);
  font-weight: 400;
  font-size: var(--gp-fs-helper, 11px);
  text-align: center;
}

.cloud-auth-secure {
  margin: 10px 0 0;
  color: var(--gp-muted2, #94A3B8);
  font-size: var(--gp-fs-helper, 11px);
  text-align: center;
}