/* Detail page ID badge */

.detail-page-id-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0.2rem 0.45rem;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-pill);
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.detail-page-id-badge:hover,
.detail-page-id-badge:focus-visible,
.detail-page-id-badge.is-copied {
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-primary-border-subtle);
}

.detail-page-id-value,
.detail-page-id-feedback {
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.2s ease;
}

.detail-page-id-badge:hover .detail-page-id-value,
.detail-page-id-badge:focus-visible .detail-page-id-value {
  max-width: 10rem;
}

.detail-page-id-feedback {
  margin-left: 0;
}

.detail-page-id-badge.is-copied .detail-page-id-value {
  max-width: 0;
}

.detail-page-id-badge.is-copied .detail-page-id-feedback {
  max-width: 10rem;
  margin-left: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .detail-page-id-badge,
  .detail-page-id-value,
  .detail-page-id-feedback {
    transition: none;
  }
}

/* Grid layouts */

.grid-layout {
  --grid-layout-item-height: 104px;

  display: grid;
  grid-auto-rows: var(--grid-layout-item-height);
  gap: 0.25rem;
}

.grid-layout-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.grid-layout-cell:hover {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-primary-border-subtle) !important;
}

.grid-layout-item {
  padding: 0.5rem;
}

.grid-layout-content {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  text-align: center;
}

.grid-layout-title,
.grid-layout-subtitle {
  display: block;
  overflow: hidden;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-layout-title {
  color: inherit;
  font-size: 0.82rem;
  font-weight: 600;
}

.grid-layout-subtitle {
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
}

.grid-layout-details {
  position: absolute;
  top: 0.25rem;
  right: 0.3rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--bs-secondary-color);
  border-radius: var(--bs-border-radius-sm);
  text-decoration: none;
}

.grid-layout-details:hover,
.grid-layout-details:focus-visible {
  color: var(--bs-primary);
  background: var(--bs-primary-bg-subtle);
}

/* TomSelect */

.ts-dropdown, .ts-control, .ts-control input {
    color: var(--bs-body-color);
}

.ts-wrapper.plugin-remove_button .item .remove {
    color: var(--bs-danger);
}

.plugin-clear_button .clear-button {
    color: var(--bs-danger);
    right: 60px;
}
.ts-dropdown {
    z-index: 1060;
}

.ts-wrapper.multi .ts-control > div.ts-colour {
  cursor: pointer;
  margin: 0 2px 2px 0;
  padding: 1px 2px;
  background: #fff;
  color: #343a40;
}

/* HTMX Indicator */
#tray-indicator {
  pointer-events: none; /* Prevent the indicator to block the hamburger menu in mobile view */
}

/* Table Hover */

.table-hover .row-action {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.table-hover tbody tr:hover .row-action {
    opacity: 1;
}

.border-hover:hover {
    border-color: var(--bs-primary-border-subtle);
}

/* Protocol Listing Navgation Bar */

.navbar-protocol {
    position: sticky;
    overflow-y: auto;
    height: calc(100vh - 200px);
    top: 50px;
}

.grouped-cards-scrollable {
    height: calc(100vh - 200px);
    overflow-y: auto;
    padding-bottom: calc(100vh - 400px);
}

.border-dashed {
    border-style: dashed !important;
}

/* Description Tags */

.label-gray {
    color: #495057;
    background-color: #f1f3f5;
    border-color: #dee2e6;
}

.label-blue {
    color: #084298;
    background-color: #cfe2ff;
    border-color: #9ec5fe;
}

.label-indigo {
    color: #3d0a91;
    background-color: #e0cffc;
    border-color: #c29ffa;
}

.label-purple {
    color: #432874;
    background-color: #e2d9f3;
    border-color: #c5b3e6;
}

.label-pink {
    color: #801f4f;
    background-color: #f7d6e6;
    border-color: #efadce;
}

.label-teal {
    color: #0f5132;
    background-color: #d2f4ea;
    border-color: #a6e9d5;
}

.label-cyan {
    color: #055160;
    background-color: #cff4fc;
    border-color: #9eeaf9;
}

.label-green {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #a3cfbb;
}

.label-amber {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffda6a;
}

.label-brown {
    color: #5c4033;
    background-color: #eadfd7;
    border-color: #d6c2b6;
}

/* Table Pagination */
/* FIXME: these selectors target the tables pagination */
#table-content > div > nav, #results > div:nth-child(4) > div > nav, body > main > .table-container.table-responsive > nav {
    display: flex;
    justify-content: end;
}

.table-container-fixed-height {
    min-height: 46rem;
    display: flex;
    flex-direction: column;
}

.table-container-fixed-height nav {
    margin-top: auto;
}

.table-container-fixed-height td {
    height: 5rem;
}

.small-table > thead > tr > th {
    padding-top: .65rem;
    padding-bottom: .65rem;

    font-size: .75rem;
    font-weight: 600;
    color: var(--bs-secondary-color);

    border-bottom-width: 1px;
    white-space: nowrap;
}

.small-table > tbody > tr > td {
    padding-top: .8rem;
    padding-bottom: .8rem;
}

.small-table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.small-table .orderable {
    cursor: pointer;
}