/*
 * Path: assets/css/forms.css
 * 說明：表單、按鈕、登入頁 LOGO 區塊與輸入欄位共用樣式。
 */

.form-group + .form-group {
  margin-top: var(--space-4);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text-soft);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}

.textarea {
  min-height: 120px;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: rgba(77, 163, 255, 0.55);
  box-shadow: var(--glow-primary);
  background: rgba(255,255,255,0.06);
}

.btn {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  transition: transform var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  color: #07111f;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  box-shadow: var(--glow-primary);
}

.btn--secondary {
  color: var(--color-text);
  background: rgba(255,255,255,0.05);
  border-color: var(--color-border);
}

.btn--danger {
  color: #fff;
  background: linear-gradient(135deg, #ff5d73, #ff7b5d);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.04);
  color: var(--color-text-soft);
}

.chip.is-active {
  color: #06101d;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  box-shadow: var(--glow-accent);
}

/* ===== login ===== */

.login-card {
  max-width: 520px;
  margin: 0 auto;
}

.login-card__head {
  text-align: center;
}

.login-logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-3);
}

.login-logo-img {
  display: block;
  width: auto;
  height: 88px;
  object-fit: contain;
}