/**
 * Remaps Syncfusion Fluent2-dark CSS variables to Polaris design tokens.
 * Load after tailwind.css so --primary-color, --bg-*, etc. are defined.
 * fluent2-dark.css sets --color-sf-* on :root; this layer overrides them.
 */
:root {
  /* Surfaces — Loveable / PMO studio palette */
  --color-sf-content-bg-color: var(--bg-content);
  --color-sf-content-bg-color-alt1: var(--bg-dark);
  --color-sf-content-bg-color-alt2: var(--bg-light);
  --color-sf-content-bg-color-alt3: var(--bg-medium);
  --color-sf-content-bg-color-alt4: #0a0a0a;
  --color-sf-content-bg-color-alt5: #000;
  --color-sf-content-bg-color-alt6: #050505;
  --color-sf-content-bg-color-hover: var(--bg-medium);
  --color-sf-content-bg-color-pressed: var(--bg-light);
  --color-sf-content-bg-color-focus: var(--color-sf-content-bg-color-hover);
  --color-sf-content-bg-color-selected: var(--bg-medium);
  --color-sf-content-bg-color-dragged: var(--pill-info-bg);
  --color-sf-content-bg-color-disabled: var(--bg-light);

  --color-sf-flyout-bg-color: var(--bg-dark);
  --color-sf-flyout-bg-color-hover: var(--bg-medium);
  --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
  --color-sf-flyout-bg-color-selected: var(--bg-medium);
  --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);

  --color-sf-overlay-bg-color: rgba(0, 0, 0, 0.55);
  --color-sf-table-bg-color-hover: var(--bg-medium);
  --color-sf-table-bg-color-pressed: var(--bg-light);
  --color-sf-table-bg-color-selected: var(--gantt-selection-bg);

  /* Text */
  --color-sf-content-text-color: var(--text-primary);
  --color-sf-content-text-color-alt1: var(--text-light);
  --color-sf-content-text-color-alt2: var(--text-secondary);
  --color-sf-content-text-color-alt3: var(--text-secondary);
  --color-sf-content-text-color-hover: var(--text-primary);
  --color-sf-content-text-color-pressed: var(--text-primary);
  --color-sf-content-text-color-focus: var(--text-primary);
  --color-sf-content-text-color-selected: var(--text-primary);
  --color-sf-content-text-color-dragged: var(--text-primary);
  --color-sf-content-text-color-disabled: #6b7280;

  --color-sf-placeholder-text-color: var(--text-secondary);
  --color-sf-flyout-text-color: var(--text-primary);
  --color-sf-flyout-text-color-hover: var(--text-primary);
  --color-sf-flyout-text-color-pressed: var(--text-primary);
  --color-sf-flyout-text-color-selected: var(--text-primary);
  --color-sf-flyout-text-color-focus: var(--text-primary);
  --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);

  --color-sf-table-text-color-hover: var(--text-primary);
  --color-sf-table-text-color-pressed: var(--text-primary);
  --color-sf-table-text-color-selected: var(--text-primary);

  --color-sf-icon-color: var(--text-light);
  --color-sf-icon-color-hover: var(--text-primary);
  --color-sf-icon-color-hover-alt: var(--text-primary);
  --color-sf-icon-color-pressed: var(--text-primary);
  --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);

  /* Borders */
  --color-sf-border-light: var(--border-color);
  --color-sf-border: #3d4450;
  --color-sf-border-alt: #6b7280;
  --color-sf-border-dark: #525866;
  --color-sf-border-hover: #6b7280;
  --color-sf-border-pressed: var(--border-color);
  --color-sf-border-focus: var(--primary-color);
  --color-sf-border-selected: var(--primary-color);
  --color-sf-border-dragged: var(--primary-color);
  --color-sf-border-disabled: #3f4654;
  --color-sf-flyout-border: var(--border-color);

  /* Primary accent — maps to --primary-* from input.css (dark vs light theme). */
  --color-sf-primary: var(--primary-color);
  --color-sf-primary-text-color: var(--primary-text);
  --color-sf-primary-light: color-mix(in srgb, var(--primary-color) 22%, transparent);
  --color-sf-primary-lighter: color-mix(in srgb, var(--primary-color) 12%, transparent);
  --color-sf-primary-dark: var(--primary-hover);
  --color-sf-primary-darker: var(--primary-active);
  --color-sf-primary-label-color: var(--primary-color);
  --color-sf-primary-cell-selection: var(--gantt-selection-bg);

  --color-sf-primary-bg-color: var(--primary-color);
  --color-sf-primary-border-color: var(--primary-color);
  --color-sf-primary-text: var(--primary-text);

  --color-sf-primary-bg-color-hover: var(--primary-hover);
  --color-sf-primary-border-color-hover: var(--primary-hover);
  --color-sf-primary-text-hover: var(--primary-text);

  --color-sf-primary-bg-color-pressed: var(--primary-active);
  --color-sf-primary-border-color-pressed: var(--primary-active);
  --color-sf-primary-text-pressed: var(--primary-text);

  --color-sf-primary-bg-color-focus: var(--primary-hover);
  --color-sf-primary-border-color-focus: var(--primary-hover);
  --color-sf-primary-text-focus: var(--primary-text);

  --color-sf-primary-bg-color-disabled: var(--bg-light);
  --color-sf-primary-border-color-disabled: var(--bg-light);
  --color-sf-primary-text-disabled: var(--color-sf-content-text-color-disabled);

  --color-sf-primary-bg-color-selected: var(--primary-color);
  --color-sf-primary-border-color-selected: var(--primary-color);
  --color-sf-primary-text-selected: var(--primary-text);

  /* Secondary buttons */
  --color-sf-secondary-bg-color: var(--bg-dark);
  --color-sf-secondary-border-color: var(--border-color);
  --color-sf-secondary-text-color: var(--text-primary);
  --color-sf-secondary-bg-color-hover: var(--bg-medium);
  --color-sf-secondary-border-color-hover: #6b7280;
  --color-sf-secondary-text-color-hover: var(--text-primary);
  --color-sf-secondary-bg-color-pressed: var(--color-sf-black);
  --color-sf-secondary-border-color-pressed: #6b7280;
  --color-sf-secondary-text-color-pressed: var(--text-primary);
  --color-sf-secondary-bg-color-focus: var(--bg-medium);
  --color-sf-secondary-border-color-focus: var(--primary-color);
  --color-sf-secondary-text-color-focus: var(--text-primary);
  --color-sf-secondary-bg-color-disabled: var(--bg-light);
  --color-sf-secondary-border-color-disabled: var(--bg-light);
  --color-sf-secondary-text-color-disabled: var(--color-sf-content-text-color-disabled);
  --color-sf-secondary-bg-color-selected: var(--bg-medium);
  --color-sf-secondary-border-color-selected: #6b7280;
  --color-sf-secondary-text-color-selected: var(--text-primary);

  /* Semantic accents — align info with teal; keep success/warning/danger readable */
  --color-sf-info: var(--status-info);
  --color-sf-info-light: color-mix(in srgb, var(--pill-info-bg) 88%, var(--bg-content));
  --color-sf-info-dark: var(--pill-info-fg);
  --color-sf-info-light-alt: color-mix(in srgb, var(--pill-info-bg) 55%, var(--bg-content));
  --color-sf-border-info: var(--primary-color);

  --color-sf-success: var(--status-success);
  --color-sf-success-light: color-mix(in srgb, var(--status-success) 24%, var(--bg-content));
  --color-sf-success-dark: var(--pill-success-fg);
  --color-sf-success-light-alt: color-mix(in srgb, var(--status-success) 14%, var(--bg-content));

  --color-sf-warning: var(--status-warning);
  --color-sf-warning-light: color-mix(in srgb, var(--status-warning) 22%, var(--bg-content));
  --color-sf-warning-dark: var(--pill-warning-fg);
  --color-sf-warning-light-alt: color-mix(in srgb, var(--status-warning) 16%, var(--bg-content));

  --color-sf-danger: var(--status-danger);
  --color-sf-danger-light: color-mix(in srgb, var(--status-danger) 26%, var(--bg-content));
  --color-sf-danger-dark: var(--pill-danger-fg);
  --color-sf-danger-light-alt: color-mix(in srgb, var(--status-danger) 14%, var(--bg-content));

  --color-sf-badge-warning: var(--pill-warning-fg);
  --color-sf-badge-warning-text: var(--pill-warning-fg);
}

