/* ==========================================================================
   TP filter dropdowns — neutral base styling
   Components: TP.MultiSelectDropdown (.tp-msd-*) and
               TP.HierarchicalMultiSelect (.tp-hms-*)
   No brand colors; override the variables below to theme.
   ========================================================================== */

.tp-msd-container,
.tp-hms-container {
  --tp-border: #d4d4d8;
  --tp-border-hover: #a1a1aa;
  --tp-text: #27272a;
  --tp-muted: #71717a;
  --tp-bg: #ffffff;
  --tp-hover-bg: #f4f4f5;
  --tp-accent: #3f3f46;
  --tp-radius: 6px;
  --tp-panel-max-height: 360px;

  position: relative;
  display: inline-block;
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--tp-text);
  box-sizing: border-box;
}

.tp-msd-container *,
.tp-hms-container * {
  box-sizing: border-box;
}

/* --------------------------------------------------------------- Trigger -- */

.tp-msd-trigger,
.tp-hms-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  background: var(--tp-bg);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  color: var(--tp-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.tp-msd-trigger:hover,
.tp-hms-trigger:hover {
  border-color: var(--tp-border-hover);
}

.tp-msd-trigger:focus-visible,
.tp-hms-trigger:focus-visible {
  outline: 2px solid var(--tp-accent);
  outline-offset: 1px;
}

/* Keep the trigger white in every interactive state — themes commonly style
   bare <button> with a dark hover/focus/active fill that would otherwise win
   (e.g. qalam-legacy's button:focus). Higher specificity than `button:state`. */
.tp-msd-container .tp-msd-trigger,
.tp-hms-container .tp-hms-trigger,
.tp-msd-container .tp-msd-trigger:hover,
.tp-hms-container .tp-hms-trigger:hover,
.tp-msd-container .tp-msd-trigger:focus,
.tp-hms-container .tp-hms-trigger:focus,
.tp-msd-container .tp-msd-trigger:active,
.tp-hms-container .tp-hms-trigger:active {
  background: var(--tp-bg);
  color: var(--tp-text);
  box-shadow: none;
}

/* Open state reads as an accent-bordered control, not a grey fill. */
.tp-msd-container .tp-msd-trigger[aria-expanded="true"],
.tp-hms-container .tp-hms-trigger[aria-expanded="true"] {
  background: var(--tp-bg);
  color: var(--tp-text);
  border-color: var(--tp-accent);
}

.tp-msd-trigger-text,
.tp-hms-trigger-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--tp-muted);
}

.tp-msd-trigger-text.tp-msd-has-selection,
.tp-hms-trigger-text.tp-hms-has-selection {
  color: var(--tp-text);
  font-weight: 500;
}

.tp-msd-trigger-icon,
.tp-hms-trigger-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--tp-muted);
  transition: transform 0.15s ease;
}

.tp-msd-trigger[aria-expanded="true"] .tp-msd-trigger-icon,
.tp-hms-trigger[aria-expanded="true"] .tp-hms-trigger-icon {
  transform: rotate(180deg);
}

/* ----------------------------------------------------------------- Panel -- */

.tp-msd-panel,
.tp-hms-panel {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--tp-bg);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: none;
}

.tp-msd-panel.tp-msd-open,
.tp-hms-panel.tp-hms-open {
  display: block;
}

.tp-msd-panel.tp-msd-two-col {
  min-width: 360px;
}

/* --------------------------------------------------------------- Columns -- */

.tp-msd-columns {
  display: flex;
  max-height: var(--tp-panel-max-height);
  overflow: hidden;
}

.tp-msd-column {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 6px 0;
}

.tp-msd-column:not(:last-child) {
  border-right: 1px solid var(--tp-border);
}

.tp-msd-column-header {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tp-muted);
}

.tp-msd-options {
  display: block;
}

/* --------------------------------------------------------------- Options -- */

.tp-msd-option,
.tp-hms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  user-select: none;
}

.tp-msd-option:hover {
  background: var(--tp-hover-bg);
}

