/**
 * @file
 * Slide-over Detail Drawer Stylesheet
 * SMIP EC Knowledge Hub module.
 */

/* ==========================================================================
   Slide-over Detail Drawer & Backdrop with Blur (Screenshot 2)
   ========================================================================== */
/* Body scroll lock when detail drawer is open — no overflow:hidden/position:fixed
   (those blank the page behind the overlay). JS pins scroll via wheel/touch. */
html.ecl-drawer-open,
body.ecl-drawer-open {
  overscroll-behavior: none !important;
  scrollbar-width: none !important;
}

html.ecl-drawer-open::-webkit-scrollbar,
body.ecl-drawer-open::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.ecl-side-drawer-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 46, 0.3) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  z-index: 9998 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overscroll-behavior: contain !important;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ecl-side-drawer-backdrop.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.ecl-side-drawer-backdrop[hidden] {
  display: none !important;
}

.ecl-side-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 620px !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: var(--ec-color-white, #FFFFFF) !important;
  border-top: 1px solid var(--ec-color-drawer-border, #E2E8F0) !important;
  border-left: 1px solid var(--ec-color-drawer-border, #E2E8F0) !important;
  z-index: 10001 !important;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16) !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  overscroll-behavior: contain !important;
  overflow-x: hidden !important;
}

.ecl-side-drawer,
.ecl-side-drawer *,
.ecl-side-drawer *::before,
.ecl-side-drawer *::after {
  box-sizing: border-box !important;
}

.ecl-side-drawer.is-open {
  transform: translateX(0) !important;
}

.ecl-side-drawer[hidden] {
  display: none !important;
}

.ecl-side-drawer__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 62px !important;
  min-height: 62px !important;
  padding: 14px 36px !important;
  border-bottom: 1px solid var(--ec-color-drawer-border, #E2E8F0) !important;
  flex-shrink: 0 !important;
  background: var(--ec-color-white, #FFFFFF) !important;
  box-sizing: border-box !important;
}

.ecl-side-drawer__nav {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.ecl-side-drawer__nav-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 20px !important;
  gap: 10px !important;
  opacity: 1 !important;
  padding: 8px !important;
  background: var(--ec-color-filter-border, #EDEDF0) !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  box-sizing: border-box !important;
  transition: background-color 0.12s ease !important;
}

.ecl-side-drawer__nav-btn:hover {
  background: var(--ec-color-divider, #D1D9F1) !important;
}

.ecl-side-drawer__nav-btn:disabled,
.ecl-side-drawer__nav-btn[disabled],
.ecl-side-drawer__nav-btn.is-disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

.ecl-side-drawer__nav-btn svg {
  width: 12px !important;
  height: 12px !important;
  stroke: var(--On-surface-on-surface-brand, #00002E) !important;
  stroke-width: 2px !important;
  fill: none !important;
}

.ecl-side-drawer__nav-index-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.ecl-side-drawer__nav-index {
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  padding: 0 !important;
}

/* Full-drawer loading overlay shown during record switching */
.ecl-side-drawer__loading-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ecl-side-drawer.is-loading-record .ecl-side-drawer__loading-overlay {
  opacity: 1 !important;
  pointer-events: all !important;
}

.ecl-side-drawer__loading-spinner {
  width: 36px !important;
  height: 36px !important;
  border: 3px solid rgba(0, 70, 255, 0.15) !important;
  border-top-color: #0046FF !important;
  border-radius: 50% !important;
  animation: ecl-drawer-spin 0.75s linear infinite !important;
}

@keyframes ecl-drawer-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ecl-side-drawer.is-loading-record .ecl-side-drawer__content {
  pointer-events: none !important;
}

/* Keep navigation and dismissal available while record details are loading. */
.ecl-side-drawer.is-loading-record .ecl-side-drawer__header {
  position: relative !important;
  z-index: 100 !important;
}

.ecl-side-drawer__close-btn {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  opacity: 1 !important;
  transition: opacity 0.12s ease !important;
}

.ecl-side-drawer__close-btn:hover {
  opacity: 0.7 !important;
}

.ecl-side-drawer__close-btn svg {
  width: 24px !important;
  height: 24px !important;
  stroke: var(--On-surface-on-surface-brand, #00002E) !important;
  stroke-width: 1.5px !important;
  fill: none !important;
}

.ecl-side-drawer__dotted-divider {
  width: 100% !important;
  height: 1px !important;
  border: 0 !important;
  background: var(--ec-color-divider, #D1D9F1) !important;
  margin: 0 !important;
  opacity: 1 !important;
}

.ecl-side-drawer__content {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding: 24px 36px 32px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  box-sizing: border-box !important;
  scrollbar-gutter: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.ecl-side-drawer__meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.ecl-side-drawer__type {
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  word-break: break-word !important;
}

.ecl-side-drawer__type[hidden],
.ecl-side-drawer__match[hidden],
.ecl-side-drawer__meta-pipe[hidden] {
  display: none !important;
}

.ecl-side-drawer__meta-pipe {
  color: var(--ec-color-disable-text, #696984) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  flex-shrink: 0 !important;
}

.ecl-side-drawer__match {
  flex-shrink: 0 !important;
  margin-left: 0 !important;
}

.ecl-side-drawer__title {
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 20px !important;
  line-height: 32px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  color: var(--ec-color-primary, #004494) !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}

/* Record meta block — same card meta / +N more behavior as result cards */
.ecl-side-drawer__record-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 16px 0 !important;
  box-sizing: border-box !important;
}

.ecl-side-drawer__record-meta[hidden],
.ecl-side-drawer__record-meta.is-hidden {
  display: none !important;
}

.ecl-side-drawer__record-meta .ecl-result-card__meta-row {
  width: 100% !important;
}

.ecl-side-drawer__info-badges {
  display: none !important;
}

.ecl-side-drawer__badge-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
}

.ecl-side-drawer__badge-text {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

.ecl-icon--badge {
  width: 16px !important;
  height: 16px !important;
  stroke: var(--On-surface-on-surface-brand, #00002E) !important;
  stroke-width: 1.5px !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

.ecl-side-drawer__section {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.ecl-side-drawer__section[hidden],
.ecl-side-drawer__section.is-hidden,
.ecl-side-drawer__info-badges[hidden],
.ecl-side-drawer__info-badges.is-hidden,
.ecl-side-drawer__badge-item[hidden],
.ecl-side-drawer__badge-item.is-hidden,
.ecl-side-drawer__meta-row[hidden],
.ecl-side-drawer__meta-row.is-hidden,
.ecl-side-drawer__type[hidden],
.ecl-side-drawer__type.is-hidden,
.ecl-side-drawer__match[hidden],
.ecl-side-drawer__match.is-hidden,
.ecl-side-drawer__meta-pipe[hidden],
.ecl-side-drawer__meta-pipe.is-hidden,
.ecl-side-drawer__meta-row:not(:has(.ecl-side-drawer__match:not([hidden]):not(.is-hidden):not(:empty))) .ecl-side-drawer__meta-pipe,
.ecl-side-drawer__meta-row:not(:has(.ecl-side-drawer__type:not([hidden]):not(.is-hidden):not(:empty))) .ecl-side-drawer__meta-pipe,
.ecl-side-drawer__type[hidden] ~ .ecl-side-drawer__meta-pipe,
.ecl-side-drawer__type.is-hidden ~ .ecl-side-drawer__meta-pipe {
  display: none !important;
}

.ecl-side-drawer__section-title {
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.ecl-side-drawer__description-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.ecl-side-drawer__description-text {
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}

.ecl-side-drawer__desc-snippet {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
  line-clamp: 5 !important;
  overflow: hidden !important;
}

.ecl-side-drawer__desc-full {
  display: inline !important;
}

.ecl-side-drawer__desc-snippet[hidden],
.ecl-side-drawer__desc-full[hidden] {
  display: none !important;
}

.ecl-side-drawer__read-more {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  color: var(--ec-color-primary, #004494) !important;
  text-decoration: none !important;
  margin-left: 0 !important;
  cursor: pointer !important;
  display: inline-block !important;
  margin-top: 8px !important;
}

.ecl-side-drawer__read-more:hover {
  text-decoration: underline !important;
}

.ecl-side-drawer__read-more[hidden] {
  display: none !important;
}

.ecl-side-drawer__source-text {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 8px !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.ecl-side-drawer__source-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  max-width: 100% !important;
}

.ecl-side-drawer__source-chip .ecl-side-drawer__source-tag,
.ecl-side-drawer__source-text span:not(.ecl-side-drawer__meta-pipe) {
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  max-width: 100% !important;
}

.ecl-side-drawer__source-text .ecl-side-drawer__meta-pipe {
  display: inline-block !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  color: var(--ec-color-text, #00002E) !important;
  user-select: none !important;
}

.ecl-side-drawer__source-chip:last-child .ecl-side-drawer__meta-pipe,
.ecl-side-drawer__source-chip:only-child .ecl-side-drawer__meta-pipe,
.ecl-side-drawer__source-text .ecl-side-drawer__source-chip:last-of-type .ecl-side-drawer__meta-pipe,
.ecl-side-drawer__source-text .ecl-side-drawer__source-chip:only-of-type .ecl-side-drawer__meta-pipe {
  display: none !important;
}

.ecl-side-drawer__person-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.ecl-side-drawer__extra-authors {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.ecl-side-drawer__extra-authors[hidden] {
  display: none !important;
}

.ecl-side-drawer__person-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.ecl-side-drawer__avatar {
  width: 24px !important;
  height: 28px !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ec-color-text, #00002E) !important;
  flex-shrink: 0 !important;
}

.ecl-icon--user {
  width: 18px !important;
  height: 18px !important;
}

.ecl-side-drawer__person-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: calc(100% - 36px) !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  box-sizing: border-box !important;
}

.ecl-side-drawer__person-email {
  display: block !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
  white-space: normal !important;
}

.ecl-side-drawer__person-org {
  display: block !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  max-width: 100% !important;
  white-space: normal !important;
}

.ecl-side-drawer__more-link {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-align: left !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 20px !important;
  line-height: 30px !important;
  color: var(--On-surface-on-surface-primary, #0046FF) !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  margin-top: 6px !important;
  cursor: pointer !important;
  display: inline-block !important;
}

.ecl-side-drawer__more-link:hover {
  text-decoration: underline !important;
}

/* Drawer Map Preview Container (fits unified ec-interactive-map) */
.ecl-side-drawer__map-preview {
  position: relative !important;
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
  border-radius: 4px !important;
  border: 0 !important;
  overflow: hidden !important;
  background: #d4e8dd !important;
  z-index: 2 !important;
}

.ecl-side-drawer__map-preview .ecl-interactive-map-container,
.ecl-side-drawer__map-preview .ecl-interactive-map__wrapper {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.ecl-side-drawer__section--links,
#ecl-drawer-links-section {
  position: relative !important;
  clear: both !important;
  margin-top: 20px !important;
  z-index: 3 !important;
}

.ecl-side-drawer__map-preview .ecl-map-svg {
  border-radius: 4px !important;
  overflow: hidden !important;
}

.ecl-side-drawer__map-empty {
  align-items: center !important;
  background: #f5f7fb !important;
  border: 1px dashed #b9c4d6 !important;
  border-radius: 4px !important;
  color: #42526e !important;
  display: flex !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  height: 100% !important;
  justify-content: center !important;
  padding: 16px !important;
  text-align: center !important;
}

.ecl-side-drawer__links-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.ecl-side-drawer__link-item {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--On-surface-on-surface-primary, #0046FF) !important;
  text-decoration: none !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}

.ecl-side-drawer__link-item:hover {
  text-decoration: underline !important;
}

.ecl-side-drawer__footer {
  padding: 16px 36px !important;
  border-top: 1px solid var(--ec-color-drawer-border, #E2E8F0) !important;
  background: var(--ec-color-white, #FFFFFF) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.ecl-button--visit-source {
  width: auto !important;
  min-width: 146px !important;
  height: 52px !important;
  padding: 12px 24px !important;
  background: var(--ec-color-search-button, #FFBE5C) !important;
  color: var(--ec-color-text, #00002E) !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 28px !important;
  letter-spacing: 0 !important;
  border: none !important;
  border-radius: var(--Radius-s, 4px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
  box-sizing: border-box !important;
}

.ecl-button--visit-source:hover {
  background: var(--ec-color-tab-bottom-border, #FF8A20) !important;
}

.ecl-button--visit-source svg,
.ecl-button--visit-source .ecl-icon,
.ecl-button--visit-source .ecl-icon--external {
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  stroke: var(--ec-color-text, #00002E) !important;
  color: var(--ec-color-text, #00002E) !important;
  stroke-width: 2px !important;
  flex-shrink: 0 !important;
}

.ecl-button--visit-source svg *,
.ecl-button--visit-source .ecl-icon * {
  fill: none !important;
  stroke: var(--ec-color-text, #00002E) !important;
  stroke-width: 2px !important;
}

/* Responsive Drawer on Small Screens */
@media (max-width: 1024px) {
  .ecl-side-drawer {
    width: 100% !important;
    max-width: 100vw !important;
  }
}