/**
 * LIGHT THEME OVERRIDES — only the values that are hardcoded dark in the :root block above and
 * cannot flip automatically via Polaris semantic vars. The Syncfusion fluent2.css (light) bundle is
 * loaded by App.razor when [data-theme="light"], so most chrome already adapts; these tokens cover
 * the gaps where the polaris-overrides force dark hex values that would clash on white surfaces.
 */
:root[data-theme="light"],
html[data-theme="light"],
body[data-theme="light"],
.page[data-theme="light"] {
  /* Warm fallback surfaces used by Syncfusion for nested popups / hover overlays. */
  --color-sf-content-bg-color-alt1: var(--bg-medium);
  --color-sf-content-bg-color-alt2: var(--bg-light);
  --color-sf-content-bg-color-alt3: var(--bg-medium);
  --color-sf-content-bg-color-hover: var(--bg-medium);
  --color-sf-content-bg-color-selected: var(--gantt-selection-bg);
  --color-sf-table-bg-color-selected: var(--gantt-selection-bg);
  --color-sf-content-bg-color-alt4: #f4f2eb;
  --color-sf-content-bg-color-alt5: #ffffff;
  --color-sf-content-bg-color-alt6: #faf9f5;

  /* Disabled chrome — keep ink-300 (warm-neutral) on light backgrounds. */
  --color-sf-content-text-color-disabled: #97a1ad;

  /* Borders: cool hairlines aligned with Polaris --border-color (#e7eaee). */
  --color-sf-border-light: #f1f4f7;
  --color-sf-border: #e7eaee;
  --color-sf-border-alt: #d0d5dc;
  --color-sf-border-dark: #e2e6ea;
  --color-sf-border-hover: #d0d5dc;
  --color-sf-border-disabled: #f1f4f7;

  /* Secondary buttons: keep neutral border on hover/pressed/selected against white. */
  --color-sf-secondary-border-color-hover: #97a1ad;
  --color-sf-secondary-border-color-pressed: #97a1ad;
  --color-sf-secondary-border-color-selected: #97a1ad;

  /* Semantic accents: in light mode `-light` is a pale tint, `-dark` is the darker text. */
  --color-sf-info-light: var(--pill-info-bg);
  --color-sf-info-dark: var(--pill-info-fg);
  --color-sf-info-light-alt: color-mix(in srgb, var(--pill-info-bg) 82%, #ffffff);

  --color-sf-success: var(--status-success);
  --color-sf-success-light: var(--pill-success-bg);
  --color-sf-success-dark: var(--pill-success-fg);
  --color-sf-success-light-alt: color-mix(in srgb, var(--pill-success-bg) 78%, #ffffff);

  --color-sf-warning: var(--status-warning);
  --color-sf-warning-light: var(--pill-warning-bg);
  --color-sf-warning-dark: var(--pill-warning-fg);
  --color-sf-warning-light-alt: color-mix(in srgb, var(--pill-warning-bg) 82%, #ffffff);

  --color-sf-danger: var(--status-danger);
  --color-sf-danger-light: var(--pill-danger-bg);
  --color-sf-danger-dark: var(--pill-danger-fg);
  --color-sf-danger-light-alt: color-mix(in srgb, var(--pill-danger-bg) 85%, #ffffff);

  --color-sf-badge-warning: var(--pill-warning-fg);
  --color-sf-badge-warning-text: var(--pill-warning-fg);

  /* Modal overlay slightly less opaque on light backgrounds so the underlying page softly shows. */
  --color-sf-overlay-bg-color: rgba(15, 20, 25, 0.45);

  /* Portaled SfDialog / popups read flyout tokens from :root (not .page). */
  --color-sf-flyout-bg-color: var(--bg-light);
  --color-sf-flyout-bg-color-hover: var(--bg-medium);
  --color-sf-flyout-bg-color-selected: var(--bg-medium);
  --color-sf-flyout-bg-color-focus: var(--bg-medium);
  --color-sf-content-bg-color: var(--bg-light);

  /* fluent2.css (light) does not define --color-sf-black; dark remaps referenced it → invalid pressed states. */
  --color-sf-secondary-bg-color-pressed: #ebe9e0;
  --color-sf-flyout-bg-color-pressed: #ebe9e0;
}

/**
 * Calendar / DatePicker popups — Fluent2 sometimes hard-codes selection; force exact Polaris primary.
 * See: https://blazor.syncfusion.com/documentation/calendar/style-appearance
 */
.e-calendar .e-content .e-selected span.e-day,
.e-calendar .e-content .e-selected span.e-day:hover,
.e-calendar .e-content .e-today.e-selected:hover span.e-day,
.e-calendar .e-content .e-today.e-selected span.e-day,
.e-calendar .e-content .e-selected:hover span.e-day,
.e-calendar .e-content td.e-selected.e-focused-date span.e-day {
  background-color: var(--primary-color) !important;
  color: var(--primary-text) !important;
  border-color: var(--primary-color) !important;
}

/* Today (not selected): ring + label use primary */
.e-calendar .e-content td.e-today:not(.e-selected) span.e-day {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

.e-datepicker-popup-wrapper .e-calendar .e-content .e-selected span.e-day,
.e-datepicker-popup-wrapper .e-calendar .e-content .e-selected span.e-day:hover,
.e-datepicker-popup-wrapper .e-calendar .e-content .e-today.e-selected span.e-day,
.e-datepicker-popup-wrapper .e-calendar .e-content td.e-selected.e-focused-date span.e-day {
  background-color: var(--primary-color) !important;
  color: var(--primary-text) !important;
  border-color: var(--primary-color) !important;
}

.e-datepicker-popup-wrapper .e-calendar .e-content td.e-today:not(.e-selected) span.e-day {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}

/* Footer: Today / Clear — link color matches primary */
.e-calendar .e-footer-container .e-btn,
.e-calendar .e-footer-container .e-btn.e-flat {
  color: var(--primary-color) !important;
}

.e-calendar .e-footer-container .e-btn:hover,
.e-calendar .e-footer-container .e-btn.e-flat:hover {
  background-color: var(--pill-info-bg) !important;
  color: var(--primary-color) !important;
}

/* Month/year header nav: hover uses primary tint */
.e-calendar .e-header .e-icon-container .e-btn:hover,
.e-calendar .e-header .e-icon-container button:hover {
  color: var(--primary-color) !important;
}

.e-datepicker-popup-wrapper .e-calendar .e-footer-container .e-btn,
.e-datepicker-popup-wrapper .e-calendar .e-footer-container .e-btn.e-flat {
  color: var(--primary-color) !important;
}

.e-datepicker-popup-wrapper .e-calendar .e-footer-container .e-btn:hover,
.e-datepicker-popup-wrapper .e-calendar .e-footer-container .e-btn.e-flat:hover {
  background-color: var(--pill-info-bg) !important;
  color: var(--primary-color) !important;
}

.e-datepicker-popup-wrapper .e-calendar .e-header .e-icon-container .e-btn:hover,
.e-datepicker-popup-wrapper .e-calendar .e-header .e-icon-container button:hover {
  color: var(--primary-color) !important;
}

/* -------------------------------------------------------------------------- */
/* Gantt — light theme: grid + chart pane surfaces (mixed tokens / SVG cache). */
/* -------------------------------------------------------------------------- */
html[data-theme="light"] .e-gantt .e-headercell,
html[data-theme="light"] .e-gantt td.e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd),
.page[data-theme="light"] .e-gantt .e-headercell,
.page[data-theme="light"] .e-gantt td.e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd) {
  background-color: var(--bg-light) !important;
  color: var(--text-primary) !important;
}

/* Gantt light: grid + timeline hairlines (Fluent default borders read too dark on white). */
html[data-theme="light"] .e-gantt .e-grid td:not(.e-cellselectionbackground):not(.e-active),
html[data-theme="light"] .e-gantt .e-grid th,
html[data-theme="light"] .e-gantt .e-grid .e-table,
html[data-theme="light"] .e-gantt .e-grid .e-gridheader,
html[data-theme="light"] .e-gantt .e-grid .e-gridcontent,
html[data-theme="light"] .e-gantt tr.e-chart-row td,
html[data-theme="light"] .e-gantt .e-chart-rows-container td,
html[data-theme="light"] .e-gantt .e-timeline-header-container td,
html[data-theme="light"] .e-gantt .e-timeline-header-container th,
html[data-theme="light"] .e-gantt .e-timeline-top-header-cell,
html[data-theme="light"] .e-gantt .e-timeline-single-header-cell,
.page[data-theme="light"] .e-gantt .e-grid td:not(.e-cellselectionbackground):not(.e-active),
.page[data-theme="light"] .e-gantt .e-grid th,
.page[data-theme="light"] .e-gantt .e-grid .e-table,
.page[data-theme="light"] .e-gantt .e-grid .e-gridheader,
.page[data-theme="light"] .e-gantt .e-grid .e-gridcontent,
.page[data-theme="light"] .e-gantt tr.e-chart-row td,
.page[data-theme="light"] .e-gantt .e-chart-rows-container td,
.page[data-theme="light"] .e-gantt .e-timeline-header-container td,
.page[data-theme="light"] .e-gantt .e-timeline-header-container th,
.page[data-theme="light"] .e-gantt .e-timeline-top-header-cell,
.page[data-theme="light"] .e-gantt .e-timeline-single-header-cell {
  border-color: var(--border-color) !important;
}

html[data-theme="light"] .e-gantt .e-chart-grid-line,
html[data-theme="light"] .e-gantt .e-gantt-chart .e-chart-grid-line,
.page[data-theme="light"] .e-gantt .e-chart-grid-line,
.page[data-theme="light"] .e-gantt .e-gantt-chart .e-chart-grid-line {
  stroke: var(--border-color) !important;
}

html[data-theme="light"] .e-gantt .e-chart-root-container,
html[data-theme="light"] .e-gantt .e-chart-scroll-container,
html[data-theme="light"] .e-gantt .e-gantt-chart-pane,
.page[data-theme="light"] .e-gantt .e-chart-root-container,
.page[data-theme="light"] .e-gantt .e-chart-scroll-container,
.page[data-theme="light"] .e-gantt .e-gantt-chart-pane {
  background-color: var(--bg-light) !important;
}

html[data-theme="light"] .e-gantt .e-timeline-header-container,
.page[data-theme="light"] .e-gantt .e-timeline-header-container {
  background-color: var(--bg-medium) !important;
  color: var(--text-primary) !important;
}

html[data-theme="light"] .e-gantt .e-timeline-header-container .e-header-cell-label,
.page[data-theme="light"] .e-gantt .e-timeline-header-container .e-header-cell-label {
  color: var(--text-primary);
}

/* Gantt light: toolbar + tree pane still pick up dark fills (alt tokens / Fluent2 grid chrome). */
html[data-theme="light"] .e-gantt .e-toolbar,
html[data-theme="light"] .e-gantt .e-toolbar .e-toolbar-items,
html[data-theme="light"] .e-gantt .e-toolbar .e-toolbar-item,
.page[data-theme="light"] .e-gantt .e-toolbar,
.page[data-theme="light"] .e-gantt .e-toolbar .e-toolbar-items,
.page[data-theme="light"] .e-gantt .e-toolbar .e-toolbar-item {
  background-color: var(--bg-medium) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="light"] .e-gantt .e-toolbar .e-tbar-btn,
.page[data-theme="light"] .e-gantt .e-toolbar .e-tbar-btn {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}

html[data-theme="light"] .e-gantt .e-toolbar .e-tbar-btn .e-icons,
html[data-theme="light"] .e-gantt .e-toolbar .e-icons,
.page[data-theme="light"] .e-gantt .e-toolbar .e-tbar-btn .e-icons,
.page[data-theme="light"] .e-gantt .e-toolbar .e-icons {
  color: var(--text-primary) !important;
}

html[data-theme="light"] .e-gantt .e-toolbar .e-tbar-btn:hover,
.page[data-theme="light"] .e-gantt .e-toolbar .e-tbar-btn:hover {
  background-color: var(--hover-color) !important;
  color: var(--primary-color) !important;
}

html[data-theme="light"] .e-gantt .e-toolbar .e-tbar-btn:hover .e-icons,
.page[data-theme="light"] .e-gantt .e-toolbar .e-tbar-btn:hover .e-icons {
  color: var(--primary-color) !important;
}

html[data-theme="light"] .e-gantt .e-gantt-tree-grid-pane,
html[data-theme="light"] .e-gantt .e-tree-grid,
html[data-theme="light"] .e-gantt .e-grid .e-gridcontent,
html[data-theme="light"] .e-gantt .e-grid .e-content,
.page[data-theme="light"] .e-gantt .e-gantt-tree-grid-pane,
.page[data-theme="light"] .e-gantt .e-tree-grid,
.page[data-theme="light"] .e-gantt .e-grid .e-gridcontent,
.page[data-theme="light"] .e-gantt .e-grid .e-content {
  background-color: var(--bg-light) !important;
  background-image: none !important;
}

html[data-theme="light"] .e-gantt .e-grid tr:not(.e-selectionbackground):not(.e-active) .e-headercell:first-child,
html[data-theme="light"] .e-gantt .e-grid tr:not(.e-selectionbackground):not(.e-active) .e-rowcell:first-child,
html[data-theme="light"] .e-gantt .e-grid tr:not(.e-selectionbackground):not(.e-active) td.e-rowdragdrop,
html[data-theme="light"] .e-gantt .e-grid th.e-rowdragheader,
html[data-theme="light"] .e-gantt .e-grid tr:not(.e-selectionbackground):not(.e-active) .e-rowdragcell,
.page[data-theme="light"] .e-gantt .e-grid tr:not(.e-selectionbackground):not(.e-active) .e-headercell:first-child,
.page[data-theme="light"] .e-gantt .e-grid tr:not(.e-selectionbackground):not(.e-active) .e-rowcell:first-child,
.page[data-theme="light"] .e-gantt .e-grid tr:not(.e-selectionbackground):not(.e-active) td.e-rowdragdrop,
.page[data-theme="light"] .e-gantt .e-grid th.e-rowdragheader,
.page[data-theme="light"] .e-gantt .e-grid tr:not(.e-selectionbackground):not(.e-active) .e-rowdragcell {
  background-color: var(--bg-medium) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}

html[data-theme="light"] .e-gantt .e-grid td.e-rowdragdrop .e-icons,
html[data-theme="light"] .e-gantt .e-grid .e-rowcell:first-child .e-icons,
.page[data-theme="light"] .e-gantt .e-grid td.e-rowdragdrop .e-icons,
.page[data-theme="light"] .e-gantt .e-grid .e-rowcell:first-child .e-icons {
  color: var(--text-primary) !important;
}

html[data-theme="light"] .e-gantt .e-grid .e-emptyrow,
html[data-theme="light"] .e-gantt .e-grid .e-empty,
html[data-theme="light"] .e-gantt .e-grid .e-scrollinsertedrow,
.page[data-theme="light"] .e-gantt .e-grid .e-emptyrow,
.page[data-theme="light"] .e-gantt .e-grid .e-empty,
.page[data-theme="light"] .e-gantt .e-grid .e-scrollinsertedrow {
  background-color: var(--bg-light) !important;
  background-image: none !important;
}

html[data-theme="light"] .e-gantt .e-split-bar,
html[data-theme="light"] .e-gantt .e-resizer-split-bar,
.page[data-theme="light"] .e-gantt .e-split-bar,
.page[data-theme="light"] .e-gantt .e-resizer-split-bar {
  background-color: var(--border-color) !important;
  border-color: var(--border-color) !important;
}

/* -------------------------------------------------------------------------- */
/* Gantt — selected row (tree grid + chart timeline), all themes.              */
/* Light surface rules above must exclude selection cells; these rules win.    */
/* -------------------------------------------------------------------------- */
.e-gantt .e-grid tr.e-selectionbackground td.e-rowcell,
.e-gantt .e-grid tr.e-active td.e-rowcell,
.e-gantt td.e-rowcell.e-cellselectionbackground,
.e-gantt td.e-rowcell.e-active {
  background-color: var(--gantt-selection-bg) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  /* Fluent grid hairlines read lighter than the selection fill — match border to fill. */
  border-color: var(--gantt-selection-bg) !important;
  /* No per-cell accent: an inset bar on every cell reads as vertical lines at each
     column boundary. The single left-edge accent lives on the first cell only (below). */
  box-shadow: none;
}

.e-gantt .e-grid tr.e-selectionbackground td.e-rowcell:first-child,
.e-gantt .e-grid tr.e-active td.e-rowcell:first-child,
.e-gantt .e-grid tr.e-selectionbackground td.e-rowdragdrop,
.e-gantt .e-grid tr.e-active td.e-rowdragdrop,
.e-gantt td.e-rowcell.e-cellselectionbackground:first-child {
  background-color: var(--gantt-selection-bg) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  border-color: var(--gantt-selection-bg) !important;
  /* Single selection indicator on the row's left edge only. */
  box-shadow: inset 3px 0 0 var(--gantt-selection-accent);
}

.e-gantt tr.e-chart-row.e-activechart td,
.e-gantt tr.e-chart-row.e-selectionbackground td,
.e-gantt tr.e-chart-row.e-active td,
.e-gantt .e-chart-row-container tr.e-activechart td,
.e-gantt .e-chart-rows-container tr.e-activechart td,
.e-gantt .e-chart-rows-container tr.e-selectionbackground td,
.e-gantt .e-chart-rows-container tr.e-active td,
.e-gantt .e-gantt-chart .e-selectionbackground,
.e-gantt .e-gantt-chart .e-active {
  background-color: var(--gantt-selection-bg) !important;
  background-image: none !important;
  border-color: var(--gantt-selection-bg) !important;
}

.e-gantt tr.e-selectionbackground .e-taskbar-main-container .e-gantt-child-taskbar,
.e-gantt tr.e-active .e-taskbar-main-container .e-gantt-child-taskbar,
.e-gantt tr.e-selectionbackground .e-taskbar-main-container .e-gantt-parent-taskbar,
.e-gantt tr.e-active .e-taskbar-main-container .e-gantt-parent-taskbar {
  box-shadow: 0 0 0 2px var(--gantt-selection-accent);
}

/* Selected chart row — vertical timeline hairlines read lighter than the band. */
.e-gantt tr.e-chart-row.e-activechart .e-chart-grid-line,
.e-gantt tr.e-chart-row.e-selectionbackground .e-chart-grid-line,
.e-gantt tr.e-chart-row.e-active .e-chart-grid-line,
.e-gantt .e-chart-rows-container tr.e-activechart .e-chart-grid-line,
.e-gantt .e-chart-rows-container tr.e-selectionbackground .e-chart-grid-line,
.e-gantt .e-chart-rows-container tr.e-active .e-chart-grid-line {
  stroke: var(--gantt-selection-bg) !important;
}

/* -------------------------------------------------------------------------- */
/* Task dialog (SfDialog portaled to body) — light: cannot use .page ancestor. */
/* -------------------------------------------------------------------------- */
html[data-theme="light"] .e-dialog:has(.task-dialog-content),
html[data-theme="light"] .e-dialog:has([data-testid="polaris-task-dialog-header"]),
html[data-theme="light"] .e-dialog:has(.task-dialog-add-dep-content),
body[data-theme="light"] .e-dialog:has(.task-dialog-content),
body[data-theme="light"] .e-dialog:has([data-testid="polaris-task-dialog-header"]),
body[data-theme="light"] .e-dialog:has(.task-dialog-add-dep-content) {
  background-color: #ffffff !important;
  color: #0f1419 !important;
  border-color: #e7eaee !important;
}

html[data-theme="light"] .e-dialog:has(.task-dialog-content) .e-dlg-header-content,
html[data-theme="light"] .e-dialog:has(.task-dialog-content) .e-dlg-content,
html[data-theme="light"] .e-dialog:has([data-testid="polaris-task-dialog-header"]) .e-dlg-header-content,
html[data-theme="light"] .e-dialog:has([data-testid="polaris-task-dialog-header"]) .e-dlg-content,
html[data-theme="light"] .e-dialog:has(.task-dialog-add-dep-content) .e-dlg-header-content,
html[data-theme="light"] .e-dialog:has(.task-dialog-add-dep-content) .e-dlg-content,
body[data-theme="light"] .e-dialog:has(.task-dialog-content) .e-dlg-header-content,
body[data-theme="light"] .e-dialog:has(.task-dialog-content) .e-dlg-content,
body[data-theme="light"] .e-dialog:has([data-testid="polaris-task-dialog-header"]) .e-dlg-header-content,
body[data-theme="light"] .e-dialog:has([data-testid="polaris-task-dialog-header"]) .e-dlg-content,
body[data-theme="light"] .e-dialog:has(.task-dialog-add-dep-content) .e-dlg-header-content,
body[data-theme="light"] .e-dialog:has(.task-dialog-add-dep-content) .e-dlg-content {
  background-color: #ffffff !important;
  color: #0f1419 !important;
}

html[data-theme="light"] .e-dialog:has(.task-dialog-content) .e-footer-content,
html[data-theme="light"] .e-dialog:has([data-testid="polaris-task-dialog-header"]) .e-footer-content,
html[data-theme="light"] .e-dialog:has(.task-dialog-add-dep-content) .e-footer-content,
body[data-theme="light"] .e-dialog:has(.task-dialog-content) .e-footer-content,
body[data-theme="light"] .e-dialog:has([data-testid="polaris-task-dialog-header"]) .e-footer-content,
body[data-theme="light"] .e-dialog:has(.task-dialog-add-dep-content) .e-footer-content {
  background-color: #f1f4f7 !important;
  border-color: #e7eaee !important;
}

html[data-theme="light"] .e-dialog:has(.task-dialog-content) .form-input,
html[data-theme="light"] .e-dialog:has(.task-dialog-content) textarea.form-input,
html[data-theme="light"] .e-dialog:has(.task-dialog-content) .e-input-group,
html[data-theme="light"] .e-dialog:has(.task-dialog-content) .e-input-group input.e-input,
html[data-theme="light"] .e-dialog:has(.task-dialog-content) .e-ddl.e-input-group,
html[data-theme="light"] .e-dialog:has(.task-dialog-content) .e-ddl input.e-input,
body[data-theme="light"] .e-dialog:has(.task-dialog-content) .form-input,
body[data-theme="light"] .e-dialog:has(.task-dialog-content) textarea.form-input,
body[data-theme="light"] .e-dialog:has(.task-dialog-content) .e-input-group,
body[data-theme="light"] .e-dialog:has(.task-dialog-content) .e-input-group input.e-input,
body[data-theme="light"] .e-dialog:has(.task-dialog-content) .e-ddl.e-input-group,
body[data-theme="light"] .e-dialog:has(.task-dialog-content) .e-ddl input.e-input {
  background-color: #ffffff !important;
  color: #0f1419 !important;
  border-color: #e7eaee !important;
}

html[data-theme="light"] .e-dialog:has(.task-dialog-content) .form-label,
body[data-theme="light"] .e-dialog:has(.task-dialog-content) .form-label {
  color: #4d5a6a !important;
}

html[data-theme="light"] .e-dialog:has(.task-dialog-content) .task-dialog-sf-header-title,
html[data-theme="light"] .e-dialog:has(.task-dialog-content) [data-testid="polaris-task-dialog-header"],
body[data-theme="light"] .e-dialog:has(.task-dialog-content) .task-dialog-sf-header-title,
body[data-theme="light"] .e-dialog:has(.task-dialog-content) [data-testid="polaris-task-dialog-header"],
html[data-theme="light"] .e-dialog:has([data-testid="polaris-task-dialog-header"]) .task-dialog-sf-header-title,
body[data-theme="light"] .e-dialog:has([data-testid="polaris-task-dialog-header"]) .task-dialog-sf-header-title {
  color: #0f1419 !important;
}

/* Portaled dropdown / multiselect popups — list text readable in light theme. */
html[data-theme="light"] .e-popup.e-dropdownbase,
html[data-theme="light"] .e-popup.e-multi-select-list-wrapper,
body[data-theme="light"] .e-popup.e-dropdownbase,
body[data-theme="light"] .e-popup.e-multi-select-list-wrapper {
  background-color: #ffffff !important;
  border-color: #e7eaee !important;
  color: #10151c !important;
}

html[data-theme="light"] .e-popup.e-dropdownbase .e-list-item,
html[data-theme="light"] .e-popup.e-multi-select-list-wrapper .e-list-item,
body[data-theme="light"] .e-popup.e-dropdownbase .e-list-item,
body[data-theme="light"] .e-popup.e-multi-select-list-wrapper .e-list-item {
  color: hsl(222, 47%, 11%) !important;
  -webkit-text-fill-color: hsl(222, 47%, 11%) !important;
}

html[data-theme="light"] .e-popup.e-dropdownbase .e-list-item.e-active,
html[data-theme="light"] .e-popup.e-dropdownbase .e-list-item.e-hover,
html[data-theme="light"] .e-popup.e-multi-select-list-wrapper .e-list-item.e-active,
html[data-theme="light"] .e-popup.e-multi-select-list-wrapper .e-list-item.e-hover,
body[data-theme="light"] .e-popup.e-dropdownbase .e-list-item.e-active,
body[data-theme="light"] .e-popup.e-dropdownbase .e-list-item.e-hover,
body[data-theme="light"] .e-popup.e-multi-select-list-wrapper .e-list-item.e-active,
body[data-theme="light"] .e-popup.e-multi-select-list-wrapper .e-list-item.e-hover {
  background-color: #f1f4f7 !important;
  color: #10151c !important;
  -webkit-text-fill-color: #10151c !important;
}

/* -------------------------------------------------------------------------- */
/* Kanban — light: outer shell + rows (Fluent2 leaves dark board behind columns). */
/* -------------------------------------------------------------------------- */
html[data-theme="light"] .e-kanban,
.page[data-theme="light"] .e-kanban {
  background-color: var(--kanban-board-surface-bg, var(--bg-medium)) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}

html[data-theme="light"] .e-kanban .e-kanban-wrapper,
html[data-theme="light"] .e-kanban .e-kanban-table,
html[data-theme="light"] .e-kanban .e-content-table,
html[data-theme="light"] .e-kanban .e-kanban-content,
html[data-theme="light"] .e-kanban .e-kanban-content .e-content-row,
.page[data-theme="light"] .e-kanban .e-kanban-wrapper,
.page[data-theme="light"] .e-kanban .e-kanban-table,
.page[data-theme="light"] .e-kanban .e-content-table,
.page[data-theme="light"] .e-kanban .e-kanban-content,
.page[data-theme="light"] .e-kanban .e-kanban-content .e-content-row {
  background-color: transparent !important;
  background-image: none !important;
}

html[data-theme="light"] .e-kanban .e-card,
.page[data-theme="light"] .e-kanban .e-card {
  color: var(--text-primary) !important;
}

html[data-theme="light"] .e-kanban .e-card .e-card-content,
html[data-theme="light"] .e-kanban .e-card .e-card-header,
html[data-theme="light"] .e-kanban .e-card-template-wrapper,
html[data-theme="light"] .e-kanban .e-card .e-card-tag,
.page[data-theme="light"] .e-kanban .e-card .e-card-content,
.page[data-theme="light"] .e-kanban .e-card .e-card-header,
.page[data-theme="light"] .e-kanban .e-card-template-wrapper,
.page[data-theme="light"] .e-kanban .e-card .e-card-tag {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}

/* Kanban — light: column chrome (Fluent2 can leave dark swimlane / table cells under transparent rows). */
html[data-theme="light"] .e-kanban .e-header-cells,
html[data-theme="light"] .e-kanban .e-column-header,
html[data-theme="light"] .e-kanban .e-column-header-cells,
.page[data-theme="light"] .e-kanban .e-header-cells,
.page[data-theme="light"] .e-kanban .e-column-header,
.page[data-theme="light"] .e-kanban .e-column-header-cells {
  background-color: var(--kanban-column-header-bg) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}

html[data-theme="light"] .e-kanban .e-column,
html[data-theme="light"] .e-kanban .e-column-container,
html[data-theme="light"] .e-kanban .e-column-table,
.page[data-theme="light"] .e-kanban .e-column,
.page[data-theme="light"] .e-kanban .e-column-container,
.page[data-theme="light"] .e-kanban .e-column-table {
  background-color: var(--kanban-column-body-bg) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}

/*
 * Fluent2 Kanban paints the swimlane with these exact selectors (see fluent2.css):
 *   .e-kanban .e-kanban-table .e-header-cells { background: var(--color-sf-flyout-bg-color) }
 *   .e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) td { background: var(--color-sf-flyout-bg-color) }
 * Our earlier rules targeted .e-kanban-header / .e-column* and lost the cascade to this path.
 */
html[data-theme="light"] .e-kanban .e-kanban-table .e-header-cells,
.page[data-theme="light"] .e-kanban .e-kanban-table .e-header-cells {
  background-color: var(--kanban-column-header-bg) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}

html[data-theme="light"] .e-kanban .e-kanban-table .e-header-cells .e-header-text,
.page[data-theme="light"] .e-kanban .e-kanban-table .e-header-cells .e-header-text {
  color: var(--text-primary) !important;
}

html[data-theme="light"] .e-kanban .e-kanban-table .e-header-cells .e-item-count,
.page[data-theme="light"] .e-kanban .e-kanban-table .e-header-cells .e-item-count {
  color: var(--text-secondary) !important;
}

html[data-theme="light"] .e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) td,
.page[data-theme="light"] .e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) td {
  background-color: var(--kanban-column-body-bg) !important;
  background-image: none !important;
}

html[data-theme="light"] .e-kanban .e-kanban-content .e-content-row .e-content-cells,
.page[data-theme="light"] .e-kanban .e-kanban-content .e-content-row .e-content-cells {
  background-color: var(--kanban-column-body-bg) !important;
  background-image: none !important;
}

/* -------------------------------------------------------------------------- */
/* Kanban — universal: shell, columns, cards, and task tone overlays.         */
/*                                                                            */
/* Lives here (NOT in TaskKanbanTab.razor.css) because:                       */
/*   1. Syncfusion can render kanban DOM outside the host (drag preview,      */
/*      drop animation, swimlane fragments); scoped ::deep CSS may not reach. */
/*   2. The .razor.css project bundle (Polaris.Client.styles.css) can lag     */
/*      behind per-file scoped output on incremental / Hot Reload builds —    */
/*      a stale bundle silently drops these rules entirely.                   */
/*   3. Per AGENTS.md, all Syncfusion component theming has ONE home:         */
/*      this file (no scoped duplicates).                                     */
/* -------------------------------------------------------------------------- */

/* Outer kanban shell + column chrome (theme tokens cover dark + light). */
.kanban-host .e-kanban {
  background-color: var(--kanban-board-surface-bg);
  color: var(--text-primary);
}

.kanban-host .e-kanban .e-column-header,
.kanban-host .e-kanban .e-header-cells {
  background: var(--kanban-column-header-bg);
  border-radius: 8px 8px 0 0;
  color: var(--text-primary);
}

.kanban-host .e-kanban .e-column-container {
  background: var(--kanban-column-body-bg);
  border: 1px solid var(--kanban-column-border);
  border-radius: 0 0 10px 10px;
}

/* Base task card — theme-driven shell. Tone overlays below replace the
   background when an inner .kanban-card-body--* tone class is present. */
.kanban-host .e-kanban .e-card {
  border: 1px solid var(--kanban-card-border) !important;
  border-radius: 12px !important;
  background: var(--kanban-card-bg) !important;
  backdrop-filter: var(--kanban-card-backdrop);
  -webkit-backdrop-filter: var(--kanban-card-backdrop);
  box-shadow: var(--kanban-card-shadow);
}

/* Tracking Kanban cards are form shells (dropdowns, dates, Comments), not
   navigable rows — no hover border/shadow/cursor affordance on .e-card. */
.kanban-host .e-kanban .e-card:hover {
  border-color: var(--kanban-card-border) !important;
  background: var(--kanban-card-bg) !important;
  box-shadow: var(--kanban-card-shadow) !important;
  cursor: default;
}

/* Tone: InitiativeTrackingKanbanCard stamps .kanban-card-body--* on the inner
   body; :has() mirrors border styling onto .e-card. At rest the surface stays
   --kanban-card-bg; coloured border + inner left-stripe carry status.
   Rules MUST sit AFTER the base .e-card rule above. */

/* Overdue + not complete → red. By definition: any task in the Overdue
   column whose effective status is not Complete must read as red. */
.kanban-host .e-kanban .e-card:has(.kanban-card-body--overdue-incomplete) {
  border-color: rgba(239, 68, 68, 0.55) !important;
  background: var(--kanban-card-bg) !important;
  box-shadow: var(--kanban-card-shadow) !important;
}

.kanban-host .e-kanban .e-card:has(.kanban-card-body--overdue-incomplete):hover {
  border-color: rgba(239, 68, 68, 0.55) !important;
  background: var(--kanban-card-bg) !important;
  box-shadow: var(--kanban-card-shadow) !important;
  cursor: default;
}

/* Effective status Complete → green. Wins over At-risk; loses to Overdue+not-complete. */
.kanban-host .e-kanban .e-card:has(.kanban-card-body--complete) {
  border-color: rgba(34, 197, 94, 0.50) !important;
  background: var(--kanban-card-bg) !important;
  box-shadow: var(--kanban-card-shadow) !important;
}

.kanban-host .e-kanban .e-card:has(.kanban-card-body--complete):hover {
  border-color: rgba(34, 197, 94, 0.50) !important;
  background: var(--kanban-card-bg) !important;
  box-shadow: var(--kanban-card-shadow) !important;
  cursor: default;
}

/* Effective status At-risk (and not in Overdue column) → amber. */
.kanban-host .e-kanban .e-card:has(.kanban-card-body--at-risk) {
  border-color: rgba(245, 158, 11, 0.55) !important;
  background: var(--kanban-card-bg) !important;
  box-shadow: var(--kanban-card-shadow) !important;
}

.kanban-host .e-kanban .e-card:has(.kanban-card-body--at-risk):hover {
  border-color: rgba(245, 158, 11, 0.55) !important;
  background: var(--kanban-card-bg) !important;
  box-shadow: var(--kanban-card-shadow) !important;
  cursor: default;
}

/* Inner body left-stripe — primary tone cue at rest when there is no fill.
   Browsers without :has() still see the stripe. */
.kanban-host .kanban-card-body--overdue-incomplete {
  border-radius: 10px;
  border-left: 4px solid rgb(220, 38, 38);
}

.kanban-host .kanban-card-body--complete {
  border-radius: 10px;
  border-left: 4px solid rgb(22, 163, 74);
}

.kanban-host .kanban-card-body--at-risk {
  border-radius: 10px;
  border-left: 4px solid rgb(217, 119, 6);
}

/* -------------------------------------------------------------------------- */
/* Grid — light: standalone SfGrid (initiative tracking metrics; not inside Gantt). */
/* Fluent applies !important row/header rules; match specificity and use literal */
/* light surfaces so tokens still resolve correctly when html[data-theme=light] */
/* briefly disagrees with .page[data-theme] (ThemeService default before init). */
/* Palette matches input.css [data-theme=light] (--bg-light / --bg-medium / text-primary). */
/* -------------------------------------------------------------------------- */
html[data-theme="light"] .metric-grid-host .e-grid,
.page[data-theme="light"] .metric-grid-host .e-grid {
  background-color: #ffffff !important;
  background-image: none !important;
  color: hsl(222, 47%, 11%) !important;
  border-color: hsl(215, 25%, 88%) !important;
}

html[data-theme="light"] .metric-grid-host .e-grid .e-gridheader,
.page[data-theme="light"] .metric-grid-host .e-grid .e-gridheader {
  background-color: hsl(215, 30%, 94%) !important;
  background-image: none !important;
}

html[data-theme="light"] .metric-grid-host .e-grid .e-gridcontent,
html[data-theme="light"] .metric-grid-host .e-grid .e-gridcontent .e-content,
html[data-theme="light"] .metric-grid-host .e-grid .e-content,
.page[data-theme="light"] .metric-grid-host .e-grid .e-gridcontent,
.page[data-theme="light"] .metric-grid-host .e-grid .e-gridcontent .e-content,
.page[data-theme="light"] .metric-grid-host .e-grid .e-content {
  background-color: #ffffff !important;
  background-image: none !important;
}

html[data-theme="light"] .metric-grid-host .e-grid .e-headercell:not(.e-columnsheader),
.page[data-theme="light"] .metric-grid-host .e-grid .e-headercell:not(.e-columnsheader) {
  background-color: hsl(215, 30%, 94%) !important;
  background-image: none !important;
  color: hsl(222, 47%, 11%) !important;
}

html[data-theme="light"] .metric-grid-host .e-grid td.e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd),
.page[data-theme="light"] .metric-grid-host .e-grid td.e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd) {
  background-color: #ffffff !important;
  color: hsl(222, 47%, 11%) !important;
}

