/* ============================================================
   04-form-inputs.css
   Text inputs, textareas, native selects

   - Removed bogus `select2-selection` selector (no dot, was
     targeting non-existent HTML element). Select2 has its own
     stylesheet at 06-form-select2.css.
   - Uses :where() inside input attribute selector to keep
     specificity manageable.
   - CSS Nesting used for placeholder/hover/focus.
   ============================================================ */

.dm-input,
.dm-input-text,
input:where(
  [type="text"],
  [type="email"],
  [type="tel"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="url"],
  [type="date"]
),
textarea,
select {
  background-color: var(--dm-light-l-1);
  border: 1px solid var(--dm-border);
  color: var(--dm-dark);
  font-family: "Code", monospace;
  padding: var(--dm-space-2xs) var(--dm-space-s);
  border-radius: var(--dm-border-radius-m);
  transition: border-color var(--dm-transition-m);
  width: 100%;
  box-sizing: border-box;

  &::placeholder {
    color: var(--dm-muted);
  }

  &:hover {
    border-color: var(--dm-primary);
  }

  &:focus {
    border-color: var(--dm-primary);
    outline: none;
  }
}

/* Native select dropdown — replace browser arrow with custom Lucide chevron */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a9aa8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--dm-space-s) center;
  background-size: 16px;
  padding-right: calc(var(--dm-space-s) * 2 + 16px);
  cursor: pointer;
}