/* ============================================================
   css/forms.css — Form Controls, Auth Card, Settings
   ============================================================ */

/* ── FORM GROUPS ─────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1.1rem; }
.form-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-secondary);
}

.form-control {
  width: 100%; padding: 10px 14px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px; font-family: 'Inter', sans-serif;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:hover  { border-color: var(--border-hover); }
.form-control:focus  {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-glow);
}
.form-control.is-error { border-color: var(--red); }
.form-control:disabled {
  opacity: .5; cursor: not-allowed;
  background: var(--modal-choice-bg);
}

/* Number inputs — hide spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Select */
select.form-control {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2364748b' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  padding-right: 36px;
}
select.form-control option { background: var(--bg-elevated); color: var(--text-primary); }

/* Hint & error text */
.form-hint  { font-size: 11px; color: var(--text-muted); }
.form-error { font-size: 12px; color: var(--red-light); }

/* ── INPUT GROUP (prefix/suffix) ─────────────────────────── */
.input-group {
  display: flex; align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface-subtle);
  transition: border-color .2s, box-shadow .2s;
}
.input-group:focus-within {
  border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-glow);
}
.input-group-text {
  padding: 10px 12px; background: var(--surface-subtle);
  border-right: 1px solid var(--border);
  color: var(--text-secondary); font-size: 13px; font-weight: 500;
  display: flex; align-items: center; white-space: nowrap; flex-shrink: 0;
}
.input-group-suffix {
  border-right: none; border-left: 1px solid var(--border);
}
.input-group .form-control { border: none; background: transparent; box-shadow: none !important; }
.input-group .form-control:focus { box-shadow: none !important; }

/* Password visibility toggle */
.password-toggle {
  cursor: pointer;
  color: var(--text-muted);
  border: none;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  padding: 0 12px;
  transition: color .2s;
}
.password-toggle:hover { color: var(--text-primary); }
.password-toggle:focus { outline: none; }
.password-toggle:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: -2px;
  color: var(--purple-light);
}

/* ── APP BACKGROUND ──────────────────────────────────────── */
.app-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.app-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: authOrbFloat 24s ease-in-out infinite;
}
.app-bg-orb--purple {
  width: 420px;
  height: 420px;
  top: -120px;
  left: -80px;
  background: rgba(124,58,237,.22);
  animation-delay: 0s;
}
.app-bg-orb--emerald {
  width: 380px;
  height: 380px;
  bottom: -100px;
  right: -60px;
  background: rgba(16,185,129,.16);
  animation-delay: -8s;
}
.app-bg-orb--indigo {
  width: 300px;
  height: 300px;
  top: calc(45% - 150px);
  left: calc(55% - 150px);
  background: rgba(79,70,229,.12);
  animation-delay: -16s;
}

[data-theme="dark"] .app-bg-orb--purple { background: rgba(124,58,237,.35); }
[data-theme="dark"] .app-bg-orb--emerald { background: rgba(16,185,129,.22); }
[data-theme="dark"] .app-bg-orb--indigo { background: rgba(79,70,229,.2); }

.app-bg-grid {
  position: absolute;
  inset: 0;
  opacity: .035;
  background-image:
    repeating-linear-gradient(0deg, var(--text-primary) 0, var(--text-primary) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, var(--text-primary) 0, var(--text-primary) 1px, transparent 1px, transparent 48px);
}
[data-theme="dark"] .app-bg-grid { opacity: .06; }

.app-bg-chart {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-42%);
  width: min(680px, 90vw);
  height: 200px;
  opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 680 200' fill='none'%3E%3Cpath d='M0 160 L80 140 L160 150 L240 110 L320 120 L400 70 L480 85 L560 40 L680 20' stroke='%237c3aed' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0 160 L80 140 L160 150 L240 110 L320 120 L400 70 L480 85 L560 40 L680 20 L680 200 L0 200 Z' fill='%237c3aed' fill-opacity='0.15'/%3E%3C/svg%3E") center bottom / contain no-repeat;
}
[data-theme="dark"] .app-bg-chart { opacity: .12; }

/* ── AUTH LAYOUT ─────────────────────────────────────────── */
.auth-wrapper {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-modal);
  backdrop-filter: blur(8px);
}
[data-theme="dark"] .auth-card {
  backdrop-filter: blur(20px);
  box-shadow: none;
}
.auth-logo { text-align: center; margin-bottom: 2.25rem; }
.auth-logo-icon { font-size: 36px; margin-bottom: 8px; }
.auth-logo-title {
  font-size: 22px; font-weight: 800;
  background: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.auth-logo-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.auth-heading { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.auth-subheading { font-size: 13px; color: var(--text-secondary); margin-bottom: 1.5rem; }
.auth-footer-text {
  text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 1.5rem;
}
.auth-footer-text a { color: var(--purple-light); text-decoration: none; }
.auth-footer-text a:hover { text-decoration: underline; }

/* ── SETTINGS SECTIONS ───────────────────────────────────── */
.settings-nav {
  display: flex; gap: 4px; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.settings-nav-btn {
  padding: 8px 16px; font-size: 13px; font-weight: 500;
  color: var(--text-secondary); border: none; background: none;
  cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: all .2s;
}
.settings-nav-btn:hover   { color: var(--text-primary); }
.settings-nav-btn.active  { color: var(--purple-light); border-bottom-color: var(--purple); }

.settings-panel { display: none; }
.settings-panel.active { display: block; }

.settings-section { margin-bottom: 2rem; }
.settings-section-title {
  font-size: 15px; font-weight: 700; margin-bottom: 4px;
}
.settings-section-desc {
  font-size: 13px; color: var(--text-secondary); margin-bottom: 1.25rem;
}

/* Masked secret fields */
.mask-toggle { cursor: pointer; color: var(--text-muted); padding: 0 10px; }
.mask-toggle:hover { color: var(--text-primary); }