
/* v185 DroneHQ Light Shell Utility Drawers
   CSS only.
   Light mode only.
   Dark mode untouched.
   Does not target .preflight-page content.
*/

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

/* Shell utility drawer/panel surfaces in Light mode. */
html[data-theme="light"] :is(
  .shell-drawer,
  .shell-panel,
  .utility-drawer,
  .utility-panel,
  .app-shell-drawer,
  .app-shell-panel,
  .location-drawer,
  .location-panel,
  .operating-location-drawer,
  .operating-location-panel,
  .browser-location-drawer,
  .browser-location-panel,
  .ai-drawer,
  .ai-panel,
  .dronehq-ai-drawer,
  .dronehq-ai-panel,
  .mail-drawer,
  .mail-panel,
  .email-drawer,
  .email-panel,
  .calendar-drawer,
  .calendar-panel,
  .notification-drawer,
  .notification-panel,
  .notifications-drawer,
  .notifications-panel,
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-shell-drawer],
  [data-shell-panel],
  [data-utility-drawer],
  [data-utility-panel],
  [data-location-drawer],
  [data-location-panel],
  [data-operating-location],
  [data-shell-location],
  [data-ai-drawer],
  [data-ai-panel],
  [data-shell-ai],
  [data-mail-drawer],
  [data-mail-panel],
  [data-calendar-drawer],
  [data-calendar-panel],
  [data-notification-drawer],
  [data-notification-panel],
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel],
  #shell-location-panel,
  #location-panel,
  #operating-location-panel,
  #dronehq-ai-panel,
  #ai-panel,
  #mail-panel,
  #calendar-panel,
  #notifications-panel,
  #page-help-drawer,
  #help-drawer
) {
  background: var(--dhq-v185-surface) !important;
  color: var(--dhq-v185-text) !important;
  border-color: var(--dhq-v185-border) !important;
  box-shadow: 0 24px 70px rgba(13, 33, 54, 0.18) !important;
}

/* Drawer headers. */
html[data-theme="light"] :is(
  .shell-drawer,
  .shell-panel,
  .utility-drawer,
  .utility-panel,
  .app-shell-drawer,
  .app-shell-panel,
  .location-drawer,
  .location-panel,
  .operating-location-drawer,
  .operating-location-panel,
  .browser-location-drawer,
  .browser-location-panel,
  .ai-drawer,
  .ai-panel,
  .dronehq-ai-drawer,
  .dronehq-ai-panel,
  .mail-drawer,
  .mail-panel,
  .email-drawer,
  .email-panel,
  .calendar-drawer,
  .calendar-panel,
  .notification-drawer,
  .notification-panel,
  .notifications-drawer,
  .notifications-panel,
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-shell-drawer],
  [data-shell-panel],
  [data-utility-drawer],
  [data-utility-panel],
  [data-location-drawer],
  [data-location-panel],
  [data-operating-location],
  [data-shell-location],
  [data-ai-drawer],
  [data-ai-panel],
  [data-shell-ai],
  [data-mail-drawer],
  [data-mail-panel],
  [data-calendar-drawer],
  [data-calendar-panel],
  [data-notification-drawer],
  [data-notification-panel],
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel]
) :is(header, .drawer-header, .panel-header, .shell-drawer-header, .utility-header, .location-header, .ai-header, .help-header, .page-help-header) {
  background: var(--dhq-v185-soft) !important;
  color: var(--dhq-v185-text) !important;
  border-color: var(--dhq-v185-border) !important;
}

/* Main drawer text: darker blue, not gray/pale. */
html[data-theme="light"] :is(
  .shell-drawer,
  .shell-panel,
  .utility-drawer,
  .utility-panel,
  .app-shell-drawer,
  .app-shell-panel,
  .location-drawer,
  .location-panel,
  .operating-location-drawer,
  .operating-location-panel,
  .browser-location-drawer,
  .browser-location-panel,
  .ai-drawer,
  .ai-panel,
  .dronehq-ai-drawer,
  .dronehq-ai-panel,
  .mail-drawer,
  .mail-panel,
  .email-drawer,
  .email-panel,
  .calendar-drawer,
  .calendar-panel,
  .notification-drawer,
  .notification-panel,
  .notifications-drawer,
  .notifications-panel,
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-shell-drawer],
  [data-shell-panel],
  [data-utility-drawer],
  [data-utility-panel],
  [data-location-drawer],
  [data-location-panel],
  [data-operating-location],
  [data-shell-location],
  [data-ai-drawer],
  [data-ai-panel],
  [data-shell-ai],
  [data-mail-drawer],
  [data-mail-panel],
  [data-calendar-drawer],
  [data-calendar-panel],
  [data-notification-drawer],
  [data-notification-panel],
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel]
) :is(h1,h2,h3,h4,h5,h6,strong,b,label,dt) {
  color: var(--dhq-v185-text) !important;
  opacity: 1 !important;
}

