/* Term Finder page styles */
#term-finder {
  @apply size-full;

  .crosslinker.withLeftNav {
    --Admin-navWidth: 50%;
  }

  form[action*='crosslinker/terms'] {
    @apply mt-0;
  }

  .CIG-row {
    @apply mb-0 gap-1.5;

    > .label {
      @apply h-7 content-center text-sm font-semibold text-gray-700;
    }
  }

  .searchAlgorithmFields {
    @apply mb-0 mt-4 flex flex-col gap-4;

    > .inputContainer {
      @apply flex flex-col gap-1.5;
    }

    .label {
      @apply h-7 content-center text-sm font-semibold text-gray-700;
    }
  }

  hr {
    @apply hidden;
  }

  .ActionBar {
    @apply mb-0 bg-gray-50;

    > input[type='submit'] {
      @apply btu-button btu-button-primary btu-button-md;
    }
  }

  .RTI-add > input[type='text'] {
    @apply ps-9;
  }
}

.find-terms-history {
  @apply !mt-4 mb-4;

  > form {
    @apply grid grid-cols-[repeat(4,auto)_1fr] items-center; /* grid used to position radio inputs */
  }

  input[type='radio'] {
    @apply me-3 inline-flex;

    + label {
      @apply text-md font-medium text-gray-700;

      &:has(+ input[type='radio']) {
        @apply me-3;
      }
    }
  }

  .SearchInput {
    @apply col-span-full mb-6 mt-4;
  }

  .Widget.cl-running-tasks {
    @apply text-sm text-gray-700;

    > ol {
      @apply mb-6;
    }
  }

  /* Allow scrolling of saved search table */
  .frame:has(> div > table.tfr-history) {
    @apply relative;

    > div:has(> table.tfr-history) {
      @apply btu-scrollshadow-50 overscroll-contain before:absolute before:bottom-0 before:top-0 before:content-[--whitespace] after:absolute after:bottom-0 after:top-0 after:content-[--whitespace];
    }
  }

  table > tbody > tr:last-child {
    @apply border-b-0;
  }

  .tfr-history td {
    @apply p-4;
  }

  .tfr-submit {
    @apply btu-button btu-button-error btu-button-sm before:btu-icon before:btu-icon-trash;
  }
}

/* Result frame on the right side of the Term Finder page */
#term-finder-result {
  /* Styles "created terms" frame */
  > .Widget:has(.LinkTable) {
    @apply mb-6 grid-cols-[[fullbleed-start]_var(--space)_[content-start]_auto_[first-button-end]_auto_[second-button-start]_auto_[second-button-end]_1fr_[content-end]_var(--space)_[fullbleed-end]] items-center text-sm text-gray-500;

    > h2 {
      @apply mt-6 h-7 content-center text-sm font-semibold text-gray-700;
    }

    > .LinkTable {
      @apply mb-6;

      > li {
        @apply contents;

        > a {
          @apply px-0 text-sm text-primary-600 underline;
        }
      }
    }

    > a.Button {
      @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray btu-button-md col-[second-button-start/second-button-end] first-of-type:col-[content-start/first-button-end] first-of-type:me-2 last-of-type:ms-2;
    }
  }

  /* Styles the results frame */
  > form > .Widget {
    .legend {
      @apply me-3 inline-block size-2 rounded;

      &:not(:first-of-type) {
        @apply ms-2;
      }
    }

    > .ActionBar {
      @apply order-1;
    }

    .LinkList-wrapper {
      @apply btu-scrollshadow-50 py-6 before:absolute before:bottom-6 before:left-[var(--space)] before:top-6 before:row-[2/3] before:content-[--whitespace] after:absolute after:bottom-6 after:right-[var(--space)] after:top-6 after:row-[2/3] after:content-[--whitespace];
    }

    /* Styles the colored bubbles used to denote dictionary presence */
    .legend-placeholder:not(th) {
      @apply box-content w-1 bg-clip-text p-4;

      > a {
        @apply h-[22px] w-1 rounded-lg bg-inherit;

        > span {
          @apply hidden;
        }
      }
    }

    th.legend-placeholder {
      @apply box-content w-1 !bg-gray-50 p-0;
    }
  }
}

#TermOccurrenceSearch,
#TermProximitySearch {
  @apply flex items-center gap-3 text-md font-medium text-gray-700;
}

/* Terms page styles */
#terms-search-result {
  @apply flex flex-col;

  > h3 {
    @apply my-2 text-xs font-medium text-gray-600;

    strong {
      @apply font-medium;
    }
  }

  > ul.pagination ~ table {
    @apply relative mb-2 after:absolute after:-bottom-2 after:-left-[var(--space)] after:-right-[var(--space)] after:h-px after:bg-gray-200;
  }

  table:last-child {
    @apply mb-2;
  }

  tbody > tr {
    @apply bg-gray-50;
  }

  tr:has(.legend-label) {
    @apply flex items-center gap-1 border-b-0 hover:bg-gray-50;

    > td {
      @apply p-0;

      &.legend-label {
        @apply line-clamp-2 grow rounded-lg px-2 py-1 text-sm font-medium text-gray-700 [word-break:break-word] hover:bg-gray-100 hover:text-gray-900;

        &:not(:has(> a)) {
          @apply py-2;
        }

        > a {
          @apply line-clamp-2 py-1 no-underline [word-break:break-word];
        }
      }
    }

    &.selected {
      > td.legend-label {
        @apply bg-primary-50 text-gray-900;
      }
    }

    &:not(:last-child) {
      @apply mb-2;
    }
  }

  .legend-placeholder {
    @apply my-0.5 h-8 w-1 flex-none rounded;
  }
}

