/*
 * Elyra DataGrid — theme (Tailwind CSS v4+ only).
 *
 * The grid follows the host app's Tailwind v4 palette out of the box: neutral
 * surfaces/borders/text map to `--color-zinc-*`, and the accent maps to Flux's
 * `--color-accent` when present (falling back to blue). Dark mode follows the
 * `.dark` class (Tailwind v4 / Flux convention).
 *
 * Pick an accent like Flux themes: <div class="dg" data-dg-accent="emerald">.
 * Or leave it to inherit the app's Flux accent automatically.
 *
 * Load order: theme.css -> grid.css  (+ optional preset e.g. tokyo-night.css)
 */

.dg {
  /* Geometry (theme-independent) */
  --dg-radius: 10px;
  --dg-radius-sm: 6px;
  --dg-row-h: 37px;
  --dg-font: var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  --dg-font-size: 13px;

  /* ---- Light (default), from the app's Tailwind v4 palette ---- */
  --dg-bg: var(--color-white, #ffffff);
  --dg-bg-elevated: var(--color-white, #ffffff);
  --dg-header-bg: var(--color-zinc-50, #fafafa);
  --dg-footer-bg: var(--color-zinc-50, #fafafa);
  --dg-row-hover: var(--color-zinc-100, #f4f4f5);
  --dg-row-selected: color-mix(in oklab, var(--dg-accent) 14%, transparent);
  --dg-frozen-bg: var(--color-white, #ffffff);

  --dg-border: var(--color-zinc-200, #e4e4e7);
  --dg-border-strong: var(--color-zinc-300, #d4d4d8);

  --dg-text: var(--color-zinc-800, #27272a);
  --dg-text-muted: var(--color-zinc-500, #71717a);
  --dg-text-dim: var(--color-zinc-400, #a1a1aa);

  /* Accent inherits the app's Flux accent, else Tailwind blue */
  --dg-accent: var(--color-accent, var(--color-blue-600, #2563eb));
  --dg-accent-fg: var(--color-accent-foreground, var(--color-white, #ffffff));

  --dg-positive: var(--color-green-600, #16a34a);
  --dg-negative: var(--color-red-600, #dc2626);
  --dg-group: var(--color-violet-600, #7c3aed);
  --dg-aggregate: var(--color-cyan-700, #0e7490);

  --dg-status-1: var(--color-amber-500, #f59e0b);
  --dg-status-2: var(--color-blue-500, #3b82f6);
  --dg-status-3: var(--color-cyan-500, #06b6d4);
  --dg-status-4: var(--color-green-500, #22c55e);
  --dg-status-5: var(--color-red-500, #ef4444);

  color-scheme: light;
}

/* ---- Dark mode (follows .dark on any ancestor, or .dg.dark) ---- */
:where(.dark) .dg,
.dg.dark {
  --dg-bg: var(--color-zinc-900, #18181b);
  --dg-bg-elevated: var(--color-zinc-900, #18181b);
  --dg-header-bg: var(--color-zinc-950, #09090b);
  --dg-footer-bg: var(--color-zinc-950, #09090b);
  --dg-row-hover: var(--color-zinc-800, #27272a);
  --dg-frozen-bg: var(--color-zinc-900, #18181b);

  --dg-border: color-mix(in oklab, var(--color-white, #fff) 8%, transparent);
  --dg-border-strong: color-mix(in oklab, var(--color-white, #fff) 15%, transparent);

  --dg-text: var(--color-zinc-100, #f4f4f5);
  --dg-text-muted: var(--color-zinc-400, #a1a1aa);
  --dg-text-dim: var(--color-zinc-500, #71717a);

  --dg-accent: var(--color-accent, var(--color-blue-500, #3b82f6));

  --dg-positive: var(--color-green-400, #4ade80);
  --dg-negative: var(--color-red-400, #f87171);
  --dg-group: var(--color-violet-400, #a78bfa);
  --dg-aggregate: var(--color-cyan-400, #22d3ee);

  color-scheme: dark;
}

/*
 * Elyra DataGrid — component styles.
 *
 * Styles the grid entirely against the semantic --dg-* tokens from tokens.css.
 * Ships framework-agnostic class names (.dg-*) so Svelte, Vue and Livewire/Flux
 * render identically. Import order: tokens.css -> <theme>.css -> grid.css
 */

.dg {
  background: var(--dg-bg-elevated);
  color: var(--dg-text);
  border: 1px solid var(--dg-border-strong);
  border-radius: var(--dg-radius);
  overflow: hidden;
  font: var(--dg-font-size) / 1.4 var(--dg-font);
}

.dg-toolbar,
.dg-footbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--dg-header-bg);
}
.dg-toolbar {
  border-bottom: 1px solid var(--dg-border-strong);
}
.dg-footbar {
  border-top: 1px solid var(--dg-border-strong);
  color: var(--dg-text-muted);
  font-size: 12px;
}
.dg-spacer {
  flex: 1;
}

.dg-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
/* Column-virtualization spacer: reserves the width of the off-screen columns
   without any chrome, so on-screen columns stay aligned across header/body. */
.dg-table .dg-col-spacer {
  padding: 0;
  border: none;
  background: transparent;
}
/* Natural-language ("ask the grid") toolbar box. */
.dg-ask {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dg-ask-error {
  font-size: 12px;
  color: var(--dg-negative, #dc2626);
}

.dg-table thead th {
  background: var(--dg-header-bg);
  color: var(--dg-text-dim);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--dg-border-strong);
  white-space: nowrap;
  user-select: none;
  position: relative;
}
.dg-table th.dg-num,
.dg-table td.dg-num {
  text-align: right;
}
.dg-sort {
  color: var(--dg-accent);
  margin-left: 4px;
}

.dg-frozen {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--dg-frozen-bg);
  border-right: 1px solid var(--dg-border-strong);
}
.dg-frozen-r {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--dg-frozen-bg);
  border-left: 1px solid var(--dg-border-strong);
}
thead .dg-frozen,
thead .dg-frozen-r {
  background: var(--dg-header-bg);
}

.dg-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--dg-border);
  color: var(--dg-text);
}
.dg-table tbody tr:hover td {
  background: var(--dg-row-hover);
}
.dg-table tbody tr.dg-row-active:hover td {
  background: var(--dg-row-hover);
}
.dg-table tbody tr.dg-selected td {
  background: var(--dg-row-selected);
}

.dg-group td {
  background: color-mix(in srgb, var(--dg-group) 12%, var(--dg-bg-elevated));
  color: var(--dg-group);
  font-weight: 600;
  border-bottom: 1px solid var(--dg-border-strong);
}

.dg-table tfoot td {
  background: var(--dg-footer-bg);
  border-top: 1px solid var(--dg-border-strong);
  font-weight: 700;
  padding: 9px 12px;
}
.dg-table tfoot td.dg-num {
  color: var(--dg-aggregate);
  text-align: right;
}

/* Column header: label + menu + resize handle */
.dg-th-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dg-th-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dg-th-menu {
  flex: none;
  border: none;
  background: transparent;
  color: var(--dg-text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.1s;
}
.dg-th:hover .dg-th-menu {
  opacity: 1;
}
.dg-th-menu:hover {
  background: var(--dg-row-hover);
  color: var(--dg-text);
}
.dg-resize {
  flex: none;
  width: 6px;
  align-self: stretch;
  margin: -9px -12px -9px 0;
  cursor: col-resize;
  touch-action: none;
}
.dg-resize:hover {
  background: color-mix(in srgb, var(--dg-accent) 40%, transparent);
}

/* Group panel (drag-to-group) + group chips */
.dg-grouppanel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 14px;
  background: var(--dg-header-bg);
  border-bottom: 1px solid var(--dg-border-strong);
}
.dg-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dg-group);
  background: color-mix(in srgb, var(--dg-group) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--dg-group) 35%, transparent);
  border-radius: 999px;
  padding: 3px 6px 3px 12px;
}
.dg-group-chip button {
  border: none;
  background: transparent;
  color: var(--dg-group);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 999px;
}
.dg-group-chip button:hover {
  background: color-mix(in srgb, var(--dg-group) 25%, transparent);
}

/* Editor overlay: modal (centered) + slideover (right flyout) */
.dg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 50;
  display: flex;
}
.dg-overlay.dg-modal {
  align-items: center;
  justify-content: center;
}
.dg-overlay.dg-slideover {
  justify-content: flex-end;
}
.dg-dialog {
  background: var(--dg-bg-elevated);
  color: var(--dg-text);
  border: 1px solid var(--dg-border-strong);
  padding: 20px;
  overflow: auto;
}
.dg-modal .dg-dialog {
  width: 420px;
  max-width: calc(100vw - 32px);
  border-radius: var(--dg-radius);
}
.dg-slideover .dg-dialog {
  width: 400px;
  max-width: 100vw;
  height: 100vh;
  border-left: 1px solid var(--dg-border-strong);
}
.dg-dialog h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
}
.dg-form-field {
  margin-bottom: 14px;
}
.dg-form-field label {
  display: block;
  font-size: 12px;
  color: var(--dg-text-muted);
  margin-bottom: 4px;
}
.dg-form-field input,
.dg-form-field select {
  width: 100%;
  background: var(--dg-bg);
  border: 1px solid var(--dg-border-strong);
  border-radius: var(--dg-radius-sm);
  color: var(--dg-text);
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
}
.dg-form-field input:focus,
.dg-form-field select:focus {
  border-color: var(--dg-accent);
}
.dg-form-error {
  color: var(--dg-negative);
  font-size: 12px;
  margin-top: 4px;
}
.dg-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}
.dg-btn {
  padding: 6px 14px;
  border-radius: var(--dg-radius-sm);
  border: 1px solid var(--dg-border-strong);
  background: var(--dg-bg);
  color: var(--dg-text);
  cursor: pointer;
  font-size: 13px;
}
.dg-btn.primary {
  background: var(--dg-accent);
  color: var(--dg-accent-fg);
  border-color: var(--dg-accent);
  font-weight: 600;
}

/* Keyboard navigation + cell/range selection */
/* No per-cell marker: the active position is conveyed by highlighting the whole
   row (.dg-row-active) in a quiet grey. Keeps focus obvious without a boxed cell. */
.dg-table tbody tr.dg-row-active td {
  background: var(--dg-row-hover);
}
.dg-table td.dg-cell-range {
  background: color-mix(in srgb, var(--dg-accent) 16%, transparent);
}
.dg-table td.dg-cell-dirty {
  background: color-mix(in srgb, var(--dg-positive, #16a34a) 16%, transparent);
  box-shadow: inset 3px 0 0 var(--dg-positive, #16a34a);
}
.dg-table td[role="gridcell"] {
  cursor: cell;
}
/* The active cell already carries the visible focus ring (.dg-cell-active), so we
   suppress the browser's default 2px outline to avoid a heavy double marker. */
.dg-table td[role="gridcell"]:focus {
  outline: none;
}

/* Tree grid toggle */
.dg-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  border: none;
  background: transparent;
  color: var(--dg-text-muted);
  cursor: pointer;
  font-size: 11px;
}
.dg-tree-toggle:hover {
  color: var(--dg-accent);
}

/* Master-detail expandable rows */
.dg-table tr.dg-detail-row > td {
  background: var(--dg-bg);
  padding: 0;
}
.dg-detail {
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.dg-detail-pair {
  font-size: 12px;
}

/* Cell templates */
.dg-bar {
  position: relative;
  height: 8px;
  min-width: 60px;
  background: color-mix(in oklab, var(--dg-text-muted) 20%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.dg-bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--dg-accent);
  border-radius: 999px;
}
.dg-link {
  color: var(--dg-accent);
  text-decoration: none;
}
.dg-link:hover {
  text-decoration: underline;
}

.dg-money {
  color: var(--dg-positive);
}
.dg-negative {
  color: var(--dg-negative);
}
.dg-muted {
  color: var(--dg-text-muted);
}

/* Selection checkbox */
.dg-chk {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--dg-text-muted);
  border-radius: 4px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
}
.dg-chk.dg-on {
  background: var(--dg-accent);
  border-color: var(--dg-accent);
}
.dg-chk.dg-on::after {
  content: "✓";
  color: var(--dg-accent-fg);
  font-size: 10px;
  font-weight: 700;
  position: absolute;
  top: -3px;
  left: 1px;
}

/* Status pills — map .dg-status-N to the theme's status palette */
.dg-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.dg-pill-1 {
  color: var(--dg-status-1);
  background: color-mix(in srgb, var(--dg-status-1) 14%, transparent);
}
.dg-pill-2 {
  color: var(--dg-status-2);
  background: color-mix(in srgb, var(--dg-status-2) 14%, transparent);
}
.dg-pill-3 {
  color: var(--dg-status-3);
  background: color-mix(in srgb, var(--dg-status-3) 14%, transparent);
}
.dg-pill-4 {
  color: var(--dg-status-4);
  background: color-mix(in srgb, var(--dg-status-4) 14%, transparent);
}
.dg-pill-5 {
  color: var(--dg-status-5);
  background: color-mix(in srgb, var(--dg-status-5) 14%, transparent);
}

/* Toolbar search input + pagination buttons (used by Svelte/Vue clients) */
.dg-search {
  background: var(--dg-bg);
  border: 1px solid var(--dg-border-strong);
  border-radius: var(--dg-radius-sm);
  color: var(--dg-text);
  padding: 6px 10px;
  font-size: 12px;
  min-width: 220px;
  outline: none;
}
.dg-search::placeholder {
  color: var(--dg-text-dim);
}
.dg-pagebtn {
  background: var(--dg-bg);
  border: 1px solid var(--dg-border-strong);
  color: var(--dg-text);
  border-radius: var(--dg-radius-sm);
  padding: 4px 10px;
  cursor: pointer;
}
.dg-pagebtn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Numbered pager */
.dg-pager {
  display: flex;
  align-items: center;
  gap: 2px;
}
.dg-page {
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--dg-text);
  border-radius: var(--dg-radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.dg-page:hover:not(:disabled) {
  background: var(--dg-row-hover);
}
.dg-page.active {
  color: var(--dg-accent);
  background: color-mix(in srgb, var(--dg-accent) 15%, transparent);
  font-weight: 700;
}
.dg-page:disabled {
  opacity: 0.35;
  cursor: default;
}
.dg-page-ellipsis {
  padding: 0 4px;
  color: var(--dg-text-muted);
  user-select: none;
}

/* Multi-column headers (grouped banner row) */
.dg-table thead tr.dg-band th {
  background: var(--dg-header-bg);
  border-bottom: 1px solid var(--dg-border);
  padding: 6px 12px;
}
.dg-table thead tr.dg-band th.dg-th-group {
  text-align: center;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dg-text-dim);
  border-left: 1px solid var(--dg-border-strong);
  border-right: 1px solid var(--dg-border-strong);
}

/* Discreet filter row (value input + operator picker) */
.dg-table thead tr.dg-filterrow th {
  background: var(--dg-header-bg);
  border-bottom: 1px solid var(--dg-border-strong);
  padding: 5px 8px;
  text-transform: none;
  letter-spacing: 0;
}
.dg-filter-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dg-filter-input {
  flex: 1;
  min-width: 0;
  background: var(--dg-bg);
  border: 1px solid var(--dg-border-strong);
  border-radius: var(--dg-radius-sm);
  color: var(--dg-text);
  padding: 4px 8px;
  font-size: 12px;
  outline: none;
}
.dg-filter-input:focus {
  border-color: var(--dg-accent);
}
.dg-filter-input:disabled {
  opacity: 0.5;
}
.dg-filter-op {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--dg-bg);
  border: 1px solid var(--dg-border-strong);
  border-radius: var(--dg-radius-sm);
  color: var(--dg-text-muted);
  cursor: pointer;
}
.dg-filter-op:hover {
  color: var(--dg-text);
}
.dg-filter-op.active {
  color: var(--dg-accent);
  border-color: var(--dg-accent);
}
.dg-op-details {
  position: relative;
  flex: none;
}
.dg-op-details > summary {
  list-style: none;
  cursor: pointer;
}
.dg-op-details > summary::-webkit-details-marker {
  display: none;
}
.dg-op-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  min-width: 180px;
  background: var(--dg-bg-elevated);
  border: 1px solid var(--dg-border-strong);
  border-radius: var(--dg-radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  padding: 4px;
  z-index: 6;
}
.dg-op-item {
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 12px;
  color: var(--dg-text);
  cursor: pointer;
  white-space: nowrap;
}
.dg-op-item:hover {
  background: var(--dg-row-hover);
}
.dg-op-item.active {
  color: var(--dg-accent);
  background: color-mix(in srgb, var(--dg-accent) 12%, transparent);
}

/* Facet dropdown (FACET() results) */
.dg-facet {
  position: absolute;
  top: 100%;
  left: 8px;
  margin-top: 4px;
  min-width: 180px;
  background: var(--dg-bg-elevated);
  border: 1px solid var(--dg-border-strong);
  border-radius: var(--dg-radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  padding: 6px;
  z-index: 5;
}
.dg-facet-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 12px;
}
.dg-facet-item:hover {
  background: var(--dg-row-hover);
}
.dg-facet-count {
  margin-left: auto;
  color: var(--dg-text-muted);
  font-size: 11px;
}

/* ── Advanced filter builder ─────────────────────────────────────────── */
.dg-fb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}
.dg-fb-panel {
  background: var(--dg-bg-elevated);
  color: var(--dg-text);
  border: 1px solid var(--dg-border-strong);
  border-radius: var(--dg-radius);
  width: min(680px, 92vw);
  max-height: 76vh;
  overflow: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  padding: 14px;
}
.dg-fb-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
}
.dg-fb-group {
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius);
  padding: 8px;
  background: var(--dg-bg);
}
.dg-fb-nested {
  margin: 6px 0;
  background: var(--dg-header-bg);
}
.dg-fb-grouphead {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.dg-fb-logic {
  display: inline-flex;
  gap: 2px;
}
.dg-fb-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dg-fb-cond {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dg-fb-input {
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
  background: var(--dg-bg);
  color: var(--dg-text);
  border: 1px solid var(--dg-border);
  border-radius: 6px;
  min-width: 0;
}
.dg-fb-cond .dg-fb-input:first-child {
  flex: 0 0 34%;
}
.dg-fb-cond .dg-fb-input:nth-child(2) {
  flex: 0 0 26%;
}
.dg-fb-cond .dg-fb-input {
  flex: 1 1 auto;
}
.dg-fb-x {
  padding: 0 8px;
  line-height: 28px;
}
.dg-fb-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.dg-fb-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

/* Virtual scroll: keep the header pinned to the top of the scroll viewport */
.dg-vscroll thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}
.dg-vscroll thead tr.dg-band th {
  top: 0;
}
/* Keep the aggregate footer pinned to the bottom of the scroll viewport, so it
   stays visible instead of sitting below a huge virtual-scroll spacer. */
.dg-vscroll tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 3;
}

/* Group detail rows (drill into an innermost group) */
.dg-table tr.dg-detail-row td {
  background: color-mix(in srgb, var(--dg-header-bg) 40%, transparent);
  font-size: 12px;
}

/* Discreet "unlicensed" notice (server-attached; only shown when unlicensed) */
.dg-notice {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--dg-border-strong);
  color: var(--dg-text-muted);
  background: var(--dg-bg-elevated);
}
.dg-notice::before {
  content: "\25CF";
  font-size: 8px;
  color: var(--dg-negative, #dc2626);
}
.dg-notice:hover {
  color: var(--dg-text);
  border-color: var(--dg-negative, #dc2626);
}
.dg-notice-info::before {
  color: var(--dg-accent);
}

/*
 * Elyra DataGrid — accent themes (Flux-style). Tailwind v4+ only.
 * Usage: <div class="dg" data-dg-accent="emerald"> ... </div>
 * Light uses -600, dark uses -500 (matching Flux). Bright accents get dark text.
 */

.dg[data-dg-accent="zinc"] {
  --dg-accent: var(--color-zinc-600);
  --dg-accent-fg: var(--color-white);
}
:where(.dark) .dg[data-dg-accent="zinc"],
.dg.dark[data-dg-accent="zinc"] {
  --dg-accent: var(--color-zinc-500);
}
.dg[data-dg-accent="red"] {
  --dg-accent: var(--color-red-600);
  --dg-accent-fg: var(--color-white);
}
:where(.dark) .dg[data-dg-accent="red"],
.dg.dark[data-dg-accent="red"] {
  --dg-accent: var(--color-red-500);
}
.dg[data-dg-accent="orange"] {
  --dg-accent: var(--color-orange-600);
  --dg-accent-fg: var(--color-white);
}
:where(.dark) .dg[data-dg-accent="orange"],
.dg.dark[data-dg-accent="orange"] {
  --dg-accent: var(--color-orange-500);
}
.dg[data-dg-accent="amber"] {
  --dg-accent: var(--color-amber-600);
  --dg-accent-fg: var(--color-zinc-950);
}
:where(.dark) .dg[data-dg-accent="amber"],
.dg.dark[data-dg-accent="amber"] {
  --dg-accent: var(--color-amber-500);
}
.dg[data-dg-accent="yellow"] {
  --dg-accent: var(--color-yellow-600);
  --dg-accent-fg: var(--color-zinc-950);
}
:where(.dark) .dg[data-dg-accent="yellow"],
.dg.dark[data-dg-accent="yellow"] {
  --dg-accent: var(--color-yellow-500);
}
.dg[data-dg-accent="lime"] {
  --dg-accent: var(--color-lime-600);
  --dg-accent-fg: var(--color-zinc-950);
}
:where(.dark) .dg[data-dg-accent="lime"],
.dg.dark[data-dg-accent="lime"] {
  --dg-accent: var(--color-lime-500);
}
.dg[data-dg-accent="green"] {
  --dg-accent: var(--color-green-600);
  --dg-accent-fg: var(--color-white);
}
:where(.dark) .dg[data-dg-accent="green"],
.dg.dark[data-dg-accent="green"] {
  --dg-accent: var(--color-green-500);
}
.dg[data-dg-accent="emerald"] {
  --dg-accent: var(--color-emerald-600);
  --dg-accent-fg: var(--color-white);
}
:where(.dark) .dg[data-dg-accent="emerald"],
.dg.dark[data-dg-accent="emerald"] {
  --dg-accent: var(--color-emerald-500);
}
.dg[data-dg-accent="teal"] {
  --dg-accent: var(--color-teal-600);
  --dg-accent-fg: var(--color-white);
}
:where(.dark) .dg[data-dg-accent="teal"],
.dg.dark[data-dg-accent="teal"] {
  --dg-accent: var(--color-teal-500);
}
.dg[data-dg-accent="cyan"] {
  --dg-accent: var(--color-cyan-600);
  --dg-accent-fg: var(--color-white);
}
:where(.dark) .dg[data-dg-accent="cyan"],
.dg.dark[data-dg-accent="cyan"] {
  --dg-accent: var(--color-cyan-500);
}
.dg[data-dg-accent="sky"] {
  --dg-accent: var(--color-sky-600);
  --dg-accent-fg: var(--color-white);
}
:where(.dark) .dg[data-dg-accent="sky"],
.dg.dark[data-dg-accent="sky"] {
  --dg-accent: var(--color-sky-500);
}
.dg[data-dg-accent="blue"] {
  --dg-accent: var(--color-blue-600);
  --dg-accent-fg: var(--color-white);
}
:where(.dark) .dg[data-dg-accent="blue"],
.dg.dark[data-dg-accent="blue"] {
  --dg-accent: var(--color-blue-500);
}
.dg[data-dg-accent="indigo"] {
  --dg-accent: var(--color-indigo-600);
  --dg-accent-fg: var(--color-white);
}
:where(.dark) .dg[data-dg-accent="indigo"],
.dg.dark[data-dg-accent="indigo"] {
  --dg-accent: var(--color-indigo-500);
}
.dg[data-dg-accent="violet"] {
  --dg-accent: var(--color-violet-600);
  --dg-accent-fg: var(--color-white);
}
:where(.dark) .dg[data-dg-accent="violet"],
.dg.dark[data-dg-accent="violet"] {
  --dg-accent: var(--color-violet-500);
}
.dg[data-dg-accent="purple"] {
  --dg-accent: var(--color-purple-600);
  --dg-accent-fg: var(--color-white);
}
:where(.dark) .dg[data-dg-accent="purple"],
.dg.dark[data-dg-accent="purple"] {
  --dg-accent: var(--color-purple-500);
}
.dg[data-dg-accent="fuchsia"] {
  --dg-accent: var(--color-fuchsia-600);
  --dg-accent-fg: var(--color-white);
}
:where(.dark) .dg[data-dg-accent="fuchsia"],
.dg.dark[data-dg-accent="fuchsia"] {
  --dg-accent: var(--color-fuchsia-500);
}
.dg[data-dg-accent="pink"] {
  --dg-accent: var(--color-pink-600);
  --dg-accent-fg: var(--color-white);
}
:where(.dark) .dg[data-dg-accent="pink"],
.dg.dark[data-dg-accent="pink"] {
  --dg-accent: var(--color-pink-500);
}
.dg[data-dg-accent="rose"] {
  --dg-accent: var(--color-rose-600);
  --dg-accent-fg: var(--color-white);
}
:where(.dark) .dg[data-dg-accent="rose"],
.dg.dark[data-dg-accent="rose"] {
  --dg-accent: var(--color-rose-500);
}