@import url("./datatable.ebc60e6b377f.css");
@import url("./utils.0b7e574c5d9c.css");
@import url("./bootstrap5.574bac455bbc.css");

:root {
  --vrhythm: 20px;
  --vrhythm-2: calc(2 * var(--vrhythm));
  --vrhythm-0d5: calc(0.5 * var(--vrhythm));

  /* Shoelace config */
  --sl-transition-fast: 0.1s;
}

/* bootstrap adjust */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: 600;
}

.navbar {
  border-radius: 0 !important;
}

.page-title {
  padding-bottom: 9px;
  margin: 20px 0;
  border-bottom: 1px solid var(--bs-border-color);
  display: flex;
  align-items: center;
}

h1.page-title {
  display: block;
}

.page-title > h1 {
  margin: 0;
}

.panel-title {
  font-weight: inherit;
}

.navbar-brand > img {
  display: inline;
  max-height: 100%;
  margin-top: -2px;
  margin-right: 3px;
}

/* misc components */

.col-min-content {
  white-space: nowrap;
  width: 1px;
}

.table-controls {
  margin-bottom: var(--vrhythm-0d5);
  display: flex;
  gap: 1rem;
}

.field-checkbox-multiple > .checkbox:first-of-type {
  margin-top: 0;
}

.field-checkbox-multiple.--inline {
  display: flex;
  gap: 0 2ex;
  flex-wrap: wrap;
}

.field-checkbox-multiple.--inline > .checkbox {
  margin-top: 5px;
  margin-bottom: 5px;
}

.field-required > label::after {
  content: "*";
}

/* status-label component */

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;

  --bs-blue-400: var(--bs-blue);
  --bs-indigo-400: var(--bs-indigo);
  --bs-purple-400: var(--bs-purple);
  --bs-pink-400: var(--bs-pink);
  --bs-red-400: var(--bs-red);
  --bs-orange-400: var(--bs-orange);
  --bs-yellow-400: var(--bs-yellow);
  --bs-green-400: var(--bs-green);
  --bs-teal-400: var(--bs-teal);
  --bs-cyan-400: var(--bs-cyan);
}

@supports (color-mix(in oklab, white 20%, black)) {
  :root {
    --bs-blue-400: color-mix(in oklab, white 20%, var(--bs-blue));
    --bs-indigo-400: color-mix(in oklab, white 20%, var(--bs-indigo));
    --bs-purple-400: color-mix(in oklab, white 20%, var(--bs-purple));
    --bs-pink-400: color-mix(in oklab, white 20%, var(--bs-pink));
    --bs-red-400: color-mix(in oklab, white 20%, var(--bs-red));
    --bs-orange-400: color-mix(in oklab, white 20%, var(--bs-orange));
    --bs-yellow-400: color-mix(in oklab, white 20%, var(--bs-yellow));
    --bs-green-400: color-mix(in oklab, white 20%, var(--bs-green));
    --bs-teal-400: color-mix(in oklab, white 20%, var(--bs-teal));
    --bs-cyan-400: color-mix(in oklab, white 20%, var(--bs-cyan));
  }
}

.status-label-angemeldet {
  background-color: var(--bs-teal-400);
}

.status-label-verifiziert {
  background-color: var(--bs-blue-400);
}

.status-label-getroffen {
  background-color: var(--bs-orange-400);
}

.status-label-matched {
  background-color: var(--bs-green-400);
}

.status-label-wartend {
  background-color: var(--bs-pink-400);
}

.status-label-inaktiv {
  background-color: var(--bs-gray-400);
}

.status-label-beendet {
  background-color: var(--bs-gray-400);
}

.status-label-pausiert {
  background-color: var(--bs-cyan-400);
}

/* column-select-control */

.column-select-control {
  padding: 3px 20px;
  font-weight: normal;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin: 0;
  gap: 5px;
}

.column-select-control input {
  margin: 0;
}

.rating-dot {
  height: var(--rating-dot-size, 16px);
  color: hsl(0 0% 85%);
  margin-right: 0.3em;
  position: relative;
  top: calc(var(--rating-dot-size, 16px) / 2 - 0.35em);
}

.rating-dot.--active {
  color: hsl(0 0% 25%);
}

.rating.--small {
  --rating-dot-size: 12px;
}

.index-views {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;

  display: flex;
  align-items: baseline;
  column-gap: 0.8em;
  flex-wrap: wrap;
}

.index-views__title {
  font-variant: small-caps;
  text-transform: lowercase;
  font-size: 1.25em;
  font-weight: bolder;
  color: var(--bs-secondary-color);
}

.note {
  margin-bottom: 25px;
  max-width: 50em;
  font-size: 16px;
}

.note__header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 14px;
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--bs-gray-light);
  margin-bottom: 7px;
}

.note__content {
  white-space: pre-line;
}

.note__title {
  background: var(--bs-gray-lighter);
  --bs-badge-color: var(--bs-body-color);
}

.note__content-edit {
  padding-top: var(--vrhythm-0d5);
  display: none;
}

.note__content-edit textarea {
  resize: vertical;
  min-height: 4em;
}

.form-actions-sticky {
  position: sticky;
  bottom: 0;
  padding-block: 1.5rem;
  background: white;
  border-top: 1px solid var(--bs-border-color);
  box-shadow: 0 -2rem 2rem -1rem rgb(255 255 255 / 0.8);
  display: flex;
  justify-content: flex-end;
}