/* Carrover from v4 */
div[data-type='com.psddev.crosslinker.db.Term'] > div[data-field='mappings'] {
  @apply hidden;
}

#terms-search-result {
  @apply mt-2;
}

/* Dictionaries page styles */
/* Replaced expensive :has() selector with runtime class for better performance */
.Widget.has-crosslinker-dictionaries {
  @apply h-full grid-rows-[auto_1fr_auto];

  /* Fix the action bar to the bottom of the page */
  > form {
    @apply row-[2/4] grid-rows-subgrid;

    &:has(> .CIG-row + .CIG-row) {
      @apply grid-rows-none;
    }

    > .ActionBar {
      @apply self-end;

      > input:where([type='submit']) {
        @apply btu-button btu-button-primary btu-button-md;
      }
    }

    > .CIG {
      @apply content-start;
    }
  }
}

form[action*='crosslinker/dictionaries'] {
  @apply content-baseline;

  .CIG-row {
    > small {
      @apply order-1 text-sm text-gray-500 first-of-type:mt-1.5;

      > strong {
        @apply font-normal;
      }
    }

    > .label {
      @apply mb-1.5 h-7 content-center text-sm font-semibold text-gray-700;
    }
  }
}

/* Term Mappings page style */
/* Replaced expensive :has() selector with runtime class for better performance */
.Widget.has-crosslinker-mappings {
  @apply grid-rows-[auto_1fr];

  /* Additional styles when form is a direct child */
  &:has(> form[action*='crosslinker/mappings']) {
    @apply grid-rows-[auto_auto_1fr];
  }

  > form {
    @apply mt-6;

    &:has(+ .frame:empty),
    &:has(+ .frame > textarea:empty) {
      @apply mb-6;
    }
  }

  > .frame {
    @apply col-[fullbleed-start/fullbleed-end] grid grid-cols-subgrid;
  }

  form:has(.ActionBar) {
    @apply col-[fullbleed-start/fullbleed-end] grid grid-cols-subgrid content-between;

    > :where(.CIG, .TC) {
      @apply col-[content-start/content-end] mb-6;
    }

    > .ActionBar {
      @apply col-[fullbleed-start/fullbleed-end];
    }
  }
}

.term-mapping-hero {
  @apply btu-heading-5 w-full border-b px-6 py-5 text-gray-700;
}

/* Styles the Simulations page */
.simulations {
  --Admin-navWidth: 320px;

  .Admin-main > .Widget {
    @apply grid-rows-none; /* Simulations has a non-standard layout, compared to other widgets */

    > hr {
      @apply hidden;

      + .Widget-title {
        @apply py-3;
      }

      ~ .RCIG {
        @apply flex flex-col gap-6 py-6;

        > .inputContainer {
          @apply flex flex-col gap-1.5;

          > .label {
            @apply truncate py-1 text-sm font-semibold text-gray-700;
          }

          /*
            Read-only RTI fields get special styles.
            TODO: formalize readonly style into a TWCSS utility?
          */
          > .RTI.readonly {
            btu-input {
              @apply contents;

              > input:where([readonly]) {
                @apply w-full rounded-none border-0 p-0 text-sm text-gray-400 transition-none hover:bg-white focus:border-none focus-visible:[box-shadow:none];
              }
            }

            ul > li {
              @apply flex items-center gap-2 rounded-none p-2 after:static after:-order-1 after:size-5 after:p-0 after:text-gray-400;
            }

            .RTI-remove {
              @apply pointer-events-none static m-0 size-5 bg-white p-0 text-gray-400 after:hidden;
            }

            .RTI-add {
              @apply hidden;
            }
          }
        }
      }
    }
  }
}

/* Existing simluations table */
.simulations-table {
  th {
    > strong {
      @apply text-xs font-medium text-gray-500;
    }
  }

  td {
    @apply text-sm text-gray-500;

    > a {
      @apply font-medium text-gray-900 no-underline;
    }
  }

  th,
  td {
    @apply p-4;
  }

  > thead,
  > tbody {
    > tr {
      @apply border-b-0;
    }
  }

  thead tr th {
    @apply bg-gray-100;

    &.left {
      @apply rounded-ss-lg;
    }

    &.right {
      @apply rounded-se-lg;
    }
  }

  tbody tr {
    @apply bg-gray-50;
  }

  .newSection {
    &.selected {
      @apply bg-primary-50;
    }
  }
}

/* Content Edit widget */
.Widget.cl-widget {
  .Widget-title {
    @apply box-content h-7 content-center bg-primary-50 py-2 text-primary-800;
  }

  > :where(:not(.Widget-title)) {
    @apply last:mb-6 first-of-type:mt-6;
  }

  .cl-widget-toggle {
    @apply grid grid-cols-[repeat(4,auto)_minmax(0,1fr)] items-center;

    > :where(:not(input[type='radio'], label)) {
      @apply col-span-full;
    }

    > label {
      @apply text-sm font-medium text-gray-700;

      &:has(+ input[type='radio']) {
        @apply me-6;
      }
    }

    > .Widget-heading {
      @apply mt-6 h-7 content-center truncate p-0 text-sm font-semibold text-gray-700;
    }

    > .cl-simulation-select {
      @apply mt-1.5;
    }

    ol.cl-all-terms {
      > li {
        &:not(:last-child) {
          @apply border-b;
        }

        > a {
          @apply my-4 blokk text-sm font-medium;
        }
      }
    }
  }
}

/* Miscellanious styles */
.crosslinker > .Admin-nav > .Widget > .Widget-title {
  @apply content-center;
}

/* Carryover from v4 */
.crosslinker-heading + h1 {
  @apply hidden;
}
