/* ═══════════════════════════════════════
   INPUTS — Form elements
   ═══════════════════════════════════════ */

.form-group {
  margin-bottom: var(--y-space-xl);
}

.form-group label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--y-space-xs);
  margin-bottom: var(--y-space-s);
  font-size: var(--y-font-s);
  font-weight: var(--y-weight-medium);
}

.form-control {
  width: 100%;
  padding: var(--y-space-m);
  background: var(--y-color-bg-subtle);
  border-radius: var(--y-radius-xl);
  border: 2px solid transparent;
  transition: border-color var(--y-transition-fast);
  font-size: var(--y-font-m);
}

.form-control:focus {
  border-color: rgba(139, 105, 20, 0.3);
}

.form-control.error {
  border-color: var(--y-color-error-border);
  background: rgba(254, 242, 242, 0.5);
}

.form-error {
  color: var(--y-color-danger);
  font-size: var(--y-font-s);
  margin-top: var(--y-space-s);
}

.form-success {
  color: var(--y-color-success);
  font-size: var(--y-font-s);
  margin-top: var(--y-space-s);
}

/* ── Form Row ─────────────── */
.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--y-space-l);
}

/* ── Filter Select ────────── */
.filter-select {
  appearance: none;
  padding: var(--y-space-s) var(--y-space-3xl) var(--y-space-s) var(--y-space-l);
  border-radius: var(--y-radius-m);
  background: var(--y-color-bg-subtle);
  cursor: pointer;
  font-size: var(--y-font-s);
  font-family: inherit;
}

/* ── Input With Icon ──────── */
.input-with-icon {
  position: relative;
}

.input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--y-color-text-muted);
}

/* ── Checkbox & Radio ─────── */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--y-color-primary);
}

/* ── Auth Form Styles ─────── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--y-space-5xl) 0;
  padding-top: var(--y-space-8xl);
}

.auth-container {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  padding: 0 var(--y-space-l);
}

.auth-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--y-color-primary), var(--y-color-accent));
  border-radius: var(--y-radius-l);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--y-space-l);
  color: var(--y-color-white);
}

.auth-card {
  background: var(--y-color-white);
  border-radius: var(--y-radius-2xl);
  padding: var(--y-space-xxl);
  border: 1px solid var(--y-color-border);
  box-shadow: var(--y-shadow-s);
}

/* ═══════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════ */

@media (max-width: 1200px) {
  .form-control {
    padding: var(--y-space-m);
  }
}

@media (min-width: 768px) {
  .auth-card {
    padding: var(--y-space-3xl);
  }
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .form-group label {
    font-size: var(--y-font-s);
  }

  .auth-page {
    padding: var(--y-space-3xl) 0;
    min-height: 70vh;
  }
}

@media (max-width: 480px) {
  .form-control {
    padding: var(--y-space-m);
    font-size: var(--y-font-m);
    min-height: 44px;
  }

  .auth-container {
    padding: 0 var(--y-space-m);
  }
}