/* ============================================================
   forms.css — Form controls, buttons, toggles
   ============================================================ */

.form-group { margin-bottom: 20px; }
.form-group.compact { margin-bottom: 16px; }
.auth-form .form-group { margin-bottom: 14px; }
.form-group label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--text-secondary); margin-bottom: 8px;
}

input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea {
  width: 100%; padding: 10px 14px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  color: var(--text-main); font-size: 14px; font-family: inherit;
  transition: all var(--transition-fast);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  background: rgba(255, 255, 255, 0.35);
}
input:disabled { opacity: .35; cursor: not-allowed; background: var(--bg-input); }
textarea { resize: vertical; min-height: 60px; line-height: 1.6; }

select {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23aeaeb2' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}

.form-row { display: flex; gap: 12px; }
.flex-1 { flex: 1; }
.form-help {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.form-help code {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0, 122, 255, .06);
  color: var(--primary);
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 11px;
}

.toggle-label {
  display: flex !important; align-items: center;
  justify-content: space-between; cursor: pointer;
}
.toggle-label span:first-child { color: var(--text); font-size: 15px; font-weight: 400; }
.toggle-label input { display: none; }
.toggle-switch {
  width: 51px; height: 31px;
  background: var(--bg-elevated); border: none;
  border-radius: 16px; position: relative;
  transition: background var(--transition);
  flex-shrink: 0;
}
.toggle-switch::after {
  content: ''; position: absolute;
  width: 27px; height: 27px;
  background: #fff; border-radius: 50%;
  top: 2px; left: 2px;
  transition: all var(--transition);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 0 1px rgba(0, 0, 0, .4);
}
.toggle-label input:checked + .toggle-switch {
  background: var(--success);
}
.toggle-label input:checked + .toggle-switch::after {
  transform: translateX(20px);
}

/* Buttons */
.btn {
  width: auto; padding: 11px 20px;
  border: none; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; font-family: inherit;
  cursor: pointer; transition: all var(--transition-fast);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  position: relative; overflow: hidden;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { background: var(--primary-dark); transform: scale(.98); }
.btn-primary:disabled, .btn-secondary:disabled {
  opacity: .35; cursor: not-allowed; transform: none;
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--text-secondary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover { background: rgba(0, 0, 0, .06); color: var(--text-main); }
.btn-secondary:active { background: rgba(0, 0, 0, .10); }
.btn-danger {
  background: var(--error); color: #fff;
}
.btn-danger:hover { background: rgba(255, 59, 48, 0.85); }
.auth-form .btn { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: 13px; width: auto; border-radius: 10px; }

.btn-icon {
  background: transparent; border: none;
  border-radius: 8px; color: var(--text-muted);
  cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.btn-icon:hover { color: var(--primary); background: var(--primary-light); }

.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }