/* ===== Layout (used by the grid + panels) ===== */

.components-grid {
  display: grid;
  grid-template:
    "details versions versionDetails" auto
    "sharing .        attributes"     auto
    / 4fr 3fr 5fr;
  gap: 16px;
  align-items: start;

  /* shared sizing */
  --verdet-h: 580px;   /* Version Details scroll height (row 1, right column) */
  --row2-h: 500px;     /* Max height for Sharing & Attributes (row 2) */
}

.panel-details { grid-area: details; }
.panel-versions { grid-area: versions; }
.panel-version-details { grid-area: versionDetails; }
.panel-sharing { grid-area: sharing; }
.panel-attributes { grid-area: attributes; }

.panel {
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 0;
}

.panel-details,
.panel-versions,
.panel-version-details {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@media (max-width: 1200px) {
  .components-grid {
    grid-template:
      "details"        auto
      "versions"       auto
      "versionDetails" auto
      "sharing"        auto
      "attributes"     auto
      / 1fr;
  }
}

.components-grid .panel { min-width: 0; }

/* Keep tables tidy inside details & version-details */
.panel-version-details .table,
.panel-details .table {
  table-layout: fixed;
  width: 100%;
}

/* Scrollable body on the right panel */
.panel-version-details .panel-scroll {
  height: var(--verdet-h);
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}

/* ===== Visibility panel only ===== */

/* Header underline style (H4 expands up to the + button) */
.title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-row .panel-h4 {
  flex: 1 1 auto;
  margin: 0;
}

/* One version label per line, safe wrapping */
.version-item {
  display: block;
  line-height: 1.25;
  margin: 2px 0;
  word-break: break-word;
}

/* Edit + Delete on one row */
.actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Row 2: cap height for Attributes and make it scroll */
.panel-attributes .attr-scroll {
  max-height: var(--row2-h);
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 6px; /* match visual with version details */
}

/* Row 2: cap height for Sharing and make it scroll */
.panel-sharing .share-scroll {
  max-height: var(--row2-h);
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}

@media (max-width: 1400px) {
  .components-grid { --row2-h: 260px; }
}

@media (max-width: 1200px) {
  .components-grid { --row2-h: 360px; }
}

/* Header layout for clickable sort + filter */
.th-flex {
  display: flex;
  align-items: center;
  gap: 6px;
}

.th-btn {
  background: transparent;
  border: 0;
  padding: 0; /* keep flush */
  font-weight: 600;
  cursor: pointer;
}

.th-btn .fa { margin-left: 6px; }

.th-filter {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 1;
}

.th-input-wrap { position: relative; }

.th-input-wrap input {
  padding-right: 24px; /* room for clear button */
  min-width: 160px;
}

.th-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}

/* Keep header sticky look consistent while editing */
.panel-sharing .share-scroll thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.th-btn-static {
  background: transparent;
  border: 0;
  padding: 0;
  font-weight: 600;
  color: #000;
  cursor: default;
}

.panel-sharing .btn[disabled],
.panel-sharing .actions .btn[disabled],
.panel-sharing .btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* allow scroll inside grid items */
.components-grid > .col { min-height: 0; }

/* Make the full panel scroll */
.panel-version-details.scroll-all {
  max-height: 580px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.panel-version-details.scroll-all .panel-scroll {
  height: auto !important;
  overflow: visible !important;
}

/* ro fix header when full panel is scrolling */
.panel-version-details.scroll-all .panel-h4 {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  margin: 0 0 8px;
}