/**
 * @file
 * Styles for the dynamic-custom-table feature:
 *   - Horizontal scroll wrapper
 *   - First two sticky columns (with shadow separator)
 *   - Sticky-right toggle button
 *   - Column-visibility dropdown (header, search, checkbox list)
 *
 * Activated only when the class `dynamic-custom-table` is present on a
 * <table> or its parent. All selectors are scoped so other tables are
 * unaffected.
 */

/* ── Scroll wrapper ─────────────────────────────────────────────────────── */

.dct-scroll-wrapper {
  overflow-x: auto;
  position: relative;
  width: 100%;
  /* Ensure the wrapper doesn't create a new stacking context that would clip
     the dropdown positioned inside the toggle <th>. */
  isolation: auto;
}

/* ── Table header cells — single-line, no wrap ──────────────────────────── */

.dynamic-custom-table thead th,
.dynamic-custom-table thead td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Body cell text truncation ──────────────────────────────────────────── */
/*
 * Caps every non-sticky, non-toggle body cell at 200 px wide.
 * Text that overflows is clipped with an ellipsis.
 * JS adds a native title attribute when the cell is actually truncated,
 * so hovering shows the full text in a browser tooltip.
 */

.dynamic-custom-table tbody td:not(.dct-sticky):not(.dct-toggle-td) {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sticky body cells get the same truncation but keep their natural left offset */
.dynamic-custom-table tbody td.dct-sticky {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Keep any <a> inside a truncatable cell as display:inline so the parent
 * <td>'s text-overflow:ellipsis fires correctly on the text content.
 * Some themes set a { display:block } which breaks ellipsis on the td level.
 */
.dynamic-custom-table tbody td:not(.dct-toggle-td):not(.views-field-operations) a {
  display: inline;
}

/* ── Sticky columns ─────────────────────────────────────────────────────── */

.dynamic-custom-table .dct-sticky {
  position: sticky;
  z-index: 2;
  /* Opaque background required so scrolling content doesn't show through. */
  background-color: var(--gin-bg-app, #ffffff);
}

/* Header sticky cells sit above body sticky cells */
.dynamic-custom-table thead .dct-sticky {
  z-index: 4;
  background-color: var(--gin-bg-layer, #f8f9fb);
}

/* Right-side shadow on the last sticky column — visual scroll hint */
.dynamic-custom-table .dct-sticky--last {
  box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.10);
}

/* Remove shadow when nothing is scrolled (JS toggles a class on the wrapper) */
.dct-scroll-wrapper.dct-at-start .dct-sticky--last {
  box-shadow: none;
}

/* ── Toggle <th> ────────────────────────────────────────────────────────── */

.dynamic-custom-table thead .dct-toggle-th {
  position: sticky !important;
  right: 0 !important;
  z-index: 5 !important;
  /* Match gin's thead background */
  background-color: var(--gin-bg-layer, #f8f9fb) !important;
  padding: 4px 6px;
  width: 44px;
  min-width: 44px;
  text-align: center;
  vertical-align: middle;
  /* Left shadow — shows a boundary when content scrolls under this cell */
  box-shadow: -4px 0 8px -2px rgba(0, 0, 0, 0.10);
}

/* Empty sticky-right cell in body rows */
.dynamic-custom-table tbody .dct-toggle-td {
  position: sticky !important;
  right: 0 !important;
  z-index: 2 !important;
  background-color: transparent;
  width: 44px;
  min-width: 44px;
  padding: 0;
}

/* Ensure the scroll wrapper never clips sticky children */
.dct-scroll-wrapper {
  overflow-x: auto;
  overflow-y: visible;
}

/* ── Toggle button ──────────────────────────────────────────────────────── */

.dct-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.dct-toggle-btn:hover,
.dct-toggle-btn[aria-expanded="true"] {
  color: var(--gin-color-primary, #0073e6);
  border-color: var(--gin-color-primary, #0073e6);
  background-color: rgba(var(--gin-color-primary-rgb, 0, 115, 230), 0.08);
}

/* ── Dropdown container ─────────────────────────────────────────────────── */
/*
 * The dropdown is appended to <body> and positioned with position:fixed.
 * Top/left values are set by JS (getBoundingClientRect on the toggle button)
 * so the dropdown is never clipped by the overflow:auto scroll wrapper.
 */

.dct-dropdown {
  display: none;
  position: fixed;
  /* top / left are set at open-time by JS */
  z-index: 9999; /* above everything: sticky cells, gin toolbar, dialogs */
  width: 240px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  white-space: normal;
}

.dct-dropdown--open {
  display: block;
}

/* ── Dropdown header ────────────────────────────────────────────────────── */

.dct-dropdown__header {
  padding: 12px 16px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  border-bottom: 1px solid #f3f4f6;
  letter-spacing: -0.01em;
}

/* ── Search bar ─────────────────────────────────────────────────────────── */

.dct-dropdown__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #f3f4f6;
}

.dct-dropdown__search-icon {
  flex-shrink: 0;
  color: #9ca3af;
}

.dct-dropdown__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: #374151;
  padding: 2px 0;
}

.dct-dropdown__search-input::placeholder {
  color: #9ca3af;
}

/* ── Column list ────────────────────────────────────────────────────────── */

.dct-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 300px;
  overflow-y: auto;
}

.dct-dropdown__item {
  display: block;
}

.dct-dropdown__label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: #374151;
  transition: background-color 0.1s;
  /* Override any theme label margin */
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.dct-dropdown__label:hover {
  background-color: #f9fafb;
}

.dct-dropdown__checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  cursor: pointer;
  accent-color: var(--gin-color-primary, #0073e6);
  /* Reset any theme margin/padding */
  margin: 0;
  padding: 0;
}

.dct-dropdown__col-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Cell tooltip ───────────────────────────────────────────────────────── */
/*
 * Matches the dark tooltip design from gin-bridge.css (.media-view-switcher__btn).
 * Appended to <body> by JS and positioned via getBoundingClientRect() to avoid
 * being clipped by overflow:hidden on the table cells.
 */

.dct-cell-tooltip {
  position: fixed;
  z-index: 9999;
  background: #1f2937;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  padding: 5px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  /* translateX(-50%) centres the tooltip over the cursor/cell horizontally */
  transform: translateX(-50%);
}

/* Shown above the cell — shift up by full height + 6 px gap */
.dct-cell-tooltip--above {
  transform: translate(-50%, calc(-100% - 6px));
}

/* Arrow pointing down (tooltip is above the cell) */
.dct-cell-tooltip--above::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1f2937;
}

/* Shown below the cell — no extra vertical shift needed (top = cell bottom + 8px) */
.dct-cell-tooltip--below {
  transform: translateX(-50%);
}

/* Arrow pointing up (tooltip is below the cell) */
.dct-cell-tooltip--below::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: #1f2937;
}

.dct-cell-tooltip--visible {
  opacity: 1;
}

/*making second column non sticky if required*/
.view-canvas-pages .dynamic-custom-table thead th.dct-sticky--col2,
.view-canvas-pages .dynamic-custom-table tbody td.dct-sticky--col2 {
  position: unset;
  background: transparent;
}