/* -------------------------------------------------------- */
/* 🔹 Input Helpers                                         */
/* -------------------------------------------------------- */
/* Shared container styling for all input components         */
/* Mirrors InputContainer from input_helpers.dart            */


/* -------------------------------------------------------- */
/* 🔹 Input Container                                       */
/* -------------------------------------------------------- */
/* Surface color, outline border, medium radius              */
/* Add alongside component-specific class on the element     */

.input-container {
  background-color: var(--color-surface);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-medium);
  font-family: var(--font-family);
  font-size: var(--text-body-medium);
  color: var(--color-on-surface);
}

.input-container:focus,
.input-container:focus-within {
  outline: none;
  border-color: var(--color-primary);
}


/* -------------------------------------------------------- */
/* 🔹 Input Label                                           */
/* -------------------------------------------------------- */
/* Mirrors InputLabel from input_helpers.dart                */

.input-label {
  font-size: var(--text-body-small);
  color: var(--color-on-surface-variant);
}


/* -------------------------------------------------------- */
/* 🔹 Input Hint                                           */
/* -------------------------------------------------------- */
/* Hint text below input fields                            */
/* Mirrors InputHint from input_helpers.dart                */

.input-hint {
  margin-top: var(--space-xs);
  font-size: 11px;
  color: var(--color-subtitle);
}