:root{
  --my-bg:#0a0a0f;
  --my-foreground:#e6eef8;
  --my-surface:#12121F;
  --my-toolbar:#13131b;
  --my-accent:#7c3aed;
  --my-border:#1f2937;
  --my-selection:#22304a;
}

/* Map common Theia/VSC variables to our theme so components using variables pick them up */
:root{
  --theia-background: var(--my-bg);
  --theia-foreground: var(--my-foreground);
  --theia-editor-background: var(--my-bg);
  --theia-sideBar-background: var(--my-surface);
  --theia-quickInput-background: var(--my-surface);
  --theia-widget-background: var(--my-surface);
  --theia-editorWidget-background: var(--my-surface);
  --theia-editorWidget-foreground: var(--my-foreground);
  --theia-widget-shadow: rgba(0,0,0,0.6);
  --theia-list-hoverBackground: var(--my-selection);
  --theia-list-hoverForeground: var(--my-foreground);
  --theia-contrastBorder: var(--my-border);
  --theia-selectionBackground: var(--my-selection);
  --theia-activityBar-activeBorder: var(--my-accent);
  --theia-activityBar-activeBackground: var(--my-toolbar);
  --theia-list-inactiveSelectionBackground: var(--my-selection);
  --theia-list-inactiveSelectionForeground: var(--my-foreground);
  /* Activity bar icon colors */
  --theia-activityBar-foreground: var(--my-accent);
  --theia-activityBar-inactiveForeground: #9aa0a6;
}

/* Broad UI areas */
html, body, #theia-app, .theia-app, .theia-workbench, .theia-shell, .theia-main-panel,
.p-Widget, .p-SplitPanel, .p-TabPanel, .p-Panel, .p-Widget .p-Panel,
.monaco-workbench, .theia-editor, .theia-editor-container, .theia-content,
.theia-views-container, .theia-view, .theia-viewlet {
  background: var(--my-bg) !important;
  color: var(--my-foreground) !important;
}

/* Sidebar / explorer / activity */
.theia-side-bar, .theia-sideBar, .theia-side-panel, .p-SideBar, .theia-explorer, .theia-explorer-view, .theia-views {
  background: var(--my-surface) !important;
  color: var(--my-foreground) !important;
  border-color: var(--my-border) !important;
}

/* Activity bar / badges */
.theia-activity-bar, .theia-activity-bar .theia-activity-bar-item, .p-TabBar {
  background: #0f0f18 !important;
  color: var(--my-foreground) !important;
}
.theia-activity-bar .theia-activity-badge, .p-TabBar .p-TabBar-tab .p-Count {
  background: var(--my-accent) !important;
  color: #fff !important;
}

/* Sidebar tab icon inactive and active/hover states */
.lm-TabBar.theia-app-sides {
  color: var(--theia-activityBar-inactiveForeground) !important;
}
.lm-TabBar.theia-app-sides .lm-TabBar-tabIcon,
.lm-TabBar.theia-app-sides .lm-TabBar-tabIcon svg,
.lm-TabBar.theia-app-sides .lm-TabBar-tabIcon .codicon {
  color: var(--theia-activityBar-inactiveForeground) !important;
  fill: currentColor !important;
}
.lm-TabBar.theia-app-sides .lm-TabBar-tabIcon:hover,
.lm-TabBar.theia-app-sides .lm-mod-current .lm-TabBar-tabIcon,
.lm-TabBar.theia-app-sides .lm-mod-current .lm-TabBar-tabIcon svg,
.lm-TabBar.theia-app-sides .lm-mod-current .lm-TabBar-tabIcon .codicon {
  color: var(--theia-activityBar-foreground) !important;
  fill: currentColor !important;
}

/* Header / toolbar / titlebar */
.theia-top-panel, .theia-top-panel .p-Toolbar, .theia-toolbar, .p-Toolbar {
  background: var(--my-bg) !important;
  color: var(--my-foreground) !important;
}

