/* v184 DroneHQ Light Header + Help Cleanup
   CSS only.
   Light mode only.
   Dark mode untouched.
   Does not target .preflight-page content.
*/

html[data-theme="light"] {
  --dhq-v184-blue: #0876c9;
  --dhq-v184-blue-strong: #075f9f;
  --dhq-v184-navy: #0d2136;
  --dhq-v184-text-blue: #164a73;
  --dhq-v184-muted-blue: #245b85;
  --dhq-v184-surface: #ffffff;
  --dhq-v184-soft: #f6fbff;
  --dhq-v184-tint: #eef7ff;
  --dhq-v184-border: #c8d8e8;
  --dhq-v184-border-strong: #9fc4e5;
}

/* Header utility icons: light mode should match Dev Tools preview. */
html[data-theme="light"] :is(.app-shell-header, .shell-header, .site-header, header) :is(
  button[aria-label*="location" i],
  button[title*="location" i],
  button[aria-label*="position" i],
  button[title*="position" i],
  button[aria-label*="mail" i],
  button[title*="mail" i],
  button[aria-label*="email" i],
  button[title*="email" i],
  button[aria-label*="calendar" i],
  button[title*="calendar" i],
  button[aria-label*="notification" i],
  button[title*="notification" i],
  button[aria-label*="bell" i],
  button[title*="bell" i],
  button[aria-label*="help" i],
  button[title*="help" i],
  a[aria-label*="location" i],
  a[title*="location" i],
  a[aria-label*="position" i],
  a[title*="position" i],
  a[aria-label*="mail" i],
  a[title*="mail" i],
  a[aria-label*="email" i],
  a[title*="email" i],
  a[aria-label*="calendar" i],
  a[title*="calendar" i],
  a[aria-label*="notification" i],
  a[title*="notification" i],
  a[aria-label*="bell" i],
  a[title*="bell" i],
  a[aria-label*="help" i],
  a[title*="help" i],
  button:has([data-lucide="map-pin"]),
  button:has([data-lucide="mail"]),
  button:has([data-lucide="calendar"]),
  button:has([data-lucide="bell"]),
  button:has([data-lucide="help-circle"]),
  button:has([data-lucide="circle-help"]),
  a:has([data-lucide="map-pin"]),
  a:has([data-lucide="mail"]),
  a:has([data-lucide="calendar"]),
  a:has([data-lucide="bell"]),
  a:has([data-lucide="help-circle"]),
  a:has([data-lucide="circle-help"])
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  background: #ffffff !important;
  color: var(--dhq-v184-blue) !important;
  border: 1px solid var(--dhq-v184-border-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Force the old dark active fills off in Light mode for those utility icons. */
html[data-theme="light"] :is(.app-shell-header, .shell-header, .site-header, header) :is(
  button[aria-label*="mail" i],
  button[aria-label*="email" i],
  button[aria-label*="notification" i],
  button[aria-label*="bell" i],
  button[aria-label*="help" i],
  a[aria-label*="mail" i],
  a[aria-label*="email" i],
  a[aria-label*="notification" i],
  a[aria-label*="bell" i],
  a[aria-label*="help" i],
  button:has([data-lucide="mail"]),
  button:has([data-lucide="bell"]),
  button:has([data-lucide="help-circle"]),
  button:has([data-lucide="circle-help"]),
  a:has([data-lucide="mail"]),
  a:has([data-lucide="bell"]),
  a:has([data-lucide="help-circle"]),
  a:has([data-lucide="circle-help"])
).active,
html[data-theme="light"] :is(.app-shell-header, .shell-header, .site-header, header) :is(
  button[aria-label*="mail" i],
  button[aria-label*="email" i],
  button[aria-label*="notification" i],
  button[aria-label*="bell" i],
  button[aria-label*="help" i],
  a[aria-label*="mail" i],
  a[aria-label*="email" i],
  a[aria-label*="notification" i],
  a[aria-label*="bell" i],
  a[aria-label*="help" i],
  button:has([data-lucide="mail"]),
  button:has([data-lucide="bell"]),
  button:has([data-lucide="help-circle"]),
  button:has([data-lucide="circle-help"]),
  a:has([data-lucide="mail"]),
  a:has([data-lucide="bell"]),
  a:has([data-lucide="help-circle"]),
  a:has([data-lucide="circle-help"])
).is-active,
html[data-theme="light"] :is(.app-shell-header, .shell-header, .site-header, header) :is(
  button[aria-label*="mail" i],
  button[aria-label*="email" i],
  button[aria-label*="notification" i],
  button[aria-label*="bell" i],
  button[aria-label*="help" i],
  a[aria-label*="mail" i],
  a[aria-label*="email" i],
  a[aria-label*="notification" i],
  a[aria-label*="bell" i],
  a[aria-label*="help" i],
  button:has([data-lucide="mail"]),
  button:has([data-lucide="bell"]),
  button:has([data-lucide="help-circle"]),
  button:has([data-lucide="circle-help"]),
  a:has([data-lucide="mail"]),
  a:has([data-lucide="bell"]),
  a:has([data-lucide="help-circle"]),
  a:has([data-lucide="circle-help"])
)[aria-expanded="true"],
html[data-theme="light"] :is(.app-shell-header, .shell-header, .site-header, header) :is(
  button[aria-label*="mail" i],
  button[aria-label*="email" i],
  button[aria-label*="notification" i],
  button[aria-label*="bell" i],
  button[aria-label*="help" i],
  a[aria-label*="mail" i],
  a[aria-label*="email" i],
  a[aria-label*="notification" i],
  a[aria-label*="bell" i],
  a[aria-label*="help" i],
  button:has([data-lucide="mail"]),
  button:has([data-lucide="bell"]),
  button:has([data-lucide="help-circle"]),
  button:has([data-lucide="circle-help"]),
  a:has([data-lucide="mail"]),
  a:has([data-lucide="bell"]),
  a:has([data-lucide="help-circle"]),
  a:has([data-lucide="circle-help"])
)[aria-pressed="true"] {
  background: #ffffff !important;
  color: var(--dhq-v184-blue) !important;
  border-color: var(--dhq-v184-border-strong) !important;
}

html[data-theme="light"] :is(.app-shell-header, .shell-header, .site-header, header) :is(button, a) :is(svg, [data-lucide], .lucide) {
  stroke: currentColor !important;
  color: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
}

/* Help drawer: all light-mode help text should be darker blue/readable, not gray/pale. */
html[data-theme="light"] :is(
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel],
  #page-help-drawer,
  #help-drawer
) {
  background: #ffffff !important;
  color: var(--dhq-v184-navy) !important;
  border-color: var(--dhq-v184-border) !important;
}

html[data-theme="light"] :is(
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel],
  #page-help-drawer,
  #help-drawer
) :is(.page-help-header, .help-header, .drawer-header, header) {
  background: var(--dhq-v184-soft) !important;
  color: var(--dhq-v184-navy) !important;
  border-color: var(--dhq-v184-border) !important;
}

