/* Shared card finish. Light stays in its own rounded layer; menus and focus
 * rings are not clipped. Controls, diagrams and playing cards keep their UI. */
:root {
  --bs-glass-fill: rgba(255, 255, 255, 0.42);
  --bs-glass-expanded: var(--bg, #f2f3f5);
  --bs-glass-edge: rgba(123, 155, 175, 0.10);
  --bs-glass-sheen: rgba(255, 255, 255, 0.22);
  --bs-glass-shadow: rgba(28, 61, 82, 0.06);
  --bs-glass-blob-a: rgba(58, 180, 226, 0.14);
  --bs-glass-blob-b: rgba(99, 191, 189, 0.11);
}

html[data-theme="dark"] {
  --bs-glass-fill: rgba(22, 29, 38, 0.48);
  --bs-glass-edge: rgba(167, 208, 234, 0.07);
  --bs-glass-sheen: rgba(182, 224, 247, 0.045);
  --bs-glass-shadow: rgba(0, 0, 0, 0.12);
  --bs-glass-blob-a: rgba(45, 157, 210, 0.12);
  --bs-glass-blob-b: rgba(85, 183, 179, 0.09);
}

.bsx-shell.is-hager-theme,
body[data-bs-persona="energy-provider"] {
  /* A page-coloured tint, instead of an opaque dark slab. */
  --bs-glass-fill: rgba(var(--bs-surface-rgb), 0.16);
  --bs-glass-expanded: var(--bs-page);
  --bs-glass-edge: rgba(208, 244, 255, 0.075);
  --bs-glass-sheen: rgba(221, 247, 255, 0.055);
  --bs-glass-shadow: rgba(var(--bs-shadow-rgb), 0.09);
  --bs-glass-blob-a: rgba(111, 224, 255, 0.14);
  --bs-glass-blob-b: rgba(139, 211, 236, 0.09);
}

body :is(
  .bsx-context-card, .card, .panel, .kpi, .feat, .alarm-card, .cat-item,
  .ep-panel, .ep-capacity, .ep-status-card, .ep-action, .ep-audit,
  .source-card, .report-card
) {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  border-color: var(--bs-glass-edge);
  background: linear-gradient(135deg, var(--bs-glass-sheen), transparent 62%),
    var(--bs-glass-fill);
  box-shadow: 0 10px 38px -12px var(--bs-glass-shadow),
    inset 0 1px 0 var(--bs-glass-sheen);
  -webkit-backdrop-filter: blur(20px) saturate(112%);
  backdrop-filter: blur(20px) saturate(112%);
}

/* Override the journey's more specific persona and feature finishes too.
 * Status labels, icons and controls retain their semantic colours. */
.bsx-shell.is-hager-theme .bsx-context-card,
.bsx-context-card:is(.is-proposal.is-featured, .is-collapsed),
.bsx-shell.is-hager-theme .bsx-context-card:is(
  .is-proposal.is-featured, .is-smart-shedding, .is-flex-offer,
  .is-flex-settings, .is-flex-events, .is-maintenance, .is-collapsed
),
.bsx-shell.is-hager-theme .bsx-main.has-simulation-editor-context
  .bsx-context-card.is-workspace,
html[data-theme="dark"] :is(.card, .panel, .kpi, .feat) {
  border-color: var(--bs-glass-edge);
  background: linear-gradient(135deg, var(--bs-glass-sheen), transparent 62%),
    var(--bs-glass-fill);
  box-shadow: 0 10px 38px -12px var(--bs-glass-shadow),
    inset 0 1px 0 var(--bs-glass-sheen);
}

/* Maintenance used to be the sole white card. Match its text to the new tint. */
.bsx-shell.is-hager-theme .bsx-context-card.is-maintenance,
.bsx-shell.is-hager-theme .bsx-context-card.is-maintenance :is(
  .bsx-card-kicker, .bsx-card-title, .bsx-card-summary, .bsx-maintenance-scope span
) {
  color: #ffffff;
}

/* Request rows sit on a lifted blue surface so the white text stays legible. */
.bsx-shell.is-hager-theme .bsx-context-card.is-maintenance .bsx-maintenance-item {
  border-color: rgba(208, 244, 255, 0.16);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 70%),
    rgba(var(--bs-surface-rgb), 0.72);
}

