/* v18 — light right-card header and stronger green text contrast. */
:root {
  --dnxt-v18-header-bg: #f5fbfc;
  --dnxt-v18-header-bg-hover: #edf7f9;
  --dnxt-v18-green: #084b53;
  --dnxt-v18-green-strong: #043f45;
  --dnxt-v18-green-border: rgba(10,74,81,.24);
}

/* Remove the dark green block from the top of the right task card. */
#detailsPanel > .details-header-bar,
.details-drawer > .details-header-bar,
aside.details-drawer .details-header-bar,
#detailsPanel .details-header-bar,
.details-drawer .details-header-bar {
  background: var(--dnxt-v18-header-bg) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,.94), rgba(237,247,249,.92)) !important;
  border-bottom: 1px solid var(--dnxt-v18-green-border) !important;
  color: var(--dnxt-v18-green-strong) !important;
  box-shadow: none !important;
}

/* Keep Mark complete visible, but make it part of the light header. */
#detailsPanel .details-header-left,
.details-drawer .details-header-left {
  background: #ecf7f9 !important;
  border: 1px solid rgba(10,74,81,.22) !important;
  color: var(--dnxt-v18-green-strong) !important;
  box-shadow: none !important;
}
#detailsPanel .mark-complete-text,
.details-drawer .mark-complete-text {
  color: var(--dnxt-v18-green-strong) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
#detailsPanel #detailMarkComplete,
.details-drawer #detailMarkComplete,
#detailsPanel .status-check,
.details-drawer .status-check {
  background: #ffffff !important;
  border: 2px solid var(--dnxt-v18-green) !important;
  color: var(--dnxt-v18-green) !important;
}
#detailsPanel #detailMarkComplete i,
.details-drawer #detailMarkComplete i,
#detailsPanel .status-check i,
.details-drawer .status-check i {
  color: var(--dnxt-v18-green) !important;
}

/* Header action icons: light circular buttons with dark green icons. */
#detailsPanel .details-header-right .circle-btn,
.details-drawer .details-header-right .circle-btn,
#detailsPanel .details-header-bar .circle-btn,
.details-drawer .details-header-bar .circle-btn {
  background: #ffffff !important;
  border: 1px solid var(--dnxt-v18-green-border) !important;
  color: var(--dnxt-v18-green-strong) !important;
  box-shadow: 0 3px 10px rgba(10,74,81,.08) !important;
}
#detailsPanel .details-header-right .circle-btn i,
.details-drawer .details-header-right .circle-btn i,
#detailsPanel .details-header-bar .circle-btn i,
.details-drawer .details-header-bar .circle-btn i,
#detailsPanel .details-header-bar svg,
.details-drawer .details-header-bar svg {
  color: var(--dnxt-v18-green-strong) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}
#detailsPanel .details-header-right .circle-btn:hover,
.details-drawer .details-header-right .circle-btn:hover,
#detailsPanel .details-header-bar .circle-btn:hover,
.details-drawer .details-header-bar .circle-btn:hover {
  background: var(--dnxt-v18-header-bg-hover) !important;
  border-color: rgba(10,74,81,.36) !important;
}

/* Make green labels and breadcrumb text easier to read. */
#detailsPanel .detail-breadcrumb,
#detailsPanel .detail-breadcrumb *,
.details-drawer .detail-breadcrumb,
.details-drawer .detail-breadcrumb *,
#detailsPanel .prop-label,
#detailsPanel .prop-row label,
#detailsPanel .detail-field-label,
#detailsPanel .detail-section-title,
.details-drawer .prop-label,
.details-drawer .prop-row label,
.details-drawer .detail-field-label,
.details-drawer .detail-section-title {
  color: var(--dnxt-v18-green-strong) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
#detailsPanel .detail-breadcrumb i,
.details-drawer .detail-breadcrumb i,
#detailsPanel .prop-label i,
.details-drawer .prop-label i {
  color: var(--dnxt-v18-green) !important;
  opacity: 1 !important;
}

/* Preserve readable light treatment in dark theme too. */
html[data-theme="dark"] #detailsPanel .details-header-bar,
html[data-theme="dark"] .details-drawer .details-header-bar {
  background: #0b292d !important;
  background-image: linear-gradient(135deg, rgba(15,45,48,.96), rgba(11,34,36,.96)) !important;
  border-bottom-color: rgba(163,226,233,.22) !important;
}
html[data-theme="dark"] #detailsPanel .details-header-left,
html[data-theme="dark"] .details-drawer .details-header-left,
html[data-theme="dark"] #detailsPanel .details-header-bar .circle-btn,
html[data-theme="dark"] .details-drawer .details-header-bar .circle-btn {
  background: #113438 !important;
  border-color: rgba(163,226,233,.26) !important;
}
html[data-theme="dark"] #detailsPanel .mark-complete-text,
html[data-theme="dark"] .details-drawer .mark-complete-text,
html[data-theme="dark"] #detailsPanel .details-header-bar i,
html[data-theme="dark"] .details-drawer .details-header-bar i,
html[data-theme="dark"] #detailsPanel .detail-breadcrumb,
html[data-theme="dark"] #detailsPanel .detail-breadcrumb *,
html[data-theme="dark"] .details-drawer .detail-breadcrumb,
html[data-theme="dark"] .details-drawer .detail-breadcrumb * {
  color: #c5f0f5 !important;
}