/**
 * 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: rgba(36, 202, 222, 0.14);
  --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: rgba(36, 202, 222, 0.12);

  /* 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 — Polaris cyan #24cade (all tokens reference --primary-* from input.css) */
  --color-sf-primary: var(--primary-color);
  --color-sf-primary-text-color: var(--primary-text);
  --color-sf-primary-light: rgba(36, 202, 222, 0.2);
  --color-sf-primary-lighter: rgba(36, 202, 222, 0.12);
  --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: rgba(36, 202, 222, 0.22);

  --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: #0a2e2c;
  --color-sf-info-dark: #99f6e4;
  --color-sf-info-light-alt: #052524;
  --color-sf-border-info: var(--primary-color);

  --color-sf-success: #22c55e;
  --color-sf-success-light: #14532d;
  --color-sf-success-dark: #bbf7d0;
  --color-sf-success-light-alt: #052e16;

  --color-sf-warning: #f59e0b;
  --color-sf-warning-light: #422006;
  --color-sf-warning-dark: #fde68a;
  --color-sf-warning-light-alt: #422006;

  --color-sf-danger: #f87171;
  --color-sf-danger-light: #450a0a;
  --color-sf-danger-dark: #fecaca;
  --color-sf-danger-light-alt: #3b0509;

  --color-sf-badge-warning: #fbbf24;
  --color-sf-badge-warning-text: #fbbf24;
}

/**
 * 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: rgba(36, 202, 222, 0.12) !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: rgba(36, 202, 222, 0.12) !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;
}