html[data-theme="light"] :is(
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel],
  #page-help-drawer,
  #help-drawer
) :is(h1,h2,h3,h4,h5,h6,strong,b,label,dt) {
  color: var(--dhq-v184-navy) !important;
  opacity: 1 !important;
}

html[data-theme="light"] :is(
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel],
  #page-help-drawer,
  #help-drawer
) :is(p,li,span,small,dd) {
  color: var(--dhq-v184-text-blue) !important;
  opacity: 1 !important;
}

html[data-theme="light"] :is(
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel],
  #page-help-drawer,
  #help-drawer
) :is(a, .help-link, .page-help-link) {
  color: var(--dhq-v184-blue-strong) !important;
  opacity: 1 !important;
}

/* Help content cards and notes: remove gray/dark panels in Light mode. */
html[data-theme="light"] :is(
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel],
  #page-help-drawer,
  #help-drawer
) :is(
  .page-help-content,
  .help-content,
  .page-help-body,
  .help-body,
  .page-help-card,
  .help-card,
  .page-help-section,
  .help-section,
  .page-help-callout,
  .help-callout,
  .page-help-note,
  .help-note,
  .page-help-related,
  .help-related,
  article,
  section
) {
  background: var(--dhq-v184-soft) !important;
  color: var(--dhq-v184-navy) !important;
  border-color: var(--dhq-v184-border) !important;
}

/* Specific dark gray note block from Help fallback/known limitations. */
html[data-theme="light"] :is(
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel],
  #page-help-drawer,
  #help-drawer
) :is(
  .important-notes,
  .known-limitations,
  .page-help-note,
  .help-note,
  [class*="note"],
  [class*="limitation"],
  [class*="important"]
) {
  background: var(--dhq-v184-tint) !important;
  color: var(--dhq-v184-navy) !important;
  border: 1px solid var(--dhq-v184-border-strong) !important;
}

html[data-theme="light"] :is(
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel],
  #page-help-drawer,
  #help-drawer
) :is(
  .important-notes,
  .known-limitations,
  .page-help-note,
  .help-note,
  [class*="note"],
  [class*="limitation"],
  [class*="important"]
) :is(p,li,span,small,strong,b) {
  color: var(--dhq-v184-text-blue) !important;
  opacity: 1 !important;
}

/* Help tabs: light chrome with darker blue text. */
html[data-theme="light"] :is(
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel],
  #page-help-drawer,
  #help-drawer
) :is(.page-help-tabs,.help-tabs,[role="tablist"]) {
  background: var(--dhq-v184-tint) !important;
  border-color: var(--dhq-v184-border) !important;
}

html[data-theme="light"] :is(
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel],
  #page-help-drawer,
  #help-drawer
) :is(.page-help-tab,.help-tab,[role="tab"]) {
  background: #ffffff !important;
  color: var(--dhq-v184-text-blue) !important;
  border-color: var(--dhq-v184-border) !important;
  opacity: 1 !important;
}

html[data-theme="light"] :is(
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel],
  #page-help-drawer,
  #help-drawer
) :is(.page-help-tab.active,.page-help-tab.is-active,.help-tab.active,.help-tab.is-active,[role="tab"][aria-selected="true"]) {
  background: var(--dhq-v184-tint) !important;
  color: var(--dhq-v184-blue) !important;
  border-color: var(--dhq-v184-blue) !important;
}

/* Help footer/buttons. */
html[data-theme="light"] :is(
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel],
  #page-help-drawer,
  #help-drawer
) :is(.page-help-footer,.help-footer,.drawer-footer) {
  background: #ffffff !important;
  border-color: var(--dhq-v184-border) !important;
}

html[data-theme="light"] :is(
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel],
  #page-help-drawer,
  #help-drawer
) :is(button,.button,.btn,a.button) {
  background: var(--dhq-v184-soft) !important;
  border-color: var(--dhq-v184-border-strong) !important;
  color: var(--dhq-v184-navy) !important;
  opacity: 1 !important;
}

html[data-theme="light"] :is(
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel],
  #page-help-drawer,
  #help-drawer
) :is(.button-primary,.btn-primary,.primary,button[type="submit"]) {
  background: linear-gradient(180deg, #2aa7f4, #0876c9) !important;
  border-color: #0876c9 !important;
  color: #ffffff !important;
}