@use "sass:math";

.main-nav {
  background: rgb(240, 240, 240);
  background-color: rgb(109, 109, 109);
  margin: -20px -20px 0 -20px;
  padding: 0 $spacing;
  color: white;
  a {
    color: white;
    font-size: 0.9rem;
  }
}

.normalization-actions {
  // background-color: rgb(255, 253, 224);
  // display: flex;
  // justify-content: space-between;
  // padding: $spacing;
  margin-top: 0;
  margin: 0 -1 * $spacing;
  padding: $spacing;
  border-bottom: 1px solid var(--border-color);
  background-color: rgb(236, 236, 236);
  @media (prefers-color-scheme: dark) {
    background-color: rgb(27, 27, 27);
  }
  margin-bottom: $spacing;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .primary,
  .secondary {
    display: flex;
    align-items: center;
    gap: $spacing * 2;
  }
  .primary {
    justify-content: flex-start;
  }
  .secondary {
    justify-content: flex-end;
  }
  button {
    margin: 0;
  }
}

.normalize-responses {
  display: flex;
  align-items: center;
  gap: $spacing;
}

.normalization-progress {
  // padding: $spacing;
  // border: 1px solid grey;
  // background: #cccccc;
  // margin: $spacing 0;
}

.normalization-options {
  display: flex;
  flex-direction: column;
  gap: math.div($spacing, 2);
}

.admin-scripts-table {
  &,
  tr {
    border: 1px solid $border-color;
  }
  font-size: $smallish-font;
  th {
    background: $bg-color-lightest;
  }
  td,
  th {
    padding: 10px;
  }
}

.admin-args {
  display: flex;
  gap: math.div($spacing, 2);
  align-items: center;
  label {
    display: flex;
    flex-direction: column;
    font-size: $small-font;
  }
  input {
    width: 100px;
  }
}

.admin-script-result {
  pre {
    max-width: 800px;
    max-height: 400px;
  }
  textarea {
    width: 100%;
    height: 400px;
  }
}

.api-dashboard,
.cache-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: $spacing;
}

.manualinput {
  table {
    th {
      font-weight: bold;
    }
  }
}
.tokens-list {
  display: flex;
  gap: 10px;
  // flex-direction: column;
  flex-wrap: wrap;
  // columns: 2;
  list-style-type: none;
  padding: 0;
  margin-bottom: 10px;
  position: relative;
  li {
    list-style: none;
  }
  .entities-list {
    width: 100px;
    // padding: 4px 8px;
    margin: 0;
    font-size: 13px;
    --pico-form-element-spacing-vertical: 4px;
    --pico-form-element-spacing-horizontal: 4px;
    // height: calc(1rem * var(--line-height) + 4px * 2 + var(--border-width) * 2);
  }
  &:focus-within {
    .tokens-list-new {
      display: block;
    }
  }
}
.tokens-list-new {
  display: none;
  position: absolute;
  z-index: 1;
  top: calc(100% + 5px);
  left: 0px;
}
.manualinput-form {
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
  button {
    flex-basis: 200px;
  }
  input,
  button {
    margin-bottom: 0 !important;
  }
}

.highlighted {
  background: var(--pico-mark-background-color);
  &-secondary {
    background: var(--pico-code-background-color);
  }
}

.normalization-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.token-action {
  border-left: 1px solid #00000066;
  padding-left: 5px;
  margin-left: 5px;
  display: inline-block;
  cursor: pointer !important;
}
// .normalization-token,
// .normalization-token[role="button"] {
//   background: none;
//   padding: 0;
//   font-size: 0.9rem;
// }
// .normalization-token[role="button"] {
//   border: 2px solid var(--primary);
// }

.normalization-token {
  border: 1px solid rgb(146, 146, 146);
}
.normalization-token-custom {
  border-color: rgb(181, 235, 128);
}
.normalization-token-suggested {
  border-color: rgb(225, 109, 67);
}
.normalization-token-ai {
  border-color: rgb(24, 227, 220);
}
.normalization-token-preset {
  border-style: dashed;
  background: none;
  opacity: 0.7;
  &:hover {
    opacity: 1;
  }
}
.normalization-token-disabled {
  text-decoration: line-through;
  background: rgb(255, 221, 221);
}
.field-value-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  li:last-child {
    margin: 0;
  }
  blockquote {
    margin: 0;
    padding: 0 0 0 5px;
    width: 100%;
    max-width: 500px;
    font-size: 0.875rem;
  }
}

.questions-list {
  max-width: 1000px;
}

