/* base input styling */

input,
select,
textarea {
  background: var(--background-light);
  border: solid 1px var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  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);
}


/* ------------------------------------------------------------------------- */
/* Repeat fields (templates/components/repeat-fields.html), for events and   */
/* tasks alike                                                               */
/* ------------------------------------------------------------------------- */

/* A quiet note at the head of a form: how a recurring task repeats */
.form-note {
  color: var(--color-muted);
  margin: 0 0 1rem;
}

.repeat-summary i {
  margin-right: 0.25rem;
}

/* Repeat: the interval with its unit beside it ("2 weeks") */
.repeat-every {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

/* The number fills its column, the unit beside it */
.repeat-every input {
  flex: 1;
  min-width: 0;
}

.form-compact .repeat-count {
  width: 4rem;
}

/* The weekday boxes read across in a row. The form's checkbox rule
   centres a lone box in a column (and outranks a plain class, hence the
   :has here); these are a set. */
.form-compact .form-group.repeat-weekdays:has(input) {
  align-items: stretch;
  display: block;
}

.repeat-weekdays [id$="weekdays"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.repeat-weekdays label {
  align-items: center;
  display: inline-flex;
  gap: 0.25rem;
  margin: 0;
}

.form-compact .repeat-weekdays > label {
  margin-bottom: 0.5rem;
}

/* In a three-column form (the task form): Repeat, Every and Ends share a
   row, the last day or the count sits under Ends, and the weekdays have a
   row of their own */
@media (width >= 768px) {
  .col3 .field-until,
  .col3 .field-count {
    grid-column: 3;
  }

  .col3 .field-weekdays {
    grid-column: 1 / -1;
  }
}