/*
 * forms.css — shared form primitives across hub + satellite pages.
 * Login card · inputs (6 explicit states) · field labels · buttons (5 sizes) · messages.
 *
 * v5.1.0 (Phase C — Figma-aligned):
 *   - .input rebuilt with 6 explicit states (default/filled/focus/disabled/error/success)
 *     per UI-Components.pdf reference
 *   - .field-label standardized to 14px semibold; .field-label--required adds * marker
 *   - .btn / .sat-btn now have size modifiers --xs/sm/md/lg/xl
 *   - .success-msg companion to .error-msg added
 *
 * Requires tokens.css. Visual change is intentional in Phase C; C6 gates the indigo→cyan
 * chrome migration via body[data-recolor="v5.1"].
 */

/* ── Login card ──────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5, 20px);
}
.login-card {
  background: var(--surface-raised, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl, 14px);
  padding: var(--space-7, 36px);
  width: 100%;
  max-width: 420px;
  box-shadow: 0 4px 24px rgba(19, 20, 124, 0.06);
}
.login-title {
  font-family: var(--font-display, 'Be Vietnam Pro', sans-serif);
  font-size: var(--font-h6, 22px);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--tracking-tight, -0.02em);
  color: var(--hub-chrome-fg, var(--indigo));
  margin-bottom: var(--space-2, 8px);
}
.login-sub {
  font-size: var(--font-body-2, 14px);
  color: var(--text-muted, var(--muted));
  margin-bottom: var(--space-6, 24px);
  line-height: var(--line-height-base, 1.55);
}

/* ── Form field primitives ──────────────────────────────────── */
.field-group { margin-bottom: var(--space-4, 14px); }

/* v5.1: standardize to 14px semibold per Figma. Optional --required marker. */
.field-label {
  display: block;
  font-family: var(--font-display, 'Be Vietnam Pro', sans-serif);
  font-size: var(--font-label, 14px);
  line-height: 16px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-primary, var(--text));
  margin-bottom: var(--space-2, 6px);
}
.field-label--required::after {
  content: " *";
  color: var(--error, #D64545);
  font-weight: var(--font-weight-bold, 700);
}

/* v5.1: 6-state form input (Figma UI-Components.pdf reference). */
/* State 1 — DEFAULT: neutral-200 border, placeholder neutral-500 */
.input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-body-1, 15px);
  line-height: var(--line-body-1, 24px);
  color: var(--text-primary, var(--text));
  background: var(--neutral-0, #fff);
  border: 1.5px solid var(--neutral-200, var(--border));
  border-radius: var(--radius-md, 8px);
  transition: border-color var(--duration-fast, 0.15s), box-shadow var(--duration-fast, 0.15s), background var(--duration-fast, 0.15s);
}
.input::placeholder { color: var(--neutral-500, #808080); }

/* State 2 — FILLED: same border, value text neutral-900 (handled implicitly via :not(:placeholder-shown)) */

/* State 3 — FOCUS: primary-500 border + soft cyan ring (keyboard only) */
.input:focus { border-color: var(--primary-500, var(--cyan)); outline: none; }
.input:focus-visible {
  border-color: var(--primary-500, var(--cyan));
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 173, 238, 0.15);
}

/* State 4 — DISABLED: disabled-bg fill, disabled-text label */
.input:disabled,
.input[disabled],
.input[aria-disabled="true"] {
  background: var(--disabled-bg, #F0F2F3);
  color: var(--disabled-text, #A8A8A8);
  border-color: var(--neutral-200, var(--border));
  cursor: not-allowed;
}
.input:disabled::placeholder { color: var(--disabled-text, #A8A8A8); }

/* State 5 — ERROR: error border + error-light fill + .error-msg below */
.input.error,
.input[aria-invalid="true"] {
  border-color: var(--error, #D64545);
  background: var(--error-light, #FDEBEC);
}
.input.error:focus-visible,
.input[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.18);
}

/* State 6 — SUCCESS: success border + success-light fill + .success-msg below */
.input--success,
.input.success {
  border-color: var(--success, #2BA24C);
  background: var(--success-light, #E7F6EC);
}
.input--success:focus-visible,
.input.success:focus-visible {
  box-shadow: 0 0 0 3px rgba(43, 162, 76, 0.18);
}

/* Companion messages — sit directly below .input */
.error-msg,
.success-msg {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-caption, 12px);
  line-height: var(--line-caption, 16px);
  margin-top: var(--space-2, 8px);
  min-height: 16px;
}
.error-msg   { color: var(--error, #D64545); }
.success-msg { color: var(--success, #2BA24C); }

/* ── Button primitives ──────────────────────────────────────── */
/*
 * v5.1: 5 button sizes (xs/sm/md/lg/xl) per Figma UI-Components.pdf.
 * .btn defaults to --md. Add modifier .btn--sm / .btn--xl etc. to scale.
 * Document: .btn .icon-right is the convention for the right-arrow `→` indicator
 * on primary CTAs (see Figma reference).
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 18px;
  height: 40px;             /* default = --md */
  border-radius: var(--radius-md, 8px);
  border: 1.5px solid transparent;
  font-family: var(--font-display, 'Be Vietnam Pro', sans-serif);
  font-size: var(--font-button-md, 14px);
  font-weight: var(--font-weight-semibold, 600);
  cursor: pointer;
  transition: all var(--duration-fast, 0.15s);
  background: transparent;
  color: var(--text-primary, var(--text));
  white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--border); background: var(--neutral-0, #fff); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }

/* Size modifiers */
.btn--xs { height: 28px; padding: 0 10px; font-size: 12px; }
.btn--sm,
.btn-sm   { height: 32px; padding: 0 12px; font-size: 13px; }
.btn--md  { height: 40px; padding: 0 18px; font-size: 14px; }   /* default */
.btn--lg  { height: 44px; padding: 0 20px; font-size: 15px; }
.btn--xl  { height: 48px; padding: 0 24px; font-size: var(--font-button-lg, 16px); }

/* Variants */
.btn-primary {
  background: var(--primary-500, var(--cyan));
  color: var(--text-on-brand, #fff);
  border-color: var(--primary-500, var(--cyan));
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-700, var(--indigo-dark));
  border-color: var(--primary-700, var(--indigo-dark));
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted, var(--muted));
  border-color: var(--border);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--text-primary, var(--text));
  border-color: var(--text-muted, var(--muted));
}

.btn-full { width: 100%; }

/* Right-arrow indicator (primary CTA convention) — Figma reference */
.btn .icon-right { margin-left: 4px; transform: translateY(0); }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-sm, 7px);
  border: 1.5px solid var(--border);
  background: var(--neutral-0, #fff);
  color: var(--text-muted, var(--muted));
  cursor: pointer;
  transition: all var(--duration-fast, 0.12s);
}
.btn-icon:hover:not(:disabled) {
  color: var(--text-primary, var(--text));
  border-color: var(--text-primary, var(--text));
}
.btn-icon:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-icon-danger:hover:not(:disabled) {
  color: var(--error, #EF4444);
  border-color: var(--error, #EF4444);
  background: rgba(239, 68, 68, 0.05);
}