/* Shared section and table headings. Loaded after page styles; no navigation
   selectors, layout widths or field styles are changed here. */
:root {
  --section-heading-ink: var(--admin-ink, var(--ink, #172033));
  --section-heading-muted: var(--admin-ink-soft, var(--text-muted, #52637a));
  --section-heading-accent: var(--admin-accent, var(--accent, #5267f7));
  --section-heading-edge: var(--admin-accent-edge, #ccd5ff);
}

@media screen {
  html body :is(.support-general-section > header, .support-drawer-card > header,
    .settings-card-header, .panel-header, .crm-card-header, .crm-list-header,
    .explore-panel-header, .appointment-detail-card > header,
    .unified-table-header):not([hidden]) {
    color: var(--section-heading-ink);
    background: #ffffff;
    border-bottom: 1px solid var(--section-heading-edge);
    box-shadow: inset 3px 0 0 var(--section-heading-accent);
  }

  html body :is(.support-general-section > header, .support-drawer-card > header,
    .settings-card-header, .panel-header, .crm-card-header, .crm-list-header,
    .explore-panel-header, .appointment-detail-card > header,
    .unified-table-header, .settings-card-heading, .form-section-heading,
    .currency-card-heading, .kb-section-head, .drawer-card-header,
    .kb-overview-header):not([hidden]) :is(h2, h3) {
    color: var(--section-heading-ink);
    font-weight: 750;
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: -.015em;
    text-wrap: balance;
  }

  html body :is(.support-general-section > header, .support-drawer-card > header,
    .settings-card-header, .panel-header, .crm-card-header, .crm-list-header,
    .explore-panel-header, .appointment-detail-card > header,
    .unified-table-header, .settings-card-heading, .form-section-heading,
    .currency-card-heading, .kb-section-head, .drawer-card-header,
    .kb-overview-header):not([hidden]) p {
    color: var(--section-heading-muted);
    font-size: 13px;
    line-height: 1.55;
  }

  html body :is(.support-general-section > header, .support-drawer-card > header,
    .settings-card-heading, .form-section-heading, .currency-card-heading,
    .kb-section-head):not([hidden]) > span {
    color: #ffffff;
    background: var(--section-heading-accent);
    border-radius: 10px;
    box-shadow: 0 3px 8px rgb(82 103 247 / .16);
  }

  /* Keep sticky headings, column widths, selection controls and sorting intact. */
  html body.unified-tables table.unified-data-table thead th,
  html body .workspace table:not(.unified-data-table) thead th,
  html body main table:not(.unified-data-table) thead th {
    color: var(--section-heading-ink);
    background: #ffffff;
    border-bottom: 2px solid var(--section-heading-edge);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .015em;
  }

  html body.unified-tables table.unified-data-table thead button {
    color: inherit;
    font-weight: inherit;
  }
  html body.unified-tables table.unified-data-table thead button:is(:hover, .is-sorted) {
    color: var(--section-heading-accent);
  }
}