/* ══ The panel — the console's one card ════════════════════════════════════
   Three zones: a header band that says what this is and how much of it there
   is, a body, and a footer band that says where you are in it. See the note at
   the top of `Panel.tsx` for why the card grew an anatomy rather than a nicer
   outline.

   Every size here comes from the card tokens in `index.css`.              */

.panel-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  /* The clip belongs on the element that owns the radius, or the header band's
     tint squares off the top two corners. */
  overflow: hidden;
}

/* For a grid row of panels that should finish level with each other. */
.panel-card[data-filled='true'] { height: 100%; }

/* ── Header band ────────────────────────────────────────────────────────── */
/* Tinted rather than white, so the band reads as chrome and the rows below it
   read as data. A white header separated only by a rule is the same surface
   twice, which is how a heading ends up looking like a first table row. */
.panel-card-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 48px;
  padding: 8px 16px;
  background: var(--color-surface-subtle);
  border-bottom: var(--card-border);
}

.panel-card-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* An EYEBROW, not a heading. 11px caps: this labels the panel, and a 20px
   title inside a card competes with the page's own title above it — the two
   stacked is what made every screen say its subject twice. */
.panel-card-title {
  margin: 0;
  font: 600 11px/1.2 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The count, in its own chip. Tabular, because it changes as a filter narrows
   and a figure that shifts sideways while you read it is hard to trust. */
.panel-card-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-surface-sunken);
  font: 600 11.5px/1.45 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-2);
}
.panel-card-count-label {
  font-weight: 400;
  font-size: 11px;
  color: var(--color-ink-4);
}

.panel-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* ── Body ───────────────────────────────────────────────────────────────── */

.panel-card-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.panel-card-body[data-pad='md'] { padding: 16px; }

/* ── Footer band ────────────────────────────────────────────────────────── */

.panel-card-foot {
  flex: none;
  padding: 8px 16px;
  background: var(--color-surface-subtle);
  border-top: var(--card-border);
}

/* The pager hides itself on a single page — it returns null — but the band
   around it is rendered by the parent, which cannot see that. Without this a
   short table carried a 44px strip of tinted chrome saying nothing.
   `:has` collapses the band when its child rendered no DOM at all. */
.panel-card-foot:not(:has(*)) {
  display: none;
}

/* The pager's own wrapper adds padding meant for sitting loose under a table.
   Inside the band the band supplies it. */
.panel-card-foot .table-pager {
  padding: 0;
  border-top: 0;
}

/* ── A table sitting flush in the body ──────────────────────────────────────
   The table brings its own horizontal scroll and its own header row. What it
   must not bring is a rounded corner or an outer border — the panel owns both,
   and a table with its own edge inside a panel is the double line this design
   is meant to remove. */
.panel-card-body > .table-scroll {
  border-radius: 0;
  border: 0;
}

/* ── Narrow ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .panel-card-head { padding: 8px 12px; }
  .panel-card-foot { padding: 8px 12px; }
  .panel-card-body[data-pad='md'] { padding: 12px; }
  /* Actions drop to their own line rather than squeezing the title out. */
  .panel-card-actions { margin-left: 0; width: 100%; }
}