/* ================================================================= */
/* =========================  ELEMENTS  ============================ */
/* ================================================================= */
html {
  background-color: var(--clr-background);
  overflow-x: hidden;
}

body {
  font-family: Inter, sans-serif;
  color: var(--clr-text);
}

form {
  margin-block: 2rem;
}

label {
  font-weight: 600;
}

form .helptext {
  display: none;
}

form.form-horizontal div {
  display: flex;
  border-bottom: 1px solid var(--clr-line);
  position: relative;
  margin-bottom: var(--m-2);
}

form.form-horizontal div:last-child {
  border-bottom: 0;
}

form.form-horizontal div > * {
  flex: 1;
}

.errorlist,
.error-message {
  color: var(--clr-danger);
}

input,
select,
button,
a[role="button"] {
  height: 2.7rem;
}

input,
textarea,
select,
a[role="button"],
button {
  accent-color: var(--clr-primary);
  transition:
    border ease 150ms,
    outline ease 150ms,
    box-shadow ease 150ms,
    background ease 150ms,
    color ease 150ms;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea {
  width: 100%;
  padding: 0.5rem;
  color: var(--clr-text);
  border: 1px solid var(--clr-line);
  border-radius: 0.25rem;
  box-shadow: var(--field-shadow);
}

input[type="checkbox"] {
  background-color: white;
  accent-color: var(--clr-primary);
  color: var(--clr-primary);
  appearance: none;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid var(--clr-line);
  vertical-align: middle;
  cursor: pointer;
  border-radius: 0.25rem;
  background-size: 0.75em auto;
  background-position: center;
  background-repeat: no-repeat;
  letter-spacing: normal;
  line-height: 30px;
  margin-inline-end: 8px;
  margin-inline-start: 0;
  margin: -2.5px 8px 0 0;
  box-shadow: var(--field-shadow);
}

input[type="checkbox"]:checked,
input[type="checkbox"]:checked:active {
  border: 1px solid var(--clr-primary);
  background-color: var(--clr-primary);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'%3E%3C/polyline></svg>");
}

input[type="radio"] {
  appearance: none;
  color: white;
  outline-offset: -1px;
  border: 1px solid var(--clr-line);
  width: 1.5em;
  height: 1.5em;
  font-size: inherit;
  vertical-align: middle;
  cursor: pointer;
  accent-color: transparent;
  border-radius: 100%;
  line-height: 30px;
  margin-inline-end: 8px;
  margin-inline-start: 0;
  margin: 0 8px 0 0;
  box-shadow: var(--field-shadow);
}

input[type="radio"]:checked,
input[type="radio"]:checked:active {
  border: 7px solid var(--clr-primary);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--outline-width) solid var(--clr-primary);
  outline-offset: var(--outline-offset);
  box-shadow: 0 0 0 4px var(--clr-focus);
}

select {
  appearance: none;
  width: fit-content;
  border: 1px solid var(--clr-line);
  color: var(--clr-text);
  border-radius: 0.25rem;
  box-shadow: var(--field-shadow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: center right 0.75rem;
  background-size: 1rem auto;
  background-repeat: no-repeat;
  padding: 0 30px 0 14px;
  background-color: var(--clr-background-secondary);
}

button,
a[role="button"],
select.button {
  background-color: var(--clr-primary);
  border-radius: 5px;
  border: 0;
  color: var(--clr-text-inverse);
  padding: 10px 20px;
  width: 100%;
  cursor: pointer;
  display: block;
  text-align: center;
  text-align-last: center;
  box-shadow: var(--field-shadow);
}

select.button {
  background-image: none;
}

button:hover,
a[role="button"]:hover,
select.button:hover {
  background-color: var(--clr-primary-hover);
  text-decoration: none;
}

button:active,
a[role="button"]:active,
select.button:active,
button.secondary:active,
a[role="button"].secondary:active,
select.button.secondary:active {
  background-color: var(--clr-primary);
  text-decoration: none;
}

button:focus-visible,
a[role="button"]:focus-visible,
select.button:focus-visible {
  background-color: var(--clr-primary-hover);
  outline: var(--outline-width) solid var(--clr-primary);
  outline-offset: var(--clr-focus);
  box-shadow: 0 0 0 4px var(--clr-focus);
}

button.secondary,
a[role="button"].secondary,
select.button.secondary {
  background-color: var(--clr-secondary);
}

button.secondary:hover,
a[role="button"].secondary:hover,
select.button.secondary:hover {
  background-color: var(--clr-secondary-hover);
}

button[disabled],
a[role="button"][disabled],
select.button[disabled] {
  opacity: 0.2;
  pointer-events: none;
}

button.danger {
  background-color: var(--clr-danger);
}

a {
  color: var(--clr-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul {
  list-style: none;
  padding: 0;
}

hgroup {
  display: flex;
  margin-bottom: 1rem;
}

hgroup img {
  max-width: 30px;
  margin-right: 0.5rem;
}

hgroup img.customers {
  max-width: 45px;
}

hgroup h1 {
  font-weight: 800;
  letter-spacing: -0.07rem;
}

table {
  border-spacing: 0;
  width: 100%;
}

table th {
  font-size: 0.8rem;
  color: var(--clr-text-secondary);
}

table th input {
  font-size: 1rem;
}

table td,
table th {
  text-align: left;
  vertical-align: middle;
  padding: 1rem 0.5rem;
}

table thead tr > * {
  vertical-align: top;
  box-shadow:
    0 1px 0 var(--clr-line-light),
    1px 0 0 var(--clr-line-light);
}

table tbody tr > * {
  box-shadow:
    0 1px 0 var(--clr-line-light),
    1px 0 0 var(--clr-line-light);
}

table tfoot tr > * {
  box-shadow:
    0 var(--table-footer-line-width) 0 0 var(--clr-line),
    0 calc(var(--table-footer-line-width) * -1) 0 0 var(--clr-line);
}

table tbody tr:last-child > * {
  box-shadow: 1px 0 0 var(--clr-line-light);
}

table.table-hover tbody tr:hover {
  background-color: var(--clr-row-hover);
}

dialog {
  margin: 50px auto;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  outline: 0;
}