@use "../../wc";

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

// Separates a top-level filter bar from the table's own panel below it
slot[name="filter-top"]::slotted(*) {
  margin-bottom: var(--zn-spacing-small);
}

.table__scroll {
  overflow-x: auto;
  @include wc.scrollbars;
}

table {
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100%;
  max-width: 100%;
  table-layout: auto;
  text-align: left;
  @include wc.text-style(table-content);

  tbody tr.table__row--data td {
    height: 48px;
    padding-block: 0;
    overflow: hidden;
  }

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

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

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

  &.with-hover tbody tr.table__row--data: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;
  }

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

    span {
      white-space: normal;
    }
  }

  th {
    @include wc.text-style(button-label);
    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, 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 {
    text-transform: capitalize;

    &__sort {
      margin: 0;
      padding: 0;
      opacity: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    &--wide {
      width: 100%;
    }

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

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

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

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

    &--actions {
      width: 25px;
      min-width: 25px;
      text-align: right;
    }

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

      span {
        display: block;
      }

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

      .title {
        font-weight: var(--zn-font-weight-semibold);
        color: rgb(var(--zn-text-heading));
        font-size: var(--zn-text-table-content-font-size);
        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: center;
    padding: var(--zn-spacing-x-small) var(--zn-spacing-medium);
    gap: var(--zn-spacing-small);

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

    &__toggle--active::part(base) {
      background-color: rgb(var(--zn-color-tab));
    }

    &__caption {
      @include wc.text-style(h1);

      margin: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

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

  &__filters {
    padding: var(--zn-spacing-x-small) var(--zn-spacing-medium);

    &[hidden] {
      display: none;
    }
  }

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

    // The joined control must never break across lines
    zn-button-group::part(base) {
      flex-wrap: nowrap;
    }

    // zn-panel's footer supplies its own padding
    &--panel {
      padding: 0;
    }

    &__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;
      gap: var(--zn-spacing-x-small);

      p {
        margin: 0;
        color: rgb(var(--zn-text));
        opacity: 0.7;
        white-space: nowrap;
      }

      zn-select[name="rowPerPage"] {
        --zn-input-background-color: rgb(var(--zn-panel));

        width: 66px;
      }

      // Matches the height of the pagination control it sits beside
      zn-select[name="rowPerPage"]::part(combobox) {
        min-height: 36px;
        padding-inline: var(--zn-spacing-x-small);
      }

      zn-select[name="rowPerPage"]::part(expand-icon) {
        margin-inline-start: 0;
      }
    }

    // Sized to match the icon-button arrows it is joined to, but free to grow for large page numbers
    &__pagination-page::part(base) {
      height: 36px;
      min-height: 36px;
      max-height: 36px;
      min-width: 32px;
      padding: 0 var(--zn-spacing-2x-small);
      justify-content: center;
      border-color: rgb(var(--zn-border-color));
      color: rgb(var(--zn-text));
      font-weight: var(--zn-font-weight-normal);
      white-space: nowrap;
    }

    &__pagination-page--active::part(base) {
      background-color: var(--zn-color-neutral-300);
      border-color: var(--zn-color-neutral-300);
    }
  }

  &__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: var(--zn-text-table-content-font-size);
    }
  }
}

zn-menu {
  --zn-menu-min-width: var(--zn-size-spanel);
}

// A table's header and footer are chrome around the rows, so they sit tighter than
// the panel's own content padding. The header's trailing edge tucks in further still,
// since the controls there are already inset by their own button padding.
zn-panel {
  --zn-panel-header-padding: var(--zn-spacing-x-small) var(--zn-spacing-x-small)
    var(--zn-spacing-x-small) var(--zn-spacing-medium);
  --zn-panel-footer-padding: var(--zn-spacing-x-small) var(--zn-spacing-medium);
}

// Closes the rows off from the footer, which the panel border would otherwise do
zn-panel::part(footer) {
  border-top: 1px solid rgb(var(--zn-border-color));
}

// Dropdowns sit over dense rows here, so they need a solid surface rather than
// zn-menu's translucent default
zn-menu::part(base) {
  background-color: rgb(var(--zn-panel));
}

.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 tr .table__head[tabindex]:focus-visible {
  outline: var(--zn-focus-ring);
  outline-offset: calc(-1 * var(--zn-focus-ring-width));
}

.table tr .table__head--checkbox,
.table tr .table__cell--checkbox {
  width: 1px;
  min-width: 0;
  padding-right: 0;
}

// Visually hidden rather than display: none, which would stop a slotted zn-confirm's dialog rendering
.table__actions-source {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

tbody tr.table__row--group th {
  padding: var(--zn-spacing-small) var(--zn-spacing-medium);
  text-align: left;
  white-space: nowrap;
  background-color: rgb(var(--zn-panel));
  color: rgba(var(--zn-text-panel-title), 100%);
  font-weight: var(--zn-font-weight-semibold);
  font-size: var(--zn-font-size-large);
}

tbody tr.table__row--group:not(:first-of-type) th {
  border-top: 1px solid rgb(var(--zn-border-color));
}

tbody tr.table__row--error td {
  padding-block: var(--zn-spacing-x-small);
}

.table__error {
  padding-bottom: var(--zn-spacing-small);
}

.table__collum--datetime{
  display:flex;
  flex-direction:column;
  align-items: flex-end;
  gap:2px;
}

.table__cell--subtext{
  @include wc.text-style(subheading-small);
}