/* Theme-aware secondary surfaces; no layout or event-handler changes. */
:root {
  --xl-control-soft: color-mix(in srgb, var(--xl-ref-primary) 7%, var(--xl-color-surface, #fff));
  --xl-control-hover: color-mix(in srgb, var(--xl-ref-primary) 13%, var(--xl-color-surface, #fff));
  --xl-control-border: color-mix(in srgb, var(--xl-ref-primary) 19%, var(--xl-color-surface, #fff));
}
html body[data-xl-ui] #app .app-shell .workspace > .topbar.topbar .global-context {
  background: var(--xl-control-soft) !important;
  border-color: var(--xl-control-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
html body[data-xl-ui] #app .app-shell .workspace > .topbar.topbar .global-context label,
html body[data-xl-ui] #app .app-shell .workspace > .topbar.topbar .global-context select {
  background-color: transparent !important;
  color: var(--xl-ref-text) !important;
  border-color: var(--xl-control-border) !important;
}
html body[data-xl-ui] #app .app-shell .workspace > .topbar.topbar .global-context label:hover,
html body[data-xl-ui] #app .app-shell .workspace > .topbar.topbar .global-context label:focus-within {
  background: var(--xl-control-hover) !important;
}
html body[data-xl-ui] #app .app-shell .workspace > .topbar.topbar .profile > button,
html body[data-xl-ui] #app .app-shell .workspace > .topbar.topbar .xl-appearance-trigger {
  background: var(--xl-control-soft) !important;
  border: 1px solid var(--xl-control-border) !important;
  border-radius: 8px !important;
  color: var(--xl-ref-text) !important;
}
html body[data-xl-ui] #app .app-shell .workspace > .topbar.topbar .profile > button:hover,
html body[data-xl-ui] #app .app-shell .workspace > .topbar.topbar .xl-appearance-trigger:hover {
  background: var(--xl-control-hover) !important;
}
html body #app .app-shell .workspace > .topbar.topbar .profile .avatar {
  background: var(--xl-ref-primary) !important;
  color: #fff !important;
}
html body[data-xl-ui] #app .app-shell .workspace .cross-page .budget-open.budget-open,
html body[data-xl-ui] #app .app-shell .workspace .cross-page .history-button.history-button {
  background: var(--xl-control-soft) !important;
  border: 1px solid var(--xl-control-border) !important;
  border-radius: 6px !important;
  color: var(--xl-ref-primary) !important;
  box-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
html body[data-xl-ui] #app .app-shell .workspace .cross-page .budget-open.budget-open:hover,
html body[data-xl-ui] #app .app-shell .workspace .cross-page .history-button.history-button:hover {
  background: var(--xl-control-hover) !important;
  border-color: var(--xl-ref-primary) !important;
}
/* Keep compact data chips clickable, with visible keyboard focus. */
html body[data-xl-ui] #app .app-shell .workspace .cross-page .history-button.history-button {
  display: block !important;
  height: auto !important;
  min-height: 40px !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 116px !important;
  padding: 5px 7px !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  white-space: pre-line !important;
  text-align: left !important;
}
html body[data-xl-ui] #app .app-shell .workspace .cross-page .budget-open.budget-open:focus-visible,
html body[data-xl-ui] #app .app-shell .workspace .cross-page .history-button.history-button:focus-visible {
  outline: 2px solid var(--xl-ref-primary) !important;
  outline-offset: 2px !important;
}
/* The global panel-header rule previously put white text on a pale header. */
html body #app .cross-page .job-drawer.panel {
  background: var(--xl-color-surface, #fff) !important;
  color: var(--xl-ref-text) !important;
  border: 1px solid var(--xl-control-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px #162c2426 !important;
}
html body #app .cross-page .job-drawer.panel > header {
  background: var(--xl-control-soft) !important;
  color: var(--xl-ref-text) !important;
  border-bottom: 1px solid var(--xl-control-border) !important;
  border-radius: 7px !important;
}
html body #app .cross-page .job-drawer.panel > header b { color: var(--xl-ref-text) !important; }
html body #app .cross-page .job-drawer.panel > header button {
  background: var(--xl-control-hover) !important;
  color: var(--xl-ref-text) !important;
  border: 1px solid var(--xl-control-border) !important;
}
html body #app .cross-page .job-drawer.panel > p,
html body #app .cross-page .job-drawer.panel li > span,
html body #app .cross-page .job-drawer.panel .el-progress__text { color: var(--xl-ref-text) !important; }
html body #app .cross-page .job-drawer.panel li { border-bottom-color: var(--xl-control-border) !important; }
html body #app .cross-page .job-drawer.panel li small { color: var(--xl-ref-danger, #b23b3b) !important; }
html body #app .cross-page .job-drawer.panel li b.running { color: var(--xl-ref-primary) !important; }
html body #app .cross-page .job-drawer.panel li b.success,
html body #app .cross-page .job-drawer.panel li b.succeeded { color: var(--xl-ref-success, #227349) !important; }
html body #app .cross-page .job-drawer.panel li b.failed { color: var(--xl-ref-danger, #b23b3b) !important; }