/* toolbar wrapper: um tom um pouco mais claro para diferenciar */
.theia-toolbar-wrapper, .toolbar-wrapper, .p-Toolbar-wrapper, .theia-menubar {
  background: var(--my-toolbar) !important;
  color: var(--my-foreground) !important;
  border-bottom: 1px solid var(--my-border) !important;
}

/* Welcome / start view */
.theia-welcome, .theia-welcomePage, .theia-welcomeView, .welcome, .welcome-page, .welcome-content {
  background: var(--my-bg) !important;
  color: var(--my-foreground) !important;
}

/* Panels, terminal, widgets */
.theia-bottom-panel, .theia-panel, .theia-panel .p-Widget, .theia-terminal, .theia-widget, .p-Widget {
  background: var(--my-bg) !important;
  color: var(--my-foreground) !important;
}

/* Widget containers (dropdown panels, settings gear popup, etc.) */
.p-Widget, .p-Widget .p-Panel, .theia-widget, .theia-widget .p-Widget, .theia-popover, .theia-popup,
.p-Menu, .p-MenuBar, .p-MenuItem, .theia-context-menu, .theia-menu, .p-ContextMenu {
  /* allow components using background-color: var(--theia-...) to inherit */
  background: var(--my-surface) !important;
  color: var(--my-foreground) !important;
  border-color: var(--my-border) !important;
}

/* Menu item hover / selection */
.p-MenuItem:hover, .p-MenuItem:active, .p-MenuItem.p-mod-selected, .p-MenuItem.p-mod-active,
.theia-menu .menu-item:hover, .theia-menu .menu-item:active {
  background: var(--my-selection) !important;
  color: var(--my-foreground) !important;
}

/* Tooltips / editor hover */
.monaco-editor .monaco-hover, .monaco-editor-hover, .monaco-hover .monaco-editor-hover-content,
.monaco-editor .monaco-tooltip, .monaco-editor .monaco-editor-hover, .theia-tooltip {
  background: #10121A !important;
  color: var(--my-foreground) !important;
  border: 1px solid var(--my-border) !important;
}

/* Ensure quick input / quick open use background-color specifically */
.quick-input-widget, .quick-open-widget, .monaco-quick-open-widget, .monaco-quick-open, .quick-open, .theia-quick-open {
  background-color: var(--theia-quickInput-background, var(--my-surface)) !important;
  color: var(--theia-foreground, var(--my-foreground)) !important;
}

/* Tree node hover (file explorer rows) */
.theia-TreeNode:hover, .theia-TreeNode.is-over, .monaco-list .monaco-list-row:hover, .monaco-list .monaco-list-row.focused, .monaco-list .monaco-list-row.selected {
  background-color: var(--theia-list-hoverBackground, var(--my-selection)) !important;
  color: var(--theia-list-hoverForeground, var(--my-foreground)) !important;
  cursor: pointer !important;
}

/* Quick input input backgrounds */
.theia-quick-open .input, .quick-input-widget .input, .monaco-quick-open input[type=text], .monaco-quick-open .monaco-input {
  background-color: var(--theia-quickInput-background, var(--my-surface)) !important;
  color: var(--theia-foreground, var(--my-foreground)) !important;
}

/* Quick input / quick open explicit rules using background-color and variables Theia uses */
.quick-input-widget, .quick-open-widget, .monaco-quick-open-widget, .monaco-quick-open, .quick-open, .theia-quick-open {
  background-color: var(--theia-quickInput-background) !important;
  color: var(--theia-foreground) !important;
  border-color: var(--theia-contrastBorder) !important;
}

/* Tree hover (e.g. explorer rows) */
.theia-TreeNode:hover, .p-Tree .p-TreeNode:hover, .theia-tree .theia-TreeNode:hover {
  background-color: var(--theia-list-hoverBackground) !important;
  color: var(--theia-list-hoverForeground) !important;
  cursor: pointer;
}