.bsx-shell.is-hager-theme .bsx-context-card.is-maintenance .bsx-maintenance-item :is(
  strong, p, small, .bsx-card-summary
) {
  color: #ffffff;
}

.bsx-shell.is-hager-theme .bsx-context-card.is-maintenance .bsx-maintenance-item small {
  color: rgba(255, 255, 255, 0.72);
}

.bsx-shell.is-hager-theme .bsx-context-card.is-maintenance .bsx-maintenance-scope span {
  border-color: rgba(208, 244, 255, 0.28);
  background: rgba(255, 255, 255, 0.10);
}

body .bsx-shell .bsx-context-card.is-expanded {
  position: fixed;
  /* Keep underlying content from showing through an expanded workspace. */
  --bs-glass-fill: var(--bs-glass-expanded);
  background-color: var(--bs-glass-fill);
}

body :is(
  .bsx-context-card, .card, .panel, .kpi, .feat, .alarm-card, .cat-item,
  .ep-panel, .ep-capacity, .ep-status-card, .ep-action, .ep-audit,
  .source-card, .report-card
)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  /* Broad gradient falloff softens the blobs without a large blur filter.
   * Only the bounded decorative background moves; content stays still. */
  background-image:
    radial-gradient(ellipse at 50% 45%, var(--bs-glass-blob-a), transparent 42%),
    radial-gradient(ellipse at 55% 55%, var(--bs-glass-blob-b), transparent 40%);
  background-size: 145% 160%, 160% 145%;
  background-repeat: no-repeat;
  animation: bs-glass-drift 26s ease-in-out -7s infinite alternate;
}

body :is(
  .bsx-context-card, .card, .panel, .kpi, .feat, .alarm-card, .cat-item,
  .ep-panel, .ep-capacity, .ep-status-card, .ep-action, .ep-audit,
  .source-card, .report-card
):nth-child(2n)::before {
  animation-duration: 31s;
  animation-delay: -19s;
  animation-direction: alternate-reverse;
}

body :is(
  .bsx-context-card, .card, .panel, .kpi, .feat, .alarm-card, .cat-item,
  .ep-panel, .ep-capacity, .ep-status-card, .ep-action, .ep-audit,
  .source-card, .report-card
):nth-child(3n)::before {
  animation-duration: 29s;
  animation-delay: -13s;
}

@keyframes bs-glass-drift {
  0% { background-position: 0% 15%, 100% 85%; }
  50% { background-position: 65% 100%, 15% 0%; }
  100% { background-position: 100% 20%, 0% 70%; }
}

.bsx-shell.is-hager-theme .bsx-plan-tab {
  color: rgba(255, 255, 255, 0.78);
}

.bsx-shell.is-hager-theme .bsx-plan-tab.is-active {
  color: #ffffff;
  border-bottom-color: var(--bs-accent);
}

/* A slightly larger top-left corona, with the same rotation and breathing. */
.bsx-brand .bsx-brand-ray::before {
  top: calc(50% - var(--brand-ray-radius) - var(--ray-length) * 1.24);
  height: calc(var(--ray-length) * 1.24);
}

.ep-brand-ray::before {
  top: calc(50% - 44px - var(--ray-length) * 1.24);
  height: calc(var(--ray-length) * 1.24);
}

@media (max-width: 760px) {
  .bsx-brand .bsx-brand-ray::before {
    top: calc(50% - var(--brand-ray-radius) - var(--ray-length) * 1.14);
    height: calc(var(--ray-length) * 1.14);
  }

}

@media (max-width: 680px) {
  .ep-brand-ray::before {
    top: calc(50% - 30px - var(--ray-length) * 0.86);
    height: calc(var(--ray-length) * 0.86);
  }
}

@media (prefers-reduced-motion: reduce), print {
  body :is(
    .bsx-context-card, .card, .panel, .kpi, .feat, .alarm-card, .cat-item,
    .ep-panel, .ep-capacity, .ep-status-card, .ep-action, .ep-audit,
    .source-card, .report-card
  )::before {
    animation: none;
    background-position: 35% 40%, 65% 60%;
  }
}

@media (forced-colors: active) {
  body :is(
    .bsx-context-card, .card, .panel, .kpi, .feat, .alarm-card, .cat-item,
    .ep-panel, .ep-capacity, .ep-status-card, .ep-action, .ep-audit,
    .source-card, .report-card
  )::before {
    display: none;
  }
}