/* Dashboard light-mode guard.
 * This file intentionally sits after legacy dashboard styling and corrects
 * hard-coded dark surfaces without changing dark mode. New dashboard code
 * should still use the semantic --mc-* tokens directly.
 */

html[data-theme="light"] .role-dashboard-shell,
html.light .role-dashboard-shell {
  --rd-command-bg: var(--mc-bg-primary) !important;
  --rd-command-panel: var(--mc-surface-1) !important;
  --rd-command-panel-2: var(--mc-surface-2) !important;
  --rd-command-line: var(--mc-border) !important;
  --rd-command-muted: var(--mc-text-muted) !important;
  background:
    radial-gradient(circle at 54% -15%, color-mix(in srgb, var(--mc-brand-blue) 5%, transparent), transparent 34rem),
    var(--mc-bg-primary) !important;
  color: var(--mc-text-primary) !important;
}

html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) :where(
  .mc-card,.mc-glass-card,.mc-subcard,.mc-tile,.genius-card,.genius-admin-card,
  .genius-admin-panel,.genius-kpi-card,[data-surface="card"],[data-surface="elevated"]
):not([data-no-glass="true"]) {
  color: var(--mc-text-primary);
}

/* Forms and data controls must never retain a charcoal fill in light mode. */
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,textarea,.mc-input,.mc-select,.mc-textarea
) {
  background: rgba(255,253,248,.96) !important;
  color: #172033 !important;
  border-color: rgba(100,116,139,.30) !important;
  caret-color: var(--mc-accent) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) :where(input,textarea)::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) select option {
  background: #fffdf8 !important;
  color: #172033 !important;
}

/* Legacy text utilities were authored for dark dashboards. Correct prose and
 * labels, but leave button text alone so primary/action buttons keep contrast. */
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell)
  :where(h1,h2,h3,h4,h5,h6,p,label,legend,td,th,span)[class*="text-white"] {
  color: var(--mc-text-primary) !important;
}
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell)
  :where(p,label,small,span)[class*="text-white/50"],
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell)
  :where(p,label,small,span)[class*="text-white/60"],
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell)
  :where(p,label,small,span)[class*="text-white/70"] {
  color: var(--mc-text-muted) !important;
}

/* Tables and management rosters: light surface, readable dividers and hover. */
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) table {
  color: var(--mc-text-primary);
}
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) thead,
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) thead tr {
  background: color-mix(in srgb, var(--mc-surface-2) 92%, white) !important;
}
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) tbody tr {
  border-color: var(--mc-border) !important;
}
html[data-theme="light"] :where(.role-dashboard-shell,.genius-shell) tbody tr:hover {
  background: color-mix(in srgb, var(--mc-accent) 5%, var(--mc-surface-1)) !important;
}

/* User Management previously left the unused part of its scroll/table shell
 * charcoal in light mode. Keep the entire directory canvas light, including
 * overflow space beyond the intrinsic table columns. */
html[data-theme="light"] .admin-user-directory [class*="dark:bg-slate-950"],
html.light .admin-user-directory [class*="dark:bg-slate-950"] {
  background: var(--mc-surface-1, #fffdf8) !important;
}
html[data-theme="light"] .admin-user-directory [class*="dark:bg-slate-900"],
html.light .admin-user-directory [class*="dark:bg-slate-900"] {
  background: var(--mc-surface-2, #f8f6f0) !important;
}
html[data-theme="light"] .admin-user-directory table {
  width: 100% !important;
  background: var(--mc-surface-1, #fffdf8) !important;
}

/* Admin modals are portals mounted directly under body, so they need a root
 * guard rather than a dashboard-descendant selector. */
html[data-theme="light"] body > div[class*="z-[100001]"] > div,
html.light body > div[class*="z-[100001]"] > div {
  background: rgba(255,253,248,.985) !important;
  color: var(--mc-text-primary) !important;
  border-color: rgba(100,116,139,.28) !important;
  box-shadow: 0 28px 80px rgba(15,23,42,.20) !important;
}
html[data-theme="light"] body > div[class*="z-[100001]"] :where(
  input:not([type="checkbox"]):not([type="radio"]),select,textarea
),
html.light body > div[class*="z-[100001]"] :where(
  input:not([type="checkbox"]):not([type="radio"]),select,textarea
) {
  background: #fff !important;
  color: #172033 !important;
  border-color: rgba(100,116,139,.34) !important;
  caret-color: var(--mc-accent) !important;
}
html[data-theme="light"] body > div[class*="z-[100001]"] :where(input,textarea)::placeholder,
html.light body > div[class*="z-[100001]"] :where(input,textarea)::placeholder {
  color: #7c8491 !important;
  opacity: 1 !important;
}
html[data-theme="light"] body > div[class*="z-[100001]"]
  :where(h1,h2,h3,h4,h5,h6,p,label,legend,span)[class*="text-white"],
html.light body > div[class*="z-[100001]"]
  :where(h1,h2,h3,h4,h5,h6,p,label,legend,span)[class*="text-white"] {
  color: var(--mc-text-primary) !important;
}
html[data-theme="light"] body > div[class*="z-[100001]"] fieldset,
html.light body > div[class*="z-[100001]"] fieldset {
  background: #faf8f2 !important;
  border: 1px solid rgba(100,116,139,.24) !important;
  border-radius: 14px !important;
  padding: 18px !important;
}
html[data-theme="light"] body > div[class*="z-[100001]"] fieldset legend,
html.light body > div[class*="z-[100001]"] fieldset legend {
  background: #fffdf8;
  color: #172033 !important;
  border-radius: 8px;
  padding: 3px 9px !important;
}

/* The admin contact block was visually noisy: flatten it into a clear section,
 * keep address-line-2 visibly optional, and give grouped address fields rhythm. */
html[data-theme="light"] #admin-user-phone,
html[data-theme="light"] #admin-user-address-1,
html[data-theme="light"] #admin-user-address-2,
html[data-theme="light"] #admin-user-city,
html[data-theme="light"] #admin-user-state,
html[data-theme="light"] #admin-user-postal-code,
html[data-theme="light"] #admin-user-country {
  min-height: 44px;
  border-radius: 10px !important;
  background: #fff !important;
  color: #172033 !important;
  border: 1px solid #cbd5e1 !important;
}
html[data-theme="light"] #admin-user-phone:focus,
html[data-theme="light"] #admin-user-address-1:focus,
html[data-theme="light"] #admin-user-address-2:focus,
html[data-theme="light"] #admin-user-city:focus,
html[data-theme="light"] #admin-user-state:focus,
html[data-theme="light"] #admin-user-postal-code:focus,
html[data-theme="light"] #admin-user-country:focus {
  border-color: var(--mc-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc-accent) 18%, transparent) !important;
  outline: none;
}

/* Keep explicitly dark/visual canvases alone. */
html[data-theme="light"] [data-no-glass="true"],
html[data-theme="light"] canvas,
html[data-theme="light"] video {
  color-scheme: normal;
}