: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;
}

a:link,
a:visited {
  color: light-dark(#0000ee, #8ab4f8);
}

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;
}

.paper-filter-form {
  margin: 1rem 0;

  fieldset {
    padding: 0.75rem;
    border: 1px solid var(--light-table-border-color);
  }

  fieldset + fieldset {
    margin-top: 0.75rem;
  }

  .paper-filter-options, .paper-author-filter, .paper-filter-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
  }

  .paper-filter-options label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .paper-filter-actions {
    margin-top: 0.75rem;
  }

  .paper-author-filter select {
    max-width: min(100%, 32rem);
  }
}

.paper-edit-form {
  max-width: 80rem;
  margin-bottom: 2rem;

  .paper-edit-table {
    th, td {
      padding: 0.5rem 0.6rem;
      vertical-align: top;
    }

    th[scope="rowgroup"] {
      background-color: light-dark(var(--light-bg-2), var(--dark-bg2));
    }

    td > select {
      width: min(100%, 42rem);
    }

    select, textarea, input[type="file"] {
      max-width: 100%;
      font: inherit;
    }

    textarea {
      width: 100%;
      min-height: 8rem;
      box-sizing: border-box;
      resize: vertical;
    }

    .admin-only-memo th,
    .admin-only-memo td {
      background-color: #fff3cd;
    }
  }

  .compact-fields {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: wrap;

    input[type="text"] {
      flex: 0 0 auto;
    }

    #paper_year {
      width: 6em;
    }

    #paper_month, #paper_day {
      width: 4em;
    }

    #paper_spage, #paper_epage {
      width: 8em;
    }
  }

  .form-help {
    margin: 0.35rem 0 0;
    color: light-dark(#555555, #dddddd);
    font-size: 0.9em;
  }

  .form-help-list {
    margin: 0.4rem 0 0;
    padding-left: 1.4rem;
  }

  .author-order-list {
    margin: 0;
    padding-left: 2rem;

    li + li {
      margin-top: 0.25rem;
    }
  }

  .file-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
  }

  .form-actions {
    margin-top: 1rem;

    input[type="submit"] {
      padding: 0.45rem 1.5rem;
      font: inherit;
    }
  }
}

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

.csv-preview {
  overflow-x: auto;

  th, td {
    white-space: nowrap;
  }

  td {
    width: 10ch;
    max-width: 10ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  tr.missing-doi-and-url {
    th, td {
      background-color: #fff3cd;
    }
  }
}

.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));
}