/* v186 DroneHQ Light Shell Utility Drawer Final Cleanup
   CSS only for styling.
   Light mode only.
   Dark mode untouched.
   Preflight content untouched.
*/

html[data-theme="light"] {
  --dhq-v186-page: #eaf3fb;
  --dhq-v186-surface: #ffffff;
  --dhq-v186-soft: #f6fbff;
  --dhq-v186-tint: #eef7ff;
  --dhq-v186-border: #c8d8e8;
  --dhq-v186-border-strong: #9fc4e5;
  --dhq-v186-text: #0d2136;
  --dhq-v186-blue-text: #164a73;
  --dhq-v186-muted: #245b85;
  --dhq-v186-primary: #0876c9;
  --dhq-v186-primary-hover: #075f9f;
  --dhq-v186-green: #087a3d;
  --dhq-v186-warning: #a15c00;
}

/* Header utility icons: uniform clean light boxes. */
html[data-theme="light"] :is(.app-shell-header, .shell-header, .site-header, header) :is(
  button[aria-label*="location" i],
  button[aria-label*="position" i],
  button[aria-label*="email" i],
  button[aria-label*="mail" i],
  button[aria-label*="calendar" i],
  button[aria-label*="notification" i],
  button[aria-label*="bell" i],
  button[aria-label*="help" i],
  button[title*="location" i],
  button[title*="position" i],
  button[title*="email" i],
  button[title*="mail" i],
  button[title*="calendar" i],
  button[title*="notification" i],
  button[title*="bell" i],
  button[title*="help" i],
  button:has([data-lucide="sparkles"]),
  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[aria-label*="location" i],
  a[aria-label*="position" i],
  a[aria-label*="email" i],
  a[aria-label*="mail" i],
  a[aria-label*="calendar" i],
  a[aria-label*="notification" i],
  a[aria-label*="bell" i],
  a[aria-label*="help" i],
  a:has([data-lucide="sparkles"]),
  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: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: var(--dhq-v186-primary) !important;
  border: 1px solid var(--dhq-v186-border-strong) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

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

/* Active/open utility icon gets blue outline but stays light. */
html[data-theme="light"] :is(.app-shell-header, .shell-header, .site-header, header) :is(
  button[aria-expanded="true"],
  button[aria-pressed="true"],
  button.active,
  button.is-active,
  a[aria-expanded="true"],
  a[aria-pressed="true"],
  a.active,
  a.is-active
):has(svg) {
  background: #ffffff !important;
  color: var(--dhq-v186-primary) !important;
  border: 2px solid var(--dhq-v186-primary) !important;
}

/* Right-side utility drawers/flyouts/panels. 
   Scoped to body-level overlays so Preflight content is not targeted. */
html[data-theme="light"] body > :is(aside, section, div):is(
  [class*="drawer" i],
  [class*="flyout" i],
  [class*="popover" i],
  [class*="tray" i],
  [class*="utility" i],
  [class*="location" i],
  [class*="email" i],
  [class*="mail" i],
  [class*="calendar" i],
  [class*="notification" i],
  [class*="ai" i],
  [class*="assistant" i],
  [class*="help" i],
  [id*="drawer" i],
  [id*="flyout" i],
  [id*="popover" i],
  [id*="tray" i],
  [id*="utility" i],
  [id*="location" i],
  [id*="email" i],
  [id*="mail" i],
  [id*="calendar" i],
  [id*="notification" i],
  [id*="ai" i],
  [id*="assistant" i],
  [id*="help" i],
  [role="dialog"]
),
html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) {
  background: var(--dhq-v186-surface) !important;
  color: var(--dhq-v186-text) !important;
  border-color: var(--dhq-v186-border) !important;
  box-shadow: 0 24px 70px rgba(13, 33, 54, 0.18) !important;
}

