/* EPFL theme for Indico -- form controls.

   Elements' input (elements.min.css):
     .form-control { padding:.375rem .75rem; font-size:1rem; line-height:1.5;
                     color:#212121; background-color:#fff;
                     border:1px solid #8e8e8e; border-radius:2px;
                     height:auto }
     .form-control:focus { border-color:#212121; outline:0;
                           box-shadow:0 0 0 1px #d5d5d5 }
     .form-control::placeholder { color:#707070; opacity:1 }
     .form-control:disabled,[readonly] { background-color:#e6e6e6 }
     label { margin-bottom:.5rem }  .form-group { margin-bottom:1rem }

   The distinctive parts are the mid-grey 1px border (Indico ships
   borderless inputs on a tinted ground -- verified live: border
   "0px none"), the near-square 2px corner, and the focus state as a
   black border plus a soft grey ring instead of a colour change.

   Padding is given in em so it tracks Indico's 13px base instead of
   fighting it, which keeps row heights inside tables and the timetable. */

input[type='text'],
input[type='search'],
input[type='email'],
input[type='password'],
input[type='url'],
input[type='tel'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='datetime-local'],
textarea,
select,
.ui.input > input,
.ui.selection.dropdown,
.ui.form input:not([type]),
.ui.form input[type='text'],
.ui.form textarea {
  font-family: 'SuisseIntl', Arial, sans-serif;
  color: var(--epfl-black);
  background-color: var(--epfl-white);
  border: 1px solid var(--epfl-gray-500);
  border-radius: var(--epfl-radius);
  padding: 0.375em 0.75em;
  line-height: 1.5;
  box-shadow: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input[type='text']:focus,
input[type='search']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='url']:focus,
input[type='tel']:focus,
input[type='number']:focus,
input[type='date']:focus,
input[type='time']:focus,
input[type='datetime-local']:focus,
textarea:focus,
select:focus,
.ui.input > input:focus,
.ui.selection.dropdown:focus,
.ui.form input[type='text']:focus,
.ui.form textarea:focus {
  color: var(--epfl-black);
  background-color: var(--epfl-white);
  border-color: var(--epfl-black);
  outline: 0;
  box-shadow: 0 0 0 1px var(--epfl-gray-300);
}

input::placeholder,
textarea::placeholder,
.ui.form input::placeholder,
.ui.form textarea::placeholder {
  color: var(--epfl-gray-600);
  opacity: 1;
}

input:disabled,
input[readonly],
textarea:disabled,
textarea[readonly],
select:disabled {
  background-color: var(--epfl-gray-200);
  color: var(--epfl-gray-600);
  opacity: 1;
}

/* Elements' label/field rhythm. Indico already has its own field grid in
   management forms, so only the generic spacing is set. */
.form-group {
  margin-bottom: 1em;
}

.form-field label,
.i-form-field label,
label.form-field-label {
  margin-bottom: 0.5em;
  color: var(--epfl-black);
}

/* Checkboxes and radios take the EPFL red as their accent, which is the
   one-property way to brand them consistently across browsers. */
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--epfl-red);
}

/* Indico's search field in the header sits on a tinted ground; give it the
   same EPFL border treatment so it does not read as a different system. */
.search-box input,
#search-input,
.global-menu input[type='text'] {
  border: 1px solid var(--epfl-gray-500);
  border-radius: var(--epfl-radius);
  background: var(--epfl-white);
}

/* Elements keeps its focus ring visible for keyboard users on every
   control, not just buttons. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}