/* website/static/css/base/forms.css */

/* ------------------------------------------------------------
   GLOBAL FORM SYSTEM (Theme-Aware + Glass + Unified UX)
   website/static/css/base/forms.css
------------------------------------------------------------
   PURPOSE:
   A fully unified, theme-aware form styling system that matches
   your glass cards, buttons, alerts, and dashboard components.

   GOALS:
   ✓ 100% variable-driven (no hardcoded colors)
   ✓ Consistent with global glass system
   ✓ Smooth focus states
   ✓ Clean validation styling
   ✓ Responsive scaling
------------------------------------------------------------ */


/* ============================================================
   1) BASE INPUT ELEMENTS
   Applies to: <input>, <textarea>, <select>
============================================================ */
input,
textarea,
select {
  width: 100%;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);

  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-base);

  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--glass-text);

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}



/* ============================================================
   2) FOCUS STATE
============================================================ */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 6px var(--color-gold);
}



/* ============================================================
   3) PLACEHOLDER
============================================================ */
::placeholder {
  color: var(--color-muted);
  opacity: 0.8;
}



/* ============================================================
   4) TEXTAREA
============================================================ */
textarea {
  min-height: 120px;
  resize: vertical;
}



/* ============================================================
   5) SELECT DROPDOWN
============================================================ */
select {
  appearance: none;
  padding-right: 2rem;

  background-image: url("data:image/svg+xml;utf8,<svg fill='%23FFD700' height='24' width='24' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1rem;
}



/* ============================================================
   6) CHECKBOXES & RADIOS
============================================================ */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
  margin-right: 0.5rem;
}



/* ============================================================
   7) LABELS
============================================================ */
label {
  display: inline-block;
  margin-bottom: 0.3rem;

  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--glass-text);
}



/* ============================================================
   8) VALIDATION STATES
============================================================ */
input.is-valid,
textarea.is-valid,
select.is-valid {
  border-color: var(--color-success);
}

input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: var(--color-danger);
}

.form-error {
  margin-top: 0.3rem;
  font-size: var(--font-size-small);
  color: var(--color-danger);
}

.form-success {
  margin-top: 0.3rem;
  font-size: var(--font-size-small);
  color: var(--color-success);
}



/* ============================================================
   9) BUTTONS INSIDE FORMS
============================================================ */
form .btn {
  margin-top: 1rem;
}



/* ============================================================
   10) RESPONSIVE ADJUSTMENTS
============================================================ */
@media (max-width: 768px) {
  input,
  textarea,
  select {
    font-size: 0.9rem;
    padding: 0.5rem 0.7rem;
  }
}

@media (max-width: 480px) {
  input,
  textarea,
  select {
    font-size: 0.85rem;
    padding: 0.45rem 0.6rem;
  }
}