/* Shared dashboard header skin based on the Design Planning header. */
:root {
  --common-header-h: 48px;
  --common-header-green-dark: #07412e;
  --common-header-green-mid: #29724f;
  --common-header-green-light: #37a184;
  --common-header-panel-dark: #093023;
  --common-header-panel-mid: #074833;
  --common-header-border: #135643;
  --common-header-title: #bad8ca;
  --common-header-text: #cef1eb;
  --common-header-muted: #cef1eb8c;
  --common-header-yellow: #ffdb3a;
  --common-header-orange: #ff9f0a;
  --common-header-red: #ff5252;
  --common-header-emerald: #10b981;
  --common-header-grey: #b0b0b0;
}

.dp-topbar,
.dashboard-header-bar,
body.report-page .report-header,
.platform .header {
  z-index: 1000 !important;
  min-height: var(--common-header-h) !important;
  height: var(--common-header-h) !important;
  padding: 0 22px 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  background: linear-gradient(
    var(--common-header-green-light) 0%,
    var(--common-header-green-mid) 20%,
    var(--common-header-green-dark) 100%
  ) !important;
  border-bottom: 1px solid var(--common-header-border) !important;
  box-shadow: 0 2px 10px #0003 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.dp-topbar *,
.dashboard-header-bar *,
body.report-page .report-header *,
.platform .header * {
  box-sizing: border-box;
}

.dp-side-left-group,
.side-left-group,
body.report-page .report-brand-block,
.platform .container {
  z-index: 140 !important;
  position: relative !important;
  flex: 0 1 520px !important;
  min-width: 240px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.dp-side-title-main,
.side-title-main,
.main_tit,
body.report-page .report-brand-block h1,
body.report-page .report-brand-block h1 a,
.platform .header-title {
  color: var(--common-header-title) !important;
  text-shadow: 1px 1px 1px #00302480 !important;
  font-size: 20px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  display: inline-block !important;
  max-width: 340px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
}

.common-header-title-link {
  color: inherit !important;
  text-decoration: none !important;
  text-shadow: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  white-space: nowrap !important;
}

.wd-common-header [data-common-header-title-split="true"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.common-header-title-link:hover,
.common-header-title-link:focus-visible {
  color: #fff !important;
  text-decoration: none !important;
}

.common-header-title-link:focus-visible {
  outline: 1px solid rgba(206, 241, 235, 0.72) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

.common-header-title-separator {
  color: inherit !important;
  flex: 0 0 auto !important;
  opacity: 0.9 !important;
}

body.report-page .report-brand-block h1 .common-header-title-link,
body.report-page .report-brand-block h1 .common-header-title-separator {
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.report-page .report-brand-block p {
  display: none !important;
}

.dp-side-title-main[data-main-dashboard-link] {
  max-width: 380px !important;
  font-size: 20px !important;
}

body.report-page .report-brand-block h1 {
  max-width: 380px !important;
}

.dashboard-header-bar .side-title-main {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 340px !important;
  font-size: 20px !important;
  line-height: 24px !important;
}

.platform .container {
  flex: 0 0 390px !important;
  min-width: 390px !important;
}

.platform .header .heading-1,
.platform .header .text {
  display: flex !important;
  overflow: visible !important;
}

.platform .header-title {
  max-width: 390px !important;
  font-size: 20px !important;
  line-height: 24px !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.talent-div-dropdown-wrap,
.talent-header-hamburger-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.wd-common-header__brand-title,
.wd-common-header__nav-wrap,
.wd-common-header__menu-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.wd-common-header__brand-title {
  gap: 6px !important;
}

.wd-common-header__nav-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
}

.talent-div-dropdown-menu,
.talent-header-hamburger-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
}

.talent-div-dropdown-menu {
  left: 0 !important;
}

.talent-header-hamburger-menu {
  right: 0 !important;
}

.talent-header-menu-action svg {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
}

.dp-topbar:has(.dp-side-title-main[data-main-dashboard-link]) .dp-side-polygon-stats {
  max-width: 700px !important;
  min-width: 700px !important;
  gap: 8px !important;
  padding-inline: 36px !important;
}

.dp-side-polygon-stats,
.side-polygon-stats,
.header-stats-bar,
body.report-page .report-project-alert,
.platform .header-nav {
  z-index: 120 !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  position: absolute !important;
  top: 0 !important;
  left: calc(50% + 18px) !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: min(700px, calc(100vw - 740px)) !important;
  min-width: min(700px, calc(100vw - 740px)) !important;
  margin: 0 !important;
  padding: 0 36px !important;
  background: linear-gradient(90deg, var(--common-header-panel-dark) 20%, var(--common-header-panel-mid) 50%, var(--common-header-panel-dark) 80%) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--common-header-border) !important;
  border-radius: 0 0 16px 16px !important;
  filter: drop-shadow(0 2px 4px #0003) !important;
  clip-path: none !important;
  overflow: visible !important;
}

body.index-page.report-page .report-project-alert {
  left: calc(50% + 18px) !important;
  max-width: min(700px, calc(100vw - 740px)) !important;
  min-width: min(700px, calc(100vw - 740px)) !important;
  padding-inline: 36px !important;
}

body.index-page.report-page .report-header-actions {
  min-width: 348px !important;
}

.wd-common-header [data-workdesk-header-filters] {
  white-space: nowrap !important;
}

body .wd-common-header [data-workdesk-header-filters] > * {
  position: relative !important;
  left: 0 !important;
}

body .wd-common-header [data-workdesk-header-filters] > .dp-poly-stat-item {
  left: 5px !important;
}

body .wd-common-header [data-workdesk-header-filters] > .poly-stat-item,
body .wd-common-header [data-workdesk-header-filters] > .dp-poly-stat-item {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

body .wd-common-header [data-workdesk-header-filter-summary],
body .wd-common-header [data-filter-summary],
body .wd-common-header .filter-summary-chip,
body .wd-common-header .dp-filter-summary-chip,
body .wd-common-header .report-filter-summary-chip {
  display: none !important;
}

.dp-side-polygon-stats::before,
.dp-side-polygon-stats::after,
.side-polygon-stats::before,
.side-polygon-stats::after,
.header-stats-bar::before,
.header-stats-bar::after,
body.report-page .report-project-alert::before,
body.report-page .report-project-alert::after {
  content: "" !important;
  pointer-events: none !important;
  z-index: 121 !important;
  background: transparent !important;
  width: 36px !important;
  height: 30px !important;
  position: absolute !important;
  top: 0 !important;
}

.dp-side-polygon-stats::before,
.side-polygon-stats::before,
.header-stats-bar::before,
body.report-page .report-project-alert::before {
  left: -35px !important;
  border-top-right-radius: 20px !important;
  box-shadow: 18px 0 0 var(--common-header-panel-dark) !important;
}

.dp-side-polygon-stats::after,
.side-polygon-stats::after,
.header-stats-bar::after,
body.report-page .report-project-alert::after {
  right: -35px !important;
  border-top-left-radius: 20px !important;
  box-shadow: -18px 0 0 var(--common-header-panel-dark) !important;
}

.dp-poly-stat-item,
.poly-stat-item,
body.report-page .report-project-alert {
  color: #eeeae3 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: -1px -1px #00000040, 1px -1px #00000040, -1px 1px #00000040, 1px 1px #00000040 !important;
  white-space: nowrap !important;
}

.dp-poly-click-stat,
.poly-click-stat,
body.index-page.report-page .report-stat-pill,
body.report-page .report-stat-pill,
.platform .header-nav a {
  color: #fffc !important;
  appearance: none !important;
  cursor: pointer !important;
  border: 1px solid #1d6947 !important;
  border-radius: 4px !important;
  background: linear-gradient(#337c5f 0%, #1c4638 100%) !important;
  padding: 2px 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 1px #0000004d !important;
}

body .wd-common-header [data-workdesk-header-filters] [data-workdesk-header-filter][aria-pressed="false"]:hover,
.platform .header-nav a:hover {
  color: #fff !important;
  background: #1b543b !important;
}

body .wd-common-header [data-workdesk-header-filters] [data-workdesk-header-filter][aria-pressed="true"],
.platform .header-nav a[aria-current="page"] {
  color: #fff !important;
  background: linear-gradient(#0000008a 0%, #00000040 20%, #00000017 80%, #0000008a 100%) !important;
  border-color: #000000db !important;
  font-weight: 800 !important;
  box-shadow: inset 0 0 2px #0000004d !important;
}

body .wd-common-header [data-workdesk-header-filters] [data-workdesk-header-filter][aria-pressed="false"] {
  color: #fffc !important;
  background: linear-gradient(#337c5f 0%, #1c4638 100%) !important;
  border-color: #1d6947 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 1px #0000004d !important;
}

.platform .header-nav a {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 8px !important;
  color: var(--common-header-text) !important;
  text-shadow: 1px 1px 1px #00302480 !important;
}

.platform .header-nav a:hover,
.platform .header-nav a:focus-visible,
.platform .header-nav a[aria-current="page"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  text-decoration: none !important;
}

.dp-stat-total,
.poly-stat-val,
body.report-page .report-stat-pill strong {
  color: var(--common-header-yellow) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* 중앙 현황판의 글자 규격은 팀 전용 CSS보다 우선하는 공통 계약입니다. */
body .wd-common-header [data-workdesk-header-filters] .report-project-alert-title,
body .wd-common-header [data-workdesk-header-filters] .poly-stat-quarter,
body .wd-common-header [data-workdesk-header-filters] .dp-period-label,
body .wd-common-header [data-workdesk-header-filters] .wd-common-header__period {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
}

body .wd-common-header [data-workdesk-header-filters] .wd-common-header__filter [data-workdesk-header-filter-label] {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

body .wd-common-header [data-workdesk-header-filters] .wd-common-header__filter [data-workdesk-header-filter-value] {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

body .wd-common-header [data-workdesk-header-filters] .wd-common-header__filter em,
body .wd-common-header [data-workdesk-header-filters] .wd-common-header__filter .poly-stat-unit,
body .wd-common-header [data-workdesk-header-filters] .wd-common-header__filter .dp-stat-unit,
body .wd-common-header [data-workdesk-header-filters] .wd-common-header__filter .wd-common-header__filter-unit {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

.dp-stat-ongoing,
.dp-poly-click-stat [data-stat="ongoing"],
.poly-click-stat .text-\[\#10b981\],
body.index-page.report-page .report-stat-pill.is-active strong {
  color: var(--common-header-emerald) !important;
}

.dp-stat-hold,
.dp-poly-click-stat [data-stat="hold"],
.poly-click-stat .text-\[\#ff9f0a\],
body.index-page.report-page .report-stat-pill.is-holding strong {
  color: var(--common-header-orange) !important;
}

.dp-stat-completed,
.dp-poly-click-stat [data-stat="completed"],
.poly-click-stat .text-\[\#b0b0b0\],
body.index-page.report-page .report-stat-pill.is-completed strong {
  color: #b0b0b0 !important;
}

.dp-stat-issue,
.dp-poly-click-stat [data-stat="issue"],
.poly-click-stat .text-\[\#ff5252\],
body.index-page.report-page .report-stat-pill.is-issue strong {
  color: var(--common-header-red) !important;
}

.dp-filter-summary-chip,
.filter-summary-chip,
.report-filter-summary-chip {
  color: #ffffffd9 !important;
  background: #ffffff1f !important;
  border: 0 !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-shadow: none !important;
}

.dp-topbar-divider,
.poly-stat-divider,
.report-topbar-divider {
  flex: 0 0 auto !important;
  width: 1px !important;
  height: 16px !important;
  margin: 0 4px !important;
  background: rgba(238, 234, 227, 0.4) !important;
}

body.index-page.report-page .report-project-alert-title::after {
  content: "·" !important;
  margin-left: 8px !important;
  color: rgba(238, 234, 227, 0.4) !important;
  font-weight: 600 !important;
}

body.index-page.report-page .report-stat-pill span,
body.index-page.report-page .report-stat-pill em {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

.dp-side-right-actions,
.side-right-actions,
body.report-page .report-header-actions,
.platform .header-actions {
  z-index: 140 !important;
  position: relative !important;
  flex: 0 0 auto !important;
  min-width: 348px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 0 !important;
  left: 8px !important;
}

.dp-date-indicator,
.dp-ref-date,
.board-calendar-ref-text,
body.report-page .report-date {
  color: #cef1ebeb !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.header-date-ref,
.report-header-date-ref,
.common-header-date-ref {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.header-date-ref-item,
.report-header-date-ref-item,
.common-header-date-ref .header-date-ref-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 1px !important;
}

.header-date-ref-label,
.report-header-date-ref-label,
.common-header-date-ref .header-date-ref-label {
  color: var(--common-header-muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

.header-date-ref-value,
.report-header-date-ref-value,
.common-header-date-ref .header-date-ref-value {
  color: #cef1ebeb !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

.header-date-ref-divider,
.report-header-date-ref-divider,
.common-header-date-ref .header-date-ref-divider {
  flex-shrink: 0 !important;
  width: 1px !important;
  height: 28px !important;
  background: #cef1eb38 !important;
}

.dp-date-indicator.common-header-date-ref,
.dp-ref-date.common-header-date-ref,
.board-calendar-ref-text.common-header-date-ref {
  font-size: 16px !important;
  line-height: normal !important;
  font-weight: 400 !important;
}

.dp-icon-btn,
.header-view-btn-new,
.header-action-btn-new,
.team-status-btn-new,
.header-calendar-btn-new,
body.report-page .report-calendar-button,
body.report-page .report-header-actions .report-header-menu-button,
body.report-page .report-header-actions .po-menu-button,
body.report-page .report-brand-block > .report-team-status-button,
.platform .header-control-btn {
  color: var(--common-header-text) !important;
  cursor: pointer !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 1.5px solid #1a4d42 !important;
  border-radius: 50% !important;
  background: linear-gradient(#0d3f34 0%, #051f19 100%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all .2s ease-in-out !important;
  box-shadow: 0 0 0 1px #000, 0 2px 2px #0009 !important;
}

.dp-icon-btn svg,
.header-view-btn-new svg,
.header-action-btn-new svg,
.team-status-btn-new svg,
.header-calendar-btn-new svg,
body.report-page .report-header-icon,
body.report-page .report-calendar-button img,
body.report-page .report-header-actions .report-header-menu-button img,
body.report-page .report-header-actions .po-menu-button img,
body.report-page .report-brand-block > .report-team-status-button img {
  width: 16px !important;
  height: 16px !important;
  color: currentColor !important;
  stroke: currentColor !important;
  filter: none !important;
}

.talent-div-dropdown-btn {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border: 1px solid rgba(186, 216, 202, 0.4) !important;
  background: rgba(186, 216, 202, 0.1) !important;
  color: #bad8ca !important;
  box-shadow: none !important;
  transition: background .15s ease, transform .2s ease !important;
}

.talent-div-dropdown-btn svg {
  width: 13px !important;
  height: 13px !important;
}

.talent-div-dropdown-btn:hover,
.talent-div-dropdown-btn.active {
  background: rgba(186, 216, 202, 0.22) !important;
}

.talent-div-dropdown-btn.active {
  transform: rotate(180deg) !important;
}

.dp-icon-btn:hover,
.dp-icon-btn.active,
.header-view-btn-new:hover,
.header-view-btn-new.active,
.header-action-btn-new:hover,
.header-action-btn-new.active,
.team-status-btn-new:hover,
.team-status-btn-new.active,
.header-calendar-btn-new:hover,
.header-calendar-btn-new.active,
body.report-page .report-calendar-button:hover,
body.report-page .report-header-actions .report-header-menu-button:hover,
body.report-page .report-header-actions .po-menu-button:hover,
body.report-page .report-brand-block > .report-team-status-button:hover,
.platform .header-control-btn:hover,
.platform .header-control-btn.active {
  color: #fff !important;
  background: linear-gradient(#115244 0%, #072b23 100%) !important;
  border-color: #36816d !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 1px #000, 0 0 8px #24cc9e66, 0 4px 8px #000000b3 !important;
}

.talent-div-dropdown-btn:hover,
.talent-div-dropdown-btn.active {
  border-color: rgba(186, 216, 202, 0.4) !important;
  background: rgba(186, 216, 202, 0.22) !important;
  color: #bad8ca !important;
  box-shadow: none !important;
}

.talent-div-dropdown-btn.active {
  transform: rotate(180deg) !important;
}

.dp-div-dropdown-menu,
.div-dropdown-menu,
.dp-header-hamburger-menu,
.header-hamburger-menu,
body.report-page .report-div-dropdown-menu,
body.report-page .report-header-hamburger-menu,
body.report-page .report-header-menu-popover {
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  z-index: 1300 !important;
  background: #0a1814f5 !important;
  border: 1px solid #36816d66 !important;
  border-radius: 10px !important;
  min-width: 160px !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  list-style: none !important;
  box-shadow: 0 8px 24px #00000080 !important;
}

.dp-div-dropdown-menu a,
.div-dropdown-menu a,
.dp-header-hamburger-menu a,
.dp-header-hamburger-menu button,
.header-hamburger-menu a,
.header-hamburger-menu button,
body.report-page .report-div-dropdown-menu a,
body.report-page .report-header-menu-item,
body.report-page .report-header-hamburger-menu a,
body.report-page .report-header-hamburger-menu button {
  color: var(--common-header-text) !important;
  cursor: pointer !important;
  text-align: left !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: 0 !important;
  width: 100% !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

.dp-div-dropdown-menu a:hover,
.div-dropdown-menu a:hover,
.dp-header-hamburger-menu a:hover,
.dp-header-hamburger-menu button:hover,
.header-hamburger-menu a:hover,
.header-hamburger-menu button:hover,
body.report-page .report-div-dropdown-menu a:hover,
body.report-page .report-header-menu-item:hover,
body.report-page .report-header-hamburger-menu a:hover,
body.report-page .report-header-hamburger-menu button:hover {
  color: #fff !important;
  background: #36816d33 !important;
}

@media (max-width: 1280px) {
  .dp-topbar:has(.dp-side-title-main[data-main-dashboard-link]) .dp-side-polygon-stats,
  .dp-side-polygon-stats,
  .side-polygon-stats,
  .header-stats-bar,
  body.report-page .report-project-alert,
  .platform .header-nav {
    max-width: min(760px, calc(100vw - 520px)) !important;
    min-width: min(460px, calc(100vw - 520px)) !important;
    padding-inline: 32px !important;
  }

  .dp-poly-click-stat,
  .poly-click-stat,
  body.report-page .report-stat-pill,
  .platform .header-nav a {
    font-size: 16px !important;
    padding-inline: 6px !important;
  }
}
