/* 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;
}

/* Whatever the keyboard reaches is ringed in the accent, over and above
   any focus border of its own; a rule that clears the outline for the
   pointer must not clear this. A focus moved to a container by script
   (tabindex -1, the modals) is left plain. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* A field's ring lies on its border rather than outside it: a field is
   focused by every click and by autofocus, so a ring standing off it
   would be the loudest thing on the page as often as not */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: -1px;
}

/* A field focused as the page lands (the home search, the add-task
   input) is marked so in its markup, since a script marking it would
   run after the ring had drawn; the browser counts that focus as the
   keyboard's, so the ring is held back until the first key or pointer
   (main.js), the field's own focus border marking it till then */
.is-autofocused:focus-visible {
  outline: none;
}

.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);
}


/* A switch: a pill with a knob that slides right when it is on, in the
   selected colour. Here rather than in app-settings.css, since the task
   form has them too */
.switch {
  background: var(--background-subnav);
  border: 1px solid var(--border-medium);
  border-radius: 1rem;
  cursor: pointer;
  height: 1.25rem;
  padding: 0;
  position: relative;
  transition: background 0.15s;
  width: 2.25rem;
}

.switch-knob {
  background: var(--background-section);
  border: 1px solid var(--border-dark);
  border-radius: 50%;
  display: block;
  height: 0.875rem;
  left: 0.125rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: left 0.15s;
  width: 0.875rem;
}

/* the track when on: a theme may name a deeper tint than its selected
   wash (Matcha does), or leave it to the wash */
.switch.is-on {
  background: var(--switch-on, var(--selected-background));
  border-color: var(--switch-on-border, var(--selected-border));
}

.switch.is-on .switch-knob {
  border-color: var(--switch-on-border, var(--selected-border));
  left: calc(100% - 0.875rem - 0.125rem - 2px);
}

.switch:disabled {
  cursor: default;
  opacity: 0.5;
}

/* A switch in a form's grid stands as tall as the fields beside it, so it
   sits on their centre line, with any word for its state after it */
.form-compact .switch-field {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  min-height: 2.5rem;
}

/* ------------------------------------------------------------------------- */
/* 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. The task's Folder starts the row after them, with
   Status and Archived beside it, however much of the repeat shows */
@media (width >= 768px) {
  .col3 .field-folder {
    grid-column: 1;
  }

  .col3 .field-until,
  .col3 .field-count {
    grid-column: 3;
  }

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


/* ------------------------------------------------------------------------- */
/* Event form (templates/calendar/form.html): here, not in app-calendar.css,
   as it opens from the home page's calendar card too */
/* ------------------------------------------------------------------------- */

.event-note {
  color: var(--color-muted);
  margin: 0 0 1rem;
}

.event-repeats i {
  margin-right: 0.25rem;
}

/* The event form's grid: six columns on a wide screen, so a pair takes
   half a row each and a trio a third. Description and location have a row
   each; the date and end date pair up, as do the times; Repeat, Every and
   Ends share a row, and Last day or Times sits under Ends. A phone has one
   column. */
@media (width >= 768px) {
  .event-form {
    grid-template-columns: repeat(6, 1fr);
  }

  .event-form .form-group {
    grid-column: span 3;
  }

  .event-form .field-description,
  .event-form .field-location,
  .event-form .field-weekdays {
    grid-column: span 6;
  }

  .event-form .field-repeat,
  .event-form .field-interval,
  .event-form .field-ends {
    grid-column: span 2;
  }

  .event-form .field-until,
  .event-form .field-count {
    grid-column: 5 / span 2;
  }
}

/* The Apply to choices read across in a row */
.repeat-scope [id$="scope"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

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

/* Apply to, in the footer between Delete and Save: centred in the space
   between them */
.modal-footer .repeat-scope {
  display: flex;
  flex: 1;
  justify-content: center;
  white-space: nowrap;
}