/* OVERRIDES TAILWIND */
html[data-theme] .dashboard-shell .bg-white\/5,
html[data-theme] .dashboard-shell .bg-white\/10,
html[data-theme] .dashboard-shell .bg-white\/15,
html[data-theme] .dashboard-shell .bg-white\/20 {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow) !important;
}

html[data-theme] .dashboard-shell .border-white\/10,
html[data-theme] .dashboard-shell .border-white\/15,
html[data-theme] .dashboard-shell .border-white\/20,
html[data-theme] .dashboard-shell .border-white\/30,
html[data-theme] .dashboard-shell .border-white\/40,
html[data-theme] .dashboard-shell .border-white\/70 { border-color: var(--border) !important; }

html[data-theme] .dashboard-shell .text-white,
html[data-theme] .dashboard-shell .text-slate-100,
html[data-theme] .dashboard-shell .text-slate-200,
html[data-theme] .dashboard-shell .text-slate-300 { color: var(--text-main) !important; }

html[data-theme] .dashboard-shell .text-slate-400,
html[data-theme] .dashboard-shell .text-slate-500 { color: var(--text-muted) !important; }

html[data-theme] .dashboard-shell .shadow-slate-900\/30,
html[data-theme] .dashboard-shell .shadow-slate-900\/40,
html[data-theme] .dashboard-shell .shadow-slate-900\/20 { box-shadow: var(--shadow) !important; }

html[data-theme="light"] .dashboard-shell .bg-amber-500\/10,
html[data-theme="light"] .dashboard-shell .bg-amber-400\/10 {
  background-color: var(--banner-warning-bg) !important;
  border-color: var(--banner-warning-border) !important;
  color: var(--banner-warning-text) !important;
}

html[data-theme="light"] .dashboard-shell .bg-emerald-500\/10 {
  background-color: color-mix(in srgb, var(--color-emerald-500) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--color-emerald-600) 45%, transparent) !important;
  color: var(--color-emerald-700) !important;
}

html[data-theme="light"] .dashboard-shell .bg-red-500\/10 {
  background-color: color-mix(in srgb, var(--color-rose-500) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--color-rose-600) 45%, transparent) !important;
  color: var(--color-rose-900) !important;
}

html[data-theme="light"] .dashboard-shell [data-section-editor],
html[data-theme="light"] .dashboard-shell [data-section-preview] {
  background-color: var(--color-ink-50) !important;
  color: var(--text-main) !important;
  border-color: color-mix(in srgb, var(--border) 100%, transparent) !important;
  box-shadow: 0 8px 30px color-mix(in srgb, var(--color-ink-800) 12%, transparent);
}

html[data-theme="light"] .dashboard-shell [data-section-editor]::placeholder,
html[data-theme="light"] .dashboard-shell [data-section-preview]::placeholder { color: var(--text-muted); }