/* TAB WRAPPER */
.expanded {
  --pad-left: calc(var(--computed-sidebar-width, var(--sidebar-width)) + var(--gap-small) * 4);
  --_context-wrapper-width: calc(100vw - var(--pad-left));
}

.tab {
  display: flex;
  align-items: flex-start;
  align-self: stretch;

  padding-bottom: 0;
}


.tab:has(.hidden) {
  display: none;
}

.tab.hidden {
  display: none;
  visibility: hidden;
}

.tab-header {
  display: flex;
  left: 0;
  top: 0;
  width: 100%;
  height: 3em;


  padding: var(--gap-small);
  align-items: center;
  gap: calc(var(--gap-small) * 2);

  border-bottom: 1px solid var(--grey-100, #eaeaea);
  padding-right: 1em;

  margin: 0;
  z-index: 999;

}

#expand-tab-button {
  position: absolute;
  background: var(--dashboard-bg);
  top: 4px;
  right: 4px;
  border-radius: 4px;
  border: 1px solid var(--grey-100);
  font-size: 12px;
}

.expanded {

  #expand-tab-button {
    /*        background-color: #6095ff25;*/
    /*        border: 1px solid #6094ff;*/
  }

  #expand-tab-button:after {
    content: "Show Globe";
    font-family: Roboto;
    font-weight: 500;
    font-size: 11px !important;
  }
}

.tab {
  padding-inline: 4px;
  height: 2em;
}

.tab button {
  color: var(--typo-text-color, #2C2C2C);

  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;

  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  padding: 1px 2px;

  white-space: nowrap;
}

.tab:hover {
  color: var(--typo-text-color, #2C2C2C);
}

.tab--active {
  border-bottom: 1px solid var(--navigation-button-indicator-active, #5BBD8A) !important;
}

.tab-content {
  height: 100%;
  display: none;
  padding-bottom: 3em;
}

.tab-content.active {
  display: block;
}

.tab-content section {
  height: 100%;
  max-height: 100% !important;
}

.tab-content .table-wrapper {
  min-height: 100%;
  height: 100%;
  max-height: 100% !important;
  border: none;
}

.tab-content p-grid {
  height: -webkit-fill-available;
  max-height: 100% !important;

  td, th {
    /* TODO: Need to find a fix for cells inside tab wrapper */
    --_width: min-content !important;
  }
}