/* panel.css — the named, collapsible panel every table sits in (src/shared/components/panel.php).
 * Loaded on every page after base.css. */

/* panels: one named, collapsible frame per table (src/shared/components/panel.php) */
/* overflow: clip (not hidden) keeps the rounded corners without making the panel a scroll
   container — the table cut-out inside (.page-sticky below) is sized and offset against the
   PAGE, and a scrolling ancestor would capture its sticky position; engines without `clip`
   fall back to hidden. */
.panel { --k: var(--k-info); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 var(--s4); overflow: hidden; overflow: clip; }
.panel-bans { --k: var(--k-bans); }
.panel-connects { --k: var(--k-connects); }
.panel-settings { --k: var(--k-settings); }
.panel-servers { --k: var(--k-servers); }
.panel-info { --k: var(--k-info); }
.panel > summary { display: block; list-style: none; cursor: pointer; padding: 0; }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary:hover { background: var(--surface-2); }
.panel[open] > summary { border-bottom: 1px solid var(--line); }
.panel-head { display: flex; align-items: center; min-height: 40px; padding: var(--s2) var(--s4) var(--s2) 0; border-left: var(--edge) solid var(--k); }
/* the disclosure marker: grey, turned when open — the kind colour stays on the edge */
.panel-head::before {
  content: ""; display: inline-block; flex: none; width: 0; height: 0; margin: 0 var(--s2) 0 var(--s3);
  border: 5px solid transparent; border-left: 6px solid var(--muted); border-right-width: 0; vertical-align: middle;
}
.panel[open] > summary .panel-head::before { transform: rotate(90deg); }
.panel-title { font-weight: 600; white-space: nowrap; }
.panel-note { font-family: var(--mono); font-size: var(--fs-12); font-weight: 400; color: var(--muted); margin-left: var(--s1); }
.panel-meta { margin-left: auto; padding-left: var(--s4); font-size: var(--fs-12); line-height: var(--lh-12); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the actions of a panel head are small buttons in a row (1.11.0): the counts of "Last N
   connects" (.n-links, the current one filled), "columns", the "hide filters" and "reset
   columns" the script adds — every member 8 px from the one before, no dots */
.panel-actions { margin-left: auto; padding-left: var(--s4); font-size: var(--fs-13); line-height: var(--lh-13); white-space: nowrap; }
.panel-meta + .panel-actions { margin-left: 0; }
.panel-actions > a, .panel-actions > span, .n-links > a, .n-links > strong { margin-left: var(--s2); }
.panel-actions > :first-child, .n-links > :first-child { margin-left: 0; }
.panel-body > .empty { margin: 0; padding: var(--s3) var(--s4); }
.panel-body > .table-wrap { border: 0; border-radius: 0; }

@media (max-width: 800px) {
  .panel-head { flex-wrap: wrap; }
  .panel-meta, .panel-actions { white-space: normal; }
}