/* Quick input list rows (monaco lists) */
.monaco-list .monaco-list-row, .quick-open-widget .monaco-list .monaco-list-row {
  background-color: transparent !important;
  color: var(--theia-foreground) !important;
}
.monaco-list .monaco-list-row:hover, .monaco-list .monaco-list-row.focused, .monaco-list .monaco-list-row.selected {
  background-color: var(--theia-list-hoverBackground) !important;
  color: var(--theia-list-hoverForeground) !important;
}

/* Quick input / Command Palette / Quick Open (Command Palette uses quick-input-widget) */
.quick-input-widget, .quick-open-widget, .monaco-quick-open-widget, .monaco-quick-open, .theia-quick-open,
.quick-open, .p-QuickOpen, .theia-command-palette, .monaco-quick-open .monaco-list, .quick-input-widget .monaco-list {
  background: var(--my-surface) !important;
  color: var(--my-foreground) !important;
  border: 1px solid var(--my-border) !important;
}

/* Quick input rows and selection (ensure focused/selected rows match theme) */
.monaco-list .monaco-list-row, .quick-input-widget .monaco-list .monaco-list-row,
.monaco-quick-open .monaco-list .monaco-list-row {
  background: transparent !important;
  color: var(--my-foreground) !important;
}
.monaco-list .monaco-list-row:hover, .monaco-list .monaco-list-row.focused, .monaco-list .monaco-list-row.selected,
.quick-input-widget .monaco-list .monaco-list-row:hover, .quick-input-widget .monaco-list .monaco-list-row.focused {
  background: var(--my-selection) !important;
  color: var(--my-foreground) !important;
}

/* Selected but unfocused (inactive selection) */
.monaco-list .monaco-list-row.selected:not(.focused),
.theia-TreeNode.selected:not(.focused),
.theia-TreeNode.is-selected:not(.is-focused),
.p-Tree .p-TreeNode.p-mod-selected:not(.p-mod-focused) {
  background-color: var(--theia-list-inactiveSelectionBackground, var(--my-selection)) !important;
  color: var(--theia-list-inactiveSelectionForeground, var(--my-foreground)) !important;
}

/* Menubar and context menus (File/Edit/... and right-click menus) */
.menubar-menu, .menubar-menu .menu, .menubar-menu .menu-item, .theia-menubar .menu, .theia-menubar .menu-item,
.monaco-menu, .monaco-menu .monaco-list, .context-view, .context-view .monaco-menu-container, .theia-context-menu {
  background: var(--my-surface) !important;
  color: var(--my-foreground) !important;
  border-color: var(--my-border) !important;
}

.monaco-list .monaco-list-row:hover, .monaco-list .monaco-list-row:active, .monaco-menu .monaco-list .monaco-list-row:hover {
  background: var(--my-selection) !important;
  color: var(--my-foreground) !important;
}

/* Ensure input inside quick open uses theme */
.quick-input-widget input, .monaco-quick-open-widget input, .theia-quick-open input {
  background: var(--my-surface) !important;
  color: var(--my-foreground) !important;
  border-color: var(--my-border) !important;
}

/* Editor / tabs / group headers */
.monaco-editor, .monaco-editor .margin, .monaco-workbench .part.editor, .editor-instance, .p-TabBar .p-TabBar-tab[aria-selected="true"] {
  background: var(--my-bg) !important;
  color: var(--my-foreground) !important;
}

/* Buttons and inputs */
.p-Button, .theia-button, button {
  background: var(--my-accent) !important;
  color: #fff !important;
  border-color: var(--my-border) !important;
}
input[type="text"], textarea, .theia-input, .p-Input {
  background: var(--my-surface) !important;
  color: var(--my-foreground) !important;
  border-color: var(--my-border) !important;
}

