@import "tailwindcss";

html,
body,
#root {
  font-family:
    "Pretendard Variable",
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    system-ui,
    sans-serif;
}

/* 상단 통계 바 — Design Planning Hub 스타일 곡면 장식 */
.header-stats-bar::before,
.header-stats-bar::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 36px;
  height: 30px;
  background: transparent;
  z-index: 101;
}

.header-stats-bar::before {
  left: -35px;
  border-top-left-radius: 20px;
  box-shadow: 18px 0 #093023;
}

.header-stats-bar::after {
  right: -35px;
  border-top-right-radius: 20px;
  box-shadow: -18px 0 #093023;
}

.poly-stat-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.poly-stat-dot-orange {
  background-color: #ff8b13;
  box-shadow: 0 0 8px #ff8b13, inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.poly-stat-dot-red {
  background-color: red;
  box-shadow: 0 0 8px red, inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.poly-stat-dot-yellow {
  background-color: #ffeb3b;
  box-shadow: 0 0 8px #ffeb3b, inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* F12 aside.side — 헤더 바 전체 */
.dashboard-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 10;
  height: 48px;
  min-height: 48px;
  padding: 0 22px 0 20px;
  background: linear-gradient(180deg, #37a184 0%, #29724f 20%, #07412e 100%);
  border-bottom: 1px solid #135643;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  color: #fff;
}

.side-left-group {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.side-right-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* F12 Design Planning Hub — 타이틀 */
.main_tit {
  color: #bad8ca;
  font-weight: 700;
  text-shadow:
    -1px -1px 1px rgba(0, 0, 0, 0.25),
    1px -1px 1px rgba(0, 0, 0, 0.25),
    -1px 1px 1px rgba(0, 0, 0, 0.25),
    1px 1px 1px rgba(0, 0, 0, 0.25);
}

/* F12 — 통계 영역 텍스트 그림자 */
.header-stat-text {
  text-shadow:
    -1px -1px 0 #00000040,
    1px -1px 0 #00000040,
    -1px 1px 0 #00000040,
    1px 1px 0 #00000040;
}

/* F12 — poly-stat-item (중앙 통계 한 줄) */
.poly-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  white-space: nowrap;
  color: #e6eae3;
}

.poly-stat-quarter {
  flex-shrink: 0;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.77);
}

.poly-stat-pipe {
  flex-shrink: 0;
  color: rgba(238, 234, 227, 0.4);
}

.poly-stat-divider {
  flex-shrink: 0;
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background-color: rgba(230, 234, 227, 0.4);
}

/* F12 — poly-click-stat */
.poly-click-stat {
  color: rgba(255, 255, 255, 0.99);
  font-weight: 400;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  transition: all 0.15s ease;
}

.poly-click-stat:hover {
  color: #fff;
  background: #1b543b;
  border-color: #1d6947;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.poly-click-stat.active {
  color: #fff;
  font-weight: 600;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.54) 0%,
    rgba(0, 0, 0, 0.25) 20%,
    rgba(0, 0, 0, 0.09) 80%,
    rgba(0, 0, 0, 0.54) 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.86);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}

.poly-click-stat.issue {
  background: linear-gradient(180deg, #337c5f 0%, #1c4638 100%);
  border: 1px solid #1d6947;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}