/**
 * Chakra UI theme compatibility fixes
 * 
 * This file addresses the :host selector issues by using the proper selector structure
 * compatible with Shadow DOM and Light DOM environments.
 */

/* Light theme fixes */
html[data-theme="light"],
.chakra-ui-light {
  --chakra-colors-chakra-body-bg: #f7fafc;
  --chakra-colors-chakra-body-text: #1a202c;
}

/* Dark theme fixes */
html[data-theme="dark"],
.chakra-ui-dark {
  --chakra-colors-chakra-body-bg: #1a202c;
  --chakra-colors-chakra-body-text: #f7fafc;
}

/* Component-specific theme overrides */
[data-theme="light"] .chakra-component,
.chakra-ui-light .chakra-component {
  color: var(--chakra-colors-chakra-body-text);
  background-color: var(--chakra-colors-chakra-body-bg);
}

[data-theme="dark"] .chakra-component,
.chakra-ui-dark .chakra-component {
  color: var(--chakra-colors-chakra-body-text);
  background-color: var(--chakra-colors-chakra-body-bg);
}

/* Fix form controls for light theme */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
.chakra-ui-light input,
.chakra-ui-light select,
.chakra-ui-light textarea {
  background-color: white;
  border-color: #e2e8f0;
}

/* Fix form controls for dark theme */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
.chakra-ui-dark input,
.chakra-ui-dark select,
.chakra-ui-dark textarea {
  background-color: #2d3748;
  border-color: #4a5568;
}