@use "../../wc";
@use "../../../scss/boot"; // Tables load in such a way we need to include the global styles on them again

:host {
  display: block;
  @include wc.scrollbars;
}

.table-container {
  overflow: auto;
}

table {
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100%;
  max-width: 100%;
  table-layout: auto;
  text-align: left;

  tbody tr:nth-of-type(even) {
    background-color: unset;
  }

  tbody tr.table__row--data.table__row--odd:not(.table__row--selected) td {
    background-color: rgba(var(--zn-body));
  }

  tbody tr.table__row--details td {
    background-color: rgb(var(--zn-shadow));
  }

  &.table--standalone {
    background-color: rgb(var(--zn-panel));
    border-radius: var(--zn-border-radius-large);
    border: 1px solid rgb(var(--zn-border-color));
    overflow: hidden;
  }

  thead {
    color: rgb(var(--zn-text-heading));
    font-weight: 500;
  }

  thead tr th {
    border-bottom: 1px solid rgb(var(--zn-border-color)) !important;
  }

  &.with-hover tbody tr.table__row--data:not(.table__row--selected):hover td {
    background-color: rgba(var(--zn-primary), 0.05) !important;
    cursor: pointer;
  }

  &.with-hover tbody tr.table__row--details:hover {
    background-color: inherit;
    cursor: default;
  }

  tbody tr td {
    border-top: 1px solid rgb(var(--zn-border-color)) !important;
  }

  tbody tr:first-of-type td {
    border-top: 0 !important;
  }

  thead tr th:first-of-type,
  tbody tr td:first-of-type {
    padding-left: 14px;
  }

  thead tr th:last-of-type,
  tbody tr td:last-of-type {
    padding-right: 14px;
  }

  th, td {
    padding: var(--zn-spacing-medium);
    min-width: 90px;
    white-space: nowrap;

    span {
      white-space: normal;
    }

    &:first-child {
      padding-left: 0;
    }
  }

  th {
    padding-bottom: 0;
    border-bottom: 1px solid rgb(var(--zn-border-color));
  }
}

.zn-table-fixed {
  table-layout: fixed;
}


.table { // The container element that holds the table and the filters

  tr th {
    padding-top: var(--zn-spacing-large);
    padding-bottom: var(--zn-spacing-large);
  }

  tr th, tr td {
    min-width: 50px;

    > div {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      gap: var(--zn-spacing-x-small);

      > code {
        font-size: 10px;
        display: block;
        max-width: 420px;
        float: right;
        max-height: 100px;
        white-space: pre;
        overflow-x: scroll;
      }
    }

    &:first-of-type > div:has(zn-checkbox) {
      justify-content: center;

      zn-checkbox {
        margin: 0;
      }
    }
  }

  &__head {
    &:hover {
      .table__head__sort {
        opacity: 1;
      }
    }

    &__sort {
      margin-left: var(--zn-spacing-small);
      opacity: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      &--active {
        opacity: 1 !important;
      }
    }

    &--wide {
      width: 100%;
    }

    &--last div {
      flex-direction: row-reverse !important;
    }

    &--left div {
      justify-content: flex-start;
    }

    &--right div {
      justify-content: flex-end;
    }

    &--center div {
      justify-content: center;
    }

    &--hidden {
      > div {
        visibility: hidden;
      }
    }

    &--expander {
      width: 28px;
      min-width: 28px;
      padding-right: 0;
    }
  }

  &__cell {
    &--wide {
      width: 100%;
    }

    &--last div {
      justify-content: flex-end;
    }

    &--left div {
      justify-content: flex-start;
    }

    &--right div {
      justify-content: flex-end;
    }

    &--center div {
      justify-content: center;
    }

    &--actions {
      width: 25px;
      min-width: 25px;
    }

    .caption {
      flex-grow: 1;
      flex-direction: column;

      span {
        display: block;
      }

      .title:empty, .summary:empty {
        display: none;
      }

      .title {
        font-weight: 600;
        color: rgb(var(--zn-text-heading));
        font-size: 14px;
        text-decoration: none;
      }

      a.title {
        color: rgb(var(--zn-primary));
      }

      .summary {
        font-size: 90%;
        text-wrap: initial;
        color: rgb(var(--zn-text));
      }

      &--icon {
        display: flex;
        flex-direction: row;
        gap: var(--zn-spacing-small);
      }
    }

    &--expander {
      width: 28px;
      min-width: 28px;
    }
  }

  &__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    padding-block: var(--zn-spacing-small);
    gap: var(--zn-spacing-small);

    &__actions,
    &__query-builder {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      gap: var(--zn-spacing-small);
    }

    &__right {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--zn-spacing-x-small);
      margin-left: auto;
    }
  }

  &__footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: var(--zn-spacing-medium) var(--zn-spacing-medium);

    &__right, &__left {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--zn-spacing-large);
    }

    &__rows-per-page {
      display: flex;
      flex-direction: row;
      align-items: center;
      opacity: 0.8;
      gap: var(--zn-spacing-x-small);

      zn-select[name="rowPerPage"] {
        max-width: 75px;
      }
    }

    &__pagination-count {

    }

    &__pagination-buttons {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--zn-spacing-x-small);

      button {
        border: 1px solid rgb(var(--zn-border-color));
        border-radius: 5px;
        padding: var(--zn-spacing-x-small);

        &[disabled] {
          cursor: not-allowed;
          opacity: 0.5;
        }
      }
    }
  }

  &__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--zn-spacing-x-large) !important;

    &__item {
      display: flex;
      flex-direction: column;
      gap: var(--zn-spacing-2x-small, 4px);
    }

    &__label {
      font-size: 12px;
      color: rgb(var(--zn-text-subtle, var(--zn-text)));
      opacity: 0.8;
    }

    &__value {
      font-size: 14px;
    }
  }
}

