/* ============================================================
   Card surfaces + section header
   ============================================================ */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  /* Was `overflow: hidden`. Two problems with hidden:
       1. TomSelect dropdowns + popovers opened from inside the card
          get clipped at the card boundary — feels broken.
       2. Sticky <thead>s inside table-mode cards become static.
     Children that genuinely need their own clipping (image thumbs,
     uploads, brand tiles) carry `overflow: hidden` on themselves. */
  overflow: visible;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.card-body { padding: 16px; }
.card-pad-0 .card-body { padding: 0; }

/* card-pad-0: since overflow:visible can't clip children, round the first and
   last direct children's matching corners so their backgrounds follow the card curve. */
.card.card-pad-0 > :first-child:not(table) {
  border-start-start-radius: 10px;
  border-start-end-radius: 10px;
}
.card.card-pad-0 > :last-child:not(table) {
  border-end-start-radius: 10px;
  border-end-end-radius: 10px;
}
/* When <table> is the direct first child, round the header cells instead
   (border-radius on a border-collapse table element has no effect). */
.card.card-pad-0 > table thead tr:first-child th:first-child { border-start-start-radius: 10px; }
.card.card-pad-0 > table thead tr:first-child th:last-child  { border-start-end-radius: 10px; }
/* When <table> is the direct last child, round the last body cells. */
.card.card-pad-0 > table tbody tr:last-child td:first-child  { border-end-start-radius: 10px; }
.card.card-pad-0 > table tbody tr:last-child td:last-child   { border-end-end-radius: 10px; }
.card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.card-title-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

/* Section head — used to group cards on a page; leading 3px accent bar. */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px; font-weight: 600;
  color: var(--text-primary);
}
.section-head > :first-child {
  display: inline-flex; align-items: center; gap: 10px;
}
.section-head > :first-child::before {
  content: '';
  width: 3px; height: 14px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}
