/* base input styling */

input,
select,
textarea {
  background: var(--background-light);
  border: solid 1px var(--border-medium);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  outline: none;
  padding: 0.5rem 0.75rem;
}

button {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.25rem;
}

.large-form {
  padding-left: 0.8rem;
}

/* error messages */
form .errorlist {
  color: var(--urgent);
  margin: 0;
  padding: 0;
}

/* compact grid layout */

.form-compact {
  display: grid;
  gap: 1rem;
}

@media (width <= 767px) {
  .form-compact {
    gap: 1.25rem;
  }

  .form-compact input,
  .form-compact select,
  .form-compact textarea {
    font-size: 1rem;
    padding: 0.5rem;
  }
}

.form-compact .form-group label {
  display: block;
  margin-bottom: 0.5rem;
}

.form-compact select,
.form-compact input[type="text"],
.form-compact input[type="email"],
.form-compact input[type="date"],
.form-compact input[type="time"],
.form-compact textarea {
  width: 100%;
}

/* column variants — mobile-first single column */
.col2, .col3 { grid-template-columns: 1fr; }

@media (width >= 768px) {
  .col2 { grid-template-columns: 1fr 1fr; }
  .col3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* spanning — mobile: full-width */
.form-compact .form-group:has(div > .span2),
.form-compact .form-group:has(div > .span3),
.form-compact .span2,
.form-compact .span3 {
  grid-column: span 1;
}

/* spanning — desktop: multi-column */
@media (width >= 768px) {
  .form-compact .form-group:has(div > .span2),
  .form-compact .span2 { grid-column: span 2; }
  .form-compact .form-group:has(div > .span3),
  .form-compact .span3 { grid-column: span 3; }
}

/* checkbox fields */
.form-compact .form-group:has(input[type="checkbox"]) {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* file input */

input[type="file"],
input[type="file"].form-control {
  padding: 0;
}

input[type="file"]::file-selector-button {
  appearance: none;
  -moz-appearance: none;
  background: var(--background-control);
  border: none;
  border-right: solid 1px var(--border-medium);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  color: var(--color-primary);
  padding: 0.5rem 0.75rem;
  margin-right: 0.75rem;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background: var(--background-control);
}