:root {
  color-scheme: light dark; 
  --light-bg: whitesmoke;
  --dark-bg: darkslategray;
  --light-bg2: aliceblue;
  --dark-bg2: oklch(24% 0.006 255);
  --light-table-border-color: oklch(88% 0 0);

  --light-bg-3: whitesmoke;
  --light-bg-2: aliceblue;
  --light-bg-1: ghostwhite;
  --light-bg-0: white;
}


body {
  font-family: sans-serif;
}
table {
  width: 100%;
  border-collapse: collapse;
  th {
    white-space: nowrap;
    background-color: light-dark(var(--light-bg), var(--dark-bg));
  }
  th, td {
    border: 1px solid #cccccc;
    padding: 0.2em;
  }
  td.number {
    text-align: right;
  }
  td.boolean {
    text-align: center;
  }
  td.action {
    text-align: center;
  }
}

form table th[scope="row"] {
  text-align: left;
}

form table td input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

form table td input[type="email"] {
  width: 100%;
  box-sizing: border-box;
}

form table span.required {
  color: #cc0000;
}

form table td p {
  margin-top: 0;
  margin-bottom: 0;
}

form button {
  white-space: nowrap;
}

table td.warning {
  background-color: papayawhip;
}

.nav {
  padding: 0.25rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--light-table-border-color);
  ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  li:not(:last-child)::after {
    display: inline-block;
    margin: 0 0.25rem;
    content: "|";
  }
}

.breadcrumb {
  padding: 0.25rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--light-table-border-color);
  ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  li {
    display: flex;
    align-items: center;
  }
  li:not(:last-child)::after {
    margin: 0 0.25rem;
    content: "/";
  }
}

.nav {
  background-color: light-dark(var(--light-bg-1), var(--dark-bg2));
}

.breadcrumb {
  background-color: light-dark(var(--light-bg-1), var(--dark-bg2));
}