:root {
  --ff-orange: #f28c00;
  --ff-dark: #3f3a36;
  --ff-light: #ffffff;

  /* MudBlazor theme overrides */
  --mud-palette-primary: var(--ff-orange);
  --mud-palette-primary-text: var(--ff-light);
  --mud-palette-primary-lighten: #f7a21a;
  --mud-palette-primary-darken: #d67900;
  --mud-palette-secondary: var(--ff-dark);
  --mud-palette-secondary-text: var(--ff-light);
  --mud-palette-info: var(--ff-orange);
  --mud-palette-info-text: var(--ff-light);
  --mud-palette-info-lighten: #f7a21a;
  --mud-palette-info-darken: #d67900;
}

/* MudBlazor dark theme overrides (apply to body/html too) */
body.mud-theme-dark,
html.mud-theme-dark,
.mud-theme-dark,
.mud-layout.mud-theme-dark {
  --mud-palette-primary: var(--ff-orange);
  --mud-palette-primary-text: var(--ff-light);
  --mud-palette-primary-lighten: #f7a21a;
  --mud-palette-primary-darken: #d67900;
  --mud-palette-secondary: var(--ff-dark);
  --mud-palette-secondary-text: var(--ff-light);
  --mud-palette-info: var(--ff-orange);
  --mud-palette-info-text: var(--ff-light);
  --mud-palette-info-lighten: #f7a21a;
  --mud-palette-info-darken: #d67900;
  --mud-palette-background: #1b1714;
  --mud-palette-surface: #241f1b;
  --mud-palette-drawer-background: #1b1714;
  --mud-palette-appbar-background: var(--ff-dark);
  --mud-palette-text-primary: #0000;
  --mud-palette-text-secondary: #313131;
}

/* Top app bar */
.mud-toolbar.mud-toolbar-appbar {
  background-color: var(--ff-orange) !important;
  color: var(--ff-light) !important;
}

.mud-toolbar.mud-toolbar-appbar .mud-icon-button,
.mud-toolbar.mud-toolbar-appbar .mud-button-root {
  color: var(--ff-light) !important;
}

.mud-toolbar.mud-toolbar-appbar .mud-icon-root {
  fill: currentColor !important;
}

/* Hide Elsa branding in drawer header */
.mud-drawer-header {
  display: none !important;
}

/* Hide Documentation + Source code links */
.mud-toolbar.mud-toolbar-appbar a[title="Documentation"],
.mud-toolbar.mud-toolbar-appbar a[title="Source code"] {
  display: none !important;
}

/* Hide Info/About icon button (if present) */
.mud-toolbar.mud-toolbar-appbar button[title="Info"],
.mud-toolbar.mud-toolbar-appbar button[aria-label="Info"],
.mud-toolbar.mud-toolbar-appbar button[title="About"],
.mud-toolbar.mud-toolbar-appbar button[aria-label="About"] {
  display: none !important;
}

/* Hide info icon button (no title/aria-label) */
.mud-toolbar.mud-toolbar-appbar button.mud-icon-button:has(svg path[d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"]) {
  display: none !important;
}

/* Tabs: override active tab blue (#0EA5E9) */
.mud-tab.mud-tab-active,
.mud-tab.mud-tab-active .mud-tab-label {
  color: var(--ff-orange) !important;
}

.mud-tabs-active-indicator {
  background: var(--ff-orange) !important;
}

.mud-tabs-toolbar .mud-ripple::after {
  background: var(--ff-orange) !important;
}

.mud-tab-slider {
  background: var(--ff-orange) !important;
}

.mud-tab-slider-horizontal {
  background: var(--ff-orange) !important;
}

/* Switch track color */
.mud-switch-track.mud-primary {
  background: var(--ff-dark) !important;
}

.mud-switch-thumb {
  background-color: var(--ff-light) !important;
}

/* Hide docs alert on dashboard */
.mud-alert:has(a[href*="v3.elsaworkflows.io"]) {
  display: none !important;
}

/* Force any info/primary text to use orange instead of blue */
.text-info,
.mud-info-text,
.mud-primary-text,
.mud-link,
a.mud-link {
  color: var(--ff-orange) !important;
}

/* Dark theme: keep activity labels readable (force black text) */
body.mud-theme-dark .activity-label,
html.mud-theme-dark .activity-label,
.mud-theme-dark .activity-label,
body.mud-theme-dark .mud-typography-subtitle1.activity-label,
html.mud-theme-dark .mud-typography-subtitle1.activity-label,
.mud-theme-dark .mud-typography-subtitle1.activity-label {
  color: #000000 !important;
}

/* Dark theme surfaces */
body.mud-theme-dark .mud-drawer-content,
html.mud-theme-dark .mud-drawer-content,
.mud-theme-dark .mud-drawer-content,
body.mud-theme-dark .mud-drawer,
html.mud-theme-dark .mud-drawer,
.mud-theme-dark .mud-drawer,
body.mud-theme-dark .mud-navmenu,
html.mud-theme-dark .mud-navmenu,
.mud-theme-dark .mud-navmenu {
  background-color: var(--mud-palette-drawer-background) !important;
}

body.mud-theme-dark .mud-nav-link,
body.mud-theme-dark .mud-nav-link-text,
html.mud-theme-dark .mud-nav-link,
html.mud-theme-dark .mud-nav-link-text,
.mud-theme-dark .mud-nav-link,
.mud-theme-dark .mud-nav-link-text {
  color: var(--mud-palette-text-primary) !important;
}

/* Ensure primary borders and text use orange */
.mud-border-primary {
  border-color: var(--ff-orange) !important;
}

.mud-primary-text {
  color: var(--ff-orange) !important;
}

/* Dark theme: keep activity labels readable (force black text) */
body.mud-theme-dark .elsa-activity .activity-label,
html.mud-theme-dark .elsa-activity .activity-label,
.mud-theme-dark .elsa-activity .activity-label,
body.mud-theme-dark .elsa-activity .activity-type,
html.mud-theme-dark .elsa-activity .activity-type,
.mud-theme-dark .elsa-activity .activity-type {
  color: #000000 !important;
}