.normalization-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  progress {
    min-width: 200px;
  }
  p {
    white-space: nowrap;
  }
}
.normalization-percentage-low {
  color: rgb(190, 77, 77);
}
.normalization-fields {
  position: relative;
}
.normalization-controls {
  // padding: 10px 20px;
  // border-bottom: 6px solid var(--pico-code-background-color);
  // margin: 0 -20px 0 -20px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
}
.control-tokens {
  & [data="data-tooltip"] {
    border: 0;
  }
  button {
    margin: 0;
  }
}
.control-variant {
  border-bottom: none !important;
  select {
    margin: 0;
  }
}
.control-search {
  flex: 1;
  input {
    margin: 0 !important;
  }
}
.control-renormalize {
  button {
    margin: 0;
  }
}
.normalization-table {
  thead {
    position: sticky;
    top: 0;
    th {
      background: rgba(255, 255, 255);
      margin-bottom: 0;
      border: 0;
      @media (prefers-color-scheme: dark) {
        background-color: rgb(12, 12, 12);
      }
    }
    z-index: 10;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
  }
  td,
  th {
    padding: 6px 10px;
  }
}
.letter-heading {
  background: var(--pico-code-background-color);
  position: sticky;
  top: 30px;
  * {
    margin: 0;
  }
  &-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.letter-heading-tokens {
  z-index: 1000;
}

.loading-button {
  button {
  }
}

td {
  & button:last-child {
    margin-bottom: 0;
  }
}
th {
  white-space: nowrap;
}

@media (min-width: 1000px) {
  dialog article {
    max-width: 900px !important;
  }
}
@media (min-width: 1200px) {
  dialog article {
    max-width: 1200px !important;
    width: 1200px !important;
  }
}

dialog article p:last-of-type {
  margin-bottom: var(--typography-spacing-vertical) !important;
}

dialog article p:last-child {
  margin-bottom: 0;
}

.tag-item {
  margin-bottom: 20px;
}
.tag-item-heading {
  margin-bottom: 5px;
}

.match-patterns,
.match-tags {
  max-width: 200px;
  overflow-x: scroll;
}

.custom-normalization-badge {
  margin-left: 5px;
  display: inline-block;
}

.breadcrumb-segment {
  display: flex;
  gap: 5px;
  align-items: center;
  summary {
    // border: 0 !important;
    padding: 1px 4px !important;
    &::after {
      margin: 0 !important;
    }
  }
}

.field-row-id,
.field-row-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

h6 {
  margin-bottom: 5px !important;
}

button.button-ghost,
.button-ghost button {
  // border: 1px solid var(--primary);
  border-color: rgb(185, 185, 185);
  background: rgb(232, 232, 232);
  @media (prefers-color-scheme: dark) {
    border-color: rgb(92, 92, 92);
    background: rgb(37, 37, 37);
  }
  // padding: 6px 8px;
  color: var(--primary);
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  button {
    margin: 0;
  }
  .pagination-number {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    input {
      width: 40px;
      padding: 6px 8px;
      height: 38px;
      margin: 0;
    }
  }
}

.view-tokens {
  white-space: nowrap;
}
.results-count {
  white-space: nowrap;
}

.token-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.answer-row-same {
  td {
    background: rgb(215, 255, 215);
    @media (prefers-color-scheme: dark) {
      background: rgb(66, 92, 66);
    }
  }
}

.loading-button[data-tooltip] {
  border-bottom: none;
}

.breadcrumbs {
  border-bottom: 1px solid var(--border-color);
  background-color: rgb(236, 236, 236);
  @media (prefers-color-scheme: dark) {
    background-color: rgb(50, 50, 50);
  }
  margin: 0px -1 * $spacing;
  // margin-bottom: $spacing;
  padding: $spacing;
  display: flex;
  justify-content: space-between;
  align-items: center;
  h2,
  h3,
  h4,
  h5 {
    margin: 0;
  }
  .dropdown {
    summary {
      height: 100% !important;
      aspect-ratio: 1;
    }
  }
}

.patterns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  span {
  }
}

.token-filter-active {
  td {
    background-color: rgb(215, 255, 242);
  }
}

.id {
}
.id-parent {
}
.id-parent-above {
  margin-bottom: 5px;
}
.id-main {
  font-weight: bold;
}

.tokens-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: $spacing;

  .control-search {
    min-width: 200px;
  }
}
.tokens-actions-sort {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: math.div($spacing, 2);
  button {
    white-space: nowrap;
  }
}
.token-actions-deselect {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: math.div($spacing, 2);
}

.actionlog-item {
  border: 1px solid var(--border-color);
  padding: math.div($spacing, 2);
  border-radius: 3px;
  summary {
    display: flex;
    justify-content: space-between;
    div {
      display: flex;
      gap: $spacing;
    }
  }
}

.action-log-modal {
  article {
    display: flex;
    flex-direction: column;
  }
}
.action-log-contents {
  overflow: scroll;
}

.word-frequencies-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: $spacing;
}

.answers-header {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  margin-bottom: $spacing;
  gap: $spacing;
  h3 {
    margin: 0;
  }
}

.tokens-table {
  td {
    vertical-align: top;
  }
  .tokens-table-tokenId {
    position: relative;
    .normalization-token {
      position: sticky;
      top: 0;
    }
  }
}

.error {
  color: #f98595;
}

.success {
  color: #85f9aa;
}

.ai-token-row-regular {
  td {
    // background: #85f9aa11;
  }
}

.ai-token-row-ai {
  td {
    background: #f9859511;
  }
}

.token-label {
  white-space: nowrap;
}