/* Selection, scrollbar, minimap, numbers */
::selection, .theia-editor ::selection, .p-Widget ::selection { background: var(--my-selection) !important; }
.p-Scrollbar, .p-Scrollbar .p-Scrollbar-handle { background: #1b2333 !important; }
.monaco-editor .line-numbers, .theia-side-bar .line-numbers { color: #6b7280 !important; }
.monaco-editor .bracket-match { background: #1b2a44 !important; }

/* Force borders */
* { border-color: var(--my-border) !important; }

/* Ensure tabs (selected and inactive) use the theme colors */
.p-TabBar .p-TabBar-tab, .p-TabBar .p-TabBar-tab[aria-selected="true"], .tab {
  background: var(--my-bg) !important;
  color: var(--my-foreground) !important;
  border-color: var(--my-border) !important;
}

/* Force group headers and title bars */
.theia-editor .theia-editor-title, .theia-editor .theia-editor-titlebar, .theia-menubar, .theia-titlebar {
  background: var(--my-bg) !important;
  color: var(--my-foreground) !important;
}

/* Optional: add the class 'myclient-rainbow' to enable animated border */
.myclient-rainbow, .myclient-rainbow * { position: relative; }
.myclient-rainbow::before {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: -1;
  background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet, red);
  background-size: 400% 400%;
  filter: blur(6px);
  opacity: 0.9;
  pointer-events: none;
  animation: myclient-rainbow 6s linear infinite;
}
@keyframes myclient-rainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Sidebar / tab icons: default inactive color and hover/active rules */
.lm-TabBar.theia-app-sides .lm-TabBar-tabIcon,
.lm-TabBar.theia-app-sides .lm-TabBar-tabLabel .codicon {
  color: #9aa0a6 !important; /* inactive soft gray */
}
.lm-TabBar.theia-app-sides .lm-TabBar-tab:hover .lm-TabBar-tabIcon,
.lm-TabBar.theia-app-sides .lm-TabBar-tab:hover .lm-TabBar-tabLabel .codicon,
.lm-TabBar.theia-app-sides .lm-TabBar-tab:hover svg {
  color: var(--my-accent) !important;
  fill: var(--my-accent) !important;
}
.lm-TabBar.theia-app-sides .lm-mod-current .lm-TabBar-tabIcon,
.lm-TabBar.theia-app-sides .lm-mod-current .lm-TabBar-tabLabel .codicon,
.lm-TabBar.theia-app-sides .p-mod-current .lm-TabBar-tabIcon {
  color: var(--my-accent) !important;
  fill: var(--my-accent) !important;
}

/* Force sidebar tab indicator color to theme accent (overrides default white) */
.lm-TabBar.theia-app-left .lm-TabBar-tab.lm-mod-current {
  box-shadow: 2px 0 0 var(--theia-activityBar-activeBorder, var(--my-accent)) inset !important;
}
.lm-TabBar.theia-app-right .lm-TabBar-tab.lm-mod-current {
  box-shadow: -2px 0 0 var(--theia-activityBar-activeBorder, var(--my-accent)) inset !important;
}

/* Icons: make activity/sidebar/tab icons purple when active and on hover */
.theia-activity-bar .theia-activity-bar-item .theia-activity-icon,
.lm-TabBar .lm-TabBar-tab .lm-TabBar-tabIcon,
.p-TabBar .p-TabBar-tab .p-TabBar-tabIcon,
.theia-side-bar .theia-activity-bar-item .theia-activity-icon {
  color: var(--my-foreground) !important;
  /* ensure SVG icons pick up color */
  fill: currentColor !important;
}
.theia-activity-bar .theia-activity-bar-item.p-mod-active .theia-activity-icon,
.theia-activity-bar .theia-activity-bar-item.p-mod-selected .theia-activity-icon,
.lm-TabBar .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabIcon,
.p-TabBar .p-TabBar-tab[aria-selected="true"] .p-TabBar-tabIcon {
  color: var(--my-accent) !important;
  fill: var(--my-accent) !important;
}
.theia-activity-bar .theia-activity-bar-item:hover .theia-activity-icon,
.lm-TabBar .lm-TabBar-tab:hover .lm-TabBar-tabIcon,
.p-TabBar .p-TabBar-tab:hover .p-TabBar-tabIcon {
  color: var(--my-accent) !important;
  fill: var(--my-accent) !important;
}