/*
  DroneHQ Notifications Header Position v77
  Scope: CSS-only adjustment for the Notifications flyout header.
  - Moves the close X into the upper-right header corner.
  - Moves the date/time higher and centered under the title area.
  - Tightens unused vertical space in the Notifications header.
  No JavaScript or backend behavior changes.
*/

.notification-popover .notification-heading,
.dhq-notifications-panel .notification-heading,
.dhq-notifications-dock .notification-heading {
  position: relative !important;
  min-height: 104px !important;
  padding: 18px 76px 10px 22px !important;
  display: block !important;
}

/* Keep the eyebrow/title stacked at upper-left like Calendar. */
.notification-popover .notification-heading > :not(button):not([data-mark-all-notifications]),
.dhq-notifications-panel .notification-heading > :not(button):not([data-mark-all-notifications]) {
  max-width: calc(100% - 92px);
}

/* Move the close button to the top-right corner of the header. */
.notification-popover .notification-heading button[aria-label*="Close" i],
.notification-popover .notification-heading button[title*="Close" i],
.notification-popover button[data-notification-close],
.notification-popover button[data-notifications-close],
.notification-popover button[data-close-notifications],
.dhq-notifications-panel .notification-heading button[aria-label*="Close" i],
.dhq-notifications-panel .notification-heading button[title*="Close" i],
.dhq-notifications-panel button[data-notification-close],
.dhq-notifications-panel button[data-notifications-close],
.dhq-notifications-panel button[data-close-notifications] {
  position: absolute !important;
  top: 22px !important;
  right: 26px !important;
  margin: 0 !important;
  z-index: 5 !important;
}

/* Calendar-style centered date/time line, moved up. */
.notification-popover .notification-heading time,
.notification-popover .notification-heading [data-notification-date],
.notification-popover .notification-heading [data-notifications-date],
.notification-popover .notification-heading [data-current-date],
.notification-popover .notification-heading .notification-date,
.notification-popover .notification-heading .notification-time,
.notification-popover .notification-heading .notification-heading-date,
.notification-popover .notification-heading .dhq-notification-date,
.notification-popover .notification-heading .dhq-notifications-date,
.dhq-notifications-panel .notification-heading time,
.dhq-notifications-panel .notification-heading [data-notification-date],
.dhq-notifications-panel .notification-heading [data-notifications-date],
.dhq-notifications-panel .notification-heading [data-current-date],
.dhq-notifications-panel .notification-heading .notification-date,
.dhq-notifications-panel .notification-heading .notification-time,
.dhq-notifications-panel .notification-heading .notification-heading-date,
.dhq-notifications-panel .notification-heading .dhq-notification-date,
.dhq-notifications-panel .notification-heading .dhq-notifications-date {
  position: absolute !important;
  left: 50% !important;
  top: 66px !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: calc(100% - 120px) !important;
  margin: 0 !important;
  text-align: center !important;
  color: rgba(224, 238, 255, 0.92) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

/* Reduce the gap under the header before Mark all / list content. */
.notification-popover .notification-body,
.notification-popover .notifications-body,
.notification-popover .notification-list,
.dhq-notifications-panel .notification-body,
.dhq-notifications-panel .notifications-body,
.dhq-notifications-panel .notification-list {
  margin-top: 0 !important;
}

/* If Mark all is in the header, keep it below the compact date line without creating dead space. */
.notification-popover .notification-heading [data-mark-all-notifications],
.dhq-notifications-panel .notification-heading [data-mark-all-notifications] {
  margin-top: 86px !important;
}