html[data-theme="light"] .metric-grid-host .e-grid tr.e-altrow td.e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd),
.page[data-theme="light"] .metric-grid-host .e-grid tr.e-altrow td.e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd) {
  background-color: color-mix(in srgb, hsl(215, 30%, 94%) 55%, #ffffff) !important;
}

html[data-theme="light"] .metric-grid-host .e-grid .e-emptyrow,
html[data-theme="light"] .metric-grid-host .e-grid .e-emptyrow td,
.page[data-theme="light"] .metric-grid-host .e-grid .e-emptyrow,
.page[data-theme="light"] .metric-grid-host .e-grid .e-emptyrow td {
  background-color: #ffffff !important;
  background-image: none !important;
  color: hsl(215, 16%, 45%) !important;
}

/* -------------------------------------------------------------------------- */
/* Grid — light: Admin SfGrid (Users, People, Email history). */
/* -------------------------------------------------------------------------- */
html[data-theme="light"] .admin-sf-grid-host .e-grid,
.page[data-theme="light"] .admin-sf-grid-host .e-grid {
  background-color: #ffffff !important;
  background-image: none !important;
  color: hsl(222, 47%, 11%) !important;
  border-color: hsl(215, 25%, 88%) !important;
}

html[data-theme="light"] .admin-sf-grid-host .e-grid .e-gridheader,
.page[data-theme="light"] .admin-sf-grid-host .e-grid .e-gridheader {
  background-color: hsl(215, 30%, 94%) !important;
  background-image: none !important;
}

html[data-theme="light"] .admin-sf-grid-host .e-grid .e-gridcontent,
html[data-theme="light"] .admin-sf-grid-host .e-grid .e-gridcontent .e-content,
html[data-theme="light"] .admin-sf-grid-host .e-grid .e-content,
.page[data-theme="light"] .admin-sf-grid-host .e-grid .e-gridcontent,
.page[data-theme="light"] .admin-sf-grid-host .e-grid .e-gridcontent .e-content,
.page[data-theme="light"] .admin-sf-grid-host .e-grid .e-content {
  background-color: #ffffff !important;
  background-image: none !important;
}

html[data-theme="light"] .admin-sf-grid-host .e-grid .e-headercell:not(.e-columnsheader),
.page[data-theme="light"] .admin-sf-grid-host .e-grid .e-headercell:not(.e-columnsheader) {
  background-color: hsl(215, 30%, 94%) !important;
  background-image: none !important;
  color: hsl(222, 47%, 11%) !important;
}

html[data-theme="light"] .admin-sf-grid-host .e-grid td.e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd),
.page[data-theme="light"] .admin-sf-grid-host .e-grid td.e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd) {
  background-color: #ffffff !important;
  color: hsl(222, 47%, 11%) !important;
}

