/* Dashboard data readability contract.
 * Applies only to dashboard/analytics shells. Intentionally excludes profile
 * canvases, Worlds, and other visual experiences that own their own styling.
 */

/* Table text must remain readable even when legacy Tailwind utility colors are too faint. */
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th),
html.light :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th) {
  color: #334155;
}
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th)[class*="text-slate-300"],
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th)[class*="text-slate-400"],
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th)[class*="text-slate-500"],
html.light :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th)[class*="text-slate-300"],
html.light :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th)[class*="text-slate-400"],
html.light :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th)[class*="text-slate-500"] {
  color: #475569 !important;
}
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table thead :where(th,td),
html.light :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table thead :where(th,td) {
  color: #475569 !important;
}

html[data-theme="dark"] :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th),
html.dark :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th) {
  color: #e2e8f0;
}
html[data-theme="dark"] :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th)[class*="text-slate-300"],
html[data-theme="dark"] :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th)[class*="text-slate-400"],
html[data-theme="dark"] :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th)[class*="text-slate-500"],
html.dark :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th)[class*="text-slate-300"],
html.dark :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th)[class*="text-slate-400"],
html.dark :where(.role-dashboard-shell,.genius-shell,.admin-user-directory) table :where(td,th)[class*="text-slate-500"] {
  color: #cbd5e1 !important;
}

/* Metadata/date/helper text inside dashboard data surfaces gets a readable floor. */
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) :where(
  .dashboard-data-meta,.chart-meta,.table-meta,[data-dashboard-meta="true"]
) {
  color: #475569 !important;
}
html[data-theme="dark"] :where(.role-dashboard-shell,.genius-shell) :where(
  .dashboard-data-meta,.chart-meta,.table-meta,[data-dashboard-meta="true"]
) {
  color: #cbd5e1 !important;
}

/* Recharts renders SVG text, so give all dashboard axes/legends/labels a theme-safe floor. */
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) .recharts-wrapper text,
html.light :where(.role-dashboard-shell,.genius-shell) .recharts-wrapper text {
  fill: #475569 !important;
}
html[data-theme="dark"] :where(.role-dashboard-shell,.genius-shell) .recharts-wrapper text,
html.dark :where(.role-dashboard-shell,.genius-shell) .recharts-wrapper text {
  fill: #cbd5e1 !important;
}
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) .recharts-cartesian-grid line,
html.light :where(.role-dashboard-shell,.genius-shell) .recharts-cartesian-grid line {
  stroke: rgba(71,85,105,.20) !important;
}
html[data-theme="dark"] :where(.role-dashboard-shell,.genius-shell) .recharts-cartesian-grid line,
html.dark :where(.role-dashboard-shell,.genius-shell) .recharts-cartesian-grid line {
  stroke: rgba(203,213,225,.18) !important;
}
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) .recharts-default-tooltip,
html.light :where(.role-dashboard-shell,.genius-shell) .recharts-default-tooltip {
  background: #fffdf8 !important;
  color: #172033 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 12px 30px rgba(15,23,42,.14) !important;
}
html[data-theme="dark"] :where(.role-dashboard-shell,.genius-shell) .recharts-default-tooltip,
html.dark :where(.role-dashboard-shell,.genius-shell) .recharts-default-tooltip {
  background: #111827 !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
}
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) .recharts-default-tooltip :where(.recharts-tooltip-label,.recharts-tooltip-item),
html.light :where(.role-dashboard-shell,.genius-shell) .recharts-default-tooltip :where(.recharts-tooltip-label,.recharts-tooltip-item) {
  color: #334155 !important;
}
html[data-theme="dark"] :where(.role-dashboard-shell,.genius-shell) .recharts-default-tooltip :where(.recharts-tooltip-label,.recharts-tooltip-item),
html.dark :where(.role-dashboard-shell,.genius-shell) .recharts-default-tooltip :where(.recharts-tooltip-label,.recharts-tooltip-item) {
  color: #e2e8f0 !important;
}

/* Common dashboard chart/empty-state prose. */
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) :where(
  [data-chart-shell="true"],.chart-card,.analytics-card,.soft-card
) :where(p,small,span)[class*="text-slate-400"],
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) :where(
  [data-chart-shell="true"],.chart-card,.analytics-card,.soft-card
) :where(p,small,span)[class*="text-slate-500"] {
  color: #475569 !important;
}
html[data-theme="dark"] :where(.role-dashboard-shell,.genius-shell) :where(
  [data-chart-shell="true"],.chart-card,.analytics-card,.soft-card
) :where(p,small,span)[class*="text-slate-400"],
html[data-theme="dark"] :where(.role-dashboard-shell,.genius-shell) :where(
  [data-chart-shell="true"],.chart-card,.analytics-card,.soft-card
) :where(p,small,span)[class*="text-slate-500"] {
  color: #cbd5e1 !important;
}