/**
 * Workspace widget themes — Classic (default in legend.css), Dark, Glass.
 * Applied globally via #legend-app-root[data-workspace-widget-theme].
 *
 * Dark: same layout/chrome as Classic; palette shifts only.
 * Glass: frosted shell + per-widget polish (structure differs from Classic).
 */

/* --- Dark (classic layout, jet-black palette) --- */
.legend-app[data-workspace-widget-theme="dark"] {
  --legend-dark-bg: #000000;
  --legend-dark-elevated: #0a0a0a;
  --legend-dark-raised: #111111;
  --legend-dark-border: rgba(255, 255, 255, 0.07);
  --legend-dark-border-strong: rgba(255, 255, 255, 0.11);
  --legend-canvas-bg: var(--legend-dark-bg);
  --legend-bg-widget: var(--legend-dark-bg);
  --legend-border: var(--legend-dark-border);
}

.legend-app[data-workspace-widget-theme="dark"] .legend-widget .legend-widget-header {
  background: var(--legend-dark-elevated);
  box-shadow: 0 1px 0 var(--legend-dark-border);
}

.legend-app[data-workspace-widget-theme="dark"] .legend-widget .legend-widget-body {
  background: var(--legend-dark-bg);
}

.legend-app[data-workspace-widget-theme="dark"] .legend-widget .legend-alerts-filter {
  border-color: var(--legend-dark-border);
  background: transparent;
  color: var(--legend-text-muted);
}

