/* ============================================================
   FORMS.CSS
   Opmaak voor formulieren, invoervelden, knoppen en tabellen
   ============================================================ */

/* ------------------------------------------------------------
   Algemene formulieren
------------------------------------------------------------ */

form {
  margin-bottom: 2rem;
}

/* Labels */

label {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-weight: 700;
}

/* ------------------------------------------------------------
   Tekstvelden, tekstareas, selectboxen
------------------------------------------------------------ */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="file"],
textarea,
select {
  width: 100%;
  max-width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;                 /* zelfde lettertype en grootte als de site */
  color: inherit;
  background-color: #fff;
  border: 1px solid #bbb;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Tekstvlak */

textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

/* Selectbox */

select {
  width: auto;
  min-width: 220px;
}

/* Checkboxen en radio's */

input[type="checkbox"],
input[type="radio"] {
  margin-right: 0.4rem;
}

/* ------------------------------------------------------------
   Focus-state
------------------------------------------------------------ */

input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: 2px solid #0073e6;
  outline-offset: 2px;
  border-color: #0073e6;
}

/* ------------------------------------------------------------
   Knoppen
------------------------------------------------------------ */

button,
input[type="submit"],
input[type="button"] {
  display: inline-block;
  padding: 0.65rem 1rem;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background-color: #222;
  border: 1px solid #222;
  border-radius: 4px;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: #0073e6;
  border-color: #0073e6;
}

/* ------------------------------------------------------------
   Ruimte tussen formulieronderdelen
------------------------------------------------------------ */

p {
  margin-top: 0;
}

/* ------------------------------------------------------------
   Tabellen in beheerpagina's
------------------------------------------------------------ */

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

th,
td {
  padding: 0.6rem;
  vertical-align: top;
  text-align: left;
  border: 1px solid #ccc;
}

th {
  font-weight: 700;
  background-color: #f5f5f5;
}

/* Preview-afbeeldingen in tabellen */

table img {
  max-width: 120px;
  height: auto;
  display: block;
}

/* ------------------------------------------------------------
   Formuliervelden in tabellen
------------------------------------------------------------ */

table input[type="text"],
table input[type="number"],
table select,
table textarea {
  width: 100%;
  margin: 0;
}

/* Checkbox-cellen */

td input[type="checkbox"] {
  margin-right: 0;
}

/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */

@media (max-width: 768px) {

  th,
  td {
    font-size: 0.95rem;
  }

  button,
  input[type="submit"],
  input[type="button"] {
    width: 100%;
  }

  select {
    width: 100%;
  }

}