/* ================================================================
   forms.css
   ================================================================ */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-md) var(--sp-lg); }
.form-grid .col-2 { grid-column: span 2; }

.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: var(--sp-md); }
.field label, .form-label { font-size: .82rem; font-weight: 600; color: var(--dark); }
.field .hint { font-size: .76rem; color: var(--muted); }
.required::after { content: ' *'; color: var(--danger); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=url], input[type=date], input[type=time],
input[type=search], input[type=datetime-local], select, textarea {
  width: 100%; font-family: var(--body-font); font-size: .92rem; color: var(--ink);
  background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: .55rem .7rem; transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 90px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(30,58,95,.12);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input[type=file] { font-size: .85rem; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7A8D' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2rem;
}

.checkbox-row, .radio-row { display: flex; align-items: center; gap: .5rem; }
.checkbox-row input, .radio-row input { width: auto; }
.checkbox-row label, .radio-row label { font-weight: 500; font-size: .9rem; }

.form-actions {
  display: flex; gap: var(--sp-sm); justify-content: flex-end;
  margin-top: var(--sp-lg); padding-top: var(--sp-lg); border-top: 1px solid var(--border);
}
.form-actions.left { justify-content: flex-start; }

fieldset { border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-md) var(--sp-lg); margin-bottom: var(--sp-lg); min-width: 0; }
legend { font-weight: 600; color: var(--dark); padding: 0 .5rem; font-size: .9rem; }

.toolbar {
  display: flex; gap: var(--sp-sm); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--sp-lg);
}
.toolbar .search-input { flex: 1 1 200px; min-width: 0; max-width: 360px; }
.toolbar select { width: auto; min-width: 130px; flex-shrink: 0; }
.toolbar .btn, .toolbar button { flex-shrink: 0; }