/* Dashboard data surfaces share one 45% tint over a subtle 15% backdrop. */
body:has(.layout) #appearance-background::after {
  background: color-mix(in srgb, var(--bg) 15%, transparent);
}

body:has(.layout) .main :is(.metric, .card, .site-card, .integration-guide) {
  background: color-mix(in srgb, var(--bg) 45%, transparent);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The fluorescent theme previously drew its border with a second background. */
body[data-theme="fluorescent-micro"]:has(.layout) .main :is(.metric, .site-card) {
  border-color: var(--line);
}

/* Child sections must not compound the parent tint or blur the artwork again. */
body:has(.layout) .main .card :is(
  .card,
  .card-header,
  .chart-wrap,
  .breakdown,
  .breakdown-row,
  .table-scroll,
  .table-bottom,
  .login-history-filters,
  .visit-selection-bar,
  .history-selection-bar,
  .visit-filter-note,
  .empty-state
),
body:has(.layout) .main .site-card :is(.site-stats, .site-card-actions) {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Header and interaction highlights stay subtle, without masking whole tables. */
body:has(.layout) .main .table-scroll th {
  background: color-mix(in srgb, var(--bg) 12%, transparent);
}

body:has(.layout) .main .table-scroll tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

body:has(.layout) .main .table-scroll tr:has(
  [data-visit-select]:checked,
  [data-history-select]:checked
) {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Controls, chart marks, badges, navigation and modal dialogs retain their own
   theme colors. No opacity is applied to a container or any of its content.
   Login-page appearance is intentionally outside this stylesheet's scope. */