html[data-theme="light"] .admin-sf-grid-host .e-grid tr.e-altrow td.e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd),
.page[data-theme="light"] .admin-sf-grid-host .e-grid tr.e-altrow td.e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd) {
  background-color: color-mix(in srgb, hsl(215, 30%, 94%) 55%, #ffffff) !important;
}

html[data-theme="light"] .admin-sf-grid-host .e-grid .e-emptyrow,
html[data-theme="light"] .admin-sf-grid-host .e-grid .e-emptyrow td,
.page[data-theme="light"] .admin-sf-grid-host .e-grid .e-emptyrow,
.page[data-theme="light"] .admin-sf-grid-host .e-grid .e-emptyrow td {
  background-color: #ffffff !important;
  background-image: none !important;
  color: hsl(215, 16%, 45%) !important;
}

/* Prevent Fluent row/cell text tokens from overriding studio buttons inside templates. */
html[data-theme="light"] .admin-sf-grid-host .e-grid .e-rowcell .btn-studio-danger,
.page[data-theme="light"] .admin-sf-grid-host .e-grid .e-rowcell .btn-studio-danger {
  color: var(--pill-danger-fg) !important;
  -webkit-text-fill-color: var(--pill-danger-fg) !important;
}

html[data-theme="light"] .admin-sf-grid-host .e-grid .e-rowcell .btn-studio-primary,
html[data-theme="light"] .admin-sf-grid-host .e-grid .e-rowcell .btn-studio-secondary,
.page[data-theme="light"] .admin-sf-grid-host .e-grid .e-rowcell .btn-studio-primary,
.page[data-theme="light"] .admin-sf-grid-host .e-grid .e-rowcell .btn-studio-secondary {
  -webkit-text-fill-color: unset;
}

/* Grid — row selection (admin + metrics SfGrid), all themes. */
.admin-sf-grid-host .e-grid tr.e-selectionbackground td.e-rowcell,
.admin-sf-grid-host .e-grid tr.e-active td.e-rowcell,
.admin-sf-grid-host td.e-rowcell.e-cellselectionbackground,
.admin-sf-grid-host td.e-rowcell.e-active,
.metric-grid-host .e-grid tr.e-selectionbackground td.e-rowcell,
.metric-grid-host .e-grid tr.e-active td.e-rowcell,
.metric-grid-host td.e-rowcell.e-cellselectionbackground,
.metric-grid-host td.e-rowcell.e-active {
  background-color: var(--gantt-selection-bg) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  border-color: var(--gantt-selection-bg) !important;
  /* No per-cell accent: an inset bar on every cell reads as vertical lines at each
     column boundary. The single left-edge accent lives on the first cell only (below). */
  box-shadow: none;
}

.admin-sf-grid-host .e-grid tr.e-selectionbackground td.e-rowcell:first-child,
.admin-sf-grid-host .e-grid tr.e-active td.e-rowcell:first-child,
.admin-sf-grid-host td.e-rowcell.e-cellselectionbackground:first-child,
.metric-grid-host .e-grid tr.e-selectionbackground td.e-rowcell:first-child,
.metric-grid-host .e-grid tr.e-active td.e-rowcell:first-child,
.metric-grid-host td.e-rowcell.e-cellselectionbackground:first-child {
  /* Single selection indicator on the row's left edge only. */
  box-shadow: inset 3px 0 0 var(--gantt-selection-accent);
}

/* -------------------------------------------------------------------------- */
/* SfTab — light: tab strip can inherit dark Fluent2 header fills.             */
/* -------------------------------------------------------------------------- */
html[data-theme="light"] .e-tab .e-tab-header:not(.e-vertical),
html[data-theme="light"] .e-tab .e-tab-header.e-vertical,
.page[data-theme="light"] .e-tab .e-tab-header:not(.e-vertical),
.page[data-theme="light"] .e-tab .e-tab-header.e-vertical {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap,
html[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item .e-tab-text,
.page[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap,
.page[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
  color: var(--text-secondary) !important;
}

html[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
html[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item.e-state-active .e-tab-wrap,
html[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
html[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item.e-state-active .e-tab-text,
.page[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.page[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item.e-state-active .e-tab-wrap,
.page[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.page[data-theme="light"] .e-tab .e-tab-header .e-toolbar-item.e-state-active .e-tab-text {
  color: var(--text-primary) !important;
}

html[data-theme="light"] .e-tab .e-content,
html[data-theme="light"] .e-tab .e-content .e-item,
.page[data-theme="light"] .e-tab .e-content,
.page[data-theme="light"] .e-tab .e-content .e-item {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text-primary) !important;
}

/* -------------------------------------------------------------------------- */
/* SfUploader — light: browse chrome and file list on white surfaces.         */
/* -------------------------------------------------------------------------- */
html[data-theme="light"] .e-upload,
html[data-theme="light"] .e-upload .e-upload-actions,
html[data-theme="light"] .e-upload .e-file-select-wrap,
html[data-theme="light"] .e-upload .e-file-drop,
.page[data-theme="light"] .e-upload,
.page[data-theme="light"] .e-upload .e-upload-actions,
.page[data-theme="light"] .e-upload .e-file-select-wrap,
.page[data-theme="light"] .e-upload .e-file-drop {
  background-color: var(--bg-light) !important;
  background-image: none !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="light"] .e-upload .e-file-select-wrap .e-btn,
html[data-theme="light"] .e-upload .e-file-select-wrap button,
.page[data-theme="light"] .e-upload .e-file-select-wrap .e-btn,
.page[data-theme="light"] .e-upload .e-file-select-wrap button {
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

html[data-theme="light"] .e-upload .e-upload-file-list,
html[data-theme="light"] .e-upload .e-upload-file-list .e-upload-file-list-item,
.page[data-theme="light"] .e-upload .e-upload-file-list,
.page[data-theme="light"] .e-upload .e-upload-file-list .e-upload-file-list-item {
  background-color: var(--bg-light) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* -------------------------------------------------------------------------- */
/* Portaled Syncfusion shells — light: generic SfDialog + closed field chrome.  */
/* (Task dialog has dedicated rules above; these cover file viewer, etc.)     */
/* -------------------------------------------------------------------------- */
html[data-theme="light"] .e-dialog:not(:has(.task-dialog-content)):not(:has([data-testid="polaris-task-dialog-header"])),
body[data-theme="light"] .e-dialog:not(:has(.task-dialog-content)):not(:has([data-testid="polaris-task-dialog-header"])) {
  background-color: #ffffff !important;
  color: #10151c !important;
  border-color: #e7eaee !important;
}

html[data-theme="light"] .e-dialog:not(:has(.task-dialog-content)):not(:has([data-testid="polaris-task-dialog-header"])) .e-dlg-header-content,
html[data-theme="light"] .e-dialog:not(:has(.task-dialog-content)):not(:has([data-testid="polaris-task-dialog-header"])) .e-dlg-content,
html[data-theme="light"] .e-dialog:not(:has(.task-dialog-content)):not(:has([data-testid="polaris-task-dialog-header"])) .e-footer-content,
body[data-theme="light"] .e-dialog:not(:has(.task-dialog-content)):not(:has([data-testid="polaris-task-dialog-header"])) .e-dlg-header-content,
body[data-theme="light"] .e-dialog:not(:has(.task-dialog-content)):not(:has([data-testid="polaris-task-dialog-header"])) .e-dlg-content,
body[data-theme="light"] .e-dialog:not(:has(.task-dialog-content)):not(:has([data-testid="polaris-task-dialog-header"])) .e-footer-content {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #10151c !important;
}

html[data-theme="light"] .e-dialog:not(:has(.task-dialog-content)):not(:has([data-testid="polaris-task-dialog-header"])) .e-dlg-closeicon-btn,
body[data-theme="light"] .e-dialog:not(:has(.task-dialog-content)):not(:has([data-testid="polaris-task-dialog-header"])) .e-dlg-closeicon-btn {
  color: #6b7785 !important;
}

html[data-theme="light"] .e-dialog:not(:has(.task-dialog-content)):not(:has([data-testid="polaris-task-dialog-header"])) .e-dlg-closeicon-btn:hover,
body[data-theme="light"] .e-dialog:not(:has(.task-dialog-content)):not(:has([data-testid="polaris-task-dialog-header"])) .e-dlg-closeicon-btn:hover {
  color: #10151c !important;
}

html[data-theme="light"] .e-input-group.e-control-wrapper:not(.e-disabled),
html[data-theme="light"] .e-ddl.e-input-group:not(.e-disabled),
html[data-theme="light"] .e-multiselect.e-input-group:not(.e-disabled),
html[data-theme="light"] .e-datepicker.e-input-group:not(.e-disabled),
body[data-theme="light"] .e-input-group.e-control-wrapper:not(.e-disabled),
body[data-theme="light"] .e-ddl.e-input-group:not(.e-disabled),
body[data-theme="light"] .e-multiselect.e-input-group:not(.e-disabled),
body[data-theme="light"] .e-datepicker.e-input-group:not(.e-disabled) {
  background-color: #ffffff !important;
  background-image: none !important;
  border-color: #e7eaee !important;
  color: #10151c !important;
}

html[data-theme="light"] .e-input-group:not(.e-disabled) input.e-input,
html[data-theme="light"] .e-input-group:not(.e-disabled) textarea.e-input,
html[data-theme="light"] .e-ddl:not(.e-disabled) .e-input-value,
html[data-theme="light"] .e-multiselect:not(.e-disabled) .e-delim-view,
body[data-theme="light"] .e-input-group:not(.e-disabled) input.e-input,
body[data-theme="light"] .e-input-group:not(.e-disabled) textarea.e-input,
body[data-theme="light"] .e-ddl:not(.e-disabled) .e-input-value,
body[data-theme="light"] .e-multiselect:not(.e-disabled) .e-delim-view {
  color: #10151c !important;
  -webkit-text-fill-color: #10151c !important;
  background-color: transparent !important;
}

html[data-theme="light"] .e-input-group-icon,
html[data-theme="light"] .e-ddl-icon,
body[data-theme="light"] .e-input-group-icon,
body[data-theme="light"] .e-ddl-icon {
  color: #687180 !important;
}

/* -------------------------------------------------------------------------- */
/* MultiSelect chips — SINGLE SOURCE OF TRUTH                                 */
/*                                                                            */
/* Syncfusion v32 (fluent2) MultiSelect chip DOM:                             */
/*   .e-multi-select-wrapper                                                  */
/*     > .e-chips-collection                                                  */
/*         > .e-chips.e-chip-selected   (the chip body)                       */
/*             > .e-chipcontent          (the label text)                     */
/*             > .e-chips-close.e-icon   (close button)                       */
/*                                                                            */
/* Note: there is NO `.e-chip` element under `.e-chips` for MultiSelect.      */
/* Selectors like `.e-chips .e-chip ...` apply only to SfChips / SfChipList   */
/* / DropDownTree, not here. Anything that wants to restyle MultiSelect chips */
/* must target `.e-multi-select-wrapper .e-chips` and the direct-child        */
/* `> .e-chipcontent`. Do NOT add scoped (.razor.css) chip rules in the page  */
/* layer — keep this rule global so theme contrast is consistent everywhere.  */
/* -------------------------------------------------------------------------- */
.e-multi-select-wrapper .e-chips,
.e-multi-select-wrapper .e-chips.e-chip-selected,
.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips,
.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips.e-chip-selected {
  background-color: var(--pill-info-bg) !important;
  border: 1px solid var(--pill-info-border) !important;
  border-radius: 999px !important;
  color: var(--text-primary) !important;
}

/* Hover: Fluent2 sets background-color: var(--color-sf-content-bg-color-alt4)
   (`.e-multi-select-wrapper .e-chips:hover`) which clashes with the pill tint. */
.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips:hover,
.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips.e-chip-selected:hover {
  background-color: color-mix(in srgb, var(--pill-info-bg) 80%, var(--text-primary)) !important;
  color: var(--text-primary) !important;
}

/* Label text — Fluent2 sets `.e-chips.e-chip-selected > .e-chipcontent` color
   to var(--color-sf-content-text-color); we force --text-primary regardless of
   selected state so contrast is identical in light + dark themes. */
.e-multi-select-wrapper .e-chips > .e-chipcontent,
.e-multi-select-wrapper .e-chips.e-chip-selected > .e-chipcontent,
.e-multi-select-wrapper .e-chips > .e-chipcontent:hover,
.e-multi-select-wrapper .e-chips.e-chip-selected > .e-chipcontent:hover {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  opacity: 1 !important;
}

/* Close glyph — readable on the pale pill in both themes. */
.e-multi-select-wrapper .e-chips .e-chips-close::before,
.e-multi-select-wrapper .e-chips.e-chip-selected .e-chips-close::before {
  color: var(--text-secondary) !important;
  -webkit-text-fill-color: var(--text-secondary) !important;
}

.e-multi-select-wrapper .e-chips .e-chips-close:hover::before {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

/* -------------------------------------------------------------------------- */
/* MultiSelect "filter" style — UxSyncfusionMultiSelect FilterStyle="true"     */
/*                                                                            */
/* Read-only pick-list filter: the user only ticks checkboxes in the popup,   */
/* never types in the box. Suppress the typing affordances Syncfusion renders  */
/* — the blinking text caret, the phantom search-input box that sits beside    */
/* the delimiter text, and the focus underline pseudo-elements. Fluent2 styles */
/* the input with !important, so these must too. Width/height are layout and   */
/* stay in the caller's scoped .razor.css (see ui-layout-and-forms rule).      */
/* -------------------------------------------------------------------------- */
.e-multiselect.ux-multiselect-filter .e-multi-select-wrapper input {
  caret-color: transparent !important;
  color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.e-multiselect.ux-multiselect-filter .e-multi-select-wrapper::before,
.e-multiselect.ux-multiselect-filter .e-multi-select-wrapper::after {
  display: none !important;
}