.reduced-opacity .table tbody {
  opacity: 0.5;
}

.hidden {
  display: none;
}

.dropdown__query-builder {
  display: block;
  position: relative;
  padding: var(--zn-spacing-large);
  border-width: 1px;
  border-radius: 5px;
  width: fit-content;
  min-width: var(--zn-spacing-small-panel);
  max-height: 650px;
  overflow: auto;
  overscroll-behavior: none;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
  background-color: rgb(var(--zn-panel, 255, 255, 255));
}

/* Table Select Styles */
table tbody tr.table__row--selected {
  background-color: var(--zn-color-purple-100);

  &:hover {
    background-color: var(--zn-color-purple-200) !important;
  }

  td {
    border-top: 1px solid var(--zn-color-purple-600) !important;
    border-bottom: 1px solid var(--zn-color-purple-600) !important;
  }

  td:first-of-type {
    border-left: 1px solid var(--zn-color-purple-600);
  }

  td:last-of-type {
    border-right: 1px solid var(--zn-color-purple-600);
  }

  &:last-of-type td:first-of-type {
    border-bottom-left-radius: var(--zn-border-radius-large);
  }

  &:last-of-type td:last-of-type {
    border-bottom-right-radius: var(--zn-border-radius-large);
  }

  & + tr.table__row--selected td {
    border-top: 0 !important;

    &:first-of-type {
      border-top-left-radius: 0;
    }

    &:last-of-type {
      border-top-right-radius: 0;
    }
  }

  &:has(+ tr.table__row--selected) td {
    border-bottom: 0 !important;
  }

  &:first-of-type td {
    border-top: 0 !important;
  }

  &:has(+ tr.table__row--selected) {
    td:first-of-type {
      border-bottom-left-radius: 0;
    }

    td:last-of-type {
      border-bottom-right-radius: 0;
    }
  }

  &.table__row--odd {
    background-color: hsla(from var(--zn-color-purple-200) h s l / 0.8);
  }
}

table:has(tbody tr:first-of-type.table__row--selected) thead tr th {
  border-bottom-color: var(--zn-color-purple-600) !important;
}

.table-group__title {
  font-weight: var(--zn-font-weight-semibold);
  font-size: var(--zn-font-size-large);
  color: rgba(var(--zn-text-panel-title), 100%);
  line-height: var(--zn-line-height-looser);
  padding-left: var(--zn-spacing-medium);
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}