/**
 * listing.css
 * FPAL listing block
 */
.export-only {
  display: none;
}

[id$="-listing-block"] {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--secondary-green);

  & select,
  div.dt-container select.dt-input {
    padding: 0.6rem 2.5rem 0.6rem 0.5rem;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
    color: grey;
    border-radius: 6px;
    border-color: var(--border-grey);

    /* Custom dropdown arrow */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23333' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5rem;

    &.taxa-search-type::-ms-expand {
      display: none;
    }
  }

  & .dt-bottom .dt-paging {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    & .dt-paging-button {
      &:hover {
        background: var(--mid-green);
      }
      &.current {
        background: none;
        border: 1px solid grey;
        &:hover {
          background: var(--background-grey);
          border-color: black;
        }
      }
    }
  }

  & tbody {
    > tr {
      > td {
        > a:hover {
          text-decoration: none;
        }
      }
    }
  }

  &:has(.is-loaded) .table-filters {
    visibility: visible;
  }

  /* Multiselect for 'Year' - used on fpal */
  .year-multi {
    position: relative !important;
    display: inline-block;
    align-self: flex-start;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.85rem;
  }

  /* Hide original select */
  .year-multi select { 
    display: none; 
  }

  /* The closed control you click to expand */
  .year-multi__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 150px;
    padding: 0.85rem 0.75rem;
    background: #fff;
    color: grey;
    font: inherit;
    border: 1px solid var(--border-grey);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    /* Custom dropdown arrow */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23333' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5rem;
  }
  .year-multi__toggle:focus-visible {
    outline: none;
    border-color: var(--secondary-green);
    box-shadow: 0 0 0 3px rgb(from var(--secondary-green) r g b / 20%);
  }

  .year-multi__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Caret rotates when open */
  .year-multi__caret {
    flex: 0 0 auto;
    width: 1rem; height: 1rem;
    color: #333;
    transition: transform 0.2s ease;
  }
  .year-multi.is-open .year-multi__caret { 
    transform: rotate(180deg); 
  }

  /* The popout panel */
  .year-multi__panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 100%;
    z-index: 60;
    background: #fff;
    border: 1px solid var(--border-grey);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }
  .year-multi.is-open .year-multi__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Select all / Clear row */
  .year-multi__actions {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-grey);
  }

  .year-multi__action {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.8rem;
    color: var(--secondary-green);
    cursor: pointer;
  }

  .year-multi__action:hover { 
    text-decoration: underline; 
  }

  /* Scrollable checkbox list */
  .year-multi__list {
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.25rem;
  }

  /* Each year row */
  .year-multi__option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem;
    border-radius: 4px;
    color: grey;
    cursor: pointer;
  }

  .year-multi__option:hover { 
    background: var(--background-grey); 
  }

  .year-multi__option.is-checked { 
    background: rgb(from var(--secondary-green) r g b / 10%); 
  }
  
  .year-multi__option input {
    accent-color: var(--secondary-green);
    width: 1rem; height: 1rem;
    margin: 0;
    cursor: pointer;
  }

  @media (prefers-reduced-motion: reduce) {
    .year-multi__caret, .year-multi__panel { transition: none; }
  }

}

.fpal-listing,
.migratory-listing,
.ch-listing,
.kef-listing,
.ktp-listing,
.con-docs-listing,
table.dataTable.fpal-listing,
table.dataTable.migratory-listing,
table.dataTable.ch-listing,
table.dataTable.kef-listing,
table.dataTable.ktp-listing,
table.dataTable.con-docs-listing {
  display: table;
  padding: 0 1rem;
  border: 1px solid var(--border-grey);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  visibility: hidden;

  &:not(.dataTable) {
    flex-direction: column;
    overflow: hidden;
  }

  &.is-loaded {
    visibility: visible;
  }

  .maxed-content {
    max-width: 300px;
  }

  & > thead > tr > th {
    background: none;
    font-size: 0.9rem;
    font-weight: normal;
    color: grey;
    text-align: left;
    text-transform: uppercase;
  }
}

table.dataTable.migratory-listing {
  /* Change the "Listed" value for a before element tick icon */
  td[data-status="Listed"] {
    font-size: 0; 
    text-align: center;
    &:before {
      font-family: 'Material Symbols Outlined';
      content: '\e5ca';
      color: grey;
      font-style: normal;
      font-weight: 400;
      text-align: center;
      -webkit-font-smoothing: antialiased;
      font-size: 1.85rem;
    }
  }
  /* The names are listed together in second row */
  & a {
    margin: 0.5rem 0;
  }
  .camba-jamba-rokamba {
    & p {
      margin: 0.25rem 0;
    }
  }
  /* EPBC listed names feature a label and arrow point to current name */
  .epbc-other-names {
    margin-left: 0.5rem;
    &:before {
      font-family: 'Material Symbols Outlined';
      content: '\e5c4';
      color: grey;
      font-style: normal;
      font-weight: 400;
      text-align: center;
      -webkit-font-smoothing: antialiased;
      font-size: 1rem;
      padding-top: 2px;
    }
  }
}

table.dataTable.fpal-listing {

  & > thead > tr > th {

    &[aria-sort="ascending"],
    &[aria-sort="descending"] {
      background: var(--background-grey);
    }
  }

  & th.dt-type-numeric div.dt-column-header {
    flex-direction: inherit;
  }
}

.table-loader {
  display: flex;
  justify-content: center;
  padding: 2rem;
}

.table-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  visibility: hidden;

  .date-range {
    display: flex;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--border-grey);
    padding: 0.5rem;
    background-color: rgb(from var(--secondary-green) r g b / 10%);
    border-radius: 6px;

    .descriptor {
      font-size: 0.9rem;
      font-weight: normal;
      color: grey;
      text-align: left;
      text-transform: uppercase;
    }

    > span {
      &.descriptor {
        color: var(--secondary-green);
      }
    }

    #date-range-start,
    #date-range-end {
        padding: 0.35rem;
        border-radius: 6px;
        border: 1px solid var(--border-grey);
        width: 80px;
        &::placeholder {
          font-size: 0.75rem;
        }
      }
    }

    a.clear-filters {
      display: flex;
      align-items: center;
      background: none;
      border-radius: 8px;
      border: 1px solid var(--border-grey);
      color: grey;
      text-transform: uppercase;
      padding: 0 0.75rem;
      transition: 0.2s;
      text-decoration: none;
      &:after {
        margin-left: 0;
        font-size: 1.5rem;
        content: '\e042';
      }
      &:hover {
        transition: 0.2s;
        cursor: pointer;
        background: var(--background-grey);
      }
    }

  }
}