/* Project Page Customizations */

/*
 * Collapsible file tree.
 *
 * The `.dots-collapsible` class is added by `global.js` only on the project
 * home page (the one with the README). On `/-/tree/...` and other views the
 * class is absent, so the table renders normally with no toggle.
 */

.table-holder.dots-collapsible {
  position: relative;
}

/* Hide the file rows completely when collapsed so nothing peeks out below
   the header row. `display: none` avoids the off-by-a-few-pixels clipping
   we got with the previous `max-height: 48px` approach. */
.table-holder.dots-collapsible:not(.expanded) > table > tbody {
  display: none;
}

/* Reserve space on the right of the header for the toggle button so the
   "Last commit" text never collides with it. */
.table-holder.dots-collapsible > table > thead > tr > th:last-child {
  padding-right: 130px !important;
}

/* Make the header itself feel clickable. */
.table-holder.dots-collapsible > table > thead {
  cursor: pointer;
  user-select: none;
}

/* The toggle button — styled to match GitLab's primary "confirm" buttons. */
.table-holder.dots-collapsible::after {
  content: "Expand \25BE";
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  font: 500 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.2px;
  color: var(--gl-button-confirm-primary-foreground-color-default);
  background-color: var(--gl-button-confirm-primary-background-color-default);
  border: 1px solid;
  border-color: var(--gl-heading-1-fixed-color);
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  cursor: pointer;
  pointer-events: none; /* the parent container handles the click */
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
  z-index: 2;
}

.table-holder.dots-collapsible:hover::after {
  background-color: var(--gl-button-confirm-primary-background-color-hover);
  border-color: var(--gl-button-confirm-primary-border-color-hover);
}

.table-holder.dots-collapsible.expanded::after {
  content: "Collapse \25B4";
}

/* Kanban board list width */
@container panel (width >= 576px) {
  :where(html.with-gl-container-queries) .board:not(.is-collapsed) {
    width: 350px !important;
  }
}

/* Board card footer spacing */
.board-card-footer.gl-flex.gl-flex-wrap.gl-items-start.gl-justify-between.gl-gap-y-2 {
  margin: 0 0 -5px 0;
}

/* Board card labels zoom */
.board-card-labels.gl-flex.gl-flex-wrap.gl-gap-2 {
  zoom: 0.8;
}

/* Preserve normal text selection inside editable board cards. */
:is(.board-card, .board-new-issue-form) :is(input, textarea) {
  user-select: text !important;
  -webkit-user-select: text !important;
  -webkit-user-drag: none;
  cursor: text;
}

/* README customizations - rounded corners for hero and buttons */
.readme-holder img[src*="dots-eco-hero"] {
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.readme-holder a:has(img[src*="button-"]) {
  display: inline-block;
  margin: 0 6px;
}

.readme-holder img[src*="button-"] {
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.readme-holder a:hover img[src*="button-"] {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}