/* v193 Bell active dark-mode fix
   Scope: header notification/bell button only.
   Fix: when the drawer is open, the bell icon must stay DroneHQ blue/cyan, not white.
   Light mode untouched.
   Preflight content untouched.
*/

html[data-theme="dark"],
body[data-theme="dark"],
html[data-dhq-theme-effective="dark"],
body[data-dhq-theme-effective="dark"] {
  --dhq-v193-bell-blue: #54c4ff;
  --dhq-v193-bell-bg: #092d4d;
  --dhq-v193-bell-border: rgba(84, 196, 255, 0.65);
}

/* Bell button open/active state only. */
html[data-theme="dark"] :is(.app-shell-header, .shell-header, .site-header, header) :is(
  button[aria-label*="notification" i],
  button[aria-label*="bell" i],
  button[title*="notification" i],
  button[title*="bell" i],
  button:has([data-lucide="bell"]),
  button:has(svg.lucide-bell),
  a[aria-label*="notification" i],
  a[aria-label*="bell" i],
  a[title*="notification" i],
  a[title*="bell" i],
  a:has([data-lucide="bell"]),
  a:has(svg.lucide-bell)
):is(.active, .is-active, [aria-expanded="true"], [aria-pressed="true"]),
body[data-theme="dark"] :is(.app-shell-header, .shell-header, .site-header, header) :is(
  button[aria-label*="notification" i],
  button[aria-label*="bell" i],
  button[title*="notification" i],
  button[title*="bell" i],
  button:has([data-lucide="bell"]),
  button:has(svg.lucide-bell),
  a[aria-label*="notification" i],
  a[aria-label*="bell" i],
  a[title*="notification" i],
  a[title*="bell" i],
  a:has([data-lucide="bell"]),
  a:has(svg.lucide-bell)
):is(.active, .is-active, [aria-expanded="true"], [aria-pressed="true"]),
html[data-dhq-theme-effective="dark"] :is(.app-shell-header, .shell-header, .site-header, header) :is(
  button[aria-label*="notification" i],
  button[aria-label*="bell" i],
  button[title*="notification" i],
  button[title*="bell" i],
  button:has([data-lucide="bell"]),
  button:has(svg.lucide-bell),
  a[aria-label*="notification" i],
  a[aria-label*="bell" i],
  a[title*="notification" i],
  a[title*="bell" i],
  a:has([data-lucide="bell"]),
  a:has(svg.lucide-bell)
):is(.active, .is-active, [aria-expanded="true"], [aria-pressed="true"]),
body[data-dhq-theme-effective="dark"] :is(.app-shell-header, .shell-header, .site-header, header) :is(
  button[aria-label*="notification" i],
  button[aria-label*="bell" i],
  button[title*="notification" i],
  button[title*="bell" i],
  button:has([data-lucide="bell"]),
  button:has(svg.lucide-bell),
  a[aria-label*="notification" i],
  a[aria-label*="bell" i],
  a[title*="notification" i],
  a[title*="bell" i],
  a:has([data-lucide="bell"]),
  a:has(svg.lucide-bell)
):is(.active, .is-active, [aria-expanded="true"], [aria-pressed="true"]) {
  background: var(--dhq-v193-bell-bg) !important;
  color: var(--dhq-v193-bell-blue) !important;
  border-color: var(--dhq-v193-bell-border) !important;
  box-shadow: none !important;
}

/* Force the bell SVG stroke to stay blue/cyan, not white. */
html[data-theme="dark"] :is(.app-shell-header, .shell-header, .site-header, header) :is(
  button[aria-label*="notification" i],
  button[aria-label*="bell" i],
  button[title*="notification" i],
  button[title*="bell" i],
  button:has([data-lucide="bell"]),
  button:has(svg.lucide-bell),
  a[aria-label*="notification" i],
  a[aria-label*="bell" i],
  a[title*="notification" i],
  a[title*="bell" i],
  a:has([data-lucide="bell"]),
  a:has(svg.lucide-bell)
):is(.active, .is-active, [aria-expanded="true"], [aria-pressed="true"]) :is(svg, [data-lucide], .lucide),
body[data-theme="dark"] :is(.app-shell-header, .shell-header, .site-header, header) :is(
  button[aria-label*="notification" i],
  button[aria-label*="bell" i],
  button[title*="notification" i],
  button[title*="bell" i],
  button:has([data-lucide="bell"]),
  button:has(svg.lucide-bell),
  a[aria-label*="notification" i],
  a[aria-label*="bell" i],
  a[title*="notification" i],
  a[title*="bell" i],
  a:has([data-lucide="bell"]),
  a:has(svg.lucide-bell)
):is(.active, .is-active, [aria-expanded="true"], [aria-pressed="true"]) :is(svg, [data-lucide], .lucide),
html[data-dhq-theme-effective="dark"] :is(.app-shell-header, .shell-header, .site-header, header) :is(
  button[aria-label*="notification" i],
  button[aria-label*="bell" i],
  button[title*="notification" i],
  button[title*="bell" i],
  button:has([data-lucide="bell"]),
  button:has(svg.lucide-bell),
  a[aria-label*="notification" i],
  a[aria-label*="bell" i],
  a[title*="notification" i],
  a[title*="bell" i],
  a:has([data-lucide="bell"]),
  a:has(svg.lucide-bell)
):is(.active, .is-active, [aria-expanded="true"], [aria-pressed="true"]) :is(svg, [data-lucide], .lucide),
body[data-dhq-theme-effective="dark"] :is(.app-shell-header, .shell-header, .site-header, header) :is(
  button[aria-label*="notification" i],
  button[aria-label*="bell" i],
  button[title*="notification" i],
  button[title*="bell" i],
  button:has([data-lucide="bell"]),
  button:has(svg.lucide-bell),
  a[aria-label*="notification" i],
  a[aria-label*="bell" i],
  a[title*="notification" i],
  a[title*="bell" i],
  a:has([data-lucide="bell"]),
  a:has(svg.lucide-bell)
):is(.active, .is-active, [aria-expanded="true"], [aria-pressed="true"]) :is(svg, [data-lucide], .lucide) {
  color: var(--dhq-v193-bell-blue) !important;
  stroke: var(--dhq-v193-bell-blue) !important;
  fill: none !important;
  opacity: 1 !important;
}