html[data-theme="light"] :is(
  .shell-drawer,
  .shell-panel,
  .utility-drawer,
  .utility-panel,
  .app-shell-drawer,
  .app-shell-panel,
  .location-drawer,
  .location-panel,
  .operating-location-drawer,
  .operating-location-panel,
  .browser-location-drawer,
  .browser-location-panel,
  .ai-drawer,
  .ai-panel,
  .dronehq-ai-drawer,
  .dronehq-ai-panel,
  .mail-drawer,
  .mail-panel,
  .email-drawer,
  .email-panel,
  .calendar-drawer,
  .calendar-panel,
  .notification-drawer,
  .notification-panel,
  .notifications-drawer,
  .notifications-panel,
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-shell-drawer],
  [data-shell-panel],
  [data-utility-drawer],
  [data-utility-panel],
  [data-location-drawer],
  [data-location-panel],
  [data-operating-location],
  [data-shell-location],
  [data-ai-drawer],
  [data-ai-panel],
  [data-shell-ai],
  [data-mail-drawer],
  [data-mail-panel],
  [data-calendar-drawer],
  [data-calendar-panel],
  [data-notification-drawer],
  [data-notification-panel],
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel]
) :is(p,li,span,small,dd,div) {
  color: var(--dhq-v185-blue-text) !important;
  opacity: 1 !important;
}

/* Eyebrows / section labels. */
html[data-theme="light"] :is(
  .shell-drawer,
  .shell-panel,
  .utility-drawer,
  .utility-panel,
  .location-drawer,
  .location-panel,
  .ai-drawer,
  .ai-panel,
  .dronehq-ai-drawer,
  .dronehq-ai-panel,
  .page-help-drawer,
  .help-drawer,
  [data-shell-drawer],
  [data-shell-panel],
  [data-utility-drawer],
  [data-utility-panel],
  [data-location-drawer],
  [data-location-panel],
  [data-ai-drawer],
  [data-ai-panel],
  [data-page-help-drawer],
  [data-help-drawer]
) :is(.eyebrow, .section-eyebrow, [class*="eyebrow"], [class*="kicker"]) {
  color: var(--dhq-v185-primary) !important;
  opacity: 1 !important;
}

/* Drawer cards/rows/boxes. */
html[data-theme="light"] :is(
  .shell-drawer,
  .shell-panel,
  .utility-drawer,
  .utility-panel,
  .location-drawer,
  .location-panel,
  .operating-location-drawer,
  .operating-location-panel,
  .browser-location-drawer,
  .browser-location-panel,
  .ai-drawer,
  .ai-panel,
  .dronehq-ai-drawer,
  .dronehq-ai-panel,
  .mail-drawer,
  .mail-panel,
  .calendar-drawer,
  .calendar-panel,
  .notification-drawer,
  .notification-panel,
  .notifications-drawer,
  .notifications-panel,
  .page-help-drawer,
  .page-help-panel,
  .help-drawer,
  .help-panel,
  [data-shell-drawer],
  [data-shell-panel],
  [data-utility-drawer],
  [data-utility-panel],
  [data-location-drawer],
  [data-location-panel],
  [data-ai-drawer],
  [data-ai-panel],
  [data-mail-drawer],
  [data-mail-panel],
  [data-calendar-drawer],
  [data-calendar-panel],
  [data-notification-drawer],
  [data-notification-panel],
  [data-page-help-drawer],
  [data-help-drawer],
  [data-help-panel]
) :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-v185-soft) !important;
  color: var(--dhq-v185-text) !important;
  border-color: var(--dhq-v185-border) !important;
}

/* Important/help note blocks should not be dark gray 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(
  .important-notes,
  .known-limitations,
  .page-help-note,
  .help-note,
  [class*="note"],
  [class*="limitation"],
  [class*="important"]
) {
  background: var(--dhq-v185-tint) !important;
  color: var(--dhq-v185-text) !important;
  border: 1px solid var(--dhq-v185-border-strong) !important;
}

/* Links and blue actions. */
html[data-theme="light"] :is(
  .shell-drawer,
  .shell-panel,
  .utility-drawer,
  .utility-panel,
  .location-drawer,
  .location-panel,
  .ai-drawer,
  .ai-panel,
  .dronehq-ai-drawer,
  .dronehq-ai-panel,
  .page-help-drawer,
  .help-drawer,
  [data-shell-drawer],
  [data-shell-panel],
  [data-utility-drawer],
  [data-utility-panel],
  [data-location-drawer],
  [data-location-panel],
  [data-ai-drawer],
  [data-ai-panel],
  [data-page-help-drawer],
  [data-help-drawer]
) a {
  color: var(--dhq-v185-primary) !important;
  opacity: 1 !important;
}

