/* Canvas API specific theme overrides */
[data-system="canvas"] {
  /* Override all teal colors with #e70022 (red) */
  --canvas-primary: #e70022;
  --canvas-primary-light: #ff1a3d;
  --canvas-primary-dark: #cc001f;
  --canvas-button-text: #f3f4f6; /* light gray for button text */
}

/* Override teal colors in Canvas API system */
[data-system="canvas"] .p-button {
  background-color: var(--canvas-primary) !important;
  border-color: var(--canvas-primary) !important;
  color: var(--canvas-button-text) !important;
}

[data-system="canvas"] .p-button:hover {
  background-color: var(--canvas-primary-dark) !important;
  border-color: var(--canvas-primary-dark) !important;
  color: var(--canvas-button-text) !important;
}

[data-system="canvas"] .p-button:hover:not(.p-disabled) {
  background-color: var(--canvas-primary-dark) !important;
  border-color: var(--canvas-primary-dark) !important;
}

[data-system="canvas"] .p-button.p-button-outlined {
  color: var(--canvas-primary) !important;
  border-color: var(--canvas-primary) !important;
  background: transparent !important;
}

[data-system="canvas"] .p-button.p-button-outlined:hover {
  background-color: var(--canvas-primary) !important;
  color: var(--canvas-button-text) !important;
}

/* Override teal in tabview */
[data-system="canvas"] .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
  color: var(--canvas-primary) !important;
  border-color: var(--canvas-primary) !important;
}

[data-system="canvas"] .p-tabview .p-tabview-nav li .p-tabview-nav-link:hover {
  color: var(--canvas-primary) !important;
}

/* Override teal in dropdowns */
[data-system="canvas"] .p-dropdown:not(.p-disabled).p-focus {
  border-color: var(--canvas-primary) !important;
  box-shadow: 0 0 0 1px var(--canvas-primary) !important;
}

[data-system="canvas"] .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
  background-color: var(--canvas-primary) !important;
}

/* Override teal in checkboxes */
[data-system="canvas"] .p-checkbox .p-checkbox-box.p-highlight {
  background-color: var(--canvas-primary) !important;
  border-color: var(--canvas-primary) !important;
}

/* Override teal in links */
[data-system="canvas"] .link-style {
  color: var(--canvas-primary) !important;
}

[data-system="canvas"] .link-style:hover {
  color: var(--canvas-primary-dark) !important;
}

/* Override teal in borders */
[data-system="canvas"] .border-teal-500 {
  border-color: var(--canvas-primary) !important;
}

/* Override teal in text */
[data-system="canvas"] .text-teal-500,
[data-system="canvas"] .text-teal-600,
[data-system="canvas"] .text-teal-700 {
  color: var(--canvas-primary) !important;
}

/* Override teal in backgrounds */
[data-system="canvas"] .bg-teal-500,
[data-system="canvas"] .bg-teal-600,
[data-system="canvas"] .bg-teal-700 {
  background-color: var(--canvas-primary) !important;
}

/* Override teal in focus states */
[data-system="canvas"] .focus\:border-teal-500:focus {
  border-color: var(--canvas-primary) !important;
}

[data-system="canvas"] .focus\:ring-teal-500:focus {
  --tw-ring-color: var(--canvas-primary) !important;
} 