/**
 * Actual CSS theme for data-grid. Load after the core stylesheet.
 * Host control classes are configured separately; see docs/styling.md.
 */
data-grid {
  --dg-bg: var(--surface-raised);
  --dg-color: var(--text);
  --dg-muted-color: var(--text-muted);
  --dg-border-width: var(--border-width);
  --dg-border-color: var(--border);

  /* The accent is also ink (sort arrow, active labels): a theme whose
     primary is too light for text routes its ink through --link. */
  --dg-accent: var(--link, var(--primary));
  --dg-accent-soft: color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--primary));
  --dg-focus-ring: var(--focus);

  /* Same header band as .table when a theme sets one. */
  --dg-header-bg: var(--table-header-bg, var(--surface-subtle));
  --dg-header-color: var(--table-header-fg, var(--text));
  --dg-filter-bg: var(--surface);

  --dg-row-hover-bg: var(--hover-overlay);
  --dg-row-selected-bg: color-mix(in oklab, var(--surface) calc(var(--soft-bg-mix) - 6%), var(--primary));
  --dg-row-selected-hover-bg: color-mix(in oklab, var(--surface) calc(var(--soft-bg-mix) - 12%), var(--primary));
  --dg-row-border-color: var(--border);

  --dg-control-bg: var(--surface-raised);
  --dg-control-color: var(--text);
  --dg-control-border-color: var(--border);

  --dg-danger-bg: color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--danger));
  --dg-danger-color: var(--danger);
  --dg-danger-border-color: color-mix(in oklab, var(--surface) var(--soft-border-mix, 65%), var(--danger));

  --dg-radius: var(--radius);
}

/* Details dialog: Actual's modal anatomy (surface, shadow, header band,
   spacing, width) without its global `.modal` classes or its dialog runtime.
   DataGrid owns the lifecycle; Actual CSS only styles the surface. */
data-grid .dg-details-dialog {
  --details-pad: var(--modal-pad);

  background: var(--surface-raised);
  border-color: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: var(--text);
  inline-size: min(var(--modal-size), calc(100vw - 2rem));
}

data-grid .dg-details-dialog::backdrop {
  background: var(--backdrop-fill);
}

data-grid .dg-details-header {
  background: var(--surface-subtle);
}