/* Catch nested drawer root when the body-level wrapper is generic. */
html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) :is(
  [class*="drawer" i],
  [class*="panel" i],
  [class*="flyout" i],
  [class*="popover" i],
  [class*="tray" i],
  [class*="location" i],
  [class*="email" i],
  [class*="mail" i],
  [class*="calendar" i],
  [class*="notification" i],
  [class*="ai" i],
  [class*="assistant" i],
  [class*="help" i],
  article,
  section
) {
  background: var(--dhq-v186-surface) !important;
  color: var(--dhq-v186-text) !important;
  border-color: var(--dhq-v186-border) !important;
}

/* Drawer headers. */
html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) :is(
  header,
  .drawer-header,
  .panel-header,
  .utility-header,
  .location-header,
  .ai-header,
  .help-header,
  .page-help-header
) {
  background: var(--dhq-v186-soft) !important;
  color: var(--dhq-v186-text) !important;
  border-color: var(--dhq-v186-border) !important;
}

/* Drawer text: darker, readable blue. */
html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) :is(h1, h2, h3, h4, h5, h6, strong, b, label, dt) {
  color: var(--dhq-v186-text) !important;
  opacity: 1 !important;
}

html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) :is(p, li, span, small, dd) {
  color: var(--dhq-v186-blue-text) !important;
  opacity: 1 !important;
}

/* Drawer cards/rows/boxes. */
html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) :is(
  .card,
  .panel-card,
  .drawer-card,
  .info-card,
  .status-card,
  .context-card,
  .action-card,
  .row,
  .field-row,
  .saved-data,
  .current-status,
  article,
  section
) {
  background: var(--dhq-v186-soft) !important;
  color: var(--dhq-v186-text) !important;
  border-color: var(--dhq-v186-border) !important;
}

/* Calendar date grid should be light in Light mode. */
html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) :is(
  [class*="calendar" i],
  [class*="agenda" i],
  [class*="date" i],
  [class*="day" i]
) {
  color: var(--dhq-v186-text) !important;
}

html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) :is(
  [class*="calendar" i] button,
  [class*="agenda" i] button,
  [class*="date" i] button,
  [class*="day" i] button
) {
  background: #ffffff !important;
  color: var(--dhq-v186-text) !important;
  border-color: var(--dhq-v186-border) !important;
}

/* Inputs / textarea in AI and notifications. */
html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) :is(input, select, textarea) {
  background: #ffffff !important;
  color: var(--dhq-v186-text) !important;
  border: 1px solid var(--dhq-v186-border-strong) !important;
  opacity: 1 !important;
}

html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) :is(input, textarea)::placeholder {
  color: #607b94 !important;
  opacity: 1 !important;
}

/* Buttons and action rows. */
html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) :is(button, .button, .btn, a.button) {
  background: var(--dhq-v186-soft) !important;
  color: var(--dhq-v186-text) !important;
  border-color: var(--dhq-v186-border-strong) !important;
  opacity: 1 !important;
}

html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) :is(.primary, .btn-primary, .button-primary, button[type="submit"]) {
  background: linear-gradient(180deg, #2aa7f4, #0876c9) !important;
  color: #ffffff !important;
  border-color: #0876c9 !important;
}

/* Close buttons: clean boxed blue x. */
html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) :is(
  button[aria-label*="close" i],
  button[title*="close" i],
  .close,
  .drawer-close,
  .panel-close,
  [data-close],
  [data-help-close]
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: var(--dhq-v186-primary) !important;
  border: 1px solid var(--dhq-v186-border-strong) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  overflow: hidden !important;
}

/* Available/online status can remain green. */
html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) :is(.available, .online, .success, [data-status="available"], [data-status="online"]) {
  color: var(--dhq-v186-green) !important;
  font-weight: 900 !important;
}

/* Warning text readable but not neon. */
html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) :is(.warning, .attention, [data-tone="warning"]) {
  color: var(--dhq-v186-warning) !important;
  opacity: 1 !important;
}

/* Links. */
html[data-theme="light"] body > :is(aside, section, div):has(
  button[aria-label*="close" i],
  button[title*="close" i],
  [data-close],
  .drawer-close,
  .panel-close
) a {
  color: var(--dhq-v186-primary) !important;
  opacity: 1 !important;
}