/* Inputs and text areas inside utility drawers. */
html[data-theme="light"] :is(
  .shell-drawer,
  .shell-panel,
  .utility-drawer,
  .utility-panel,
  .location-drawer,
  .location-panel,
  .ai-drawer,
  .ai-panel,
  .dronehq-ai-drawer,
  .dronehq-ai-panel,
  [data-shell-drawer],
  [data-shell-panel],
  [data-utility-drawer],
  [data-utility-panel],
  [data-location-drawer],
  [data-location-panel],
  [data-ai-drawer],
  [data-ai-panel]
) :is(input, select, textarea) {
  background: #ffffff !important;
  color: var(--dhq-v185-text) !important;
  border: 1px solid var(--dhq-v185-border-strong) !important;
  opacity: 1 !important;
}

html[data-theme="light"] :is(
  .shell-drawer,
  .shell-panel,
  .utility-drawer,
  .utility-panel,
  .ai-drawer,
  .ai-panel,
  .dronehq-ai-drawer,
  .dronehq-ai-panel,
  [data-shell-drawer],
  [data-shell-panel],
  [data-utility-drawer],
  [data-utility-panel],
  [data-ai-drawer],
  [data-ai-panel]
) :is(input, textarea)::placeholder {
  color: #607b94 !important;
  opacity: 1 !important;
}

/* Buttons. */
html[data-theme="light"] :is(
  .shell-drawer,
  .shell-panel,
  .utility-drawer,
  .utility-panel,
  .location-drawer,
  .location-panel,
  .ai-drawer,
  .ai-panel,
  .dronehq-ai-drawer,
  .dronehq-ai-panel,
  .page-help-drawer,
  .help-drawer,
  [data-shell-drawer],
  [data-shell-panel],
  [data-utility-drawer],
  [data-utility-panel],
  [data-location-drawer],
  [data-location-panel],
  [data-ai-drawer],
  [data-ai-panel],
  [data-page-help-drawer],
  [data-help-drawer]
) :is(button, .button, .btn, a.button) {
  background: var(--dhq-v185-soft) !important;
  color: var(--dhq-v185-text) !important;
  border-color: var(--dhq-v185-border-strong) !important;
  opacity: 1 !important;
}

html[data-theme="light"] :is(
  .shell-drawer,
  .shell-panel,
  .utility-drawer,
  .utility-panel,
  .location-drawer,
  .location-panel,
  .ai-drawer,
  .ai-panel,
  .dronehq-ai-drawer,
  .dronehq-ai-panel,
  .page-help-drawer,
  .help-drawer,
  [data-shell-drawer],
  [data-shell-panel],
  [data-utility-drawer],
  [data-utility-panel],
  [data-location-drawer],
  [data-location-panel],
  [data-ai-drawer],
  [data-ai-panel],
  [data-page-help-drawer],
  [data-help-drawer]
) :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 should be light, boxed, and blue. */
html[data-theme="light"] :is(
  .shell-drawer,
  .shell-panel,
  .utility-drawer,
  .utility-panel,
  .location-drawer,
  .location-panel,
  .ai-drawer,
  .ai-panel,
  .dronehq-ai-drawer,
  .dronehq-ai-panel,
  .page-help-drawer,
  .help-drawer,
  [data-shell-drawer],
  [data-shell-panel],
  [data-utility-drawer],
  [data-utility-panel],
  [data-location-drawer],
  [data-location-panel],
  [data-ai-drawer],
  [data-ai-panel],
  [data-page-help-drawer],
  [data-help-drawer]
) :is(
  .close,
  .drawer-close,
  .panel-close,
  .help-close,
  .page-help-close,
  [aria-label="Close"],
  [data-close],
  [data-help-close]
) {
  background: #ffffff !important;
  color: var(--dhq-v185-primary) !important;
  border: 1px solid var(--dhq-v185-border-strong) !important;
  border-radius: 10px !important;
}

/* Available/online status can stay green but must be readable. */
html[data-theme="light"] :is(
  .shell-drawer,
  .shell-panel,
  .utility-drawer,
  .utility-panel,
  .location-drawer,
  .location-panel,
  .ai-drawer,
  .ai-panel,
  .dronehq-ai-drawer,
  .dronehq-ai-panel,
  [data-shell-drawer],
  [data-shell-panel],
  [data-utility-drawer],
  [data-utility-panel],
  [data-location-drawer],
  [data-location-panel],
  [data-ai-drawer],
  [data-ai-panel]
) :is(.available, .online, .success, [data-status="available"], [data-status="online"]) {
  color: var(--dhq-v185-green) !important;
  font-weight: 900 !important;
}