.legend-app[data-workspace-widget-theme="dark"] .legend-widget .legend-alerts-filter:hover {
  border-color: var(--legend-dark-border-strong);
  background: color-mix(in srgb, #ffffff 4%, transparent);
  color: var(--legend-text);
}

.legend-app[data-workspace-widget-theme="dark"] .legend-widget .legend-alerts-filter.is-active {
  border-color: color-mix(in srgb, var(--banana-accent-lime) 45%, var(--legend-dark-border));
  background: color-mix(in srgb, var(--banana-accent-lime) 10%, transparent);
  color: var(--banana-accent-lime);
}

.legend-app[data-workspace-widget-theme="dark"] .legend-widget .legend-alert-card {
  background: var(--legend-dark-raised);
  border-color: var(--legend-dark-border);
}

.legend-app[data-workspace-widget-theme="dark"] .legend-widget .legend-alert-card:hover {
  background: #161616;
  border-color: color-mix(in srgb, var(--banana-accent-lime) 28%, var(--legend-dark-border));
}

.legend-app[data-workspace-widget-theme="dark"] .legend-widget .legend-table-wrap {
  border-color: var(--legend-dark-border);
}

.legend-app[data-workspace-widget-theme="dark"] .legend-widget .legend-table th {
  background: var(--legend-dark-elevated);
  color: var(--legend-text-muted);
}

.legend-app[data-workspace-widget-theme="dark"] .legend-widget .legend-table td {
  border-color: var(--legend-dark-border);
}

/* --- Glass (frosted) --- */
.legend-app[data-workspace-widget-theme="glass"],
html[data-workspace-widget-theme="glass"] {
  --legend-widget-theme-radius: var(--banana-radius);
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget-stack {
  min-height: 0;
}

.legend-app[data-workspace-widget-theme="glass"] .grid-stack-item-content:has(> .legend-widget-stack) {
  overflow: visible;
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget {
  --legend-widget-theme-border: color-mix(in srgb, #ffffff 10%, transparent);
  --legend-widget-well-bg: color-mix(in srgb, var(--banana-surface-container-lowest) 55%, transparent);
  --legend-widget-card-bg: color-mix(in srgb, var(--banana-surface-container-high) 22%, transparent);
  --legend-widget-theme-bg: linear-gradient(
    155deg,
    color-mix(in srgb, var(--banana-surface-container-high) 46%, transparent) 0%,
    color-mix(in srgb, var(--banana-surface-container) 36%, transparent) 55%,
    color-mix(in srgb, var(--banana-surface-container-low) 40%, transparent) 100%
  );
  --legend-widget-theme-blur: 22px;
  --legend-widget-theme-saturate: 1.35;
  --legend-widget-theme-shadow:
    0 16px 40px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 48px color-mix(in srgb, var(--banana-primary-fixed) 3%, transparent);
  box-sizing: border-box;
  border-radius: var(--legend-widget-theme-radius);
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  border: 1px solid var(--legend-widget-theme-border);
  background:
    radial-gradient(85% 55% at 14% -6%, color-mix(in srgb, var(--banana-primary-fixed) 12%, transparent), transparent 58%),
    radial-gradient(65% 45% at 100% 0%, color-mix(in srgb, var(--banana-chart-price) 8%, transparent), transparent 52%),
    radial-gradient(110% 75% at 50% 115%, color-mix(in srgb, var(--banana-secondary) 5%, transparent), transparent 58%),
    var(--legend-widget-theme-bg);
  backdrop-filter: blur(var(--legend-widget-theme-blur)) saturate(var(--legend-widget-theme-saturate));
  -webkit-backdrop-filter: blur(var(--legend-widget-theme-blur)) saturate(var(--legend-widget-theme-saturate));
  box-shadow: var(--legend-widget-theme-shadow);
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.02) 32%,
    transparent 62%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget > .legend-widget-header,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget > .legend-flow-alerts-filters,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget > .legend-options-screener-filters,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget > .legend-analyst-screener-filters,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget > .legend-news-headlines-filters,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget > .legend-stock-screener-filters,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget > .legend-widget-body {
  position: relative;
  z-index: 1;
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget > .legend-flow-alerts-filters,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget > .legend-options-screener-filters,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget > .legend-analyst-screener-filters,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget > .legend-news-headlines-filters,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget > .legend-stock-screener-filters {
  background: color-mix(in srgb, var(--banana-surface-container-high) 18%, transparent);
  border-bottom-color: color-mix(in srgb, var(--legend-widget-theme-border) 80%, transparent);
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-widget-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--banana-outline-variant) 12%, transparent);
  border-bottom: none;
}

.legend-app[data-workspace-widget-theme="glass"] .legend-chart-symbol-picker.legend-chart-symbol-picker--floating.is-open {
  border: 1px solid var(--legend-widget-theme-border);
  border-radius: var(--legend-widget-theme-radius);
  background: color-mix(in srgb, var(--banana-surface-container-high) 72%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: auto;
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-widget-body {
  background: transparent;
  padding: 8px 10px 10px;
  overflow: auto;
  flex: 1 1 0%;
  min-height: 0;
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-loading,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-error {
  color: var(--legend-text-muted);
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-alerts-filter,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-flow-alerts-filters .legend-filter-row,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-filter-choice {
  border: 1px solid var(--legend-widget-theme-border);
  border-radius: var(--legend-widget-theme-radius);
  background: color-mix(in srgb, var(--banana-surface-container-high) 30%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-alerts-filter:hover {
  border-color: color-mix(in srgb, var(--banana-primary-fixed) 35%, transparent);
  background: color-mix(in srgb, var(--banana-primary-fixed) 8%, transparent);
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-alerts-filter.is-active {
  border-color: color-mix(in srgb, var(--banana-primary-fixed) 45%, transparent);
  background: color-mix(in srgb, var(--banana-primary-fixed) 14%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--banana-primary-fixed) 12%, transparent);
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-alerts-filter:focus-visible {
  outline: none;
  box-shadow: var(--legend-focus-ring);
}

/* --- Glass: Alerts feed --- */
.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-alerts-feed {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-alerts-feed .legend-alerts-feed-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-alerts-feed .legend-alert-card {
  border: 1px solid color-mix(in srgb, var(--legend-widget-theme-border) 80%, transparent);
  border-radius: var(--legend-widget-theme-radius);
  background: color-mix(in srgb, var(--banana-surface-container-high) 18%, transparent);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-alerts-feed .legend-alert-card::before {
  width: 2px;
  border-radius: var(--legend-widget-theme-radius) 0 0 var(--legend-widget-theme-radius);
  opacity: 0.85;
  box-shadow: 0 0 12px currentColor;
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-alerts-feed .legend-alert-card:hover {
  border-color: color-mix(in srgb, var(--banana-primary-fixed) 30%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--banana-primary-fixed) 8%, transparent);
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-alerts-feed .legend-alert-card--expandable:focus-visible {
  outline: none;
  box-shadow: var(--legend-focus-ring);
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-alerts-feed .legend-alert-title {
  font-family: var(--legend-font-headline);
  font-size: 12px;
  font-weight: 600;
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-alerts-feed .legend-alert-body {
  font-size: 11px;
  color: var(--legend-text-muted);
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-alerts-feed .legend-alert-chip {
  border: 1px solid var(--legend-widget-theme-border);
  border-radius: var(--legend-widget-theme-radius);
  background: color-mix(in srgb, var(--banana-surface-container-high) 35%, transparent);
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-chart-symbol-picker {
  border-radius: var(--legend-widget-theme-radius);
}

/* --- Glass: Flow alerts table --- */
.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-table-wrap {
  border-radius: var(--legend-widget-theme-radius);
  border: 1px solid color-mix(in srgb, var(--legend-widget-theme-border) 70%, transparent);
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-table th {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--banana-surface-container-high) 25%, transparent);
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-table td {
  font-size: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
}

/* --- Glass: charts — no black instrument well; match frosted widget body --- */
.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-chart-container,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-ais-map,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-nfexp-chart-wrap,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget .net-flow-chart-main,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget .net-flow-chart-delta,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget .net-flow-chart-volume,
.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-iv-main {
  background: transparent;
}

.legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-chart-container > div {
  background: transparent !important;
}

/* ECharts axis/cursor tooltips — frosted glass (DOM may append to body) */
body:has(#legend-app-root[data-workspace-widget-theme="glass"]) .legend-echarts-tooltip--glass,
body:has(html[data-landing-hero="1"][data-workspace-widget-theme="glass"]) .legend-echarts-tooltip--glass {
  backdrop-filter: blur(20px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
  background-color: rgba(12, 12, 12, 0.42) !important;
  border-radius: var(--legend-widget-theme-radius) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32) !important;
  overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
  .legend-app[data-workspace-widget-theme="glass"] .legend-widget .legend-alerts-feed .legend-alert-card {
    transition: none;
  }
}