.tp-msd-checkbox,
.tp-hms-checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--tp-accent);
  cursor: pointer;
}

.tp-msd-label,
.tp-hms-label {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

/* Faceted greying: an option that would yield no results given the other
   active filters. Not clickable; kept visible so the user sees it exists. */
.tp-msd-option.tp-msd-disabled,
.tp-hms-option.tp-hms-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Whole-filter greying: when EVERY option in this dropdown is unavailable
   under the current selection (and nothing is selected here), dim and disable
   the entire trigger so the user sees the filter doesn't apply without opening it. */
.tp-msd-trigger.tp-msd-trigger-disabled,
.tp-hms-trigger.tp-hms-trigger-disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(1);
}

/* ----------------------------------------------------- Hierarchical tree -- */

.tp-hms-options {
  max-height: var(--tp-panel-max-height);
  overflow-y: auto;
  padding: 6px 0;
}

.tp-hms-node {
  display: block;
}

/* Collapsible tree: children hidden until the node is expanded. Top-level
   nodes start collapsed; clicking a node (or its caret) reveals its children. */
.tp-hms-node.tp-hms-has-children > .tp-hms-children {
  display: none;
}
.tp-hms-node.tp-hms-has-children.tp-hms-expanded > .tp-hms-children {
  display: block;
}

/* Expand/collapse caret. A right-pointing triangle that rotates down when open.
   Leaf nodes get an empty spacer of the same width so labels stay aligned. */
.tp-hms-caret {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
/* Mouse-only affordance (tabindex=-1) — no focus/active box on click. */
.tp-hms-caret:focus,
.tp-hms-caret:active {
  outline: none;
  background: transparent;
  box-shadow: none;
}
.tp-hms-caret:not(.tp-hms-caret-leaf)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 5px solid #6b7280;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translate(-50%, -50%);
  transition: transform 0.12s ease;
}
.tp-hms-node.tp-hms-expanded > .tp-hms-row > .tp-hms-caret::before {
  transform: translate(-50%, -50%) rotate(90deg);
}
.tp-hms-caret-leaf {
  cursor: default;
}

.tp-hms-row {
  display: flex;
  align-items: center;
}

.tp-hms-row:hover {
  background: var(--tp-hover-bg);
}

.tp-hms-option {
  flex: 1;
  min-width: 0;
  padding: 2px 12px;
}

.tp-hms-option:hover {
  background: transparent;
}

/* ---------------------------------------------------------------- Footer -- */

.tp-msd-footer,
.tp-hms-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--tp-border);
}

.tp-msd-clear-btn,
.tp-hms-clear-btn {
  background: none;
  border: none;
  padding: 4px 0;
  font: inherit;
  font-size: 13px;
  color: var(--tp-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tp-msd-clear-btn:hover,
.tp-hms-clear-btn:hover {
  color: var(--tp-text);
}

.tp-msd-apply-btn,
.tp-hms-apply-btn {
  padding: 6px 16px;
  background: var(--tp-accent);
  border: 1px solid var(--tp-accent);
  border-radius: var(--tp-radius);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.tp-msd-apply-btn:hover,
.tp-hms-apply-btn:hover {
  opacity: 0.9;
}

/* ------------------------------------------------------------ Responsive -- */

@media (max-width: 640px) {
  .tp-msd-panel.tp-msd-two-col {
    min-width: 0;
  }

  .tp-msd-columns {
    flex-direction: column;
    overflow-y: auto;
  }

  .tp-msd-column:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid var(--tp-border);
  }
}

/* Video table — mobile (GC 2026-06-06): show only the Name cell (thumbnail +
   title + description); hide the Shots / Player / FPS / Duration columns and the
   header row, which overflow on narrow screens. Applies to both the all-players
   browse and the single-player page (which has no .tp-vt-player). */
@media (max-width: 768px) {
  .tp-video-table thead { display: none; }
  .tp-video-table .tp-vt-shots,
  .tp-video-table .tp-vt-player,
  .tp-video-table .tp-vt-num { display: none; }
}